/* ===================== MOBILNI I TABLET RASPORED (naredba 14.9: ceo sajt) =====================
   Učitava se POSLE overlay.css. Prelomi: zaglavlje (hamburger) do 1100 px; sekcije/mreže do 820 px;
   tablet 600–820 px; niski ekrani (landscape telefon) max-height 520 px. Visine preko 100dvh (fallback vh). */

/* ---------- ZAGLAVLJE: hamburger + meni preko celog ekrana (≤1100 px: telefon, tablet, laptop u uskom prozoru) ---------- */
@media (max-width:1100px){
  .hdr{padding:14px 18px;justify-content:flex-end}
  .meni-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 8px;background:transparent;border:0;cursor:pointer;z-index:60;position:fixed;right:12px;top:14px}
  .meni-btn span{display:block;height:2px;background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.8);transition:transform .25s,opacity .2s}
  .hdr.meni-otvoren .meni-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hdr.meni-otvoren .meni-btn span:nth-child(2){opacity:0}
  .hdr.meni-otvoren .meni-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* padajući meni: providan, ispod hamburgera, desno poravnat (naredba 14.9: transparentan, ne tamna zavesa) */
  .hdr nav{display:none;position:fixed;top:66px;right:18px;left:auto;bottom:auto;z-index:50;flex-direction:column;justify-content:flex-start;align-items:flex-end;gap:0;padding:6px 0 0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .hdr.meni-otvoren nav{display:flex}
  .hdr nav a{font-size:15px;letter-spacing:3.5px;padding:9px 0;text-align:right;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8)}
  .hdr nav a.akt::after{margin-top:6px}
  /* JEZIK: posebno dugme levo od hamburgera (zastava + oznaka), svoja providna padajuća lista (naredba 14.9) */
  .hdr > .jz{position:fixed;top:14px;right:64px;z-index:60;display:block}
  .hdr > .jz .jz-tek{display:inline-flex;align-items:center;height:44px;padding:0 6px;font-size:12px;letter-spacing:2.6px;font-weight:bold;color:#e8eaed;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.8);cursor:pointer}
  .hdr > .jz .jz-tek::after{content:"▾";margin-left:6px;font-size:9px;opacity:.7}
  .hdr > .jz .jz-lista{position:absolute;right:0;top:100%;padding-top:6px;display:none;flex-direction:column;gap:2px;align-items:flex-end}
  .hdr > .jz.otvoren .jz-lista{display:flex}
  .hdr > .jz .jz-lista a{display:inline-flex;align-items:center;min-height:36px;padding:6px 6px;font-size:12px;letter-spacing:2.2px;font-weight:bold;color:#e8eaed;text-decoration:none;opacity:.8;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8)}
  .hdr > .jz .jz-lista a.akt{opacity:1;color:#ff8a4a}
  .hdr .zst{width:18px;height:12px;margin-right:6px}
  body.meni-otvoren #zvukBtn{opacity:0 !important;pointer-events:none}
  /* dugme zvuka ostaje DOLE DESNO (naredba 14.9), samo malo manje */
  #zvukBtn{right:14px !important;bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;width:42px !important;height:42px !important;line-height:40px !important;font-size:17px !important}
}
@media (max-width:370px){.hdr > .jz{right:58px}.hdr > .jz .jz-tek{letter-spacing:1.8px;padding:0 3px}}
/* laptop u uskom prozoru / iPad landscape (821–1100): logo malo manji, sekcije računaju od stvarne visine logoa */
@media (min-width:821px) and (max-width:1100px){
  .sadrzaj .logo-veliki{width:min(440px,25vw)}
  .ov{padding-top:calc(24px + min(440px,25vw) * .39 + 22px)}
  .ov-panel{max-height:calc(100vh - 24px - min(440px,25vw) * .39 - 60px);max-height:calc(100dvh - 24px - min(440px,25vw) * .39 - 60px)}
  .pk .ei{font-size:10px;letter-spacing:1.4px;padding:4px 8px;white-space:nowrap}
}
/* kompaktna desktop navigacija 1101–1400 px da ne dodiruje logo */
@media (min-width:1101px) and (max-width:1400px){
  .hdr{padding:20px 32px}
  .hdr nav{gap:20px}
  .hdr nav a{letter-spacing:1.8px}
  .sadrzaj .logo-veliki{width:min(440px,24vw)}
  .ov{padding-top:calc(24px + min(440px,24vw) * .39 + 22px)}
}
/* fiksni panel proizvoda na niskim desktop/tablet-landscape ekranima: skrol umesto sečenja */
@media (min-width:821px) and (max-height:820px){
  .proizvod{overflow:auto;scrollbar-width:none;padding-bottom:40px;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 50px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 50px),transparent 100%)}
  .proizvod::-webkit-scrollbar{display:none}
  .proizvod .pslika{height:min(300px,26vh) !important}
  .proizvod .pslika.siroka{max-height:26vh}
}
/* hover efekti samo tamo gde postoji pravi hover (na dodir ostaju „zalepljeni") */
@media (hover:none){
  .rg figure:hover{transform:none}
  .pk a:hover{transform:none}
}

