/* Prototip ima `*{box-sizing:border-box}` kao prvo pravilo. Bez toga svaki
   kontejner s `max-width:1320px` i `padding:40px` bude 1400px širok, pa je
   cijeli sajt izgledao 80px preširoko, „kao zumiran". */
*, *::before, *::after { box-sizing: border-box; }

/* Artefakt na <body> ima `-webkit-font-smoothing: antialiased`, tema nije imala
   ništa. Razlika se ne vidi ni u jednoj mjeri po geometriji — slovo je na istom
   mjestu i jednako široko — ali se vidi u pikselima: alati/piksel-sekcije.mjs je
   na ekranu dt našao 316.414 različitih piksela, a nakon ovoga ih je 145.261,
   pri čemu 10 od 11 sekcija padne s ~2,5 % na ~0,1 %. Bez ovoga je tekst na
   stagingu deblji nego u dizajnu (izmjereno na riječi „Često": 1.402 naspram
   1.287 obojenih piksela). Vrijedi samo na macOS-u; drugdje je bez učinka.
   Artefakt nema `-moz-osx-font-smoothing`, pa ga nema ni ovdje. */
body { -webkit-font-smoothing: antialiased; }

/* =====================================================================
   CEE — stilski primitivi (handoff pogl. 4)
   Pravila: maks. 2 podloge po stranici; nema radiusa osim 2–3px na
   pillovima/badgeima; nema sjena osim kartice kalkulatora; kicker na
   gradientu je bijel, nikad zelen na zelenom.
   ===================================================================== */

:root {
  --cee-grad: linear-gradient(135deg, #6C9D36 0%, #007342 100%);
  --cee-grad-hover: linear-gradient(135deg, #5C8A2C 0%, #005C36 100%);
  --cee-green: #007342;
  --cee-green-hover: #005C36;
  --cee-green-light: #6C9D36;
  --cee-base: #FFFFFF;
  --cee-panel: #F1F4EC;
  --cee-ink: #172115;
  --cee-ink-muted: #5C6157;
  --cee-hairline: rgba(23, 33, 21, .12);
  --cee-hairline-strong: rgba(23, 33, 21, .28);
  --cee-on-green: #FFFFFF;
  --cee-on-green-muted: rgba(255, 255, 255, .82);
  /* crta na gradijentu (podnozje, iznad copyrighta) — izmjereno na artefaktu */
  --cee-on-green-hairline: rgba(255, 255, 255, .28);
  --cee-font-heading: var(--wp--preset--font-family--heading);
  --cee-font-body: var(--wp--preset--font-family--body);
}

/* ---------------------------------------------------------------------
   1. GUMBI — 4 varijante × 3 veličine (block styles, inc/block-styles.php)
   --------------------------------------------------------------------- */

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent; /* ispunjeni i obrubljeni iste visine */
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-family: var(--cee-font-heading);
  font-size: 13px;
  padding: 15px 26px; /* md default */
  transition: background .2s, border-color .2s, color .2s;
  text-decoration: none;
}
.wp-block-button__link:hover { text-decoration: none; }

/* veličine */
.wp-block-button.is-size-lg .wp-block-button__link { padding: 16px 28px; font-size: 13.5px; }
.wp-block-button.is-size-sm .wp-block-button__link { padding: 11px 18px; font-size: 12px; }

/* primary-light — na bijelom: gradient fill, bijeli tekst */
.wp-block-button.is-style-primary-light .wp-block-button__link {
  background: var(--cee-grad);
  color: #FFFFFF;
}
.wp-block-button.is-style-primary-light .wp-block-button__link:hover {
  background: var(--cee-grad-hover);
  color: #FFFFFF;
}

/* secondary-light — na bijelom: transparent, hairline-strong okvir */
.wp-block-button.is-style-secondary-light .wp-block-button__link {
  background: transparent;
  border-color: var(--cee-hairline-strong);
  color: var(--cee-ink);
}
.wp-block-button.is-style-secondary-light .wp-block-button__link:hover {
  border-color: var(--cee-green);
  background: rgba(0, 115, 66, .06);
  color: var(--cee-ink);
}

/* primary-green — na gradientu: bijeli fill, zeleni tekst */
.wp-block-button.is-style-primary-green .wp-block-button__link {
  background: #FFFFFF;
  color: var(--cee-green);
}
.wp-block-button.is-style-primary-green .wp-block-button__link:hover {
  background: var(--cee-panel);
  color: var(--cee-green);
}

/* secondary-green — na gradientu: transparent, bijeli okvir */
.wp-block-button.is-style-secondary-green .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #FFFFFF;
}
.wp-block-button.is-style-secondary-green .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
}

/* Tekstualni link — treća razina, nije gumb */
.cee-textlink {
  font-family: var(--cee-font-heading);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .06em;
  font-weight: 500;
  color: var(--cee-green);
  border-bottom: 1px solid var(--cee-green);
  padding-bottom: 4px;
  text-decoration: none;
}
.cee-textlink:hover { color: var(--cee-green-hover); border-color: var(--cee-green-hover); text-decoration: none; }
.cee-textlink--white { color: #FFFFFF; border-color: rgba(255,255,255,.7); }
.cee-textlink--white:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* ---------------------------------------------------------------------
   2. KICKER
   --------------------------------------------------------------------- */

/* prototip: sekcijski kicker 11.5px/.14em, hero naslovnice 12px/.16em */
.cee-kicker {
  font-family: var(--cee-font-heading);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cee-green);
  margin: 0 0 22px;
}
.cee-kicker--hero { font-size: 12px; letter-spacing: .16em; }
.has-green-gradient-background .cee-kicker,
.cee-on-gradient .cee-kicker { color: #FFFFFF; } /* nikad zelena na zelenom */

/* ---------------------------------------------------------------------
   3. HAIRLINE TABLICA (specifikacije, cjenovnici)
   --------------------------------------------------------------------- */

.cee-specs { width: 100%; border-collapse: collapse; }
.cee-specs td, .cee-specs th { border-bottom: 1px solid rgba(23, 33, 21, .14); }
/* Artefakt drži vrijednosti 12px odmaknute od ruba ćelije, ne uz sam rub. */
/* Artefakt nema desni padding na desno poravnatim celijama (prebrojano: 12px 0 x32,
   16px 0 x1, 13px 0 x1, nijedna s padding-right). Vraceno na stanje prije sesije. */
.cee-specs th { text-align: left; font-weight: 500; color: var(--cee-ink); font-size: 14.5px; padding: 12px 0; }
.cee-specs td { text-align: right; font-weight: 600; font-size: 14.5px; padding: 12px 0; }
.cee-specs tr:last-child td, .cee-specs tr:last-child th { border-bottom: 0; }

/* ---------------------------------------------------------------------
   4. TOPBAR + HEADER + MEGA MENI (prototip v4)
   --------------------------------------------------------------------- */

.cee-topbar { background: var(--cee-panel); border-bottom: 1px solid rgba(23,33,21,.1); }
.cee-topbar__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 8px clamp(20px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  font-size: 12.5px; color: var(--cee-ink-muted);
}
.cee-topbar__inner > a { color: var(--cee-ink-muted); text-decoration: none; }
.cee-topbar__inner > a:hover { color: var(--cee-green); }
.cee-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cee-topbar__tel { color: var(--cee-green); font-weight: 600; text-decoration: none; }

.cee-header { position: sticky; top: 0; z-index: 70; background: #FFFFFF; border-bottom: 1px solid var(--cee-hairline); }
.cee-header__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 14px clamp(20px, 3vw, 40px);
  /* SEDMA razlika, nadena usput a nije bila prijavljena: razmak logo–navigacija.
     Izmjereno na artefaktu pri 1920/1600/1440/1280/1200/1100 px:
     22 · 22 · 20.16 · 17.92 · 16.8 · 15.4  =  clamp(14px, 1.4vw, 22px).
     Staging je imao clamp(14px, 2vw, 28px) i navigacija je stajala 6px predesno. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(14px, 1.4vw, 22px);
}
.cee-header__logo { display: flex; align-items: center; flex: none; }
.cee-header__logo img { height: 26px; width: auto; display: block; }

.cee-nav__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
/* Izmjereno na artefaktu pri 1920 (alati/shell.mjs), ne po starom prototipu v4:
   padding je 9px sa svih strana (ne 9px 12px), razmak medu stavkama 2px (ne 4px),
   a strelica se odvaja OBICNIM RAZMAKOM iz markupa (3.44px), ne flex gapom od 5px.
   Zato <a> ide na display:block u flex <li>: inline-flex bi razmak progutao.
   line-height: normal je nuzan — bez njega stavka naslijedi 1.5 i visina zaglavlja
   naraste s 65 na 68.5px, pa se crta ispod zaglavlja spusti na svih 43 stranice. */
.cee-nav__list > li { display: flex; }
.cee-nav__list > li > a {
  display: block; white-space: nowrap;
  font-family: var(--cee-font-heading); font-size: 13px; font-weight: 500;
  line-height: normal;
  color: var(--cee-ink); text-decoration: none;
  padding: 9px; border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
}
.cee-nav__list > li > a span { font-size: 9px; color: var(--cee-ink-muted); }
.cee-nav__list > li > a:hover,
.cee-nav__list > li > a[aria-current="true"],
.cee-nav__list > li > a[aria-expanded="true"] {
  color: var(--cee-green); border-color: rgba(0, 115, 66, .35);
  background: rgba(0, 115, 66, .06); font-weight: 600;
}
.cee-nav__list > li > a:hover span,
.cee-nav__list > li > a[aria-current="true"] span,
.cee-nav__list > li > a[aria-expanded="true"] span { color: var(--cee-green); }

.cee-header__icons { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cee-header__icons a { display: flex; color: var(--cee-ink); }
.cee-header__icons a:hover { color: var(--cee-green); }

/* mega panel — 2 kolone (1.35fr / .65fr) po v4 */
.cee-mega { position: static; }
.cee-mega__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #FFFFFF;
  border-top: 1px solid var(--cee-hairline);
  border-bottom: 1px solid rgba(23,33,21,.14);
  box-shadow: 0 18px 40px -24px rgba(23,33,21,.4);
  display: none;
  z-index: 60;
}
.cee-mega.is-open .cee-mega__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(32px, 4vw, 64px);
  max-width: 1320px; margin: 0 auto;
  padding: clamp(26px, 3vw, 40px) clamp(20px, 3vw, 40px);
}
.cee-mega__kicker {
  grid-column: 1 / -1;
  margin: 0 0 14px;
  font-family: var(--cee-font-heading); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cee-green);
}
.cee-mega__left { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 28px; align-content: start; }
.cee-mega__left a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid rgba(23,33,21,.1);
  font-size: 15px; color: var(--cee-ink); text-decoration: none;
}
.cee-mega__left a span { margin-left: auto; color: var(--cee-green); }
.cee-mega__left a:hover { color: var(--cee-green); }

.cee-mega__right { background: var(--cee-panel); padding: 24px; align-self: start; }
.cee-mega__div {
  margin: 0 0 2px; font-family: var(--cee-font-heading);
  font-size: 16px; font-weight: 600; color: var(--cee-ink);
}
.cee-mega__adr { margin: 0 0 16px; font-size: 13px; color: var(--cee-ink-muted); }
.cee-mega__right ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cee-mega__right a { font-size: 14.5px; color: var(--cee-ink); text-decoration: none; }
.cee-mega__right a:hover { color: var(--cee-green); }
.cee-mega__cta {
  display: inline-block;
  font-family: var(--cee-font-heading); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cee-green); border-bottom: 1px solid var(--cee-green);
  padding-bottom: 4px; text-decoration: none;
}

/* mobile off-canvas */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cee-nav-toggle, .cee-offcanvas { display: none; }
@media (max-width: 1099px) {
  .cee-nav, .cee-topbar__adrese { display: none; }

  /* Zaglavlje u jednom redu: logo lijevo, pretraga · Trgovina · izbornik desno.
     Prije je flex-wrap gurao gumbe u drugi red (logo + ikone ~400 px na 350). */
  .cee-header__inner { flex-wrap: nowrap; padding-block: 10px; gap: 12px; }
  .cee-header__icons { gap: 6px; }
  .cee-header__icons > a:first-child { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .cee-trgovina { padding: 10px 12px; font-size: 12px; gap: 7px; }

  .cee-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin-right: -10px;
    background: none; border: 0; color: var(--cee-ink); cursor: pointer;
  }

  .cee-offcanvas {
    position: fixed; inset: 0; z-index: 100; background: #FFFFFF;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .25s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .cee-offcanvas[hidden] { display: none; }
  .cee-offcanvas.is-open { transform: translateX(0); }

  .cee-offcanvas__glava {
    position: sticky; top: 0; z-index: 1; background: #FFFFFF;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--cee-hairline);
  }
  .cee-offcanvas__logo img { height: 24px; width: auto; display: block; }
  .cee-offcanvas__close {
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--cee-ink); cursor: pointer;
  }

  .cee-offcanvas__tijelo { flex: 1; padding: 6px clamp(20px, 3vw, 40px) 8px; }
  .cee-offcanvas details { border-bottom: 1px solid var(--cee-hairline); }
  .cee-offcanvas summary {
    font-family: var(--cee-font-heading); font-weight: 600; font-size: 17px; line-height: 1.25;
    min-height: 56px; padding: 0; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .cee-offcanvas summary::-webkit-details-marker { display: none; }
  .cee-offcanvas summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
    border-right: 1.8px solid var(--cee-green); border-bottom: 1.8px solid var(--cee-green);
    transform: translateY(-3px) rotate(45deg); transition: transform .2s;
  }
  .cee-offcanvas details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .cee-offcanvas details ul {
    list-style: none; margin: 0 0 14px; padding: 4px 0 4px 14px;
    border-left: 2px solid var(--cee-panel); display: flex; flex-direction: column;
  }
  .cee-offcanvas details ul a {
    display: block; padding: 9px 0; font-size: 15px; line-height: 1.35;
    color: var(--cee-ink); text-decoration: none;
  }
  .cee-offcanvas details ul a:hover { color: var(--cee-green); }

  .cee-offcanvas__utils {
    list-style: none; margin: 0; padding: 18px 0 6px !important;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px;
  }
  .cee-offcanvas__utils a {
    display: block; padding: 8px 0; font-size: 14.5px; line-height: 1.35;
    color: var(--cee-ink-muted); text-decoration: none;
  }

  /* Trgovina i telefon su najčešće radnje — uvijek vidljivi na dnu izbornika. */
  .cee-offcanvas__dno {
    position: sticky; bottom: 0;
    padding: 12px clamp(20px, 3vw, 40px) calc(12px + env(safe-area-inset-bottom));
    background: #FFFFFF; border-top: 1px solid var(--cee-hairline);
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .cee-offcanvas__trgovina, .cee-offcanvas__tel {
    justify-content: center; min-height: 48px; font-size: 13px;
  }
  .cee-offcanvas__tel {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--cee-hairline-strong); background: #FFFFFF;
    font-family: var(--cee-font-heading); font-weight: 700; letter-spacing: .02em;
    color: var(--cee-ink); text-decoration: none; white-space: nowrap;
  }
  .cee-offcanvas__adrese {
    margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid var(--cee-hairline);
    font-size: 13px; line-height: 1.7; color: var(--cee-ink-muted);
  }
  .cee-offcanvas__adrese strong { color: var(--cee-ink); font-weight: 600; margin-right: 4px; }
}
@media (max-width: 760px) {
  /* Gornja traka: njeni linkovi i telefon su u izborniku; na mobitelu se lomila u dva reda. */
  .cee-topbar { display: none; }
}
@media (max-width: 360px) {
  .cee-trgovina__tekst { display: none; }
  .cee-trgovina { padding: 10px; }
}

/* ---------------------------------------------------------------------
   5. FOOTER (gradient)
   --------------------------------------------------------------------- */

.cee-footer { background: var(--cee-grad); color: #FFFFFF; }
.cee-footer a { color: #FFFFFF; text-decoration: none; }
.cee-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.cee-footer__grid {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(40px, 4.4vw, 64px) clamp(20px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
/* line-height: normal na sva tri mjesta — inace se naslijedi 1.5 i podnozje
   naraste s 384 na 420px na svih 43 stranice. Myriad Pro ima normal ~1.24:
   naslov 11.5px -> 15px, stavka 14.5px -> 18px (izmjereno na artefaktu). */
.cee-footer__naslov {
  font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .14em;
  line-height: normal;
  text-transform: uppercase; color: #FFFFFF; font-weight: 500; margin: 0 0 14px;
}
.cee-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
/* Mora ciljati sam <li>: nize u datoteci stoji `li { line-height: 1.5 }`, a to
   je pravilo NA li, pa nasljedivanje s <ul> nema sanse. Prvi pokusaj sa
   line-height na .cee-footer ul nije promijenio nista — izmjereno 21.75px. */
.cee-footer ul li { line-height: normal; }
/* RIJEŠENO alatom shell.mjs: artefakt ima margin-bottom 14px, staging je imao 16.
   Raniji nalaz kutija.mjs je oscilirao jer uparuje dva različita artefaktova
   elementa; ovdje se mjeri imenovani element (<p> s "Čakovec") pa je jednoznačno. */
.cee-footer__lokacija {
  font-size: 14.5px; line-height: 1.6; color: var(--cee-on-green-muted); margin: 0 0 14px; max-width: none;
}
.cee-footer__lokacija strong { color: #FFFFFF; font-weight: 600; }
.cee-footer__lokacija a { color: inherit; }
.cee-footer__newsletter { display: flex; border: 1px solid rgba(255, 255, 255, .7); }
.cee-footer__newsletter input {
  flex: 1; border: 0; background: none; padding: 12px 14px; font-size: 14px;
  font-family: var(--cee-font-body); color: #FFFFFF; outline: none; min-width: 0;
}
.cee-footer__newsletter input::placeholder { color: rgba(255, 255, 255, .78); opacity: 1; }
.cee-footer__newsletter button {
  background: #FFFFFF; color: var(--cee-green); border: 0; cursor: pointer;
  padding: 12px 16px; font-family: var(--cee-font-heading); font-size: 12.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* Crte iznad copyrighta NIJE BILO ni na jednoj od 43 stranice: pisalo je
   var(--cee-on-green-hairline-strong), a taj token nije nigdje definiran, pa je
   cijela deklaracija bila nevaljana u trenutku racunanja i border-top je pao na
   pocetnu vrijednost — izmjereno "0px none". Vrijednost je vracena na onu koju
   artefakt stvarno prikazuje, rgba(255,255,255,.28), i token je definiran. */
.cee-footer__legal {
  border-top: 1px solid var(--cee-on-green-hairline);
}
.cee-footer__legal-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 18px clamp(20px, 3vw, 40px);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  font-size: 12.5px; color: var(--cee-on-green-muted);
}
@media (max-width: 1023px) { .cee-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .cee-footer__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   6. FORME
   --------------------------------------------------------------------- */

.cee-form input[type="text"],
.cee-form input[type="email"],
.cee-form input[type="tel"],
.cee-form input[type="number"],
.cee-form input[type="date"],
.cee-form select,
.cee-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--cee-hairline-strong);
  border-radius: 0;
  font-family: var(--cee-font-body);
  font-size: 15px;
  color: var(--cee-ink);
  padding: 13px 14px;
}
.cee-form ::placeholder { color: rgba(23, 33, 21, .55); }
.cee-form input:focus, .cee-form select:focus, .cee-form textarea:focus {
  outline: none; border-color: var(--cee-green);
  box-shadow: 0 0 0 3px rgba(0, 115, 66, .12);
}
.cee-on-gradient .cee-form input,
.cee-on-gradient .cee-form textarea {
  border-color: rgba(255, 255, 255, .7); color: #FFFFFF;
}
.cee-on-gradient .cee-form ::placeholder { color: rgba(255, 255, 255, .78); }

/* Klizac u GENERIRANOM sadrzaju NEMA vise rucnu zakrpu.
   Bio je Chromeov plavi default jer generator nije vidio pseudo-elemente
   (nemaju inline nositelja); zakrpa je stajala ovdje od commita cec73a5.
   Otkad alati/gen-klase.mjs emitira pseudo-pravila, klizac dolazi iz
   artefakta kao `.cee-p-<hash>::-webkit-slider-runnable-track` i
   `::-webkit-slider-thumb` u cee-generirano.css. Zakrpa je obrisana da se
   dvije istine ne natjecu (zakrpa je imala box-shadow 6px i margin-top
   -8.5px, artefakt ima 5px i -9px — pobjedjivala je zakrpa, jer je
   `.cee-gen input[type=range]::…` (0,2,1) jace od `.cee-p-…::…` (0,1,1)).
   Artefakt nema `::-moz-range-*`, pa ni generirani CSS nema: u Firefoxu je
   klizac na generiranim stranicama nativan. Zabiljezeno, nije zakrpano —
   izvor istine se ne dopunjava rucno. */

/* slider */
.cee-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--cee-hairline-strong); outline: none; color: var(--cee-ink); }
.cee-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cee-green); cursor: pointer;
  box-shadow: 0 0 0 6px rgba(0, 115, 66, .14);
}
.cee-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--cee-green); cursor: pointer;
  box-shadow: 0 0 0 6px rgba(0, 115, 66, .14);
}
.cee-range:focus-visible { outline: 2px solid var(--cee-green); outline-offset: 8px; }

