/* ==========================================================================
   TAMARA ČESNIK — slog.css
   Videz po predlogu z dne 22. 8. 2026: svetel papir, ena rjava, ena
   roza-rdeča. Slike so temne in polne podrobnosti — stran mora biti tiha,
   da jih ne preglasi.

   Vse barve in mere so zbrane spodaj v :root. Spremeni tam in velja povsod.
   ========================================================================== */

/* --- Pisave: na lastnem strežniku, ne z Googla (GDPR) ---
   Datoteke so v mapi pisave/. Samo latinica in latin-ext (šumniki). */
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(pisave/ebgaramond-normal-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;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(pisave/ebgaramond-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(pisave/ebgaramond-normal-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;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(pisave/ebgaramond-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(pisave/ebgaramond-normal-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;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(pisave/ebgaramond-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-italic-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;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(pisave/roboto-normal-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;
}

:root {
  /* --- podlaga --- */
  --papir:          #faf8f4;   /* glavno ozadje */
  --papir-2:        #ffffff;   /* svetlejši odseki, kartice */
  --papir-3:        #f2ede5;   /* nežna ploskev za slikami */

  /* --- besedilo --- */
  --crnilo:         #26221f;
  --medlo:          #6f665e;
  --medlo-2:        #988d82;

  /* --- barvi znaka --- */
  --rjava:          #7b4a44;   /* zemeljska rjava z roza pigmentom */
  --rjava-tem:      #623a35;
  --rdeca:          #c74f63;   /* roza-rdeča, poudarek */
  --rdeca-tem:      #b03c50;

  /* --- črte in sence --- */
  --rob:            rgba(38, 34, 31, 0.11);
  --rob-2:          rgba(38, 34, 31, 0.22);
  --senca:          rgba(38, 34, 31, 0.13);

  /* --- pisave --- */
  --serif:          "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:           "Roboto", "Segoe UI", Arial, sans-serif;

  /* --- mere --- */
  --sirina:         1240px;
  --glava-visina:   90px;
  --mera-slike:     560px;

  /* --- stara imena, da nič ne odpove, če je kje ostalo --- */
  --ozadje: var(--papir);
  --ozadje-2: var(--papir-2);
  --ozadje-3: var(--papir-2);
  --besedilo: var(--crnilo);
  --besedilo-medlo: var(--medlo);
  --zlato: var(--rjava);
  --zlato-mocno: var(--rjava);
  --zlato-svetlo: var(--rdeca);
  --zlato-temno: var(--rjava-tem);
  --digitalno: var(--rdeca);
  --digitalno-tem: var(--rdeca-tem);
  --rob-mocan: var(--rob-2);
  --senca-mocna: rgba(38, 34, 31, 0.24);
  --pisava-logo: var(--serif);
  --pisava-naslov: var(--sans);
  --pisava-tekst: var(--sans);
  --znak-rjava: var(--rjava);
  --znak-rjava-tem: var(--rjava-tem);
  --znak-piksel: var(--rdeca);
}

/* ==========================================================================
   OSNOVA
   ========================================================================== */

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

/* clip (in ne hidden) — hidden bi na html pokvaril lepljivo glavo. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--crnilo);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* clip namesto hidden: hidden na telesu strani na nekaterih telefonih
     pokvari postavitev elementov s position: fixed (npr. povečave slik) */
  overflow-x: clip;
}

/* height: auto je nujen — brez njega brskalnik vzame višino iz atributa
   height v HTML in slika se navpično raztegne. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--rjava); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--rdeca); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.004em;
  margin: 0 0 0.55em;
  color: var(--crnilo);
}

h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }

::selection { background: var(--rdeca); color: #fff; }
:focus-visible { outline: 2px solid var(--rdeca); outline-offset: 3px; }

.vsebina {
  width: 100%;
  max-width: var(--sirina);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}

.sredina { text-align: center; }

/* Brez tega bi element z atributom hidden, ki ima svoj display (npr. .primerjava),
   ostal viden — pravilo za razred premaga privzeto pravilo brskalnika. */
[hidden] { display: none !important; }

.skrito {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   ŠTIRJE JEZIKI — preklop brez utripanja
   ========================================================================== */

.lang-sl .en, .lang-sl .it, .lang-sl .de,
.lang-en .sl, .lang-en .it, .lang-en .de,
.lang-it .sl, .lang-it .en, .lang-it .de,
.lang-de .sl, .lang-de .en, .lang-de .it { display: none !important; }

/* Besedilo, ki v izbranem jeziku še ni prevedeno, se prikaže v angleščini
   namesto da bi izginilo. Označbo doda skripta.js. */
.lang-it .nadomescen,
.lang-de .nadomescen { display: revert !important; }

/* ==========================================================================
   GLAVA
   ========================================================================== */

.glava {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rob);
}

.glava-vrstica {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: var(--glava-visina);
}

/* Znak je odstranjen 25. 8. 2026 — v glavi stoji samo napis "Tamara Česnik".
   Ker napis nima več soseda, je za spoznanje večji kot prej. */
.logo { display: flex; align-items: center; flex: none; line-height: 1.05; }
.logo-ime {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 2.9vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.045em;
  color: var(--rjava);
  white-space: nowrap;
}
.logo:hover .logo-ime { color: var(--rjava-tem); }
.logo-podnapis {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--medlo-2);
  margin-top: 3px;
}

/* --- glavni meni --- */
.meni {
  display: flex;
  align-items: center;
  gap: 17px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.meni > li { position: relative; }

/* Meni je pisan z velikimi črkami in razmaknjen — tako je opazen,
   čeprav pisava ni velika. Enako kot pri oznakah drugod po strani. */
.meni-povezava {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--crnilo);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.meni-povezava:hover { color: var(--crnilo); border-bottom-color: var(--rdeca); }
.meni-povezava.aktivno, .meni-povezava.tu { border-bottom-color: var(--rjava); }
.podmeni a.aktivno { color: var(--rjava); background: var(--papir-3); }

.pusica { font-size: 0.55rem; color: var(--medlo-2); transition: transform 0.2s ease; }
.spustni.odprt .pusica { transform: rotate(180deg); }

/* --- spustni podmeni --- */
.podmeni {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 232px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--papir-2);
  border: 1px solid var(--rob);
  box-shadow: 0 20px 44px -20px var(--senca);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 20;
}
.spustni:hover > .podmeni,
.spustni.odprt > .podmeni { opacity: 1; visibility: visible; transform: translateY(0); }

.podmeni a { display: block; padding: 9px 20px; font-size: 0.94rem; color: var(--crnilo); }
.podmeni a:hover { background: var(--papir-3); color: var(--rjava); }

/* --- jeziki --- */
.jeziki { display: flex; gap: 2px; margin-left: 6px; }
.jezik-gumb {
  background: none;
  border: 0;
  padding: 5px 7px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--medlo-2);
  cursor: pointer;
  transition: color 0.2s ease;
}
.jezik-gumb:hover { color: var(--crnilo); }
.jezik-gumb[aria-pressed="true"] { color: var(--rdeca); }

/* --- košarica --- */
.kosarica-ikona {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--crnilo);
}
.kosarica-ikona:hover { color: var(--rdeca); }
.kosarica-stevec {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rdeca);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* --- hamburger --- */
.hamburger {
  display: none;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--rob-2);
  border-radius: 4px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 1.8px;
  margin: 4px auto;
  background: var(--crnilo);
  transition: transform 0.24s ease, opacity 0.24s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   GUMBI
   ========================================================================== */

.gumbi { display: flex; flex-wrap: wrap; gap: 12px; }
.sredina .gumbi, .poziv .gumbi { justify-content: center; }

.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--rob-2);
  border-radius: 999px;
  background: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--crnilo);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.gumb:hover { border-color: var(--crnilo); color: var(--crnilo); }