/* ---------- TELEFON I TABLET PORTRET (≤820 px): sekcije ---------- */
@media (max-width:820px){
  body .sadrzaj{padding:14px 0 0 18px;height:100vh;height:100dvh}
  .sadrzaj .logo-veliki{width:min(210px,54vw)}
  .ov{padding:calc(14px + min(210px,54vw) * .39 + 14px) 18px 0;display:flex;flex-direction:column}
  .ov-panel{width:100%;max-width:none;max-height:none;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .ov-glava{padding:0 0 10px;flex:0 0 auto}
  .ov-glava h2{font-size:16px;letter-spacing:4px}
  .ov-telo{flex:1 1 auto;min-height:0;max-height:none;overflow:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:10px 0 calc(48px + env(safe-area-inset-bottom,0px)) !important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 70px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 70px),transparent 100%)}
  .ov[data-sekcija="reference"] .ov-telo,.ov[data-sekcija="proizvodi"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%)}
  .ov[data-sekcija="o-nama"] .ov-telo{overflow:auto !important}
  .ov[data-sekcija="kontakt"].rekl-otvorena .ov-telo{overflow:auto !important;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important;scroll-padding-bottom:80px}
  body.ov-otvoren{position:fixed;inset:0;width:100%}
  .ov-zavesa{background:rgba(4,5,7,.4)}
  .ov-uvod{font-size:14px}
  .onama-tekst{gap:10px;font-size:14px;line-height:1.55;max-width:none}
  .ref-uvod{gap:6px;margin-bottom:12px;max-width:none}
  .ref-uvod p{font-size:13.5px;line-height:1.45}
  /* reference: 2 kolone, kraći natpisi */
  .ov[data-sekcija="reference"] .ov-panel{width:100%}
  .ov[data-sekcija="reference"] .rg{grid-template-columns:repeat(2,1fr);gap:8px}
  .rg figcaption{padding:18px 10px 8px;font-size:11.5px;letter-spacing:.6px;line-height:1.2}
  .rg figcaption span{font-size:10.5px}
  /* proizvodi: 1 kolona */
  .pk{grid-template-columns:1fr;gap:16px}
  .pk .tx h3{font-size:15px}
  .pk .tx p{font-size:13px}
  .pk .ei{font-size:11px;letter-spacing:1.6px;padding:5px 10px}
  /* kontakt */
  .kontakt-info{gap:20px}
  .kontakt-info b{font-size:12px;letter-spacing:3px}
  .kontakt-info span,.kontakt-info a{font-size:20px}
  .kontakt-info small a{display:inline-block;padding:8px 0;margin:-8px 0}
  .rekl{margin-top:28px}
  .rekl-btn{display:inline-block;padding:10px 0 0;min-height:44px}
  .kontakt-info .rekl-dno .rekl-nazad{display:inline-block;padding:12px 6px;margin:-12px -6px}
  .rekl-forma{max-width:none;padding-bottom:24px}
  .rekl-forma label span{font-size:12px;letter-spacing:2px}
  .rekl-forma input,.rekl-forma textarea{font-size:16px}
  /* online prodavnica: lista + panel ispod nje, bez skoka; dodirne površine */
  .shop-us{grid-template-columns:1fr}
  .shop-us .grupa{padding:10px 0 10px 22px}
  .shop-us .grupa::before{top:16px}
  .shop-us .podgrupa{align-self:stretch;width:100%;margin:4px 0 2px}
  .shop-us .podgrupa li{display:flex;align-items:center;min-height:38px;padding:6px 0;font-size:15px}
  .shop-us .podgrupa li.akt{color:#ff8a4a}
  .shop-us .grupa .uskoro{display:inline-block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8a9096;margin-left:10px;font-weight:normal}
  .proizvod{position:relative;left:auto;right:auto;top:auto;width:100%;max-height:none;margin:0;transform:none;display:block;height:0;overflow:hidden;opacity:0;visibility:hidden;padding:0;transition:opacity .35s ease,visibility 0s linear .35s}
  .proizvod.otvoren{height:auto;overflow:visible;margin-top:18px;opacity:1;visibility:visible;padding-bottom:30px;transition:opacity .35s ease}
  .proizvod .pslika{width:min(300px,80vw) !important;height:auto !important;max-height:250px}
  .proizvod .pslika.siroka{width:100% !important;max-width:none;height:auto !important;max-height:160px}
  .proizvod h3{font-size:18px;letter-spacing:3px}
  .proizvod .cena b{font-size:18px}
  .proizvod .pod{font-size:12px;letter-spacing:1.5px;line-height:1.4;margin:4px 0 8px}
  .proizvod .boje{flex-wrap:wrap;gap:8px 10px}
  .proizvod .boja{flex:0 0 auto;white-space:nowrap;padding:8px 14px 8px 8px;min-height:36px;font-size:13px}
  .proizvod .boja i{width:18px;height:18px}
  .proizvod .pod,.proizvod .boje,.proizvod .specs,.proizvod .odlike{text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.6)}
  .proizvod .specs{font-size:13px;gap:6px 12px;grid-template-columns:minmax(96px,36%) 1fr}
  .proizvod .specs dt{font-size:12px;color:#a3a9b0;letter-spacing:.5px;overflow-wrap:anywhere;hyphens:auto}
  .proizvod .specs dd{line-height:1.4}
  .proizvod .odlike{grid-template-columns:1fr;font-size:13px;line-height:1.45;gap:5px 0}
}
/* ---------- TABLET PORTRET (600–820 px): više prostora, dve kolone gde ima smisla ---------- */
@media (min-width:600px) and (max-width:820px){
  body .sadrzaj{padding:24px 0 0 40px}
  .sadrzaj .logo-veliki{width:230px}
  .ov{padding:calc(24px + 230px * .39 + 18px) 40px 0}
  .meni-btn{right:28px}
  .pk{grid-template-columns:repeat(2,1fr);gap:18px 20px}
  .pk .ei{font-size:11px;letter-spacing:1.6px}
  .ov[data-sekcija="reference"] .rg{grid-template-columns:repeat(3,1fr);gap:10px}
  .rg figcaption{padding:22px 10px 8px;font-size:11px}
  .onama-tekst{font-size:16px;line-height:1.6;max-width:640px;gap:14px}
  .ref-uvod{max-width:640px}
  .kontakt-info{gap:22px}
  .kontakt-info span,.kontakt-info a{font-size:24px}
  .rekl-forma{max-width:520px}
  .ov[data-sekcija="shop"] .ov-telo{display:grid;grid-template-columns:minmax(220px,280px) 1fr;column-gap:32px;align-items:start}
  .shop-us{grid-column:1}
  .proizvod.otvoren{grid-column:2;margin-top:0}
  .proizvod .pslika{width:min(220px,28vw) !important;max-height:200px}
  .proizvod .pslika.siroka{max-height:130px}
  .proizvod .odlike{grid-template-columns:1fr 1fr}
}
/* ---------- NISKI EKRANI (telefon u landscape-u, ≤520 px visine) ---------- */
@media (max-width:1100px) and (max-height:520px){
  .hdr nav{top:60px}
  .hdr nav a{font-size:13px;letter-spacing:3px;padding:5px 0}
  body .sadrzaj{padding:12px 0 0 18px}
  .sadrzaj .logo-veliki{width:min(150px,22vw)}
  .ov{padding-top:calc(12px + min(150px,22vw) * .39 + 10px);padding-left:18px;padding-right:18px;display:flex;flex-direction:column}
  .ov-panel{width:100%;max-width:none;max-height:none;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .ov-glava{padding:0 0 6px}
  .ov-telo{flex:1 1 auto;min-height:0;max-height:none;overflow:auto !important;padding:6px 0 40px !important}
  .ov[data-sekcija="o-nama"] .ov-telo,.ov[data-sekcija="kontakt"].rekl-otvorena .ov-telo{overflow:auto !important}
  .proizvod{position:relative;left:auto;top:auto;width:100%;max-height:none;overflow:visible;margin-top:14px;transform:none}
  .proizvod.otvoren{display:block}
}
/* red jezika u meniju: svih 5 u jednom redu i na 360–420 px */
@media (max-width:420px){
  .hdr > .jz{right:60px}
}
/* PP VRATA na telefonu/tabletu */
@media (max-width:820px){
  .ov[data-sekcija="pp-vrata"] .ov-panel{width:100%}
  .ov[data-sekcija="pp-vrata"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%)}
  .pp-uvod p{font-size:14px;line-height:1.5}
  .cinj{grid-template-columns:1fr;gap:2px 0;font-size:13px}
  .cinj dt{padding-top:10px}
  .pp-gal{grid-template-columns:repeat(2,1fr);gap:8px}
  .lista2{grid-template-columns:1fr;font-size:13px}
  .pp-link{gap:22px;flex-wrap:wrap}
}
@media (min-width:600px) and (max-width:820px){.pp-gal{grid-template-columns:repeat(3,1fr)}.lista2{grid-template-columns:1fr 1fr}.cinj{grid-template-columns:auto 1fr;gap:7px 22px}.cinj dt{padding-top:3px}}
@media (max-width:820px){
  .ov[data-sekcija="jk-puna"] .ov-panel{width:100%}
  .ov[data-sekcija="jk-puna"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%)}
  .jk-red{grid-template-columns:1fr;gap:18px}
  .jk-levo{position:static}
  .jk-slika{max-width:260px;margin:0 auto}
  .ral{text-align:center}
  .ral-lista{left:50%;transform:translateX(-50%);width:min(300px,86vw);grid-template-columns:repeat(6,1fr)}
  .jk-cinj{grid-template-columns:1fr;gap:2px 0}
  .jk-cinj dt{padding-top:10px}
}
@media (max-width:820px){.jk-levo{order:1}.jk-desno{order:2}}

