/* ==========================================================================
   TAMARA ČESNIK — slog.css
   Svetla srednjeveška tema (pergament in zlato).
   Vse barve so zbrane spodaj v :root, tako da lahko celoten videz
   spremeniš na enem mestu.
   ========================================================================== */

:root {
  /* --- barve --- */
  --ozadje:         #f5ecd9;   /* glavno ozadje, barva pergamenta */
  --ozadje-2:       #fdf8ee;   /* plošče, kartice */
  --ozadje-3:       #fffcf5;   /* dvignjene ploskve, skoraj bela */
  --besedilo:       #2d2419;   /* glavno besedilo, temno rjavo */
  --besedilo-medlo: #6d5c45;   /* pomožno besedilo */
  --zlato:          #a8842a;   /* okvirji, črte, okraski */
  --zlato-mocno:    #7d6014;   /* poudarjeno besedilo in naslovi */
  --zlato-svetlo:   #e8c860;   /* svetlo zlato na temnih ploskvah */
  --zlato-temno:    #5c4610;
  --rdeca:          #7b2320;   /* pečat, glavni gumbi */
  --rdeca-svetla:   #9c3229;
  --rob:            rgba(168, 132, 42, 0.30);
  --rob-mocan:      rgba(168, 132, 42, 0.60);
  --senca:          rgba(92, 70, 24, 0.16);
  --senca-mocna:    rgba(92, 70, 24, 0.26);

  /* --- pisave --- */
  --pisava-logo:    "Cinzel Decorative", "Cinzel", Georgia, serif;
  --pisava-naslov:  "Cinzel", Georgia, "Times New Roman", serif;
  --pisava-tekst:   "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* --- mere --- */
  --sirina:         1180px;
  --glava-visina:   84px;

  /* Enotna velikost slik: naslovna, O meni in galerija.
     Spremeni to eno vrednost in vse slike se prilagodijo. */
  --mera-slike:     550px;

  /* --- teksture --- */
  --sum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");

  /* --- gotski lok (maska) --- */
  --lok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0,130 L0,62 C0,26 20,3 50,0 C80,3 100,26 100,62 L100,130 Z' fill='%23000'/%3E%3C/svg%3E");
}

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

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

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

body {
  margin: 0;
  background-color: var(--ozadje);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(168, 132, 42, 0.16) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(123, 35, 32, 0.07) 0%, transparent 65%);
  background-attachment: fixed;
  color: var(--besedilo);
  font-family: var(--pisava-tekst);
  font-size: 1.19rem;
  line-height: 1.75;
  /* clip namesto hidden: hidden na telesu strani na nekaterih telefonih
     pokvari postavitev elementov s position: fixed (npr. povečave slik) */
  overflow-x: clip;
}

/* zrnata tekstura pergamenta čez celotno stran */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--sum);
  opacity: 0.035;
  pointer-events: none;
  z-index: 1;
}

/* 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(--zlato-mocno); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--rdeca); }

h1, h2, h3, h4 {
  font-family: var(--pisava-naslov);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: var(--besedilo);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: 0.1em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { margin: 0 0 1.15em; }

::selection { background: var(--zlato); color: var(--ozadje-3); }

:focus-visible { outline: 2px solid var(--zlato-mocno); outline-offset: 3px; }

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

.sredina { text-align: center; }

/* skrit naslov za bralnike zaslona */
.skrito {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   DVOJEZIČNOST — preklop brez utripanja
   Slovenska različica je v HTML privzeta, angleška se pokaže ob preklopu.
   ========================================================================== */

.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 (ali slovenščini) namesto da bi izginilo. Označbo doda
   skripta.js; ko je prevod dodan, se nadomestilo samo umakne. */
.lang-it .nadomescen,
.lang-de .nadomescen { display: revert !important; }

/* ==========================================================================
   OKRASKI
   ========================================================================== */

/* vodoravni ločilni okras z rožico ❦ */
.okras {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 44px auto;
  max-width: 480px;
  color: var(--zlato);
  font-size: 1.3rem;
}
.okras::before, .okras::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rob-mocan), transparent);
}

/* nadnaslov v majhnih kapitelkah */
.nadnaslov {
  font-family: var(--pisava-naslov);
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--zlato-mocno);
  margin: 0 0 14px;
}

/* iluminirana začetnica */
.zacetnica::first-letter {
  font-family: var(--pisava-logo);
  font-size: 4.1rem;
  line-height: 0.82;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--zlato-mocno);
  text-shadow: 0 2px 8px rgba(168, 132, 42, 0.35);
}

/* zlat okvir s kotnima okrasoma */
.okvir {
  position: relative;
  padding: 13px;
  background: linear-gradient(160deg, #fffdf7 0%, #efe3ca 100%);
  border: 1px solid var(--rob);
  box-shadow:
    inset 0 0 0 1px rgba(168, 132, 42, 0.16),
    0 18px 40px var(--senca);
}
.okvir::before, .okvir::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--zlato);
  opacity: 0.85;
}
.okvir::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.okvir::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }

