/* Vodoinstalaterski obrt Pezer, stil stranice (izgled B, rujan 2026.)
   Smjer: stručna trgovina. Tamna petrolej tinta kao u tehničkom katalogu,
   svijetli cink kao pocinčani spremnici ispred dućana, žuta s loga samo kao
   naljepnica. Bez kutija i sjena: redove odvajaju crte, dijelove razmak i
   pojasevi. Hrabro mjesto je veliki široki naslov na vrhu. */

/* Slova Archivo (SIL OFL, /slova/OFL.txt) stoje na našoj stranici, ne na Googleu,
   da posjetiteljeva adresa ne odlazi Googleu bez pristanka. Isti dijelovi i
   rasponi znakova kao kod Googlea: latin-ext nosi č, ć, đ, š, ž. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/slova/archivo-v25-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/slova/archivo-v25-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papir: #FFFFFF;
  --cink: #E8EDEE;
  --tinta: #0E2F3A;
  --tinta-2: #17414F;
  --tinta-3: #0A232C;
  --grafit: #4B5D65;
  --linija: #C3CED2;
  --naljepnica: #FFC62B;
  --naljepnica-2: #FFD65E;
  --zvijezda: #C98A00;
  --svijetlo: #F2F6F7;
  --svijetlo-tiho: #B4C7CD;

  /* boje unutar odjeljka, tamni pojasevi ih mijenjaju */
  --tekst: var(--tinta);
  --tekst-tihi: var(--grafit);
  --crta: var(--linija);

  --slova: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --omot: 1280px;
  --rub: 48px;
  --odjeljak: 112px;
  --kut: 6px;
  --brzo: 160ms;
  --zaustavi: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

/* glatko klizanje samo nakon klika na poveznicu u izborniku,
   ne kad stranicu lista skripta ili preglednik */
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--tekst);
  font-family: var(--slova);
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--naljepnica); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}
.tamno :focus-visible,
.podnozje :focus-visible,
.traka-vrh :focus-visible,
.traka-poziv :focus-visible { outline-color: var(--naljepnica); }

