/* ===========================================================================
   Premium tema „Galerija" - zid galerije: topao papir, mastilo, plakatsko
   pismo (Bricolage Grotesque), boja firme kao jedini jak ton - brojevi
   poglavlja, aktivna kategorija, dugme.

   Slike stoje na blago toniranoj podlozi i stapaju se sa njom (multiply),
   pa bela pozadina fotografije ne pravi „kutiju". Uvek svetla - to je
   njen karakter (kao Salon što je uvek taman).
   =========================================================================== */
:root,:root:not([data-theme="light"]){
  --poz:#f3f0e8;
  --pov:#fbfaf6;
  --pov2:#e9e5da;
  --tekst:#121110;
  --tiho:#5f5b53;
  --bledo:#9a958a;
  --linija:#dcd6c8;
  --dobro:#1f8a55;
  --pazi:#b86b00;
  --lose:#c2412f;
  --r:6px;
  --font:"Manrope",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --plakat:"Bricolage Grotesque","Manrope",Arial,sans-serif;
  --senka:none;
  --senka-jaka:0 40px 90px -40px rgba(18,17,16,.5);
  --podloga:#ece8de;
  color-scheme:light;
}
body{background:var(--poz);font-size:15px}
::selection{background:var(--a);color:#fff}

/* ---------- najava ---------- */
.najava{background:var(--tekst);color:var(--poz);font-size:12px}
.najava-red{justify-content:center;gap:28px;height:34px}
.najava-sredina{opacity:.8}

/* ---------- zaglavlje ---------- */
.zaglavlje{background:color-mix(in srgb,var(--poz) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--linija)}
@media (min-width:641px){.zaglavlje-red{height:72px}}
.znak{border-radius:6px;background:var(--tekst);color:var(--poz)}
.znak.logo{background:transparent;border:0}
.firma-ime{font-family:var(--plakat);font-weight:800;font-size:21px;letter-spacing:-.03em}
.trazi{border-radius:0;border:0;border-bottom:1.5px solid var(--tekst);background:transparent;height:40px;padding:0 2px}
.trazi:focus-within{box-shadow:none;border-color:var(--a)}
.trazi kbd{border-color:var(--linija)}
.nalog-dugme{background:none;border:0;color:var(--tekst)}
.korpa-dugme{background:var(--tekst);color:var(--poz);border-radius:999px;height:44px;padding:0 8px 0 18px}
.korpa-dugme:hover{background:var(--a)}
.korpa-tekst{font-weight:700}
.korpa-tekst b{background:var(--poz);color:var(--tekst)}

/* indeks kategorija: 01 Spona · 02 Pakovanje */
.zaglavlje .kategorije{display:flex;gap:22px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;cursor:default}
.zaglavlje .kategorije::-webkit-scrollbar{display:none}
.gl-kat{flex:none;border:0;background:none;padding:4px 0;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--tiho);border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s}
.gl-kat span{font-family:var(--plakat);font-size:11px;font-weight:800;color:var(--bledo);margin-right:6px;font-variant-numeric:tabular-nums}
.gl-kat:hover{color:var(--tekst)}
.gl-kat.aktivna{color:var(--tekst);border-bottom-color:var(--a)}
.gl-kat.aktivna span{color:var(--a)}
.gl-kat:focus-visible{outline:2px solid var(--a);outline-offset:3px}

/* ---------- PLAKAT ---------- */
.gl-plakat{padding:56px 0 0;overflow:hidden}
.gl-plakat::before{display:none}
.gl-nadnaslov{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tiho);
  display:flex;align-items:center;gap:10px}
.gl-nadnaslov::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--a)}
.gl-plakat .gl-ime{font-family:var(--plakat);font-weight:800;font-size:clamp(54px,11.5vw,184px);line-height:.86;letter-spacing:-.055em;margin:0 0 28px;
  text-wrap:balance;overflow-wrap:anywhere;animation:gl-ulaz .8s cubic-bezier(.2,.8,.2,1) both}
.gl-cinjenice{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:20px 0 30px;border-top:1.5px solid var(--tekst);font-size:14.5px;color:var(--tiho)}
.gl-cinjenice b{font-family:var(--plakat);font-size:22px;font-weight:800;color:var(--tekst);margin-right:6px;font-variant-numeric:tabular-nums}
.gl-dalje{margin-left:auto;color:var(--tekst);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--a);padding-bottom:2px}
.gl-dalje:hover{color:var(--a)}