/* gotski lok */
.lok-okvir {
  padding: 7px;
  background: linear-gradient(175deg, var(--zlato-svetlo) 0%, var(--zlato) 45%, var(--zlato-temno) 100%);
  -webkit-mask-image: var(--lok); mask-image: var(--lok);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 20px 40px var(--senca));
}
.lok-okvir img {
  width: 100%;
  -webkit-mask-image: var(--lok); mask-image: var(--lok);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

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

.gumb {
  display: inline-block;
  font-family: var(--pisava-naslov);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 34px;
  border: 1px solid var(--rob-mocan);
  background: linear-gradient(180deg, var(--ozadje-3), var(--ozadje-2));
  color: var(--zlato-mocno);
  cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.15s ease;
}
.gumb:hover {
  background: linear-gradient(180deg, var(--zlato), var(--zlato-temno));
  border-color: var(--zlato-temno);
  color: var(--ozadje-3);
  transform: translateY(-2px);
}

.gumb-glavni {
  background: linear-gradient(180deg, var(--rdeca-svetla), var(--rdeca));
  border-color: var(--rdeca);
  color: var(--ozadje-3);
}
.gumb-glavni:hover {
  background: linear-gradient(180deg, var(--zlato), var(--zlato-temno));
  border-color: var(--zlato-temno);
  color: var(--ozadje-3);
}

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

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

.glava {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(253, 248, 238, 0.98), rgba(245, 236, 217, 0.94));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rob);
  box-shadow: 0 3px 0 rgba(168, 132, 42, 0.16), 0 10px 26px var(--senca);
}

.glava-vrstica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--glava-visina);
}

.logo { display: block; line-height: 1.1; }
.logo-ime {
  font-family: var(--pisava-logo);
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  background: linear-gradient(180deg, #b78f2c 0%, #8a6a12 55%, #57420f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-podnapis {
  font-family: var(--pisava-naslov);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--besedilo-medlo);
  margin-top: 3px;
}

/* --- meni --- */
.meni { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }

.meni > li { position: relative; }

.meni-povezava {
  display: block;
  font-family: var(--pisava-naslov);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--besedilo);
  padding: 12px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.meni-povezava::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 1px;
  background: var(--zlato);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.meni-povezava:hover, .meni-povezava:focus-visible { color: var(--zlato-mocno); }
.meni-povezava:hover::after, .meni-povezava.aktivno::after { transform: scaleX(1); }
.meni-povezava.aktivno { color: var(--zlato-mocno); }

.pusica { font-size: 0.6em; margin-left: 6px; vertical-align: middle; transition: transform 0.3s ease; display: inline-block; }

/* --- spustni meni --- */
.podmeni {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 232px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid var(--rob-mocan);
  box-shadow: 0 20px 40px var(--senca-mocna);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
/* zlata črta na vrhu spustnega menija */
.podmeni::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--zlato), transparent);
}

.spustni:hover > .podmeni,
.spustni:focus-within > .podmeni,
.spustni.odprt > .podmeni {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.spustni:hover .pusica, .spustni.odprt .pusica { transform: rotate(180deg); }

.podmeni a {
  display: block;
  font-family: var(--pisava-naslov);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--besedilo);
  padding: 11px 24px;
  border-left: 2px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, padding 0.22s ease;
}
.podmeni a:hover, .podmeni a.aktivno {
  background: rgba(168, 132, 42, 0.13);
  border-left-color: var(--zlato);
  color: var(--zlato-mocno);
  padding-left: 30px;
}