/* JK 2x mobilno */
@media (max-width:820px){.jk-slika{max-width:min(520px,100%)}.jk-levo .ral-lista{width:min(340px,88vw);grid-template-columns:repeat(6,1fr)}}

@media (max-width:820px){.ov[data-sekcija="dk-puna"] .ov-panel{width:100%}.ov[data-sekcija="dk-puna"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important}}

@media (max-width:820px){.ov[data-sekcija="jk-zaluzina"] .ov-panel,.ov[data-sekcija="dk-staklo"] .ov-panel,.ov[data-sekcija="dk-zaluzina"] .ov-panel{width:100%}.ov[data-sekcija="jk-zaluzina"] .ov-telo,.ov[data-sekcija="dk-staklo"] .ov-telo,.ov[data-sekcija="dk-zaluzina"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important}}

@media (max-width:820px){.ov[data-sekcija="jk-staklo"] .ov-panel{width:100%}.ov[data-sekcija="jk-staklo"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important}}

@media (max-width:820px){.ov[data-sekcija="pp-stene"] .ov-panel,.ov[data-sekcija="klizna"] .ov-panel{width:100%}.ov[data-sekcija="pp-stene"] .ov-telo,.ov[data-sekcija="klizna"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important}.jk-slika.siroka{width:100%;max-width:100%}}