/* traka koja klizi */
.gl-traka{overflow:hidden;padding:6px 0 44px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gl-traka-tok{display:flex;gap:16px;width:max-content;animation:gl-klizi 70s linear infinite}
.gl-traka:hover .gl-traka-tok,.gl-traka:focus-within .gl-traka-tok{animation-play-state:paused}
.gl-traka-karta{position:relative;flex:none;width:220px;border:0;padding:0;cursor:pointer;background:var(--podloga);border-radius:var(--r);overflow:hidden;text-align:left}
.gl-traka-karta img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;padding:14px;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gl-traka-karta:hover img{transform:scale(1.05)}
.gl-traka-karta span{position:absolute;left:10px;right:10px;bottom:10px;font-size:12px;font-weight:600;background:var(--pov);padding:6px 9px;border-radius:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.gl-traka-karta:hover span,.gl-traka-karta:focus-visible span{opacity:1;transform:none}
.gl-traka-karta:focus-visible{outline:2px solid var(--a);outline-offset:3px}
@keyframes gl-klizi{to{transform:translateX(calc(-50% - 8px))}}
@keyframes gl-ulaz{from{opacity:0;transform:translateY(24px)}}

/* bez slika: indeks kategorija krupno */
.gl-indeks{list-style:none;margin:0 auto;padding:0 24px 40px;max-width:1280px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.gl-indeks button{display:flex;align-items:baseline;gap:14px;width:100%;border:0;border-top:1px solid var(--linija);background:none;padding:16px 0;cursor:pointer;text-align:left;
  font-family:var(--plakat);font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;color:var(--tekst)}
.gl-indeks button span{font-size:13px;font-weight:800;color:var(--a);font-variant-numeric:tabular-nums}
.gl-indeks button small{margin-left:auto;font-family:var(--font);font-size:13px;font-weight:600;color:var(--tiho)}
.gl-indeks button:hover{color:var(--a)}

/* ---------- traka iznad ponude ---------- */
.traka{margin:44px 0 10px}
.traka h2{font-family:var(--plakat);font-weight:800;font-size:clamp(30px,3.6vw,48px);letter-spacing:-.04em}
.segment{background:transparent;border:1.5px solid var(--tekst);border-radius:999px}
.segment button{border-radius:999px}
.segment button.aktivan{background:var(--tekst);color:var(--poz);box-shadow:none}

/* ---------- POGLAVLJA ---------- */
.gl-poglavlje{grid-column:1/-1;padding:34px 0 10px;border-top:1.5px solid var(--tekst)}
.gl-poglavlje:first-child{border-top:0;padding-top:18px}
.gl-poglavlje-glava{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.gl-broj{font-family:var(--plakat);font-weight:800;font-size:15px;color:var(--a);font-variant-numeric:tabular-nums}
.gl-poglavlje-glava h3{font-family:var(--plakat);font-weight:800;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.045em;line-height:1}
.gl-koliko{font-size:13.5px;color:var(--tiho)}
.gl-sve{margin-left:auto;border:0;background:none;padding:0;cursor:pointer;font-weight:700;font-size:14px;color:var(--tekst);border-bottom:1.5px solid currentColor}
.gl-sve:hover{color:var(--a)}
.gl-red-okvir{position:relative}
.gl-red{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:2px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--linija) transparent}
.gl-red > *{scroll-snap-align:start;flex:none;width:248px}
.gl-strelica{position:absolute;top:calc(50% - 46px);z-index:3;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--tekst);color:var(--poz);font-size:24px;line-height:1;display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
  opacity:0;transition:opacity .2s,background .2s}
.gl-strelica.levo{left:-14px}
.gl-strelica.desno{right:-14px}
.gl-red-okvir:hover .gl-strelica,.gl-strelica:focus-visible{opacity:1}
.gl-strelica:hover{background:var(--a)}
.gl-jos{display:flex;flex-direction:column;justify-content:center;gap:6px;aspect-ratio:4/5;border:1.5px dashed var(--tekst);border-radius:var(--r);background:none;cursor:pointer;
  padding:22px;text-align:left;font-size:14px;font-weight:600;color:var(--tiho);line-height:1.4}
.gl-jos b{font-family:var(--plakat);font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--tekst)}
.gl-jos:hover{border-color:var(--a);color:var(--a)}
.gl-jos:hover b{color:var(--a)}

/* ---------- kartica ---------- */
.mreza{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 20px}
.gl-kartica{display:flex;flex-direction:column;gap:8px;animation:gl-ulaz .5s both;min-width:0}
.gl-medij{position:relative}
.gl-slika{display:block;width:100%;border:0;padding:0;cursor:pointer;background:var(--podloga);border-radius:var(--r);overflow:hidden;aspect-ratio:4/5}
.gl-slika img{width:100%;height:100%;object-fit:contain;padding:12%;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gl-kartica:hover .gl-slika img{transform:scale(1.06)}
.gl-slika:focus-visible{outline:2px solid var(--a);outline-offset:3px}
.gl-poster{display:flex;align-items:flex-end;width:100%;height:100%;padding:18px;text-align:left;
  background:linear-gradient(160deg,hsl(var(--h) 30% 86%),hsl(var(--h) 26% 76%))}
.gl-poster em{font-style:normal;font-family:var(--plakat);font-weight:800;font-size:24px;line-height:1;letter-spacing:-.04em;color:hsl(var(--h) 40% 18%);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gl-oznaka{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--pov);color:var(--tekst)}
.gl-oznaka.malo{background:var(--tekst);color:var(--poz)}
.gl-oznaka.nema{color:var(--tiho)}
.gl-kontrola{position:absolute;right:10px;bottom:10px}
.gl-dodaj{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:var(--tekst);color:var(--poz);display:grid;place-items:center;
  transform:scale(.9);opacity:.92;transition:transform .2s,background .2s,opacity .2s;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.gl-dodaj svg{width:18px;height:18px;stroke-width:2.2}
.gl-kartica:hover .gl-dodaj,.gl-dodaj:focus-visible{transform:scale(1);opacity:1}
.gl-dodaj:hover{background:var(--a)}
.gl-dodaj:focus-visible,.gl-kolicina button:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.gl-kolicina{display:inline-flex;align-items:center;gap:2px;height:42px;padding:0 4px;border-radius:999px;background:var(--a);color:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.gl-kolicina button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:16px;cursor:pointer}
.gl-kolicina b{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.gl-nema{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--pov);font-size:11.5px;font-weight:700;color:var(--tiho)}
.gl-naziv{border:0;background:none;padding:0;text-align:left;cursor:pointer;color:var(--tekst);font-size:14.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gl-naziv:hover{color:var(--a)}
.gl-cena{font-family:var(--plakat);font-weight:800;font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.gl-kostur{display:flex;flex-direction:column;gap:10px}
.gl-kostur i{aspect-ratio:4/5;border-radius:var(--r)}
.gl-kostur b{height:12px;border-radius:3px}
.gl-kostur b:last-child{width:40%}
.gl-kostur i,.gl-kostur b{background:linear-gradient(100deg,var(--pov2) 30%,var(--pov) 50%,var(--pov2) 70%);background-size:200% 100%;animation:sjaj 1.3s infinite}

/* ---------- proizvod, korpa ---------- */
.prozor{border-radius:10px}
.proizvod-slika{background:var(--podloga)}
.proizvod-slika img{object-fit:contain;padding:8%;mix-blend-mode:multiply}
.proizvod-opis h2{font-family:var(--plakat);font-weight:800;letter-spacing:-.035em}
.dugme-glavno{border-radius:999px;background:var(--tekst);color:var(--poz)}
.dugme-glavno:hover{background:var(--a);box-shadow:none}
.podnozje{border-top:1.5px solid var(--tekst)}

@media (max-width:860px){
  .gl-indeks{grid-template-columns:1fr}
  .gl-strelica{display:none}
  .gl-red > *{width:200px}
}
@media (max-width:640px){
  .gl-plakat{padding-top:30px}
  .gl-ime{margin-bottom:20px}
  .gl-cinjenice{gap:16px;padding:14px 0 22px}
  .gl-dalje{margin-left:0}
  .gl-traka-karta{width:150px}
  .gl-red{gap:12px;margin:0 -16px;padding:2px 16px 16px;scroll-padding:0 16px}
  .gl-red > *{width:168px}
  .gl-poglavlje-glava{gap:10px}
  .gl-sve{margin-left:0}
  .mreza{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .gl-poster em{font-size:18px}
  .gl-dodaj{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .gl-traka{overflow-x:auto;-webkit-mask:none;mask:none}
  .gl-traka-tok{animation:none}
  .gl-ime,.gl-kartica{animation:none}
  .gl-slika img,.gl-traka-karta img{transition:none}
}