/* --- preklop jezika --- */
.jeziki { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.jezik-gumb {
  font-family: var(--pisava-naslov);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  background: none;
  border: 1px solid transparent;
  color: var(--besedilo-medlo);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.jezik-gumb:hover { color: var(--zlato-mocno); }
.jezik-gumb[aria-pressed="true"] { color: var(--zlato-mocno); border-color: var(--rob); }
.jeziki span { color: var(--rob-mocan); }

/* --- hamburger --- */
.hamburger {
  display: none;
  width: 46px; height: 42px;
  background: none;
  border: 1px solid var(--rob-mocan);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--zlato-mocno);
  margin: 5px auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.odprt span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.odprt span:nth-child(2) { opacity: 0; }
.hamburger.odprt span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   HERO (naslovna)
   ========================================================================== */

.hero { padding: 78px 0 30px; }

/* En stolpec: besedilo zgoraj, velika slika pod njim. */
.hero-mreza {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  justify-items: center;
  text-align: center;
}
.hero h1 { margin-bottom: 22px; }
.hero-opis { font-size: 1.32rem; color: var(--besedilo-medlo); max-width: 34em; margin-left: auto; margin-right: auto; }
.hero .gumbi { margin-top: 34px; justify-content: center; }

/* Slika na naslovnici: kvadratna, v klasičnem zlatem okvirju.
   Velikost je --mera-slike (privzeto 550 px) iz razdelka :root.
   Okvir je za 28 px večji od slike (2 × 13 px roba + 2 × 1 px obrobe). */
.hero-mreza .okvir {
  width: 100%;
  max-width: calc(var(--mera-slike) + 28px);
  margin: 0 auto;
}
.hero-mreza .okvir img {
  display: block;
  width: 100%;
  height: auto;      /* slika je kvadratna že sama po sebi */
}

/* pas s ključnimi podatki */
.dejstva {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rob);
  border: 1px solid var(--rob);
  margin: 62px 0 0;
}
.dejstvo { background: var(--ozadje-2); padding: 26px 20px; text-align: center; }
.dejstvo b {
  display: block;
  font-family: var(--pisava-naslov);
  font-size: 1.42rem;
  color: var(--zlato-mocno);
  letter-spacing: 0.05em;
}
.dejstvo span { font-size: 0.95rem; color: var(--besedilo-medlo); letter-spacing: 0.05em; }

/* ==========================================================================
   ODSEKI
   ========================================================================== */

.odsek { padding: 74px 0; }
.odsek-glava { text-align: center; margin-bottom: 52px; }
.odsek-glava p { color: var(--besedilo-medlo); max-width: 42em; margin-left: auto; margin-right: auto; }

/* --- kartice s hitrimi potmi --- */
.kartice { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 26px; }
.kartica {
  display: block;
  position: relative;
  padding: 40px 30px 34px;
  background: linear-gradient(170deg, var(--ozadje-3), var(--ozadje-2));
  border: 1px solid var(--rob);
  color: var(--besedilo);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.kartica:hover {
  transform: translateY(-6px);
  border-color: var(--rob-mocan);
  box-shadow: 0 22px 42px var(--senca);
  color: var(--besedilo);
}
.kartica-znak { font-size: 2rem; color: var(--zlato); display: block; margin-bottom: 14px; }
.kartica h3 { margin-bottom: 10px; }
.kartica p { color: var(--besedilo-medlo); font-size: 1.06rem; margin: 0; }
.kartica-vec {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--pisava-naslov);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zlato-mocno);
}

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

/* Strani galerije (Živali, Narava, Stenski motivi, Ostalo) imajo belo
   ozadje, da slike izstopijo kot na galerijski steni.
   Glava in noga ostaneta pergamentni, da je spletišče enotno. */
body.stran-galerija {
  background-color: #ffffff;
  background-image: none;
}
body.stran-galerija::before { display: none; }   /* brez zrnate teksture */

body.stran-galerija .stran-glava {
  background: linear-gradient(180deg, rgba(168, 132, 42, 0.08), transparent);
}
body.stran-galerija .prazno { background: #fffdf7; }
body.stran-galerija .delo-slika { background: #ffffff; }

/* Dela so brez okvirja in v svojem naravnem razmerju — vidi se
   celotna slika, nič ni odrezano. Širina je največ --mera-slike. */
.galerija {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, var(--mera-slike)));
  justify-content: center;
  align-items: start;
  gap: 44px 34px;
}

.delo { margin: 0; }

/* okvir je izklopljen: brez obrobe, podlage in kotnih okraskov */
.delo .okvir, .delo-slika.okvir {
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
}
.delo .okvir::before, .delo .okvir::after { display: none; }

.delo-slika {
  position: relative;
  cursor: zoom-in;
  background: none;
}
.delo-slika img {
  width: 100%;
  height: auto;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.delo:hover .delo-slika img { filter: brightness(1.05) saturate(1.03); opacity: 0.92; }

.delo figcaption { padding: 18px 4px 0; text-align: center; }
.delo-ime {
  font-family: var(--pisava-naslov);
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--besedilo);
  display: block;
}
.delo-mera {
  font-size: 0.95rem;
  color: var(--zlato-mocno);
  letter-spacing: 0.09em;
  display: block;
  margin-top: 5px;
}

/* pas portretov na naslovnici */
.pas { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 18px; }
.pas a { display: block; overflow: hidden; border: 1px solid var(--rob); background: var(--ozadje-2); }
.pas img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.6s ease, filter 0.4s ease; }
.pas a:hover img { transform: scale(1.08); filter: brightness(1.05) saturate(1.05); }

/* prazna kategorija */
.prazno {
  text-align: center;
  padding: 60px 30px;
  border: 1px dashed var(--rob-mocan);
  background: rgba(255, 253, 247, 0.75);
  color: var(--besedilo-medlo);
}

