/*
  Euromatika — stilovi.

  Boje su one koje stranica vec koristi: crna navigacija, crvena #e3041f na
  cijenama, gumbima i oznakama, bijela podloga. Dodane su dvije radne boje —
  celicno siva i svijetla ploha — jer se ovdje prodaje pocincani celik i
  aluminij, pa materijal odredjuje paletu.

  Tipografija: Archivo, posluzena s naseg posluzitelja. Google Fonts nije
  opcija za trgovinu u EU bez pristanka posjetitelja, a jedan zahtjev manje
  prema tudjoj domeni je ujedno brza stranica.

  Pokret: ovdje se prodaju stvari koje se otvaraju. Zato se sadrzaj otkriva
  bocno, kao krilo vrata, a ne odozdo — i to jednom po cjelini, ne na svakom
  elementu. Tko je iskljucio animacije, ne vidi nijednu.
*/

/* ── Pismo ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-lat.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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-lat-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-display: swap;
  src: url('../fonts/archivo-viet.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
                 U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
                 U+0329, U+1EA0-1EF9, U+20AB;
}

/* ── Tokeni ────────────────────────────────────────────────────────────── */

:root {
  --crna: #000000;
  --crvena: #e3041f;
  --crvena-tamna: #b00318;
  --bijela: #ffffff;
  --celik: #8b9299;
  --ploha: #f2f4f5;
  --tekst: #14181c;
  --prigusen: #5d666e;
  --rub: #d8dde1;

  --sirina: 1800px;              /* kao na postojecoj stranici */
  --sirina-citanje: 68ch;

  /* Staticke stranice (uvjeti, kolacici, privatnost) nisu clanci nego
     dokumenti: imaju naslove, popise i tablice, citaju se u skokovima i trpe
     siri redak. Na 68ch su izgledale kao uska vrpca nasred praznog zaslona. */
  --sirina-stranice: 58rem;
  --razmak: clamp(1rem, 0.6rem + 1.4vw, 2rem);

  --pismo: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --prijelaz: 260ms cubic-bezier(.2, .7, .3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--pismo);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
  color: var(--tekst);
  background: var(--bijela);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--crvena); text-underline-offset: 2px; }
a:hover { color: var(--crvena-tamna); }

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 4.25rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
p { margin: 0 0 1em; }

/* ── Raspored ──────────────────────────────────────────────────────────── */

.omotac { width: min(100% - 2.5rem, var(--sirina)); margin-inline: auto; }
.omotac--usko { width: min(100% - 2.5rem, var(--sirina-stranice)); }
.site-main { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) 5rem; }

/* ── Pristupacnost ─────────────────────────────────────────────────────── */

.preskoci {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--crvena); color: #fff; padding: .8rem 1.2rem; font-weight: 700;
}
.preskoci:focus { left: 1rem; top: 1rem; }

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

:focus-visible { outline: 3px solid var(--crvena); outline-offset: 3px; }

/* ── Zaglavlje: crna traka, kao i dosad ────────────────────────────────── */

.zaglavlje { background: var(--crna); color: var(--bijela); position: sticky; top: 0; z-index: 50; }
.zaglavlje__red { display: flex; align-items: center; gap: var(--razmak); padding-block: .85rem; flex-wrap: wrap; }

.izbornik { flex: 1 1 auto; }
.izbornik__popis { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.izbornik__popis a {
  text-decoration: none; color: var(--bijela); font-weight: 600; font-size: .95rem;
  padding-block: .35rem; border-bottom: 2px solid transparent; transition: border-color var(--prijelaz);
}
.izbornik__popis a:hover,
.izbornik__popis .current-menu-item > a { border-bottom-color: var(--crvena); color: var(--bijela); }

.zaglavlje__alati { display: flex; align-items: center; gap: .6rem; }
.kosarica { text-decoration: none; color: var(--bijela); font-weight: 700; white-space: nowrap; font-size: .95rem; }
.kosarica__broj {
  display: inline-block; min-width: 1.6em; text-align: center;
  background: var(--crvena); color: #fff; font-size: .78rem; padding: .15em .45em;
}
.izbornik__prekidac {
  display: none; border: 1px solid #3a3a3a; background: transparent; color: var(--bijela);
  padding: .5rem .9rem; font: inherit; font-weight: 700; cursor: pointer;
}

/* ── Pretraga ──────────────────────────────────────────────────────────── */

.pretraga { display: flex; }
.pretraga__polje {
  border: 1px solid #3a3a3a; border-right: 0; background: #141414; color: var(--bijela);
  padding: .55rem .8rem; font: inherit; font-size: .95rem; min-width: 15rem;
}
.pretraga__polje::placeholder { color: #8a8a8a; }
.pretraga__gumb {
  border: 0; background: var(--crvena); color: #fff;
  padding: .55rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer;
  transition: background var(--prijelaz);
}
.pretraga__gumb:hover { background: var(--crvena-tamna); }

/* ── Otkrivanje pri listanju ───────────────────────────────────────────── */
/*
   Krilo vrata: sadrzaj ulazi bocno. Smjer zadaje data-otkrij="lijevo|desno".
   Bez JS-a sve je odmah vidljivo — stanje bez skripte je konacno stanje, a ne
   skriveno. Zato skrivanje dodaje tek .js klasa koju postavlja sama skripta.
*/

.js [data-otkrij] {
  opacity: 0;
  transform: translateX(var(--pomak, -2.5rem));
  transition: opacity 620ms cubic-bezier(.2,.7,.3,1), transform 620ms cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.js [data-otkrij="desno"] { --pomak: 2.5rem; }
.js [data-otkrij].vidljiv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-otkrij] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Mrvice ────────────────────────────────────────────────────────────── */

.mrvice, .woocommerce-breadcrumb { font-size: .85rem; color: var(--prigusen); margin-bottom: 1.2rem; }
.mrvice a, .woocommerce-breadcrumb a { color: var(--prigusen); }

/* ── Mreza proizvoda ───────────────────────────────────────────────────── */

ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
  perspective: 1400px;
}

ul.products li.product {
  margin: 0; background: var(--bijela); border: 1px solid var(--rub);
  transform-style: preserve-3d; position: relative; overflow: hidden;
  transition: transform var(--prijelaz), border-color var(--prijelaz), box-shadow var(--prijelaz);
}
ul.products li.product:hover { border-color: var(--crna); box-shadow: 0 26px 44px -30px rgba(0,0,0,.6); }
ul.products li.product > a { text-decoration: none; color: inherit; display: block; }

/* Slika ide do ruba plohe — unutarnji razmak ju je cinio sitnom. */
ul.products li.product img {
  width: 100%; background: var(--ploha);
  aspect-ratio: 1 / 1; object-fit: contain; padding: 0;
  transform: translateZ(0) scale(1.001);
  transition: transform 420ms cubic-bezier(.2,.7,.3,1);
}
ul.products li.product:hover img { transform: translateZ(40px) scale(1.06); }

ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  margin: 0; padding: 1rem 1.1rem .35rem;
}
ul.products li.product .price {
  display: block; padding: 0 1.1rem 1.1rem;
  color: var(--crvena); font-weight: 800; font-size: 1.2rem;
}
ul.products li.product .price del { color: var(--prigusen); font-weight: 500; font-size: .9rem; margin-right: .4rem; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .button { display: none; }

span.onsale {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--crvena); color: #fff; border-radius: 0;
  font-weight: 800; padding: .3rem .7rem; font-size: .78rem; letter-spacing: .02em;
}

.woocommerce-result-count, .woocommerce-ordering { margin-bottom: 1rem; }
.woocommerce-ordering select {
  border: 1px solid var(--rub); padding: .5rem .7rem; font: inherit; background: var(--bijela);
}

/* ── Stranica proizvoda ────────────────────────────────────────────────── */

.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}