h1, h2, h3, h4 {
  font-family: var(--slova);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.omot {
  max-width: var(--omot);
  margin: 0 auto;
  padding-left: var(--rub);
  padding-right: var(--rub);
}

.skriveno {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.preskoci {
  position: absolute;
  left: -9999px;
  background: var(--naljepnica);
  color: var(--tinta);
  padding: 12px 18px;
  font-weight: 700;
  z-index: 30;
}
.preskoci:focus { left: 8px; top: 8px; }

.ikona {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* ---- naslovi ---- */

.naslov,
.uvod h1 {
  font-stretch: 118%;
  font-weight: 780;
  letter-spacing: -0.012em;
  line-height: 1.02;
}
.naslov { font-size: clamp(34px, 4vw, 54px); }
.naslov--srednji { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; }

.naslov-mali {
  font-stretch: 112%;
  font-size: 22px;
  font-weight: 720;
  line-height: 1.2;
}

/* mala oznaka iznad naslova, uvijek malim slovima */
.nadnaslov {
  font-size: 16px;
  font-weight: 600;
  color: var(--tekst-tihi);
  margin: 0 0 10px 0;
}

/* žuta naljepnica, samo za tvrdnju koja je stvarno oznaka */
.oznaka {
  display: inline-block;
  background: var(--naljepnica);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  padding: 7px 10px 6px;
  border-radius: 3px;
  margin: 0 0 18px 0;
}

/* ---- gumbi ---- */

.gumbi {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.gumbi--uz-tekst { margin-top: 32px; gap: 12px 20px; }
.uz-gumb { font-size: 18px; font-weight: 600; }

.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 24px;
  border-radius: var(--kut);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--brzo) ease, color var(--brzo) ease, border-color var(--brzo) ease, transform 120ms ease;
}
.gumb:hover { text-decoration: none; }
.gumb:active { transform: scale(0.98); }

.gumb--glavni {
  background: var(--tinta);
  color: var(--svijetlo);
}
.gumb--glavni:hover { background: var(--tinta-2); color: #fff; }

.gumb--obrub {
  border: 2px solid var(--tinta);
  color: var(--tinta);
  padding: 12px 22px;
}
.gumb--obrub:hover { background: var(--tinta); color: var(--svijetlo); }

.gumb--tamni {
  background: var(--tinta);
  color: var(--svijetlo);
  font-stretch: 112%;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gumb--tamni:hover { background: var(--tinta-2); color: #fff; }

.gumb--zuti {
  background: var(--naljepnica);
  color: var(--tinta);
}
.gumb--zuti:hover { background: var(--naljepnica-2); color: var(--tinta); }

.gumb--pun { width: 100%; }

/* ---- gornja traka s brojevima ---- */

.traka-vrh {
  background: var(--tinta);
  color: var(--svijetlo-tiho);
  font-size: 15px;
}
.traka-vrh__unutra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 44px;
}
.traka-vrh__adrese { display: flex; gap: 32px; }
.traka-vrh__brojevi { display: flex; gap: 8px; font-weight: 650; font-variant-numeric: tabular-nums; }
.traka-vrh__brojevi a {
  color: var(--naljepnica);
  text-decoration: none;
  padding: 10px 8px;
}
.traka-vrh__brojevi a:hover { color: #fff; }

/* ---- zaglavlje ---- */

.zaglavlje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linija);
}
.zaglavlje__znak {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}
.zaglavlje__znak img { height: 84px; width: auto; display: block; }
/* natpis velikim slovima kako ga je napisala Kate, ali bez razmaknutih slova */
.zaglavlje__natpis {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--grafit);
}
.zaglavlje__zarez { display: none; }
.zaglavlje__izbornik {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 17px;
  font-weight: 550;
}
.zaglavlje__izbornik a {
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}
.zaglavlje__izbornik a:hover {
  text-decoration: underline;
  text-decoration-color: var(--naljepnica);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}
.jezici {
  display: flex;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--linija);
  font-size: 15px;
}
.zaglavlje__izbornik .jezici a { color: var(--grafit); padding: 10px 7px; }
.zaglavlje__izbornik .jezici a[aria-current="page"] { color: var(--tinta); font-weight: 750; }

/* ---- uvod ---- */

.uvod {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: end;
  padding-top: 72px;
  padding-bottom: var(--odjeljak);
}
.znacka {
  font-size: 16px;
  font-weight: 600;
  color: var(--grafit);
}
.uvod h1 {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(44px, 5.3vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin-top: 20px;
  text-wrap: initial;
}
.uvod__podnaslov {
  text-wrap: balance;
  font-stretch: 108%;
  font-weight: 650;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.25;
  margin-top: 28px;
  max-width: 22em;
}
.uvod__opis {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  max-width: 34em;
  margin-top: 16px;
  color: var(--grafit);
}

/* ---- slike ---- */

.slika-okvir { margin: 0; }
.slika-okvir img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--kut);
  background: var(--cink);
}
.slika-okvir figcaption {
  font-size: 15px;
  line-height: 1.45;
  color: var(--tekst-tihi);
  margin-top: 10px;
}

/* ---- pomoć za pultom ---- */

.pomoc {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 64px;
  align-items: start;
  padding-bottom: var(--odjeljak);
}
.akcija + .pomoc { padding-top: var(--odjeljak); }
.pomoc .naslov { font-size: clamp(32px, 3.6vw, 50px); }

.pitanja {
  margin: 36px 0 0 0;
  border-bottom: 1px solid var(--crta);
}
.pitanja__red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: baseline;
  padding: 22px 0 20px;
  border-top: 1px solid var(--crta);
}
.pitanja dt {
  font-stretch: 108%;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}