.gumb-glavni, .gumb.polni {
  background: var(--rjava);
  border-color: var(--rjava);
  color: #fff;
}
.gumb-glavni:hover, .gumb.polni:hover {
  background: var(--rjava-tem);
  border-color: var(--rjava-tem);
  color: #fff;
}

.gumb-kupi, .kupi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 21px;
  border: 0;
  border-radius: 999px;
  background: var(--rjava);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.gumb-kupi:hover, .kupi:hover { background: var(--rjava-tem); color: #fff; }
.gumb-kupi[disabled], .gumb[disabled] { opacity: 0.45; cursor: default; }

/* ==========================================================================
   ODSEKI IN NASLOVI
   ========================================================================== */

.odsek { padding: 92px 0; }
.odsek.svetel {
  background: var(--papir-2);
  border-top: 1px solid var(--rob);
  border-bottom: 1px solid var(--rob);
}

.odsek-glava { max-width: 44em; margin: 0 auto 46px; text-align: center; }
.odsek-glava p { color: var(--medlo); margin: 0; }

.naslov-odseka { max-width: 44em; margin-bottom: 44px; }
.naslov-odseka p { font-size: 1.06rem; color: var(--medlo); margin: 0; }

.nadnaslov, .oznaka {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rdeca);
  margin: 0 0 13px;
}

/* naslovna vrstica strani */
.stran-glava {
  padding: 66px 0 40px;
  border-bottom: 1px solid var(--rob);
}
.stran-glava h1 { margin-bottom: 14px; }
.stran-glava p { color: var(--medlo); max-width: 42em; margin: 0; font-size: 1.06rem; }

/* okras ❦ — v novem videzu je to tanka črta, brez znaka */
.okras {
  height: 1px;
  margin: 52px 0;
  background: var(--rob);
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

/* začetnica prvega odstavka */
.zacetnica::first-letter {
  font-family: var(--serif);
  font-size: 3.6rem;
  line-height: 0.84;
  float: left;
  margin: 0.09em 0.13em 0 0;
  color: var(--rjava);
}

/* ==========================================================================
   SLIKE
   Fotografije naslikanih del imajo okoli slike sivo obrobo. Odrežemo jo
   samo v prikazu — izvirne datoteke ostanejo nedotaknjene.
   Če kje rezanja ne želiš, dodaj razred  brez :  <div class="platno brez">
   ========================================================================== */

.platno {
  overflow: hidden;
  background: var(--papir-3);
  position: relative;
}
.platno > img {
  width: 100%;
  transform: scale(1.13);
  transform-origin: center;
  display: block;
}
.platno.brez > img { transform: none; }

/* stari okvir je izklopljen — slike stojijo same */
.okvir {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  position: relative;
}
.okvir::before, .okvir::after { display: none; }

/* ==========================================================================
   GALERIJA DEL
   ========================================================================== */

.galerija {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 40px 30px;
  align-items: start;
}
.galerija.sirse { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.delo { margin: 0; }
.delo-slika {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  background: var(--papir-3);
  margin-bottom: 14px;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.delo-slika img {
  width: 100%;
  transform: scale(1.13);
  transform-origin: center;
  transition: filter 0.35s ease;
}
.delo-slika.brez img { transform: none; }
.delo:hover .delo-slika { transform: translateY(-5px); }
.delo:hover .delo-slika img { filter: brightness(1.04); }

/* Slika brez povečave: klik ne odpre ničesar, zato naj tudi ni videti,
   kot da se da klikniti. */
.delo-slika[data-brez-povecave] { cursor: auto; }
.delo:hover .delo-slika[data-brez-povecave] { transform: none; }
.delo:hover .delo-slika[data-brez-povecave] img { filter: none; }

.delo figcaption { padding: 0; }
.delo-ime {
  display: block;
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--crnilo);
}
.delo-mera {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  color: var(--medlo);
}

/* Navedba naročnika pod ilustracijo. Manjša od mere — pove, čigavo je delo,
   ne da bi vlekla pogled s slike. Manj kot 0.72rem ni več prijetno brati. */
.delo-navedba {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--medlo-2);
}

/* pas slik na naslovnici */
.pas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.pas a { display: block; overflow: hidden; background: var(--papir-3); }
.pas img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(1.13);
  transition: transform 0.6s ease;
}
.pas a:hover img { transform: scale(1.2); }