/* ---------------------------------------------------------------------
   7. KALKULATOR (bijela kartica na gradientu)
   --------------------------------------------------------------------- */

.cee-calc {
  background: #FFFFFF;
  box-shadow: var(--wp--preset--shadow--card, 0 24px 60px -30px rgba(23,33,21,.45));
  padding: 32px 34px 30px;
  color: var(--cee-ink);
}
.cee-calc__seg { display: flex; border: 1px solid var(--cee-hairline-strong); margin-bottom: 8px; }
.cee-calc__seg + .cee-calc__seg { margin-bottom: 24px; }
.cee-calc__seg button {
  flex: 1; background: none; border: none; cursor: pointer;
  font-family: var(--cee-font-heading); font-size: 12.5px; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cee-ink-muted);
  padding: 12px 10px; transition: background .15s, color .15s;
}
.cee-calc__seg button[aria-pressed="true"] { background: var(--cee-green); color: #FFFFFF; }
.cee-calc__value { font-family: var(--cee-font-heading); font-size: 38px; font-weight: 600; letter-spacing: -.02em; line-height: 1; margin: 18px 0 10px; }
.cee-calc__value small { font-size: 15px; font-weight: 500; color: var(--cee-ink-muted); letter-spacing: 0; }
.cee-calc__minmax { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--cee-ink-muted); margin: 8px 0 22px; }
.cee-calc__grid { display: grid; grid-template-columns: 1fr 1fr; }
.cee-calc__cell { padding: 14px 0; border-top: 1px solid var(--cee-hairline); }
.cee-calc__cell:nth-child(odd) { padding-right: 18px; }
.cee-calc__cell:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--cee-hairline); }
.cee-calc__cell dt { font-size: 12.5px; color: var(--cee-ink-muted); margin: 0 0 4px; }
.cee-calc__cell dd { font-family: var(--cee-font-heading); font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.cee-calc__cell.is-green dd { color: var(--cee-green); }
.cee-calc__note { font-size: 12px; line-height: 1.6; color: var(--cee-ink-muted); margin: 20px 0 0; }

/* ---------------------------------------------------------------------
   8. SEKCIJSKI POMOĆNICI
   --------------------------------------------------------------------- */

.cee-band-gradient { background: var(--cee-grad); color: #FFFFFF; }
.cee-band-gradient h1, .cee-band-gradient h2, .cee-band-gradient h3 { color: #FFFFFF; }
.cee-band-gradient p { color: var(--cee-on-green-muted); }
.cee-band-panel { background: var(--cee-panel); }

.cee-hairline-top { border-top: 1px solid var(--cee-hairline); }
.cee-hairline-box { border: 1px solid var(--cee-hairline-strong); }

/* brojke-traka */
.cee-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--cee-hairline); border-bottom: 1px solid var(--cee-hairline); }
.cee-stats__item { padding: 26px 24px; border-left: 1px solid var(--cee-hairline); }
.cee-stats__item:first-child { border-left: 0; }
.cee-stats__item .num {
  font-family: var(--cee-font-heading); font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--cee-green);
}
.cee-stats__item .lbl {
  font-family: var(--cee-font-heading); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cee-ink-muted); margin-top: 8px;
}
@media (max-width: 767px) {
  .cee-stats { grid-template-columns: 1fr 1fr; }
  .cee-stats__item:nth-child(3) { border-left: 0; }
  .cee-stats__item { border-top: 1px solid var(--cee-hairline); }
  .cee-stats__item:nth-child(-n+2) { border-top: 0; }
}

/* FAQ */
.cee-faq {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 clamp(32px, 4vw, 64px);
}
.cee-faq details { border-top: 1px solid rgba(23, 33, 21, .14); }
.cee-faq summary {
  font-family: var(--cee-font-heading); font-weight: 500; font-size: 17px;
  padding: 18px 0; cursor: pointer; list-style: none;
}
.cee-faq summary::-webkit-details-marker { display: none; }
.cee-faq details > div { margin: 0; padding: 0 0 18px; font-size: 15.5px; line-height: 1.7; color: var(--cee-ink-muted); max-width: 70ch; }

/* breadcrumb */
.cee-breadcrumb { font-size: 13px; color: var(--cee-ink-muted); padding: 18px 0 0; }
.cee-breadcrumb a { color: var(--cee-ink-muted); text-decoration: none; }
.cee-breadcrumb a:hover { color: var(--cee-green); }
.cee-breadcrumb .sep { margin: 0 8px; color: var(--cee-hairline-strong); }