/* ==========================================================================
   LIGHTBOX
   Ostane temen, da slike izstopijo.
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;    /* dvh upošteva vrstico z naslovom na telefonu */
  z-index: 400;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 16px;
  background: rgba(20, 15, 8, 0.96);
  cursor: zoom-out;
  overflow: hidden;
  overscroll-behavior: contain;
}
.lightbox.viden { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  max-height: 84dvh;
  width: auto;
  object-fit: contain;
  margin: 0;
  border: 1px solid var(--rob-mocan);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* napis je navaden element v stolpcu, ne absoluten — tako slika
   ostane natanko na sredini tudi na Androidu in iPhonu */
.lightbox-napis {
  margin: 0;
  max-width: 90%;
  text-align: center;
  font-family: var(--pisava-naslov);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zlato-svetlo);
}
.lightbox-zapri {
  position: absolute;
  top: 20px; right: 26px;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--zlato-svetlo);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--pisava-tekst);
}

/* ==========================================================================
   BESEDILNE STRANI (o meni, cenik, pogoji)
   ========================================================================== */

.stran-glava {
  padding: 72px 0 18px;
  text-align: center;
  border-bottom: 1px solid var(--rob);
  background: linear-gradient(180deg, rgba(168, 132, 42, 0.12), transparent);
}
.stran-glava h1 { margin-bottom: 12px; }
.stran-glava p { color: var(--besedilo-medlo); max-width: 40em; margin: 0 auto; }

.listina {
  max-width: 800px;
  margin: 0 auto;
  padding: 46px 46px 40px;
  background: linear-gradient(170deg, rgba(255, 253, 247, 0.96), rgba(243, 233, 212, 0.96));
  border: 1px solid var(--rob);
  box-shadow: inset 0 0 70px rgba(168, 132, 42, 0.09), 0 18px 40px var(--senca);
}
.listina h2 {
  font-size: 1.32rem;
  color: var(--zlato-mocno);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 42px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rob);
}
.listina h2:first-child { margin-top: 0; }
.listina em { color: var(--besedilo-medlo); }

/* dvostolpčni prikaz z ilustracijo (O meni in odsek O avtorici) */
.dvojno {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--mera-slike) + 28px)) 1fr;
  gap: 60px;
  align-items: start;
}

/* slika ob besedilu je kvadratna, enake mere kot drugod */
.dvojno .okvir {
  width: 100%;
  max-width: calc(var(--mera-slike) + 28px);
  margin: 0 auto;
}
/* Brez aspect-ratio in object-fit: slika se prikaže v svojem naravnem
   razmerju in je vidna v celoti v prav vsakem brskalniku. */
.dvojno .okvir img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- cenik --- */
.cenik-tabela { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.cenik-tabela th {
  font-family: var(--pisava-naslov);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zlato-mocno);
  text-align: left;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--rob-mocan);
  font-weight: 600;
}
.cenik-tabela th:last-child, .cenik-tabela td:last-child { text-align: right; }
.cenik-tabela td {
  padding: 15px 0;
  border-bottom: 1px solid rgba(168, 132, 42, 0.20);
  font-size: 1.13rem;
}
.cenik-tabela tr:last-child td { border-bottom: 0; }
.cenik-tabela .mera { font-family: var(--pisava-naslov); letter-spacing: 0.06em; }
.cenik-tabela .cena { color: var(--zlato-mocno); font-family: var(--pisava-naslov); white-space: nowrap; }
.cenik-tabela .opomba { display: block; font-size: 0.92rem; color: var(--besedilo-medlo); }

/* --- koraki naročila --- */
.koraki { list-style: none; margin: 0; padding: 0; counter-reset: korak; }
.koraki li {
  counter-increment: korak;
  position: relative;
  padding: 0 0 30px 76px;
  border-left: 1px solid var(--rob);
  margin-left: 25px;
}
.koraki li:last-child { border-left-color: transparent; padding-bottom: 0; }
.koraki li::before {
  content: counter(korak);
  position: absolute;
  left: -25px; top: -4px;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  font-family: var(--pisava-naslov);
  font-size: 1.2rem;
  color: var(--zlato-mocno);
  background: linear-gradient(170deg, var(--ozadje-3), var(--ozadje));
  border: 1px solid var(--rob-mocan);
  border-radius: 50%;
}
.koraki h3 { margin-bottom: 8px; color: var(--zlato-mocno); font-size: 1.15rem; }
.koraki p { margin: 0; color: var(--besedilo-medlo); }

/* opozorilo / pečat */
.obrazec-opozorilo {
  margin: 0 0 26px;
  padding: 18px 22px;
  border: 1px dashed var(--rdeca-svetla);
  background: rgba(123, 35, 32, 0.08);
  font-size: 1.02rem;
  color: var(--besedilo);
}

.pecat {
  margin: 34px 0 0;
  padding: 22px 26px;
  border-left: 3px solid var(--rdeca);
  background: rgba(123, 35, 32, 0.07);
  font-size: 1.06rem;
}
.pecat p:last-child { margin-bottom: 0; }

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