/* prazna kategorija */
.prazno {
  padding: 54px 32px;
  text-align: center;
  color: var(--medlo);
  background:
    repeating-linear-gradient(45deg, var(--papir-3), var(--papir-3) 11px,
                              var(--papir-2) 11px, var(--papir-2) 22px);
  border: 1px solid var(--rob);
}
.prazno strong { color: var(--crnilo); }

/* ==========================================================================
   ŠTIRI POTI — kaj lahko obiskovalec dobi
   ========================================================================== */

.vrata {
  display: grid;
  /* auto-fit: pri petih karticah pet stolpcev, pri štirih štirje —
     mreža se prilagodi, ne da bi jo bilo treba prešteti. */
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 1px;
  background: var(--rob);
  border: 1px solid var(--rob);
}
.vrata a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 26px 24px 28px;
  background: var(--papir-2);
  color: var(--crnilo);
  transition: background 0.2s ease;
}
.vrata a:hover { background: var(--papir-3); color: var(--crnilo); }
.vrata .st { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; color: var(--medlo-2); }
.vrata h3 { font-size: 1.32rem; margin: 0; }
.vrata p { font-size: 0.88rem; color: var(--medlo); margin: 0; line-height: 1.5; }
.vrata .cena {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--rjava);
}

/* ==========================================================================
   PRIMERJAVA — fotografija ↔ slika
   ========================================================================== */

.primerjava {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  user-select: none;
  box-shadow: 0 30px 70px -34px var(--senca);
}
.primerjava .plast { position: relative; overflow: hidden; background: var(--papir-3); }
/* Pri primerjavi se ne reže nič — obe sliki pripraviš sama, enako obrezani. */
.primerjava .plast img { width: 100%; display: block; }
.primerjava .zgoraj { position: absolute; inset: 0; clip-path: inset(0 var(--rez, 50%) 0 0); }
.primerjava .crta {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(100% - var(--rez, 50%));
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(38, 34, 31, 0.25);
  pointer-events: none;
}
.primerjava .crta::after {
  content: "↔";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--crnilo);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 14px var(--senca);
}
.primerjava input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.oznaka-plasti {
  position: absolute;
  bottom: 14px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}
.oznaka-plasti.l { left: 14px; }
.oznaka-plasti.d { right: 14px; }
.pod-primerjavo { text-align: center; font-size: 0.86rem; color: var(--medlo); margin-top: 20px; }

/* Slog računala cene je bil odstranjen 23. 8. 2026 — namesto računala je
   zdaj cenik "od", ki uporablja .listina in .cenik-tabela. */

/* ==========================================================================
   KORAKI
   ========================================================================== */

.koraki {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: korak;
}
.koraki > li, .korak {
  counter-increment: korak;
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--rob-2);
}
.koraki > li::before, .korak::before {
  content: counter(korak);
  position: absolute;
  top: -13px;
  left: 0;
  padding-right: 12px;
  background: var(--papir);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rdeca);
}
.odsek.svetel .koraki > li::before,
.odsek.svetel .korak::before { background: var(--papir-2); }
.koraki h3, .korak h3 { font-size: 1.2rem; margin-bottom: 8px; }
.koraki p, .korak p { font-size: 0.92rem; color: var(--medlo); margin: 0; }
.korak .cas, .koraki .cas {
  display: block;
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--medlo-2);
}

/* ==========================================================================
   MALE STVARI
   ========================================================================== */

.stvari { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stvar {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--papir-2);
  border: 1px solid var(--rob);
}
.stvar .prostor {
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  padding: 16px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.8rem;
  color: var(--medlo-2);
  background:
    repeating-linear-gradient(45deg, var(--papir-3), var(--papir-3) 11px,
                              var(--papir-2) 11px, var(--papir-2) 22px);
}
.stvar .platno { margin-bottom: 18px; }
.stvar h3 { font-size: 1.22rem; margin-bottom: 7px; }
.stvar p { font-size: 0.9rem; color: var(--medlo); margin: 0 0 16px; }
.stvar .noga-stvari {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rob);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.stvar .cena { font-family: var(--serif); font-size: 1.34rem; font-weight: 600; color: var(--crnilo); }

/* ==========================================================================
   UVOD NA NASLOVNICI
   ========================================================================== */

.hero { padding: 58px 0 0; position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, rgba(199, 79, 99, 0.11), transparent 62%);
  pointer-events: none;
}
.hero-mreza {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
/* Naslov na naslovnici je daljša poved, zato je nekoliko manjši od
   naslovov na drugih straneh — sicer bi se razlezel čez pol zaslona. */
.hero h1 {
  font-size: clamp(1.95rem, 3.3vw, 2.85rem);
  line-height: 1.18;
  margin-bottom: 20px;
}
.hero h1 em { font-style: italic; color: var(--rjava); }
/* Odstavek pod naslovom na naslovnici. Ker je predstavitveno besedilo
   daljše od enega stavka, je pisava malo manjša in vrstica malo širša —
   tako je odstavek berljiv in stolpec ostane v ravnovesju s sliko. */
.hero-opis {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--medlo);
  max-width: 34em;
  margin-bottom: 28px;
}

.od {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 28px;
  padding: 8px 18px;
  border: 1px solid var(--rob-2);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--medlo);
}
.od b { font-size: 1.1rem; font-weight: 500; color: var(--crnilo); }

