/* hp-tpl.css — biblioteka predložaka sekcija (STRUKTURA, bez boja).
   DOM ugovor: section.seg.tpl-<oblik>[.mod-<var>] > article (glava = 1., kartice = 2..N).
   ?v se diže pri svakoj izmjeni; provjera sa servera. */

/* style.css:32 gađa div,span,p,em,a,li IZRAVNO → poništi unutar naslova (inače em sitan/kriv) */
h1 *, h2 *, h3 *, h4 * {
  font-size: inherit; font-family: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: inherit; font-style: normal; text-transform: inherit;
}

/* --- osnova sekcije: full-bleed podloga, sadržaj centriran do --maxw BEZ inner wrappera --- */
.seg { box-sizing: border-box;
  padding-block: clamp(40px, 6vw, 72px);
  padding-inline: max(26px, calc((100vw - var(--maxw)) / 2));
}
.seg * { box-sizing: border-box; }
.seg > article { display: flex; flex-direction: column; margin: 0; }
.seg > article > h2, .seg > article > h3 { margin: 0 0 12px; }
.seg > article > p  { margin: 0 0 14px; max-width: 68ch; }
.seg img { max-width: 100%; height: auto; display: block; }

/* nadnaslov: <em> DIREKTNO dijete article, u izvoru IZA naslova → order:-1 iznad njega */
.seg > article > em {
  order: -1; font-size: .73rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; font-style: normal; margin-bottom: 12px;
}

/* === tpl-grid-4: glava (puna širina) + 4 kartice === */
.tpl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.tpl-grid-4 > article:first-of-type { grid-column: 1 / -1; text-align: center; align-items: center; } /* glava preko cijelog reda — 1/-1 jer broj stupaca ovisi o prijelomu */
.tpl-grid-4 > article:first-of-type ~ article { padding: 22px; text-align: center; align-items: center; border-radius: var(--r); }

/* === tpl-split: glava lijevo, ploča/kartice desno === */
.tpl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

/* === tpl-proces: glava + numerirani koraci === */
.tpl-proces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: korak; }
.tpl-proces > article:first-of-type { grid-column: 1 / -1; text-align: center; align-items: center; }
.tpl-proces > article:first-of-type ~ article { counter-increment: korak; position: relative; padding-top: 58px; }
.tpl-proces > article:first-of-type ~ article::before {
  content: counter(korak); position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pilula); font-weight: 700;
}

/* === tpl-cta: centrirani poziv === */
.tpl-cta { text-align: center; border-radius: var(--r); }
.tpl-cta > article { align-items: center; }

/* rabatna ljestvica: <ul> s <b> na kraju retka (NIKAD tablica) — iznos desno */
.seg-veleprodaja ul { list-style: none; margin: 18px 0 0; padding: 0; }
.seg-veleprodaja li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
.seg-veleprodaja li b { font-weight: 700; white-space: nowrap; }

/* širi od prozora → ograniči (.wrapper se NE dira) */
.seg > article { width: 100%; }

/* === prijelomi (media_queries.css pokriva 0–800; pokrivamo 801–1040 + niže) === */
@media (max-width: 1040px) {
  .tpl-grid-4, .tpl-proces { grid-template-columns: repeat(2, 1fr); } /* glava (1/-1) prati sama */
}
@media (max-width: 800px) {
  .tpl-split { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 599px) {
  .tpl-grid-4, .tpl-proces { grid-template-columns: 1fr; }
}


/* === tpl-hero: puna sirina, centriran, zrak (slike jos nema) === */
.tpl-hero{text-align:center}
.tpl-hero > article{align-items:center;max-width:820px;margin-inline:auto;padding-block:clamp(16px,3vw,32px)}
.tpl-hero > article > h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.12;margin:0 0 14px}
.tpl-hero > article > p{font-size:1.06rem;max-width:60ch;margin:0 auto 16px}
.seg-hero p a{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:var(--r-pilula);text-decoration:none;font-weight:600;border:2px solid transparent}


/* === kartica proizvoda (postojeći shop markup .productsCon .box; layout, ne podaci) === */
.productsCon .list li .box{display:flex;flex-direction:column;overflow:hidden;height:100%}
.productsCon .list li .box figure.img{aspect-ratio:1/1;width:100%;min-height:0;max-height:none;margin:0;overflow:hidden;display:block}
.productsCon .list li .box figure.img a{display:grid;place-items:center;width:100%;height:100%;padding:16px}
.productsCon .list li .box figure.img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.productsCon .list li .box figcaption{padding:14px 16px;display:flex;flex-direction:column;gap:4px;flex:1;text-align:left}
.productsCon .list li .box .title{font-size:1rem;line-height:1.25;margin:0}
.productsCon .list li .box .dimension-and-itemCode{font-size:.8rem;margin:0}
.productsCon .list li .box .price{margin:8px 0 0;display:flex;flex-direction:column;gap:2px}
.productsCon .list li .box .price strong{font-size:1.25rem;line-height:1}
.productsCon .list li .box .price small{font-size:.74rem}
.productsCon .list li .box .btn{margin-top:auto;align-self:flex-start}


/* === akcijski red kartice === */
.productsCon .list li .box .p-akcija{margin-top:8px}
.productsCon .list li .box .shop_add{display:flex;flex-direction:column;gap:8px;margin:0}
.productsCon .list li .box .kolicina{display:inline-flex;align-items:center;border:1px solid var(--linija);border-radius:var(--r-pilula);overflow:hidden;align-self:flex-start}
.productsCon .list li .box .kolicina .qt-step{width:34px;height:38px;border:0;background:transparent;font:inherit;cursor:pointer;line-height:1}
.productsCon .list li .box .kolicina input{width:46px;height:38px;border:0;text-align:center;font:inherit;-moz-appearance:textfield}
.productsCon .list li .box .kolicina input::-webkit-outer-spin-button,.productsCon .list li .box .kolicina input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.productsCon .list li .box .dodaj-u-upit{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border:0;border-radius:var(--r-pilula);font:inherit;font-weight:600;cursor:pointer;width:100%}
.productsCon .list li .box .btn2{margin-top:6px}