.obvestilo {
  margin: 0 0 44px;
  padding: 18px 26px;
  border: 1px dashed var(--rob-mocan);
  background: rgba(168, 132, 42, 0.10);
  color: var(--besedilo-medlo);
  text-align: center;
  font-size: 1.02rem;
}

.izdelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 32px; }

.izdelek {
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, var(--ozadje-3), var(--ozadje-2));
  border: 1px solid var(--rob);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.izdelek:hover {
  border-color: var(--rob-mocan);
  transform: translateY(-5px);
  box-shadow: 0 22px 44px var(--senca);
}
.izdelek-slika { position: relative; overflow: hidden; background: var(--ozadje-2); aspect-ratio: 4 / 3; }
.izdelek-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.izdelek:hover .izdelek-slika img { transform: scale(1.05); }

.izdelek-telo { padding: 26px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.izdelek-ime {
  font-family: var(--pisava-naslov);
  font-size: 1.1rem;
  letter-spacing: 0.07em;
  color: var(--besedilo);
  margin: 0 0 8px;
}
.izdelek-opis { color: var(--besedilo-medlo); font-size: 1.02rem; margin: 0 0 18px; flex: 1; }
.izdelek-cena {
  font-family: var(--pisava-naslov);
  font-size: 1.65rem;
  color: var(--zlato-mocno);
  letter-spacing: 0.04em;
  margin: 0 0 18px;
}

.znacka {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--pisava-naslov);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(25, 19, 10, 0.88);
  border: 1px solid var(--rob-mocan);
  color: var(--zlato-svetlo);
}
.znacka.razprodano { border-color: var(--rdeca-svetla); color: #f0b3aa; }

.placila { display: grid; gap: 10px; }

.gumb-placilo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--pisava-naslov);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 18px;
  border: 1px solid var(--rob-mocan);
  background: linear-gradient(180deg, var(--ozadje-3), var(--ozadje));
  color: var(--zlato-mocno);
  cursor: pointer;
  transition: background 0.26s ease, color 0.26s ease, transform 0.15s ease;
}
.gumb-placilo:hover {
  background: linear-gradient(180deg, var(--zlato), var(--zlato-temno));
  color: var(--ozadje-3);
  transform: translateY(-2px);
}
.gumb-placilo svg { flex: none; }

.gumb-paypal { border-color: #2f7bbf; color: #1b5183; }
.gumb-paypal:hover { background: linear-gradient(180deg, #2f7bbf, #1b4b7a); color: #fff; }

.placila-info {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--rob);
  text-align: center;
  color: var(--besedilo-medlo);
  font-size: 0.98rem;
}
.kartice-logo { display: flex; justify-content: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.kartice-logo span {
  font-family: var(--pisava-naslov);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--rob);
  color: var(--besedilo-medlo);
  background: var(--ozadje-2);
}

/* ==========================================================================
   KOŠARICA — ikona v glavi
   ========================================================================== */

.kosarica-ikona {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--rob-mocan);
  color: var(--zlato-mocno);
  background: linear-gradient(180deg, var(--ozadje-3), var(--ozadje-2));
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.kosarica-ikona:hover {
  background: linear-gradient(180deg, var(--zlato), var(--zlato-temno));
  border-color: var(--zlato-temno);
  color: var(--ozadje-3);
}
.kosarica-ikona.polna { border-color: var(--zlato); }

.kosarica-stevec {
  position: absolute;
  top: -9px; right: -9px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  font-family: var(--pisava-naslov);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ozadje-3);
  background: var(--rdeca);
  border: 1px solid var(--ozadje-2);
  border-radius: 11px;
}

/* Spodnji pas v trgovini: pokaže se, ko je v košarici vsaj en izdelek,
   in vodi naravnost na blagajno k plačilu. */
.kosarica-pas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(253, 248, 238, 0.97), rgba(245, 236, 217, 0.97));
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--rob-mocan);
  box-shadow: 0 -8px 26px var(--senca);
}
.kosarica-pas-vsebina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.kosarica-pas-povzetek {
  font-family: var(--pisava-naslov);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: var(--besedilo-medlo);
}
.kosarica-pas-povzetek strong {
  font-size: 1.2rem;
  color: var(--zlato-mocno);
  letter-spacing: 0.03em;
}
/* prostor, da pas ne prekrije noge */
body.ima-pas { padding-bottom: 86px; }

/* gumb Kupi v trgovini */
.gumb-kupi.dodano {
  background: linear-gradient(180deg, var(--zlato), var(--zlato-temno));
  border-color: var(--zlato-temno);
  color: var(--ozadje-3);
}

/* ==========================================================================
   DARILNI BONI
   Boni imajo namesto fotografije okrašeno ploščico z zneskom.
   ========================================================================== */