/* Galerija ostaje na mjestu dok se cita desna strana. */
.single-product .woocommerce-product-gallery {
  position: sticky; top: 5.5rem;
  border: 1px solid var(--rub); background: var(--ploha);
  perspective: 1400px;
}
.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.single-product .woocommerce-product-gallery__wrapper { transform-style: preserve-3d; }
.single-product .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .4rem; list-style: none; margin: .5rem; padding: 0;
}
.single-product .flex-control-thumbs li { margin: 0; }
.single-product .flex-control-thumbs img {
  border: 1px solid var(--rub); background: var(--bijela); cursor: pointer;
  aspect-ratio: 1/1; object-fit: contain;
  transition: border-color var(--prijelaz);
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { border-color: var(--crna); }

.single-product div.product .summary { margin: 0; display: grid; gap: .9rem; }
.single-product div.product .product_title {
  margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
}
.single-product div.product p.price,
.single-product div.product span.price {
  margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  color: var(--crvena); font-weight: 800; line-height: 1;
}
.single-product div.product .woocommerce-product-details__short-description {
  color: var(--tekst); border-left: 3px solid var(--crvena); padding-left: 1rem;
}
.single-product div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

.single-product form.cart { display: grid; gap: .8rem; margin: 0; }
.single-product form.cart .quantity input {
  border: 1px solid var(--rub); padding: .7rem .6rem; font: inherit; width: 5rem; text-align: center;
}
.single-product form.cart .variations { width: 100%; border-collapse: collapse; }
.single-product form.cart .variations th,
.single-product form.cart .variations td { text-align: left; padding: .35rem 0; vertical-align: middle; }
.single-product form.cart .variations label { font-weight: 700; }
.single-product form.cart select {
  border: 1px solid var(--rub); padding: .6rem .7rem; font: inherit; background: var(--bijela); min-width: 12rem;
}
.single-product form.cart .single_add_to_cart_button { justify-self: start; }

.product_meta { font-size: .85rem; color: var(--prigusen); border-top: 1px solid var(--rub); padding-top: .9rem; }
.product_meta > span { display: block; margin-bottom: .2rem; }
.product_meta a { color: var(--prigusen); }

/* Kartice s opisom i specifikacijama */
.single-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.single-product .woocommerce-tabs ul.tabs {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--rub);
}
.single-product .woocommerce-tabs ul.tabs li { margin: 0; }
.single-product .woocommerce-tabs ul.tabs li a {
  display: block; padding: .75rem 1.2rem; text-decoration: none;
  color: var(--prigusen); font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--tekst); border-bottom-color: var(--crvena); }
.single-product .woocommerce-tabs .panel > h2:first-child { display: none; }

.shop_attributes { width: 100%; border-collapse: collapse; max-width: 60rem; }
.shop_attributes tr:nth-child(odd) { background: var(--ploha); }
.shop_attributes th, .shop_attributes td {
  text-align: left; padding: .7rem 1rem; border: 0; vertical-align: top;
}
.shop_attributes th { width: 18rem; color: var(--prigusen); font-weight: 600; }
.shop_attributes td p { margin: 0; }

.single-product .related { grid-column: 1 / -1; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.single-product .related > h2 { margin-bottom: 1.2rem; }

.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--crvena); color: #fff; border-radius: 0; font-weight: 800;
  padding: .95rem 1.8rem; border: 0; font-size: 1.02rem;
  transition: background var(--prijelaz), transform var(--prijelaz);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: var(--crvena-tamna); color: #fff; transform: translateY(-1px);
}
.woocommerce .button.disabled, .woocommerce button.button:disabled { background: var(--celik); }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 3px solid var(--crvena); background: var(--ploha); padding: 1rem 1.2rem; list-style: none;
}

/* ── Clanci ────────────────────────────────────────────────────────────── */