/* badge (webshop) */
.cee-badge {
  display: inline-block; font-family: var(--cee-font-heading);
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  /* `normal`, ne naslijeđeno 1 — izmjereno 29 pojava (08.10.2026.). */
  line-height: normal;
  padding: 5px 10px; border-radius: 0;
}
.cee-badge--stock { background: #FFFFFF; color: var(--cee-green); }
.cee-badge--order { background: #FFFFFF; color: var(--cee-green); }

/* fokus (WCAG) */
:focus-visible { outline: 2px solid var(--cee-green); outline-offset: 2px; }
.cee-band-gradient :focus-visible, .cee-footer :focus-visible { outline-color: #FFFFFF; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cee-green); color: #FFF; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------
   9. NASLOVNICA — dvije zgrade, Green Therm, webshop, savjeti (v4)
   --------------------------------------------------------------------- */

.cee-zgrade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 20px;
}
/* WP-ov layout gasi margine izravnoj djeci, pa treba jači selektor */
.wp-block-group > .cee-zgrade { margin-block-start: clamp(56px, 6vw, 88px); }

.cee-zgrada { display: flex; flex-direction: column; }
.cee-zgrada--gradient { background: var(--cee-grad); color: #FFFFFF; }
.cee-zgrada--gradient h2 { color: #FFFFFF; }
.cee-zgrada--gradient .cee-kicker { color: #FFFFFF; }
.cee-zgrada--white { background: #FFFFFF; border: 1px solid var(--cee-hairline-strong); }

/* Gornja ploča, oznaka poravnata na dno. Artefakt je imao fiksnih 220 px, a
   to je uz kratku oznaku ostavljalo previše praznog iznad naslova (Davor,
   16. 10.). Sada je najmanja visina i prati širinu, pa ploča ostaje traka, a
   ne blok. `min-height` zato da oznaka u dva retka i dalje ima mjesta. */
.cee-zgrada__tag {
  min-height: clamp(120px, 11vw, 160px); min-width: 0; padding: 24px 26px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.cee-zgrada__tag--dark {
  background: var(--cee-panel); border-bottom: 1px solid var(--cee-hairline);
}
.cee-zgrada__tag-main {
  font-family: var(--cee-font-heading);
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.1;
}
.cee-zgrada__tag-sub {
  margin-top: 6px; font-family: var(--cee-font-heading); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.cee-zgrada__tag--dark .cee-zgrada__tag-sub { color: var(--cee-ink-muted); }

.cee-zgrada__body {
  padding: clamp(28px, 3.2vw, 40px);
  flex: 1; display: flex; flex-direction: column;
}
.cee-zgrada__body h2 { margin: 0 0 14px; }
.cee-zgrada__body > p:not(.cee-kicker) { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; max-width: 44ch; }
.cee-zgrada--white .cee-zgrada__body > p:not(.cee-kicker) { color: var(--cee-ink-muted); }
.cee-zgrada--gradient .cee-zgrada__body > p:not(.cee-kicker) { color: var(--cee-on-green-muted); }
.cee-zgrada__body .cee-kicker { margin: 0 0 14px; }

.cee-zgrada__list { display: grid; margin: 0 0 26px; }
.cee-zgrada__list a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; text-decoration: none; color: inherit;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-family: var(--cee-font-heading); font-weight: 500; font-size: 16.5px;
  transition: padding .2s;
}
.cee-zgrada__list a:last-child { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.cee-zgrada--white .cee-zgrada__list a { border-color: var(--cee-hairline); }
.cee-zgrada__list a span:last-child { margin-left: auto; }
.cee-zgrada--gradient .cee-zgrada__list a:hover { padding-left: 8px; }
.cee-zgrada--white .cee-zgrada__list a:hover { color: var(--cee-green); padding-left: 8px; }

.cee-gt { background: var(--cee-panel); margin-top: clamp(56px, 6vw, 88px); }
.cee-gt__inner {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(44px, 4.6vw, 72px) clamp(20px, 3vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.cee-gt__inner > img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.cee-gt__naslov {
  font-family: var(--cee-font-heading); font-weight: 700;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 18px; max-width: 24ch;
}
.cee-gt__lead { margin: 0 0 28px; font-size: 16.5px; line-height: 1.7; color: var(--cee-ink-muted); max-width: 52ch; }

/* Tri brojke su bile `flex-wrap`, pa je na mobitelu treća padala u svoj redak
   i zadržavala lijevi obrub i uvlaku — izgledalo je kao greška. Mreža to drži
   u tri stupca koja se sužavaju zajedno, a ispod 768 px prelazi na dva, isto
   kao `.cee-stats` (odjeljak 8). */
.cee-gt-brojke {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px;
  border-top: 1px solid rgba(23, 33, 21, .14); border-bottom: 1px solid rgba(23, 33, 21, .14);
}
.cee-gt-brojke > div { padding: 20px 24px; border-left: 1px solid rgba(23, 33, 21, .14); }
.cee-gt-brojke > div:first-child { padding-left: 0; border-left: 0; }
.cee-gt-brojke > div:last-child { padding-right: 0; }
.cee-gt-brojke .num {
  margin: 0; font-family: var(--cee-font-heading); font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--cee-green);
}
.cee-gt-brojke .lbl {
  margin: 6px 0 0; font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cee-ink-muted);
}
/* Sve tri brojke ostaju u jednom redu i na mobitelu (Davor, 16. 10.). Na
   375 px stupac ima oko 110 px, pa se moraju smanjiti i uvlaka i slog —
   inače se „UČINKOVITOST" i „COP 4,5" prelome u dva retka. Mora stajati
   **iza** pravila za `.num` i `.lbl`, jer je ista specifičnost. */
@media (max-width: 767px) {
  .cee-gt-brojke > div { padding: 16px 10px; }
  .cee-gt-brojke .num { font-size: clamp(17px, 5vw, 24px); }
  .cee-gt-brojke .lbl { margin-top: 4px; font-size: clamp(8.5px, 2.5vw, 11px); letter-spacing: .04em; }
}
@media (max-width: 899px) { .cee-gt__inner { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   22. TRAKA NATJEČAJA — prototip: sve u jednom retku, link desno
   --------------------------------------------------------------------- */

.cee-natjecaj-traka { background: var(--cee-grad); color: #FFFFFF; margin-top: clamp(40px, 4.4vw, 60px); }
.cee-natjecaj-traka__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 26px clamp(20px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px;
}
.cee-natjecaj-traka__kicker {
  font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF;
}
.cee-natjecaj-traka__naslov { font-size: 16.5px; font-weight: 600; color: #FFFFFF; }
.cee-natjecaj-traka__rok { font-size: 15px; color: var(--cee-on-green-muted); }
.cee-natjecaj-traka .cee-textlink { margin-left: auto; white-space: nowrap; }
@media (max-width: 767px) { .cee-natjecaj-traka .cee-textlink { margin-left: 0; } }

/* Gumb Trgovina u zaglavlju (artefakt) */
.cee-trgovina {
  display: flex; align-items: center; gap: 8px;
  background: var(--cee-grad); color: #FFFFFF !important;
  padding: 9px 14px; font-family: var(--cee-font-heading); font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  white-space: nowrap; text-decoration: none;
}
/* Artefakt na hoveru POSVIJETLI (filter: brightness(1.07)), ne potamni.
   Ovdje je stajao --cee-grad-hover, koji ide u suprotnom smjeru. Izmjereno na
   obje strane; postoji od 1. 8., nije regresija generatora nego ranija razlika. */
.cee-trgovina:hover { filter: brightness(1.07); color: #FFFFFF !important; }

/* Tekst u bijeloj kartici zgrade: prototip 15.5px, prigušen */
.cee-zgrada__body > p:not(.cee-kicker) { font-size: 15.5px; line-height: 1.6; }
.cee-zgrada--white .cee-zgrada__body > p:not(.cee-kicker) { color: var(--cee-ink-muted); }
.cee-zgrada--gradient .cee-zgrada__body > p:not(.cee-kicker) { color: var(--cee-on-green-muted); }

/* ---------------------------------------------------------------------
   23. SOLARNI PARK na naslovnici — foto lijevo puni ćeliju, tekst desno
   --------------------------------------------------------------------- */

.cee-park {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: var(--cee-panel); margin-top: clamp(56px, 6vw, 88px);
}
.cee-park > img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; }
.cee-park__tekst { padding: clamp(36px, 4vw, 60px); }
.cee-park__tekst h2 {
  font-family: var(--cee-font-heading); font-weight: 700;
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 18px; max-width: 22ch;
}
.cee-park__lead { margin: 0 0 28px; font-size: 16px; line-height: 1.7; color: var(--cee-ink-muted); max-width: 46ch; }
@media (max-width: 899px) { .cee-park { grid-template-columns: 1fr; } .cee-park > img { min-height: 260px; } }

/* ---------------------------------------------------------------------
   24. PRORED I BOČNI RAZMACI — usklađeno s artefaktom
   Prototip nema globalni prored; svaki element ga dobiva sam.
   Široki blokovi imaju okvir 1320px, ali sadržaj unutra 1240px.
   --------------------------------------------------------------------- */

/* Artefakt: svaki odlomak je prigušen, prored 1.7, najčešća veličina 15.5px */
p { font-size: 15.5px; line-height: 1.7; color: var(--cee-ink-muted); }
li { line-height: 1.5; }
.cee-band-gradient p, .cee-on-gradient p { color: var(--cee-on-green-muted); }
/* Lead: dizajn (artefakt, usporedba po tekstu 8. 10.) ima 16.5px / 1.7 na 34
   stranice, 17px na cjenovnim stranicama i Subvencijama. Bilo je 19px / 1.6. */
.has-lead-font-size { line-height: 1.7; }
.page-template-page-cijena .has-lead-font-size, .page-id-46 .has-lead-font-size { font-size: 17px !important; }
.cee-lead { line-height: 1.6; }

/* Artefakt razmak drži na OKVIRU (`max-width:1320;padding:0 clamp(20px,3vw,40px)`),
   pa je sadržaj širok 1240 i počinje na 340 kod prozora od 1920.
   Ovdje je razmak prije stajao NA samom bloku, pa je blok bio 1320 od ruba 300,
   a tekst svejedno na 340. Izgledalo je isto, ali svako mjerenje položaja je
   pokazivalo 40px razlike i to je bilo krivo u odnosu na artefakt. */
.wp-block-group.alignfull > .alignwide,
.wp-block-group.alignfull > .wp-block-columns.alignwide {
  max-width: 1240px; margin-inline: auto; padding-inline: 0;
}
/* sekcije koje same nose okvir preko cijele sadržajne širine ostaju na 1320 */
.wp-block-group.alignfull > .cee-gt,
.wp-block-group.alignfull > .cee-natjecaj-traka,
.wp-block-group.alignfull > .cee-cta-traka { max-width: 1320px; padding-inline: 0; }
/* .cee-park je omeđen panel, ne traka preko cijele širine — ide unutar 1240 */

/* ---------------------------------------------------------------------
   25. HERO NASLOVNICE — prototip: grid 1.08fr / .92fr
   --------------------------------------------------------------------- */

.cee-hero {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(44px, 5vw, 76px) clamp(20px, 3vw, 40px) 0;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 4.5vw, 72px); align-items: center;
}
.cee-hero__naslov {
  font-family: var(--cee-font-heading); font-weight: 700;
  font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.03em;
  margin: 0 0 24px; max-width: 21ch; text-wrap: balance;
}
.cee-hero__lead { margin: 0 0 30px; font-size: 17px; line-height: 1.65; color: var(--cee-ink-muted); max-width: 52ch; }
.cee-hero__gumbi { display: flex; flex-wrap: wrap; gap: 12px; }
.cee-hero > img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
@media (max-width: 899px) { .cee-hero { grid-template-columns: 1fr; } }

/* Popisi nasljeđuju prigušenu boju odlomaka */
li { color: var(--cee-ink-muted); }
.cee-band-gradient li, .cee-on-gradient li { color: var(--cee-on-green-muted); }
.cee-kvacice li { color: #FFFFFF; }
.cee-zgrada__list a, .cee-mega a, .cee-footer li, .cee-nav__list li { color: inherit; }

/* Reference izvedenih projekata (artefakt) */
.cee-ref__snaga { font-weight: 600; letter-spacing: -.02em; }
.cee-ref__tip { font-family: var(--cee-font-body); font-size: 13px; letter-spacing: normal; text-transform: none; }
.cee-ref__mjesto { color: var(--cee-green-light); }
.cee-ref__card h3, .cee-ref h3, .cee-reference h3 { font-size: 18px; letter-spacing: normal; }

/* ---------------------------------------------------------------------
   26. HERO S FOTOGRAFIJOM (Solarni park) — puna širina, tekst preko slike
   --------------------------------------------------------------------- */

.cee-hero-foto {
  background-size: cover; background-position: center; color: #FFFFFF;
  min-height: 560px; display: flex; align-items: flex-end;
}
.cee-hero-foto__inner {
  max-width: 1320px; width: 100%; margin: 0 auto;
  padding: clamp(40px, 4vw, 58px) clamp(20px, 3vw, 40px);
}
.cee-hero-foto .cee-kicker { color: #FFFFFF; }
.cee-hero-foto h1 { color: #FFFFFF; margin: 0 0 18px; }
.cee-hero-foto__lead { font-size: 17px; line-height: 1.65; color: #FFFFFF; max-width: 52ch; margin: 0 0 28px; }

/* Prored viših tierova naslova (artefakt: 1.15 na 28–32px) */
.has-naslov-2-32-font-size,
.has-naslov-2-srednji-font-size,
.has-naslov-2-mali-font-size { line-height: 1.15; }

/* Tablica sa statusnim stupcem (Što ponijeti, salon) */
.cee-tablica--status { font-size: 15px; }
.cee-tablica--status thead th { font-size: 11.5px; font-weight: 500; color: var(--cee-green); }
.cee-tablica--status tbody th { font-size: 15px; font-weight: 500; color: var(--cee-ink); }
.cee-tablica--status tbody td,
.cee-tablica--status tbody td:first-of-type { font-size: 15px; font-weight: 500; color: var(--cee-green); }

/* ---------------------------------------------------------------------
   27. ZAGLAVLJE LISTE I PAGINACIJA KATALOGA (artefakt)
   --------------------------------------------------------------------- */

.cee-lista-zaglavlje {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.cee-lista-zaglavlje .cee-lista-broj { margin: 0; }
.cee-lista-poredaj { margin: 0; font-size: 14px; color: var(--cee-ink-muted); }
.cee-lista-poredaj strong { color: var(--cee-ink); font-weight: 600; }

.cee-paginacija { display: flex; align-items: center; gap: 8px; margin-top: 30px; }
.cee-paginacija a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  font-family: var(--cee-font-heading); font-size: 13px; font-weight: 500;
  border: 1px solid rgba(23, 33, 21, .2); color: var(--cee-ink); text-decoration: none;
}
.cee-paginacija a:hover { border-color: var(--cee-green); color: var(--cee-green); }
.cee-paginacija a.is-active {
  background: rgba(0, 115, 66, .08); border-color: var(--cee-green);
  color: var(--cee-green); font-weight: 600;
}
.cee-paginacija__dalje { border-color: transparent !important; padding-left: 6px; }

/* Tip proizvoda ispod tipografske ploče (artefakt) */
.cee-proizvod__tip {
  margin: 12px 16px 0; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-proizvod__tip + .cee-proizvod__brend { margin-top: 4px; }

/* =====================================================================
   VRAĆENE KOMPONENTE
   Blok od sekcije 9 do 20 obrisan je greškom pri automatskoj zamjeni
   1. 8. 2026. Vrijednosti su ponovno izvučene iz artefakta, ne iz sjećanja.
   ===================================================================== */

/* ---- zaglavlje sekcije: naslov lijevo, link desno ---- */
.cee-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 26px;
}
.cee-sec-head h2 { margin: 0; }

/* ---- pomoćne veličine naslova ---- */
.cee-h2-38 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; }
.cee-h2-zgrada { font-size: clamp(26px, 2.6vw, 34px); line-height: normal; }
.cee-kicker--sekcija { font-size: 11.5px; letter-spacing: .12em; }
.cee-objasnjenje p, .cee-objasnjenje li, .cee-objasnjenje strong { color: var(--cee-ink-muted); }

/* ---- CTA gumb kartice zgrade ---- */
.cee-zgrada__cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; font-family: var(--cee-font-heading); font-size: 13px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}
.cee-zgrada__cta--white { background: #FFFFFF; color: var(--cee-green); }
.cee-zgrada__cta--grad { background: var(--cee-grad); color: #FFFFFF; }

/* ---- slot koji čeka fotografiju klijenta ---- */
.cee-foto-slot {
  background: var(--cee-panel); border: 1px dashed var(--cee-hairline-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px; text-align: center;
  font-family: var(--cee-font-heading); font-size: 13px; color: var(--cee-ink-muted);
}
.cee-foto-slot small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }

/* ---- popisi ---- */
.cee-bullets { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
/* Artefakt kvačicu vodi kao flex dijete s razmakom od 12px, ne kao apsolutno
   pozicioniran znak uz uvlaku od 24px. Razlika se vidi na drugom retku svake
   stavke: kod uvlake tekst se lomi pod kvačicu, kod flexa ostaje poravnat. */
.cee-bullets li {
  display: flex; gap: 12px; padding-left: 0; font-size: 16px; line-height: 1.5;
  color: var(--cee-ink); font-weight: 600;
}
.cee-bullets li::before { content: "\2713"; flex: none; color: var(--cee-green); font-weight: 500; }

.cee-kvacice { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cee-kvacice li { display: flex; gap: 12px; padding-left: 0; font-size: 15.5px; line-height: 1.5; color: #FFFFFF; }
.cee-kvacice li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 12px; height: 7px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg);
}

/* ---- kartice tipova (zrak-voda, eksponati…) ---- */
.cee-tipovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
/* Šest kartica ili koraka: 3 × 2, ne 4 + 2 (Design, oba kruga). */
@media (min-width: 900px) {
  .cee-tipovi:has(> :nth-child(6):last-child),
  .cee-koraci:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.cee-tip { border: 1px solid var(--cee-hairline); padding: 30px 32px; display: flex; flex-direction: column; }
.cee-tip p.cee-tip__kicker {
  margin: 0 0 6px; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green);
}
.cee-tip h3 { margin: 0 0 12px; font-size: 20px; font-weight: 500; letter-spacing: normal; }
.cee-tipovi--istaknuti .cee-tip h3 { font-size: 21px; font-weight: 700; }
.cee-tip p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--cee-ink-muted); }
.cee-tip p.cee-tip__meta { margin: auto 0 0 !important; padding-top: 16px; font-size: 14px; color: var(--cee-ink); }
.cee-tip p.cee-tip__meta span { color: var(--cee-ink); font-weight: 600; }

/* ---- COP prikaz ---- */
.cee-cop { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cee-cop__in { font-family: var(--cee-font-heading); font-size: clamp(20px,2vw,26px); color: var(--cee-ink-muted); }
.cee-cop__out {
  font-family: var(--cee-font-heading); font-size: clamp(30px,3.4vw,44px);
  font-weight: 600; letter-spacing: -.025em; color: var(--cee-green); line-height: 1.05;
}

/* ---- bilanca uređaja ---- */
.cee-bilanca {
  aspect-ratio: 4/3; min-width: 0; background: var(--cee-panel);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: clamp(28px, 3vw, 44px);
}
.cee-bilanca__naslov {
  margin: 0 0 4px; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green); font-weight: 500;
}
.cee-bilanca__red { display: flex; gap: 16px; align-items: baseline; }
.cee-bilanca__red .v {
  font-family: var(--cee-font-heading); font-size: clamp(22px, 2.2vw, 30px); font-weight: 500;
  letter-spacing: -.025em; flex: none; min-width: 4.5ch; color: var(--cee-green);
}
.cee-bilanca__red.is-total .v { color: var(--cee-ink); }
.cee-bilanca__red .o { font-size: 15px; line-height: 1.5; color: var(--cee-ink-muted); }

/* ---- kartice slučajeva ---- */
/* Artefakt ima odvojene kartice s vlastitim obrubom, ne spojen blok.
   Prije je ovdje bio `gap:1px` s podlogom na mreži, pa su kartice dijelile
   rubove, a siva podloga virila u unutarnji razmak trake. */
.cee-slucaj {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.cee-slucaj__card {
  background: #FFFFFF; border: 1px solid var(--cee-hairline);
  padding: 26px 30px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; transition: background .2s;
}
.cee-slucaj__card:hover { background: var(--cee-panel); }
.cee-slucaj__card h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: normal; }
.cee-slucaj--velike .cee-slucaj__card h3 { font-size: 20px; }
.cee-slucaj__card p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--cee-ink-muted); }
.cee-slucaj__go {
  margin-top: auto; font-family: var(--cee-font-heading); font-size: 12.5px;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--cee-green);
}
@media (max-width: 1023px) { .cee-slucaj { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .cee-slucaj { grid-template-columns: 1fr; } }

/* ---- koraci procesa ---- */
.cee-koraci {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1px;
  background: var(--cee-hairline); border: 1px solid var(--cee-hairline);
}
.cee-korak { background: #FFFFFF; padding: 26px 24px; }
.cee-korak__n {
  display: block; margin-bottom: 12px; font-family: var(--cee-font-heading);
  font-size: 12.5px; letter-spacing: .12em; color: var(--cee-green);
}
.cee-korak h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: normal; }
.cee-korak p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cee-ink-muted); }
.cee-koraci--brand .cee-korak h3 { font-size: 19px; }
.cee-koraci--brand .cee-korak p { font-size: 15px; }

/* ---- kartice modela ---- */
.cee-modeli { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cee-model { background: #FFFFFF; border: 1px solid var(--cee-hairline-strong); padding: 26px 24px; }
.cee-model__za {
  margin: 0 0 10px; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-model__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
/* Snimka uređaja ispod reda sa snagom (CEE, 22. 10.). Podloga snimke je
   bijela kao i kartica, pa se ne vidi; `contain` čuva proporcije uređaja,
   a fiksna visina drži obje kartice jednake kad su modeli različite visine. */
.cee-model__slika { margin: 0 0 18px; }
.cee-model__slika img { width: 100%; height: 190px; object-fit: contain; display: block; }
.cee-model__head h3 { margin: 0; }
.cee-model__kw {
  font-family: var(--cee-font-heading); font-size: clamp(26px,2.6vw,34px); line-height: 1;
  font-weight: 500; letter-spacing: -.03em; color: var(--cee-green); white-space: nowrap;
}
@media (max-width: 899px) { .cee-modeli { grid-template-columns: 1fr; } }

/* ---- primjer izračuna ---- */
.cee-primjer { border: 1px solid var(--cee-hairline-strong); padding: 28px 26px; }
.cee-primjer__kicker {
  margin: 0 0 10px; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green);
}
.cee-primjer__rezultat {
  margin: 0 0 10px; font-family: var(--cee-font-heading); font-size: clamp(24px,2.4vw,32px);
  font-weight: 500; letter-spacing: -.025em; color: var(--cee-green);
}
.cee-primjer__nota { margin: 0; font-size: 13.5px; color: var(--cee-ink-muted); }

/* ---- obrazac upita ---- */
.cee-upit { border: 1px solid var(--cee-hairline-strong); padding: 28px 26px; }
.cee-upit__naslov {
  margin: 0 0 8px; font-family: var(--cee-font-heading); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green);
}
.cee-upit__nota { margin: 0 0 18px; font-size: 14px; color: var(--cee-ink-muted); }
.cee-upit form { display: flex; flex-direction: column; gap: 10px; }
.cee-upit button, .cee-upit form button { cursor: pointer; margin-top: 0; padding-inline: 18px; border: 0; }
.cee-upit__sitno { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--cee-ink-muted); }
.cee-btn-submit {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cee-grad); color: #FFFFFF; border: 0; cursor: pointer;
  padding: 15px 26px; font-family: var(--cee-font-heading); font-size: 13px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ---- katalog: pillovi, filtri, mreža ---- */
.cee-pillovi { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.cee-pillovi a {
  display: inline-flex; align-items: center;
  font-family: var(--cee-font-heading); font-size: 13px; font-weight: 500;
  color: var(--cee-ink); text-decoration: none;
  padding: 10px 18px; border: 1px solid rgba(23, 33, 21, .2); border-radius: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.cee-pillovi a:hover { border-color: var(--cee-green); color: var(--cee-green); }
.cee-pillovi a.is-active {
  background: rgba(0, 115, 66, .08); border-color: var(--cee-green);
  color: var(--cee-green); font-weight: 600;
}

.cee-katalog { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px,3vw,44px); align-items: start; }
@media (max-width: 899px) { .cee-katalog { grid-template-columns: 1fr; } }

.cee-filtri { border: 1px solid var(--cee-hairline); padding: 22px 24px; }
.cee-filtri__naslov {
  margin: 0 0 16px; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green); font-weight: 500;
}
.cee-filtri__grupa { margin-bottom: 22px; display: grid; gap: 8px; }
.cee-filtri__grupa h3 {
  margin: 0 0 2px; font-family: var(--cee-font-heading); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-filtri__grupa label { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.cee-filtri__grupa label span { margin-left: auto; font-size: 14.5px; color: var(--cee-ink-muted); }
.cee-filtri__grupa input[type="checkbox"] {
  appearance: none; width: 14px; height: 14px; flex: none; margin: 0;
  border: 1px solid rgba(23, 33, 21, .4); background: none; cursor: pointer;
}
.cee-filtri__grupa input[type="checkbox"]:checked { background: var(--cee-green); }
.cee-filtri__raspon { margin: 0 0 10px; font-size: 13px; color: var(--cee-ink-muted); font-variant-numeric: tabular-nums; }

/* `minmax(0, 1fr)`, ne `1fr`: `1fr` je `minmax(auto, 1fr)`, pa stupac sa
   sirim sadrzajem (duga rijec u naslovu, siroka slika) nadmasi svoj udio i
   stupci ispadnu nejednaki, a mreza se stegne ispod sirine spremnika.
   `width: 100%` osigurava da se mreza rastegne i kad je sirina neodredena. */
.cee-proizvodi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; }
.cee-proizvodi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cee-proizvod { border: 1px solid var(--cee-hairline); display: flex; flex-direction: column; background: #FFFFFF; }
.cee-proizvod__ploca {
  aspect-ratio: 1/1; background: var(--cee-panel);
  display: flex; align-items: center; justify-content: center; position: relative;
  font-family: var(--cee-font-heading); font-size: clamp(26px,2.8vw,40px);
  font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--cee-green);
}
.cee-proizvodi--brand .cee-proizvod__ploca { font-size: clamp(24px,2.4vw,34px); }
.cee-proizvodi--shop .cee-proizvod__ploca { font-size: clamp(26px,2.6vw,38px); }
.cee-proizvod__ploca .cee-badge { position: absolute; top: 10px; left: 10px; }
.cee-proizvod__tip {
  margin: 12px 16px 0; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-proizvod__brend {
  margin: 4px 16px 2px; font-family: var(--cee-font-heading); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-proizvod h3 { margin: 0 16px 6px; font-size: 16.5px; }
.cee-proizvod__meta { margin: 0 16px 14px; font-size: 13.5px; line-height: 1.5; color: var(--cee-ink-muted); }
.cee-proizvod__dno {
  margin: auto 16px 16px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 10px; padding-top: 12px;
  border-top: 1px solid var(--cee-hairline);
}
.cee-proizvod__dno .cijena {
  font-family: var(--cee-font-heading); font-size: 19px; font-weight: 500;
  letter-spacing: -.02em; color: var(--cee-ink);
}
.cee-proizvod__dno .tip {
  font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cee-ink-muted);
}
@media (max-width: 1199px) { .cee-proizvodi--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .cee-proizvodi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .cee-proizvodi, .cee-proizvodi--3 { grid-template-columns: minmax(0, 1fr); } }

/* ---- tablice ---- */
.cee-tablica-wrap { overflow-x: auto; }
.cee-tablica { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14.5px; }
.cee-tablica thead th {
  text-align: left; font-family: var(--cee-font-heading); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cee-ink-muted);
  font-weight: 700; padding: 10px 0; border-bottom: 1px solid var(--cee-hairline-strong);
}
.cee-tablica tbody th {
  text-align: left; font-weight: 500; font-size: 14.5px; padding: 12px 0;
  border-bottom: 1px solid rgba(23, 33, 21, .1);
}
.cee-tablica tbody td {
  font-size: 14.5px; font-weight: 500; padding: 12px 0;
  border-bottom: 1px solid rgba(23, 33, 21, .1); font-variant-numeric: tabular-nums;
}
.cee-tablica tbody td:last-child:not(:first-of-type) { color: var(--cee-ink-muted); }
.cee-tablica tbody tr:last-child th, .cee-tablica tbody tr:last-child td { border-bottom: 0; }
.cee-tablica--snage tbody td:first-of-type { font-weight: 600; }
/* Tablica u kojoj je i zadnji stupac vrijednost, a ne bilješka: bez
   prigušene boje koju `td:last-child` inače dobiva. */
.cee-tablica--bez-biljeske tbody td:last-child:not(:first-of-type) { color: inherit; }

.cee-tablica--podaci { font-size: 15px; }
.cee-tablica--podaci tbody th { font-size: 15px; color: var(--cee-ink-muted); }
.cee-tablica--podaci tbody td { font-size: 15px; font-weight: 600; }

.cee-tablica--cjenik thead th { font-size: 11.5px; }
.cee-tablica--cjenik tbody th { font-weight: 600; color: var(--cee-ink); }
.cee-tablica--cjenik tbody td { font-weight: 500; color: var(--cee-ink); }
.cee-tablica--cjenik tbody td:first-of-type { font-weight: 600; }
.cee-tablica--cjenik tbody td:last-child:not(:first-of-type) { color: var(--cee-ink); }

.cee-tablica--serije { font-size: 15px; }
.cee-tablica--serije thead th {
  font-size: 11.5px; font-weight: 600; padding: 0 12px 12px 0;
  border-bottom: 1px solid rgba(23, 33, 21, .24);
}
.cee-tablica--serije thead th:last-child { text-align: right; padding: 0 0 12px; }
.cee-tablica--serije tbody th {
  font-family: var(--cee-font-heading); font-size: 17px; font-weight: 500;
  padding: 16px 12px 16px 0; border-bottom: 1px solid var(--cee-hairline);
}
.cee-tablica--serije tbody td {
  font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--cee-ink-muted);
  padding: 16px 12px 16px 0; border-bottom: 1px solid var(--cee-hairline);
}
.cee-tablica--serije tbody td:last-child:not(:first-of-type) {
  font-family: var(--cee-font-heading); font-size: 17px; color: var(--cee-ink);
  text-align: right; white-space: nowrap; padding: 16px 0;
}

.cee-tablica--status { font-size: 15px; }
.cee-tablica--status thead th { font-size: 11.5px; font-weight: 500; color: var(--cee-green); }
.cee-tablica--status tbody th { font-size: 15px; font-weight: 500; color: var(--cee-ink); }
.cee-tablica--status tbody td,
.cee-tablica--status tbody td:first-of-type { font-size: 15px; font-weight: 500; color: var(--cee-green); }

.cee-specs--kontakt { font-size: 15px; }
.cee-specs--kontakt th { font-size: 15px; color: var(--cee-ink-muted); }
.cee-specs--kontakt td { font-size: 15px; }

/* ---- natječaji (subvencije) ---- */
.cee-natjecaji { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cee-natjecaj { border: 1px solid var(--cee-hairline-strong); padding: 24px 22px; display: flex; flex-direction: column; }
.cee-natjecaj__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cee-natjecaj__meta .rok { font-size: 12.5px; color: var(--cee-ink-muted); }
.cee-natjecaj h3 { margin: 0 0 8px; font-size: 19px; }
.cee-natjecaj > p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--cee-ink-muted); }
@media (max-width: 1023px) { .cee-natjecaji { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .cee-natjecaji { grid-template-columns: 1fr; } }

/* ---- lokacije ---- */
.cee-lokacije { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,44px); }
.cee-lokacija h2 { margin: 0 0 10px; font-size: clamp(22px,2.4vw,28px); }
@media (max-width: 899px) { .cee-lokacije { grid-template-columns: 1fr; } }
.cee-lokacija .cee-karta { display: block; margin-top: 20px; }
h2 + .cee-lokacije { margin-top: 24px; }
/* Jedna lokacija (info stranice): podaci lijevo, karta desno. */
@media (min-width: 900px) {
  .cee-lokacije--jedna { grid-template-columns: 1fr; }
  .cee-lokacije--jedna .cee-lokacija { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px,3vw,44px); align-items: start; }
  .cee-lokacije--jedna .cee-lokacija > :not(.cee-karta) { grid-column: 1; }
  .cee-lokacije--jedna .cee-karta { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

/* ---- savjeti: istaknuti članak i mreža ---- */
.cee-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border: 1px solid var(--cee-hairline); }
.cee-featured img, .cee-featured .cee-foto-slot { width: 100%; min-width: 0; height: 100%; min-height: 300px; object-fit: cover; }
.cee-featured__body { padding: clamp(28px,3.2vw,44px); display: flex; flex-direction: column; justify-content: center; }
.cee-featured__meta { margin: 0 0 12px; font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green); }
.cee-featured h2 { margin: 0 0 12px; }
@media (max-width: 899px) { .cee-featured { grid-template-columns: 1fr; } }
.cee-art-grid--6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .cee-art-grid, .cee-art-grid--6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .cee-art-grid, .cee-art-grid--6 { grid-template-columns: 1fr; } }

/* ---- kalkulator: oznake i varijante ---- */
.cee-calc__naslov {
  margin: 0 0 18px; font-family: var(--cee-font-heading); font-size: 11.5px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green);
}
.cee-calc__label {
  font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cee-ink-muted); margin: 22px 0 0;
}
.cee-calc--bordered { box-shadow: none; border: 1px solid var(--cee-hairline-strong); }
.cee-calc__seg--chip { border: 0; gap: 8px; }
.cee-calc__seg--chip button {
  flex: none; padding: 9px 16px; text-transform: none; letter-spacing: normal;
  border: 1px solid rgba(23, 33, 21, .2); color: var(--cee-ink-muted); background: none;
}
.cee-calc__seg--chip button[aria-pressed="true"] {
  background: rgba(0, 115, 66, .08); border-color: var(--cee-green);
  color: var(--cee-green); font-weight: 600;
}

/* ---- FAQ u dva stupca ---- */
.cee-faq__stupac { min-width: 0; }

/* ---- newsletter okvir ---- */
.cee-newsletter-okvir {
  border: 1px solid rgba(23, 33, 21, .14); padding: clamp(28px, 3.2vw, 44px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px;
  margin: clamp(56px, 6vw, 88px) 0;
}
.cee-newsletter-okvir__tekst { flex: 1; min-width: 280px; }
.cee-newsletter-okvir__tekst h2 {
  font-family: var(--cee-font-heading); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px;
}
.cee-newsletter-okvir__tekst p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--cee-ink-muted); max-width: 50ch; }
.cee-newsletter-okvir__forma { display: flex; border: 1px solid var(--cee-hairline-strong); min-width: min(320px, 100%); flex: 1; }
.cee-newsletter-okvir__forma input {
  flex: 1; border: 0; padding: 14px 16px; font-size: 14.5px;
  font-family: var(--cee-font-body); color: var(--cee-ink); background: none; outline: none; min-width: 0;
}
.cee-newsletter-okvir__forma button {
  background: var(--cee-grad); color: #FFFFFF; border: 0; cursor: pointer;
  padding: 14px 22px; font-family: var(--cee-font-heading); font-size: 12.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cee-newsletter { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- CTA traka ----
   NEDOSTAJALO JE BAZNO PRAVILO. Postojali su samo __inner, __tekst i __gumbi,
   koji tekst boje bijelim, pa je traka na 38 stranica bila bijeli tekst na
   bijeloj podlozi — 233 do 259px nevidljive praznine pred podnožjem.
   Mjerenje po tekstu to nikad nije uhvatilo jer je tekst bio prisutan.
   Gradijent je izmjeren u artefaktu i identičan je tokenu --cee-grad:
   linear-gradient(135deg, #6C9D36 0%, #007342 100%). */
/* Vrijednosti doslovno iz ODLUKA-generiranje.md § 1, koje je autor artefakta
   izvadio iz izvora. U artefaktu klasa `.cee-cta-traka` ne postoji — to je
   obična sekcija s inline gradijentom, klasu je izmislila tema. Ritam nosi
   vanjski margin, unutarnji razmak nosi __inner; nikad oboje na istom šavu. */
.cee-cta-traka {
  margin: clamp(56px, 6vw, 88px) 0 0;
  background: linear-gradient(135deg, #6C9D36 0%, #007342 100%);
  color: #FFFFFF;
}
.cee-cta-traka__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 4.4vw, 64px) clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cee-cta-traka h2 {
  font-family: 'Myriad Pro Semi Extended', 'Encode Sans Semi Expanded', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}
.cee-cta-traka p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  max-width: 52ch;
}
.cee-cta-traka__gumbi { display: flex; gap: 12px; flex-wrap: wrap; }
.cee-cta-traka__gumbi .wp-block-button { margin: 0; }
@media (max-width: 767px) {
  .cee-cta-traka__inner { flex-direction: column; align-items: flex-start; }
  .cee-cta-traka__gumbi { width: 100%; }
}

/* ---- traka s brojkama: velika varijanta ---- */
.cee-stats--velike .cee-stats__item .num { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.03em; }
.cee-stats--velike .cee-stats__item .lbl {
  font-family: var(--cee-font-body); font-size: 14px; line-height: 1.5;
  letter-spacing: normal; text-transform: none;
}

/* ---- pomoćne slike ---- */
.cee-green-therm-izlozba, .cee-baterijski-sustav { width: 100%; height: auto; display: block; }
.cee-shop-kat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 20px; }

/* ---- kartice webshopa i savjeta (artefakt: okvir, slika, podložak) ---- */
.cee-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.cee-shop-card {
  text-decoration: none; color: inherit; display: block;
  background: #FFFFFF; border: 1px solid var(--cee-hairline); transition: border-color .2s;
}
.cee-shop-card:hover { border-color: var(--cee-green); }
.cee-shop-card img, .cee-shop-card__ph { width: 100%; height: 180px; object-fit: cover; display: block; }
.cee-shop-card__ph {
  background: var(--cee-panel); border-bottom: 1px solid rgba(23, 33, 21, .08);
  display: flex; align-items: flex-end; padding: 20px 22px;
  font-family: var(--cee-font-heading); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-shop-card__telo { padding: 20px 22px 24px; }
.cee-shop-card h3 { margin: 0 0 6px; font-family: var(--cee-font-heading); font-size: 19px; font-weight: 500; }
.cee-shop-card p { margin: 0; font-size: 13.5px; color: var(--cee-ink-muted); }
.cee-shop-card:hover h3 { color: var(--cee-green); }
@media (max-width: 1023px) { .cee-shop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .cee-shop-grid { grid-template-columns: 1fr; } }

.cee-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cee-art-card {
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid var(--cee-hairline); transition: border-color .2s;
}
.cee-art-card:hover { border-color: var(--cee-green); }
.cee-art-card img, .cee-art-card__ph { width: 100%; height: 190px; object-fit: cover; display: block; }
.cee-art-card__ph {
  background: var(--cee-panel); border-bottom: 1px solid rgba(23, 33, 21, .08);
  display: flex; align-items: flex-end; padding: 20px 22px;
  font-family: var(--cee-font-heading); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-art-card__telo { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.cee-art-card__cat {
  margin: 0 0 12px; font-family: var(--cee-font-heading); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green);
}
.cee-art-card h3 {
  margin: 0 0 12px; font-family: var(--cee-font-heading); font-weight: 700;
  font-size: 20px; line-height: 1.15; letter-spacing: -.02em;
}
.cee-art-card__lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--cee-ink-muted); }
.cee-art-card__date { margin: auto 0 0; font-size: 13px; color: var(--cee-ink-muted); }

/* Mreže i tablice ne smiju gurati stranicu u vodoravno klizanje */
.cee-faq__stupac, .cee-featured__body, .cee-katalog > * { min-width: 0; }
.cee-foto-slot { min-width: 0; }

/* Mreža članaka: media upiti moraju doći poslije osnovnog pravila */
@media (max-width: 899px) { .cee-art-grid, .cee-art-grid--6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .cee-art-grid, .cee-art-grid--6 { grid-template-columns: 1fr; } }

/* WP stavlja blok-razmak između zaglavlja i main; prototip ga nema */
main#main { margin-block-start: 0; }

/* =====================================================================
   28. TRGOVINA — spajanje Woo ispisa na komponente iz artefakta
   ---------------------------------------------------------------------
   Woo emitira vlastite klase (`.woocommerce-result-count`,
   `.woocommerce-pagination`…). Umjesto da se piše drugi dizajn, te se klase
   vežu na već postojeće `.cee-lista-*` i `.cee-paginacija` vrijednosti.
   ===================================================================== */

.cee-katalog__sadrzaj { min-width: 0; }

/* Zaglavlje liste: broj rezultata lijevo, sortiranje desno. */
.woocommerce-products-header { margin: 0 0 20px; }
.cee-katalog__sadrzaj .woocommerce-result-count,
.cee-katalog__sadrzaj .woocommerce-ordering {
  display: inline-block; margin: 0 0 20px; font-size: 14px; color: var(--cee-ink-muted);
}
.cee-katalog__sadrzaj .woocommerce-ordering { float: right; }
.cee-katalog__sadrzaj .woocommerce-ordering select {
  font-family: var(--cee-font-body); font-size: 14px; color: var(--cee-ink);
  border: 1px solid var(--cee-hairline-strong); background: #FFFFFF;
  border-radius: 0; padding: 6px 10px;
}

/* Paginacija: Woo daje `ul.page-numbers`, dizajn traži `.cee-paginacija`. */
.woocommerce-pagination ul.page-numbers {
  display: flex; align-items: center; gap: 8px; margin: 30px 0 0;
  padding: 0; list-style: none; border: 0;
}
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.woocommerce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  font-family: var(--cee-font-heading); font-size: 13px; font-weight: 500;
  border: 1px solid rgba(23, 33, 21, .2); color: var(--cee-ink); text-decoration: none;
}
.woocommerce-pagination a.page-numbers:hover { border-color: var(--cee-green); color: var(--cee-green); }
.woocommerce-pagination .page-numbers.current {
  background: rgba(0, 115, 66, .08); border-color: var(--cee-green);
  color: var(--cee-green); font-weight: 600;
}
.woocommerce-pagination .page-numbers.next,
.woocommerce-pagination .page-numbers.prev { border-color: transparent; }

/* Oznaka akcije — jedina koja ide na gradient, po artefaktu. */
.cee-badge--akcija { background: var(--cee-grad); color: #FFFFFF; }

/* "Nazovi za cijenu" stoji na mjestu cijene, pa nosi njezinu tipografiju
   ali prigušenu boju — nije iznos.
   Ime je `cee-cijena-upit`, ne `cee-upit`: taj je zauzet za omotač obrasca
   upita (redak 962) i sudar je gazio tipografiju obrasca na osam stranica. */
.cee-cijena-upit {
  font-family: var(--cee-font-heading); font-size: 15px; font-weight: 500;
  letter-spacing: -.01em; color: var(--cee-green);
}

.cee-filtri__grupa label a { color: inherit; text-decoration: none; }
.cee-filtri__grupa label:hover a { color: var(--cee-green); }

.cee-filtri__ocisti { margin: 4px 0 0; font-size: 13px; }
.cee-filtri__ocisti a { color: var(--cee-green); }

.cee-btn--upit {
  display: inline-block; margin-top: 10px; font-family: var(--cee-font-heading);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cee-green); text-decoration: none; border-bottom: 1px solid currentColor;
}

/* Woo ubacuje vlastitu obavijest o rezultatima pretrage i poruke. */
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-top: 2px solid var(--cee-green); background: var(--cee-panel);
  font-size: 14.5px; border-radius: 0;
}

/* Stranica proizvoda: Woo-ov `div.product` dobiva širinu sadržaja teme. */
.single-product .cee-katalog { display: block; }
.single-product .cee-filtri { display: none; }

/* Raspon cijene u filtrima — dva polja i gumb, bez Woo klizača. */
.cee-filtri__grupa--cijena { gap: 6px; }
.cee-filtri__cijena { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.cee-filtri__cijena label { display: block; margin: 0; }
.cee-filtri__cijena input[type="number"] {
  width: 100%; border: 1px solid rgba(23, 33, 21, .25); border-radius: 0;
  padding: 7px 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; background: #FFFFFF;
}
.cee-filtri__cijena button {
  grid-column: 1 / -1; border: 1px solid var(--cee-green); background: none;
  color: var(--cee-green); border-radius: 0; cursor: pointer;
  font-family: var(--cee-font-heading); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px;
}
.cee-filtri__cijena button:hover { background: var(--cee-green); color: #FFFFFF; }
.cee-filtri__raspon .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* Ploča kartice u artefaktu je bila tipografska (velik zeleni tekst), pa za
   sliku nije bilo pravila — a uvezeni artikli slike imaju i bez ograničenja
   izlaze izvan okvira. `contain`, ne `cover`: artikli su packshotovi kutija,
   rezanje bi im odsjeklo rub. */
.cee-proizvod__ploca img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Ploca je inace boje panela, jer na njoj stoji veliki zeleni tekst kad slike
   nema. Kad slika postoji, podloga ide u bijelo: packshotovi su na bijelom, pa
   bi se rub panela vidio kao okvir oko slike kad omjer nije tocno kvadratan. */
.cee-proizvod__ploca:has(img) { background: #FFFFFF; }
.cee-proizvod__ploca { overflow: hidden; }

/* Katalog bez bočnog stupca (teaser na hubu, predfiltrirane podstranice). */
.cee-katalog--bez-filtara { display: block; }

/* =====================================================================
   29. PROREDI MALIH OZNAKA
   ---------------------------------------------------------------------
   `p { line-height: 1.7 }` (sekcija iznad) vrijedi za tekst u odlomku, ali
   komponente ispod su takoder <p> i nadjacavaju samo velicinu fonta — pa
   naslijede 1.7 i stoje nize nego u artefaktu, koji im ostavlja `normal`.
   Izmjereno na 27, 22 odnosno 13 ekrana (08.10.2026.).
   ===================================================================== */
.cee-kicker,
.cee-proizvod__tip,
.cee-proizvod__brend,
.cee-art-card__date,
.cee-calc__label,
.cee-filtri__naslov,
.cee-textlink {
  line-height: normal;
}

/* Obrazac upita u CTA traci — artefakt na gshub, projektant i kljucuruke ima
   bijelu karticu s poljima desno od teksta, ne samo gumb. Traka je flex sa
   `space-between`, pa kartica samo zauzme desnu stranu. */
.cee-cta-traka__obrazac {
  background: #FFFFFF;
  padding: 26px 24px;
  flex: 0 1 420px;
  min-width: min(360px, 100%);
}
.cee-cta-traka__obrazac form { display: flex; flex-direction: column; gap: 10px; }
.cee-cta-traka__obrazac .cee-btn-submit { width: 100%; }
@media (max-width: 899px) { .cee-cta-traka__obrazac { flex: 1 1 100%; } }

/* =====================================================================
   30. KORACI U REDU I REFERENCE
   ---------------------------------------------------------------------
   Artefakt na Green & Smart ima šest koraka u jednom redu, bez okvira, s
   tankom crtom iznad — a ne kartice. `.cee-tipovi` se koristi na osam
   drugih stranica pa se ne dira; ovo je zasebna komponenta.

   Reference su dosad imale samo tipografske djeliće (`.cee-ref__snaga`,
   `__tip`, `__mjesto`) bez mreže i okvira, pa su na tri stranice stajale
   jedna ispod druge bez obruba. Ovdje se komponenta dovršava.
   ===================================================================== */

/* `.cee-koraci` vec postoji (redak 920) kao mreza s tankim crtama i bijelim
   karticama. Artefakt na Green & Smart trazi isti sadrzaj kao red od sest bez
   okvira, pa je ovo modifikator te komponente, a ne nova klasa — prvi put sam
   je duplicirao istim imenom i dobio sivu podlogu preko cijelog reda. */
.cee-koraci--red {
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  background: none;
  border: 0;
  border-top: 1px solid var(--cee-hairline);
  padding-top: 24px;
}
.cee-koraci--red .cee-korak { background: none; padding: 0; }
.cee-koraci--red .cee-korak h3 { font-size: 16px; font-weight: 500; }
.cee-koraci--red .cee-korak p { font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1199px) { .cee-koraci--red { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } }
@media (max-width: 719px)  { .cee-koraci--red { grid-template-columns: 1fr 1fr; } }

.cee-ref { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cee-ref__card {
  border: 1px solid var(--cee-hairline); background: #FFFFFF;
  display: flex; flex-direction: column;
}
.cee-ref__glava {
  background: var(--cee-panel); padding: 26px 24px;
  border-bottom: 1px solid rgba(23, 33, 21, .08);
}
.cee-ref__snaga {
  display: block; font-family: var(--cee-font-heading);
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1;
  font-weight: 600; letter-spacing: -.02em; color: var(--cee-green);
}
.cee-ref__tip {
  display: block; margin-top: 8px; font-family: var(--cee-font-body);
  font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--cee-ink-muted);
}
.cee-ref__telo { padding: 20px 24px 24px; }
/* `__mjesto` je drugdje na gradientu, pa mu je boja svijetlozelena; u
   bijeloj kartici to nema kontrast, zato se ovdje nadjačava. */
.cee-ref__card .cee-ref__mjesto {
  margin: 0 0 8px; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cee-green);
}
.cee-ref__card h3 { margin: 0 0 8px; }
.cee-ref__card p:last-child { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cee-ink-muted); }
.cee-ref__zaglavlje { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.cee-ref__zaglavlje h2 { margin: 0; }
@media (max-width: 899px) { .cee-ref { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .cee-ref { grid-template-columns: 1fr; } }

/* Mreža fotografija prostora (Salon). `.cee-foto-slot` postoji od prije i
   koristi se na šest stranica samostalno; ovo je samo raspored za njih. */
.cee-prostor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 899px) { .cee-prostor { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519px) { .cee-prostor { grid-template-columns: 1fr; } }

/* Vremenska crta "Kako smo došli dovde" (O nama). Artefakt je slaže kao
   retke godina | tekst, s crtom između — ne kao stupce, pa `.cee-koraci`
   ovdje ne odgovara. Brojke iznad koriste postojeći `.cee-stats`. */
.cee-etape { display: grid; }
.cee-etapa {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px); padding: 18px 0;
  border-top: 1px solid var(--cee-hairline);
}
.cee-etapa:last-child { border-bottom: 1px solid var(--cee-hairline); }
.cee-etapa__god {
  margin: 0; font-family: var(--cee-font-heading); font-size: 19px;
  font-weight: 600; letter-spacing: -.02em; color: var(--cee-green);
}
.cee-etapa p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cee-ink-muted); }
@media (max-width: 599px) { .cee-etapa { grid-template-columns: 1fr; gap: 6px; } }

/* =====================================================================
   31. STRANICA PROIZVODA I WOO OMOTI
   ---------------------------------------------------------------------
   Woo svoj ispis ne označava s `alignwide`, pa ga constrained raspored
   stegne na contentSize i centrira — naslov arhive je zato stajao uvučen
   u odnosu na mrežu, a opis proizvoda se protezao punom širinom.
   ===================================================================== */

.is-layout-constrained > .woocommerce-products-header,
.is-layout-constrained > .woocommerce-notices-wrapper,
.is-layout-constrained > .woocommerce-breadcrumb { max-width: 1320px; }
.woocommerce-products-header__title { margin: 0 0 6px; }

/* Galerija i sažetak jedan uz drugi; Woo ih slaže floatovima od 48%. */
.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary { width: auto !important; float: none !important; margin: 0 !important; min-width: 0; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .up-sells,
.single-product div.product .related,
.single-product div.product .product_meta { grid-column: 1 / -1; }

.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.single-product .flex-control-thumbs { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { width: 72px; }
.single-product .flex-control-thumbs img { width: 100%; height: auto; border: 1px solid var(--cee-hairline); cursor: pointer; }

.single-product .summary .price { margin: 0 0 18px; font-family: var(--cee-font-heading); font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.single-product .summary .woocommerce-product-details__short-description { margin: 0 0 22px; color: var(--cee-ink-muted); }

/* Kartice: Woo ih crta kao zaobljene jezičce s pozadinom; dizajn sustav
   nema radiuse, pa ostaje podvučeni red. */
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 24px; padding: 0;
  list-style: none; border-bottom: 1px solid var(--cee-hairline);
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li {
  margin: 0; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none;
}
.woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 20px 13px; text-decoration: none;
  font-family: var(--cee-font-heading); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cee-ink-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover { color: var(--cee-green); border-bottom-color: var(--cee-green); }

/* Opis traži čitljivu mjeru; puna širina od 1320px je predugačak redak. */
.woocommerce-Tabs-panel { max-width: 82ch; }
.woocommerce-Tabs-panel > h2:first-child { margin-top: 0; }
.woocommerce-Tabs-panel h2 { font-size: 24px; }
.woocommerce-Tabs-panel h3 { font-size: 18px; letter-spacing: normal; }
.woocommerce-Tabs-panel ul { margin: 0 0 18px; padding-left: 20px; }
.woocommerce-Tabs-panel li { margin-bottom: 6px; }

/* Tablica dodatnih informacija po uzoru na `.cee-tablica`. */
.woocommerce-product-attributes { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  text-align: left; padding: 12px 0; border-bottom: 1px solid rgba(23, 33, 21, .1); background: none;
}
.woocommerce-product-attributes th { font-weight: 500; width: 40%; }
.woocommerce-product-attributes td { color: var(--cee-ink-muted); }
.woocommerce-product-attributes td p { margin: 0; font-size: inherit; line-height: inherit; }

@media (max-width: 899px) {
  .single-product div.product { grid-template-columns: 1fr; }
}

/* Oznaka akcije na stranici proizvoda stoji preko gornjeg lijevog kuta slike. */
.cee-badge--proizvod { position: absolute; top: 12px; left: 12px; z-index: 2; }
.single-product div.product { position: relative; }

/* =====================================================================
   32. ODLOMCI S VLASTITOM MJEROM
   ---------------------------------------------------------------------
   Odlomak koji je `alignwide` a ima vlastiti `max-width` (obično 80ch radi
   čitljive duljine retka) WP-ov constrained raspored centrira unutar široke
   trake, s `margin-inline: auto !important`. Rezultat je tekst uvučen ~224px
   udesno dok naslov iznad stoji uz lijevi rub — izmjereno na 12 ekrana.
   Dizajn je lijevo poravnat, pa mjera ostaje a centriranje ide van.
   ===================================================================== */
.is-layout-constrained > .alignwide[style*="max-width"] {
  /* Treba lijevi rub iste široke trake u kojoj stoji naslov. Ta traka nije
     `wideSize` nego `wideSize` umanjen za vanjski padding s obje strane —
     WP tako racuna `alignwide` kad je `useRootPaddingAwareAlignments` ukljucen.
     Padding se ponavlja iz theme.json jer ga WP ne izlaze kao varijablu na
     `:root`, nego samo na omotacu bloka. */
  --cee-traka: calc(var(--wp--style--global--wide-size, 1320px) - 2 * clamp(20px, 3vw, 40px));
  margin-left: max(0px, calc((100% - var(--cee-traka)) / 2)) !important;
  margin-right: auto !important;
}

/* Slika na mjestu okvira `.cee-foto-slot` — isti omjer i ponašanje. */
.cee-foto { width: 100%; height: auto; display: block; }

/* =====================================================================
   33. WEBSHOP: LISTA S FILTRIMA I STRANICA PROIZVODA
   ---------------------------------------------------------------------
   Handoff „webshop rasvjeta" (8. 10. 2026.), prototip
   `dizajn/webshop-rasvjeta/.../CEE Webshop Rasvjeta.dc.html`. Markup je u
   `inc/woo-lista.php` i `woocommerce/cee-ws-proizvod.php`. Prefiks `.cee-ws`
   jer `.cee-lista-*` i `.cee-katalog` već postoje za stari katalog.
   Brojke su prepisane iz prototipa; radijus 0 svuda osim palca klizača.
   ===================================================================== */
.cee-ws {
  --ws-rub: rgba(23, 33, 21, .12);
  --ws-rub-kontrola: rgba(23, 33, 21, .20);
  --ws-rub-kartica: rgba(23, 33, 21, .14);
  --ws-tint: rgba(0, 115, 66, .08);
  --ws-tint-chip: rgba(0, 115, 66, .06);
  color: var(--cee-ink);
}
.cee-ws a { text-decoration: none; }
/* Prototip ne postavlja prored, pa je svugdje `normal` osim gdje je izričito
   zadan. Tema stavlja 1.6–1.7 na p i a; ovdje se to vraća na naslijeđeno.
   :where drži specifičnost na jednoj klasi, pa pravila ispod i dalje vrijede. */
.cee-ws, .cee-ws-pp { line-height: normal; }
.cee-ws :where(p, a, span, strong, small, label, output, button, s, h1, h2, h3),
.cee-ws-pp :where(p, a, span, strong, small, label, output, button, s, h1, h2, h3) { line-height: inherit; }
.cee-ws.je-ucitavanje .cee-ws__rezultati { opacity: .55; transition: opacity .15s; }

.cee-ws__mrvice { padding: 22px 0 0; }
.cee-ws__mrvice .sep { color: var(--cee-ink-muted); }
.cee-ws__mrvice-ovdje { color: var(--cee-ink); }

.cee-ws__glava { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-top: 20px; }
.cee-ws__glava h1 {
  margin: 0; font-family: var(--cee-font-heading); font-size: 48px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}
.cee-ws__glava p { margin: 0; padding-bottom: 6px; font-size: 14px; color: var(--cee-ink-muted); }

/* ---- vrste (chipovi iznad liste) ---- */
.cee-ws__vrste { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 26px; }
.cee-ws-vrsta {
  display: flex; align-items: baseline; gap: 8px; padding: 11px 18px;
  font-family: var(--cee-font-heading); font-size: 13.5px; font-weight: 500;
  background: #FFFFFF; border: 1px solid var(--ws-rub-kontrola); color: var(--cee-ink);
}
.cee-ws-vrsta span { font-size: 12px; font-weight: 500; color: var(--cee-ink-muted); }
.cee-ws-vrsta:hover { border-color: var(--cee-green); color: var(--cee-ink); }
.cee-ws-vrsta.je-odabrana { background: var(--ws-tint); border-color: var(--cee-green); color: var(--cee-green); font-weight: 600; }

/* ---- raspored ---- */
.cee-ws__tijelo { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; align-items: start; padding: 28px 0 48px; }
.cee-ws__mobil-traka { display: none; }

/* ---- bočni filtri ---- */
.cee-ws-filtri__glava { display: flex; align-items: baseline; padding-bottom: 14px; }
.cee-ws-filtri__naslov {
  font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cee-green);
}
.cee-ws-filtri__ocisti { margin-left: auto; font-size: 12.5px; color: var(--cee-ink-muted); text-decoration: underline !important; }

.cee-ws-grupa { border-top: 1px solid var(--ws-rub); }
.cee-ws-grupa > summary {
  display: flex; align-items: center; gap: 8px; padding: 15px 0; cursor: pointer; list-style: none;
}
.cee-ws-grupa > summary::-webkit-details-marker { display: none; }
.cee-ws-grupa__naslov { font-family: var(--cee-font-heading); font-size: 14.5px; font-weight: 600; }
.cee-ws-grupa__broj { background: var(--cee-green); color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.cee-ws-grupa__znak { margin-left: auto; font-size: 15px; color: var(--cee-ink-muted); line-height: 1; }
.cee-ws-grupa__znak::before { content: "+"; }
.cee-ws-grupa[open] .cee-ws-grupa__znak::before { content: "−"; }
.cee-ws-grupa__sadrzaj { padding: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.cee-ws-grupa__uputa { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cee-ink-muted); }

.cee-ws-opcija { color: var(--cee-ink); }
.cee-ws-opcija.je-prazna { opacity: .4; }

/* lista s kvačicom */
.cee-ws-opcije--lista { display: flex; flex-direction: column; gap: 9px; }
.cee-ws-opcije--lista .cee-ws-opcija { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cee-ws-opcija__kvacica {
  width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid rgba(23, 33, 21, .4); background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 10px; font-weight: 700;
}
.cee-ws-opcija.je-odabrana .cee-ws-opcija__kvacica { background: var(--cee-green); border-color: var(--cee-green); }
.cee-ws-opcija.je-odabrana .cee-ws-opcija__kvacica::before { content: "✓"; }
.cee-ws-opcija.je-odabrana .cee-ws-opcija__ime { color: var(--cee-green); font-weight: 600; }
.cee-ws-opcija__pod { font-size: 12px; color: var(--cee-ink-muted); }
.cee-ws-opcija__broj { margin-left: auto; font-size: 12.5px; color: var(--cee-ink-muted); }
.cee-ws-opcije--lista .cee-ws-opcija:hover .cee-ws-opcija__kvacica { border-color: var(--cee-green); }

/* temperatura: tri pločice s uzorkom svjetla */
.cee-ws-opcije--temperatura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cee-ws-opcije--temperatura .cee-ws-opcija { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--ws-rub-kartica); }
.cee-ws-opcije--temperatura .cee-ws-opcija.je-odabrana { border-color: var(--cee-green); box-shadow: inset 0 0 0 1px var(--cee-green); }
.cee-ws-opcija__uzorak { height: 34px; border-bottom: 1px solid rgba(23, 33, 21, .08); }
.cee-ws-opcije--temperatura .cee-ws-opcija__tekst { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 1px; }
.cee-ws-opcije--temperatura strong { font-size: 12.5px; font-weight: 600; }
.cee-ws-opcije--temperatura small { font-size: 11px; color: var(--cee-ink-muted); }

/* boja kućišta: kvadrati 32 px */
.cee-ws-opcije--boja { display: flex; flex-wrap: wrap; gap: 14px; }
.cee-ws-opcije--boja .cee-ws-opcija { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cee-ws-opcija__kvadrat { width: 32px; height: 32px; border: 1px solid rgba(23, 33, 21, .22); }
.cee-ws-opcije--boja .cee-ws-opcija.je-odabrana .cee-ws-opcija__kvadrat { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--cee-green); }
.cee-ws-opcije--boja .cee-ws-opcija__tekst { font-size: 11.5px; text-align: center; }
.cee-ws-opcije--boja small { font-size: inherit; color: var(--cee-ink-muted); }

/* cijena */
.cee-ws-cijena { border-top: 1px solid var(--ws-rub); padding: 15px 0 18px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cee-ws-cijena__glava { display: flex; align-items: baseline; }
.cee-ws-cijena__glava span { font-family: var(--cee-font-heading); font-size: 14.5px; font-weight: 600; }
.cee-ws-cijena__glava output { margin-left: auto; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--cee-green); }
.cee-ws-cijena__granice { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--cee-ink-muted); }
.cee-ws input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; padding: 0;
  background: transparent; border: 0; display: block;
}
.cee-ws input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: rgba(23, 33, 21, .16); }
.cee-ws input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%;
  background: var(--cee-green); cursor: grab; box-shadow: 0 0 0 5px rgba(0, 115, 66, .14);
}
.cee-ws input[type="range"]::-moz-range-track { height: 3px; background: rgba(23, 33, 21, .16); }
.cee-ws input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--cee-green); box-shadow: 0 0 0 5px rgba(0, 115, 66, .14); }