.hero-slika { position: relative; }
.hero-slika .platno { box-shadow: 0 28px 60px -28px rgba(38, 34, 31, 0.4); }
.podpis-slike {
  position: absolute;
  left: -14px;
  bottom: 22px;
  padding: 11px 17px;
  background: var(--papir-2);
  border: 1px solid var(--rob);
  box-shadow: 0 10px 26px -14px var(--senca);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--medlo);
}
.podpis-slike b {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--crnilo);
}

/* ==========================================================================
   DVOSTOLPČNI PRIKAZ (O meni, o avtorici)
   ========================================================================== */

.dvojno { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 58px; align-items: center; }
.dvojno .okvir, .dvojno .platno { width: 100%; }
.dvojno .okvir img { width: 100%; height: auto; display: block; }
.podpis-avtorice {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--rjava);
  margin-top: 20px;
}

/* kartice na naslovnici */
.kartica {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--papir-2);
  border: 1px solid var(--rob);
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.kartica:hover { border-color: var(--rob-2); transform: translateY(-3px); }
.kartica-znak { font-size: 1.5rem; color: var(--rdeca); margin-bottom: 12px; }
.kartica h3 { font-size: 1.32rem; }
.kartica p { font-size: 0.94rem; color: var(--medlo); }
.kartica-vec { margin-top: auto; padding-top: 12px; font-size: 0.86rem; font-weight: 500; color: var(--rjava); }

/* ==========================================================================
   CENIK
   Slike vodijo — cenik jih ne zastira. Široki zaslon: dela levo, cenik ob
   njih. Ozek zaslon: cenik je ena vrstica nad slikami in se odpre z dotikom.
   ========================================================================== */

.listina {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 32px 30px;
  background: var(--papir-2);
  border: 1px solid var(--rob);
}
.listina h2 {
  font-size: 1.16rem;
  margin-top: 34px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rob);
}
.listina h2:first-child { margin-top: 0; }
.listina em { color: var(--medlo); }

.cenik-tabela { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.cenik-tabela th {
  padding: 0 0 11px;
  border-bottom: 1px solid var(--rob-2);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--medlo);
  text-align: left;
}
.cenik-tabela th:last-child, .cenik-tabela td:last-child { text-align: right; }
.cenik-tabela td {
  padding: 13px 0;
  border-bottom: 1px solid var(--rob);
  font-size: 1.04rem;
}
.cenik-tabela tr:last-child td { border-bottom: 0; }
.cenik-tabela .mera { color: var(--crnilo); }
.cenik-tabela .cena { font-weight: 500; color: var(--rjava); white-space: nowrap; }
.cena-manjka { color: var(--medlo); font-style: italic; font-weight: 400; }
.cenik-tabela .opomba { display: block; font-size: 0.86rem; color: var(--medlo); }

/* Cenik z dvema tehnikama: vsaka ima svoj naslov in svojo tabelo. */
.cenik-tehnika + .cenik-tehnika { margin-top: 30px; }
.cenik-tehnika-naslov {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--crnilo);
  margin: 0 0 14px;
}

.namig { font-size: 0.9rem; line-height: 1.55; color: var(--medlo); margin: 12px 0 0; }

/* ==========================================================================
   ZLOŽLJIVI ODSEKI
   Naslov je ena sama vrstica; s klikom se odpre navzdol.
   Uporablja se za cenik in za daljše razlage, da stran ostane pregledna.

   V HTML:  <details class="listina zlozljivo"> <summary>…</summary> … </details>
   ========================================================================== */

.zlozljivo {
  background: var(--papir-2);
  border: 1px solid var(--rob);
  padding: 4px 24px;
  margin: 0 0 18px;
}

.zlozljivo > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crnilo);
}
.zlozljivo > summary:hover { color: var(--rjava); }
.zlozljivo > summary::-webkit-details-marker { display: none; }
.zlozljivo > summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--medlo-2);
  transition: transform 0.2s ease;
}
.zlozljivo[open] > summary::after { transform: rotate(180deg); }
.zlozljivo[open] > summary {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rob);
}
.zlozljivo[open] { padding-bottom: 26px; }

/* dodatek ob naslovu, npr. najnižja cena */
.zlozljivo > summary .pripis {
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--rjava);
}

/* koraki znotraj zložljivega odseka nimajo zgornjega roba strani */
.zlozljivo .koraki { margin-top: 6px; }

/* --- cenik ob delih --- */

.odsek-dela > .vsebina > .okras { display: none; }

.odsek-dela > .vsebina > .listina {
  max-width: none;
  margin: 0 0 34px;
}
.odsek-dela > .vsebina > .listina .cenik-tabela th { font-size: 0.66rem; padding-bottom: 9px; }
.odsek-dela > .vsebina > .listina .cenik-tabela td { padding: 11px 0; font-size: 0.98rem; }
.odsek-dela > .vsebina > .listina .namig { font-size: 0.85rem; }

/* Cenik stoji nad deli — v eni vrstici, dokler ga obiskovalec ne odpre.
   Preklopnik kategorij je nad njim. */
.odsek-dela > .vsebina > .sredina { margin-bottom: 30px !important; }

/* stara imena razredov, da nič ne odpove */
.cenik-blok > summary { list-style: none; }
.cenik-blok > summary::-webkit-details-marker { display: none; }

.cenik-od {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--rjava);
}

.cenik-blok h2 { font-size: 0.94rem; margin-top: 28px; padding-bottom: 9px; }
.cenik-blok h2:nth-of-type(-n+4) { margin-top: 12px; }

#cenik { scroll-margin-top: calc(var(--glava-visina) + 16px); }

/* ==========================================================================
   TRGOVINA
   ========================================================================== */

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

.izdelek {
  display: flex;
  flex-direction: column;
  background: var(--papir-2);
  border: 1px solid var(--rob);
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.izdelek:hover { border-color: var(--rob-2); transform: translateY(-3px); }

.izdelek-slika {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--papir-3);
}
.izdelek-slika img { width: 100%; height: 100%; object-fit: cover; }