.popis-clanaka { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
.kartica-clanka__naslov { font-size: 1.15rem; }
.kartica-clanka__naslov a { text-decoration: none; color: var(--tekst); }
.kartica-clanka__naslov a:hover { color: var(--crvena); }
.kartica-clanka__uvod { color: var(--prigusen); font-size: .95rem; }
.clanak__sadrzaj { max-width: var(--sirina-citanje); }

/* Staticka stranica zauzima cijeli spremnik, kao i trgovina i mreza clanaka.
   Ogranicenje sirine ostavljalo je tekst uz lijevi rub i pola zaslona prazno. */
.stranica__sadrzaj { max-width: none; }

/* Kosarica, blagajna i „Moj racun" su tablice i obrasci, ne tekst. Mjera
   citanja ih je stiskala u 662px usred stranice siroke 1800. */
.woocommerce-cart .stranica__sadrzaj,
.woocommerce-checkout .stranica__sadrzaj,
.woocommerce-account .stranica__sadrzaj { max-width: none; }

/* ── Podnozje ──────────────────────────────────────────────────────────── */

.podnozje { background: var(--crna); color: #c9ced3; padding-block: 3rem 2rem; margin-top: 4rem; }
.podnozje__popis { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.podnozje__popis a { color: #c9ced3; text-decoration: none; font-weight: 600; }
.podnozje__popis a:hover { color: var(--bijela); }
.podnozje__pravo { color: #7d858c; font-size: .9rem; margin: 0; }

/* ── Mobitel ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .izbornik__prekidac { display: inline-block; order: 3; }
  .izbornik { order: 5; width: 100%; }
  .izbornik__popis { display: none; flex-direction: column; gap: 0; }
  .izbornik--otvoren .izbornik__popis { display: flex; }
  .izbornik--otvoren .izbornik__popis a { display: block; padding: .7rem 0; border-bottom: 1px solid #222; }
  .zaglavlje__alati { order: 4; }
  .pretraga { width: 100%; }
  .pretraga__polje { min-width: 0; flex: 1 1 auto; }
  .single-product div.product { grid-template-columns: 1fr; }
}

/* ── Filtri ────────────────────────────────────────────────────────────── */

.omotac.trgovina {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}

.filtri { position: sticky; top: 5.5rem; }
.filtri__naslov {
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  margin: 0 0 .6rem; color: var(--tekst);
}
.filtri__skupina { padding-block: 1rem; border-top: 1px solid var(--rub); }
.filtri__skupina:first-of-type { border-top: 0; padding-top: 0; }

.filtri__popis { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }

.filtar {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .4rem .55rem; text-decoration: none; color: var(--tekst);
  border-left: 3px solid transparent; font-size: .95rem;
  transition: background var(--prijelaz), border-color var(--prijelaz);
}
.filtar:hover { background: var(--ploha); color: var(--tekst); }
.filtar--odabran { border-left-color: var(--crvena); background: var(--ploha); font-weight: 700; }
.filtar__broj { color: var(--prigusen); font-size: .8rem; font-variant-numeric: tabular-nums; }

.filtri__odabrano { padding-bottom: 1rem; }
.filtri__znacke { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.znacka {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--crna); color: var(--bijela); text-decoration: none;
  padding: .3rem .6rem; font-size: .85rem; font-weight: 600;
}
.znacka:hover { background: var(--crvena); color: var(--bijela); }
.znacka__x { font-size: 1.05em; line-height: 1; }
.filtri__ocisti { font-size: .85rem; color: var(--prigusen); }

@media (max-width: 1024px) {
  .omotac.trgovina { grid-template-columns: 1fr; }
  .filtri { position: static; border: 1px solid var(--rub); padding: 1rem; }
  .filtri__popis { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
}

/* ── Naslovnica i vodic ────────────────────────────────────────────────── */

.hero { background: var(--crna); color: var(--bijela); padding-block: clamp(2rem, 1rem + 4vw, 4.5rem); }
.hero__red {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
}
.hero__naslov { color: var(--bijela); margin-bottom: .3em; }
.hero__podnaslov { color: #b9c0c7; font-size: clamp(1rem, .95rem + .4vw, 1.25rem); max-width: 34ch; margin: 0; }

.vodic { background: var(--bijela); color: var(--tekst); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.vodic__naslov { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .2em; }
.vodic__opis { color: var(--prigusen); font-size: .95rem; margin-bottom: 1.25rem; }
.vodic__korak { margin-bottom: 1.1rem; }
.vodic__korak[hidden] { display: none; }
.vodic__pitanje { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; }

.vodic__opcije { display: flex; flex-wrap: wrap; gap: .4rem; }

.opcija { position: relative; display: inline-flex; }
.opcija input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.opcija__tekst {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--rub); padding: .5rem .85rem;
  font-size: .9rem; font-weight: 600; transition: border-color var(--prijelaz), background var(--prijelaz);
}
.opcija input:checked + .opcija__tekst { border-color: var(--crna); background: var(--crna); color: var(--bijela); }
.opcija input:focus-visible + .opcija__tekst { outline: 3px solid var(--crvena); outline-offset: 2px; }
.opcija:hover .opcija__tekst { border-color: var(--crna); }
.opcija__broj {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: .75rem; color: var(--prigusen); pointer-events: none;
}
.vodic--js .opcija__tekst { padding-right: 2.4rem; }
.opcija--prazna { opacity: .4; }
.opcija--prazna .opcija__tekst { cursor: not-allowed; }

.vodic__kraj { margin-top: 1.4rem; }
.vodic__gumb {
  display: inline-flex; align-items: baseline; gap: .6rem;
  background: var(--crvena); color: #fff; border: 0;
  padding: .85rem 1.6rem; font: inherit; font-weight: 800; font-size: 1.05rem;
  cursor: pointer; transition: background var(--prijelaz);
}
.vodic__gumb:hover:not(:disabled) { background: var(--crvena-tamna); }
.vodic__gumb:disabled { background: var(--celik); cursor: not-allowed; }
.vodic__broj { font-weight: 600; font-size: .9rem; opacity: .9; }
.vodic__napomena { color: var(--prigusen); font-size: .85rem; margin: .6rem 0 0; }

/* Odsjeci naslovnice */
.odsjek { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.odsjek__naslov { margin-bottom: 1.2rem; }

.kategorije {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem;
}
.kategorija a {
  display: block; text-decoration: none; color: var(--tekst);
  border: 1px solid var(--rub); padding-bottom: .9rem;
  transition: border-color var(--prijelaz);
}
.kategorija a:hover { border-color: var(--crna); }
.kategorija img { background: var(--ploha); aspect-ratio: 4 / 3; object-fit: contain; padding: .5rem; }
.kategorija__ime { display: block; font-weight: 700; padding: .8rem .9rem .15rem; line-height: 1.25; }
.kategorija__broj { display: block; color: var(--prigusen); font-size: .85rem; padding: 0 .9rem; }

@media (max-width: 960px) {
  .hero__red { grid-template-columns: 1fr; }
}

/* ── Dodatni odsjeci naslovnice ────────────────────────────────────────── */

.hero__brojke { color: var(--celik); font-size: .9rem; margin: 1rem 0 0; }

.odsjek--ploha { background: var(--ploha); }

/* Marke: tipografska traka, bez logotipa koje nemamo */
.marke {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem;
}
.marka {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rub); padding: .9rem .6rem;
  text-decoration: none; color: var(--tekst);
  font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
  transition: border-color var(--prijelaz), color var(--prijelaz), transform var(--prijelaz);
}
.marka:hover { border-color: var(--crna); color: var(--crvena); transform: translateY(-2px); }

/* Kategorije dobivaju istu dubinu kao kartice proizvoda */
.kategorije { perspective: 1400px; }
.kategorija { transform-style: preserve-3d; }
.kategorija a { transition: border-color var(--prijelaz), box-shadow var(--prijelaz), transform var(--prijelaz); }
.kategorija a:hover { box-shadow: 0 22px 36px -28px rgba(0,0,0,.6); }
.kategorija img { transition: transform 420ms cubic-bezier(.2,.7,.3,1); }
.kategorija a:hover img { transform: translateZ(30px) scale(1.05); }

.kartica-clanka img { border: 1px solid var(--rub); background: var(--ploha); }

/* ── Dubina u galeriji proizvoda ───────────────────────────────────────── */

.single-product .woocommerce-product-gallery__image {
  transition: transform 420ms cubic-bezier(.2,.7,.3,1);
  transform-style: preserve-3d;
}

/* ── Otkrivanje: jos dva smjera ────────────────────────────────────────── */
/*
   Uz bocni ulaz, cjeline koje nose dubinu (mreze kartica) ulaze i iz dubine —
   mali pomak po Z osi, dovoljan da se primijeti da je nesto doslo naprijed.
*/
.js [data-otkrij="dubina"] {
  opacity: 0;
  transform: perspective(1200px) translateZ(-70px);
  transition: opacity 680ms cubic-bezier(.2,.7,.3,1), transform 680ms cubic-bezier(.2,.7,.3,1);
}
.js [data-otkrij="dubina"].vidljiv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-otkrij="dubina"] { opacity: 1; transform: none; transition: none; }
}

/* ── Poništavanje WooCommerceova rasporeda ─────────────────────────────── */
/*
   WooCommerce stranicu proizvoda slaze plutajucim stupcima (float: left/right,
   width: 48%). Mi je slazemo mrezom, pa se ta dva nacina moraju razdvojiti —
   inace stupci plutaju unutar celija mreze i sadrzaj se preklapa.
*/

.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery {
  float: none !important;
  width: auto !important;
  margin-bottom: 0;
}

.woocommerce div.product div.woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { float: none; width: auto; clear: both; }

/* Galerija: flexslider dobiva stvarnu sirinu unutar celije mreze. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport { overflow: hidden; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; }

/* Povecalo za otvaranje galerije — zadano stoji preko slike u kutu. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute; top: .5rem; right: .5rem; left: auto; z-index: 3;
  background: var(--bijela); border: 1px solid var(--rub);
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  text-decoration: none; font-size: 1rem;
}

/* Trake i poruke u WooCommerceovoj boji -> nasoj. */
.woocommerce #respond input#submit, .woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--crvena); }

.woocommerce div.product form.cart .reset_variations { font-size: .85rem; color: var(--prigusen); }
.woocommerce div.product .stock { font-weight: 700; }
.woocommerce div.product .stock.in-stock { color: var(--boja-cijena, #166534); }
.woocommerce div.product .stock.out-of-stock { color: var(--crvena); }

/* ── Ziva pretraga ─────────────────────────────────────────────────────── */

.pretraga--ziva { position: relative; }

.zivapretraga {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 60;
  background: var(--bijela); border: 1px solid var(--rub);
  box-shadow: 0 24px 48px -26px rgba(0,0,0,.55);
  max-height: min(70vh, 32rem); overflow-y: auto;
}
.zivapretraga[hidden] { display: none; }

.zivapretraga__stavka {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: .75rem;
  padding: .6rem .75rem; text-decoration: none; color: var(--tekst);
  border-bottom: 1px solid var(--rub);
}
.zivapretraga__stavka:last-of-type { border-bottom: 0; }
.zivapretraga__stavka:hover,
.zivapretraga__stavka.je-odabrana { background: var(--ploha); color: var(--tekst); }
.zivapretraga__stavka img { width: 48px; height: 48px; object-fit: contain; background: var(--ploha); }

.zivapretraga__tekst { display: grid; gap: .1rem; min-width: 0; }
.zivapretraga__naziv { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.zivapretraga__meta { color: var(--prigusen); font-size: .8rem; }
.zivapretraga__stanje { font-size: .72rem; font-weight: 700; color: #166534; white-space: nowrap; }
.zivapretraga__stanje.nema { color: var(--prigusen); }

.zivapretraga__prazno { padding: 1rem .9rem; color: var(--prigusen); margin: 0; font-size: .9rem; }
.zivapretraga__sve {
  display: block; padding: .7rem .75rem; text-align: center;
  background: var(--crna); color: var(--bijela); text-decoration: none; font-weight: 700; font-size: .88rem;
}
.zivapretraga__sve:hover { background: var(--crvena); color: var(--bijela); }

@media (max-width: 860px) {
  .zivapretraga { position: fixed; left: 0; right: 0; top: auto; max-height: 60vh; }
}

/* ── Popravci rasporeda stranice proizvoda ─────────────────────────────── */
/*
   Omotac za otkrivanje pri listanju je i sam celija mreze.
   Bez ovoga opis, specifikacije i povezani proizvodi zavrse stisnuti u lijevi
   stupac, a desna polovica stranice ostane prazna — animacija je razbila
   raspored koji je trebala samo oziviti.
*/
.single-product div.product > [data-otkrij] {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Glavna slika ne smije pojesti cijeli zaslon. Dio artikala su visoki kolazi,
   pa bez gornje granice jedna slika odgurne sve ostalo ispod pregiba. */
.single-product .woocommerce-product-gallery__image img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

/* Flexslider na slicice upisuje svoje dimenzije u stil elementa, pa ih treba
   nadjacati — inace se stisnu na dvadesetak piksela. */
.single-product .flex-control-nav.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: .4rem;
  margin: .5rem;
  padding: 0;
  list-style: none;
}
.single-product .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: block;
}
.single-product .flex-control-thumbs img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  opacity: 1;
  background: var(--bijela);
  border: 1px solid var(--rub);
}

/* Gumb koji ceka odabir inacice: siv i jasno neaktivan, bez blijede crvene. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.wc-variation-selection-needed {
  background: var(--celik) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Kartice: panel ne smije biti uzi od stranice. */
.single-product .woocommerce-tabs .panel { max-width: var(--sirina-citanje); }
.single-product .woocommerce-tabs .panel .shop_attributes { max-width: none; }
.single-product .woocommerce-tabs .panel img { height: auto; }

/* ── Mreza proizvoda: nadjacavanje WooCommerceova rasporeda ────────────── */
/*
   WooCommerce svoja pravila pise kao `.woocommerce ul.products li.product` —
   tri razreda. Nasa su bila `ul.products li.product`, dakle manje tezine, pa
   su gubila bez obzira na to sto se ucitavaju poslije: kartice su ostale na
   plutajucim stupcima, slike sitne, a gumbi „Select options" vidljivi.
   Specificnost se ne rjesava redoslijedom nego jednakim brojem razreda.
*/

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  margin: 0; padding: 0; list-style: none;
  perspective: 1400px;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  background: var(--bijela);
  border: 1px solid var(--rub);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--prijelaz), border-color var(--prijelaz), box-shadow var(--prijelaz);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--crna);
  box-shadow: 0 26px 44px -30px rgba(0,0,0,.6);
}

.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }

.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  margin: 0 0 0 0;
  background: var(--ploha);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform: translateZ(0);
  transition: transform 420ms cubic-bezier(.2,.7,.3,1);
}
.woocommerce ul.products li.product:hover a img { transform: translateZ(40px) scale(1.06); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  margin: 0; padding: 1rem 1.1rem .35rem; color: var(--tekst);
}
.woocommerce ul.products li.product .price {
  display: block; margin: 0; padding: 0 1.1rem 1.1rem;
  color: var(--crvena); font-weight: 800; font-size: 1.2rem;
}
.woocommerce ul.products li.product .price del { color: var(--prigusen); font-weight: 500; font-size: .9rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Kupnja se dogadja na stranici proizvoda — u mrezi gumb samo pravi buku. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { display: none !important; }

.woocommerce ul.products li.product .onsale {
  position: absolute; top: 0; left: 0; right: auto; margin: 0; z-index: 2;
  background: var(--crvena); color: #fff; border-radius: 0;
  font-weight: 800; padding: .3rem .7rem; font-size: .78rem; min-height: 0; line-height: 1.4;
}

.woocommerce .woocommerce-ordering { float: none; margin: 0 0 1.25rem; }
.woocommerce .woocommerce-result-count { float: none; margin: 0 0 1.25rem; }

/* ── Oznaka akcije ─────────────────────────────────────────────────────── */
/*
   WooCommerce svoje pravilo pise kao `.woocommerce span.onsale` — dva razreda
   i element. Nase je bilo `span.onsale`, pa je gubilo: oznaka je ostajala
   maslinasti krug visok 47px umjesto crvene zastavice kakva je u mrezi.
   Ista zamka kao kod kartica proizvoda; rjesava se jednakom tezinom, ne
   redoslijedom.
*/
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  position: absolute; top: 0; left: 0; right: auto; z-index: 3;
  background: var(--crvena); color: #fff;
  border-radius: 0;
  min-height: 0; min-width: 0; height: auto; width: auto;
  line-height: 1.4; padding: .3rem .7rem;
  font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  margin: 0;
}

/* ── Opis i specifikacije jedno uz drugo ───────────────────────────────── */
/*
   Kartice su ovdje gubile prostor umjesto da ga stede. Opis drzi mjeru citanja
   od 68 znakova, pa je na sirokom zaslonu desna polovica stranice ostajala
   prazna, a specifikacije — ono zbog cega monter uopce otvara stranicu — bile
   su sakrivene iza klika.
   Na sirokim zaslonima zato nema kartica: opis stoji lijevo, tablica desno i
   prati listanje. Ispod 1200px se vraca izvorno ponasanje s karticama, gdje
   dva stupca ionako nemaju smisla.
*/
@media (min-width: 1200px) {
  .single-product .woocommerce-tabs > ul.tabs { display: none; }

  .single-product .woocommerce-tabs {
    display: grid;
    /* Oba stupca su omedjena svojim sadrzajem: opis mjerom citanja, tablica
       svojim dvama kratkim stupcima. Zato se cijela traka centrira — inace
       visak sirine zavrsi kao rupa izmedju stupaca ili prazan pojas desno. */
    grid-template-columns: minmax(0, var(--sirina-citanje)) minmax(300px, 24rem);
    justify-content: center;
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: start;
  }

  /* WooCommerceova skripta panelima upisuje `display:none` u sam element,
     pa se bez `!important` ne daju pokazati. */
  .single-product .woocommerce-tabs .panel { display: block !important; max-width: none; }


  /* Naslov panela je sakriven dok kartice postoje jer ga zamjenjuje jezicac.
     Bez jezicaca je on jedino sto stupcu daje ime, pa se vraca. */
  .single-product .woocommerce-tabs .panel > h2:first-child {
    display: block;
    font-size: 1.35rem; margin: 0 0 1rem;
    padding-bottom: .5rem; border-bottom: 2px solid var(--crvena);
  }

  .single-product .woocommerce-tabs #tab-additional_information {
    position: sticky; top: 5.5rem;
    background: var(--ploha); border: 1px solid var(--rub);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  }
  .single-product .woocommerce-tabs #tab-additional_information > h2:first-child { margin-top: 0; }
}

/* Tablica specifikacija: citljivi parovi, bez WooCommerceovih kurziva. */
.single-product .shop_attributes { width: 100%; border-collapse: collapse; }
.single-product .shop_attributes tr { border-bottom: 1px solid var(--rub); }
.single-product .shop_attributes tr:last-child { border-bottom: 0; }
.single-product .shop_attributes th {
  text-align: left; font-weight: 700; padding: .6rem .9rem .6rem 0;
  width: 45%; vertical-align: top; color: var(--prigusen);
}
.single-product table.shop_attributes td,
.single-product table.shop_attributes td p {
  padding: .6rem 0; vertical-align: top;
  font-style: normal;          /* WooCommerce vrijednosti pise u kurzivu */
  color: var(--tekst);
}
.single-product table.shop_attributes td p { padding: 0; }
.single-product .shop_attributes td a { color: var(--tekst); text-decoration: none; border-bottom: 1px solid var(--rub); }
.single-product .shop_attributes td a:hover { border-bottom-color: var(--crvena); color: var(--crvena); }
.single-product .shop_attributes td p { margin: 0; }
.single-product .shop_attributes td p i,
.single-product .shop_attributes td i { font-style: normal; }

/* ── Kratki podsjetnik uz proizvod ─────────────────────────────────────── */
/*
   Desni stupac je ispod sifre i kategorija zavrsavao u praznini. Ono sto
   kupca drzi na stranici nisu ukrasi nego odgovori na tri pitanja koja uvijek
   dolaze telefonom: imate li na skladistu, koliko traje dostava i tko mi to
   moze ugraditi.
*/
.eu-sigurnost {
  display: grid; gap: .75rem;
  margin: .5rem 0 0; padding: 1.1rem 1.25rem;
  background: var(--ploha); border-left: 3px solid var(--crvena);
}
.eu-sigurnost__stavka { display: flex; gap: .7rem; align-items: flex-start; font-size: .94rem; }
.eu-sigurnost__stavka svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: .15rem; color: var(--crvena); }
.eu-sigurnost__stavka b { display: block; }
.eu-sigurnost__stavka span { color: var(--prigusen); }
.eu-sigurnost a { color: var(--crvena); font-weight: 700; }

