/* =========================================================
   pinjata.si — slog.css

   Kazalo
     1. Barve in mere
     2. Osnove
     3. Gumbi
     4. Glava
     5. Napisi
     6. Junak
     7. Vrv
     8. Bonboni in izjava
     9. Prehodi med sekcijami
    10. Izdelki
    11. Pogosta vprašanja
    12. Novice
    13. Noga
    14. Ožji zasloni
   ========================================================= */

/* ---------- 1. BARVE IN MERE ---------- */
:root{
  /* paleta Fiesta */
  --primarna:   #FF3D7F;
  --primarna-t: #E22463;
  --sekundarna: #00C2B2;
  --poudarek:   #FFC93C;
  --globoka:    #6A2C91;
  --crnilo:     #1A1A1A;

  /* ozadja sekcij — vsaka svoje, da se barva ob drsenju menja */
  --oz-krem:    #FFF6E5;
  --oz-bela:    #FFFDF8;
  --oz-meta:    #E4F7F3;
  --oz-rumena:  #FFF4D6;

  --besedilo-2: #6E6455;

  /* Ozadje junaka na enem mestu — podlaga, trije mehki siji in žarki.
     Zbrano tu, da se da barvo preizkusiti z ene točke (glej /preizkus/). */
  --junak-tla:   #FFE3CC;
  --junak-sij-1: rgba(255, 61,127,.28);
  --junak-sij-2: rgba(255,201, 60,.30);
  --junak-sij-3: rgba(255,138, 61,.22);
  --junak-zarek: rgba(255,138, 61,.14);

  /* 'Naslovna' nima šumnikov — sme samo na logotip in junaka,
     kjer je besedilo stalno. Vse, kar urejata v vsebina.js,
     gre na 'Naslovna2', ki šumnike ima. */
  --pisava-naslov:    'Naslovna', 'Arial Black', sans-serif;
  --pisava-naslov-sl: 'Naslovna2', 'Baloo 2', 'Segoe UI', sans-serif;
  --pisava-telo:   'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --pisava-roka:   'Playpen Sans', cursive;

  /* mere, prevzete iz predloge */
  /* Lestvica velikosti besedila. Vse na strani uporablja eno od
     teh stopenj — drobni koraki (17,5 / 16 / 14,5 / 13,5) so se
     brali kot neurejenost, ne kot hierarhija.
     Napis v nogi in števec v košarici sta namerni izjemi. */
  --t-uvod:     28px;   /* uvodni odstavki, izjava */
  --t-podnas:   19px;   /* imena izdelkov, vprašanja, cene */
  --t-telo:     17px;   /* tekoče besedilo */
  --t-drobno:   15px;   /* dodatne vrstice, noga */
  --t-najdrob:  13px;   /* oznake, opozorila */

  --v-naslov:   1.15;   /* višina vrstice pri naslovih */
  --v-telo:     1.6;
  --v-drobno:   1.5;

  --napis:       52px;
  --napis-razmik: 6.9px;
  --glava:       66px;
  --rob:         clamp(20px, 5vw, 70px);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:var(--glava) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--junak-tla);
  color:var(--crnilo);
  font-family:var(--pisava-telo);
  font-size:var(--t-telo); line-height:var(--v-telo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }

.preskoci{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--crnilo); color:#fff; padding:12px 18px; font-weight:600;
}
.preskoci:focus{ left:0 }

.skrito{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid var(--globoka); outline-offset:3px; border-radius:6px }

/* naslovi odsekov */
.odsek__glava{ max-width:640px; margin:0 0 clamp(28px,4vw,46px) }
.odsek__glava--sredinsko{ margin-inline:auto; text-align:center }

/* Atribut hidden prihaja iz brskalnikovega privzetega sloga in ima
   najnižjo težo — vsak display iz razreda ga povozi in element
   ostane viden. Tu mu damo prednost enkrat za vselej. */
[hidden]{ display:none !important }

.nadnapis{
  font-family:var(--pisava-roka);
  font-size:var(--t-telo); color:var(--primarna); margin:0 0 8px;
}
.odsek__naslov{
  font-family:var(--pisava-naslov-sl);
  font-size:clamp(26px,4.4vw,40px); font-weight:600; line-height:1.15;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--globoka); margin:0 0 14px;
}
.odsek__uvod{ margin:0; color:var(--besedilo-2); font-size:var(--t-telo); line-height:var(--v-telo) }

/* Kaj se da priložiti v košarici. Število ni več pribito na tri —
   dodatke se dodaja v nadzorni plošči, zato se mreža prilagodi:
   pri treh so še vedno vsi v eni vrsti tudi na telefonu, štirje
   pa se na namizju stisnejo v isto vrsto namesto v 3 + 1. */