.izdelki.boni { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.bon-slika {
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, rgba(168, 132, 42, 0.06) 0 9px, transparent 9px 18px),
    linear-gradient(160deg, #fffdf7 0%, #f0e3c6 100%);
  box-shadow: inset 0 0 0 8px var(--ozadje-3), inset 0 0 0 9px var(--rob-mocan);
}
.bon-okras { font-size: 1.5rem; line-height: 1; color: var(--zlato); }
.bon-znesek {
  font-family: var(--pisava-naslov);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--zlato-mocno);
}
.bon-napis {
  font-family: var(--pisava-naslov);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--besedilo-medlo);
}

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

.blagajna {
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 38px 30px;
  background: linear-gradient(170deg, rgba(255, 253, 247, 0.96), rgba(243, 233, 212, 0.96));
  border: 1px solid var(--rob);
  box-shadow: inset 0 0 70px rgba(168, 132, 42, 0.09), 0 18px 40px var(--senca);
}

.blagajna-vrstica {
  display: grid;
  grid-template-columns: 84px 1fr auto auto 34px;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(168, 132, 42, 0.20);
}
.blagajna-vrstica:first-child { padding-top: 0; }
.blagajna-vrstica:last-child { border-bottom: 0; }

.blagajna-slika {
  width: 84px; height: 64px;
  object-fit: cover;
  border: 1px solid var(--rob);
}
.blagajna-opis { display: flex; flex-direction: column; min-width: 0; }
.blagajna-ime {
  font-family: var(--pisava-naslov);
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  color: var(--besedilo);
}
.blagajna-kos { font-size: 0.95rem; color: var(--besedilo-medlo); }

.kolicina {
  display: flex;
  align-items: center;
  border: 1px solid var(--rob-mocan);
  background: var(--ozadje-3);
}
.kolicina button {
  width: 34px; height: 34px;
  border: 0;
  background: none;
  color: var(--zlato-mocno);
  font-family: var(--pisava-tekst);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.kolicina button:hover { background: var(--zlato); color: var(--ozadje-3); }
.kolicina span {
  min-width: 32px;
  text-align: center;
  font-family: var(--pisava-naslov);
  font-size: 0.98rem;
}

.blagajna-cena {
  font-family: var(--pisava-naslov);
  font-size: 1.12rem;
  color: var(--zlato-mocno);
  white-space: nowrap;
}

.odstrani {
  width: 30px; height: 30px;
  border: 0;
  background: none;
  color: var(--besedilo-medlo);
  font-family: var(--pisava-tekst);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.odstrani:hover { color: var(--rdeca); }

.blagajna-skupaj { padding-top: 24px; text-align: right; }
.blagajna-skupaj > div {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 18px;
}
.blagajna-oznaka {
  font-family: var(--pisava-naslov);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--besedilo-medlo);
}
.blagajna-skupaj strong {
  font-family: var(--pisava-naslov);
  font-size: 1.9rem;
  color: var(--zlato-mocno);
}
.blagajna-skupaj .namig { text-align: right; }

.blagajna-orodja {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rob);
}

.blagajna-bon {
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: var(--zlato);
  background: linear-gradient(160deg, #fffdf7, #f0e3c6);
  border: 1px solid var(--rob);
}

#paypal-gumbi { max-width: 420px; margin: 22px 0 6px; }
#paypal-napaka { color: var(--rdeca); }

/* ==========================================================================
   NAČIN PLAČILA IN BANČNI PODATKI
   ========================================================================== */

.nacini {
  display: grid;
  gap: 14px;
  margin: 6px 0 28px;
  scroll-margin-top: 110px;  /* da lepljiva glava ne prekrije naslova */
}

.nacin {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--rob-mocan);
  background: var(--ozadje-3);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.nacin:hover { border-color: var(--zlato); }
.nacin input {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 5px;
  accent-color: var(--zlato);
}
.nacin:has(input:checked) {
  border-color: var(--zlato);
  background: rgba(168, 132, 42, 0.10);
  box-shadow: inset 0 0 0 1px var(--zlato);
}
.nacin-telo { display: flex; flex-direction: column; }
.nacin-ime {
  font-family: var(--pisava-naslov);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--besedilo);
}
.nacin-opis { font-size: 0.98rem; color: var(--besedilo-medlo); }

.banka {
  margin: 0 0 26px;
  padding: 24px 26px 20px;
  border: 1px solid var(--rob-mocan);
  background: rgba(168, 132, 42, 0.07);
}
.banka h3 {
  margin-bottom: 16px;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zlato-mocno);
}
.banka .namig { margin-bottom: 0; }