/* ── Zasto odabrati Euromatiku ─────────────────────────────────────────── */
/*
   Pet tvrdnji o tvrtki, ne koraci u postupku — zato bez numeriranja. Redoslijed
   ovdje ne znaci nista i brojevi bi tvrdili suprotno.
   Nosi ih tanka crvena crta uz lijevi rub, ista kao uz podsjetnik na stranici
   proizvoda, pa se dva bloka citaju kao isti glas.
*/
.razlozi__popis {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, .7rem + 1vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.razlog {
  padding: 1.4rem 1.5rem;
  background: var(--bijela);
  border: 1px solid var(--rub);
  border-left: 3px solid var(--crvena);
  transition: transform var(--prijelaz), box-shadow var(--prijelaz);
}
.razlog:hover { transform: translateY(-4px); box-shadow: 0 22px 38px -28px rgba(0,0,0,.55); }
.razlog__naslov { margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.35; }
.razlog__tekst { margin: 0; color: var(--prigusen); font-size: .95rem; }

/* Zadnji red cesto ostane s jednim clanom; neka se razvuce preko praznine
   umjesto da visi sam u lijevom stupcu. */
@media (min-width: 1200px) {
  .razlozi__popis { grid-template-columns: repeat(3, 1fr); }
  .razlog:nth-child(4) { grid-column: 1 / 2; }
}

/* ══ ZAGLAVLJE ═══════════════════════════════════════════════════════════ */
/*
   Tri pojasa, kao na prijedlozima: kontakt, znak+trazilica+alati, kategorije.
   Boje ostaju nase — prijedlozi su narancasti, a znak i cijela postojeca
   stranica su crveni. Promjena boje marke je klijentova odluka, ne nasa.
*/

.traka {
  background: var(--crna);
  color: #c9ced3;
  font-size: .82rem;
}
.traka__red {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px; flex-wrap: wrap;
}
.traka__obecanje { margin: 0; }
.traka__veze { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.traka__veza { display: inline-flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; font-weight: 600; }
.traka__veza:hover { color: var(--crvena); }
.traka__veza .ikona { width: 15px; height: 15px; }
.traka__popis { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.traka__popis a { color: #c9ced3; text-decoration: none; }
.traka__popis a:hover { color: #fff; }

.zaglavlje { background: var(--bijela); border-bottom: 1px solid var(--rub); position: relative; z-index: 30; }
.zaglavlje__red {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1rem, .5rem + 2vw, 3rem);
  padding-block: 1rem;
}
.znak { display: inline-flex; align-items: baseline; gap: .22rem; text-decoration: none; }
.znak__ime { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; color: var(--tekst); }
.znak__tocka { width: .45rem; height: .45rem; background: var(--crvena); display: inline-block; }

/* ── Trazilica ──────────────────────────────────────────────────────────── */
.trazilica { display: flex; width: 100%; position: relative; }
.trazilica__polje {
  flex: 1 1 auto; min-width: 0;
  border: 2px solid var(--rub); border-right: 0;
  padding: .8rem 1rem; font: inherit; font-size: .95rem;
  background: var(--bijela); color: var(--tekst);
}
.trazilica__polje:focus { outline: 0; border-color: var(--crna); }
.trazilica__gumb {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--crvena); color: #fff; padding: 0 1.4rem;
  transition: background var(--prijelaz);
}
.trazilica__gumb:hover { background: var(--crvena-tamna); }

.zaglavlje__alati { display: flex; align-items: center; gap: 1.5rem; }
.alat { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tekst); position: relative; }
.alat .ikona { width: 25px; height: 25px; flex: 0 0 25px; }
.alat__tekst { display: grid; line-height: 1.25; }
.alat__tekst b { font-size: .9rem; font-weight: 700; }
.alat__tekst small { font-size: .78rem; color: var(--prigusen); }
.alat:hover { color: var(--crvena); }
.kosarica__broj {
  position: absolute; top: -6px; left: 14px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--crvena); color: #fff;
  font-size: .72rem; font-weight: 800; border-radius: 10px;
}

/* ── Pojas kategorija ───────────────────────────────────────────────────── */
.navkat { background: var(--ploha); border-bottom: 1px solid var(--rub); position: relative; z-index: 20; }
.navkat__red { display: flex; align-items: stretch; gap: .35rem; }
.navkat__prekidac {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .9rem;
  background: var(--crna); color: #fff; padding: .85rem 1.2rem;
}
.navkat__prekidac .ikona { width: 18px; height: 18px; }

.navkat__popis {
  display: flex; margin: 0; padding: 0; list-style: none;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden;
}
.navkat__popis > li { flex: 0 0 auto; }

/* ── Pretinac „Sve kategorije" ──────────────────────────────────────────── */
.navkat__sve { position: relative; flex: 0 0 auto; }
.navkat__prekidac.je-otvoren { background: var(--crvena); }

.navkat__pretinac {
  position: absolute; top: 100%; left: 0; z-index: 60;
  width: min(92vw, 940px);
  background: var(--bijela); border: 1px solid var(--rub);
  box-shadow: 0 30px 60px -32px rgba(0,0,0,.6);
  padding: 1.25rem;
  max-height: min(72vh, 620px); overflow-y: auto;
}
.navkat__pretinac[hidden] { display: none; }

.navkat__stablo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem 1.75rem;
}
.navkat__grana { break-inside: avoid; }
.navkat__vrh {
  display: flex; align-items: baseline; gap: .4rem;
  font-weight: 800; font-size: .92rem; color: var(--tekst); text-decoration: none;
  padding-bottom: .35rem; margin-bottom: .4rem; border-bottom: 2px solid var(--crvena);
}
.navkat__vrh:hover { color: var(--crvena); }
.navkat__broj { margin-left: auto; font-weight: 600; font-size: .78rem; color: var(--prigusen); }
.navkat__grancice { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.navkat__grancice a { font-size: .86rem; color: var(--prigusen); text-decoration: none; }
.navkat__grancice a:hover { color: var(--crvena); }
.navkat__popis > li > a {
  display: block; padding: .85rem .9rem;
  font-size: .9rem; font-weight: 600; color: var(--tekst); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.navkat__popis > li > a:hover { color: var(--crvena); border-bottom-color: var(--crvena); }

/* Podizbornik: otvara se mirno, bez poskakivanja — pomak od 6px je dovoljan
   znak da je nesto doslo, a ne toliko da oko mora traziti gdje je stalo. */
.navkat__podpopis {
  position: absolute; top: 100%; left: auto; z-index: 40;
  min-width: 230px; margin: 0; padding: .4rem 0; list-style: none;
  background: var(--bijela); border: 1px solid var(--rub);
  box-shadow: 0 24px 40px -26px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.navkat__stavka { position: relative; }
.navkat__stavka:hover > .navkat__podpopis,
.navkat__stavka:focus-within > .navkat__podpopis { opacity: 1; visibility: visible; transform: translateY(0); }
.navkat__podpopis a { display: block; padding: .5rem 1rem; font-size: .88rem; color: var(--tekst); text-decoration: none; }
.navkat__podpopis a:hover { background: var(--ploha); color: var(--crvena); }

.navkat__akcije {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .85rem 1.2rem; margin-left: auto;
  background: var(--crvena); color: #fff;
  font-weight: 800; font-size: .9rem; text-decoration: none;
  transition: background var(--prijelaz);
}
.navkat__akcije:hover { background: var(--crvena-tamna); }

@media (max-width: 1100px) {
  .zaglavlje__red { grid-template-columns: auto auto; row-gap: .85rem; }
  .trazilica { grid-column: 1 / -1; order: 3; }
  .alat__tekst { display: none; }
  /* Na uskom zaslonu vodoravna traka otpada u cijelosti — sve ide kroz
     pretinac „Sve kategorije", koji ondje radi isto kao i na siroko. */
  .navkat__popis { display: none; }
  .navkat__pretinac { width: min(96vw, 520px); }
}

/* ══ POJAS POVJERENJA ════════════════════════════════════════════════════ */
.pojas { background: var(--ploha); border-block: 1px solid var(--rub); }
.pojas__red {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 2rem);
  padding-block: clamp(1.1rem, .8rem + 1vw, 1.75rem);
}
.pojas__stavka { display: flex; gap: .85rem; align-items: flex-start; }
.pojas__ikona { width: 28px; height: 28px; flex: 0 0 28px; color: var(--crvena); margin-top: .1rem; }
.pojas__stavka b { display: block; font-size: .95rem; }
.pojas__stavka span { font-size: .85rem; color: var(--prigusen); }

/* ══ IZDVOJENI PROIZVODI ═════════════════════════════════════════════════ */
.izdvojeno__vrh {
  display: flex; align-items: center; gap: 1rem 1.5rem;
  flex-wrap: wrap; margin-bottom: 1.5rem;
}
.izdvojeno__vrh .odsjek__naslov { margin: 0; }
.izdvojeno__kartice { display: flex; gap: .25rem; flex-wrap: wrap; }
.izdvojeno__kartica {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .92rem; color: var(--prigusen);
  padding: .45rem .9rem; border-bottom: 3px solid transparent;
  transition: color var(--prijelaz), border-color var(--prijelaz);
}
.izdvojeno__kartica:hover { color: var(--tekst); }
.izdvojeno__kartica.je-aktivna { color: var(--tekst); border-bottom-color: var(--crvena); }
.izdvojeno__sve {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .92rem; color: var(--crvena); text-decoration: none;
}
.izdvojeno__sve .ikona { width: 17px; height: 17px; transition: transform var(--prijelaz); }
.izdvojeno__sve:hover .ikona { transform: translateX(4px); }
.izdvojeno__popis[hidden] { display: none; }

/* ══ UGRADNJA I SERVIS ═══════════════════════════════════════════════════ */
.usluga { background: var(--crna); color: #fff; margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.usluga__red {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.usluga__naslov { margin: 0 0 .75rem; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
.usluga__opis { margin: 0 0 1.5rem; color: #c9ced3; max-width: 56ch; }
.usluga__podrucja { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.usluga__podrucja li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.usluga__podrucja .ikona { width: 18px; height: 18px; color: var(--crvena); flex: 0 0 18px; }

.gumb {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; font-weight: 800; text-decoration: none;
  border: 2px solid transparent; transition: background var(--prijelaz), color var(--prijelaz);
}
.gumb--glavni { background: var(--crvena); color: #fff; }
.gumb--glavni:hover { background: var(--crvena-tamna); color: #fff; }
.gumb .ikona { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .usluga__red { grid-template-columns: 1fr; }
}

/* ══ RJESENJA PO OBJEKTU ═════════════════════════════════════════════════ */
.objekti__popis {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, .7rem + 1vw, 1.75rem);
}
.objekt {
  padding: 1.6rem 1.5rem; background: var(--bijela);
  border: 1px solid var(--rub);
  transition: transform var(--prijelaz), box-shadow var(--prijelaz), border-color var(--prijelaz);
}
.objekt:hover { transform: translateY(-5px); border-color: var(--crna); box-shadow: 0 24px 40px -28px rgba(0,0,0,.55); }
.objekt__ikona { width: 34px; height: 34px; color: var(--crvena); margin-bottom: .9rem; }
.objekt__naslov { margin: 0 0 .4rem; font-size: 1.1rem; }
.objekt__tekst { margin: 0; color: var(--prigusen); font-size: .94rem; }

/* ══ PODNOZJE ════════════════════════════════════════════════════════════ */
.podnozje { background: var(--crna); color: #c9ced3; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.podnozje__mreza {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.podnozje__znak { margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 800; color: #fff; }
.podnozje__opis { margin: 0; font-size: .9rem; max-width: 34ch; }
.podnozje__naslov {
  margin: 0 0 1rem; font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: #fff;
}
.podnozje__popis { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.podnozje__popis a { color: #c9ced3; text-decoration: none; font-size: .92rem; }
.podnozje__popis a:hover { color: #fff; text-decoration: underline; }
.podnozje__popis--kontakt li { display: flex; align-items: center; gap: .55rem; }
.podnozje__popis--kontakt .ikona { width: 17px; height: 17px; color: var(--crvena); flex: 0 0 17px; }

.podnozje__dno { border-top: 1px solid rgba(255,255,255,.12); }
.podnozje__dno-red {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.1rem; font-size: .84rem;
}
.podnozje__pravo, .podnozje__pdv { margin: 0; }

/* ══ CLANCI ══════════════════════════════════════════════════════════════ */
.arhiva__zaglavlje { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.arhiva__naslov { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); margin: 0 0 .5rem; letter-spacing: -.02em; }
.arhiva__opis { color: var(--prigusen); max-width: var(--sirina-citanje); }

.clanci {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1rem, .7rem + 1.2vw, 2rem);
}
.clanak-kartica {
  background: var(--bijela); border: 1px solid var(--rub);
  transition: transform var(--prijelaz), box-shadow var(--prijelaz), border-color var(--prijelaz);
}
.clanak-kartica:hover { transform: translateY(-5px); border-color: var(--crna); box-shadow: 0 26px 44px -30px rgba(0,0,0,.6); }
.clanak-kartica__veza { display: grid; text-decoration: none; color: inherit; height: 100%; }
.clanak-kartica__slika { overflow: hidden; background: var(--ploha); aspect-ratio: 16 / 10; }
.clanak-kartica__slika img { width: 100%; height: 100%; object-fit: cover; transition: transform 460ms cubic-bezier(.2,.7,.3,1); }
.clanak-kartica:hover .clanak-kartica__slika img { transform: scale(1.05); }
.clanak-kartica__bez-slike { display: block; width: 100%; height: 100%; background: var(--ploha); }
.clanak-kartica__tijelo { padding: 1.1rem 1.25rem 1.4rem; display: grid; gap: .4rem; align-content: start; }
.clanak-kartica__datum { font-size: .8rem; color: var(--prigusen); }
.clanak-kartica__naslov { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.clanak-kartica__uvod { margin: 0; font-size: .92rem; color: var(--prigusen); }

.clanak__zaglavlje { margin-bottom: 1.5rem; }
.clanak__naslov {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .6rem;
  max-width: 24ch;
}
.clanak__meta { margin: 0; color: var(--prigusen); font-size: .9rem; }
.clanak__meta a { color: var(--crvena); text-decoration: none; }
.clanak__meta-razdjel { margin-inline: .35rem; }
.clanak__slika { margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.clanak__slika img { width: 100%; max-height: 60vh; object-fit: cover; }
.clanak__sadrzaj { max-width: var(--sirina-citanje); }
.clanak__sadrzaj h2 { font-size: 1.5rem; margin-top: 2rem; }
.clanak__sadrzaj h3 { font-size: 1.2rem; margin-top: 1.5rem; }
.clanak__sadrzaj img { height: auto; }
.clanak__sadrzaj a { color: var(--crvena); }

.navigation.pagination { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.navigation.pagination .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .6rem;
  border: 1px solid var(--rub); text-decoration: none; color: var(--tekst); font-weight: 700;
}
.navigation.pagination .page-numbers:hover { border-color: var(--crna); }
.navigation.pagination .page-numbers.current { background: var(--crvena); border-color: var(--crvena); color: #fff; }

/* ══ KOSARICA I BLAGAJNA ═════════════════════════════════════════════════ */
/*
   WooCommerceov zadani izgled kosarice je tablica iz 2013. Ovdje se ne
   preuzimaju njegovi predlosci — mijenja se samo izgled, pa svako njegovo
   azuriranje i dalje prolazi bez diranja teme.
*/
.woocommerce table.shop_table {
  border: 1px solid var(--rub); border-radius: 0; border-collapse: collapse; width: 100%;
}
.woocommerce table.shop_table th {
  background: var(--ploha); font-weight: 800; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .04em; padding: .9rem 1rem; text-align: left;
}
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--rub); vertical-align: middle; }
.woocommerce table.shop_table td.product-thumbnail img,
.woocommerce table.shop_table img {
  width: 72px; height: auto; max-width: none;
  border: 1px solid var(--rub); background: var(--bijela);
}
.woocommerce table.shop_table td.product-thumbnail { width: 90px; }

/* Kupon: polje i gumb u jednom redu, bez prelijevanja jednog preko drugog. */
.woocommerce table.shop_table td.actions { padding: 1rem; }
.woocommerce table.shop_table td.actions .coupon {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; float: none;
}
.woocommerce table.shop_table td.actions .coupon label { display: none; }
.woocommerce table.shop_table td.actions .coupon #coupon_code {
  width: auto; min-width: 190px; flex: 0 1 220px;
  padding: .75rem .8rem; border: 1px solid var(--rub); font: inherit;
}
.woocommerce table.shop_table td.actions > .button { float: right; }
.woocommerce table.shop_table .product-name a { color: var(--tekst); text-decoration: none; font-weight: 700; }
.woocommerce table.shop_table .product-name a:hover { color: var(--crvena); }
.woocommerce a.remove {
  color: var(--prigusen) !important; font-weight: 700; width: 1.4em; height: 1.4em; line-height: 1.3;
}
.woocommerce a.remove:hover { background: var(--crvena) !important; color: #fff !important; }

.woocommerce .quantity input.qty {
  width: 72px; padding: .55rem .4rem; border: 1px solid var(--rub); font: inherit; text-align: center;
}

/* Gumbi: jedan oblik kroz cijelu trgovinu, bez WooCommerceovih zaobljenih
   sivih pilula koje se nigdje drugdje na stranici ne pojavljuju. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button,
.woocommerce a.checkout-button.button.alt {
  background: var(--crvena); color: #fff; border-radius: 0;
  font-weight: 800; padding: .8rem 1.4rem; border: 0; font-size: .95rem;
  transition: background var(--prijelaz);
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover { background: var(--crvena-tamna); color: #fff; }

.woocommerce .cart-collaterals .cart_totals { border: 1px solid var(--rub); background: var(--ploha); padding: 1.5rem; }
.woocommerce .cart-collaterals .cart_totals h2 { margin-top: 0; font-size: 1.25rem; }
.woocommerce .cart-collaterals .checkout-button { display: block; text-align: center; }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register { border: 1px solid var(--rub); border-radius: 0; background: var(--ploha); padding: 1.5rem; }

.woocommerce form .form-row label { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  border: 1px solid var(--rub); border-radius: 0; padding: .7rem .8rem;
  font: inherit; background: var(--bijela); height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 0; border-color: var(--crna); }

#order_review, .woocommerce-checkout-review-order {
  border: 1px solid var(--rub); background: var(--ploha); padding: 1.5rem;
}
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--rub); padding: 0 0 1rem; }
.woocommerce-checkout #payment div.form-row { padding: 1rem 0 0; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0; border-left: 3px solid var(--crvena);
  background: var(--ploha); border-radius: 0; padding: 1rem 1.25rem;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }

@media (min-width: 992px) {
  .woocommerce-cart .woocommerce > .woocommerce-cart-form,
  .woocommerce-cart .woocommerce > .cart-collaterals { display: inline-block; vertical-align: top; }
}

/* ══ OPIS KATEGORIJE: „Prikaži više" ═════════════════════════════════════ */
/*
   Tekst je cijeli u HTML-u i samo je vizualno podrezan — podrezivanje radi
   `max-height`, ne `display:none`, pa trazilice i citaci zaslona vide sve.

   Sklapanje dodaje JavaScript (razred `je-sklopljen`), ne stilski list. Da je
   obrnuto, posjetitelj bez JavaScripta dobio bi odrezan tekst i gumb koji ne
   radi — gore nego dug tekst.
*/
.sklopivo {
  position: relative;
  max-width: var(--sirina-citanje);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.sklopivo__tekst > *:first-child { margin-top: 0; }
.sklopivo__tekst > *:last-child { margin-bottom: 0; }
.sklopivo__tekst a { color: var(--crvena); }

.js .sklopivo.je-sklopljen .sklopivo__tekst {
  position: relative;        /* sidro za prijelaz, da ne prekrije i gumb */
  max-height: var(--visina-sklopljeno, 9.5rem);
  overflow: hidden;
}

/* Prijelaz u nista: tekst iza ruba ne smije prestati naglo, inace izgleda kao
   da je stranica odrezana umjesto namjerno skupljena. */
.js .sklopivo.je-sklopljen .sklopivo__tekst::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3.5rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bijela) 85%);
  pointer-events: none;
}

.sklopivo__gumb {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .85rem; padding: .5rem 1rem;
  border: 1px solid var(--rub); background: var(--bijela);
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--tekst);
  cursor: pointer;
  transition: border-color var(--prijelaz), color var(--prijelaz);
}
.sklopivo__gumb:hover { border-color: var(--crna); color: var(--crvena); }
.sklopivo__gumb[hidden] { display: none; }

/* Strelica okrenuta prema dolje dok je sklopljeno, prema gore dok je otvoreno. */
.sklopivo__gumb::after {
  content: '';
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--prijelaz);
}
.sklopivo:not(.je-sklopljen) .sklopivo__gumb::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Samo jedna natpis odjednom. */
.sklopivo__manje { display: none; }
.sklopivo:not(.je-sklopljen) .sklopivo__vise { display: none; }
.sklopivo:not(.je-sklopljen) .sklopivo__manje { display: inline; }

/* Opis kategorije je uvod ispred mreze: cetiri retka su dovoljna da se vidi o
   cemu je rijec, a proizvodi ostaju iznad pregiba. */
.sklopivo--kategorija { --visina-sklopljeno: 9.5rem; }

/* Opis proizvoda je glavni sadrzaj stranice, ne uvod — dobiva vise prostora
   prije nego sto ga se skupi. */
.sklopivo--proizvod { --visina-sklopljeno: 22rem; max-width: none; }

/* Unutar kartice „Opis" blok ne smije dodati jos jedan razmak odozdo. */
.single-product .woocommerce-tabs .panel .sklopivo { margin-bottom: 0; }

/* ══ STATICKE STRANICE ═══════════════════════════════════════════════════ */
/*
   Uvjeti, kolacici, privatnost i slicni dokumenti dolaze s postojece stranice
   s vlastitim oblikovanjem iz urednika.
*/

/* Obostrano poravnanje je u HTML-u bez rastavljanja rijeci losa zamjena za
   uredno slaganje: izmedju rijeci nastaju rijeke bjeline, to vise sto je
   stupac uzi. Tekst se poravnava lijevo, kao i svugdje drugdje na stranici. */
.stranica__sadrzaj,
.stranica__sadrzaj p,
.stranica__sadrzaj li,
.stranica__sadrzaj div { text-align: left; }

/* Poravnanje je upisano u sam element (`<p style="text-align: justify">`), a
   takav zapis nadjacava svako pravilo iz lista. Zato se cilja bas te elemente
   i samo to svojstvo — `!important` je ovdje jedini nacin, ne precica. */
.stranica__sadrzaj [style*="text-align"] { text-align: left !important; }

.stranica__naslov {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 1.5rem;
}

/* Uvezene stranice krecu od h3 ili h4, ne od h2 — urednik na postojecoj
   stranici je tako slagao. Naslov odsjeka zato dobivaju h2 i h3 jednako. */
.stranica__sadrzaj h2,
.stranica__sadrzaj h3 {
  font-size: 1.35rem; margin: 2.25rem 0 .75rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--crvena);
}
.stranica__sadrzaj h2:first-child,
.stranica__sadrzaj h3:first-child { margin-top: 0; }
.stranica__sadrzaj h4 { font-size: 1.08rem; margin: 1.6rem 0 .5rem; }
.stranica__sadrzaj p { margin: 0 0 1rem; }
.stranica__sadrzaj ul,
.stranica__sadrzaj ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.stranica__sadrzaj li { margin-bottom: .4rem; }
.stranica__sadrzaj a { color: var(--crvena); }

/* Tablice iz urednika znaju biti sire od stupca; neka klize umjesto da
   razvuku cijelu stranicu i naprave vodoravno listanje. */
.stranica__sadrzaj table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; display: block; overflow-x: auto; }
.stranica__sadrzaj th,
.stranica__sadrzaj td { border: 1px solid var(--rub); padding: .6rem .8rem; text-align: left; }
.stranica__sadrzaj th { background: var(--ploha); font-weight: 700; }

.stranica__sadrzaj img { height: auto; max-width: 100%; }

/* Razdjelnici iz uvezenog sadrzaja: tanka crta, ne debela siva traka. */
.stranica__sadrzaj hr { border: 0; border-top: 1px solid var(--rub); margin: 1.75rem 0; }

/* ══ MARKE ═══════════════════════════════════════════════════════════════ */

/* Zaglavlje pojedine marke: logotip uz opis, iznad mreze proizvoda. */
.marka-zaglavlje {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: start;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--ploha);
  border-left: 3px solid var(--crvena);
}
.marka-zaglavlje__znak {
  display: grid; place-items: center;
  background: var(--bijela); border: 1px solid var(--rub);
  padding: 1rem; min-height: 110px;
}
.marka-zaglavlje__logo { max-width: 100%; height: auto; object-fit: contain; }
.marka-zaglavlje__broj {
  margin: 0 0 .6rem; font-weight: 800; font-size: .85rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--prigusen);
}
.sklopivo--marka { --visina-sklopljeno: 7.5rem; max-width: var(--sirina-citanje); }

/* Prijelaz na kraju skupljenog teksta mora biti u boji plohe na kojoj lezi,
   inace se vidi bijeli pravokutnik preko sive pozadine. */
.js .sklopivo--marka.je-sklopljen .sklopivo__tekst::after {
  background: linear-gradient(to bottom, rgba(242,244,245,0), var(--ploha) 85%);
}
.sklopivo--marka .sklopivo__gumb { background: var(--bijela); }

@media (max-width: 720px) {
  .marka-zaglavlje { grid-template-columns: 1fr; }
}

/* ── Raskrsnica: sve marke ─────────────────────────────────────────────── */
.marke-mreza {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  perspective: 1200px;
}
.marka-kartica { transform-style: preserve-3d; }
.marka-kartica__veza {
  display: grid; gap: .6rem; height: 100%;
  padding: 1.25rem 1rem; text-decoration: none; color: inherit;
  background: var(--bijela); border: 1px solid var(--rub);
  transition: transform var(--prijelaz), border-color var(--prijelaz), box-shadow var(--prijelaz);
}
.marka-kartica__veza:hover {
  transform: translateZ(26px) translateY(-4px);
  border-color: var(--crna);
  box-shadow: 0 24px 40px -28px rgba(0,0,0,.55);
}
.marka-kartica__znak {
  display: grid; place-items: center;
  min-height: 72px;
}
.marka-kartica__znak img { max-width: 100%; max-height: 72px; height: auto; object-fit: contain; }

/* Marka bez logotipa: ime slozeno kao znak, da red ostane ravan. */
.marka-kartica__ime {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
  text-align: center; line-height: 1.2; color: var(--tekst);
}
.marka-kartica__broj { font-size: .82rem; color: var(--prigusen); text-align: center; }

/* Naslov odsjeka s poveznicom „sve" — isti obrazac kao kod izdvojenih. */
.odsjek__vrh {
  display: flex; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.odsjek__vrh .odsjek__naslov { margin: 0; }
.odsjek__sve {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .92rem; color: var(--crvena); text-decoration: none;
}
.odsjek__sve .ikona { width: 17px; height: 17px; transition: transform var(--prijelaz); }
.odsjek__sve:hover .ikona { transform: translateX(4px); }

/* ── Staticke stranice: tekst se poravnava s ostatkom stranice ─────────── */
/*
   Spremnik je sada pun, kao i svugdje drugdje, pa naslov i tekst pocinju na
   istoj liniji kao zaglavlje i trgovina. Duljina retka se i dalje drzi na
   uzdi — ali to radi `max-width` na tekstu, ne suzavanje cijele stranice.
*/
.stranica__naslov,
.stranica__sadrzaj { margin-inline: 0; }

/* Marka bez logotipa: jedan stupac. Inace tekst zavrsi u uskom stupcu koji je
   bio predvidjen za znak, pa se lomi na svakih par rijeci. */
.marka-zaglavlje--bez-znaka { grid-template-columns: 1fr; }

/* ── Staticke stranice na vrlo sirokom zaslonu ─────────────────────────── */
/*
   Stranica zauzima punu sirinu, ali redak od 1800 piksela oko ne moze
   pratiti: dok stigne do kraja retka, izgubi pocetak sljedeceg. Zato se od
   1500px nadalje sam tekst slaze u dva stupca — sirina ostaje puna, a redak
   se vraca na citljivu mjeru.

   Naslovi, tablice i slike ostaju preko obje: stupci bi ih presjekli na pola.
*/
@media (min-width: 1500px) {
  .stranica__sadrzaj {
    columns: 2;
    column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    column-rule: 1px solid var(--rub);
  }
  .stranica__sadrzaj > h2,
  .stranica__sadrzaj > h3,
  .stranica__sadrzaj > table,
  .stranica__sadrzaj > figure,
  .stranica__sadrzaj > img { column-span: all; }

  /* Odlomak se ne smije prelomiti preko dva stupca — pola recenice dolje
     lijevo, pola gore desno je gore nego dug redak. */
  .stranica__sadrzaj p,
  .stranica__sadrzaj li,
  .stranica__sadrzaj ul,
  .stranica__sadrzaj ol { break-inside: avoid; }

  .stranica__sadrzaj > h2:first-child,
  .stranica__sadrzaj > h3:first-child { margin-top: 0; }
}

/* ── Logotip ─────────────────────────────────────────────────────────────── */
/*
   `the_custom_logo()` ispisuje <a class="custom-logo-link"><img class="custom-logo">.
   Visina se zadaje, sirina se racuna — logotip je vodoravan natpis, pa ga
   kvadratni okvir ili zadana sirina izobliче.
*/
.zaglavlje__znak .custom-logo-link { display: inline-block; line-height: 0; }
.zaglavlje__znak .custom-logo {
  display: block;
  width: auto;
  height: clamp(38px, 2.4vw, 52px);
  max-width: min(100%, 320px);
  object-fit: contain;
}