@media (max-width:820px){.ov[data-sekcija="sig-forte"] .ov-panel{width:100%}.ov[data-sekcija="sig-forte"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important}}
@media (max-width:820px){.ov[data-sekcija="sig-premium"] .ov-panel{width:100%}.ov[data-sekcija="sig-premium"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important}}
@media (max-width:820px){.ov[data-sekcija="sigurnosna"] .ov-panel{width:100%}.ov[data-sekcija="sigurnosna"] .ov-telo{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)) !important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 90px),transparent 100%)}}

@media (max-width:820px){.ov[data-sekcija="privatnost"] .ov-panel,.ov[data-sekcija="kolacici"] .ov-panel,.ov[data-sekcija="uslovi"] .ov-panel{width:100%}.pravno{font-size:15px}.pravno table{display:block;overflow-x:auto}}

@media (max-width:820px){.ov[data-sekcija="korpa"] .ov-panel{width:100%}.stavka{grid-template-columns:56px 1fr auto;grid-template-rows:auto auto}.stavka .kol{grid-column:2}.stavka .st-cena{grid-column:3;grid-row:1}.stavka .st-x{grid-column:3;grid-row:2;justify-self:end}.narudzba .dva{grid-template-columns:1fr}#korpaPill{right:84px;bottom:24px}.korpa-link{margin-right:8px;padding:6px 10px;font-size:11px}}

@media (max-width:820px){.ral[data-karta="dekori"] .ral-lista{left:50% !important;right:auto !important;transform:translateX(-50%);width:min(380px,calc(100vw - 24px)) !important;grid-template-columns:repeat(4,1fr) !important;max-height:min(60vh,480px);overflow-y:auto}}

@media (max-width:820px){.ov[data-sekcija="konfigurator"] .ov-panel{width:100%}.kf{grid-template-columns:1fr;gap:16px}.kf-box{max-height:60vh}.kf-boje{grid-template-columns:repeat(5,1fr)}}

@media (max-width:820px){.ov[data-sekcija="konfigurator"] .ov-panel{width:100%}.kf{grid-template-columns:1fr;gap:16px}.kf-box{max-height:60vh}.kf-boje{grid-template-columns:repeat(5,1fr)}}

@media (max-width:820px){.kf-desno{order:-1;position:static}.kf-box{max-height:none}.kf-grupa select,.kf-grupa input,.kol input,.narudzba input,.narudzba textarea,.rekl-forma input,.rekl-forma textarea{font-size:16px}}

@media (max-width:820px){.kf-desno{max-height:none}.kf-box{height:auto;width:100%;max-height:70vh}}

@media (max-width:1100px){.hdr nav .nav-pad{display:block}.hdr nav .nav-pad>a{display:flex;justify-content:space-between}.nav-pad-lista{position:static;display:flex !important;background:transparent;border:0;box-shadow:none;padding:0 0 4px 14px;min-width:0}.hdr nav .nav-pad-lista a{padding:6px 0;font-size:12px;color:#c9ced4}}

/* PRIVATNOST u navigaciji (15.9): nav je širi, pa tešnje na 1101–1600 px da ne dodiruje logo i ne prelama se */
@media (min-width:1101px) and (max-width:1400px){.hdr nav{gap:13px}.hdr nav a{letter-spacing:1.4px;font-size:11px;white-space:nowrap}.hdr nav .nav-pad-str{padding:2px 2px}}
@media (min-width:1401px) and (max-width:1600px){.hdr nav{gap:22px}.hdr nav a{letter-spacing:2.1px;white-space:nowrap}}

/* LASER NA MOBILNOM (naredba 15.9 „na mobilnoj verziji ne vide se crtanja laserom kao na webu"): šema između logotipa i digitalnog teksta, mapa unutar panela KONTAKT */
@media (max-width:820px){#sema3d{display:block;left:6vw;right:6vw;width:auto;max-width:none;top:calc(14px + min(210px,54vw) * .39 + 40px);height:calc(100vh - (14px + min(210px,54vw) * .39 + 40px) - 150px);height:calc(100dvh - (14px + min(210px,54vw) * .39 + 40px) - 150px);max-height:none;transform:none}}
@media (max-width:820px) and (max-height:520px){#sema3d{display:none}}
@media (max-width:820px){#mapa2d{display:block;position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;height:64vw;max-height:380px;margin:2px 0 18px;pointer-events:none}}
@media (max-width:1100px){.hdr nav .nav-korpa{justify-content:flex-end;padding:6px 0}.hdr nav .nav-korpa-ikona{width:26px;height:26px}}
@media (max-width:820px){.kf-box{touch-action:pan-y pinch-zoom}}