.izdelek-telo { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.izdelek-ime { font-size: 1.2rem; margin: 0 0 7px; }
.izdelek-opis { font-size: 0.9rem; color: var(--medlo); margin: 0 0 16px; }
.izdelek-cena {
  margin: auto 0 14px;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--crnilo);
}

.znacka {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 11px;
  background: var(--rdeca);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.razprodano { color: var(--medlo); font-style: italic; }

/* darilni boni */
.bon-slika {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--rjava) 0%, var(--rjava-tem) 100%);
  color: #fff;
  text-align: center;
}
.bon-znesek { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.bon-napis {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.85;
}
.bon-okras { display: none; }
.boni { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }

.placila-info { margin-top: 40px; font-size: 0.9rem; color: var(--medlo); }
.placila-info p { max-width: 58em; }

/* ==========================================================================
   BLAGAJNA
   ========================================================================== */

.blagajna { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 52px; align-items: start; }

.blagajna-vrstice { border-top: 1px solid var(--rob); }
.blagajna-vrstica {
  display: grid;
  grid-template-columns: 74px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rob);
}
.blagajna-slika {
  width: 74px; height: 74px;
  object-fit: cover;
  background: var(--papir-3);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--rjava);
}
.blagajna-bon { background: linear-gradient(150deg, var(--rjava), var(--rjava-tem)); color: #fff; }
.blagajna-opis { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.blagajna-ime { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.blagajna-kos { font-size: 0.84rem; color: var(--medlo); }
.blagajna-cena { font-weight: 500; white-space: nowrap; }

.kolicina { display: flex; align-items: center; gap: 4px; }
.kolicina button {
  width: 30px; height: 30px;
  border: 1px solid var(--rob-2);
  border-radius: 4px;
  background: var(--papir-2);
  color: var(--crnilo);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.kolicina button:hover { border-color: var(--crnilo); }
.kolicina input, .kolicina span {
  width: 38px;
  text-align: center;
  font-size: 0.95rem;
  border: 0;
  background: none;
  color: var(--crnilo);
}
.odstrani {
  background: none;
  border: 0;
  padding: 6px;
  color: var(--medlo-2);
  font-size: 1.05rem;
  cursor: pointer;
}
.odstrani:hover { color: var(--rdeca); }

.blagajna-skupaj {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid var(--crnilo);
}
.blagajna-oznaka {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--medlo);
}
.blagajna-skupaj strong, .blagajna-skupaj .cena {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--crnilo);
}
.blagajna-orodja { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* načini plačila */
.nacini { display: grid; gap: 12px; }
.nacin {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--papir-2);
  border: 1px solid var(--rob-2);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nacin:hover { border-color: var(--crnilo); }
.nacin:has(input:checked) { border-color: var(--rjava); background: rgba(123, 74, 68, 0.04); }
.nacin input { margin-top: 4px; accent-color: var(--rjava); }
.nacin-telo { display: flex; flex-direction: column; gap: 3px; }
.nacin-ime { font-weight: 500; }
.nacin-opis { font-size: 0.86rem; color: var(--medlo); }

.placila { margin-top: 26px; }
.kartice { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.kartice-logo {
  padding: 5px 11px;
  border: 1px solid var(--rob);
  border-radius: 4px;
  background: var(--papir-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--medlo);
}
.banka { margin-top: 20px; padding: 22px 24px; background: var(--papir-3); border: 1px solid var(--rob); }
.banka-seznam { display: grid; gap: 9px; margin: 0; font-size: 0.94rem; }
.banka-seznam div { display: flex; gap: 12px; }
.banka-seznam dt, .banka-seznam .oznaka { min-width: 8em; color: var(--medlo); }
.banka-manjka { color: var(--rdeca); font-style: italic; }

/* Pojasnilo pod koraki naročila. Brez okvirja — z rdečo obrobo je bilo
   videti kot opozorilo, čeprav gre le za dodatno pojasnilo. */
.pecat {
  margin-top: 26px;
  color: var(--medlo);
  font-size: 0.95rem;
  line-height: 1.6;
}
.pecat p { margin: 0; }
.obvestilo {
  padding: 16px 20px;
  margin-bottom: 22px;
  background: rgba(199, 79, 99, 0.07);
  border-left: 3px solid var(--rdeca);
  font-size: 0.92rem;
  color: var(--medlo);
}

/* pas s košarico na dnu */
.kosarica-pas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--crnilo);
  color: #f2ede5;
  box-shadow: 0 -8px 30px -12px rgba(38, 34, 31, 0.4);
}
.kosarica-pas-vsebina {
  max-width: var(--sirina);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.kosarica-pas-povzetek { font-size: 0.94rem; }
.kosarica-pas .gumb { margin-left: auto; background: #fff; border-color: #fff; color: var(--crnilo); }
.kosarica-pas .gumb:hover { background: var(--rdeca); border-color: var(--rdeca); color: #fff; }

/* ==========================================================================
   OBRAZEC
   ========================================================================== */

.obrazec { max-width: 720px; }
.polja { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.polje { display: flex; flex-direction: column; gap: 8px; }
.polje.cez { grid-column: 1 / -1; }
.polje label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--medlo);
}
.obvezno { color: var(--rdeca); }

.polje input, .polje select, .polje textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--rob-2);
  border-radius: 3px;
  background: var(--papir-2);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--crnilo);
  transition: border-color 0.2s ease;
}
.polje input:focus, .polje select:focus, .polje textarea:focus {
  outline: none;
  border-color: var(--rjava);
}
.polje textarea { min-height: 150px; resize: vertical; }
.polje input[type="file"] { padding: 11px; background: var(--papir-3); cursor: pointer; }

.privolitev { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9rem; color: var(--medlo); }
.privolitev input { margin-top: 4px; accent-color: var(--rjava); }
.privolitev label {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.obrazec-dno { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.neposredno { font-size: 0.9rem; color: var(--medlo); }

/* skrito polje proti nezaželeni pošti */
.pasti { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   POZIV
   ========================================================================== */

.poziv { padding: 88px 0; background: var(--crnilo); color: #f2ede5; text-align: center; }
.poziv h2 { color: #fff; margin-bottom: 16px; }
.poziv p { max-width: 34em; margin: 0 auto 28px; font-size: 1.06rem; color: #bdb3a7; }
.poziv .gumb { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.poziv .gumb:hover { background: #fff; border-color: #fff; color: var(--crnilo); }
.poziv .gumb-glavni, .poziv .gumb.polni { background: var(--rdeca); border-color: var(--rdeca); color: #fff; }
.poziv .gumb-glavni:hover, .poziv .gumb.polni:hover {
  background: var(--rdeca-tem);
  border-color: var(--rdeca-tem);
  color: #fff;
}

/* ==========================================================================
   NOGA
   ========================================================================== */

.noga { padding: 60px 0 0; border-top: 1px solid var(--rob); font-size: 0.92rem; color: var(--medlo); }
.noga-mreza { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; padding-bottom: 40px; }

.noga-naslov {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crnilo);
  margin: 0 0 16px;
}

.noga-povezave { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
.noga-povezave li { margin-bottom: 9px; break-inside: avoid; }
.noga-povezave a { color: var(--medlo); }
.noga-povezave a:hover { color: var(--rdeca); }

.kontakt-vrstica { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.kontakt-znak { color: var(--rdeca); font-size: 1.05rem; line-height: 1.5; flex: none; }
.kontakt-oznaka {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--medlo-2);
  margin-bottom: 2px;
}
.kontakt-vrstica a { color: var(--crnilo); }
.kontakt-vrstica a:hover { color: var(--rdeca); }

.noga-dno { border-top: 1px solid var(--rob); padding: 20px 0 26px; font-size: 0.82rem; color: var(--medlo-2); }
.noga-dno .vsebina { display: block; }   /* flex je razmetal besedilo »Copyright © 2026 | …« po vsej širini */
.razlicica { color: var(--medlo-2); float: right; margin-left: 12px; }
@media (max-width: 720px) { .razlicica { float: none; display: block; margin: 6px 0 0; } }

/* ==========================================================================
   POVEČAVA SLIK
   ========================================================================== */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  background: rgba(24, 21, 19, 0.94);
  height: 100dvh;
}
.lightbox.viden { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 82dvh;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}
.lightbox-napis { color: #e2dbd2; font-size: 0.92rem; text-align: center; margin: 0; }
.lightbox-zapri {
  position: absolute;
  top: 18px; right: 20px;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-zapri:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Puščici za premikanje med slikami v povečavi. Skriti sta, kadar je v
   galeriji ena sama slika. */
.lightbox-krmar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.lightbox-krmar.prej { left: 20px; }
.lightbox-krmar.naprej { right: 20px; }
.lightbox-krmar:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.lightbox-krmar[hidden] { display: none; }

@media (max-width: 720px) {
  .lightbox-krmar { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-krmar.prej { left: 8px; }
  .lightbox-krmar.naprej { right: 8px; }
}

/* ==========================================================================
   OZKI ZASLONI
   ========================================================================== */

@media (max-width: 1060px) {
  .hero-mreza, .dvojno, .blagajna { grid-template-columns: 1fr; gap: 40px; }
  /* Naslovnica na telefonu: odkar v pasici ni več gumbov, je pod
     odstavkom ostal prazen prostor. Slika se zato dvigne bliže besedilu. */
  .hero-mreza { gap: 24px; }
  .hero-opis { margin-bottom: 0; }
  .vrata { grid-template-columns: 1fr 1fr; }
  .koraki { grid-template-columns: 1fr 1fr; gap: 28px; }
  .stvari { grid-template-columns: 1fr 1fr; }
  .dvojno .platno, .dvojno .okvir { max-width: var(--mera-slike); margin: 0 auto; }
}

@media (max-width: 1240px) {
  .hamburger { display: block; }

  .meni {
    position: fixed;
    top: var(--glava-visina);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--glava-visina));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 0 24px;
    background: var(--papir-2);
    border-bottom: 1px solid var(--rob);
    box-shadow: 0 20px 40px -20px var(--senca);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .meni.odprt { opacity: 1; visibility: visible; transform: translateY(0); }

  .meni > li { border-bottom: 1px solid var(--rob); }
  .meni > li:last-child { border-bottom: 0; }

  .meni-povezava {
    width: 100%;
    justify-content: space-between;
    padding: 15px 28px;
    font-size: 1.02rem;
    border-bottom: 0;
  }
  .meni-povezava.aktivno, .meni-povezava.tu { color: var(--rjava); }

  /* podmeni na telefonu ni lebdeč, ampak se razgrne v seznamu */
  .podmeni {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: var(--papir-3);
    padding: 4px 0 10px;
  }
  .spustni:hover > .podmeni { display: none; }
  .spustni.odprt > .podmeni { display: block; }
  .podmeni a { padding: 12px 28px 12px 42px; }

  .jeziki { justify-content: center; padding: 18px 28px 4px; }
  .jezik-gumb { padding: 8px 12px; font-size: 0.82rem; }

  .kosarica-ikona { margin-left: auto; }
}

@media (max-width: 720px) {
  .odsek { padding: 62px 0; }
  .vsebina { padding: 0 20px; }
  .vrata, .koraki, .stvari, .polja { grid-template-columns: 1fr; }
  .galerija, .galerija.sirse { grid-template-columns: 1fr; gap: 30px; }
  .noga-mreza { grid-template-columns: 1fr; gap: 34px; }
  .noga-povezave { columns: 1; }
  .hero { padding-top: 36px; }
  .podpis-slike { position: static; margin-top: -1px; }
  .listina { padding: 26px 20px; }
  .blagajna-vrstica { grid-template-columns: 56px 1fr auto; row-gap: 10px; }
  .blagajna-slika { width: 56px; height: 56px; }
  .blagajna-vrstica .kolicina { grid-column: 2 / -1; }
}

/* ==========================================================================
   DROBNI DODATKI
   ========================================================================== */

/* naslovna vrstica cenika — imeni razredov, ki ju uporablja HTML */
.cenik-vrh { display: flex; align-items: baseline; gap: 12px; }
.cenik-naslov { letter-spacing: inherit; }

/* gumb v trgovini; kadar je izdelka zmanjkalo, je to le napis */
.gumb-placilo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 500;
}
span.gumb-placilo {
  padding: 10px 21px;
  border-radius: 999px;
  background: var(--papir-3);
  color: var(--medlo);
  font-style: italic;
}

/* --- povzetek na blagajni: vsota izdelkov in poštnina --- */
.povzetek {
  margin-top: 22px;
  padding-top: 4px;
}
.povzetek-vrstica {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  font-size: 0.98rem;
  color: var(--medlo);
}
.povzetek-vrstica span:last-child { color: var(--crnilo); white-space: nowrap; }
.povzetek .namig {
  margin-top: 6px;
  padding: 10px 14px;
  background: rgba(199, 79, 99, 0.07);
  border-left: 3px solid var(--rdeca);
  color: var(--crnilo);
}

/* --- obrazec v temnem odseku stoji na svetli ploskvi in je poravnan
       na sredino. Brez tega so napisi polj temni na temnem ozadju. --- */
.poziv .obrazec {
  max-width: 720px;
  margin: 36px auto 0;
  padding: 34px 34px 30px;
  background: var(--papir);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
  color: var(--crnilo);
}
.poziv .obrazec .namig,
.poziv .obrazec .privolitev,
.poziv .obrazec .neposredno { color: var(--medlo); }
.poziv .obrazec .neposredno a { color: var(--rjava); }
.poziv .obrazec .neposredno a:hover { color: var(--rdeca); }

/* gumbi v tem obrazcu niso na temnem, zato veljajo navadne barve */
.poziv .obrazec .gumb {
  border-color: var(--rob-2);
  color: var(--crnilo);
  background: none;
}
.poziv .obrazec .gumb:hover { background: none; border-color: var(--crnilo); color: var(--crnilo); }
.poziv .obrazec .gumb-glavni {
  background: var(--rjava);
  border-color: var(--rjava);
  color: #fff;
}
.poziv .obrazec .gumb-glavni:hover {
  background: var(--rjava-tem);
  border-color: var(--rjava-tem);
  color: #fff;
}

@media (max-width: 720px) {
  .poziv .obrazec { padding: 26px 20px 24px; }
}


/* ==========================================================================
   DA SE STRAN NA TELEFONU NE PREMIKA LEVO IN DESNO

   Vodoravno drsenje je nastalo v glavi: znak, ime, ikona košarice in gumb
   za meni skupaj niso šli v širino zaslona, ime pa se ni smelo prelomiti.
   Zato se je cela stran zamaknila in glava je odplavala iz vidnega polja.
   ========================================================================== */

/* Pri petih korakih 4 + 1 razbije vrsto; na širokem zaslonu jih zato
   razporedimo v tri stolpce. Na telefonu ostanejo eden pod drugim. */
@media (min-width: 721px) {
  .koraki:has(> li:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  :root { --glava-visina: 82px; }
  .glava-vrstica { gap: 10px; }
  .logo-ime { font-size: 1.42rem; letter-spacing: 0.03em; }
  .kosarica-ikona { width: 34px; }
  .hamburger { width: 38px; height: 38px; }
  .vsebina { padding: 0 16px; }
}

@media (max-width: 380px) {
  .logo-ime { font-size: 1.22rem; }
}

/* Zadnja varovalka: nobena tabela ali slika ne sme razširiti strani.
   Če je vsebina preširoka, dobi svoj drsnik znotraj okvirja. */
.cenik-tabela { table-layout: fixed; }
.cenik-tabela .mera { word-break: break-word; }
.listina, .zlozljivo { max-width: 100%; overflow-wrap: break-word; }

/* Cenik in "Od fotografije do slike" sta oba zložljiva bloka, ena vrstica
   drug pod drugim. Med njima ne sme biti razmika celega odseka, sicer
   se ne bereta kot par. */
#cena { padding-bottom: 22px; }
.odsek-tesno { padding-top: 22px; }

/* Cenik na strani Portreti živali uporablja isti razred .zlozljivo kot
   odsek "Od fotografije do slike", da sta enako široka in enako oblazinjena.
   Prej je imel še .listina, ki mu je na telefonu dal ožji rob. */
.zlozljivo .cenik-tabela { margin-top: 4px; }
.zlozljivo .namig { margin-top: 14px; }

/* ==========================================================================
   MNENJA STRANK
   Izbrana mnenja, ki jih objavi Tamara. Podatki so v nastavitve.js.
   ========================================================================== */

.mnenja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

.mnenje {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--papir-2);
  border: 1px solid var(--rob);
}

.mnenje .zvezdice {
  color: var(--rdeca);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}

.mnenje blockquote {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--crnilo);
  white-space: pre-line;   /* prazna vrstica v mnenju = nov odstavek */
}
.mnenje blockquote::before { content: "„"; }
.mnenje blockquote::after  { content: "“"; }

.mnenje .kdo {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rob);
  font-size: 0.88rem;
  color: var(--medlo);
}
.mnenje .kdo strong { display: block; color: var(--crnilo); font-weight: 500; }

/* povprečna ocena nad mnenji */
.ocena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  padding: 20px 24px;
  background: var(--papir-2);
  border: 1px solid var(--rob);
  text-align: center;
}
.ocena .stevilka {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--crnilo);
  line-height: 1;
}
.ocena .opis { font-size: 0.92rem; color: var(--medlo); }

@media (max-width: 720px) {
  .mnenja { grid-template-columns: 1fr; }
  .mnenje { padding: 22px 20px 20px; }
}

/* Glava ima eno postavko več (Mnenja), zato sme biti širša od vsebine
   in ima tesnejše razmike — sicer se napisi na prenosniku stlačijo. */
.glava .vsebina { max-width: 1400px; }
.meni { gap: 14px; }

/* --- vnos ocene z zvezdicami ---
   Radijski gumbi so skriti, vidne so samo zvezdice. Vrstni red v HTML je
   od 5 proti 1, prikaz pa je obrnjen, zato se ob izbiri obarvajo tudi vse
   zvezdice levo od izbrane. */
.oznaka-polja {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--medlo);
}

.ocena-vnos {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
}
.ocena-vnos input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ocena-vnos label {
  font-size: 2rem;
  line-height: 1;
  color: var(--rob-2);
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
}
.ocena-vnos label:hover,
.ocena-vnos label:hover ~ label,
.ocena-vnos input:checked ~ label { color: var(--rdeca); }
.ocena-vnos input:focus-visible + label { outline: 2px solid var(--rdeca); outline-offset: 3px; }

/* obrazec za mnenje stoji na svetlem odseku, ne na temnem */
.obrazec-mnenje { max-width: 720px; margin: 0 auto; }

/* Privolitev je sama po sebi <label> znotraj .polje, zato bi jo pravilo
   .polje label naredilo veliko in krepko. Tu jo vrnemo v navadno besedilo. */
.polje label.privolitev {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--medlo);
}

/* Zvezdica za obveznim poljem naj se v privolitvi ne prilepi na piko. */
.privolitev .obvezno { margin-left: 3px; }

/* Sporočilo, ko posta.php obrazec zavrne (?napaka=...) */
.sporocilo-napake {
  margin: 0 0 22px;
  padding: 12px 16px;
  border-left: 3px solid var(--rdeca);
  background: rgba(199, 79, 99, .07);
  color: var(--rdeca-tem);
  font-size: .95rem;
  line-height: 1.5;
}

/* ==========================================================================
   DRSNIK V POVEČAVI
   Klik na sliko, ki ima par v nastavitve.js, odpre drsnik namesto
   navadne povečave.
   ========================================================================== */

/* Obe sliki sta kvadratni, zato širino omeji tudi višina zaslona. */
.lightbox .lightbox-primerjava {
  width: min(760px, 92vw, 76dvh);
  max-width: none;
  margin: 0 auto;
  box-shadow: none;
  cursor: ew-resize;
}
.lightbox .lightbox-primerjava img {
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}
.lightbox .lightbox-primerjava[hidden] { display: none; }
.lightbox img[hidden] { display: none; }

/* Oznaka na sliki, ki skriva drsnik */
.delo-slika { position: relative; }
.znak-primerjave {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--crnilo);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 4px 14px -6px var(--senca);
}
.znak-primerjave::before { content: "↔ "; }

@media (max-width: 620px) {
  .znak-primerjave { left: 8px; bottom: 8px; padding: 5px 9px; font-size: 0.56rem; }
}

/* Grafične zvezdice pri povprečni oceni.
   Spodaj prazne, čez njih polne, obrezane na delež — tako se vidi
   tudi 4,6 in ne le cela zvezdica. */
.zvezde-graf {
  position: relative;
  display: inline-block;
  color: var(--papir-3);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  -webkit-text-stroke: 0.5px var(--medlo-2);
}
.zvezde-graf .polne {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  overflow: hidden;
  color: var(--rdeca);
  -webkit-text-stroke: 0;
}

/* Varovalka za ozje prenosnike: meni se pojavi pri 1241 px, logotip pa je
   zdaj večji. V tem pasu malenkost stisnemo razmike, da ostane vse v eni
   vrstici. Na širših zaslonih se to ne pozna. */
@media (min-width: 1241px) and (max-width: 1400px) {
  .glava-vrstica { gap: 18px; }
  .meni { gap: 13px; }
}

/* --------------------------------------------------------------------------
   PREKLOP JEZIKA POD IMENOM  (19. 9. 2026)
   Gumbi SI/EN/IT/DE/FR so bili zadnja postavka v meniju — na telefonu
   skriti v hamburgerju, na namizju izgubljeni na koncu vrstice. Zdaj so
   v glavi, tik pod imenom, in enako postavljeni na vseh širinah.
   V meniju jih ni več.
   -------------------------------------------------------------------------- */
.logo-blok { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: none; }
.jeziki-mobilni { display: flex; margin-left: 0; }
.jeziki-mobilni .jezik-gumb { padding: 2px 8px; font-size: 0.82rem; }
.meni .jeziki { display: none; }

@media (max-width: 1240px) {
  .jeziki-mobilni .jezik-gumb { padding: 2px 7px; font-size: 0.78rem; }
}

/* --------------------------------------------------------------------------
   PASICA ZA PIŠKOTKE  (4. 10. 2026)
   Izriše jo skripta.js (odsek 12). Gumba »Zavrni« in »Sprejmi« sta
   namenoma enaka — nobeden ne sme biti bolj viden od drugega.
   -------------------------------------------------------------------------- */
.pasica-piskotki {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 22px;
  background: var(--papir-2);
  border: 1px solid var(--rob-2);
  border-radius: 10px;
  box-shadow: 0 10px 34px var(--senca);
  font-family: var(--sans);
}
.pasica-piskotki[hidden] { display: none; }
.pasica-piskotki p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--crnilo);
}
.pasica-gumbi { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.pasica-gumbi .gumb { padding: 10px 24px; min-width: 120px; }
@media (max-width: 480px) {
  .pasica-gumbi .gumb { flex: 1; }
}