/* prekidači */
.cee-ws-prekidaci { border-top: 1px solid var(--ws-rub); border-bottom: 1px solid var(--ws-rub); padding: 12px 0; display: flex; flex-direction: column; }
.cee-ws-prekidac { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--cee-ink); }
.cee-ws-prekidac small { font-size: 12.5px; color: var(--cee-ink-muted); }
.cee-ws-prekidac__staza { margin-left: auto; width: 34px; height: 18px; background: rgba(23, 33, 21, .22); position: relative; flex: none; transition: background .15s; }
.cee-ws-prekidac__staza::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #FFFFFF; transition: left .15s; }
.cee-ws-prekidac.je-ukljucen .cee-ws-prekidac__staza { background: var(--cee-green); }
.cee-ws-prekidac.je-ukljucen .cee-ws-prekidac__staza::after { left: 18px; }

/* ---- traka iznad rezultata ---- */
.cee-ws__rezultati { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cee-ws-traka { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.cee-ws-traka__broj { font-size: 14px; color: var(--cee-ink-muted); margin-right: 6px; }
.cee-ws-traka__broj strong { color: var(--cee-ink); font-weight: 600; }
.cee-ws-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid rgba(0, 115, 66, .4); background: var(--ws-tint-chip); color: var(--cee-green);
  font-size: 12.5px; font-weight: 600;
}
.cee-ws-chip span { font-size: 14px; line-height: 1; }
.cee-ws-chip:hover { background: var(--ws-tint); color: var(--cee-green-hover); }
.cee-ws-sort { margin-left: auto; display: flex; border: 1px solid var(--ws-rub-kartica); padding: 3px; }
.cee-ws-sort a { padding: 7px 12px; font-family: var(--cee-font-heading); font-size: 12px; color: var(--cee-ink-muted); }
.cee-ws-sort a.je-odabran { background: var(--cee-green); color: #FFFFFF; }

/* ---- mreža i kartica ---- */
.cee-ws-mreza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cee-ws-kartica {
  display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--ws-rub);
  color: var(--cee-ink); transition: border-color .15s;
}
.cee-ws-kartica:hover, .cee-ws-kartica:focus-visible { border-color: var(--cee-green); color: var(--cee-ink); }
.cee-ws-kartica__ploca {
  aspect-ratio: 1 / 1; background: var(--cee-panel); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px;
  border-bottom: 1px solid rgba(23, 33, 21, .08);
}
/* Fotografije proizvoda su izrezi na bijelom; multiply ih stapa s pločom. */
.cee-ws-kartica__ploca img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 14%; mix-blend-mode: multiply;
}
.cee-ws-kartica__oznake { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; align-items: center; gap: 8px; min-height: 24px; z-index: 1; }
.cee-ws-akcija {
  background: var(--cee-green); color: #FFFFFF; font-family: var(--cee-font-heading); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px;
}
.cee-ws-kartica__vrsta {
  margin-left: auto; font-family: var(--cee-font-heading); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-ws-kartica__broj { font-family: var(--cee-font-heading); font-size: 38px; line-height: 1; letter-spacing: -.03em; color: var(--cee-green); }
.cee-ws-kartica__tijelo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cee-ws-kartica__brend {
  font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cee-ink-muted);
}
.cee-ws-kartica__naziv { font-family: var(--cee-font-heading); font-size: 16px; line-height: 1.25; }
.cee-ws-kartica__spec { font-size: 13px; color: var(--cee-ink-muted); }
.cee-ws-kartica__boje { display: flex; align-items: center; gap: 5px; margin-top: 4px; min-height: 14px; }
.cee-ws-kvadrat { width: 14px; height: 14px; border: 1px solid rgba(23, 33, 21, .25); flex: none; }
.cee-ws-kartica__boje-tekst { font-size: 12px; color: var(--cee-ink-muted); margin-left: 4px; }
.cee-ws-kartica__boje-tekst--sama { margin-left: 0; }
.cee-ws-kartica__dno { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 12px; }
.cee-ws-kartica__cijena { font-family: var(--cee-font-heading); font-size: 19px; letter-spacing: -.02em; }
.cee-ws-kartica__cijena.je-akcija { color: var(--cee-green); }
.cee-ws-kartica__cijena--upit { font-size: 15px; color: var(--cee-ink-muted); }
.cee-ws-kartica__stara { font-size: 13px; color: var(--cee-ink-muted); }
.cee-ws-kartica__zaliha { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cee-ink-muted); }
.cee-ws-kartica__zaliha.je-na-zalihi { color: var(--cee-green); }