.pitanja dd { margin: 0; font-size: 18px; color: var(--tekst-tihi); }

.pomoc__opis {
  font-size: 18px;
  color: var(--tekst-tihi);
  margin-top: 28px;
  max-width: 40em;
}
.pomoc__zakljucak {
  margin-top: 40px;
  font-stretch: 112%;
  font-size: clamp(24px, 2.3vw, 31px);
  font-weight: 720;
  line-height: 1.22;
  max-width: 24em;
  text-wrap: balance;
}
.pomoc__zakljucak span { display: block; margin-top: 10px; }

.pomoc__desno { display: grid; gap: 32px; align-content: start; }
.pomoc__slika { margin-top: 8px; }

.kartica-majstor {
  border-left: 3px solid var(--naljepnica);
  padding-left: 28px;
  margin-top: 8px;
}
.kartica-majstor h2 {
  font-stretch: 112%;
  font-size: 28px;
  font-weight: 720;
  line-height: 1.15;
}
.kartica-majstor p {
  font-size: 17px;
  line-height: 1.55;
  margin-top: 12px;
  color: var(--grafit);
}
.kartica-majstor .gumb { margin-top: 24px; }

/* ---- pojasevi ---- */

.pojas {
  padding-top: var(--odjeljak);
  padding-bottom: var(--odjeljak);
}
.pojas--cink {
  background: var(--cink);
  --crta: #B9C6CB;
}

/* ---- trgovine: kartice Vir i Gračac ----
   Svaka kartica je svoja adresa (/ i /gracac/). Poslužitelj iz stranice
   izbaci drugu trgovinu, pa se ovdje uvijek vidi samo jedna. */

.trgovine__glava {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 40px;
}
.trgovine__uvod { font-size: 19px; color: var(--tekst-tihi); }

.kartice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 36px;
  border-bottom: 3px solid var(--tinta);
}
.kartice__veza {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 24px 16px;
  border-radius: var(--kut) var(--kut) 0 0;
  background: var(--papir);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--brzo) ease, box-shadow var(--brzo) ease;
}
.kartice__veza strong {
  font-stretch: 118%;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 780;
  line-height: 1.05;
}
.kartice__veza span { font-size: 16px; color: var(--grafit); }
.kartice__veza:hover { box-shadow: inset 0 -5px 0 var(--naljepnica); }
.kartice__veza[aria-current="page"] { background: var(--tinta); color: var(--svijetlo); box-shadow: none; }
.kartice__veza[aria-current="page"] span { color: var(--svijetlo-tiho); }

.trgovina { padding-top: 48px; }
.trgovina__gornje {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}
.trgovina__lijevo,
.trgovina__desno {
  display: grid;
  gap: 48px;
  align-content: start;
  min-width: 0;
}

.galerija {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 150px;
  gap: 10px;
}
.galerija__slika,
.galerija__video {
  display: block;
  overflow: hidden;
  border-radius: var(--kut);
  background: var(--tinta);
}
.galerija__slika { cursor: zoom-in; }
.galerija__slika img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 400ms var(--zaustavi);
}
.galerija__slika:hover img { transform: scale(1.03); }
.galerija > :first-child { grid-column: span 2; grid-row: span 2; }
.galerija__video { grid-row: span 2; width: 100%; height: 100%; object-fit: cover; }
.galerija__slika--siroka { grid-column: span 2; }

.kartica-ljeto h3 {
  font-stretch: 112%;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 750;
  line-height: 1.12;
}
.kartica-ljeto > p {
  margin-top: 12px;
  max-width: 36em;
  color: var(--tekst-tihi);
}

.popis-kvacica {
  list-style: none;
  margin: 24px 0 0 0;
  padding: 0;
  border-top: 1px solid var(--crta);
  max-width: 36em;
}
.popis-kvacica li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--crta);
  font-weight: 550;
  break-inside: avoid;
}
.popis-kvacica li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--tinta);
  border-bottom: 3px solid var(--tinta);
  transform: rotate(-45deg);
}
.popis-kvacica--dva {
  columns: 2 13em;
  column-gap: 32px;
  max-width: none;
}