.banka-seznam {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 9px 24px;
  margin: 0 0 16px;
}
.banka-seznam dt {
  font-family: var(--pisava-naslov);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--besedilo-medlo);
  padding-top: 4px;
}
.banka-seznam dd { margin: 0; font-size: 1.08rem; word-break: break-word; }
.banka-seznam dd.poudarek {
  font-family: var(--pisava-naslov);
  font-size: 1.16rem;
  letter-spacing: 0.04em;
  color: var(--zlato-mocno);
}

.banka-manjka {
  border-style: dashed;
  background: rgba(123, 35, 32, 0.07);
}
.banka-manjka p:last-child { margin-bottom: 0; }

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

.obrazec {
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  padding: 42px 44px 38px;
  background: linear-gradient(170deg, rgba(255, 253, 247, 0.96), rgba(243, 233, 212, 0.96));
  border: 1px solid var(--rob);
  box-shadow: inset 0 0 70px rgba(168, 132, 42, 0.09), 0 18px 40px var(--senca);
}

.polja { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.polje { display: flex; flex-direction: column; }
.polje.cez { grid-column: 1 / -1; }

.polje label {
  font-family: var(--pisava-naslov);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zlato-mocno);
  margin-bottom: 8px;
}
.obvezno { color: var(--rdeca); }

.polje input[type="text"],
.polje input[type="email"],
.polje input[type="tel"],
.polje select,
.polje textarea {
  font-family: var(--pisava-tekst);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--besedilo);
  background: var(--ozadje-3);
  border: 1px solid var(--rob-mocan);
  border-radius: 0;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.polje input:focus,
.polje select:focus,
.polje textarea:focus {
  outline: none;
  border-color: var(--zlato);
  box-shadow: 0 0 0 3px rgba(168, 132, 42, 0.18);
}
.polje textarea { min-height: 170px; resize: vertical; }

/* polje za datoteke */
.polje input[type="file"] {
  font-family: var(--pisava-tekst);
  font-size: 1rem;
  color: var(--besedilo-medlo);
  background: var(--ozadje-3);
  border: 1px dashed var(--rob-mocan);
  padding: 14px 15px;
  width: 100%;
  cursor: pointer;
}
.polje input[type="file"]::file-selector-button {
  font-family: var(--pisava-naslov);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  margin-right: 14px;
  border: 1px solid var(--rob-mocan);
  background: linear-gradient(180deg, var(--ozadje-3), var(--ozadje));
  color: var(--zlato-mocno);
  cursor: pointer;
}
.polje input[type="file"]::file-selector-button:hover {
  background: linear-gradient(180deg, var(--zlato), var(--zlato-temno));
  color: var(--ozadje-3);
}

.namig { font-size: 0.95rem; color: var(--besedilo-medlo); margin: 9px 0 0; }

/* privolitev za obdelavo podatkov */
.privolitev {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 1rem;
  color: var(--besedilo-medlo);
  line-height: 1.55;
}
.privolitev input {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 5px;
  accent-color: var(--zlato);
}

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

.obrazec-dno {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--rob);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.obrazec-dno .namig { margin: 0; max-width: 30em; }

/* neposredni stik pod obrazcem */
.neposredno {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 34px;
  margin-top: 34px;
}
.neposredno a { font-size: 1.12rem; }

/* ==========================================================================
   POZIV H KONTAKTU
   ========================================================================== */

.poziv {
  margin: 0;
  padding: 76px 40px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(168, 132, 42, 0.16), rgba(255, 253, 247, 0.5)),
    var(--ozadje-2);
  border-top: 1px solid var(--rob);
  border-bottom: 1px solid var(--rob);
}
/* gumbi v tem odseku so poravnani na sredino, tako kot naslov in besedilo */
.poziv .gumbi { justify-content: center; }
.poziv h2 { margin-bottom: 14px; }
.poziv p { color: var(--besedilo-medlo); max-width: 40em; margin: 0 auto 30px; }

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

.noga {
  background: linear-gradient(180deg, rgba(240, 229, 205, 0.9), var(--ozadje));
  border-top: 2px solid var(--rob-mocan);
  padding: 62px 0 0;
  position: relative;
  z-index: 2;
}
.noga-mreza {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  padding-bottom: 48px;
}

.noga-naslov {
  font-family: var(--pisava-naslov);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--zlato-mocno);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rob);
}

.noga-povezave { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
.noga-povezave li { margin-bottom: 11px; break-inside: avoid; }
.noga-povezave a {
  font-family: var(--pisava-naslov);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--besedilo);
  transition: color 0.22s ease, padding-left 0.22s ease;
}
.noga-povezave a::before { content: "❧ "; color: var(--zlato); }
.noga-povezave a:hover { color: var(--zlato-mocno); padding-left: 4px; }

.kontakt-vrstica { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.kontakt-znak {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--rob-mocan);
  color: var(--zlato-mocno);
  font-size: 1.1rem;
  background: var(--ozadje-2);
}
.kontakt-oznaka {
  display: block;
  font-family: var(--pisava-naslov);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--besedilo-medlo);
  margin-bottom: 2px;
}
.kontakt-vrstica a { font-size: 1.12rem; letter-spacing: 0.03em; word-break: break-word; }