/* mala kartica („Iz iste vrste") */
.cee-ws-kartica--mala .cee-ws-kartica__ploca { aspect-ratio: auto; height: 150px; padding: 14px 16px; }
.cee-ws-kartica--mala .cee-ws-kartica__ploca img { padding: 10%; }
.cee-ws-kartica--mala .cee-ws-kartica__broj { font-size: 28px; }
.cee-ws-kartica--mala .cee-ws-kartica__tijelo { padding: 14px 16px 16px; gap: 4px; }
.cee-ws-kartica--mala .cee-ws-kartica__naziv { font-size: 15px; }
.cee-ws-kartica--mala .cee-ws-kartica__spec { font-size: 12.5px; }
.cee-ws-kartica--mala .cee-ws-kartica__dno { padding-top: 8px; }
.cee-ws-kartica--mala .cee-ws-kartica__cijena { font-size: 17px; }

/* prazan rezultat */
.cee-ws-prazno { background: var(--cee-panel); padding: 48px 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cee-ws-prazno p { margin: 0; font-size: 15px; color: var(--cee-ink-muted); }
.cee-ws-prazno .cee-ws-prazno__naslov { font-family: var(--cee-font-heading); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--cee-ink); }

/* gumbi */
.cee-ws-gumb-obrub, .cee-ws-gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--cee-font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
}
.cee-ws-gumb-obrub { padding: 13px 22px; border: 1px solid var(--cee-hairline-strong); background: #FFFFFF; color: var(--cee-ink); }
.cee-ws-gumb-obrub:hover { border-color: var(--cee-ink); color: var(--cee-ink); }
.cee-ws-gumb { border: 0; background: var(--cee-grad); color: #FFFFFF; padding: 17px 28px; font-size: 13.5px; }
.cee-ws-gumb:hover { background: var(--cee-grad-hover); color: #FFFFFF; }
.cee-ws-gumb:disabled { opacity: .5; cursor: not-allowed; }

/* ---- mobilni panel (zatvoren i skriven na desktopu) ---- */
.cee-ws-panel { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: flex-end; }
.cee-ws-panel[hidden] { display: none; }
.cee-ws-panel__pozadina { position: absolute; inset: 0; background: rgba(23, 33, 21, .45); opacity: 0; transition: opacity .2s; }
.cee-ws-panel__list {
  position: relative; height: 88%; background: #FFFFFF; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .22s ease;
}
.cee-ws-panel.je-otvoren .cee-ws-panel__pozadina { opacity: 1; }
.cee-ws-panel.je-otvoren .cee-ws-panel__list { transform: none; }
.cee-ws-panel.bez-animacije .cee-ws-panel__list, .cee-ws-panel.bez-animacije .cee-ws-panel__pozadina { transition: none; }
.cee-ws-panel__rucka { display: flex; justify-content: center; padding: 8px 0 0; }
.cee-ws-panel__rucka::before { content: ""; width: 40px; height: 4px; background: rgba(23, 33, 21, .2); }
.cee-ws-panel__glava { display: flex; align-items: center; padding: 12px 18px 14px; border-bottom: 1px solid var(--ws-rub); }
.cee-ws-panel__glava > span { font-family: var(--cee-font-heading); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.cee-ws-panel__ocisti { margin-left: 14px; font-size: 13px; color: var(--cee-ink-muted); text-decoration: underline !important; }
.cee-ws-panel__glava button {
  margin-left: auto; margin-right: -12px; width: 44px; height: 44px; border: 0; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--cee-ink); cursor: pointer;
}
.cee-ws-panel__sadrzaj { flex: 1; overflow-y: auto; padding: 4px 18px 18px; overscroll-behavior: contain; }
.cee-ws-panel__aktivni { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0 4px; }
.cee-ws-panel__aktivni .cee-ws-chip { font-size: 12px; padding: 6px 9px; gap: 6px; }
.cee-ws-panel__grupa { padding: 18px 0 4px; }
.cee-ws-panel__grupa:first-of-type { padding-top: 16px; }
.cee-ws-panel__naslov { margin: 0 0 10px; font-family: var(--cee-font-heading); font-size: 14.5px; font-weight: 600; }
.cee-ws-panel__uputa { margin: -6px 0 6px; font-size: 12px; color: var(--cee-ink-muted); }
.cee-ws-panel__opcije { display: flex; gap: 6px; flex-wrap: wrap; }
.cee-ws-pchip {
  min-height: 40px; display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 12px;
  font-size: 13px; font-weight: 500;
  background: #FFFFFF; border: 1px solid var(--ws-rub-kontrola); color: var(--cee-ink);
}
.cee-ws-pchip small { font-size: inherit; color: var(--cee-ink-muted); font-weight: 500; }
.cee-ws-pchip.je-odabrana { background: var(--ws-tint); border-color: var(--cee-green); color: var(--cee-green); font-weight: 600; }
.cee-ws-pchip.je-prazna { opacity: .4; color: rgba(23, 33, 21, .45); }
.cee-ws-pchip__uzorak { width: 14px; height: 14px; border: 1px solid rgba(23, 33, 21, .25); }
.cee-ws-cijena--panel { border-top: 0; padding: 20px 0 4px; gap: 10px; }
.cee-ws-cijena--panel .cee-ws-cijena__glava output { font-size: 14px; }
.cee-ws-cijena--panel input[type="range"] { height: 28px; }
.cee-ws-prekidaci--panel { border: 0; padding: 10px 0 0; }
.cee-ws-prekidaci--panel .cee-ws-prekidac { min-height: 48px; padding: 0; border-top: 1px solid rgba(23, 33, 21, .1); font-size: 14.5px; }
.cee-ws-prekidaci--panel .cee-ws-prekidac__staza { width: 40px; height: 22px; }
.cee-ws-prekidaci--panel .cee-ws-prekidac__staza::after { top: 3px; left: 3px; width: 16px; height: 16px; }
.cee-ws-prekidaci--panel .cee-ws-prekidac.je-ukljucen .cee-ws-prekidac__staza::after { left: 21px; }
.cee-ws-panel__dno { padding: 12px 18px 22px; border-top: 1px solid var(--ws-rub); background: #FFFFFF; }
.cee-ws-panel__dno .cee-ws-gumb { width: 100%; height: 52px; padding: 0; }
html.cee-ws-zakljucano { overflow: hidden; }

@media (max-width: 1100px) {
  .cee-ws-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cee-ws__mrvice { display: none; }
  .cee-ws__glava { padding-top: 18px; }
  .cee-ws__glava h1 { font-size: 32px; }
  .cee-ws__glava p { display: none; }
  .cee-ws__vrste {
    flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 16px 0 2px;
    margin-inline: calc(-1 * clamp(20px, 3vw, 40px)); padding-inline: clamp(20px, 3vw, 40px);
    scrollbar-width: none;
  }
  .cee-ws__vrste::-webkit-scrollbar { display: none; }
  .cee-ws-vrsta { flex: none; padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .cee-ws-vrsta span { display: none; }

  .cee-ws__mobil-traka {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: sticky; top: 0; z-index: 30;
    background: #FFFFFF; padding: 12px 0; margin-top: 10px; border-bottom: 1px solid var(--ws-rub);
    margin-inline: calc(-1 * clamp(20px, 3vw, 40px)); padding-inline: clamp(20px, 3vw, 40px);
  }
  .cee-ws__mobil-filtri, .cee-ws__mobil-sort {
    height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  }
  .cee-ws__mobil-filtri {
    border: 1px solid var(--cee-ink); background: var(--cee-ink); color: #FFFFFF;
    font-family: var(--cee-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  }
  .cee-ws__mobil-filtri span { background: #FFFFFF; color: var(--cee-ink); padding: 1px 7px; font-size: 11.5px; }
  .cee-ws__mobil-sort { border: 1px solid var(--cee-hairline-strong); background: #FFFFFF; color: var(--cee-ink); font-size: 13.5px; }
  .cee-ws__mobil-sort span { font-size: 10px; color: var(--cee-ink-muted); }

  .cee-ws__tijelo { display: block; padding: 12px 0 28px; }
  .cee-ws-filtri { display: none; }
  .cee-ws__rezultati { gap: 12px; }
  .cee-ws-traka { min-height: 0; }
  .cee-ws-traka .cee-ws-chip, .cee-ws-sort { display: none; }
  .cee-ws-traka__broj { font-size: 13px; }

  .cee-ws-mreza { gap: 10px; }
  .cee-ws-kartica__ploca { padding: 10px 12px; }
  .cee-ws-kartica__oznake { top: 10px; left: 12px; right: 12px; min-height: 20px; }
  .cee-ws-kartica__vrsta { display: none; }
  .cee-ws-akcija { font-size: 10px; padding: 4px 7px; }
  .cee-ws-kartica__broj { font-size: 26px; }
  .cee-ws-kartica__tijelo { padding: 10px 12px 12px; gap: 4px; }
  .cee-ws-kartica__brend { display: none; }
  .cee-ws-kartica__naziv { font-family: var(--cee-font-body); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
  .cee-ws-kartica__spec { font-size: 11.5px; }
  .cee-ws-kartica__boje { min-height: 11px; gap: 4px; margin-top: 2px; }
  .cee-ws-kvadrat { width: 11px; height: 11px; }
  .cee-ws-kartica__boje-tekst { display: none; }
  .cee-ws-kartica__dno { gap: 6px; padding-top: 6px; }
  .cee-ws-kartica__cijena { font-size: 16px; }
  .cee-ws-kartica__stara { font-size: 11.5px; }
  .cee-ws-kartica__zaliha { display: none; }
  .cee-ws-prazno { padding: 24px 20px; gap: 12px; }
  .cee-ws-prazno .cee-ws-prazno__naslov { font-size: 18px; }
  .cee-ws-prazno p:not(.cee-ws-prazno__naslov) { display: none; }
}

/* ---------------------------------------------------------------------
   Stranica proizvoda
   --------------------------------------------------------------------- */
.single-product div.product.cee-ws-pp { display: block; position: relative; }
.cee-ws-pp {
  --ws-rub: rgba(23, 33, 21, .12);
  --ws-rub-kartica: rgba(23, 33, 21, .14);
  color: var(--cee-ink);
}
.cee-ws-pp a { text-decoration: none; }
.cee-ws-pp__vrh { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: start; padding-top: 28px; }

.cee-ws-pp__galerija { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.cee-ws-pp__galerija:not(:has(.cee-ws-pp__slicice)) { grid-template-columns: minmax(0, 1fr); }
.cee-ws-pp__slicice { display: flex; flex-direction: column; gap: 8px; }
.cee-ws-pp__slicice button {
  aspect-ratio: 1 / 1; padding: 0; background: var(--cee-panel); border: 1px solid var(--ws-rub);
  cursor: pointer; overflow: hidden;
}
.cee-ws-pp__slicice button.je-odabrana { border-color: var(--cee-green); }
.cee-ws-pp__slicice img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; display: block; }
.cee-ws-pp__slika {
  aspect-ratio: 1 / 1; background: var(--cee-panel); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 28px;
}
.cee-ws-pp__slika img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.cee-ws-pp__slika .cee-ws-akcija { position: absolute; top: 26px; left: 28px; z-index: 1; }
.cee-ws-pp__broj { font-family: var(--cee-font-heading); font-size: 72px; line-height: 1; letter-spacing: -.03em; color: var(--cee-green); }
.cee-ws-pp__tocke { display: none; }

.cee-ws-pp__info { display: flex; flex-direction: column; }
.cee-ws-pp__kicker {
  margin: 0 0 12px; font-family: var(--cee-font-heading); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cee-green);
}
.cee-ws-pp .cee-ws-pp__naslov {
  margin: 0 0 10px; font-family: var(--cee-font-heading); font-size: 38px; font-weight: 700;
  letter-spacing: -.025em; line-height: 1.05; text-wrap: balance;
}
.cee-ws-pp__uvod { margin: 0 0 24px; font-size: 15.5px; line-height: 1.65; color: var(--cee-ink-muted); max-width: 52ch; }
.cee-ws-pp__kljucni {
  display: grid; grid-template-columns: repeat(var(--stupci, 3), minmax(0, 1fr));
  border-top: 1px solid var(--ws-rub-kartica); border-bottom: 1px solid var(--ws-rub-kartica); margin-bottom: 26px;
}
.cee-ws-pp__kljucni > div { padding: 16px 0 16px 18px; border-left: 1px solid var(--ws-rub-kartica); }
.cee-ws-pp__kljucni p { margin: 0; }
.cee-ws-pp__kljucni p:first-child { font-family: var(--cee-font-heading); font-size: 22px; letter-spacing: -.025em; line-height: 1; color: var(--cee-green); }
.cee-ws-pp__kljucni p:last-child { margin-top: 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cee-ink-muted); }
.cee-ws-pp__boje { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.cee-ws-pp__boje p { margin: 0; font-size: 13.5px; }
.cee-ws-pp__boje p span { color: var(--cee-ink-muted); }
.cee-ws-pp__boje p strong { font-weight: 600; }
.cee-ws-pp__boje [role="radiogroup"] { display: flex; gap: 10px; flex-wrap: wrap; }
.cee-ws-pp__boja { width: 40px; height: 40px; padding: 0; cursor: pointer; border: 1px solid rgba(23, 33, 21, .25); }
.cee-ws-pp__boja.je-odabrana { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--cee-green); }
.cee-ws-pp__cijena { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.cee-ws-pp__iznos { font-family: var(--cee-font-heading); font-size: 40px; letter-spacing: -.03em; line-height: 1; }
.cee-ws-pp__iznos.je-akcija { color: var(--cee-green); }
.cee-ws-pp__iznos--upit { font-size: 28px; color: var(--cee-ink-muted); }
.cee-ws-pp__stara { font-size: 16px; color: var(--cee-ink-muted); }
.cee-ws-pp__zaliha-kratko { display: none; }
.cee-ws-pp__pdv { margin: 0 0 18px; font-size: 12.5px; color: var(--cee-ink-muted); }
.cee-ws-pp__pdv span { font-weight: 600; }
.cee-ws-pp__pdv .je-na-zalihi { color: var(--cee-green); }

.cee-ws-pp__kosarica { display: flex; gap: 10px; margin: 0 0 24px; }
.cee-ws-kolicina { display: flex; border: 1px solid var(--cee-hairline-strong); flex: none; }
.cee-ws-kolicina button { width: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--cee-ink); padding: 0; }
.cee-ws-kolicina input {
  width: 40px; border: 0 !important; padding: 0 !important; text-align: center; font-size: 15px; font-weight: 600;
  background: transparent !important; -moz-appearance: textfield; appearance: textfield; color: var(--cee-ink);
}
.cee-ws-kolicina input::-webkit-inner-spin-button, .cee-ws-kolicina input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cee-ws-pp__dodaj { flex: 1; }
.cee-ws-pp__dodaj-mobil { display: none; }
.cee-ws-pp__upit { align-self: flex-start; margin-bottom: 24px; }

.cee-ws-pp__retci { display: flex; flex-direction: column; border-top: 1px solid var(--ws-rub); }
.cee-ws-pp__retci > div { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ws-rub); font-size: 14px; }
.cee-ws-pp__retci > div > span:first-child { width: 150px; flex: none; color: var(--cee-ink-muted); }
.cee-ws-pp__retci a { margin-left: 6px; font-weight: 600; color: var(--cee-green); }
.cee-ws-pp__siva { color: var(--cee-ink-muted); }
.cee-ws-pp__mobil-info { display: none; }

.cee-ws-pp__tabovi { padding-top: 56px; }
.cee-ws-pp__tab-gumbi { display: flex; border-bottom: 1px solid var(--ws-rub-kartica); }
.cee-ws-pp__tab-gumbi button {
  padding: 14px 22px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  cursor: pointer; font-family: var(--cee-font-heading); font-size: 14px; font-weight: 500; color: var(--cee-ink-muted);
}
.cee-ws-pp__tab-gumbi button[aria-selected="true"] { border-bottom-color: var(--cee-green); color: var(--cee-ink); font-weight: 600; }
.cee-ws-pp__panel { padding-top: 26px; max-width: 820px; }
.cee-ws-pp__panel[hidden] { display: none; }
.cee-ws-pp__spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.cee-ws-pp__spec > div { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(23, 33, 21, .1); font-size: 14px; }
.cee-ws-pp__spec > div > span:first-child { width: 140px; flex: none; color: var(--cee-ink-muted); }
.cee-ws-pp__opis p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; max-width: 66ch; }
.cee-ws-pp__dostava { display: flex; flex-direction: column; gap: 10px; }
.cee-ws-pp__dostava p { margin: 0; font-size: 15.5px; line-height: 1.6; }

.cee-ws-pp__srodni { padding: 56px 0 48px; }
.cee-ws-pp__srodni-glava { display: flex; align-items: flex-end; margin-bottom: 20px; }
.cee-ws-pp .cee-ws-pp__srodni-glava h2 { margin: 0; font-family: var(--cee-font-heading); font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.cee-ws-pp__srodni-glava a {
  margin-left: auto; font-family: var(--cee-font-heading); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--cee-green); padding-bottom: 4px; color: var(--cee-green);
}
.cee-ws-pp__srodni-mreza { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.cee-ws-toast {
  position: fixed; top: 90px; right: 40px; z-index: 1001; background: var(--cee-ink); color: #FFFFFF;
  padding: 14px 18px; font-size: 13.5px; display: flex; gap: 14px; align-items: center;
  box-shadow: 0 18px 40px -24px rgba(23, 33, 21, .6); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s;
}
.cee-ws-toast.je-vidljiv { opacity: 1; transform: none; }
.cee-ws-toast a { color: #9FD07A; font-weight: 600; }

@media (max-width: 1000px) {
  .cee-ws-pp__vrh { gap: 32px; }
  .cee-ws-pp__srodni-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cee-ws-pp .cee-ws__mrvice { display: none; }
  .cee-ws-pp__vrh { display: block; padding-top: 0; }
  .cee-ws-pp__galerija { display: block; margin-inline: calc(-1 * clamp(20px, 3vw, 40px)); }
  .cee-ws-pp__slicice { display: none; }
  .cee-ws-pp__slika { padding: 18px 20px; }
  .cee-ws-pp__slika .cee-ws-akcija { top: 18px; left: 20px; }
  .cee-ws-pp__broj { font-size: 52px; }
  .cee-ws-pp__tocke { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
  .cee-ws-pp__tocke button { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .cee-ws-pp__tocke span { width: 7px; height: 7px; background: rgba(23, 33, 21, .2); }
  .cee-ws-pp__tocke .je-odabrana span { background: var(--cee-green); }

  .cee-ws-pp__info { padding-top: 14px; }
  .cee-ws-pp__kicker { order: 1; margin-bottom: 8px; font-size: 11px; }
  .cee-ws-pp .cee-ws-pp__naslov { order: 2; font-size: 24px; line-height: 1.1; margin-bottom: 12px; }
  .cee-ws-pp__cijena { order: 3; gap: 10px; margin: 0; }
  .cee-ws-pp__iznos { font-size: 28px; }
  .cee-ws-pp__stara { font-size: 14px; }
  .cee-ws-pp__zaliha-kratko { display: inline; margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--cee-ink-muted); }
  .cee-ws-pp__zaliha-kratko.je-na-zalihi { color: var(--cee-green); }
  .cee-ws-pp__pdv { display: none; }
  /* Dodatna cijena je zakonska obveza, pa se — za razliku od napomene o
     PDV-u — na mobitelu ne skriva. Ide uz cijenu, inače bi je `order: 0`
     odnio na vrh stupca. */
  .cee-ws-pp__sidrena { order: 3; margin: 6px 0 0; }
  .cee-ws-pp__kljucni { order: 4; margin: 18px 0 0; border: 1px solid var(--ws-rub-kartica); }
  .cee-ws-pp__kljucni > div { padding: 12px; border-left: 0; box-shadow: -1px 0 0 0 var(--ws-rub-kartica); }
  .cee-ws-pp__kljucni p:first-child { font-size: 17px; letter-spacing: -.02em; }
  .cee-ws-pp__kljucni p:last-child { font-size: 10.5px; margin-top: 4px; }
  .cee-ws-pp__boje { order: 5; margin: 20px 0 0; }
  .cee-ws-pp__boja { width: 44px; height: 44px; }
  .cee-ws-pp__uvod { order: 6; margin: 20px 0 0; font-size: 15px; }
  .cee-ws-pp__retci { display: none; }
  .cee-ws-pp__mobil-info {
    display: flex; flex-direction: column; gap: 8px; margin-top: 22px; background: var(--cee-panel);
    padding: 16px; font-size: 13.5px; line-height: 1.5;
  }
  .cee-ws-pp__mobil-info span:last-child { color: var(--cee-ink-muted); }
  .cee-ws-pp__upit { order: 7; margin: 20px 0 0; }

  /* forma za košaricu postaje donja traka */
  .cee-ws-pp__kosarica {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; margin: 0; gap: 8px; align-items: center;
    background: #FFFFFF; border-top: 1px solid var(--ws-rub-kartica); padding: 12px 18px 20px;
  }
  .cee-ws-kolicina { height: 52px; }
  .cee-ws-kolicina button { width: 40px; }
  .cee-ws-kolicina input { width: 28px; }
  .cee-ws-pp__dodaj { height: 52px; padding: 0 12px; font-size: 13px; letter-spacing: .05em; }
  .cee-ws-pp__dodaj-desktop { display: none; }
  .cee-ws-pp__dodaj-mobil { display: inline; }
  .single-product:has(.cee-ws-pp__kosarica) { padding-bottom: 96px; }

  /* tabovi: na mobitelu samo tablica specifikacija */
  .cee-ws-pp__tabovi { padding-top: 22px; }
  .cee-ws-pp__tab-gumbi, #cee-panel-opis, #cee-panel-dost { display: none; }
  #cee-panel-spec { display: block !important; padding-top: 0; }
  .cee-ws-pp__spec { display: block; border-top: 1px solid var(--ws-rub-kartica); }
  .cee-ws-pp__spec > div { padding: 11px 0; font-size: 13.5px; gap: 12px; }
  .cee-ws-pp__spec > div > span:first-child { width: 118px; }

  .cee-ws-pp__srodni { padding: 40px 0 32px; }
  .cee-ws-pp .cee-ws-pp__srodni-glava h2 { font-size: 22px; }
  .cee-ws-pp__srodni-mreza { gap: 10px; }
  .cee-ws-toast { top: auto; bottom: 96px; left: 18px; right: 18px; flex-wrap: wrap; }
}

/* Ispravci nakon usporedbe s prototipom (usporedi-stilove.py, 8. 10. 2026.) */
.cee-ws-pp__boje p strong { color: var(--cee-ink); }
.cee-ws-panel__naslov { color: var(--cee-ink); }
.cee-ws-kartica--mala .cee-ws-kartica__naziv { line-height: normal; }
.cee-ws-kartica--mala .cee-ws-kartica__cijena { letter-spacing: normal; }
@media (max-width: 760px) {
  .cee-ws-kartica__cijena { letter-spacing: normal; }
  .cee-ws-pp__iznos { line-height: normal; }
  .cee-ws-pp__kljucni p:first-child { line-height: normal; }
}
/* Ista traka kao ostatak sajta (vidi sekciju 32): wideSize umanjen za vanjski
   padding. Bez ovoga je blok trgovine 1320 px, a prototip i sve druge
   stranice 1240 px — kartice su ispadale 9 % veće i rub nije bio poravnat
   sa zaglavljem. */
.cee-ws.alignwide, .cee-ws-pp.alignwide {
  max-width: calc(var(--wp--style--global--wide-size, 1320px) - 2 * clamp(20px, 3vw, 40px)) !important;
  margin-left: auto !important; margin-right: auto !important;
}

/* „Izdvojeno" na /webshop/: iste kartice kao u listi, četiri u redu. */
.cee-ws-mreza--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cee-ws-mreza--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cee-ws-mreza--4 { gap: 10px; } }

/* Skok s gumba „Pogledaj ponudu ↓" (hero landing stranica) na listu.
   Zaglavlje je u CSS-u `sticky`, ali mu je omotač template-parta kratak pa se
   u praksi odskrola sa stranicom (izmjereno) — dovoljan je mali razmak. */
.cee-ws { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(#ponuda) { scroll-behavior: smooth; }
}

/* Marke keramike u mega izborniku: tekst, ne poveznice (podstranice ne postoje). */
.cee-mega__marke { grid-column: 1 / -1; margin: 14px 0 0; font-size: 13px; color: var(--cee-ink-muted); }

/* Savjeti (inc/savjeti.php) */
.cee-savjeti .cee-featured { color: var(--cee-ink); text-decoration: none; margin-bottom: 20px; transition: border-color .2s; }
.cee-savjeti .cee-featured:hover { border-color: var(--cee-green); }
.cee-savjeti .cee-featured h2 { color: var(--cee-ink); }
.cee-savjeti .cee-featured__body p:not(.cee-featured__meta) { color: var(--cee-ink-muted); }
.cee-savjeti .cee-art-card h3 { color: var(--cee-ink); }
.cee-savjeti__stranice { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; font-size: 14px; color: var(--cee-ink-muted); }
.cee-savjeti__stranice a {
  font-family: var(--cee-font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 22px; border: 1px solid var(--cee-hairline-strong); color: var(--cee-ink); text-decoration: none;
}
.cee-savjeti__stranice a:hover { border-color: var(--cee-green); color: var(--cee-green); }

/* Footer na dnu i kad je sadržaj kratak (404, prazna košarica, kratki članak):
   prije je ispod footera ostajala bijela traka do dna prozora. */
.wp-site-blocks { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group:has(> main) { flex: 1 0 auto; }

/* Košarica, blagajna, moj račun (templates/page-cart|checkout|moj-racun.html) */
.cee-woo-stranica .wp-block-post-title { margin: 0 0 28px; }
.cee-woo-stranica .wp-block-post-content > .alignwide { margin-top: 0; }

/* Forme (inc/upiti.php): mamac za botove skriven, poruka nakon slanja. */
.cee-mamac { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cee-forma-poruka {
  margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--cee-green);
  background: rgba(0, 115, 66, .07); color: var(--cee-ink); font-size: 14.5px; line-height: 1.5;
}
.cee-forma-poruka--greska { border-left-color: #A32E1C; background: #F7E4E0; }
.cee-footer .cee-forma-poruka { background: rgba(255, 255, 255, .14); border-left-color: #FFFFFF; color: #FFFFFF; }

/* Poveznica „… →" ispod sekcije (`.cee-textlink`) u wp:html bloku nema
   `alignwide`, pa je dobivala zadanu širinu sadržaja i stajala 40 px lijevo
   od naslova i odlomaka (izmjereno na 11 stranica), a gola <a> čak 193 px.
   Ista traka i isti izračun kao u sekciji 32. Provjera: _rubovi-sekcija.mjs. */
/* Samo gdje su braća na širokoj traci (`alignwide`); u okvirima s užim
   stupcem (cee-hairline-box) poveznica u <p> već stoji uz odlomke. */
.is-layout-constrained:has(> .alignwide) > p:has(> .cee-textlink:only-child),
.is-layout-constrained:has(> .alignwide) > a.cee-textlink {
  --cee-traka: calc(var(--wp--style--global--wide-size, 1320px) - 2 * clamp(20px, 3vw, 40px));
  max-width: none;
  margin-left: max(0px, calc((100% - var(--cee-traka)) / 2)) !important;
  margin-right: auto !important;
}
.is-layout-constrained:has(> .alignwide) > a.cee-textlink { display: table; }

/* Popravci iz pregleda Claude Designa (8. 10.), provjereno na stagingu. */

/* Koraci: auto-fit je 6 koraka slagao kao 5 + 1 sa sivim praznim ostatkom
   reda (Montaza, Subvencije). Sest ide 3 × 2; 4–5 ostaje jedan red. */
@media (min-width: 720px) {
  .cee-koraci:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* Okvir: unutarnji constrained layout centrirao je sadrzaj na 820 px, pa je
   tekst pocinjao 210 px od lijevog ruba okvira. Sadrzaj ide uz lijevi rub,
   s jednakim razmakom sa svih strana. */
.cee-hairline-box.is-layout-constrained { padding: clamp(24px, 3vw, 40px) !important; }
.cee-hairline-box.is-layout-constrained > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 80ch; }

/* Kalkulator u gradient sekciji: `.cee-on-gradient p` bojio je oznaku i
   iznos u bijelo na bijeloj kartici („Snaga sustava" i „10" nevidljivi). */
.cee-on-gradient .cee-calc p, .cee-band-gradient .cee-calc p { color: var(--cee-ink); }
.cee-on-gradient .cee-calc .cee-calc__label, .cee-on-gradient .cee-calc .cee-calc__note,
.cee-band-gradient .cee-calc .cee-calc__label, .cee-band-gradient .cee-calc .cee-calc__note { color: var(--cee-ink-muted); }
.cee-on-gradient .cee-calc .cee-calc__naslov, .cee-band-gradient .cee-calc .cee-calc__naslov { color: var(--cee-green); }

/* CTA traka i podnožje namjerno se nastavljaju jedno na drugo. Bijeli razmak
   od 8 px (prijedlog Designa) Davor je odbio 8. 10.: djelovao je kao praznina. */

/* Kartica natjecaja bez oznake statusa (istekla) mora imati isti redak
   kao one s oznakom, inace naslov stoji 7 px vise od susjednih. */
.cee-natjecaj__meta { min-height: 28px; }

/* Vizual teme (8. 10.): proizvod iz trgovine u heroju, cijeli, na panelu.
   Fotografije proizvoda imaju bijelu pozadinu; `multiply` je stapa s panelom. */
.cee-hero-proizvod {
  aspect-ratio: 3 / 2; background: var(--cee-panel);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2vw, 24px);
}
.cee-hero-proizvod img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }

/* Široka slika teme ispod heroja (desno u heroju je forma ili kalkulator). */
.cee-tema-traka { margin: 0; }
.cee-tema-traka img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; }
@media (max-width: 781px) { .cee-tema-traka img { aspect-ratio: 3 / 2; } }

/* Slika koja se ne smije rezati (CEE, 22. 10.): presjek kuće sa sustavima
   i render baterijskih modula. Crteži i studijske snimke gube smisao čim im
   se odsiječe rub — tornjevi različitih visina baš su poanta slike — pa nema
   `aspect-ratio` ni `object-fit`, samo omeđena širina i zrak oko nje da
   podloga slike ne naliježe na tekst. */
.cee-slika-cijela { margin: clamp(28px, 4vw, 48px) auto; max-width: 980px; }
.cee-slika-cijela img { width: 100%; height: auto; display: block; }

/* Presjek kuće u desnom stupcu sekcije „Kako radi dizalica topline"
   (Davor, 22. 10.). Stupac je `minmax(0, .9fr)` uz `align-items: center`,
   pa slika samo prati širinu; bez `aspect-ratio`, jer crtež ne trpi rez. */
.cee-shema-stupac { margin: 0; min-width: 0; }
.cee-shema-stupac img { width: 100%; height: auto; display: block; }

/* Bilanca uređaja kao traka ispod te sekcije. Tri su broja i tri kratka
   opisa: u tri stupca pročitaju se u jednom pogledu, dok ih je uspravni
   okvir nizao jedan ispod drugoga. Crte između stupaca umjesto okvira oko
   svakog — brojevi se tako čitaju kao jedna računica, a ne kao tri kartice.
   Zadnji broj je taman, a ne zelen: zeleno je ono što ulazi, tamno ono što
   uređaj preda. Razlika je prenesena iz izvornog okvira. */
.cee-bilanca-traka { background: var(--cee-panel); margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(28px, 3.5vw, 44px) 0; }
.cee-bilanca-traka__inner { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px); }
.cee-bilanca-traka__kicker {
  margin: 0 0 18px; font-family: var(--cee-font-heading); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cee-green);
}
.cee-bilanca-traka__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.cee-bilanca-traka__stavka {
  display: flex; flex-direction: column; gap: 6px;
  padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--cee-hairline);
}
.cee-bilanca-traka__stavka:first-child { padding-left: 0; border-left: 0; }
.cee-bilanca-traka__kw {
  font-family: var(--cee-font-heading); font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1; letter-spacing: -.025em; color: var(--cee-green);
}
.cee-bilanca-traka__stavka--zbroj .cee-bilanca-traka__kw { color: var(--cee-ink); }
.cee-bilanca-traka__opis { font-size: 15px; line-height: 1.5; color: var(--cee-ink-muted); }
@media (max-width: 781px) {
  .cee-bilanca-traka__grid { grid-template-columns: 1fr; gap: 16px; }
  .cee-bilanca-traka__stavka { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--cee-hairline); }
  .cee-bilanca-traka__stavka:first-child { padding-top: 0; border-top: 0; }
}

/* Traka za privolu na analitičke kolačiće (22. 10. 2026., inc/kolacici.php).
   Dolje lijevo, uska: ne pokriva sadržaj ni gumb košarice, a ne glumi
   modalni prozor koji se mora odbaciti prije čitanja. Oba gumba su jednako
   istaknuta — odbijanje ne smije biti teže od pristanka. */
.cee-privola {
  position: fixed; z-index: 90; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  width: min(380px, calc(100vw - 24px));
  background: var(--cee-base); border: 1px solid var(--cee-hairline-strong);
  padding: 20px 22px; box-shadow: 0 10px 30px rgba(23, 33, 21, .12);
}
.cee-privola[hidden] { display: none; }
.cee-privola__tekst { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--cee-ink-muted); }
.cee-privola__tekst a { color: var(--cee-green); }
.cee-privola__gumbi { display: flex; gap: 10px; }
.cee-privola__gumb {
  flex: 1; cursor: pointer; border: 1px solid var(--cee-green); background: var(--cee-green);
  color: #FFFFFF; font-family: var(--cee-font-heading); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 12px 10px;
}
.cee-privola__gumb--tiho { background: transparent; color: var(--cee-ink); border-color: var(--cee-hairline-strong); }
@media (max-width: 480px) { .cee-privola { left: 12px; right: 12px; width: auto; } }

/* Znak partnera uz tekst (Markov-trade na servisu klima). Malen namjerno:
   nosi ga rečenica, nije samostalan blok. */
.cee-partner { margin: 18px 0 0; max-width: 168px; }
.cee-partner img { width: 100%; height: auto; display: block; }

/* =====================================================================
   SNALAŽENJE (handoff Designa, dizajn/snalazenje/ODGOVOR.md, 8. 10.)
   ===================================================================== */

/* Ljepljivo: omotač zaglavlja je ljepljiv s odmakom = visina gornje trake,
   pa se gornja traka odskrola, a glavni red i traka teme ostaju. Na mobitelu
   se glavni red skriva na skrol prema dolje promjenom `top` (ne transform:
   transform bi pomaknuo i fiksni mobilni izbornik koji je unutar zaglavlja).
   Varijable postavlja mega-menu.js. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; z-index: 70; background: #FFFFFF;
  top: calc(-1 * var(--cee-topbar-h, 0px));
  transition: top .2s;
}
.wp-site-blocks > header.wp-block-template-part.je-skriveno {
  top: calc(-1 * (var(--cee-topbar-h, 0px) + var(--cee-header-h, 56px)));
}
.cee-header { position: relative; top: auto; }
html { scroll-padding-top: calc(var(--cee-sticky-h, 112px) + 12px); }

/* ---- [NOVA] traka teme ---- */
.cee-tema-traka { background: #FFFFFF; border-bottom: 1px solid rgba(23, 33, 21, .14); }
.cee-tema-traka__inner {
  max-width: 1320px; margin: 0 auto; height: 48px;
  padding: 0 clamp(20px, 3vw, 40px);
  display: flex; align-items: stretch;
}
.cee-tema-traka__tema {
  display: flex; flex-direction: column; justify-content: center; flex: none;
  padding-right: 18px; margin-right: 6px; border-right: 1px solid rgba(23, 33, 21, .12);
}
.cee-tema-traka__div {
  display: block; font-family: var(--cee-font-heading); font-size: 10.5px; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase; color: #5C6157;
}
.cee-tema-traka__naziv {
  display: block; font-family: var(--cee-font-heading); font-size: 14.5px; font-weight: 700;
  line-height: 1.2; color: var(--cee-ink); white-space: nowrap;
}
.cee-tema-traka__kartice { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cee-tema-traka__kartice::-webkit-scrollbar { display: none; }
.cee-tema-traka__kartica {
  display: flex; align-items: center; padding: 0 13px; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; line-height: 1; color: #172115; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cee-tema-traka__kartica:hover { color: var(--cee-green); }
.cee-tema-traka__kartica.je-aktivna { font-weight: 600; border-bottom-color: #007342; }
.cee-tema-traka__trgovina,
.cee-tema-traka__gumb {
  align-self: center; flex: none; height: 34px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cee-font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.cee-tema-traka__trgovina {
  margin-left: auto; padding: 0 14px; color: var(--cee-ink);
  border: 1px solid rgba(23, 33, 21, .2);
}
.cee-tema-traka__trgovina:hover { color: var(--cee-green); border-color: var(--cee-green); }
.cee-tema-traka__gumb {
  margin-left: 12px; padding: 0 16px; color: #FFFFFF;
  background: var(--cee-grad); border: 1px solid transparent;
}
.cee-tema-traka__kartice + .cee-tema-traka__gumb { margin-left: auto; }
.cee-tema-traka__gumb:hover { filter: brightness(1.07); color: #FFFFFF; }
.cee-tema-traka__gumb.je-aktivan {
  background: rgba(0, 115, 66, .08); border-color: #007342; color: #007342; filter: none;
}
.cee-tema-traka__otvori, .cee-tema-traka__gumb-kratko { display: none; }

/* mobilni donji panel teme */
.cee-tema-panel { position: fixed; inset: 0; z-index: 110; }
.cee-tema-panel[hidden] { display: none; }
.cee-tema-panel__pozadina { position: absolute; inset: 0; background: rgba(23, 33, 21, .45); }
.cee-tema-panel__list {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto;
  background: #FFFFFF; padding-bottom: env(safe-area-inset-bottom);
}
.cee-tema-panel__glava {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px 12px 20px; border-bottom: 1px solid var(--cee-hairline);
}
.cee-tema-panel__glava button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--cee-ink); cursor: pointer;
}
.cee-tema-panel__red {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px;
  border-bottom: 1px solid var(--cee-hairline); font-size: 15px; color: var(--cee-ink); text-decoration: none;
}
.cee-tema-panel__red > span:last-child { margin-left: auto; color: var(--cee-green); }
.cee-tema-panel__red.je-aktivan { box-shadow: inset 3px 0 0 #007342; background: rgba(0, 115, 66, .06); font-weight: 600; }
.cee-tema-panel__red--trgovina { background: #F7F9F3; font-weight: 600; }
.cee-tema-panel__red--trgovina svg { color: var(--cee-green); flex: none; }

/* ---- [IZMJENA] zaglavlje: tihi gumb Trgovina kad postoji traka teme ---- */
.cee-trgovina.cee-trgovina--tiha {
  background: #FFFFFF; color: var(--cee-ink) !important; border: 1px solid rgba(23, 33, 21, .2);
}
.cee-trgovina.cee-trgovina--tiha:hover { color: var(--cee-green) !important; border-color: var(--cee-green); filter: none; }

/* ---- [IZMJENA] mega izbornik: „o temi" · divizija (bez ponude trgovine, Davor 9. 10.) ---- */
.cee-mega__naslov {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  font-family: var(--cee-font-heading); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cee-ink-muted);
}
.cee-mega__o { display: flex; flex-direction: column; align-self: start; }
.cee-mega__o a {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid rgba(23, 33, 21, .1); font-size: 15px; color: var(--cee-ink); text-decoration: none;
}
.cee-mega__o a span { margin-left: auto; color: var(--cee-green); }
.cee-mega__o a:hover { color: var(--cee-green); }
.cee-mega__adr a { color: inherit; }

/* ---- mobitel i tablet: traka 52 px, zaglavlje se skriva, Trgovina samo ikona ---- */
@media (max-width: 1099px) {

  .cee-tema-traka__inner { height: 52px; padding: 0 0 0 clamp(20px, 3vw, 40px); }
  .cee-tema-traka__tema, .cee-tema-traka__kartice, .cee-tema-traka__trgovina { display: none; }
  .cee-tema-traka__otvori {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    flex: 1; min-width: 0; position: relative; padding: 0 40px 0 0; margin: 0;
    background: none; border: 0; text-align: left; cursor: pointer; color: var(--cee-ink);
  }
  .cee-tema-traka__stranica {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--cee-font-heading); font-size: 14.5px; font-weight: 700; line-height: 1.25;
  }
  .cee-tema-traka__strelica {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(23, 33, 21, .2); font-size: 10px; color: var(--cee-ink-muted);
  }
  .cee-tema-traka__gumb { align-self: stretch; height: auto; margin-left: 0; padding: 0 16px; font-size: 11.5px; }
  .cee-tema-traka__gumb-dugo { display: none; }
  .cee-tema-traka__gumb-kratko { display: inline; }
}

/* ---- [IZMJENA] CTA traka i podnožje: tanka linija (Design, umjesto praznine) ---- */
footer.cee-footer { border-top: 1px solid rgba(255, 255, 255, .4); }
.cee-ws-grupa--kategorija .cee-ws-grupa__naslov b { font-weight: 600; color: var(--cee-green); }
.cee-ws-pp__retci > .cee-ws-pp__o-temi { background: rgba(0, 115, 66, .04); padding-inline: 12px; }
.cee-ws-pp__o-temi a { color: var(--cee-green); text-decoration: none; font-weight: 600; }
.cee-upit__od { margin: 0 0 14px; padding: 10px 12px; font-size: 14px; background: rgba(0, 115, 66, .06); border-left: 3px solid var(--cee-green); }
.cee-upit__od a { color: var(--cee-green); }

/* Traka teme: usklađeno s prototipom mjerenjem (usporedi-stilove + relativni
   položaji, 8. 10.): naziv 1.25 / −0.1px, kartice 2 px gore i prored normal,
   ukupna visina 48 px s rubom, neaktivne kartice prigušene osim „Pregled". */
.cee-tema-traka__naziv { line-height: 1.25; letter-spacing: -.1px; }
.cee-tema-traka__inner { height: 47px; }
.cee-tema-traka__kartica { padding-top: 2px; line-height: normal; color: #5C6157; }
.cee-tema-traka__kartica:first-child, .cee-tema-traka__kartica.je-aktivna { color: #172115; }
@media (max-width: 1099px) { .cee-tema-traka__inner { height: 51px; } } /* 52 px s rubom */
/* Prototip snalaženja: strelica aktivne teme ostaje prigušena (zelen je samo tekst). */
.cee-nav__list > li > a[aria-current="true"]:not([aria-expanded="true"]):not(:hover) span { color: var(--cee-ink-muted); }
/* Mobitel, usklađeno s prototipom (otisak 390 px): zaglavlje 56 px, oznake trake. */
@media (max-width: 1099px) {
  .cee-header__inner { padding-block: 6px 5px; } /* 56 px s rubom */
  .cee-tema-traka__otvori .cee-tema-traka__div { letter-spacing: .1em; line-height: 1.25; }
  .cee-tema-traka__stranica { line-height: 1.3; }
  .cee-tema-traka__strelica { font-size: 10px; }
}

/* Uz traku teme gumb Trgovina u zaglavlju je samo ikona (kao na mobitelu):
   s natpisom su stajala dva jednaka gumba „Trgovina" jedan iznad drugoga,
   jedan za cijelu trgovinu, drugi za trgovinu teme (Davor, 8. 10.). */
.cee-header__icons .cee-trgovina.cee-trgovina--ikona {
  width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: none;
}
.cee-header__icons .cee-trgovina.cee-trgovina--ikona .cee-trgovina__tekst { display: none; }
.cee-header__icons .cee-trgovina.cee-trgovina--ikona svg { width: 19px; height: 19px; }

/* Davor, 8. 10.: Trgovina je statična (uvijek zeleni gumb s natpisom u zaglavlju),
   a traka teme je samo navigacija — bez gumba sljedećeg koraka i bez trgovine.
   Kartice trake na mobitelu zauzimaju cijelu širinu (nema gumba desno). */
@media (max-width: 1099px) { .cee-tema-traka__inner { padding-right: 0; } .cee-tema-traka__otvori { padding-right: 52px; } }
@media (max-width: 1099px) { .cee-header__icons .cee-trgovina { min-height: 44px; } } /* dodirna površina */

/* Mobitel: traka teme već pokazuje temu i stranicu, pa je putanja ispod nje
   ista informacija dvaput (Davor, 8. 10.). Skriva se samo vizualno; schema.org
   BreadcrumbList ostaje u stranici. */
@media (max-width: 1099px) {
  body.ima-tema-traku .cee-breadcrumb { display: none; }
  body.ima-tema-traku .wp-block-group.alignfull:has(> .cee-breadcrumb:only-child),
  body.ima-tema-traku .wp-block-group.alignfull:has(> .wp-block-html > .cee-breadcrumb:only-child) { display: none; }
}

/* =====================================================================
   Usklađivanje s artefaktom (alati/usporedi-tekst.mjs, uparivanje po tekstu,
   8. 10. navečer). Lijevo dizajn, desno bilo na stagingu.
   ===================================================================== */
/* Naslov druge kolone uz h2 u prvoj: dizajn ga crta kao h2 (34/700/−.025em), bilo 20px/500. */
.wp-block-columns:has(> .wp-block-column > h2.wp-block-heading) > .wp-block-column > h3.wp-block-heading {
  font-size: var(--wp--preset--font-size--naslov-2); font-weight: 700; line-height: 1.1; letter-spacing: -.025em;
}
/* Oznake u kalkulatoru: 11.5px verzal .1em (bilo 12.5px obično). */
.cee-calc__cell dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; }
/* Odlomci izravno u sekciji ili koloni: 16px (bilo 15.5px; 15.5 ostaje u karticama). */
.wp-block-post-content :is(.wp-block-group, .wp-block-column):not(.cee-hairline-box) > p.wp-block-paragraph:not(.has-lead-font-size):not([style*="font-size"]):not([class*="cee-g-"]) { font-size: 16px; }
/* Napomena ispod tablice serija (u sadržaju inline 14px): dizajn 13.5px. */
.cee-tablica-wrap > p { font-size: 13.5px !important; }
/* Reference: tekst 14.5px, naslov 19px (bilo 14 / 18). Boja mjesta ostaje tamnozelena
   (dizajnova svijetla #6C9D36 na bijelom nema dovoljan kontrast). */
.cee-ref__card p:last-child { font-size: 14.5px; }
:is(.page-id-29, .page-id-30, .page-id-31) :is(.cee-ref__card h3, .cee-ref h3) { font-size: 19px; } /* samo B2B stranice; drugdje 18 */
/* Naslovi u koracima i tipovima: −.02em (bilo normal); Solarni park tipovi 21px. */
.cee-tip h3 { letter-spacing: -.02em; }
.page-id-47 .cee-tip h3 { font-size: 21px; }

/* „Učitaj još" ispod liste (Davor, 8. 10.) */
.cee-ws-vise { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.cee-ws-vise p { margin: 0; font-size: 14px; color: var(--cee-ink-muted); }
.cee-ws-vise .cee-ws-gumb-obrub { min-width: 220px; justify-content: center; text-align: center; }

/* Košarica u zaglavlju: ikona kolica sa značkom broja artikala. */
.cee-header__icons .cee-kosarica { position: relative; width: 34px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--cee-ink); }
.cee-header__icons .cee-kosarica:hover { color: var(--cee-green); }
.cee-kosarica__broj {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
  background: var(--cee-green); color: #FFFFFF; font-family: var(--cee-font-heading);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.cee-kosarica__broj[hidden] { display: none; }
@media (max-width: 1099px) { .cee-header__icons .cee-kosarica { width: 44px; height: 44px; } }
@media (max-width: 400px) {
  /* Mobitel: pretraga, košarica, Trgovina i izbornik moraju stati uz logo. */
  .cee-header__icons { gap: 0; }
  .cee-header__icons .cee-trgovina { padding-inline: 10px; }
}

/* ---------------------------------------------------------------------
   RASKID UGOVORA (čl. 81.a ZZP, inc/raskid.php)
   Obrazac je uzak i jednostupčan: to je pravni korak, ne prodajna forma.
   --------------------------------------------------------------------- */

/* Širina ide na obrazac, ne na omotač: WP-ov constrained layout direktnom
   djetetu grupe postavlja `margin-inline: auto !important`, pa bi uži omotač
   bio centriran spram teksta iznad njega. */
.cee-raskid__forma,
.cee-raskid--gotovo { max-width: 560px; }
.cee-raskid__red { margin: 0 0 18px; }
.cee-raskid__red label {
  display: block; margin-bottom: 6px;
  font-family: var(--cee-font-heading); font-size: 14px; font-weight: 500;
}
.cee-raskid__pomoc {
  display: block; margin-top: 6px;
  font-size: 13px; color: var(--cee-ink-muted);
}
.cee-raskid__izjava {
  margin: 24px 0 20px; padding: 16px 18px;
  background: var(--cee-panel); border-left: 3px solid var(--cee-green);
  font-size: 14.5px;
}
.cee-raskid__gumb { margin: 0; }
.cee-raskid__potvrdi {
  background: var(--cee-grad); color: var(--cee-on-green);
  border: 0; border-radius: 0; cursor: pointer; width: 100%;
  font-family: var(--cee-font-heading); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 16px 24px;
}
.cee-raskid__potvrdi:hover { background: var(--cee-grad-hover); }
.cee-raskid--gotovo {
  padding: 28px 30px; background: var(--cee-panel);
  border-left: 3px solid var(--cee-green);
}
.cee-raskid--gotovo h2 { margin: 0 0 10px; font-size: 24px; }
.cee-raskid--gotovo p { margin: 0 0 10px; }
.cee-raskid--gotovo p:last-child { margin-bottom: 0; }

/* =====================================================================
   34. IZVEDENI PROJEKTI S FOTOGRAFIJOM
   ---------------------------------------------------------------------
   `.cee-ref` (odjeljak 30) ima zaglavlje kartice `__glava` kao blijedu
   plohu sa snagom i tipom. Za solarne izvedbe iza te plohe ide fotografija
   krova, pa `__glava--foto` samo sloji sliku ispod istog teksta — geometrija
   kartice, mreža i prijelomi ostaju netaknuti.

   Zelena na fotografiji nema kontrast, zato brojka i tip prelaze u bijelo, a
   gradijent odozdo drži čitljivost i na svijetlom nebu.

   Pet izvedbi u mreži od tri stupca ostavlja rupu u drugom redu, pa prva
   kartica (snimka iz zraka) ide preko dva stupca: 2+1 / 1+1+1.
   ===================================================================== */

.cee-ref__glava--foto {
  position: relative; overflow: hidden; min-height: 190px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cee-ref__glava--foto > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cee-ref__glava--foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23, 33, 21, .82) 0%, rgba(23, 33, 21, .40) 42%, rgba(23, 33, 21, 0) 78%);
}
.cee-ref__glava--foto > span { position: relative; z-index: 1; }
.cee-ref__glava--foto .cee-ref__snaga { color: #FFFFFF; }
.cee-ref__glava--foto .cee-ref__tip { color: rgba(255, 255, 255, .85); }

.cee-ref--izvedbe > .cee-ref__card:first-child { grid-column: span 2; }
.cee-ref--izvedbe > .cee-ref__card:first-child .cee-ref__glava--foto { min-height: 300px; }
/* Na mobitelu je `.cee-ref` jedan stupac. Bez ovoga `span 2` otvara implicitni
   drugi stupac, pa su ostale četiri kartice ispadale u dva uska stupca od
   ~150 px i tekst se lomio na svaku riječ. */
@media (max-width: 599px) {
  .cee-ref--izvedbe > .cee-ref__card:first-child { grid-column: auto; }
  .cee-ref--izvedbe > .cee-ref__card:first-child .cee-ref__glava--foto { min-height: 210px; }
}

/* Dizalice topline imaju četiri izvedbe, pa im mreža od tri stupca ostavlja
   rupu. Dva stupca popune red i daju karticama više širine, a ispod 900 px
   preuzimaju prijelomi iz odjeljka 30 (dva pa jedan stupac). */
@media (min-width: 900px) {
  .cee-ref--dvije { grid-template-columns: repeat(2, 1fr); }
}

/* Fotografiju zasad ima samo jedna od četiri izvedbe. Da red ne bude nejednak
   dok ostale tri čekaju snimke, sva zaglavlja dobivaju istu visinu i brojku
   pri dnu — kako je ploha i bila složena u artefaktu (visina 200 px,
   `justify-content: flex-end`). Čim snimke stignu, dodaje se samo `<img>` i
   `--foto`, raspored se ne mijenja. */
.cee-ref--dvije .cee-ref__glava {
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (max-width: 599px) {
  .cee-ref--dvije .cee-ref__glava { min-height: 180px; }
}

/* =====================================================================
   35. DODATNA („SIDRENA") CIJENA
   ---------------------------------------------------------------------
   NN 101/2026 traži da dodatna cijena stoji na istom mjestu kao
   maloprodajna, jasno i čitljivo. Zato ide odmah ispod iznosa, istim
   stupnjem sivila kao ostale napomene uz cijenu — vidljiva, ali ne
   natječe se s cijenom koja se plaća. Iznos je podebljan da se broj
   razabere na prvi pogled.
   ===================================================================== */

.cee-sidrena,
.cee-ws-kartica__sidrena {
  display: block; font-size: 12.5px; line-height: 1.45;
  color: var(--cee-ink-muted);
}
.cee-sidrena__iznos,
.cee-ws-kartica__sidrena__iznos { font-weight: 600; color: var(--cee-ink); }

/* Dno kartice je redak „cijena … zaliha". Dodatna cijena ne smije u taj redak
   jer stisne cijenu i ona se prelomi na „662,81" pa „€" — zato redak prelama,
   a dodatna cijena uzima cijelu širinu i pada ispod. */
.cee-ws-kartica__dno { flex-wrap: wrap; row-gap: 2px; }
/* `order` je nužan: `__zaliha` ima `margin-left: auto` i bez njega bi se
   popela u drugi redak uz dodatnu cijenu umjesto da ostane uz cijenu. */
.cee-ws-kartica__sidrena { order: 9; flex: 0 0 100%; margin-top: 2px; font-size: 12px; }

/* Napomena o PDV-u nosi razmak do gumba. Kad iza nje dođe dodatna cijena,
   razmak preuzima ona, da gumb ne bude zalijepljen za tekst. */
.cee-ws-pp__sidrena { margin: 0 0 18px; }
.cee-ws-pp__pdv:has( + .cee-ws-pp__sidrena ) { margin-bottom: 3px; }