.trgovina__podaci h3 {
  font-stretch: 125%;
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.trgovina__vrsta { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--tekst-tihi); }
.trgovina__adresa { margin-top: 2px; font-size: 20px; font-weight: 650; }
.trgovina__podaci h4 {
  font-stretch: 112%;
  font-size: 22px;
  font-weight: 720;
  line-height: 1.2;
  margin-top: 44px;
}

.brojevi {
  margin: 20px 0 24px 0;
  border-top: 2px solid var(--tinta);
  font-variant-numeric: tabular-nums;
}
.brojevi div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--crta);
}
.brojevi dt { font-size: 16px; color: var(--tekst-tihi); }
.brojevi dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.brojevi a { display: inline-block; padding: 4px 0; text-decoration: none; }
.brojevi a:hover { text-decoration: underline; text-decoration-color: var(--naljepnica); text-decoration-thickness: 3px; }

.satnica {
  margin: 12px 0 0 0;
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--tinta);
}
.satnica__red {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--crta);
}
.satnica dt { margin: 0; }
.satnica dd { margin: 0; font-weight: 700; white-space: nowrap; }
.napomena { font-size: 16px; color: var(--tekst-tihi); margin-top: 14px; line-height: 1.55; }

.ocjena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid var(--tinta);
}
.ocjena__broj {
  font-stretch: 125%;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ocjena__zvijezda { color: var(--zvijezda); font-size: 30px; line-height: 1; }
.ocjena__opis { flex-basis: 100%; margin-top: 6px; font-size: 15px; color: var(--tekst-tihi); }
.ocjena__veza { display: inline-block; margin-top: 6px; padding: 6px 0; font-weight: 650; }

/* Snimka Google karte: potpis Googlea u donjem desnom kutu mora ostati vidljiv. */
.karta {
  position: relative;
  display: block;
  text-decoration: none;
}
.karta img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--kut);
  background: #F4F3EF;
}
.karta__natpis {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--svijetlo);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  transition: background-color var(--brzo) ease;
}
.karta__natpis .ikona { width: 18px; height: 18px; color: var(--naljepnica); }
.karta:hover .karta__natpis { background: var(--tinta-2); }
.karta__izvor {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--tekst-tihi);
}

/* ---- pumpe, samo na kartici Vir ---- */

.pumpe-prozor {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
  margin-top: 96px;
  padding-top: 56px;
  border-top: 3px solid var(--tinta);
}
/* duge njemačke riječi (Hauswasserwerke, rastavljena u HTML-u) ne smiju raširiti stranicu na uskom mobitelu */
.pumpe-prozor .naslov { overflow-wrap: break-word; }
.pumpe-prozor__tekst > p {
  margin-top: 16px;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
}
.pumpe-prozor h4 {
  font-stretch: 108%;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 36px;
}
.pumpe-prozor__slika .galerija__slika { aspect-ratio: 4 / 3; }
.pumpe-prozor__odabir {
  grid-column: 1 / -1;
  padding-top: 48px;
  border-top: 1px solid var(--crta);
}
.pumpe-prozor__odabir > p {
  margin-top: 14px;
  max-width: 40em;
  color: var(--tekst-tihi);
}

.modeli {
  margin-top: 32px;
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--crta);
}
.modeli summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 12px 4px 12px 0;
  font-stretch: 108%;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.modeli summary::-webkit-details-marker { display: none; }
.modeli summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin: 0 6px 6px 0;
  border-right: 3px solid var(--tinta);
  border-bottom: 3px solid var(--tinta);
  transform: rotate(45deg);
  transition: transform var(--brzo) ease, margin var(--brzo) ease;
}
.modeli[open] summary::after { transform: rotate(-135deg); margin-bottom: -6px; }
.modeli summary:hover {
  text-decoration: underline;
  text-decoration-color: var(--naljepnica);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}