/* Oznaka različice: pove, katera različica strani je res naložena
   na strežniku. Če jo želiš skriti, spremeni v display: none. */
.razlicica {
  display: inline-block;
  margin-left: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  opacity: 0.45;
}

.noga-dno {
  border-top: 1px solid var(--rob);
  padding: 24px 0 30px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--besedilo-medlo);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   ODZIVNOST
   ========================================================================== */

@media (max-width: 980px) {
  /* En stolpec: slika gre nad besedilo in ostane vidna. */
  .dvojno { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dvojno .okvir { max-width: 440px; margin: 0 auto; }
  .hero-mreza { gap: 44px; }
  .noga-mreza { grid-template-columns: 1fr; gap: 44px; }
  .listina { padding: 34px 28px; }
}

/* Na telefonu je meni viden enako kot na računalniku — brez skrivanja
   pod gumb. Postavke se prelomijo v drugo vrsto pod logotipom. */
@media (max-width: 860px) {
  .hamburger { display: none; }

  .glava-vrstica {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 4px;
    padding-bottom: 6px;
    min-height: 0;
    padding-top: 10px;
  }
  .glava-vrstica > nav {
    order: 3;
    flex: 1 0 100%;
  }

  .meni {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2px;
  }
  .meni-povezava {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    padding: 9px 8px;
  }
  .meni-povezava::after { left: 8px; right: 8px; bottom: 3px; }

  /* spustni meni se poravna po sredini glave, da ne uide čez rob zaslona */
  .meni > li.spustni { position: static; }
  .podmeni { min-width: 190px; }
  .podmeni a { padding: 10px 20px; font-size: 0.72rem; }
  .podmeni a:hover, .podmeni a.aktivno { padding-left: 25px; }

  .jeziki { margin-left: 4px; }
  .jezik-gumb { font-size: 0.66rem; padding: 6px 7px; }
}

@media (max-width: 620px) {
  .meni-povezava { font-size: 0.62rem; letter-spacing: 0.08em; padding: 8px 6px; }
  .podmeni { min-width: 170px; }
}

@media (max-width: 620px) {
  body { font-size: 1.1rem; }
  .hero { padding: 48px 0 20px; }
  .odsek { padding: 52px 0; }
  .dejstva { grid-template-columns: 1fr; }
  .galerija, .galerija.sirse { grid-template-columns: 1fr; gap: 28px; }
  .izdelki { grid-template-columns: 1fr; }
  .noga-povezave { columns: 1; }
  .listina { padding: 28px 20px; }

  .blagajna { padding: 22px 18px; }
  .blagajna-vrstica {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "slika ime      odstrani"
      "slika kolicina cena";
    gap: 10px 14px;
  }
  .blagajna-slika { grid-area: slika; width: 64px; height: 64px; align-self: start; }
  .blagajna-opis  { grid-area: ime; }
  .kolicina       { grid-area: kolicina; justify-self: start; }
  .blagajna-cena  { grid-area: cena; justify-self: end; align-self: center; }
  .odstrani       { grid-area: odstrani; justify-self: end; }
  .blagajna-orodja { flex-direction: column; }
  .blagajna-orodja .gumb { text-align: center; }

  .banka { padding: 20px 18px 16px; }
  .banka-seznam { grid-template-columns: 1fr; gap: 0; }
  .banka-seznam dd { margin-bottom: 13px; }

  .obrazec { padding: 28px 20px 24px; }
  .polja { grid-template-columns: 1fr; }
  .obrazec-dno { flex-direction: column; align-items: stretch; }
  .obrazec-dno .gumb { text-align: center; }
  .poziv { padding: 54px 22px; }
  .zacetnica::first-letter { font-size: 3.2rem; }
  .koraki li { padding-left: 62px; }

  /* na telefonu povečava zapolni cel zaslon */
  .lightbox { padding: 0; gap: 0; }
  .lightbox img {
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border: 0;
  }
  /* napis leži čez spodnji rob slike, da ji ne jemlje prostora */
  .lightbox-napis {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-width: 100%;
    margin: 0;
    padding: 26px 14px 14px;
    background: linear-gradient(180deg, transparent, rgba(12, 9, 4, 0.85) 55%);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
  }
  .lightbox-zapri {
    top: 10px; right: 10px;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    background: rgba(12, 9, 4, 0.55);
    border-radius: 50%;
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   TISK
   ========================================================================== */

@media print {
  .glava, .noga, .poziv, .lightbox, .gumbi { display: none !important; }
  body { background: #fff; color: #000; }
  .listina { border: 1px solid #999; box-shadow: none; }
}

/* spoštuj željo po manj gibanja */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}