.dodatki{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px;
  margin:18px 0 0; padding:0; list-style:none; max-width:520px;
}
.dodatki li{ display:flex }
.dodatki button{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  /* Odmik je skrcan, da vecja pisava in ikona ne razpneta ploscice. */
  width:100%; padding:6px 5px 7px; text-align:center; cursor:pointer;
  font:inherit; color:inherit;
  background:#fff; border:2px solid var(--crnilo); border-radius:14px;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.dodatki button:hover{ transform:translateY(-3px); box-shadow:4px 5px 0 rgba(26,26,26,.18) }
.dodatki button:active{ transform:translateY(0) }
.dodatki button.je-dodan{ background:var(--poudarek) }
.dodatki svg{
  width:34px; height:34px; flex:none;
  fill:var(--barva); stroke:var(--crnilo); stroke-width:1.7;
  stroke-linejoin:round; stroke-linecap:round;
}
/* naložena slika stopi na mesto ikone in je enako velika */
.dodatki__slika{ width:34px; height:34px; flex:none; object-fit:contain }

/* zasilna oznaka, kadar dodatek nima ne slike ne vgrajene ikone */
.dodatki__crka{
  width:34px; height:34px; flex:none; display:grid; place-content:center;
  border-radius:50%; background:var(--barva); border:2px solid var(--crnilo);
  font-family:var(--pisava-naslov-sl); font-weight:600; font-size:19px;
  color:var(--crnilo); text-transform:uppercase;
}

/* enako veliko kot ime izdelka na kartici spodaj */
.dodatki__ime{ font-size:var(--t-podnas); font-weight:600; line-height:1.25; color:var(--crnilo) }
.dodatki__cena{
  font-family:var(--pisava-naslov-sl); font-weight:600; font-size:var(--t-podnas);
  color:var(--primarna); letter-spacing:.02em; line-height:1.15;
}
.odsek__glava--sredinsko .dodatki{ margin-inline:auto }

.opomba{ margin:34px 0 0; color:var(--besedilo-2); font-size:var(--t-telo); line-height:var(--v-telo); text-align:center }
.opomba a{ color:var(--globoka); font-weight:600; text-decoration:underline; text-underline-offset:3px }

/* ---------- 3. GUMBI ---------- */
.gumb{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border:2px solid var(--primarna); border-radius:999px;
  background:var(--primarna); color:#fff; cursor:pointer;
  font-family:var(--pisava-telo); font-size:var(--t-drobno); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.gumb:hover{ background:var(--primarna-t); border-color:var(--primarna-t);
  transform:translateY(-2px); box-shadow:0 8px 0 -4px rgba(255,61,127,.35) }
.gumb:active{ transform:translateY(0) }

.gumb--obris{ background:var(--oz-bela); color:var(--globoka); border-color:var(--globoka) }
.gumb--obris:hover{ background:var(--globoka); border-color:var(--globoka); color:#fff;
  box-shadow:0 8px 0 -4px rgba(106,44,145,.3) }

.pilula{
  display:inline-flex; align-items:center; padding:7px 17px;
  border:2px solid var(--crnilo); border-radius:999px;
  font-size:var(--t-najdrob); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  transition:background-color .18s ease, color .18s ease;
}
.pilula:hover{ background:var(--crnilo); color:var(--oz-krem) }

.okroglec{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:none; padding:0; cursor:pointer;
  background:#fff; border:2px solid var(--crnilo); border-radius:50%;
  color:var(--crnilo);
  transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
.okroglec svg{ width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.okroglec:hover{ background:var(--poudarek); transform:translateY(-2px) }

/* ---------- 4. GLAVA ---------- */
.glava{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:16px;
  padding:14px var(--rob);
}
.glava::before{
  content:""; position:absolute; top:0; left:0; right:0; height:165%;
  pointer-events:none; z-index:-1;
  /* Glava je pritrjena in potuje čez kremno, mentolno, rumeno in
     turkizno sekcijo. Kremna prevleka je zato nad vsemi razen nad
     prvo delovala kot madež — nevtralna mlečna pa se ujame z vsako. */
  background:linear-gradient(to bottom,
      rgba(255,255,255,.60) 0%, rgba(255,255,255,.58) 56%, rgba(255,255,255,0) 100%);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  mask-image:linear-gradient(to bottom,#000 56%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 56%,transparent 100%);
}
.glava__logo{ position:absolute; left:50%; transform:translateX(-50%) }
.glava__kosarica{
  margin-left:auto; position:relative;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:none;
  border:2px solid var(--crnilo); border-radius:50%;
  transition:background-color .18s ease, color .18s ease;
}
.glava__kosarica svg{ width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.glava__kosarica:hover{ background:var(--poudarek) }
/* pinjata na poti v košarico */
.letec{
  position:fixed; z-index:200; pointer-events:none;
  padding:4px; object-fit:contain;
  background:var(--oz-bela); border:2px solid var(--crnilo); border-radius:10px;
  will-change:transform, opacity;
}

.glava__stevec{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px;
  display:grid; place-items:center; padding:0 5px;
  background:var(--primarna); color:#fff; border-radius:999px;
  font-size:11.5px; font-weight:700; line-height:1;   /* izjema: značka na košarici */
}

/* mobilni meni: tri črte kot trakovi krep papirja */
.meni__gumb{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:46px; height:42px; flex:none; padding:0; cursor:pointer;
  background:var(--oz-bela); border:2px solid var(--crnilo); border-radius:14px;
}
.meni__gumb span{
  display:block; width:22px; height:4px; border-radius:2px;
  background:var(--primarna);
  transition:transform .22s ease, opacity .16s ease;
}
.meni__gumb span:nth-child(2){ width:17px; background:var(--sekundarna) }
.meni__gumb span:nth-child(3){ background:var(--poudarek) }

.glava.je-odprt .meni__gumb span:nth-child(1){ transform:translateY(9px) rotate(45deg) }
.glava.je-odprt .meni__gumb span:nth-child(2){ opacity:0 }
.glava.je-odprt .meni__gumb span:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }

.meni{
  position:absolute; top:100%; left:12px; right:12px; z-index:2;
  background:var(--oz-bela);
  /* spodaj brez obrobe in brez zaobljenja — tam se resice
     nadaljujejo iz plošče, ne visijo pod njo */
  border:2px solid var(--crnilo); border-bottom:0; border-radius:18px 18px 0 0;
  filter:drop-shadow(5px 7px 0 rgba(26,26,26,.18));
  opacity:0; transform:translateY(-10px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.glava.je-odprt .meni{ opacity:1; transform:none; pointer-events:auto }

.meni__seznam{ list-style:none; margin:0; padding:10px }
.meni__seznam a{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px;
  font-size:var(--t-telo); font-weight:600; color:var(--crnilo);
}
.meni__seznam a::before{
  content:""; width:13px; height:13px; flex:none; border-radius:50%;
  border:2px solid var(--crnilo); background:var(--barva);
}
.meni__seznam li:nth-child(1) a{ --barva:var(--primarna) }
.meni__seznam li:nth-child(2) a{ --barva:var(--sekundarna) }
.meni__seznam li:nth-child(3) a{ --barva:var(--poudarek) }
.meni__seznam li:nth-child(4) a{ --barva:var(--globoka) }
.meni__seznam li:nth-child(5) a{ --barva:#FF8A3D }
.meni__seznam a:hover{ background:var(--oz-krem) }

/* resast rob, kot ga ima krep papir */
.meni__resice{
  position:absolute; top:100%; left:-2px; right:-2px; height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13'%3E%3Cpath d='M0,-1 L11,11 L22,-1' fill='%23FFFDF8' stroke='%231A1A1A' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x;
}

/* ---------- 5. NAPISI ---------- */
.logo{
  display:inline-flex;
  font-family:var(--pisava-naslov); font-size:36px; line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
}
.logo span{ display:inline-block }

.napis{
  display:block;
  font-family:var(--pisava-naslov);
  font-size:var(--napis); line-height:1.1; letter-spacing:var(--napis-razmik);
  text-transform:uppercase; white-space:nowrap;
  paint-order:stroke fill;
}
/* Brez dodatne poteze: 4 px obrobe v isti barvi je črke debelilo
   toliko, da so se notranje odprtine (O, A, P) zaprle in je bilo
   besedilo težko brati. Pisava je sama po sebi dovolj mastna. */
.napis--polni{ color:var(--oz-bela); -webkit-text-stroke:2.8px var(--globoka) }
.napis--votli{ color:var(--oz-bela); -webkit-text-stroke:2.8px var(--primarna) }

/* ---------- 6. JUNAK ---------- */
/* Barvni pas — junak, vrv in izjava delijo eno podlago.
   Žarki so pripeti nanj, ne na junaka, zato sevajo iz dna pasu
   (torej od prehoda) navzgor proti glavi. */
.pas{
  position:relative; isolation:isolate;
  background:var(--junak-tla);
}
.pas::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  /* Sega pod pas, do valovite crte prehoda — tam se zarki zbirajo.
     Lego crte sporoci stran.js kot --sled-sredina. */
  inset:0 0 calc(-1 * var(--sled-sredina, 140px)) 0;
  background:repeating-conic-gradient(from 0deg at 50% 100%,
      var(--junak-zarek) 0deg 5deg, transparent 5deg 12deg);
  -webkit-mask-image:radial-gradient(circle at 50% 100%, #000 0%, rgba(0,0,0,.45) 48%, transparent 80%);
  mask-image:radial-gradient(circle at 50% 100%, #000 0%, rgba(0,0,0,.45) 48%, transparent 80%);
}
/* trije mehki barvni siji pri vrhu pasu, kjer stoji naslov */
.pas::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(980px 560px at 50% 7%, var(--junak-sij-1), transparent 66%),
    radial-gradient(820px 480px at 6% 1%,  var(--junak-sij-2), transparent 68%),
    radial-gradient(820px 480px at 94% 1%, var(--junak-sij-3), transparent 68%);
}

.junak{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:170px var(--rob) 0;
  background:transparent;
  text-align:center;
}
.junak__naslov{
  display:flex; flex-direction:column; align-items:center; gap:6px; margin:0;
  width:100%;
}
/* Naslov je en sam stavek, zato se raje prelomi, kot da bi ga manjšali. */
.junak__naslov .napis{ white-space:normal; max-width:100%; text-wrap:balance }
.junak__podnaslov{
  max-width:600px; margin:0;
  font-size:var(--t-uvod); line-height:var(--v-drobno); color:var(--besedilo-2);
}
.junak__gumbi{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center }

/* ---------- 7. VRV ---------- */
.vrv{
  position:relative; height:330px;   /* nadomesti vrv.js po dejanskih merah */
  background:transparent;
  cursor:grab;
  /* Kartice namenoma segajo čez rob zaslona. Odrežemo jih tu, v
     sami sekciji — sicer se razširi celotna postavitev in glava,
     ki je position:fixed, se poravna po tej širši meri (na
     telefonu je logotip odrinilo iz sredine). */
  overflow:hidden;
  /* vodoravni poteg prevzamemo sami, navpično drsenje ostane strani */
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.vrv.je-vlecen{ cursor:grabbing }
.vrv__nit{ position:absolute; top:0; left:0; width:100%; height:200px; overflow:visible }
.vrv__kosi{ position:absolute; top:0; left:0; right:0; height:100% }

.obesek{
  position:absolute; top:0; left:0; transform-origin:top center;
  width:var(--mera,230px); will-change:transform;
  /* figure ima privzeti margin 1em 40px — ta bi kartico odmaknil
     od lege, ki jo izračuna vrv.js, in mašna ne bi segla do vrvi */
  margin:0;
}
/* mašna, s katero pinjata visi na vrvi

   Višina je natanko razmik med vrvjo in kartico, širina pa v
   istem razmerju kot viewBox, da se risba ne pomakne s sredine.
   Zanki segata nad vrv, zato overflow ne sme rezati. */
.obesek__trak{
  position:absolute; bottom:100%; left:50%; margin-left:-31.3px;
  width:62.6px; height:38px; overflow:visible;
  transform-origin:bottom center;
}
.obesek__vrvca{ fill:none; stroke:var(--crnilo); stroke-width:2.6; stroke-linecap:round }
.obesek__rep{ fill:none; stroke:var(--crnilo); stroke-width:2.2; stroke-linecap:round }
.obesek__zanka{ fill:none; stroke:var(--crnilo); stroke-width:2.1; stroke-linejoin:round }
.obesek__vozel{ fill:var(--crnilo) }

.obesek img{
  width:100%; aspect-ratio:1; object-fit:contain; padding:13%;
  pointer-events:none; -webkit-user-drag:none;
  background:var(--barva,#FFE9A8);
  border:2px solid var(--crnilo); border-radius:10px;
  box-shadow:4px 5px 0 rgba(26,26,26,.16);
}

/* ---------- 8. BONBONI IN IZJAVA ---------- */
.izjava{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:30px;
  padding:74px var(--rob) 62px;
  background:transparent; text-align:center;
}


.izjava__besedilo{
  position:relative; max-width:800px; margin:0;
  font-family:var(--pisava-telo); font-weight:500;
  font-size:var(--t-uvod); line-height:var(--v-drobno); letter-spacing:-.4px; color:var(--crnilo);
  text-wrap:balance;
}
.izjava__besedilo em{ font-family:var(--pisava-roka); font-style:normal; color:var(--primarna) }

/* ---------- 9. PREHODI MED SEKCIJAMI ---------- */
.prehod{ line-height:0; margin:0 }
.prehod svg{ display:block; width:100%; height:auto }

/* prehod: pinjate poskakujejo po vijugasti sledi.
   Vso postavitev (višino, krivuljo, velikost likov) izračuna
   stran.js, ker je odvisna od širine zaslona. */
/* Nad valovito crto prozoren, da skozenj sevajo zarki iz pasu;
   val jih odreze po svoji krivulji. Pod crto barva naslednje sekcije. */
.prehod--sled{ position:relative; overflow:hidden; background:transparent }
.prehod .sled__risba{ position:absolute; inset:0; width:100%; height:100% }
.sled__pod{ fill:var(--oz-meta) }
.sled__pike{
  fill:none; stroke:var(--crnilo); stroke-width:5;
  stroke-linecap:round; stroke-dasharray:0 17; opacity:.4;
}

/* offset-path pelje nosilec po isti krivulji kot pike */
.sled__nosilec{
  position:absolute; top:0; left:0;
  offset-rotate:0deg;                 /* pinjata ostane pokonci */
  /* privzeto offset-path na krivuljo postavi središče elementa;
     hočemo njegovo izhodišče, stik s tlemi uredi .lik spodaj */
  offset-anchor:0 0;
  animation:sled-pot linear infinite;
}
.sled__skok{ transform-origin:bottom center; animation:sled-skok .84s infinite }

/* lik stoji na krivulji: stik je v risbi pri y = 92 od 100 */
.prehod .lik{ display:block; transform:translate(-50%, -92%) }
.lik__obris{ fill:none; stroke:var(--crnilo); stroke-width:3.4; stroke-linejoin:round }
.lik__resice{ fill:none; stroke:var(--crnilo); stroke-width:1.7; stroke-linecap:round }
.lik__noga rect{ fill:var(--poudarek); stroke:var(--crnilo); stroke-width:3 }
.lik__vrat{ fill:var(--sekundarna); stroke:var(--crnilo); stroke-width:3.4; stroke-linejoin:round }
.lik__uho{ fill:var(--primarna); stroke:var(--crnilo); stroke-width:3; stroke-linejoin:round }
.lik__rep{ fill:none; stroke:var(--crnilo); stroke-width:3; stroke-linecap:round }
.lik__cvet{ fill:var(--primarna); stroke:var(--crnilo); stroke-width:3 }
.lik__list{ fill:var(--sekundarna); stroke:var(--crnilo); stroke-width:3; stroke-linejoin:round }
.lik__oko{ fill:var(--crnilo) }

@keyframes sled-pot{
  from{ offset-distance:0% }
  to  { offset-distance:100% }
}

/* počep ob pristanku, odriv, let, pristanek */
@keyframes sled-skok{
  0%   { transform:translateY(0) rotate(0deg) scale(1.08,.88); animation-timing-function:ease-out }
  13%  { transform:translateY(0) rotate(0deg) scale(1,1);      animation-timing-function:ease-out }
  48%  { transform:translateY(var(--skok)) rotate(-6deg) scale(.97,1.04); animation-timing-function:ease-in }
  87%  { transform:translateY(0) rotate(0deg) scale(1,1);      animation-timing-function:ease-out }
  100% { transform:translateY(0) rotate(0deg) scale(1.08,.88) }
}

@media (prefers-reduced-motion:reduce){
  .sled__nosilec{ animation:none; offset-distance:22% }
  .sled__skok{ animation:none }
}

/* Girlanda: vrv je hkrati meja med sekcijama — nad njo se konča
   mentolna sekcija izdelkov, pod njo se začne rumena z vprašanji. */
.prehod--zastavice{ position:relative; overflow:hidden; background:var(--oz-meta) }
.prehod .girlanda{ position:absolute; inset:0; width:100%; height:100% }
.girlanda__pod{ fill:var(--oz-rumena) }
.girlanda__vrv{ fill:none; stroke:var(--crnilo); stroke-width:3; stroke-linecap:round }

.listic{
  stroke:var(--crnilo); stroke-width:2; stroke-linejoin:round;
  /* listič se ziba okoli mesta, kjer je pripet na vrv */
  transform-box:fill-box; transform-origin:50% 0%;
  animation:vetrc 2.8s ease-in-out infinite;
}
@keyframes vetrc{
  0%,100%{ transform:rotate(-4.5deg) scaleX(.95) }
  50%    { transform:rotate(4.5deg)  scaleX(1) }
}
@media (prefers-reduced-motion:reduce){
  .listic{ animation:none }
}

/* pas sladkarij: rumena zgoraj, turkizna spodaj, med njima
   valovita črta z bonboni, ki počasi teče vstran */
.prehod--sladkarije{
  position:relative; overflow:hidden;
  background:var(--oz-rumena);
}
.sladkarije__trak{
  position:absolute; top:0; left:var(--ploscica,-800px); bottom:0;
  display:flex; will-change:transform;
  animation:sladkorni-tok 52s linear infinite;
}
/* Bonboni ob robu ploščice segajo čeznjo. Risba jih privzeto
   odreže in na stiku dveh ploščic se pokaže šiv — zato overflow
   pustimo pri miru; pas kot celota reže nadrejeni element. */
.sladkarije__risba{ flex:none; height:100%; display:block; overflow:visible }
.sladkarije__val{ fill:var(--sekundarna) }

/* premik za natanko eno ploščico — zato se zanka ne pozna */
@keyframes sladkorni-tok{
  from{ transform:translateX(0) }
  to  { transform:translateX(var(--ploscica,-800px)) }
}
@media (prefers-reduced-motion:reduce){
  .sladkarije__trak{ animation:none }
}

/* ---------- 10. IZDELKI ---------- */
.izdelki{
  background:var(--oz-meta);
  padding:16px var(--rob) 90px;
}
.mreza{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:56px 46px; max-width:1180px; margin:0 auto 64px;
  align-items:start;
  --zamik-k:1;   /* na enem stolpcu zamike ugasnemo — glej 14. */
}

.kartica{
  display:flex; flex-direction:column;
  background:#fff; border:2px solid var(--crnilo); border-radius:16px;
  overflow:hidden;
  /* zamik in zasuk nastavi stran.js; drsenje gre po lastnosti
     translate, da ga prehod za transform ne vleče za sabo */
  transform:translate(calc(var(--zamik-x,0px) * var(--zamik-k,1)),
                      calc(var(--zamik,0px)   * var(--zamik-k,1))) rotate(var(--zasuk,0deg));
  transition:transform .25s ease, box-shadow .2s ease;
}
.kartica:hover{
  transform:translate(calc(var(--zamik-x,0px) * var(--zamik-k,1)),
                      calc(var(--zamik,0px)   * var(--zamik-k,1) - 8px)) rotate(0deg);
  box-shadow:8px 10px 0 rgba(26,26,26,.18);
}

.kartica__slika{
  position:relative;
  aspect-ratio:1; display:grid; place-items:center; padding:9%;
  background:var(--barva,#FFD6E4);
  border-bottom:2px solid var(--crnilo);
}
/* Slike so prozorni PNG/WebP pravih pinjat. mix-blend-mode:multiply je
   bil za prejšnje črno-bele risbe na belem — barvne pinjate bi obarval
   s podlago ploščice. */
.kartica__slika img{ width:100%; height:100%; object-fit:contain }

/* lupa v kotu slike — majhna, a dovolj vidna, da je ne spregledaš */
.kartica__lupa{
  position:absolute; top:9px; right:9px;
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:var(--oz-bela); border:2px solid var(--crnilo); border-radius:50%;
  box-shadow:0 3px 0 rgba(26,26,26,.18);
  transition:transform .16s ease, background-color .16s ease;
}
.kartica__lupa svg{
  width:19px; height:19px; fill:none;
  stroke:var(--crnilo); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.kartica__lupa:hover{ transform:scale(1.1) rotate(-6deg); background:var(--poudarek) }
.kartica__lupa:active{ transform:scale(1) }

.kartica__telo{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1 }
.kartica__ime{
  font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-podnas); letter-spacing:.04em; text-transform:uppercase;
  color:var(--globoka); margin:0;
}
.kartica__mere{ margin:0; font-size:var(--t-drobno); line-height:var(--v-drobno); color:var(--besedilo-2) }
.kartica__vrsta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px }
.kartica__cena{
  font-family:var(--pisava-naslov-sl); font-weight:600; font-size:var(--t-podnas); color:var(--primarna);
  margin:0; letter-spacing:.03em;
}
.kartica__gumb{
  border:2px solid var(--crnilo); border-radius:999px; background:var(--poudarek);
  color:var(--crnilo); cursor:pointer; padding:10px 16px;
  font-family:var(--pisava-telo); font-size:var(--t-najdrob); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; line-height:1;
  transition:background-color .18s ease, transform .18s ease;
}
.kartica__gumb:hover{ background:var(--primarna); color:#fff; transform:translateY(-2px) }
.kartica__gumb.je-dodan{ background:var(--sekundarna); color:#fff }

/* ---------- 11. POGOSTA VPRAŠANJA ---------- */
.vprasanja{
  position:relative;
  background:var(--oz-rumena);
  padding:70px var(--rob) 100px;
}
.vprasanja__seznam{
  display:flex; flex-direction:column; gap:16px;
  max-width:760px; margin:0 auto;
}
.vprasanje{ position:relative }
.vprasanje__okvir{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.vprasanje__okvir path{
  fill:#fff; stroke:var(--obroba,#1A1A1A); stroke-width:2.5;
  stroke-linejoin:round;
}
.vprasanje__glava{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:16px; width:100%; padding:17px 26px; text-align:left;
  background:transparent; border:0; cursor:pointer; font:inherit; color:inherit;
}
.vprasanje__naslov{
  margin:0; font-family:var(--pisava-telo); font-weight:600;
  font-size:var(--t-podnas); line-height:1.25; text-transform:uppercase; letter-spacing:.02em;
}
.vprasanje__znak{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--obroba,#1A1A1A); color:#fff;
  display:grid; place-items:center; font-size:var(--t-podnas); line-height:0; font-weight:700;
  transition:transform .25s ease;
}
.vprasanje.je-odprt .vprasanje__znak{ transform:rotate(45deg) }

.vprasanje__odgovor{
  position:relative; z-index:1;
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.33,0,.2,1);
}
.vprasanje.je-odprt .vprasanje__odgovor{ grid-template-rows:1fr }

/* Reže ovoj, ne odstavek: overflow poreže šele pri robu odmika,
   zato bi spodnji padding na odstavku pustil vrstico besedila
   vidno tudi pri zaprtem vprašanju. */
.vprasanje__ovoj{ overflow:hidden; min-height:0 }

/* Odmik je tu vedno — če bi ga dodajali šele ob odpiranju, bi se
   višina vsebine spremenila v trenutku klika in polje bi poskočilo. */
.vprasanje__odgovor p{
  margin:0; padding:0 26px 20px;
  font-size:var(--t-telo); line-height:var(--v-telo); color:var(--besedilo-2);
}

.pinjata-znak{
  position:absolute; width:96px; height:auto;
  right:clamp(8px,4vw,70px); top:44px; pointer-events:none;
}

/* ---------- 12. KONTAKT ---------- */
.kontakt{
  background:var(--sekundarna);
  padding:52px var(--rob) 58px;
}
/* naslov sekcije stoji bliže obrazcu kot drugod */
.kontakt .odsek__glava{ margin-bottom:22px }
.kontakt .odsek__glava{ max-width:640px }
.kontakt .odsek__naslov{ color:#05463F }
.kontakt .nadnapis{ color:#FFF0B8 }
.kontakt .odsek__uvod{ color:#063E39 }

.obrazec{
  max-width:620px; margin:0 auto;
  display:flex; flex-direction:column; gap:11px;
}
.obrazec__par{ display:grid; grid-template-columns:1fr 1fr; gap:11px }

/* vsako polje ima svojo barvno piko ob napisu — kot trak krep papirja */
.obrazec__polje{ display:flex; flex-direction:column; gap:4px; margin:0 }
.obrazec__polje label{
  display:flex; align-items:center; gap:9px;
  font-size:var(--t-drobno); font-weight:700; color:#05463F;
  letter-spacing:.03em; text-transform:uppercase;
}
.obrazec__polje label::before{
  content:""; width:12px; height:12px; flex:none; border-radius:50%;
  background:var(--barva); border:2px solid var(--crnilo);
}
.obrazec__drobno{
  font-size:var(--t-najdrob); font-weight:600; letter-spacing:0;
  text-transform:none; color:#0A6F66;
}

.obrazec input[type=text],
.obrazec input[type=email],
.obrazec input[type=tel],
.obrazec input[type=date],
.obrazec textarea{
  width:100%; padding:9px 14px;
  font-family:var(--pisava-telo); font-size:var(--t-telo); color:var(--crnilo);
  background:#fff; border:2px solid var(--crnilo); border-radius:12px;
  transition:box-shadow .16s ease, border-color .16s ease;
}
.obrazec textarea{ resize:vertical; min-height:86px; line-height:1.45 }
.obrazec input::placeholder,
.obrazec textarea::placeholder{ color:#9A9A9A }
.obrazec input:focus,
.obrazec textarea:focus{
  outline:none; border-color:var(--barva, var(--globoka));
  box-shadow:0 0 0 4px rgba(255,255,255,.55);
}
.obrazec .je-prazno{ border-color:var(--primarna-t) }

/* pripenjanje slik */
.nalozi{ position:relative }
.nalozi input[type=file]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.nalozi__gumb{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 14px; cursor:pointer; text-align:center;
  background:rgba(255,255,255,.5);
  border:3px dashed var(--crnilo); border-radius:18px;
  transition:background-color .16s ease, transform .16s ease;
}
.nalozi__gumb:hover{ background:rgba(255,255,255,.8); transform:translateY(-2px) }
.nalozi input[type=file]:focus-visible + .nalozi__seznam,
.nalozi input[type=file]:focus-visible ~ .nalozi__gumb{ outline:3px solid var(--globoka) }
.nalozi__gumb svg{
  width:28px; height:28px; fill:none; stroke:var(--crnilo); stroke-width:2.6;
  stroke-linejoin:round; stroke-linecap:round;
}
.nalozi__naslov{
  font-size:var(--t-drobno); font-weight:700; color:#05463F;
  letter-spacing:.03em; text-transform:uppercase;
}
.nalozi.je-poln .nalozi__gumb{ border-style:solid; background:rgba(255,255,255,.75) }

.nalozi__seznam{
  list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.nalozi__seznam:empty{ margin:0 }
.nalozi__seznam li{
  position:relative; width:62px; height:62px;
  background:#fff; border:2px solid var(--crnilo); border-radius:12px; overflow:hidden;
}
.nalozi__seznam img{ width:100%; height:100%; object-fit:cover }
.nalozi__brisi{
  position:absolute; top:3px; right:3px; width:22px; height:22px;
  display:grid; place-items:center; cursor:pointer; padding:0;
  background:#fff; border:2px solid var(--crnilo); border-radius:50%;
  font:inherit; font-size:13px; line-height:1; color:var(--crnilo);
}
.nalozi__brisi:hover{ background:var(--primarna); border-color:var(--primarna); color:#fff }

.obrazec__privolitev{
  display:flex; align-items:flex-start; gap:9px;
  font-size:var(--t-najdrob); line-height:1.4; color:#05463F;
}
.obrazec__privolitev input{
  width:20px; height:20px; flex:none; margin:1px 0 0; accent-color:var(--globoka);
}
.obrazec__privolitev a{ color:#05463F; font-weight:700; text-decoration:underline; text-underline-offset:3px }

.obrazec__poslji{ align-self:flex-start; margin-top:2px; padding:11px 22px }
.obrazec__odziv{
  margin:0; min-height:1px; font-size:var(--t-drobno); font-weight:700; color:#05463F;
}
.obrazec__odziv.je-napaka{ color:#7A0B24 }

/* ---------- 13. NOGA ---------- */

/* Napis stoji na valoviti meji med turkizno in temno sekcijo.
   Val je narisan čez črke, zato jim odreže dno — enako, kot je
   bilo v predlogi. */
.podpis{
  position:relative; overflow:hidden;
  display:flex; justify-content:center;
  /* spodnji odmik določa, koliko črk val odreže */
  padding:8px var(--rob) 0;
  background:var(--sekundarna);
}
.podpis__logo{ margin:0 }
.podpis .logo{ font-size:clamp(40px, 13.3vw, 86px); letter-spacing:.05em }
/* Gost niz drobnih valov. Ena ploščica, ponovljena vodoravno —
   tako jih je enako veliko na vsaki širini in se ne raztegnejo. */
.podpis__val{
  position:absolute; left:0; right:0; bottom:-1px; height:18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='22'%3E%3Cpath d='M0,11 Q14,1 28,11 T56,11 L56,23 L0,23 Z' fill='%231A1A1A'/%3E%3C/svg%3E") repeat-x 0 0 / 22px 9px,
    linear-gradient(var(--crnilo), var(--crnilo)) no-repeat 0 8px / 100% calc(100% - 8px);
}

.noga{
  background:var(--crnilo); color:#fff;
  padding:46px var(--rob) 40px;
  display:flex; flex-direction:column; gap:32px;
}

/* Novice levo, obstoječe besedilo desno. Na telefonu se zloži,
   besedilo pa pride nad povezave. */
.noga__mreza{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px 56px;
  align-items:start; width:100%; max-width:1180px; margin:0 auto;
  /* Brez tega se mreža na ozkem zaslonu ne more skrčiti pod širino
     svoje vsebine in raztegne celo stran čez rob zaslona. */
  min-width:0;
}
.noga__novice, .noga__stik{ min-width:0 }
.noga__naslov{
  margin:0 0 8px; font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-uvod); line-height:1.15; letter-spacing:.03em;
  text-transform:uppercase; color:#fff;
}
.noga__uvod{ margin:0 0 16px; color:rgba(255,255,255,.66); font-size:var(--t-drobno) }

/* Polje in gumb sta združena v eno pilulo: na telefonu se ne prelomita
   v dve vrsti, obrazec pa zavzame pol manj prostora. */
.novice__obrazec{
  display:flex; align-items:center; max-width:420px;
  padding:3px; background:#fff;
  border:2px solid var(--crnilo); border-radius:999px;
}
.novice__obrazec:focus-within{ box-shadow:0 0 0 3px var(--poudarek) }
.novice__obrazec input{
  flex:1 1 auto; min-width:0; padding:8px 6px 8px 14px;
  font-family:var(--pisava-telo); font-size:var(--t-telo); color:var(--crnilo);
  background:transparent; border:0;
}
.novice__obrazec input:focus{ outline:none }
.novice__obrazec input::placeholder{ color:#9A9A9A }
.novice__obrazec .gumb{ flex:none; align-self:stretch; padding:0 20px; border-width:0 }
.novice__obrazec .gumb:hover{ transform:none; box-shadow:none }
.novice__odziv{
  margin:10px 0 0; min-height:1px; font-size:var(--t-drobno);
  font-weight:600; color:var(--poudarek);
}
.novice__odziv.je-napaka{ color:#FF8FA8 }

.noga__stik{ display:flex; flex-direction:column; gap:12px; text-align:right }
.noga__drobno{ margin:0; color:rgba(255,255,255,.62); font-size:var(--t-drobno) }
/* srček v podpisu — malo večji od besedila in v barvi znamke */
.srce{
  color:var(--primarna); font-size:1.15em; line-height:1;
  margin:0 .14em; vertical-align:-.05em;
}
.noga__varnost{
  margin:0; font-size:var(--t-najdrob); line-height:var(--v-telo);
  color:rgba(255,255,255,.5);
}
.noga__varnost strong{ color:var(--poudarek) }

.noga__povezave{
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
}
.noga__povezave a{ color:rgba(255,255,255,.72); font-size:var(--t-drobno); font-weight:600 }
.noga__povezave a:hover{ color:var(--poudarek) }

/* ---------- 13c. PRAVNI STRANI ---------- */
.pravno{
  padding:calc(var(--glava) + 56px) var(--rob) 90px;
  max-width:760px; margin:0 auto;
}
.pravno__telo{ color:var(--crnilo) }
.pravno__telo h2{
  margin:36px 0 10px;
  font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-uvod); line-height:1.2; letter-spacing:.02em;
  color:var(--globoka);
}
.pravno__telo h3{
  margin:22px 0 6px;
  font-size:var(--t-podnas); font-weight:600; color:var(--crnilo);
}
.pravno__telo p{ margin:0 0 12px; line-height:var(--v-telo) }
.pravno__telo ul{ margin:0 0 12px; padding-left:22px; line-height:var(--v-telo) }
.pravno__telo li{ margin-bottom:6px }
.pravno__telo em{ color:var(--primarna-t); font-style:normal; font-weight:600 }
.pravno__telo strong{ font-weight:700 }

/* vidno opozorilo, da besedilo še ni dopolnjeno s podatki podjetja */
.pravno__manjka{
  padding:14px 18px; margin:0 0 8px;
  background:var(--oz-rumena); border:2px solid var(--crnilo); border-radius:14px;
  font-size:var(--t-drobno); line-height:1.5;
}
.pravno__datum{ margin-top:34px; color:var(--besedilo-2); font-size:var(--t-drobno) }

/* ---------- 13d. NAPAKA 404 ---------- */
.napaka{
  background:var(--oz-krem);
  padding:calc(var(--glava) + 60px) var(--rob) 64px;
  text-align:center;
}
.napaka__ovoj{ max-width:640px; margin:0 auto }
.napaka__naslov{
  margin:0 0 14px;
  font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:clamp(30px,6vw,46px); line-height:var(--v-naslov);
  letter-spacing:.02em; color:var(--globoka); text-wrap:balance;
}
.napaka__uvod{
  margin:0 auto 30px; max-width:46ch;
  font-size:var(--t-uvod); line-height:var(--v-telo); color:var(--besedilo-2);
}
.napaka__dejanja{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center }


/* ---------- 13e. BLAGAJNA ---------- */
/* Ista turkizna podlaga kot kontaktni obrazec — isti opravek,
   isti videz, in vsa pravila za polja veljajo brez izjem. */
.blagajna{
  background:var(--sekundarna);
  padding:calc(var(--glava) + 44px) var(--rob) 64px;
}
.blagajna .odsek__glava{ margin-bottom:26px; max-width:640px }
.blagajna .odsek__naslov{ color:#05463F }
.blagajna .nadnapis{ color:#FFF0B8 }

.blagajna__prazna{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  padding:30px 0 50px; text-align:center;
}
.blagajna__prazna .kos__prazna-besedilo{ color:#05463F }

/* Obrazec levo, povzetek desno. V HTML je povzetek prvi, ker mora
   na telefonu stati na vrhu; tu ga prestavimo. */
.blagajna__mreza{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,352px);
  gap:26px; align-items:start;
  max-width:1060px; margin:0 auto;
}
.blagajna__mreza > .povzetek{ grid-column:2; grid-row:1 }
.blagajna__mreza > .blagajna__obrazec{ grid-column:1; grid-row:1; max-width:none }

/* ---- povzetek ---- */
.povzetek{
  background:var(--oz-bela);
  border:2px solid var(--crnilo); border-radius:20px;
  box-shadow:0 6px 0 rgba(0,0,0,.16);
  overflow:hidden; position:sticky; top:calc(var(--glava) + 14px);
}
.povzetek__glava{
  display:none;                      /* samo na telefonu */
  width:100%; align-items:center; gap:12px;
  padding:13px 16px; background:none; border:0; cursor:pointer;
  font-family:var(--pisava-telo); text-align:left;
}
.povzetek__naslov{
  flex:1; font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-podnas); color:var(--globoka);
}
.povzetek__znesek{ font-weight:700; font-size:var(--t-telo) }
.povzetek__pusc{
  width:20px; height:20px; flex:none; fill:none;
  stroke:var(--crnilo); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
.povzetek.je-odprt .povzetek__pusc{ transform:rotate(180deg) }

.povzetek__telo{ padding:18px 16px 16px }
.povzetek__seznam{ list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-direction:column; gap:12px }

.povzetek__vrstica{ display:grid; grid-template-columns:52px 1fr auto; gap:11px;
  align-items:center }
.povzetek__slika{
  width:52px; height:52px; border-radius:12px; overflow:hidden;
  border:2px solid var(--crnilo); background:var(--oz-krem);
  display:flex; align-items:center; justify-content:center;
}
.povzetek__slika img{ width:100%; height:100%; object-fit:contain }
.povzetek__pika{ width:16px; height:16px; border-radius:50%; background:var(--poudarek) }

.povzetek__opis{ min-width:0 }
.povzetek__ime{
  margin:0; font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-telo); line-height:1.25; color:var(--crnilo);
}
.povzetek__kos{ margin:1px 0 0; font-size:var(--t-najdrob); color:var(--besedilo-2) }

.povzetek__stevilo{ display:flex; align-items:center; gap:7px; grid-column:2; grid-row:2 }
.povzetek__stevilo span{ min-width:16px; text-align:center; font-weight:700;
  font-size:var(--t-drobno); font-variant-numeric:tabular-nums }
.povzetek__stevilo button{
  width:25px; height:25px; flex:none; border-radius:50%;
  border:2px solid var(--crnilo); background:var(--oz-krem);
  font-size:15px; line-height:1; cursor:pointer; color:var(--crnilo);
}
.povzetek__stevilo button:hover:not(:disabled){ background:var(--poudarek) }
.povzetek__stevilo button:disabled{ opacity:.35; cursor:default }

.povzetek__znesek-vrstice{
  margin:0; grid-column:3; grid-row:1 / span 2; align-self:center;
  font-weight:700; font-size:var(--t-telo); font-variant-numeric:tabular-nums;
}

.povzetek__racun{ border-top:2px dashed rgba(0,0,0,.18); padding-top:12px;
  display:flex; flex-direction:column; gap:6px }
.povzetek__vrsta{ display:flex; justify-content:space-between; gap:12px;
  font-size:var(--t-drobno); color:var(--besedilo-2);
  font-variant-numeric:tabular-nums }
.povzetek__vrsta--skupaj{
  margin-top:5px; padding-top:9px; border-top:2px solid var(--crnilo);
  font-size:var(--t-podnas); color:var(--crnilo);
}
.povzetek__vrsta--skupaj strong{ font-size:var(--t-uvod); color:var(--globoka) }
.povzetek__drobno{ margin:12px 0 0; font-size:var(--t-najdrob); color:var(--besedilo-2);
  line-height:1.45 }

/* ---- merilnik do brezplačne dostave ---- */
.meter{ margin-top:14px }
.meter__tir{ height:9px; border-radius:99px; background:var(--oz-krem);
  border:2px solid var(--crnilo); overflow:hidden }
.meter__polnilo{ display:block; height:100%; width:0;
  background:var(--poudarek); transition:width .3s ease }
.meter__besedilo{ margin:6px 0 0; font-size:var(--t-najdrob); color:var(--besedilo-2) }

/* ---- izbira dostava / prevzem ---- */
.izbira{ border:0; padding:0; margin:0 }
.izbira__naslov{
  padding:0; margin:0 0 7px;
  font-size:var(--t-drobno); font-weight:700; color:#05463F;
  letter-spacing:.03em; text-transform:uppercase;
}
.izbira__moznosti{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.izbira__moznost{
  display:flex; flex-direction:column; gap:2px; cursor:pointer;
  padding:11px 14px; background:#fff;
  border:2px solid var(--crnilo); border-radius:14px;
  transition:box-shadow .16s ease, transform .16s ease;
}
.izbira__moznost:has(input:checked){
  background:var(--oz-rumena); box-shadow:0 4px 0 rgba(0,0,0,.18); transform:translateY(-2px);
}
.izbira__moznost input{ position:absolute; opacity:0; width:1px; height:1px }
.izbira__moznost:has(input:focus-visible){ outline:3px solid var(--globoka); outline-offset:2px }
.izbira__ime{ font-family:var(--pisava-naslov-sl); font-weight:600; font-size:var(--t-telo) }
.izbira__opis{ font-size:var(--t-najdrob); color:var(--besedilo-2); line-height:1.35 }

/* ---- hitro plačilo (denarnica) ---- */
.hitro__ali{
  display:flex; align-items:center; gap:12px; margin:14px 0 2px;
  font-size:var(--t-najdrob); color:#05463F; font-weight:600;
}
.hitro__ali::before, .hitro__ali::after{
  content:""; flex:1; height:2px; background:rgba(0,0,0,.18);
}

/* ---- opomba ---- */
.pripis__gumb{
  cursor:pointer; font-size:var(--t-drobno); font-weight:700; color:#05463F;
  letter-spacing:.03em; text-transform:uppercase; list-style:none;
}
.pripis__gumb::-webkit-details-marker{ display:none }
.pripis__gumb::before{ content:"+ "; font-weight:700 }
.pripis[open] .pripis__gumb::before{ content:"− " }
.pripis[open] .pripis__gumb{ margin-bottom:7px; display:inline-block }

/* ---- plačilo ---- */
.placilo{
  background:rgba(255,255,255,.55); border:2px dashed var(--crnilo);
  border-radius:14px; padding:13px 15px;
}
.placilo__naslov{
  margin:0 0 7px; font-size:var(--t-drobno); font-weight:700; color:#05463F;
  letter-spacing:.03em; text-transform:uppercase;
}
.placilo__polje{ min-height:42px }

/* ---- odzivi in gumb ---- */
.obrazec__odziv{ font-size:var(--t-najdrob); font-weight:600; line-height:1.4; min-height:1px }
.obrazec__odziv.je-dobro{ color:#05463F }
.obrazec__odziv.je-opozorilo{ color:#8A3B00 }

.gumb--velik{ width:100%; padding:15px 24px; font-size:var(--t-podnas); margin-top:3px }

.blagajna__odziv{ margin:0; font-size:var(--t-drobno); font-weight:600; color:#05463F }
.blagajna__odziv.je-napaka{ color:#7A1230 }
.blagajna__pomiritev{
  margin:0; font-size:var(--t-najdrob); color:#063E39; line-height:1.5; text-align:center;
}
.blagajna__pomiritev a{ color:#05463F; font-weight:700; text-decoration:underline }

@media (max-width:880px){
  /* en stolpec; povzetek gre nazaj na vrh in se zloži */
  .blagajna__mreza{ grid-template-columns:1fr; gap:18px }
  .blagajna__mreza > .povzetek{ grid-column:1; grid-row:1 }
  .blagajna__mreza > .blagajna__obrazec{ grid-column:1; grid-row:2 }

  .povzetek{ position:static }
  .povzetek__glava{ display:flex }
  .povzetek__telo{ display:none; padding-top:2px }
  .povzetek.je-odprt .povzetek__telo{ display:block }
}

@media (max-width:520px){
  .izbira__moznosti{ grid-template-columns:1fr }
  /* Splošno pravilo niže v datoteki zlomi vse pare v en stolpec.
     Poštna številka in kraj sodita skupaj, zato večja teža. */
  .obrazec .obrazec__par--posta{ grid-template-columns:104px 1fr }
}

/* ---------- 13b. KOŠARICA ---------- */
.kos{
  padding:calc(var(--glava) + 56px) var(--rob) 90px;
  max-width:860px; margin:0 auto; min-height:60vh;
}
.kos__seznam{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }

.kos__vrstica{
  display:grid; align-items:center; gap:16px;
  grid-template-columns:76px 1fr auto auto 34px;
  padding:12px 14px;
  background:#fff; border:2px solid var(--crnilo); border-radius:16px;
}
.kos__slika{
  width:76px; height:76px; display:grid; place-items:center; overflow:hidden;
  background:var(--oz-krem); border:2px solid var(--crnilo); border-radius:11px;
}
.kos__slika img{ width:100%; height:100%; object-fit:contain; padding:8% }
.kos__pika{ width:26px; height:26px; border-radius:50%; background:var(--sekundarna); border:2px solid var(--crnilo) }

.kos__ime{
  margin:0; font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-podnas); letter-spacing:.03em; text-transform:uppercase; color:var(--globoka);
}
.kos__kos{ margin:2px 0 0; font-size:var(--t-drobno); color:var(--besedilo-2) }

.kos__stevilo{
  display:flex; align-items:center; gap:4px;
  border:2px solid var(--crnilo); border-radius:999px; padding:3px;
}
.kos__stevilo button{
  width:30px; height:30px; flex:none; cursor:pointer; padding:0;
  display:grid; place-items:center;
  background:var(--oz-krem); border:0; border-radius:50%;
  font:inherit; font-size:var(--t-podnas); font-weight:700; line-height:1; color:var(--crnilo);
}
.kos__stevilo button:hover{ background:var(--poudarek) }
.kos__stevilo span{ min-width:24px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums }

.kos__znesek{
  margin:0; font-family:var(--pisava-naslov-sl); font-weight:600; font-size:var(--t-podnas);
  color:var(--primarna); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kos__brisi{
  width:32px; height:32px; flex:none; cursor:pointer; padding:0;
  background:transparent; border:2px solid var(--crnilo); border-radius:50%;
  font:inherit; font-size:var(--t-telo); line-height:1; color:var(--crnilo);
}
.kos__brisi:hover{ background:var(--primarna); border-color:var(--primarna); color:#fff }

.kos__racun{
  margin-top:24px; padding:14px 18px 16px;
  background:var(--oz-rumena); border:2px solid var(--crnilo); border-radius:16px;
}
.kos__vrsta{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:6px 0; font-size:var(--t-telo); color:var(--besedilo-2);
  font-variant-numeric:tabular-nums;
}
.kos__vrsta--skupaj{
  margin-top:6px; padding-top:13px; border-top:2px solid var(--crnilo);
  font-size:var(--t-telo); font-weight:600; color:var(--crnilo);
}
.kos__vrsta--skupaj strong{
  font-family:var(--pisava-naslov-sl); font-weight:600; font-size:var(--t-uvod);
  color:var(--globoka); font-variant-numeric:tabular-nums;
}
.kos__opomba{ margin:12px 2px 0; font-size:var(--t-drobno); color:var(--besedilo-2) }
.kos__dejanja{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }

.kos__prazna{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:40px 0 }
.kos__prazna-besedilo{ margin:0; font-size:var(--t-uvod); color:var(--besedilo-2) }


/* ---------- 14. OŽJI ZASLONI ---------- */
@media (max-width:1040px){
  .mreza{ grid-template-columns:repeat(2, 1fr); gap:36px 32px; max-width:760px }
}

@media (max-width:760px){
  /* Noga se zloži v en stolpec: novice, nato besedilo, nato povezave. */
  .noga__mreza{ grid-template-columns:1fr; gap:28px }
  .noga__stik{ text-align:left }

  /* kontaktni obrazec: polji eno pod drugim, gumb čez vso širino */
  .obrazec__par{ grid-template-columns:1fr }
  .obrazec__poslji{ align-self:stretch }

  /* Na ozkem zaslonu je ploscica precej ozja, zato tu se malo
     skrcimo, da ostane enako visoka kot prej. */
  .dodatki button{ padding:3px 4px 4px; gap:2px }
  .dodatki svg{ width:30px; height:30px }

  /* na telefonu tesnejše vrstice uvodnega odstavka */
  .junak__podnaslov, .izjava__besedilo{ line-height:1.32 }

  :root{
    --napis:31px; --napis-razmik:4.2px; --glava:58px;
    /* lestvica se zmanjša kot celota, da razmerja med stopnjami ostanejo */
    --t-uvod:20px; --t-podnas:17px; --t-telo:16px; --t-drobno:14px; --t-najdrob:12.5px;
  }

  /* Črke so tu precej manjše, zato mora biti tudi pas valov nižji —
     s stalnimi 46 px jih je skoraj v celoti pokril. */
  .podpis__val{
    height:21px;
    background-size:31px 12px, 100% calc(100% - 11px);
    background-position:0 0, 0 11px;
  }

  .pilula{ display:none }
  .meni__gumb{ display:flex }

  /* celotna glava je tu manjša, da ostane več prvega zaslona za vrv */
  .glava{ padding:11px var(--rob) }
  .meni__gumb{ width:39px; height:36px; gap:4px; border-radius:12px }
  .meni__gumb span{ width:19px; height:3.4px }
  .glava.je-odprt .meni__gumb span:nth-child(1){ transform:translateY(7.4px) rotate(45deg) }
  .glava.je-odprt .meni__gumb span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg) }
  .glava__kosarica{ width:36px; height:36px }
  .glava__kosarica svg{ width:18px; height:18px }
  .glava__stevec{ min-width:17px; height:17px; font-size:10px; top:-4px; right:-4px }

  .junak{ padding-top:86px; gap:12px }
  .logo{ font-size:22px; letter-spacing:.09em }

  .izjava{ padding-bottom:80px }

  .odsek__naslov{ letter-spacing:.04em }
  .vprasanja{ padding-top:56px }
  .pinjata-znak{ width:64px; top:14px; right:10px; opacity:.85 }


  /* Spodnji odmiki sekcij so na telefonu za desetino manjši —
     zaslon je kratek in prazen pas pod vsako sekcijo se pozna. */
  .izjava{ padding-bottom:72px }     /* 80 */
  .izdelki{ padding-bottom:81px }    /* 90 */
  .vprasanja{ padding-bottom:90px }  /* 100 */
  .kontakt{ padding-bottom:52px }    /* 58 */
  .noga{ padding-bottom:36px }       /* 40 */
  .kos{ padding-bottom:81px }        /* 90 */
  .pravno{ padding-bottom:81px }     /* 90 */
}

@media (max-width:640px){
  /* na ozkem zaslonu se vrstica zloži: slika levo, opis desno,
     spodaj pa števec in znesek v svoji vrsti */
  .kos{ padding-top:calc(var(--glava) + 34px) }
  .kos__vrstica{ grid-template-columns:64px 1fr 32px; gap:12px }
  .kos__slika{ width:64px; height:64px }
  .kos__stevilo{ grid-column:2; justify-self:start }
  .kos__znesek{ grid-column:3 / -1; justify-self:end; grid-row:2 }
  .kos__brisi{ grid-row:1; grid-column:3 }
  .kos__dejanja .gumb{ width:100% }
}

@media (max-width:520px){
  .podpis__val{
    height:15px;
    background-size:24px 9px, 100% calc(100% - 8px);
    background-position:0 0, 0 8px;
  }

  /* dva izdelka v vrsto — zamiki ostanejo, le manjši, sicer se
     kartici v isti vrsti preveč razideta */
  .mreza{ gap:26px 14px; --zamik-k:.45 }

  .kartica__telo{ padding:11px 12px 13px; gap:2px }
  .kartica__ime{ letter-spacing:.03em }
  .kartica__vrsta{ flex-direction:column; align-items:stretch; gap:8px; margin-top:9px }
  .kartica__gumb{ padding:9px 8px; letter-spacing:.02em }
  .kartica__slika{ padding:7% }
  .junak__gumbi{ gap:10px }
}

/* ---------- 15. POVEČAVA IZDELKA ---------- */

/* Ko je okno odprto, stran zadaj ne sme drseti — sicer se pod
   prstom premakne vsebina, ki je uporabnik sploh ne vidi. */
body.je-zaklenjen{ overflow:hidden }

/* Drsenje je TU, ne na okvirju. Okvir ima gumbe, ki molijo čezenj,
   in overflow na njem bi jih odrezal. align-items:flex-start z
   margin:auto na otroku pa poskrbi, da se pri visoki vsebini ne
   odreže vrh — kar bi se pri align-items:center zgodilo. */
.lupa{
  position:fixed; inset:0; z-index:60;
  display:flex; justify-content:center;
  /* Dve vrstici namenoma: kadar je okno višje od zaslona, ga
     navadno centriranje potisne čez zgornji rob in vrh postane
     nedosegljiv. "safe center" v tem primeru poravna na vrh.
     Brskalnik, ki tega ne pozna, obdrži prvo vrstico. */
  align-items:flex-start;
  align-items:safe center;
  /* Zgoraj mora biti prostora za glavo, ki lebdi nad stranjo in ima
     višji z-index. Na nizkih zaslonih je sicer okno zlezlo podnjo in
     skrilo gumb za zapiranje — okna ni bilo mogoče zapreti z X. */
  padding:calc(var(--glava) + 24px) clamp(14px, 4vw, 40px) clamp(14px, 4vw, 40px);
  overflow-y:auto;
}
/* Barva sekcije z izdelki, ne črna — okno tako ne izpade kot tuj
   sistemski pojav, ampak kot da se je kartica samo povečala. */
.lupa__zaslon{ position:absolute; inset:0; background:rgba(228, 247, 243, .88) }

.lupa__okvir{
  position:relative; z-index:1;
  width:min(880px, 100%);
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--oz-bela); border:3px solid var(--crnilo); border-radius:24px;
  /* Brez tega se stolpec ne more skrčiti pod širino svoje vsebine,
     zraste čez vsebino okvirja in prekrije desno obrobo. */
  min-width:0;
  box-shadow:0 10px 0 rgba(26,26,26,.28);
  animation:lupa-vstop .2s ease;
}
@keyframes lupa-vstop{
  from{ transform:scale(.94) translateY(10px); opacity:0 }
  to{ transform:none; opacity:1 }
}

.lupa__slika, .lupa__telo{ min-width:0 }

.lupa__slika{
  aspect-ratio:1; display:grid; place-items:center; padding:7%;
  background:var(--barva, #FFD6E4);
  border-right:3px solid var(--crnilo);
  border-radius:21px 0 0 21px;
}
.lupa__slika img{ width:100%; height:100%; object-fit:contain }

.lupa__telo{
  padding:26px 28px 28px;
  display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.lupa__ime{
  margin:0; font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-uvod); line-height:1.15; letter-spacing:.03em;
  text-transform:uppercase; color:var(--globoka);
}
.lupa__mere{ margin:0; font-size:var(--t-drobno); color:var(--besedilo-2) }
.lupa__opis{ margin:8px 0 0; font-size:var(--t-telo); line-height:var(--v-telo) }
.lupa__vrsta{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-top:18px;
}
.lupa__cena{
  margin:0; font-family:var(--pisava-naslov-sl); font-weight:600;
  font-size:var(--t-uvod); color:var(--primarna); letter-spacing:.03em;
}

.lupa__zapri{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:var(--primarna); border:3px solid var(--crnilo); border-radius:50%;
  transition:transform .16s ease;
}
.lupa__zapri svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round }
.lupa__zapri:hover{ transform:rotate(90deg) }

.lupa__pusc{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:var(--oz-bela); border:3px solid var(--crnilo); border-radius:50%;
  transition:background-color .16s ease;
}
.lupa__pusc svg{ width:21px; height:21px; fill:none; stroke:var(--crnilo); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round }
.lupa__pusc:hover{ background:var(--poudarek) }
.lupa__pusc--nazaj{ left:-20px }
.lupa__pusc--naprej{ right:-20px }

@media (max-width:720px){
  .lupa__okvir{ grid-template-columns:1fr }
  .lupa__slika{ border-right:0; border-bottom:3px solid var(--crnilo); border-radius:21px 21px 0 0 }
  /* Puščici nista več nad sliko, kjer sta prekrivali pinjato, ampak
     sedita na meji med sliko in opisom, ob zunanjih robovih. Vrstica
     zanju je brez višine (negativni odmik), zato okno ne zraste.
     Zgornji odmik opisa je večji, da naslova ne prekrijeta. */
  .lupa__okvir{ grid-template-areas:"slika" "puscici" "telo" }
  .lupa__slika{ grid-area:slika }
  .lupa__telo{ grid-area:telo; padding:34px 22px 24px }

  .lupa__pusc{
    position:static; grid-area:puscici; align-self:center;
    top:auto; bottom:auto; transform:none;
    margin-block:-22px;
  }
  .lupa__pusc--nazaj{ left:auto; justify-self:start; margin-left:10px }
  .lupa__pusc--naprej{ right:auto; justify-self:end; margin-right:10px }

  .lupa__zapri{ top:-10px; right:-6px }
}

@media (prefers-reduced-motion: reduce){
  .lupa__okvir{ animation:none }
  .kartica__lupa:hover, .lupa__zapri:hover{ transform:none }
}