.modeli .tablica-omot { margin: 4px 0 24px 0; }

.tablica-omot { overflow-x: auto; }
.tablica {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.tablica th,
.tablica td {
  padding: 16px 24px 16px 0;
  text-align: left;
  font-weight: 400;
  vertical-align: baseline;
}
.tablica thead th {
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst-tihi);
  padding-top: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tinta);
}
.tablica tbody th {
  font-stretch: 108%;
  font-weight: 700;
}
.tablica tbody tr { border-bottom: 1px solid var(--crta); }
.tablica tbody tr:last-child { border-bottom: 0; }

/* ---- tamni pojas, grijanje ---- */

.tamno {
  --tekst: var(--svijetlo);
  --tekst-tihi: var(--svijetlo-tiho);
  --crta: rgba(242, 246, 247, 0.22);
  background: var(--tinta);
  color: var(--tekst);
  padding-top: var(--odjeljak);
  padding-bottom: var(--odjeljak);
}
.istaknuto {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 64px;
  align-items: end;
}
.istaknuto .naslov { font-size: clamp(36px, 3.7vw, 52px); }
.istaknuto__opis {
  font-size: 20px;
  line-height: 1.6;
  color: var(--tekst-tihi);
}
.istaknuto .gumbi { margin-top: 28px; }

/* ---- ponuda, ploča s odjelima ---- */

.ponuda {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 64px;
  align-items: start;
  padding-top: var(--odjeljak);
  padding-bottom: var(--odjeljak);
}
.ponuda .naslov { font-size: clamp(32px, 3.2vw, 44px); }
.police { border-bottom: 1px solid var(--crta); }
.polica {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 40px;
  align-items: baseline;
  padding: 24px 0 22px;
  border-top: 1px solid var(--crta);
}
.polica h3 {
  font-stretch: 112%;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 720;
  line-height: 1.15;
  /* duge njemačke riječi (Wasseranschlüsse) ne smiju prijeći u opis */
  hyphens: auto;
  overflow-wrap: break-word;
}
.polica p { font-size: 18px; color: var(--tekst-tihi); }

/* ---- marke ---- */

.marke {
  padding-top: 32px;
  padding-bottom: var(--odjeljak);
}
.marke__znakovi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 64px;
  margin: 44px 0 0 0;
  padding: 0;
  list-style: none;
}
/* Znakovi se ne prebojavaju. Pedrollo objavljuje samo bijeli znak, pa stoji na tamnoj podlozi. */
.znak-marke { display: flex; align-items: center; }
.znak-marke img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
}
.znak-marke--tamni {
  background: var(--tinta);
  padding: 18px 24px;
  border-radius: var(--kut);
}
.znak-marke--tamni img { height: 46px; }

.marke__i-jos {
  margin-top: 56px;
  font-size: 16px;
  font-weight: 600;
  color: var(--grafit);
}
.marke__popis {
  columns: 7 6.5em;
  column-gap: 32px;
  margin: 16px 0 0 0;
  padding: 16px 0 0 0;
  list-style: none;
  border-top: 1px solid var(--linija);
}
.marka {
  font-size: 18px;
  line-height: 1.9;
  break-inside: avoid;
}

/* ---- o nama, lokacije ---- */

.o-nama {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.o-nama__tekst p {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  margin-top: 20px;
  max-width: 30em;
}

.lokacije {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 40px;
}
.lokacije > h2 { grid-column: 1 / -1; }
.lokacija {
  padding-top: 16px;
  border-top: 2px solid var(--tinta);
}
.lokacija__vrsta { font-size: 15px; font-weight: 600; color: var(--tekst-tihi); }
.lokacija strong {
  display: block;
  font-stretch: 118%;
  font-size: 32px;
  font-weight: 780;
  line-height: 1.1;
}
.lokacija > p:not(.lokacija__vrsta) { font-size: 18px; margin-top: 2px; }
.lokacija .brojevi { margin: 12px 0 0 0; border-top: 0; }
.lokacija .brojevi div:last-child { border-bottom: 0; }

/* ---- podnožje ---- */

.podnozje {
  --tekst-tihi: var(--svijetlo-tiho);
  background: var(--tinta-3);
  color: var(--svijetlo-tiho);
  padding-top: 72px;
}
.podnozje__stupci {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 48px;
  padding-bottom: 56px;
}
.podnozje__naslov {
  font-size: 16px;
  font-weight: 700;
  color: var(--svijetlo);
}
.podnozje__blok {
  font-size: 15px;
  line-height: 1.8;
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}
.podnozje__blok strong { color: var(--svijetlo); font-weight: 650; }
.podnozje a {
  color: var(--svijetlo-tiho);
  text-decoration-color: rgba(180, 199, 205, 0.4);
  display: inline-block;
  padding: 2px 0;
}
.podnozje a:hover { color: var(--naljepnica); }

.traka-dno {
  background: var(--tinta-3);
  color: var(--svijetlo-tiho);
}
.traka-dno__unutra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(242, 246, 247, 0.16);
  font-size: 14px;
}
.traka-dno__slogan { font-weight: 650; color: var(--svijetlo); }

/* ---- akcija (crta je js/stranica.js kad je uključena) ---- */

.akcija {
  background: var(--naljepnica);
  color: var(--tinta);
}
.akcija__unutra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.akcija__lijevo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.akcija__znacka {
  background: var(--tinta);
  color: var(--naljepnica);
  font-weight: 700;
  font-size: 15px;
  padding: 7px 12px;
  border-radius: 3px;
  flex: none;
}
.akcija__slika-veza {
  display: block;
  flex: none;
  border-radius: 4px;
  cursor: zoom-in;
}
.akcija__slika {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: #fff;
}
.akcija__tekst { font-size: 19px; font-weight: 500; }
.akcija__artikl { display: block; font-weight: 750; font-stretch: 108%; }
.akcija__rok { font-size: 15px; font-weight: 600; flex: none; }
.akcija a { color: var(--tinta); text-decoration: underline; }
.akcija a:hover { text-decoration-color: var(--tinta); }

/* ---- cijela slika preko stranice (akcija i galerija trgovine) ---- */

.povecanje {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
  overflow: visible;
  cursor: zoom-out;
}
.povecanje::backdrop { background: rgba(10, 35, 44, 0.9); }
.povecanje__slika {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 4px;
  background: #fff;
}
.povecanje__zatvori {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--svijetlo);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.povecanje__zatvori:focus-visible { outline: 3px solid var(--naljepnica); outline-offset: 2px; }
html:has(.povecanje[open]) { overflow: hidden; }

/* ---- pokret pri listanju (js/pokret.js) ----
   Dijelovi su skriveni samo dok skripta ne preuzme, i samo ako posjetitelj
   nije isključio pokret. Pri ispisu je sve vidljivo. */

@media screen {
  .pokret [data-otkrij]:not([data-pokazano]) > * {
    opacity: 0;
    transform: translateY(16px);
  }
  .pokret tbody[data-otkrij]:not([data-pokazano]) > * { transform: none; }
  .pokret [data-otkrij][data-pokazano]:not([data-gotovo]) > * {
    transition: opacity 600ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}

/* ---- poziv uvijek na dohvat ----
   Računalo: tamna traka s brojevima ostaje na vrhu.
   Mobitel: donja traka poziva (js/poziv.js). */

.traka-poziv { display: none; }

@media (min-width: 768px) {
  html { scroll-padding-top: 60px; }
  .traka-vrh { position: sticky; top: 0; z-index: 20; }
}

/* ---- tablet ---- */

@media (max-width: 1023px) {
  :root { --rub: 32px; --odjeljak: 88px; }

  .zaglavlje { flex-wrap: wrap; }
  .zaglavlje__znak img { height: 72px; }
  .zaglavlje__izbornik { margin-left: -12px; }

  .uvod { gap: 40px; padding-top: 56px; }

  .pomoc,
  .o-nama { grid-template-columns: 1fr; gap: 48px; }
  .pomoc__desno { max-width: 520px; }
  .pomoc__slika { margin-top: 0; }
  .kartica-majstor { max-width: 32em; margin-top: 0; }

  .trgovina__gornje,
  .pumpe-prozor { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* podaci o trgovini prvi, pa galerija, najtraženije i karta */
  .trgovina__lijevo,
  .trgovina__desno { display: contents; }
  .trgovina__podaci { order: 1; }
  .galerija { order: 2; }
  .trgovina__gornje .kartica-ljeto { order: 3; }
  .karta { order: 4; max-width: 640px; }
  .pumpe-prozor__slika { max-width: 480px; }
  .pumpe-prozor__odabir { padding-top: 40px; }

  .istaknuto { grid-template-columns: 1fr; align-items: start; }

  .ponuda { grid-template-columns: 1fr; gap: 36px; }
  .polica { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }

  .podnozje__stupci { grid-template-columns: 1fr 1fr; }
  .marke__popis { columns: 5 8em; }
}

/* ---- mobitel ---- */

@media (max-width: 767px) {
  :root { --rub: 20px; --odjeljak: 64px; }

  /* element označen tipkovnicom ne smije ostati ispod donje trake */
  html { scroll-padding-bottom: 96px; }

  body { font-size: 17px; }

  /* brojevi su na mobitelu u donjoj traci, adrese u kontaktu */
  .traka-vrh { display: none; }

  /* znak i natpis gore lijevo, jezici gore desno, izbornik u redu ispod */
  .zaglavlje {
    position: relative;
    display: block;
    padding-top: 14px;
    padding-bottom: 4px;
  }
  .zaglavlje__znak {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .zaglavlje__znak img { height: 58px; }
  .zaglavlje__natpis { font-size: 13px; }
  .zaglavlje__natpis br { display: none; }
  .zaglavlje__zarez { display: inline; }
  .zaglavlje__izbornik {
    flex-wrap: wrap;
    margin: 4px -10px 0;
    font-size: 16px;
    gap: 0;
  }
  .zaglavlje__izbornik a { padding: 12px 10px; }
  .jezici {
    position: absolute;
    top: 14px;
    right: calc(var(--rub) - 8px);
    margin: 0;
    padding: 0;
    border: 0;
  }
  .zaglavlje__izbornik .jezici a { padding: 12px 8px; }

  .uvod { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
  .uvod h1 { font-stretch: 110%; font-size: clamp(36px, 11vw, 56px); margin-top: 14px; }
  .uvod__podnaslov { margin-top: 22px; }

  .gumbi { margin-top: 28px; gap: 10px; }
  .gumb { width: 100%; }
  /* broj s pozivnim +385 mora stati u jedan red i na najužem mobitelu */
  .gumb--tamni { font-size: clamp(18px, 5.6vw, 22px); }
  .gumbi--uz-tekst { flex-direction: column; align-items: stretch; }
  .uz-gumb { font-size: 17px; }

  .pitanja__red { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .pitanja dd { font-size: 17px; }
  .pomoc__opis { font-size: 17px; }
  .pomoc__zakljucak { margin-top: 32px; }
  .kartica-majstor { padding-left: 20px; }

  .trgovine__uvod { font-size: 17px; }
  .kartice { gap: 6px; margin-top: 28px; }
  .kartice__veza { padding: 14px 14px 12px; }
  .kartice__veza strong { font-size: 26px; }
  .kartice__veza span { font-size: 14px; }
  .trgovina { padding-top: 36px; }
  .trgovina__podaci h3 { font-size: 44px; }
  .trgovina__podaci h4 { margin-top: 36px; }
  .galerija { grid-template-columns: 1fr 1fr; grid-auto-rows: 118px; gap: 8px; }
  .ocjena { margin-top: 32px; }

  .pumpe-prozor { margin-top: 64px; padding-top: 40px; gap: 36px; }
  .pumpe-prozor__odabir { padding-top: 36px; }
  .popis-kvacica--dva { columns: 1; }
  .modeli summary { font-size: 17px; }

  .istaknuto__opis { font-size: 18px; }

  .polica { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .polica h3 { font-size: 23px; }
  .polica p { font-size: 16px; }

  .marke { padding-top: 16px; }
  /* dva znaka u prvom redu, treći ispod */
  .marke__znakovi { gap: 24px; margin-top: 32px; }
  .znak-marke img { height: 34px; }
  .znak-marke--tamni { padding: 12px 14px; }
  .znak-marke--tamni img { height: 30px; }
  .marke__popis { columns: 3; column-gap: 20px; }

  .lokacije { grid-template-columns: 1fr; gap: 28px; }
  .lokacija strong { font-size: 28px; }

  /* tablica se na uskom ekranu čita red po red */
  .tablica-omot { overflow-x: visible; }
  .tablica { font-size: 16px; }
  .tablica thead { display: none; }
  .tablica tbody tr {
    display: block;
    padding: 14px 0 12px;
  }
  .tablica tbody th {
    display: block;
    padding: 0 0 6px 0;
    font-size: 18px;
  }
  .tablica tbody td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
  }
  .tablica tbody td::before {
    content: attr(data-naslov);
    color: var(--tekst-tihi);
  }

  .podnozje { padding-top: 56px; }
  .podnozje__stupci { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .traka-dno__unutra { flex-direction: column; align-items: flex-start; gap: 4px; }

  .akcija__unutra { flex-direction: column; align-items: flex-start; gap: 12px; }
  .akcija__tekst { font-size: 17px; }

  /* mjesto za donju traku, u boji zadnjeg dijela stranice */
  body:has(.traka-poziv:not([hidden])) .traka-dno { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .traka-poziv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--tinta);
    box-shadow: 0 -1px 0 rgba(242, 246, 247, 0.14);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 220ms var(--zaustavi), visibility 0s linear 220ms;
  }
  .traka-poziv.vidljiva {
    transform: none;
    visibility: visible;
    transition: transform 280ms var(--zaustavi), visibility 0s;
  }
  .traka-poziv a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 4px 8px;
    border-radius: var(--kut);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color var(--brzo) ease;
  }
  .traka-poziv a > span { display: flex; flex-direction: column; }
  .traka-poziv small { font-size: 12px; font-weight: 500; color: var(--svijetlo-tiho); }
  .traka-poziv__zovi {
    background: var(--tinta-2);
    color: var(--svijetlo);
  }
  .traka-poziv__zovi:hover,
  .traka-poziv__zovi:active { background: #21505F; }
  .traka-poziv__wa { background: var(--naljepnica); color: var(--tinta); }
  .traka-poziv__wa:hover,
  .traka-poziv__wa:active { background: var(--naljepnica-2); }
}

/* najuži mobiteli: donja traka stane bez izlaska preko ruba */
@media (max-width: 359px) {
  .traka-poziv { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .traka-poziv a { gap: 6px; padding: 4px; font-size: 15px; }
  .traka-poziv .ikona { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .gumb,
  .kartice__veza,
  .karta__natpis,
  .galerija__slika img,
  .modeli summary::after,
  .traka-poziv,
  .traka-poziv.vidljiva,
  .traka-poziv a { transition: none; }
  .gumb:active { transform: none; }
  .galerija__slika:hover img { transform: none; }
}