/* ==========================================================================
   VALTINSU HR - design system
   MOBILE FIRST. Bazni stil je mobitel; sve nadogradnje idu kroz min-width.
   Jedan font, nula zaobljenja.
   Crna / bijela / siva su kostur. Narancasta je iskljucivo akcent.
   ========================================================================== */

/* --- Tokeni ------------------------------------------------------------- */

:root {
  /* Boje */
  --ink:        #101010;   /* glavni tekst, tamne plohe */
  --ink-pure:   #000000;   /* hero, full-bleed crne sekcije */
  --paper:      #ffffff;
  --grey-05:    #f4f4f4;   /* svijetla sekcija */
  --grey-45:    #7d7d7d;   /* sekundarni tekst */
  --grey-70:    #3d3d3d;   /* tijelo teksta na bijelom */

  /* Linije. Jace nego prije - separacija mora biti citljiva na mobitelu. */
  --rule:        #cfcfcf;              /* djeljitelj na svijetlom */
  --rule-strong: var(--ink);           /* okvir sekcije */
  --rule-dark:   rgba(255,255,255,.22);/* djeljitelj na tamnom */

  --orange:       #ff5b00;
  --orange-hover: #e64f00;
  --orange-dim:   rgba(255, 91, 0, .12);

  /* Tipografija */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Tezine.
     600 nosi sve sto mora upasti u oko: naslove, nav, tipke, linkove.
     500 je za sitne verzalne labele - na 600 se uppercase pretvori u mrlju.
     400 samo za recenice. */
  --w-solid: 600;
  --w-label: 500;
  --w-text:  400;

  /* Fluidne velicine - clamp skalira od mobitela prema gore, bez upita */
  --t-display: clamp(2.5rem, 1.1rem + 6vw, 5.5rem);
  --t-h1:      clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
  --t-h2:      clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem);
  --t-h3:      clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
  --t-lead:    clamp(1rem, .95rem + .35vw, 1.1875rem);
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-micro:   .6875rem;

  /* Ritam */
  --gutter:   1.25rem;
  --shell:    1440px;
  --section:  4rem;
  --header-h: 4rem;   /* traze je zaglavlje, izbornik i padajuca ploca */

  /* Kretanje */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .2s var(--ease);
  --slow: .45s var(--ease);
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; --section: 5.5rem; }
}
@media (min-width: 1000px) {
  :root { --gutter: 3rem; --section: 7.5rem; --header-h: 4.5rem; }
}
@media (min-width: 1360px) {
  :root { --gutter: 4rem; --section: 9rem; }
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Naslovi: puna tezina + negativan tracking.
   To je razlika izmedju "mrsavo" i "cvrsto". */
h1, h2, h3, h4 {
  font-weight: var(--w-solid);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

/* Oznaceni tekst preuzima narancastu. Bijela slova preko nje drze
   kontrast i na svijetlim i na tamnim sekcijama. */
::selection      { background: var(--orange); color: var(--paper); }
::-moz-selection { background: var(--orange); color: var(--paper); }

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

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

/* --- Pomocne klase ------------------------------------------------------ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--dark { background: var(--ink-pure); color: var(--paper); }
.section--grey { background: var(--grey-05); }

/* Bez razmaka gore - sadrzaj sjeda odmah ispod prethodne sekcije */
.section--flush { padding-top: 0; }
/* Mreza modela na pocetnoj zavrsava crtom, pa prazan pojas ispod nje
   samo produljuje stranicu prije tamne sekcije. */
.section--flush:has(.model-grid) { padding-bottom: 0; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--grey-70);
  max-width: 48ch;
}
.section--dark .lead { color: #b4b4b4; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Tipke -------------------------------------------------------------- */
/* Kvadratne. Bez sjena, bez gradijenata. Tezina 500. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;                 /* mobile: puna sirina */
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  font-size: .9375rem;
  font-weight: var(--w-solid);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}

@media (min-width: 560px) {
  .btn { width: auto; min-height: 3rem; }
}

/* Hover: kosa ploha proleti preko tipke s lijeva, isti nagib kao oznaka
   "Stize". Ploha je ::before ispod teksta (isolation drzi z-index -1
   unutar tipke). Strelica i ikona se malo pomaknu, klik lagano utisne. */
.btn--primary,
.btn--outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              transform .15s var(--ease);
}
.btn--primary::before,
.btn--outline::before {
  content: "";
  position: absolute;
  inset: 0 -20%;
  z-index: -1;
  transform: translateX(-105%) skewX(-20deg);
  transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}
.btn--primary:hover::before,
.btn--outline:hover::before { transform: translateX(0) skewX(-20deg); }
.btn--primary:active,
.btn--outline:active { transform: scale(.97); }

.btn--primary { background-color: var(--orange); color: var(--paper); }
.btn--primary::before { background: var(--ink); }

.btn--outline { border-color: currentColor; color: var(--ink); }
.btn--outline::before { background: var(--orange); }
.btn--outline:hover { border-color: var(--orange); color: var(--paper); }

.btn svg { flex: 0 0 auto; transition: transform .3s var(--ease); }
.btn:hover .btn__strelica { transform: translateX(5px); }
.btn:hover .btn__ikona { transform: rotate(-12deg) scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary::before, .btn--outline::before { transition: none; }
  .btn:hover svg { transform: none; }
}
.section--dark .btn--outline,
.hero .btn--outline { color: var(--paper); }

/* Tekstualni link sa strelicom - nosi navigaciju po sadrzaju */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: .35rem;
  font-size: .9375rem;
  font-weight: var(--w-solid);
  transition: color var(--fast), gap var(--fast);
}
.link-arrow:hover { color: var(--orange); gap: .875rem; }

/* Isti oblik i kad je gumb, ne poveznica. Lista cekanja otvara prozorcic,
   pa mora biti <button>, a preglednik bi mu inace dao okvir i pozadinu. */
button.link-arrow {
  border: 0;
  background: none;
  padding-inline: 0;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
/* Strelica se crta u CSS-u, jer u gumbu nema SVG-a iz HTML-a. */
button.link-arrow::after {
  content: "";
  width: 14px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M9 1l4 4-4 4M13 5H0' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Zaglavlje ---------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background var(--slow), color var(--slow), border-color var(--slow);
}

/* Bijela traka nakon scrolla - i dok je padajuci izbornik otvoren,
   inace bi bijela ploca visjela iz prozirne trake. */
.site-header.is-stuck,
.site-header.has-sub-open {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: 1rem;
  font-weight: var(--w-solid);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Logo ide kao CSS maska, ne kao <img>.
   Time poprima boju teksta: bijel na prozirnom zaglavlju, crn na bijeloj
   traci nakon scrolla, bijel u podnozju. Jedna definicija, bez zamjene.
   SVG je ugraden kao data URI jer vanjski SVG kao maska ne radi kad se
   stranica otvori dvoklikom, preko file:// protokola. */
.brand__logo {
  display: block;
  height: 1.75rem;
  aspect-ratio: 395 / 107;      /* stvarni omjer lockupa */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 395 107'%3E%3Cg fill='%23000'%3E%3Cpath d='M0,0 L31,0 L43,23 L53,41 L58,50 L71,27 L85,0 L116,0 L110,12 L109,13 L88,13 L86,19 L85,21 L104,21 L102,27 L100,30 L81,31 L77,38 L95,38 L93,44 L80,68 L68,91 L59,107 L57,107 L41,77 L29,55 L11,21 L0,1 Z ' transform='translate(0,0)'/%3E%3Cpath d='M0,0 L10,0 L16,22 L19,18 L29,0 L39,0 L37,5 L22,33 L20,36 L10,36 L7,28 L0,2 Z ' transform='translate(120,43)'/%3E%3Cpath d='M0,0 L10,0 L13,8 L14,14 L5,18 L3,13 L-2,23 L15,14 L17,15 L8,27 L-10,36 L-20,36 L-18,30 L-9,15 Z ' transform='translate(173,43)'/%3E%3Cpath d='M0,0 L9,0 L7,18 L5,29 L22,29 L22,36 L-5,36 L-4,23 L-1,1 Z ' transform='translate(200,43)'/%3E%3Cpath d='M0,0 L33,0 L29,7 L20,7 L19,19 L17,34 L16,36 L7,36 L9,18 L11,7 L4,7 Z ' transform='translate(228,43)'/%3E%3Cpath d='M0,0 L9,0 L9,3 L1,9 L-1,9 Z ' transform='translate(264,43)'/%3E%3Cpath d='M0,0 L9,0 L15,9 L22,20 L22,23 L24,23 L25,10 L27,0 L36,0 L34,19 L31,36 L21,36 L8,14 L4,36 L-5,36 L-4,23 L-1,1 Z ' transform='translate(279,43)'/%3E%3Cpath d='M0,0 L27,0 L23,7 L4,8 L4,13 L19,15 L24,18 L25,20 L25,27 L21,34 L17,36 L-10,36 L-8,31 L-6,29 L13,28 L14,23 L-2,21 L-6,17 L-6,8 L-3,3 Z ' transform='translate(325,43)'/%3E%3Cpath d='M0,0 L9,0 L8,13 L7,19 L7,27 L8,28 L17,28 L20,27 L23,3 L24,0 L33,0 L32,12 L29,30 L25,35 L22,36 L1,36 L-4,31 L-3,17 Z ' transform='translate(357,43)'/%3E%3Cpath d='M0,0 L2,1 L-2,30 L-3,31 L-12,31 L-9,7 Z ' transform='translate(271,48)'/%3E%3Cpath d='M0,0 L2,0 L6,16 L-4,16 L-6,11 L-5,7 Z ' transform='translate(187,63)'/%3E%3Cpath d='M0,0 L4,2 L5,8 L2,7 L-1,7 L0,3 Z M2,3 Z ' transform='translate(388,71)'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 395 107'%3E%3Cg fill='%23000'%3E%3Cpath d='M0,0 L31,0 L43,23 L53,41 L58,50 L71,27 L85,0 L116,0 L110,12 L109,13 L88,13 L86,19 L85,21 L104,21 L102,27 L100,30 L81,31 L77,38 L95,38 L93,44 L80,68 L68,91 L59,107 L57,107 L41,77 L29,55 L11,21 L0,1 Z ' transform='translate(0,0)'/%3E%3Cpath d='M0,0 L10,0 L16,22 L19,18 L29,0 L39,0 L37,5 L22,33 L20,36 L10,36 L7,28 L0,2 Z ' transform='translate(120,43)'/%3E%3Cpath d='M0,0 L10,0 L13,8 L14,14 L5,18 L3,13 L-2,23 L15,14 L17,15 L8,27 L-10,36 L-20,36 L-18,30 L-9,15 Z ' transform='translate(173,43)'/%3E%3Cpath d='M0,0 L9,0 L7,18 L5,29 L22,29 L22,36 L-5,36 L-4,23 L-1,1 Z ' transform='translate(200,43)'/%3E%3Cpath d='M0,0 L33,0 L29,7 L20,7 L19,19 L17,34 L16,36 L7,36 L9,18 L11,7 L4,7 Z ' transform='translate(228,43)'/%3E%3Cpath d='M0,0 L9,0 L9,3 L1,9 L-1,9 Z ' transform='translate(264,43)'/%3E%3Cpath d='M0,0 L9,0 L15,9 L22,20 L22,23 L24,23 L25,10 L27,0 L36,0 L34,19 L31,36 L21,36 L8,14 L4,36 L-5,36 L-4,23 L-1,1 Z ' transform='translate(279,43)'/%3E%3Cpath d='M0,0 L27,0 L23,7 L4,8 L4,13 L19,15 L24,18 L25,20 L25,27 L21,34 L17,36 L-10,36 L-8,31 L-6,29 L13,28 L14,23 L-2,21 L-6,17 L-6,8 L-3,3 Z ' transform='translate(325,43)'/%3E%3Cpath d='M0,0 L9,0 L8,13 L7,19 L7,27 L8,28 L17,28 L20,27 L23,3 L24,0 L33,0 L32,12 L29,30 L25,35 L22,36 L1,36 L-4,31 L-3,17 Z ' transform='translate(357,43)'/%3E%3Cpath d='M0,0 L2,1 L-2,30 L-3,31 L-12,31 L-9,7 Z ' transform='translate(271,48)'/%3E%3Cpath d='M0,0 L2,0 L6,16 L-4,16 L-6,11 L-5,7 Z ' transform='translate(187,63)'/%3E%3Cpath d='M0,0 L4,2 L5,8 L2,7 L-1,7 L0,3 Z M2,3 Z ' transform='translate(388,71)'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}

@media (min-width: 1000px) {
  .brand__logo { height: 2rem; }
}

.brand--footer .brand__logo { height: 2.5rem; }

/* Naziv je u DOM-u skriven i sluzi kao pristupacno ime poveznice.
   Ako preglednik ne podrzava maske, logo se sklanja a naziv se pokaze. */
.brand__text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .brand__logo { display: none; }
  .brand__text {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip: auto;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
}

/* Hamburger - bazno stanje je mobitel, dakle vidljiv */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: none; cursor: pointer;
}
.nav-toggle span {
  display: block; position: relative;
  width: 20px; height: 2px; background: currentColor;
  transition: background var(--fast);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: currentColor;
  transition: transform var(--fast), top var(--fast);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Off-canvas izbornik */
.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  display: flex;
  flex-direction: column;
  padding: .5rem var(--gutter) 1.75rem;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-120%);
  transition: transform var(--slow);
}
.nav.is-open { transform: translateY(0); }

.nav__link {
  position: relative;
  display: block;
  width: 100%;
  padding-block: 1.125rem;
  font-size: 1.375rem;
  font-weight: var(--w-solid);
  letter-spacing: -.02em;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  cursor: pointer;
}
.nav__link[aria-current="page"] { color: var(--orange); }

/* --- Padajuci izbornik modela ------------------------------------------- */

.nav__item { position: relative; }

.nav__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.nav__chev { transition: transform var(--fast); }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

/* Mobitel: podizbornik se rasklapa u toku stranice.
   display:none -> block se ne moze animirati, pa se umjesto toga
   animira grid-template-rows iz 0fr u 1fr. Sadrzaj sam odredi visinu,
   ne treba pogadjati max-height. */
.subnav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.nav__item.is-open .subnav { grid-template-rows: 1fr; }

.subnav__inner {
  overflow: hidden;   /* obavezno, inace sadrzaj strsi dok je sklopljeno */
  min-height: 0;
}

.subnav__panel { padding-bottom: .5rem; }

.subnav__list li:last-child .subnav__link { border-bottom: 0; }

.subnav__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9375rem 0 .9375rem 1rem;
  border-bottom: 1px solid var(--rule);
  transition: color var(--fast);
}
.subnav__link:hover,
.subnav__link[aria-current="page"] { color: var(--orange); }

.subnav__name { font-size: 1.0625rem; font-weight: var(--w-solid); }

/* Preglednici bez podrske za animaciju 0fr/1fr - bez animacije, ali radi */
@supports not (grid-template-rows: 0fr) {
  .subnav { display: block; height: 0; overflow: hidden; }
  .nav__item.is-open .subnav { height: auto; }
}

/* Pregled motocikla postoji samo na desktopu */
.subnav__preview { display: none; }

.header__cta { display: none; }

/* Desktop navigacija */
@media (min-width: 1000px) {
  .site-header__inner { height: 4.5rem; gap: 2.5rem; }
  .nav-toggle { display: none; }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    height: var(--header-h);
    margin-left: auto;
    padding: 0;
    background: none;
    color: inherit;
    border: 0;
    transform: none;
  }

  /* Stavka mora dosezati do dna zaglavlja, inace izmedju nje i ploce
     ostane pojas koji ne pripada nikome - mis ga prijedje, okine se
     mouseleave, izbornik se zatvori i odmah opet otvori. Treptaj. */
  .nav__item {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .nav__link {
    width: auto;
    padding-block: .25rem;
    font-size: 1.0625rem;
    border-bottom: 0;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--fast);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .header__cta { display: inline-flex; width: auto; min-height: 2.75rem; padding-inline: 1.25rem; }

  /* Ploca se lijepi tocno uz donji rub zaglavlja i ide preko cijele
     sirine. Nema razmaka izmedju stavke i ploce, pa mis ne moze
     "ispasti" putujuci prema dolje. */
  .subnav {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    z-index: 10;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    grid-template-rows: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
  }
  .nav__item.is-open .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .subnav__inner { overflow: visible; }

  /* Sirina i razmaci prate ostatak stranice */
  .subnav__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 1.75rem var(--gutter) 2rem;
  }

  .subnav__link { padding-inline: 0; }
  .subnav__name { font-size: 1.25rem; }

  /* --- Pregled motocikla ------------------------------------------------
     Sve tri slike lezе jedna preko druge; mijenja se samo koja je vidljiva.
     Tako nema poskakivanja visine pri prelasku s modela na model. */
  .subnav__preview {
    display: block;
    position: relative;
    aspect-ratio: 16 / 8;
  }
  .subnav__shot {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--fast);
  }
  .subnav__shot.is-active { opacity: 1; }
  .subnav__shot img { width: 100%; height: 100%; object-fit: contain; }

}

/* --- Kosi kolaz triju modela -------------------------------------------
   Koristi se u padajucem izborniku ("Svi modeli") i u obrascu, kad kupac
   kaze da nije siguran koji model zeli. Zato stoji izvan medija upita.

   Rezovi su paralelni; podloga se vidi kroz razmak izmedu isjecaka, pa je
   to ujedno tanka kosa crta koja ih razdvaja. Roditelj mora imati visinu. */

.kosi { position: absolute; inset: 0; background: var(--rule); }
.kosi__dio {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}
/* Cover je punio isjecak, ali je od motocikla ostajala samo traka.
   Zato slika ide umanjena i cijela, poravnata na sredinu isjecka.
   Sirina je odabrana tako da najsiri kadar (EM-5) jos stane izmedu
   kosih rezova; sve tri fotografije imaju motocikl jednake visine,
   pa izgledaju jednako veliko bez posebnog skaliranja. */
.kosi__dio img {
  position: absolute;
  top: 50%;
  width: 33%;
  height: auto;
  transform: translate(-50%, -50%);
}
.kosi__dio--1 img { left: 16%; }
.kosi__dio--2 img { left: 50%; }
/* Treci je kadar sprijeda, pa je i sira slika; malo dalje od kosog reza. */
.kosi__dio--3 img { left: 84.5%; }

.kosi__dio--1 { clip-path: polygon(0 0, 41.7% 0, 23.7% 100%, 0 100%); }
.kosi__dio--2 { clip-path: polygon(42.3% 0, 75.7% 0, 57.7% 100%, 24.3% 100%); }
.kosi__dio--3 { clip-path: polygon(76.3% 0, 100% 0, 100% 100%, 58.3% 100%); }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  background: var(--ink-pure);
  color: var(--paper);
  overflow: hidden;
}

@media (min-width: 1000px) {
  .hero { min-height: min(100svh, 880px); }
}

.hero__media { position: absolute; inset: 0; }
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.5) 40%,
    rgba(0,0,0,.18) 72%,
    rgba(0,0,0,.4) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 7rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 1000px) {
  .hero__inner { padding-top: 9rem; padding-bottom: 4rem; }
}

.hero h1 {
  font-size: var(--t-display);
  max-width: 16ch;
  margin-bottom: 1.25rem;
}

.hero__lead {
  font-size: var(--t-lead);
  color: rgba(255,255,255,.8);
  max-width: 44ch;
  margin-bottom: 2rem;
  line-height: 1.55;
}

.hero__actions { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 560px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: .875rem; }
}

/* --- Zaglavlje sekcije -------------------------------------------------- */

.section-head { margin-bottom: 2.5rem; }
.section-head h2 { font-size: var(--t-h2); max-width: 18ch; }
.section-head .lead { margin-top: 1.25rem; }

@media (min-width: 900px) {
  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
    margin-bottom: 3.5rem;
  }
  .section-head .lead { margin-top: 0; }
}

/* ==========================================================================
   MREZA MODELA
   Djeljitelji se crtaju kroz gap: pozadina mreze prosijava kroz razmak
   od 1px, pa se linije uvijek poklapaju bez obzira na broj celija.
   Cijeli blok uokviren punom crnom crtom gore i dolje - jasna separacija.
   ========================================================================== */

/* Full-bleed: mreza nije unutar .shell nego ide od ruba do ruba ekrana.
   Razmak preuzimaju same celije. */
.model-grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: jedan stupac */
  gap: 1px;
  background: var(--rule);             /* ovo su linije */
  border-block: 1px solid var(--rule-strong);
}

@media (min-width: 640px)  { .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.model-cell {
  position: relative;   /* sidro za rastegnuti link */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: 2rem var(--gutter) 2rem;
}

/* Cijela celija vodi na specifikacije. Naziv je pravi link, a njegov
   ::after se rastegne preko cijele celije - tako i naslov i slika i
   prazan prostor rade na klik, a citac ekrana i dalje cita samo
   "EM-5" kao odrediste, bez duplih linkova. */
.model-cell__name a { display: inline-block; }
.model-cell__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Linkovi u dnu moraju biti iznad tog sloja da zadrze svoja odredista */
.model-cell__links { position: relative; z-index: 2; }

/* Vidljiva potvrda da je cijela celija ziva */
.model-cell:hover .model-cell__name { color: var(--orange); }
.model-cell__name { transition: color var(--fast); }

@media (min-width: 640px) {
  .model-cell { padding-top: 2.5rem; }
}

.model-cell__name {
  font-size: var(--t-h3);
  margin-bottom: .5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}
.model-cell__name .oznaka { margin: 0; }

.model-cell__meta {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--grey-70);
  max-width: 34ch;
  margin-bottom: 1rem;
}

/* Mikro-linija sa specifikacijama - kljucne brojke bez tablice */
.model-cell__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.model-cell__specs li { display: flex; align-items: center; gap: .75rem; }
.model-cell__specs li + li::before {
  content: "";
  width: 1px; height: .75rem;
  background: var(--rule);
}

.model-cell__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.model-cell__links .link-arrow svg { transition: transform var(--fast); }

/* Slika sjeda na dno celije. margin-top: auto je gura dolje kad su
   susjedne celije razlicite visine, pa se sve slike poravnaju u red.
   Minimalni razmak drzi margina na linkovima iznad. */
.model-cell:not(.model-cell--cta) .model-cell__links { margin-bottom: 1.75rem; }

.model-cell__media { aspect-ratio: 4 / 3; }

/* Poravnavanje slika po dnu ima smisla tek kad su celije jedna do druge.
   Na jednom stupcu margin-top: auto samo napravi rupu ispod teksta. */
@media (min-width: 640px) {
  .model-cell__media { margin-top: auto; }
}

/* Cetvrta celija: popunjava mrezu kad su modeli u 2 stupca.
   Na 3 stupca tri modela vec popune red, pa se ova rasteze u traku. */
/* Bez crne plohe - ona je pravila sendvic izmedju bijelog razmaka i
   tamne sekcije ispod. Umjesto toga: sitna oznaka i jedan veliki link. */
.model-cell--cta {
  justify-content: center;
  padding-block: 2rem;
}

.model-cell--cta h3 {
  font-size: var(--t-small);
  font-weight: var(--w-label);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--grey-45);
  margin-bottom: .25rem;
}

/* Veliki link sa siljkom desno */
.big-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-block: .5rem;
  font-size: var(--t-h2);
  font-weight: var(--w-solid);
  letter-spacing: -.03em;
  line-height: 1.05;
  transition: color var(--fast);
}
.big-link svg { flex: 0 0 auto; transition: transform var(--fast); }
.big-link:hover { color: var(--orange); }
.big-link:hover svg { transform: translateX(4px); }

@media (min-width: 1000px) {
  .model-cell--cta {
    grid-column: 1 / -1;         /* traka preko cijele sirine */
    padding-block: 2.5rem;
  }
}

/* --- Naizmjenicni blok (koristi se na stranicama modela) ---------------- */

.model {
  display: grid;
  gap: 1.75rem;
  padding-block: 3rem;
  border-top: 1px solid var(--rule);
}
.section--dark .model { border-top-color: var(--rule-dark); }
.model__media { aspect-ratio: 4 / 3; }
.model__name { font-size: var(--t-h2); margin-bottom: .75rem; }
.model__desc { margin-bottom: 1.5rem; }

@media (min-width: 900px) {
  .model {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
  }
  .model:nth-child(even) .model__media { order: 2; }
}

/* Tablica specifikacija */
/* Zatvorena kutija: okvir sa svih strana, sive celije. Prije je imala
   samo gornju crtu, pa je donja (od cijene) visila odvojeno. */
.spec-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  border: 1px solid var(--rule);
  background: var(--grey-05);
}
.spec-row + .product__price { border-top: 0; padding-top: 0; }
.section--dark .spec-row { border-top-color: var(--rule-dark); }

.spec { flex: 1 1 0; min-width: 6.5rem; padding: 1.1rem 1.25rem; }
.spec + .spec { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.section--dark .spec + .spec { border-left-color: var(--rule-dark); }

.spec b {
  display: block;
  font-size: 1.375rem;
  font-weight: var(--w-solid);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.spec span {
  display: block;
  margin-top: .375rem;
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-45);
}

/* --- Placeholder za medije --------------------------------------------- */
/* Privremeno, dok ne dodju prave fotke. Fina dijagonalna tekstura da se
   vidi da je namjerno prazno, a ne slomljena slika. */

.media-ph {
  position: relative;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #1a1a1a 0 2px, #141414 2px 9px);
  color: var(--grey-45);
  overflow: hidden;
}
.media-ph::after {
  content: attr(data-label);
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: .625rem .875rem;
  border: 1px solid var(--rule-dark);
}
.media-ph--light {
  background: repeating-linear-gradient(135deg, #e6e6e6 0 2px, #f1f1f1 2px 9px);
}
/* display: grid gore nadjacava ugradeni [hidden], pa se mora vratiti */
.media-ph[hidden] { display: none; }
.media-ph--light::after { border-color: var(--rule); }

/* --- Full-bleed izjava -------------------------------------------------- */

/* Na mobitelu je 70svh gutalo gotovo cijeli ekran i traka je izgledala
   kao zasebna stranica. Visinu ondje odreduje tekst, uz skromniji
   minimum; puna visina ostaje tek od tableta navise. */
.statement {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44svh;
  background: var(--ink-pure);
  color: var(--paper);
  overflow: hidden;
}
@media (min-width: 640px)  { .statement { min-height: 58svh; } }
@media (min-width: 1000px) { .statement { min-height: 70svh; } }
.statement__media { position: absolute; inset: 0; }
.statement__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.statement__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.6) 100%);
}
@media (min-width: 900px) {
  .statement__media::after {
    background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 70%);
  }
}
.statement__inner { position: relative; z-index: 1; padding-block: 2.5rem; }
@media (min-width: 640px) { .statement__inner { padding-block: 4rem; } }

/* Zajednicki .lead je tamnosiv, sto je nad fotografijom neupotrebljivo.
   Uzi je i svjetliji, pa ostaje u zatamnjenom dijelu kadra. */
.statement .lead { color: #dcdcdc; max-width: 36ch; }
.statement h2 { font-size: var(--t-h1); max-width: 15ch; margin-bottom: 1.25rem; }

/* ==========================================================================
   PODSTRANICE
   ========================================================================== */

/* --- Zaglavlje podstranice ---------------------------------------------- */
/* Manji brat heroa: tamna ploha ispod fiksne navigacije.

   Ravna crnina je izgledala kao rupa u stranici, pa svaka podstranica
   ima svoju teksturu. Same datoteke su vec potamnjene u obradi, jer se
   tamni pikseli puno bolje komprimiraju; preko njih ide jos samo blagi
   gradijent koji cuva citljivost teksta na lijevoj strani.
   Izvor tekstura: Unsplash, besplatna licenca.

   Stranica bez modifikatora ostaje ravno crna, sto je i dalje ispravno. */

.page-hero {
  background-color: var(--ink-pure);
  background-image:
    linear-gradient(100deg,
      rgba(0, 0, 0, .82) 0%,
      rgba(0, 0, 0, .55) 55%,
      rgba(0, 0, 0, .68) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--paper);
  padding-block: 7rem 3rem;
}

/* Modeli: trag gume u pijesku. Ono sto ovi motocikli ostavljaju za sobom. */
.page-hero--trag { background-image:
  linear-gradient(100deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.68) 100%),
  image-set(
    url("../assets/slike/opce/tekstura-trag.webp") type("image/webp"),
    url("../assets/slike/opce/tekstura-trag.jpg")  type("image/jpeg")); }

/* O nama: sitno zrno betona, mirna podloga ispod teksta o obrtu. */
.page-hero--beton { background-image:
  linear-gradient(100deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.64) 100%),
  image-set(
    url("../assets/slike/opce/tekstura-beton.webp") type("image/webp"),
    url("../assets/slike/opce/tekstura-beton.jpg")  type("image/jpeg")); }

/* Kontakt: najtisa od tri. Obrazac je ono sto tu treba gledati. */
.page-hero--tamna { background-image:
  linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.6) 100%),
  image-set(
    url("../assets/slike/opce/tekstura-tamna.webp") type("image/webp"),
    url("../assets/slike/opce/tekstura-tamna.jpg")  type("image/jpeg")); }

.page-hero--trag,
.page-hero--beton,
.page-hero--tamna { background-size: auto, cover; background-position: center, center; }

.page-hero h1 { font-size: var(--t-h1); max-width: 20ch; }
.page-hero .lead { margin-top: 1.25rem; color: #b4b4b4; }

/* Na desktopu je blok bio upola prazan: naslov je zauzimao lijevu polovicu,
   desna je ostajala crna. Uvod se zato seli u drugi stupac i poravnava s
   dnom naslova. Prazninu popunjava tekst koji ionako postoji, ne ukras. */
@media (min-width: 1000px) {
  .page-hero { padding-block: 7rem 3.5rem; }

  .page-hero .shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .page-hero .crumbs { grid-column: 1 / -1; }
  .page-hero .lead { margin-top: 0; }
}

/* --- Mrvice ------------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-small);
  color: #9b9b9b;
}
.crumbs a { transition: color var(--fast); }
.crumbs a:hover { color: var(--orange); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: #5c5c5c; }
.crumbs [aria-current="page"] { color: var(--paper); }

/* --- Tablica specifikacija ---------------------------------------------- */

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table caption {
  text-align: left;
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-45);
  padding-bottom: 1rem;
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: .875rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.spec-table th {
  width: 45%;
  padding-right: 1rem;
  font-size: var(--t-small);
  font-weight: var(--w-text);
  color: var(--grey-45);
}
.spec-table td { font-weight: var(--w-solid); }

/* --- Usporedna tablica -------------------------------------------------- */
/* Na uskom ekranu se vodoravno skrola umjesto da se lomi. */

.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.compare {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

/* Na uskom ekranu tri stupca ne stanu, pa korisnik bira dva.
   Skrivanje je vezano uz media upit, a ne uz atribut hidden, da na
   sirem ekranu tablica uvijek pokaze sve tri bez obzira na birace. */
.compare-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .compare { min-width: 34rem; }
  .compare-pick { display: none; }
}

@media (max-width: 639px) {
  .compare .is-off { display: none; }
}
.compare th,
.compare td {
  padding: 1rem 1.25rem 1rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.compare thead th {
  font-size: var(--t-h3);
  font-weight: var(--w-solid);
  letter-spacing: -.02em;
  border-bottom-color: var(--rule-strong);
}
.compare tbody th {
  font-size: var(--t-small);
  font-weight: var(--w-text);
  color: var(--grey-45);
  width: 28%;
}
.compare tbody td { font-weight: var(--w-solid); }

/* --- Izjava bez slike ---------------------------------------------------
   Kad nema fotografije, teret nosi tipografija. Velik tekst izmedu dvije
   pune crte cita se kao stanka u stranici, ne kao jos jedan odlomak.
   ------------------------------------------------------------------------ */

.pull {
  border-block: 1px solid var(--rule-strong);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.pull p {
  font-size: var(--t-h2);
  font-weight: var(--w-solid);
  letter-spacing: -.03em;
  line-height: 1.12;
  max-width: 22ch;
  text-wrap: balance;
}
.pull p + p { margin-top: 1.25rem; color: var(--grey-45); }

@media (min-width: 900px) {
  .pull { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .pull p + p { margin-top: 0; align-self: end; font-size: var(--t-lead); font-weight: var(--w-text); letter-spacing: 0; line-height: 1.55; max-width: 34ch; }
}

/* --- Brojke -------------------------------------------------------------
   Zamjena za fotografiju. Brojka je jedini element koji na praznoj
   stranici moze nositi tezinu slike.
   ------------------------------------------------------------------------ */

.figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule-dark);
  border-block: 1px solid var(--rule-dark);
}
@media (min-width: 640px)  { .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.figure {
  background: var(--ink-pure);
  padding: 1.75rem var(--gutter);
}
@media (min-width: 640px) { .figure { padding-inline: clamp(1.25rem, 2.5vw, 2rem); } }

.figure b {
  display: block;
  font-size: clamp(2.25rem, 1.2rem + 4vw, 3.5rem);
  font-weight: var(--w-solid);
  letter-spacing: -.04em;
  line-height: 1;
}
.figure span {
  display: block;
  margin-top: .625rem;
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9b9b9b;
}

/* Ista komponenta na svijetloj sekciji */
.section--grey .figures,
.section:not(.section--dark) .figures { background: var(--rule); border-color: var(--rule-strong); }
.section--grey .figure { background: var(--paper); }
.section:not(.section--dark) .figure { background: var(--paper); }
.section:not(.section--dark) .figure span { color: var(--grey-45); }

/* --- Nabrajanje s crtama ------------------------------------------------- */

/* Cetiri jednaka retka teksta nisu imala za sto uhvatiti oko. Redni broj
   je jedini element koji smije biti velik a da ne odvlaci od naslova, pa
   nosi ritam. Broji ga CSS, u HTML-u nema ni traga od njega. */
.points { border-top: 1px solid var(--rule); counter-reset: tocka; }
.points li {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.75rem;
  counter-increment: tocka;
}
.points li::before {
  content: counter(tocka, decimal-leading-zero);
  display: block;
  margin-bottom: .875rem;
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  color: var(--orange);
}
.points h3 { font-size: var(--t-h3); margin-bottom: .5rem; }
.points p { font-size: .9375rem; line-height: 1.65; color: var(--grey-70); max-width: 52ch; }

@media (min-width: 900px) {
  .points li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: start;
    padding-block: 2.25rem;
  }
  /* Broj ide u prvi stupac i poravnava se s prvim retkom naslova. */
  .points li::before {
    margin-bottom: 0;
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: var(--w-solid);
    letter-spacing: -.03em;
    line-height: .9;
    color: var(--rule);
  }
  .points h3 { margin-bottom: 0; }
}


/* Izjava i tocke ispod nje su jedna misao, a dvije sekcije jedna do druge
   daju dvostruki razmak, pa je izmedu ostajala prazna traka od 250 px. */
.section--nastavak { padding-top: clamp(2rem, 4vw, 3rem); }
.section--izjava { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* Tekst ispod brojki stajao je u uskom stupcu s praznom desnom polovicom.
   Na sirem ekranu ide u dva stupca, iste sirine kao brojke iznad njega. */
@media (min-width: 900px) {
  .prose.prose--dvostupac {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .prose.prose--dvostupac p + p { margin-top: 0; }
}

/* --- Tekstualni blok ---------------------------------------------------- */

.prose { max-width: 62ch; }
.prose p { color: var(--grey-70); line-height: 1.7; }
.prose p + p { margin-top: 1.125rem; }
.prose h2 { font-size: var(--t-h2); margin-top: 3rem; margin-bottom: 1rem; }
.prose h3 { font-size: var(--t-h3); margin-top: 2.25rem; margin-bottom: .625rem; }
.prose > :first-child { margin-top: 0; }
.prose ul { margin-top: 1rem; }
.prose ul li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--grey-70);
  line-height: 1.7;
}
.prose ul li + li { margin-top: .5rem; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .75em;
  width: .4rem; height: 1px;
  background: var(--orange);
}

/* Obavijest kupcu. Za razliku od .todo, ovo ide u objavljenu verziju
   i mora se vidjeti prije nego covjek posalje upit. */
.notice {
  background: var(--ink);
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: #c8c8c8;
}
.notice strong {
  display: block;
  margin-bottom: .125rem;
  color: var(--paper);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.section--dark .notice { border-color: var(--rule-dark); color: #b4b4b4; }
.section--dark .notice strong { color: var(--paper); }

/* Oznaka za sadrzaj koji jos ceka klijenta */
.todo {
  border-left: 2px solid var(--orange);
  padding: .75rem 0 .75rem 1rem;
  margin-top: 1.5rem;
  font-size: var(--t-small);
  color: var(--grey-45);
}

/* --- Dvostupacni raspored podstranice ----------------------------------- */

.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

/* --- Odabir boje --------------------------------------------------------
   Prava dugmad, ne divovi, pa tipkovnica i citaci ekrana rade bez dodatka.
   ------------------------------------------------------------------------ */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1.5rem;
}

/* Gumb je veci od kruga, jer dodirna meta mora biti barem 44 px,
   a krug bi na toj velicini bio pretezak u stupcu. */
.swatch {
  position: relative;          /* zbog kose crte kad boje nema */
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Krug nosi dvije boje: sasiju i klin akcenta gore desno.
   Sama boja ne bi razlikovala modele kojima se razlikuje samo detalj. */
.swatch::before {
  content: "";
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  /* Ravan kosi rez, ne kriska. Os gradijenta ide prema gore desno,
     pa granica pada dijagonalno od gore lijevo prema dolje desno. */
  background: linear-gradient(45deg,
    var(--c) 0 64%,
    var(--akcent) 64% 100%);
  /* Tanki obrub iznutra, da se crni krug vidi na bijeloj podlozi */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
  transition: box-shadow var(--fast), transform var(--fast);
}
.swatch:hover::before { transform: scale(1.07); }

/* Odabrano: prsten odvojen bijelim razmakom, da se ne stopi s bojom */
.swatch[aria-checked="true"]::before {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3),
              0 0 0 2px var(--paper),
              0 0 0 4px var(--ink);
}

/* --- Fotografije proizvoda ---------------------------------------------
   Snimke su kvadratne, na bijeloj podlozi. contain ih uklapa u siri okvir
   bez rezanja kotaca, a siva ploha ispod skriva razliku u pozadini.
   ------------------------------------------------------------------------ */

.shot {
  background: var(--grey-05);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--fast);
}
.shot img.is-swapping { opacity: 0; }

/* ==========================================================================
   STRANICA PROIZVODA
   Lijevo fotografije, desno odabir i podaci. Na mobitelu jedno ispod
   drugoga, slika prva.
   ========================================================================== */

/* Fotografije su visoke, a desni stupac kratak, pa puni razmak ispod
   ostavlja dojam da stranica tu zavrsava. Sljedeca sekcija sama nosi
   svoj gornji razmak, ovdje je dovoljno malo. */
.section--product { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.product { display: grid; gap: 2rem; }

@media (min-width: 1000px) {
  .product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  /* Podaci prate scroll dok se gleda velika slika */
  .product__info { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Sekcija odmah ispod proizvoda krece blize, da se vidi da ima jos
   sadrzaja, a ne da stranica izgleda kao da tu staje. */
.section--product + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* --- Velika fotografija sa strelicama --- */

.viewer { position: relative; }

.viewer__nav {
  position: absolute;
  z-index: 2;                  /* iznad pozornice, uvijek dostupne */
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 3.25rem;              /* dodirna meta */
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.viewer__nav:hover { background: var(--orange); }
.viewer__nav svg { width: 11px; height: 19px; }
.viewer__nav path { stroke-width: 2.4; }
/* display: grid gore nadjacava ugradeni [hidden], pa se mora vratiti.
   Skripta ih sklanja kad model ima samo jednu fotografiju. */
.viewer__nav[hidden], .viewer__count[hidden] { display: none; }
.viewer__nav--prev { left: .75rem; }
.viewer__nav--next { right: .75rem; }

.viewer__count {
  position: absolute;
  z-index: 2;
  right: .75rem;
  bottom: .75rem;
  padding: .35rem .75rem;
  background: var(--ink);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--paper);
}

/* --- Pozornica ----------------------------------------------------------
   Dva sloja slike jedan preko drugoga. Nova ulazi zdesna dok stara
   izlazi ulijevo. Okvir se ne mice, mice se samo sadrzaj.
   Jednim <img> se to ne moze izvesti bez treptaja.
   ------------------------------------------------------------------------ */

.stage {
  position: relative;
  aspect-ratio: 4 / 3;         /* isti omjer kao obrezane fotografije */
  max-height: 58vh;
  background: var(--grey-05);
  overflow: hidden;
  /* Zatvara z-index slojeva slika unutar pozornice. Bez ovoga se
     penju u nadredeni kontekst i prekriju strelice. */
  isolation: isolate;
}

/* Brisanje, ne pomicanje. Obje slike stoje na mjestu; gornja se brise
   s desna prema lijevo i ispod nje ostaje sljedeca.
   Zato clip-path, a ne transform: nista se ne krece, samo se smanjuje
   vidljivi dio gornjeg sloja. Gornji mora imati veci z-index. */
.stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;                  /* sloj koji ceka je nevidljiv */
  z-index: 0;
  clip-path: inset(0 0 0 0);
  transition: clip-path .26s cubic-bezier(.4, 0, .2, 1);
}

.stage__img.is-active { opacity: 1; z-index: 1; }

/* Gornja slika: vidljivi dio se povlaci od desnog ruba prema lijevom */
.stage__img.is-leaving {
  opacity: 1;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
}

/* Unatrag se brise obrnuto, inace se izgubi osjecaj smjera */
.stage[data-smjer="natrag"] .stage__img.is-leaving { clip-path: inset(0 0 0 100%); }

/* Promjena boje: isti kadar, pa brisanje ustranu ne bi imalo smisla.
   Gornji sloj se utopi i otkrije istu sliku u drugoj boji. */
.stage[data-smjer="boja"] .stage__img { transition: opacity .22s var(--ease); }
.stage[data-smjer="boja"] .stage__img.is-leaving { clip-path: inset(0 0 0 0); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .stage__img { transition: opacity .18s linear; }
  .stage__img.is-leaving { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* --- Desni stupac --- */

.product__info .swatches { margin-bottom: 2rem; }

.product__label {
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .85rem;
}

.product__price {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}
.product__price b { display: block; font-size: var(--t-h3); font-weight: var(--w-solid); }
.product__price span { display: block; margin-top: .25rem; font-size: var(--t-small); color: var(--grey-45); }

/* --- Galerija ----------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
/* Prave fotografije stoje uz placeholdere dok ne stigne ostatak kompleta.
   Studijski kadrovi su na bijelom, pa contain, ne cover. */
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
}

/* --- Sitni pomocnici ---------------------------------------------------- */

.note { font-size: var(--t-small); color: var(--grey-45); max-width: 44ch; }

.stack { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 560px) {
  .stack { flex-direction: row; flex-wrap: wrap; gap: .875rem; }
}

.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-16x8 { aspect-ratio: 16 / 8; height: 100%; }
.ratio-4x3  { aspect-ratio: 4 / 3; }

/* Vrijednost koja jos ceka podatak od klijenta. Namjerno se razlikuje
   od upisane vrijednosti da se na prvi pogled vidi sto je nedovrseno. */
.pending {
  color: var(--grey-45);
  font-weight: var(--w-text);
  font-style: italic;
}

.span-all { grid-column: 1 / -1; }

.mt-1 { margin-top: 1.25rem; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }

/* --- Obrazac ------------------------------------------------------------ */

/* Grupe idu jedna ispod druge, polja unutar grupe u dva stupca. */
.form { display: grid; gap: 2rem; }

.form__grupa {
  display: grid;
  gap: 1.25rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;                 /* fieldset inace ne da stupcima da se skupe */
}
.form__grupa + .form__grupa {
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}

.form__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: .25rem;
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-45);
}

@media (min-width: 640px) {
  .form__grupa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}

.field label {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--t-small);
  font-weight: var(--w-label);
}
.field label .req { color: var(--orange); }

/* Oznaka neobaveznog polja. Bez nje korisnik pretpostavi da je sve
   obavezno pa preskoci obrazac. */
.field label .opt {
  font-weight: var(--w-text);
  color: var(--grey-45);
  text-transform: none;
  letter-spacing: 0;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: .875rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--fast);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; cursor: pointer; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  outline: none;
}

/* Stanje greske - javlja ga JS nakon pokusaja slanja */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #c62828; }

.field__error {
  display: none;
  margin-top: .375rem;
  font-size: var(--t-small);
  color: #c62828;
}
.field__error.is-shown { display: block; }

/* --- Raspored stranice s upitom ---
   Obrazac je siri od bocnog stupca, jer je on razlog dolaska na stranicu.
   Bok se na sirem ekranu lijepi uz vrh, pa rok odgovora i WhatsApp ostaju
   vidljivi cijelo vrijeme ispunjavanja. */
.upit { display: grid; gap: 2.5rem; }

.upit__bok {
  background: var(--grey-05);
  padding: clamp(1.5rem, 4vw, 2rem);
}
.bok__veliko {
  font-size: var(--t-h3);
  font-weight: var(--w-solid);
  line-height: 1.15;
  margin-bottom: .75rem;
}
.bok__tekst { font-size: var(--t-small); color: var(--grey-70); max-width: 40ch; }
.bok__crta {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.75rem 0;
}
.upit__bok .contact-list { margin-top: .25rem; }

@media (min-width: 900px) {
  .upit {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  .upit__bok { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* --- Boja i pregled unutar obrasca ---
   Na mobitelu je slika iznad kruzica, na sirem ekranu jedno uz drugo.
   Okvir je isti hairline kao na poljima, da blok pripada obrascu. */
/* Otvaranje. Redak ide s 0fr na 1fr, pa se visina animira bez da se
   unaprijed zna kolika je. Sadrzaj uz to blago klizne odozdo. */
.izbor-omot {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition:
    grid-template-rows .34s cubic-bezier(.4, 0, .2, 1),
    margin-top .34s cubic-bezier(.4, 0, .2, 1);
}
.izbor-omot[hidden] { display: none; }
.izbor-omot.je-otvoren { grid-template-rows: 1fr; margin-top: 1rem; }

/* Zatvoreno stanje nema ni okvir ni razmak, inace bi od ploce ostala
   prazna crta visoka 34 piksela. */
.izbor {
  display: grid;
  gap: 1rem;
  padding: 0;
  border: 0 solid var(--rule);
  min-height: 0;                /* inace 0fr redak ne stisne sadrzaj */
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .28s var(--ease) .04s,
    transform .28s cubic-bezier(.4, 0, .2, 1) .04s,
    padding .34s cubic-bezier(.4, 0, .2, 1),
    border-width .34s cubic-bezier(.4, 0, .2, 1);
}
.izbor-omot.je-otvoren .izbor {
  opacity: 1;
  transform: none;
  padding: 1rem;
  border-width: 1px;
}

/* Prvo crtanje pri ucitavanju stranice ide bez animacije. */
.izbor-omot.bez-animacije,
.izbor-omot.bez-animacije .izbor { transition: none; }

/* Podloga je bijela, ista kao pozadina fotografija. Sivi okvir je oko
   bijele slike izgledao kao greska u kadriranju. */
.izbor__slika {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--paper);
}

/* Kad se prebaci model ili boja dok je ploca vec otvorena, visina se ne
   mijenja pa se promjena inace ne primijeti. Zato nova slika kratko
   uskoci. Klasu skripta svaki put skine i vrati, da se animacija ponovi. */
@keyframes izborSlikaUlaz {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.izbor__slika.je-nova > * { animation: izborSlikaUlaz .26s cubic-bezier(.4, 0, .2, 1); }
/* Sirina i visina su obje ogranicene, pa i siroki kadar motocikla i
   uspravna fotografija stanu u isti okvir bez razvlacenja. */
.izbor__slika img {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  width: auto;
  height: auto;
}
.izbor__slika img[hidden] { display: none; }

/* Kolaz triju modela treba roditelja s visinom, jer su isjecci apsolutni. */
.izbor__kolaz {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;   /* nize nego u izborniku, inace ostane puno praznog */
}
.izbor__kolaz[hidden] { display: none; }
/* Pravilo za pojedinacnu fotografiju gore vrijedi i ovdje i razvuce
   isjecke, pa se za kolaz vraca njegova mjera. */
.izbor__kolaz .kosi__dio img {
  max-width: none;
  max-height: none;
  width: 33%;
}

.izbor__boje { align-self: center; }
.izbor__boje .swatches[hidden] { display: none; }

.izbor__ime {
  margin-top: .75rem;
  font-size: var(--t-small);
  font-weight: var(--w-label);
}
.izbor__nota {
  font-size: var(--t-small);
  color: var(--grey-45);
  max-width: 32ch;
}
.izbor__nota[hidden] { display: none; }

.izbor__veza { margin-top: .75rem; font-size: var(--t-small); }
.izbor__veza a {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color var(--fast), border-color var(--fast);
}
.izbor__veza a:hover { color: var(--orange); border-bottom-color: var(--orange); }

@media (min-width: 640px) {
  .izbor { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; }
}


/* ==========================================================================
   DOSTUPNOST
   Sve stanje dolazi iz js/dostupnost.js. CSS samo zna kako izgleda
   rasprodano: prigusena fotografija, oznaka, precrtan kruzic boje.
   ========================================================================== */

/* Kartica modela kojeg trenutno nema */
.model-cell.je-rasprodano .model-cell__media img {
  opacity: .38;
  filter: grayscale(1);
}
.model-cell.je-rasprodano .model-cell__name a { color: var(--grey-45); }

.oznaka {
  display: inline-block;
  justify-self: start;         /* kartica je grid, inace se rastegne */
  align-self: start;
  width: fit-content;
  margin-top: .625rem;
  padding: .25rem .5rem;
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.oznaka--rasprodano {
  border: 1px solid var(--rule);
  color: var(--grey-45);
}
/* Model koji je na putu. Narancasti obrub jer je to dobra vijest, za
   razliku od rasprodanog koji je siv. */
.oznaka--stize {
  margin-bottom: .875rem;
  padding: .45rem .9rem;
  background: var(--orange);
  color: #fff;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .04em;
  transform: skewX(-8deg);     /* nagib, kao natpis na motoru */
}
/* Ista oznaka, ali kad stoji sama na stranici modela, a ne uz naslov. */
.oznaka--samostalna { margin: 0 0 1rem; }

/* Napomena o probnoj voznji, ispod gumba na stranici modela */
.proba-nota {
  margin-top: 1.25rem;
  padding: .875rem 1.125rem;
  background: var(--grey-05);
  border-left: 4px solid var(--orange);
}
.proba-nota b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
}
.proba-nota span {
  display: block;
  margin-top: .125rem;
  font-size: .9375rem;
  color: var(--grey-70);
}

/* Ugasena poveznica na upit: isti prostor, bez klika i bez strelice */
.link-arrow--ugaseno {
  display: inline-flex;
  align-items: center;
  font-size: .9375rem;
  font-weight: var(--w-label);
  color: var(--grey-45);
  cursor: default;
}

/* Kruzic boje koje nema. Kosa crta preko njega, kako to rade trgovine
   za rasprodane velicine. Crta ide preko same boje, ne preko okvira. */
.swatch.je-rasprodano { cursor: not-allowed; }
.swatch.je-rasprodano::before { opacity: .45; }
.swatch.je-rasprodano::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5rem;
  height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.swatch.je-rasprodano:hover::before { transform: none; }

/* Cijena kad modela nema */
.product__price--rasprodano b { color: var(--grey-45); }

/* Umjesto gumba za upit */
.nema-upita {
  display: inline-block;
  padding: .875rem 0;
  font-size: .9375rem;
  font-weight: var(--w-label);
  color: var(--grey-45);
  border-top: 1px solid var(--rule);
}

/* Napomena ispod padajuceg izbornika u obrascu */
.field__nota {
  margin-top: .5rem;
  font-size: var(--t-small);
  color: var(--grey-45);
}


/* --- Lista cekanja ------------------------------------------------------
   Isti obrazac zivi na dva mjesta: ugradjen na stranici s upitom i u
   prozorcicu drugdje. Zato je izgled polja odvojen od izgleda prozora. */

/* Ploca nasljeduje .form, a on stavlja 2rem izmedu SVAKOG djeteta.
   Uz deset elemenata to je bilo skoro 300 px praznine i gumb je padao
   ispod ekrana. Ovdje razmake drze margine pojedinih dijelova. */
.javi { gap: 0; }

.javi__naslov {
  font-size: var(--t-h3);
  margin-bottom: .5rem;
  text-wrap: balance;          /* dva priblizno jednaka retka umjesto siroko-usko */
}
.javi__uvod { color: var(--grey-70); max-width: 44ch; margin-bottom: 1.125rem; }

/* Na visem ekranu ploca smije disati. Na mobitelu je sve stisnuto da
   gumb stane bez skrolanja unutar ploce. */
@media (min-width: 640px) {
  .javi__naslov { font-size: var(--t-h2); margin-bottom: .75rem; }
  .javi__uvod { margin-bottom: 1.75rem; }
}

.javi__polja { display: grid; gap: .875rem; }
@media (min-width: 640px) {
  .javi__polja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .javi .field--wide { grid-column: 1 / -1; }
}
.javi .field[hidden], .javi [data-polje][hidden] { display: none; }
/* Prekidac i polje ispod njega dijele jedan blok, bez razmaka izmedu. */
.javi .prekidac { margin-bottom: .5rem; }
.javi .field input { padding-block: .75rem; }

/* Oznaka iznad prekidaca; nije <label> jer ne pripada jednom polju. */
.field__oznaka {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--t-small);
  font-weight: var(--w-label);
}

/* Prekidac: dvije tipke koje dijele okvir, odabrana je crna.
   Zamjena za dva polja od kojih se nije vidjelo koje je neobavezno. */
.prekidac {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--rule);
}
.prekidac__tipka {
  padding: .8125rem .5rem;
  border: 0;
  background: var(--paper);
  color: var(--grey-45);
  font: inherit;
  font-size: .9375rem;
  font-weight: var(--w-label);
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.prekidac__tipka + .prekidac__tipka { border-left: 1px solid var(--rule); }
.prekidac__tipka:hover { color: var(--ink); }
.prekidac__tipka.is-odabrana {
  background: var(--ink);
  color: var(--paper);
}
.prekidac__tipka:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.javi__nota {
  margin-top: .75rem;
  font-size: var(--t-small);
  color: var(--grey-45);
  max-width: 46ch;
}
.javi__dno { margin-top: 1.25rem; }
@media (min-width: 640px) { .javi__dno { margin-top: 1.75rem; } }

/* Ploca s prijavom.

   Nije modalni dijalog. showModal() zakljuca cijelu stranicu, pa se s
   ploce ne bi moglo otici u izbornik. Zato ide obican dialog uz vlastiti
   zastor, a zaglavlje ostaje iznad zastora i klikom dostupno.
   Ploca se ne zatvara: nema kriza, nema izlaza na klik izvan nje. */

.javi-zastor {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;                 /* ispod zaglavlja, iznad sadrzaja */
  background: rgba(0, 0, 0, .62);
  animation: javiZastor .32s var(--ease) both;
}
.javi-zastor[hidden] { display: none; }

@keyframes javiZastor { from { opacity: 0; } to { opacity: 1; } }

.javi-okvir {
  position: fixed;
  z-index: 95;                 /* iznad zastora, ispod zaglavlja */
  inset: auto 0 0 0;
  margin: 0 auto;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100svh - var(--header-h) - 2rem);
  padding: 1.25rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  overflow: auto;

}

/* Ulazak odozdo. Ide kao animacija vezana uz [open], ne kao prijelaz na
   klasu koju dodaje skripta: animacija krene sama cim se ploca prikaze,
   pa ne moze ostati nevidljiva ako preglednik preskoci sljedeci kadar.
   Pomak je kratak, ploca je velika pa duga putanja izgleda tromo. */
.javi-okvir[open] {
  animation: javiUlazak .34s cubic-bezier(.4, 0, .2, 1) both;
}

/* Traka s rokom. Narancasta okomita crta lijevo, ista koju stranica vec
   koristi za istaknute napomene. Bez animacije: datum je podatak, ne
   alarm. Oznaka lijevo, datum desno, poravnati po osnovnoj liniji. */
.javi-rok {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.125rem;
  padding: .75rem 1rem;
  border-left: 2px solid var(--orange);
  background: var(--grey-05);
}
.javi-rok__oznaka {
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-45);
}
.javi-rok__kada {
  margin-left: auto;
  font-size: 1.0625rem;
  font-weight: var(--w-solid);
  letter-spacing: -.01em;
}

/* Kriz postoji samo na ploci koju je kupac sam otvorio. */
.javi-okvir__x {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey-45);
  cursor: pointer;
  transition: color var(--fast);
}
.javi-okvir__x:hover { color: var(--ink); }
.javi-okvir.ima-izlaz .javi__naslov { padding-right: 2.5rem; }

@keyframes javiUlazak {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .javi-okvir { padding: clamp(1.75rem, 4vw, 2.5rem); }
}

/* Na niskom ekranu, stari mobiteli i vodoravni polozaj, izbacuju se
   dva reda koja samo objasnjavaju. Naslov i traka s rokom kazu isto,
   a gumb tako ostaje na ekranu bez skrolanja unutar ploce. */
@media (max-height: 44rem) {
  .javi__uvod, .javi__nota { display: none; }
  .javi-okvir { padding-block: 1rem; }
}

/* Na visem ekranu ploca stoji na sredini, ne pri dnu. */
@media (min-height: 40rem) {
  .javi-okvir { inset: 0; margin: auto; height: fit-content; }
}

/* --- Kvacica ---
   Ista logika kao ostala polja: kvadrat, bez zaobljenja, narancasto kad
   je odabrano. Cijela oznaka je meta za klik, ne samo kvadratic. */
.kvadratic {
  display: flex;
  align-items: center;      /* kvadratic i tekst u istoj liniji */
  gap: .75rem;
  cursor: pointer;
  font-size: .9375rem;
  line-height: 1.4;
  font-weight: var(--w-text);
}
/* Model bez probne voznje: kvacica se ne moze oznaciti. */
.kvadratic:has(input:disabled) { cursor: not-allowed; color: var(--grey-45); }
.kvadratic input:disabled { border-color: var(--rule); background: var(--grey-05); cursor: not-allowed; }
.kvadratic input {
  appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.kvadratic input:checked {
  background: var(--orange);
  border-color: var(--orange);
  /* Kvacica je nacrtana pozadinom, bez dodatnog elementa u HTML-u. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size: 100%;
}
.kvadratic input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kvadratic__nota {
  margin-top: .375rem;
  margin-left: 2rem;
  font-size: var(--t-small);
  color: var(--grey-45);
}

/* Medic za botove - covjek ga ne vidi */
.hp { position: absolute; left: -9999px; }

/* Gumb je iznad sitnog teksta. Obrnuto se cesto ne primijeti da je
   obrazac gotov, pa se skrola dalje trazeci nastavak. */
.form__foot { display: grid; gap: 1rem; justify-items: start; }
.form__note { font-size: var(--t-small); color: var(--grey-45); max-width: 52ch; }
/* Poveznica na uvjete inace nestane u sivom tekstu. */
.form__note a {
  color: var(--grey-70);
  border-bottom: 1px solid var(--rule);
  transition: color var(--fast), border-color var(--fast);
}
.form__note a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Uspjesno slanje: ista traka, samo zelena crta umjesto narancaste. */
.form__status--uspjeh { border-left-color: #2e7d32; }

.form__status {
  grid-column: 1 / -1;
  display: none;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--orange);
  background: var(--grey-05);
  font-size: var(--t-small);
}
.form__status.is-shown { display: block; }

/* --- Kontakt podaci ----------------------------------------------------- */

.contact-list li + li { margin-top: 1.5rem; }
.contact-list dt {
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-45);
  margin-bottom: .375rem;
}
.contact-list dd { margin: 0; font-size: var(--t-lead); font-weight: var(--w-solid); }
.contact-list dd a { transition: color var(--fast); }
.contact-list dd a:hover { color: var(--orange); }

/* --- Proces -------------------------------------------------------------
   Cetiri jednaka pravokutnika ne citaju se kao redoslijed nego kao popis
   znacajki. Zato: redovi jedan ispod drugog, odvojeni vlasastom crtom,
   a broj koraka je najveci element na retku. Velicina nosi redoslijed,
   ne boja - narancasta ostaje rezervirana za tipke.
   ------------------------------------------------------------------------ */

.flow { border-top: 1px solid var(--rule-strong); }

.flow__step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas:
    "num title"
    ".   desc";
  gap: .375rem 1.25rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .flow__step {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-areas: "num title desc";
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    padding-block: 2.25rem;
  }
}

.flow__num {
  grid-area: num;
  font-size: clamp(2.25rem, 7vw, 4.25rem);
  font-weight: var(--w-solid);
  letter-spacing: -.05em;
  line-height: .82;
  /* Dovoljno svijetlo da se povuce, dovoljno tamno za 3:1 na velikom tekstu */
  color: #8a8a8a;
}
.section--dark .flow__num { color: #6e6e6e; }

.flow__title {
  grid-area: title;
  font-size: var(--t-h3);
  align-self: center;
}
@media (min-width: 900px) { .flow__title { align-self: start; } }

.flow__desc {
  grid-area: desc;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--grey-70);
  max-width: 44ch;
}
.section--dark .flow__desc { color: #b4b4b4; }

.section--dark .flow,
.section--dark .flow__step { border-color: var(--rule-dark); }

/* Blago kaskadno pojavljivanje - svaki red kasni malo za prethodnim.
   Preporuka iz baze: 20-40 ms po stavci, iznad toga djeluje troma. */
.flow__step:nth-child(2) { transition-delay: 60ms; }
.flow__step:nth-child(3) { transition-delay: 120ms; }
.flow__step:nth-child(4) { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .flow__step { transition-delay: 0ms !important; }
}

/* --- Cesta pitanja ------------------------------------------------------
   Nativni <details>/<summary>: radi bez JS-a, tipkovnica ga otvara sama,
   citaci ekrana ga razumiju bez ijednog aria atributa.
   ------------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--rule-strong); }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  font-size: 1.0625rem;
  font-weight: var(--w-solid);
  letter-spacing: -.01em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;                 /* mice zadani trokutic */
  transition: color var(--fast);
}
.faq__q::-webkit-details-marker { display: none; }   /* Safari */
.faq__q:hover { color: var(--orange); }

@media (min-width: 900px) {
  .faq__q { font-size: 1.1875rem; padding-block: 1.5rem; }
}

/* Plus koji se pretvara u minus. Dvije crte preko ::before i ::after,
   okomita se samo zarotira - bez ikone i bez dodatnog zahtjeva. */
.faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 14px; height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--fast);
}
.faq__sign::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: translateY(-50%) rotate(0deg); }

/* Sa skriptom open ostaje postavljen do kraja zatvaranja, pa znak mora
   slusati klasu, inace se minus vrati u plus prekasno. */
.js-faq .faq__item[open] .faq__sign::after { transform: translateY(-50%) rotate(90deg); }
.js-faq .faq__item.je-otvoren .faq__sign::after { transform: translateY(-50%) rotate(0deg); }

/* Otvaranje i zatvaranje se animira istim trikom kao mobilni izbornik:
   grid-template-rows iz 0fr u 1fr. Preglednik inace sam sakriva sadrzaj
   zatvorenog <details>, pa mu display: grid to preuzima iz ruku, inace
   se zatvaranje ne bi imalo sto animirati. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
.faq__item[open] .faq__a { grid-template-rows: 1fr; }

/* Sa skriptom visinu vodi klasa, a ne open. Tako se moze animirati i
   otvaranje i zatvaranje; bez skripte gornje pravilo samo pokaze odgovor. */
.js-faq .faq__item[open] .faq__a { grid-template-rows: 0fr; }
.js-faq .faq__item.je-otvoren .faq__a { grid-template-rows: 1fr; }

.faq__a-inner {
  overflow: hidden;
  min-height: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 58ch;
}

/* Tekst dolazi za visinom, s malim zaostatkom, da se ne vidi kako se lomi
   po redovima dok se prostor jos otvara. Samo sa skriptom; bez nje odgovor
   mora biti citljiv i bez ovoga. */
.js-faq .faq__a-inner { opacity: 0; transition: opacity .24s var(--ease); }
.js-faq .faq__item.je-otvoren .faq__a-inner { opacity: 1; transition-delay: .08s; }
.faq__a-inner p + p { margin-top: .875rem; }
.faq__a-inner > :last-child { padding-bottom: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .faq__a { transition: none; }
}

/* --- CTA traka ---------------------------------------------------------- */

.cta h2 { font-size: var(--t-h2); max-width: 20ch; margin-bottom: 1.75rem; }

@media (min-width: 900px) {
  .cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  .cta h2 { margin-bottom: 0; }

  /* Naslov i gumb stoje jedno uz drugo, pa traka ne treba punu visinu
     sekcije. S njom je na desktopu ostajao siroki pojas prazne teksture. */
  .section--carbon { padding-block: calc(var(--section) * .7); }
}

/* --- Podnozje ----------------------------------------------------------- */

.site-footer {
  background: var(--ink-pure);
  color: var(--paper);
  padding-block: 3.5rem 1.75rem;
}
@media (min-width: 1000px) { .site-footer { padding-block: 6rem 2rem; } }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 3rem; padding-bottom: 3.5rem; } }

.footer__brand .brand { display: inline-block; margin-bottom: .875rem; }
.footer__brand p { color: #9b9b9b; font-size: .9375rem; max-width: 32ch; }

.footer__col h3 {
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9b9b9b;
  margin-bottom: 1rem;
}
.footer__col li + li { margin-top: .75rem; }
.footer__col a {
  font-size: .9375rem;
  color: rgba(255,255,255,.85);
  transition: color var(--fast);
}
.footer__col a:hover { color: var(--orange); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: var(--t-small);
  color: #9b9b9b;
}

/* --- Scroll reveal ------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Modeli na pocetnoj: celije ulaze jedna za drugom, motor se dokotrlja
   s desna. Na hover se motor malo primakne i nagne, strelica gurne. */
.model-grid.reveal { transform: none; }
.model-grid.reveal .model-cell {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.model-grid.reveal .model-cell__media img {
  transform: translateX(14%);
  opacity: 0;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.model-grid.is-in .model-cell,
.model-grid.is-in .model-cell__media img { opacity: 1; transform: none; }
.model-grid.is-in .model-cell.je-rasprodano .model-cell__media img { opacity: .38; }
.model-grid.is-in .model-cell:nth-child(2),
.model-grid.is-in .model-cell:nth-child(2) img { transition-delay: .12s; }
.model-grid.is-in .model-cell:nth-child(3),
.model-grid.is-in .model-cell:nth-child(3) img { transition-delay: .24s; }
.model-grid.is-in .model-cell:nth-child(4) { transition-delay: .36s; }
.model-grid.is-in .model-cell__media img { transition-delay: .15s; }

@media (hover: hover) {
  .model-cell:hover .link-arrow svg { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .model-grid.reveal .model-cell,
  .model-grid.reveal .model-cell__media img { opacity: 1; transform: none; }
}

/* Traka iza zavrsnog poziva na akciju.
   Zasad ravna crna. Kad nabavis teksturu, spremi je u assets/ i
   otkomentiraj dva retka ispod. Plocica se mora besavno ponavljati,
   a background-size postavi na stvarnu velicinu plocice. */
.section--carbon {
  background-color: #141414;

  /* Plocica je izrezana na tocan period uzorka (214 px, tri ciklusa po
     71.3 px), pa se poplocava bez sava. Prikazuje se na 107 px, dakle
     upola: smanjivanje ostaje ostro, a povecavanje bi mutilo.
     Prvi redak je rezerva za preglednike bez image-set. */
  background-image: url("../assets/karbon.png");
  background-image: image-set(
    url("../assets/karbon.webp") type("image/webp"),
    url("../assets/karbon.png")  type("image/png"));
  background-repeat: repeat;
  background-size: 107px 107px;
}

/* ==========================================================================
   O NAMA
   Veliki naslov, traka s brojkama, prica u dva stupca, video, kose trake
   koje klize, kartice, pitanja prije upita i narancasti zavrsni blok.
   ========================================================================== */

.on-label {
  margin-bottom: 1rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}

/* --- Hero --- */
/* Fotografija: Unsplash, oTLHqheXS7Q (besplatna licenca), zemljana
   staza kroz sumu. Namjerno bez motora: tudji motor na slici bio bi
   tudja marka. Zamijeniti pravom fotkom Valtinsua kad stigne. */
.on-hero {
  background-color: var(--ink-pure);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.15) 100%),
    url("../assets/o-nama-hero.webp");
  background-size: cover;
  background-position: center 40%;
  color: var(--paper);
  padding-block: calc(var(--header-h) + 3rem) 4rem;
}
.on-hero h1 {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .95;
  text-transform: uppercase;
  max-width: 14ch;
  margin-top: 1.5rem;
}
.on-hero h1 span { color: var(--orange); }
.on-hero__lead {
  margin-top: 2rem;
  max-width: 52ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: #c8c8c8;
}
@media (min-width: 1000px) { .on-hero { padding-block: 7rem 3.5rem; } }
.on-hero h1 { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.5rem); max-width: 18ch; }
.on-hero__lead { margin-top: 1.25rem; }

/* Brojke ispod price, prije videa */
.on-stat--prica { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* --- Brojke --- */
.on-brojke { padding-block: 2.5rem 0; }
.on-stat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}
@media (min-width: 900px) { .on-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.on-stat li { padding: 1.75rem clamp(1rem, 2.5vw, 2rem); }
.on-stat li + li { border-left: 1px solid var(--rule); }
@media (max-width: 899px) {
  .on-stat li:nth-child(3) { border-left: 0; }
  .on-stat li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
.on-stat b {
  display: block;
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.on-stat i { font-style: normal; color: var(--orange); }
.on-stat span {
  display: block;
  margin-top: .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--grey-70);
}

/* --- Dva stupca: lijevo naslov, desno tekst --- */
.on-split { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .on-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
}
.on-split h2 {
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.on-split__tekst p {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--grey-70);
}
.on-split__tekst p + p { margin-top: 1.25rem; }

.on-video {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  aspect-ratio: 16 / 7;
  background: var(--ink-pure);
  overflow: hidden;
}
.on-video video,
.on-video img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

/* --- Kose trake --- */
.on-trake {
  position: relative;
  height: 9rem;
  overflow: hidden;
  margin-block: 1rem;
}
.on-traka {
  position: absolute;
  left: -5%;
  width: 110%;
  overflow: hidden;
  padding-block: .8rem;
}
.on-traka--nar { top: 1.75rem; background: var(--orange); transform: rotate(-2deg); z-index: 1; }
.on-traka--bijela { top: 4.25rem; background: var(--ink); transform: rotate(1.5deg); }
.on-traka__niz {
  display: flex;
  width: max-content;
  animation: on-klizi 38s linear infinite;
}
.on-traka--bijela .on-traka__niz { animation-direction: reverse; }
.on-traka__niz span {
  padding-inline: 1.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
}
.on-traka__niz span::after { content: "/"; margin-left: 3rem; opacity: .5; }
@keyframes on-klizi { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .on-traka__niz { animation: none; } }

/* --- Kartice --- */
.on-glava { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 900px) {
  .on-glava { grid-template-columns: 1fr auto; align-items: end; }
}
.on-glava h2 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
}
.on-glava > p { font-size: var(--t-lead); color: var(--grey-70); }

.on-kartice {
  display: grid;
  gap: 1rem;
  counter-reset: kartica;
}
@media (min-width: 760px) { .on-kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.on-kartice li {
  counter-increment: kartica;
  padding: 2rem clamp(1.25rem, 2.5vw, 2rem);
  background: var(--grey-05);
  border-top: 3px solid var(--ink);
  transition: border-color var(--fast), transform var(--fast);
}
.on-kartice li:hover { border-top-color: var(--orange); transform: translateY(-3px); }
.on-kartice li::before {
  content: counter(kartica, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--orange);
}
.on-kartice h3 { font-size: var(--t-h3); font-weight: 700; margin-bottom: .5rem; }
.on-kartice p { color: var(--grey-70); line-height: 1.6; max-width: 46ch; }

/* --- Prije upita --- */
.on-prije { background: var(--ink-pure); color: var(--paper); }
.on-veliki {
  font-size: var(--t-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  line-height: .95 !important;
  max-width: 9ch;
}
.on-prije .faq { border-top-color: var(--rule-dark); }
.on-prije .faq__item { border-bottom-color: var(--rule-dark); }
.on-prije .faq__q { font-size: 1.25rem; padding-block: 1.5rem; }
.on-prije .faq__a p { color: #c8c8c8; }
.on-prije .faq__sign { color: var(--orange); }

/* --- Zavrsni blok --- */
/* Ista staza kao u heriju, pa stranica zavrsi gdje je i pocela.
   Narancasta ostaje samo na tipki i oznaci, ne na cijeloj plohi. */
.on-cta {
  position: relative;
  color: var(--paper);
  background-color: var(--ink-pure);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.45) 100%),
    url("../assets/o-nama-hero.webp");
  background-size: cover;
  background-position: center 65%;
  border-top: 4px solid var(--orange);
  padding-block: clamp(4rem, 9vw, 7rem);
}
.on-cta__inner { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .on-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4rem; }
  .on-cta__tipke { flex-direction: column; min-width: 17rem; }
  .on-cta__tipke .btn { justify-content: space-between; min-height: 3.75rem; font-size: 1rem; }
}
.on-cta h2 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase;
  max-width: 16ch;
}
.on-cta__tekst { margin-top: 1.25rem; max-width: 46ch; font-size: var(--t-lead); line-height: 1.55; color: #c8c8c8; }
.on-cta__tipke { display: flex; flex-wrap: wrap; gap: .75rem; }
.on-cta .btn--outline { color: var(--paper); }

/* ==========================================================================
   CIJENE
   Standardni obrazac: stara cijena u <del> (citaci ekrana je prepoznaju,
   uz to i skriveni tekst "Stara cijena"), ravna crta preko nje, nova
   cijena velika i crna ispod. Usteda u eurima, bez postotaka.
   ========================================================================== */
.cijena { display: grid; justify-items: start; gap: .25rem; }
.cijena__stara,
.kart-cijena del {
  color: var(--grey-45);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
}
.cijena__stara { font-size: 1.125rem; }
.product__price .cijena__nova,
.product__price--rasprodano .cijena__nova,
.cijena__nova {
  display: block;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.product__price .cijena__usteda,
.cijena__usteda {
  display: inline-block;
  margin-top: .5rem;
  padding: .3rem .65rem;
  background: var(--orange);
  color: var(--paper);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  transform: skewX(-8deg);
}

.kart-cijena { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .6rem; margin: -.25rem 0 1rem; }
.kart-cijena del { font-size: 1rem; }
.kart-cijena b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

/* --- Akcija ---------------------------------------------------------------
   Popust vrijedi za prvu isporuku, ne zauvijek. Kosa oznaka kao "Stize",
   ali na blijedo narancastoj podlozi, da ne vice jednako glasno. */
.kart-akcija,
.cijena__akcija > b {
  display: inline-block;
  padding: .28rem .6rem .24rem;
  background: var(--orange-dim);
  box-shadow: inset 3px 0 0 var(--orange);
  color: var(--orange-hover);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(-10deg);
  align-self: center;
}
.product__price .cijena__akcija,
.cijena__akcija {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
  margin-top: .75rem;
  font-size: .9375rem;
  color: var(--ink);
}
.product__price .cijena__akcija > b { font-size: .8125rem; font-weight: 800; }
.product__price .cijena__akcija > span {
  display: inline;
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--grey-70);
}

/* --- Kartica "Uskoro" -----------------------------------------------------
   Treca celija u mrezi "Ostali modeli" na stranicama modela. Svijetlo
   siva, da ne udara u oko uz bijele kartice. Narancasta crta lijevo i
   kosa oznaka nose naglasak. */
.model-cell--uskoro {
  justify-content: center;
  background: var(--grey-05);
  box-shadow: inset 4px 0 0 var(--orange);
  color: var(--ink);
  padding-block: 3rem;
}
.uskoro__oznaka {
  align-self: start;
  margin-bottom: 1.25rem;
  padding: .35rem .8rem;
  background: var(--orange);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
.uskoro__naslov {
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase;
  max-width: 10ch;
}
.uskoro__oznaka { color: var(--paper); }
.uskoro__tekst { margin-top: 1rem; max-width: 30ch; color: var(--grey-70); line-height: 1.6; }
.uskoro__link { margin-top: 1.5rem; align-self: start; color: var(--ink); }
.uskoro__link:hover { color: var(--orange); }
/* --- Sukladnost (stranica modela) ---------------------------------------
   Okvir sa stitom i kvacicama, ispod upozorenja o cesti. Samo potvrdjene
   stavke; vidi komentar u HTML-u. */
.sukladnost {
  margin-top: 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.sukladnost__glava {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.sukladnost__stit {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: .5rem;
  background: var(--orange);
  color: var(--paper);
}
.sukladnost__glava b { display: block; font-size: 1rem; font-weight: 800; }
.sukladnost__glava span { display: block; font-size: .8125rem; color: var(--grey-45); }
.sukladnost__popis { padding: .75rem 1.25rem 1rem; }
.sukladnost__popis li {
  position: relative;
  padding: .4rem 0 .4rem 1.75rem;
  font-size: .9375rem;
  font-weight: 600;
}
.sukladnost__popis li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .72rem;
  width: .75rem;
  height: .4rem;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
/* ==========================================================================
   KUPNJA I JAMSTVO
   Koristi komponente s O nama (on-hero, on-glava, on-label, on-cta) i
   dodaje: cinjenice u heroju, vremensku crtu koja se puni pri skrolanju,
   usporedbu kutija/sastavljen, jamstvo da/ne, provjeru i pretragu pitanja.
   ========================================================================== */

/* --- Hero: tri cinjenice ispod uvoda --- */
.kp-cinjenice {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 2rem;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  width: fit-content;
  max-width: 100%;
}
.kp-cinjenice li {
  padding: .9rem 1.4rem;
  background: rgba(0, 0, 0, .55);
}
.kp-cinjenice b { display: block; font-size: 1.125rem; font-weight: 800; }
.kp-cinjenice span { display: block; margin-top: .15rem; font-size: .8125rem; color: #c8c8c8; }

/* Mobitel: jedna uredna lista preko cijele sirine umjesto 2 + 1
   plocice. Naziv lijevo, objasnjenje desno, narancasta crta ispred. */
@media (max-width: 639px) {
  .kp-hero { padding-bottom: 2.5rem; }
  .kp-cinjenice {
    display: grid;
    width: 100%;
    margin-top: 1.5rem;
    background: none;
    border: 0;
    gap: .5rem;
  }
  .kp-cinjenice li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    background: rgba(0, 0, 0, .6);
    border-left: 3px solid var(--orange);
  }
  .kp-cinjenice b { font-size: 1rem; }
  .kp-cinjenice span { margin: 0; text-align: right; }
}

/* --- Put do motora: vremenska crta --- */
.kp-put {
  --napredak: 0;
  position: relative;
  display: grid;
  gap: 2rem;
  padding-left: 3.5rem;
}
.kp-put::before,
.kp-put::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: .5rem;
  bottom: .5rem;
  width: 4px;
}
.kp-put::before { background: var(--rule); }
/* Narancasta linija raste odozgo kako se skrola (JS postavlja --napredak) */
.kp-put::after {
  background: var(--orange);
  transform-origin: top;
  transform: scaleY(var(--napredak));
}
.kp-korak { position: relative; max-width: 46ch; }
.kp-korak__br {
  position: absolute;
  left: -3.5rem;
  top: -.2rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--paper);
  border: 2px solid var(--rule);
  font-size: .875rem;
  font-weight: 800;
  color: var(--grey-45);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.kp-korak h3 { font-size: var(--t-h3); font-weight: 700; transition: color .3s var(--ease); color: var(--grey-45); }
.kp-korak p { margin-top: .4rem; color: var(--grey-70); line-height: 1.6; }
.kp-korak.is-on .kp-korak__br { background: var(--orange); border-color: var(--orange); color: var(--paper); }
.kp-korak.is-on h3 { color: var(--ink); }

@media (min-width: 1000px) {
  /* Na sirokom ekranu crta ide vodoravno, koraci u pet stupaca */
  .kp-put { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; padding: 3.5rem 0 0; }
  .kp-put::before,
  .kp-put::after { left: 0; right: 0; top: 1.2rem; bottom: auto; width: auto; height: 4px; }
  .kp-put::after { transform-origin: left; transform: scaleX(var(--napredak)); }
  .kp-korak__br { left: 0; top: -3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-put::after { transform: none; }
}

/* --- Kutija ili sastavljen --- */
.kp-opcije { display: grid; gap: 1rem; }
@media (min-width: 760px) { .kp-opcije { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kp-opcija {
  padding: 2rem clamp(1.25rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
}
.kp-opcija--istaknuto { border-top-color: var(--orange); }
.kp-opcija__oznaka {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .3rem .7rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
.kp-opcija--istaknuto .kp-opcija__oznaka { background: var(--orange); }
.kp-opcija h3 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.kp-lista li {
  position: relative;
  padding: .45rem 0 .45rem 1.75rem;
  border-top: 1px solid var(--rule);
  font-weight: 600;
}
.kp-lista li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .85rem;
  width: .75rem;
  height: .4rem;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
.kp-napomena { margin-top: 1.25rem; color: var(--grey-70); font-weight: 600; }

/* --- Jamstvo da / ne --- */
.kp-jamstvo { display: grid; gap: 1rem; }
@media (min-width: 760px) { .kp-jamstvo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kp-jam { padding: 1.75rem clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--rule); }
.kp-jam--da { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kp-jam h3 { font-size: var(--t-h3); font-weight: 800; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.kp-jam h3::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  background: var(--orange) no-repeat center / 60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E");
}
.kp-jam--ne h3::before {
  background-color: var(--grey-45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}
.kp-jam li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--rule);
}
.kp-jam--da li { border-top-color: var(--rule-dark); }
.kp-jam li b { font-weight: 700; }
.kp-jam li span { text-align: right; color: var(--grey-45); }
.kp-jam--da li span { color: var(--orange); font-weight: 800; }

.kp-kako {
  margin-top: 1rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2rem);
  background: var(--grey-05);
  border-left: 4px solid var(--orange);
}
.kp-kako h3 { font-size: var(--t-h3); font-weight: 800; margin-bottom: .75rem; }
.kp-kako ol { counter-reset: kako; display: grid; gap: .5rem; }
.kp-kako li { counter-increment: kako; display: flex; gap: .75rem; font-weight: 600; }
.kp-kako li::before { content: counter(kako) "."; color: var(--orange); font-weight: 800; }
.kp-kako > p { margin-top: 1rem; color: var(--grey-70); }

/* --- Provjera: je li ovo za vas --- */
.kp-provjera { display: grid; gap: 1rem; }
.kp-pitanje {
  border: 1px solid var(--rule-dark);
  padding: 1.1rem 1.25rem;
  margin: 0;
}
.kp-pitanje legend { float: left; width: 100%; margin-bottom: .9rem; font-weight: 600; line-height: 1.45; }
.kp-odg { clear: both; display: flex; gap: .5rem; }
.kp-odg label { position: relative; cursor: pointer; }
.kp-odg input { position: absolute; opacity: 0; }
.kp-odg span {
  display: inline-grid;
  place-items: center;
  min-width: 5rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--rule-dark);
  font-weight: 700;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.kp-odg label:hover span { border-color: var(--paper); }
.kp-odg input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.kp-odg input[value="da"]:checked + span { background: var(--orange); border-color: var(--orange); }
.kp-odg input[value="ne"]:checked + span { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.kp-ishod { margin-top: .5rem; padding: 1.25rem; background: rgba(255, 255, 255, .06); }
.kp-ishod b { display: block; font-size: 1.25rem; font-weight: 800; }
.kp-ishod p { margin: .35rem 0 0; color: #c8c8c8; }
.kp-ishod .btn { margin-top: 1rem; }
.kp-ishod__ceka { color: #9b9b9b; }
.kp-ishod__da b { color: var(--orange); }

/* --- Pitanja s pretragom --- */
.kp-trazi input {
  width: min(22rem, 100%);
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  font: inherit;
  background: var(--paper);
}
.kp-trazi input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.kp-pitanja { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .kp-pitanja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; }
}
.kp-grupa__naslov {
  margin-bottom: .75rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}
.kp-nema { grid-column: 1 / -1; font-weight: 600; }
.kp-nema a { color: var(--orange); }

/* Pitanja dolaze odmah iza bijele sekcije s jamstvom; puni gornji
   razmak bi se zbrojio s donjim i ostala bi rupa. */

/* --- Telefon s fiksnim +385 ---------------------------------------------
   Okvir nosi omot, pa pozivni broj i polje izgledaju kao jedno polje. */
.tel-polje {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: border-color var(--fast);
}
.tel-polje:focus-within { border-color: var(--orange); }
.tel-polje:has(input[aria-invalid="true"]) { border-color: #c62828; }
.tel-polje__pozivni {
  display: grid;
  place-items: center;
  padding: 0 .9rem;
  background: var(--grey-05);
  border-right: 1px solid var(--rule);
  font-weight: 700;
  color: var(--ink);
  user-select: none;
}
.field .tel-polje input,
.field .tel-polje input:focus,
.field .tel-polje input[aria-invalid="true"] {
  border: 0;
  min-width: 0;
  letter-spacing: .02em;
}
/* --- Uvod u cesta pitanja na pocetnoj -----------------------------------
   Veliki naslov kao na O nama; tipka vodi na Kupnju i jamstvo, WhatsApp
   ostaje kao tekstualna poveznica ispod. */
.faq-uvod h2 { font-size: var(--t-h2); margin-bottom: 1rem; }
.faq-uvod .lead { max-width: 36ch; }
.faq-uvod__tipke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.faq-uvod__tipke .btn { min-height: 3.5rem; font-size: 1rem; gap: 1rem; }
/* --- Kartice modela: listanje slika i boje -------------------------------
   Strelice se pojave na hover, a na dodirnom uredaju stoje stalno, jer
   ondje hovera nema. Brojac je uvijek vidljiv, da se zna da ima jos. */
.kart-galerija { position: relative; }
.kart-galerija img { transition: opacity .22s var(--ease); }
.kart-galerija img.je-mijenja { opacity: 0; }

.kart-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: .5rem;
  pointer-events: none;
}
.kart-nav__tipka {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--fast), transform var(--fast), background var(--fast);
}
.model-cell:hover .kart-nav__tipka,
.kart-nav__tipka:focus-visible { opacity: 1; transform: none; }
.kart-nav__tipka:hover { background: var(--orange); }
@media (hover: none) {
  .kart-nav__tipka { opacity: 1; transform: none; }
}

.kart-brojac {
  position: absolute;
  right: .5rem;
  bottom: .25rem;
  z-index: 2;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--grey-45);
}

.kart-boje { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.kart-boja {
  position: relative;
  z-index: 2;              /* iznad rastegnutog linka kartice */
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(45deg, var(--c) 0 64%, var(--akcent) 64% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  transition: transform var(--fast), box-shadow var(--fast);
}
.kart-boja:hover { transform: scale(1.08); }
.kart-boja[aria-checked="true"] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25),
              0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .kart-galerija img, .kart-nav__tipka, .kart-boja { transition: none; }
}

/* --- Podnozje, novi raspored --------------------------------------------
   Gornji red nosi brend i dva nacina javljanja (WhatsApp, mail), ispod su
   cetiri stupca poveznica, a na dnu pravna traka. */
.footer__vrh {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 900px) {
  .footer__vrh {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }
}
.footer__brand p { color: #9b9b9b; font-size: .9375rem; line-height: 1.6; max-width: 46ch; }

.footer__kontakt { display: grid; gap: .75rem; }
@media (min-width: 560px) { .footer__kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer__veza {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rule-dark);
  color: var(--paper);
  transition: border-color var(--fast), background var(--fast);
}
.footer__veza:hover { border-color: var(--orange); background: rgba(255, 91, 0, .12); }
.footer__veza svg { flex: 0 0 auto; color: var(--orange); }
.footer__veza b { display: block; font-size: .9375rem; font-weight: 700; }
.footer__veza i { display: block; font-style: normal; font-size: .75rem; color: #9b9b9b; }

@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer__col h3 { color: var(--orange); font-weight: 700; }
.footer__col--mjesto p { font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.footer__radno { margin-top: .75rem; color: #9b9b9b !important; font-size: .8125rem !important; }
.footer__radno a { font-size: inherit; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__sitno { max-width: 52ch; }

/* --- Potvrda nakon slanja upita ------------------------------------------
   Preko cijelog ekrana, da se na mobitelu ne moze promasiti. Kvacica se
   iscrtava, ploca ulazi odozdo. Uz smanjeno kretanje sve je odmah tu. */
.uspjeh {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, .72);
  /* Bez prijelaza na vidljivost: u tabu koji se ne crta prijelaz ne tece,
     pa bi potvrda ostala prozirna. Animira se samo ulaz ploce. */
}

.uspjeh__ploca {
  width: min(30rem, 100%);
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--paper);
  border-top: 5px solid var(--orange);
  text-align: center;
  transform: translateY(18px) scale(.98);
  transition: transform .28s var(--ease);
}
.uspjeh.je-vidljiva .uspjeh__ploca { transform: none; }

.uspjeh__znak { display: block; width: 5rem; height: 5rem; margin: 0 auto 1.25rem; }
.uspjeh__krug {
  fill: none;
  stroke: var(--orange);
  stroke-width: 4;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: uspjeh-krug .5s var(--ease) .1s forwards;
}
.uspjeh__kvaka {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: square;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: uspjeh-kvaka .3s var(--ease) .5s forwards;
}
@keyframes uspjeh-krug  { to { stroke-dashoffset: 0; } }
@keyframes uspjeh-kvaka { to { stroke-dashoffset: 0; } }

.uspjeh__ploca h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.03em; }
.uspjeh__ploca p { margin-top: .75rem; color: var(--grey-70); line-height: 1.6; }
.uspjeh__tipke { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.75rem; }

.uspjeh.bez-animacije,
.uspjeh.bez-animacije .uspjeh__ploca { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .uspjeh__krug, .uspjeh__kvaka { animation: none; stroke-dashoffset: 0; }
}

/* --- Obrazac: citljiviji raspored ----------------------------------------
   Svaka grupa je kartica s rednim brojem, polja su visa (48px+ dodirna
   meta), a fokus se vidi narancastim prstenom. */
.form { counter-reset: grupa; }
.form__grupa {
  counter-increment: grupa;
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
}
.form__legend {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  padding: 0;
  margin-bottom: 1.25rem;
}
.form__legend::before {
  content: "0" counter(grupa);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--orange);
  color: var(--paper);
  font-size: .75rem;
  font-weight: 800;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  min-height: 3.25rem;
  padding: .9rem 1rem;
  font-size: 1rem;
}
.field textarea { min-height: 8rem; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.tel-polje:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-dim);
}
.field label { font-weight: 600; }

.form__foot {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding-top: .5rem;
}
@media (min-width: 700px) { .form__foot { grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; } }
.form__foot .btn { min-height: 3.5rem; font-size: 1rem; padding-inline: 2.25rem; }
.form__note { font-size: .8125rem; line-height: 1.6; color: var(--grey-45); }

/* --- Koraci nakon slanja: ista traka kao na Kupnji ---------------------- */
.kp-put--staticno::after { transform: scaleY(1); }
@media (min-width: 1000px) { .kp-put--staticno::after { transform: scaleX(1); } }
.kp-put--staticno .kp-korak__br { background: var(--orange); border-color: var(--orange); color: var(--paper); }
.kp-put--staticno .kp-korak h3 { color: var(--ink); }

/* --- Izbornik modela: jaci naglasak na popisu lijevo ----------------------
   Svaka stavka ima naziv i kratak podatak (snaga, cijena). Narancasta
   crta i pomak udesno pokazuju na koji model pokazujes. */
.subnav__link {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  padding-left: 1.25rem;
  transition: color var(--fast), padding-left var(--fast), background var(--fast);
}
.subnav__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: .9rem;
  bottom: .9rem;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--fast);
}
.subnav__link:hover::before,
.subnav__link:focus-visible::before,
.subnav__link[aria-current="page"]::before { transform: scaleY(1); }
.subnav__link:hover { padding-left: 1.6rem; }
.subnav__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.subnav__pod {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--grey-45);
}
.subnav__link:hover .subnav__pod,
.subnav__link[aria-current="page"] .subnav__pod { color: var(--grey-70); }

/* --- Podnozje: tekstura umjesto ravne crne ------------------------------
   Dvije vrlo tihe kose crte (3% bijelog) i jedan narancasti odsjaj gore
   desno. Uzorak se jedva vidi, ali crna vise ne izgleda kao rupa. */
.site-footer {
  position: relative;
  background-color: var(--ink-pure);
  background-image:
    radial-gradient(60rem 28rem at 88% -10%, rgba(255, 91, 0, .16), transparent 70%),
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .035) 0 1px,
      transparent 1px 9px);
}
.site-footer > .shell { position: relative; z-index: 1; }

/* Oznaka polja inace ima display: block i jaca je od .kvadratic, pa se
   kvadratic i tekst nisu poravnali. Ovdje je specificnost izjednacena. */
.field .kvadratic,
.kvadratic {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: var(--w-text);
}

/* --- Obrazac: odabrana varijanta 8 + F -----------------------------------
   8: grupe bez brojeva i bez kartica, naslov je sitna oznaka velikim
      slovima, grupe razdvaja tanka crta.
   F: polja imaju debeli crni okvir, na fokus postaje narancast. */
.form__grupa {
  padding: 0;
  margin: 0 0 2rem;
  background: none;
  border: 0;
}
.form__grupa + .form__grupa {
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}
.form__legend {
  display: block;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-45);
  margin-bottom: 1.25rem;
}
.form__legend::before { content: none; }
.form__legend .req { color: var(--orange); }

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.tel-polje {
  border: 2px solid var(--ink);
  border-radius: 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.tel-polje:focus-within {
  border-color: var(--orange);
  box-shadow: none;
}
.tel-polje input { border: 0; }
.tel-polje__pozivni { border-right: 2px solid var(--ink); }
.tel-polje:focus-within .tel-polje__pozivni { border-right-color: var(--orange); }

/* Kosa strelica ispred "Kontaktirajte nas": pokazuje da vodi dalje, a
   stoji lijevo od teksta pa se cita kao jedna cjelina. */
.big-link { gap: .9rem; }
.big-link__strelica { transition: transform var(--fast); }
.big-link:hover .big-link__strelica { transform: translate(3px, -3px); }

/* --- Linkovi na karticama modela -----------------------------------------
   Ista kosa strelica kao "Kontaktirajte nas", lijevo od teksta. Tekst
   stoji na debeloj crti, a upit ima narancastu strelicu da se odvoji
   od specifikacija bez da postane gumb. */
.model-cell__links { gap: 1.75rem; }
.link-kart,
.link-kart:hover { gap: .45rem; }
.link-kart {
  padding-block: .2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.link-kart span {
  text-decoration: underline 2px var(--ink);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--fast), color var(--fast);
}
.link-kart__strelica { flex: 0 0 auto; transition: transform var(--fast); }
.link-kart--upit .link-kart__strelica { color: var(--orange); }
.link-kart:hover span { color: var(--orange); text-decoration-color: var(--orange); }
.link-kart:hover .link-kart__strelica,
.model-cell:hover .link-kart .link-kart__strelica { transform: translate(2px, -2px); }

/* --- Kvacice u popisima ----------------------------------------------------
   Isti oblik kao prije (crta lijevo i dolje, zakrenuta), samo veca i deblja.
   Vrijedi za "Sukladnost i jamstvo" i popise na stranici Kupnja. */
.sukladnost__popis li,
.kp-lista li { padding-left: 2.15rem; }
.sukladnost__popis li::before,
.kp-lista li::before {
  left: .1rem;
  top: 50%;
  width: 1.05rem;
  height: .55rem;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  transform: translateY(-70%) rotate(-45deg);
}

/* Poveznice u odgovorima (WhatsApp, upit) moraju se vidjeti kao poveznice. */
.faq__a a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline 2px var(--orange);
  text-underline-offset: 4px;
}
.faq__a a:hover { color: var(--orange); }

/* --- Stranica modela: tri glavna podatka ------------------------------------
   Tri zasebne plocice umjesto sive trake. Ikona govori sto je broj prije
   nego se procita natpis, a natpis je tamniji jer se sivi slabo vidio. */
.product__info .spec-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  border: 0;
  background: none;
}
.product__info .spec,
.product__info .spec + .spec {
  min-width: 0;
  padding: 1rem 1.1rem 1.05rem;
  border: 0;
  border-top: 3px solid var(--ink);
  background: var(--grey-05);
  transition: border-color var(--fast);
}
.product__info .spec:hover { border-top-color: var(--orange); }
.spec__ikona { display: block; margin-bottom: .7rem; color: var(--orange); }
.product__info .spec b {
  font-size: clamp(1.25rem, 1rem + .9vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.product__info .spec span {
  margin-top: .35rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--grey-70);
}
@media (max-width: 420px) {
  .product__info .spec,
  .product__info .spec + .spec { padding: .85rem .75rem .9rem; }
  .product__info .spec span { font-size: .6875rem; letter-spacing: .02em; }
}

/* --- Stranica modela: gumb za upit -----------------------------------------
   Glavna radnja na stranici, pa preko cijele sirine stupca i visi. */
.product__info .btn--upit {
  width: 100%;
  min-height: 4rem;
  justify-content: space-between;
  padding-inline: 1.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0;
}
.product__info .btn--upit .btn__strelica { transition: transform var(--fast); }
.product__info .btn--upit:hover .btn__strelica { transform: translateX(4px); }

/* Na sivoj sekciji kartice su bijele, inace se stope s pozadinom. */
.section--grey .on-kartice li { background: var(--paper); }

/* --- Stranica modela: hero ----------------------------------------------------
   Isti jezik kao O nama i Kupnja (sumska staza, velik naslov velikim slovima)
   umjesto stare teksture traga gume. Nizi, da proizvod ostane blizu vrha. */
.on-hero--model { padding-block: calc(var(--header-h) + 2.25rem) 3rem; }
.on-hero--model .on-hero__lead { color: #dcdcdc; }
.on-hero--model .on-label { margin-bottom: .75rem; }
.on-hero--model h1 { font-size: clamp(2.75rem, 1.4rem + 5vw, 5.25rem); max-width: none; }
.on-hero--model .on-hero__lead { max-width: 46ch; }
@media (min-width: 1000px) {
  .on-hero--model { padding-block: 7rem 3.25rem; }
  .on-hero--model .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .on-hero--model .crumbs { grid-column: 1 / -1; }
  .on-hero--model .on-label { grid-column: 1; }
  .on-hero--model h1 { grid-column: 1; }
  .on-hero--model .on-hero__lead { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; justify-self: end; }
}

/* --- Hero fotografije (Unsplash) ---------------------------------------------
   Svaka stranica ima svoju, da vrh ne izgleda isto posvuda. Marke drugih
   proizvodjaca se ne vide (silueta, prasina, protusvjetlo).
     Modeli (EM-5, PRO, Ultra)  koSt2v_CJb8  Peter Sebestyen
     Modeli (usporedba)         dAJnwiQLLYo  Leo_Visions
     Kupnja i jamstvo           KD1xBxf4IfE  Sean Benesh
     O nama                     su8NXiCasZg  Chris Rosiak */
.on-hero {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.2) 100%),
    url("../assets/hero-o-nama.webp");
  background-position: center 45%;
}
.kp-hero {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.25) 100%),
    url("../assets/hero-kupnja.webp");
  background-position: 70% 88%;
}
.on-hero--model {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%),
    url("../assets/hero-model.webp");
  background-position: 85% 42%;
}
.on-hero--modeli {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.35) 100%),
    url("../assets/hero-modeli.webp");
  background-position: center 100%;
}
.on-hero--modeli h1 { font-size: clamp(2.25rem, 1.1rem + 3.4vw, 3.75rem); max-width: 22ch; }

/* Na stranici modela silueta stoji desno, pa opis ide ispod naslova
   umjesto u desni stupac, gdje bi pao preko nje. */
@media (min-width: 1000px) {
  .on-hero--model:not(.on-hero--modeli) .shell { display: block; }
  .on-hero--model:not(.on-hero--modeli) .on-hero__lead { margin-top: 1rem; justify-self: auto; }
}

/* --- Stranica modela: hero "Studio" -----------------------------------------
   Tamna ploha kao na stranici Modeli, naziv lijevo, motor desno. Motori su
   na svijetloj kosoj plohi desno. Obris naziva (data-znak) je samo ukras. */
.mh {
  position: relative;
  padding-top: var(--header-h);
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(180deg, #0c0c0c 0%, #161616 100%);
}
.mh__in {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-block: 1.75rem 0;
}
.mh__tekst { display: grid; justify-items: start; align-content: center; }
.mh__natrag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
  padding: .45rem .8rem .45rem .65rem;
  border: 2px solid rgba(255,255,255,.85);
  font-size: .875rem;
  font-weight: 700;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.mh__natrag svg { transition: transform var(--fast); }
.mh__natrag:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.mh__natrag:hover svg { transform: translateX(-3px); }
.mh .on-label { margin-bottom: .6rem; }
.mh h1 {
  font-size: clamp(3.25rem, 1.6rem + 6.5vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .88;
  text-transform: uppercase;
}
.mh h1 span { color: var(--orange); }
.mh__lead {
  margin-top: 1.25rem;
  max-width: 44ch;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: #c8c8c8;
}

/* Motor stoji na svijetloj kosoj plohi koja ide do desnog ruba ekrana.
   Snimke su na bijeloj podlozi; multiply ih stapa sa sivom plohom, pa nema
   rezanja ni bijelih rubova. Motor mora ostati unutar plohe. */
.mh__slika {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem 0 0 8%;
}
.mh__slika::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  right: -50vw;
  background: #ededed;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
.mh__slika::before {
  content: attr(data-znak);
  position: absolute;
  right: -.5rem;
  top: 1.25rem;
  z-index: 1;
  white-space: nowrap;
  font-size: clamp(6rem, 2rem + 13vw, 15rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2.5px #b4b4b4;
  pointer-events: none;
}
.mh--dugo .mh__slika::before { font-size: clamp(4.5rem, 2rem + 9vw, 11rem); }
.mh__slika img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  max-width: 38rem;
  margin: 0 0 -.5rem auto;
  mix-blend-mode: multiply;
  filter: brightness(1.02);
}
@media (min-width: 900px) {
  .mh__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; padding-top: 0; }
  .mh__tekst { padding-block: 2rem 3.5rem; }
}

/* Proizvod odmah ispod heroja, bez velike bijele praznine. */
.mh + .section--product { padding-top: clamp(2rem, 4vw, 3.5rem); }
/* Na mobitelu galerija s istom slikom stoji odmah ispod, pa bi se motor
   ponovio dvaput zaredom. Hero tamo ostaje samo s tekstom. */
@media (max-width: 899px) {
  .mh__slika { display: none; }
  .mh__in { padding-bottom: 2.25rem; }
}

/* --- Tablice specifikacija (stranica modela i usporedba) --------------------
   Umjesto sivih sitnih natpisa i tankih crta: debela crna crta gore, redovi
   na izmjenicnoj sivoj podlozi, natpis tamnosiv i citljiv, vrijednost crna. */
.spec-table,
.compare { border-top: 3px solid var(--ink); }
.spec-table tbody tr:nth-child(odd),
.compare tbody tr:nth-child(odd) { background: var(--grey-05); }
.spec-table th,
.spec-table td,
.compare tbody th,
.compare tbody td {
  padding: .95rem 1.1rem;
  border-bottom: 0;
  vertical-align: middle;
}
.spec-table th,
.compare tbody th {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--grey-70);
}
.spec-table td,
.compare tbody td {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td,
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

/* Usporedba: nazivi modela u zaglavlju s narancastom crtom */
.compare { border-top: 0; }
.compare thead th {
  padding: 0 1.1rem .9rem;
  font-size: var(--t-h3);
  font-weight: 800;
  border-bottom: 3px solid var(--ink);
}
.compare thead th:not(:first-child) { box-shadow: inset 0 -3px 0 var(--orange); }

/* Napomena ispod tablice */
.spec-table + .notice,
.spec-table ~ .note,
.compare-scroll ~ .note { color: var(--grey-70); }

/* Naslov tablice iste velicine kao "Za koga je" do nje. */
#spec-naslov { font-size: var(--t-h2); }

/* --- Stranica modela: raspored ----------------------------------------------
   "Za koga je" je u lijevom stupcu ispod galerije, da ispod slike ne ostane
   prazno dok desni stupac s cijenom ide dolje. Specifikacije su preko cijele
   sirine, redovi u dva stupca, napomene jedna do druge. */
.product__zakoga { margin-top: clamp(2rem, 4vw, 3rem); }
.product__zakoga h2 { margin-top: 0; }

@media (min-width: 900px) {
  .spec-table--dvije,
  .spec-table--dvije tbody { display: block; }
  .spec-table--dvije tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, auto);
    grid-auto-flow: column;       /* lijevi stupac odozgo, pa desni */
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .spec-table--dvije tr { display: grid; grid-template-columns: 48% 1fr; align-items: center; }
  .spec-table--dvije th { width: auto; }
  .spec-table--dvije tbody tr:last-child th,
  .spec-table--dvije tbody tr:last-child td { border-bottom: 0; }
}

.spec-napomene { display: grid; gap: 1rem; margin-top: 1.75rem; }
.spec-napomene .notice { margin-top: 0; }
.spec-napomene .note { max-width: none; color: var(--grey-70); align-self: center; }
@media (min-width: 900px) {
  .spec-napomene { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; }
}
/* Na mobitelu i tabletu "Za koga je" ide ispod cijene i gumba za upit,
   da ne gura upit prema dolje. */
@media (max-width: 999px) {
  .product__media { display: contents; }
  .product__media > .viewer { order: 0; }
  .product__info { order: 1; }
  .product__zakoga { order: 2; margin-top: 0; }
}

/* --- Obrazac: tanji okviri ---------------------------------------------------
   Debeli crni okviri od 2 px bili su preteski. Sad 1 px sive crte, tamnija na
   hover, a na fokusu narancasti okvir koji se crta sjenom (bez skakanja).
   Polje s +385 imalo je dvostruki okvir: unutarnje polje sad nema svoj. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.tel-polje {
  border: 1px solid #c4c4c4;
  box-shadow: none;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field input:not([type="checkbox"]):not([type="radio"]):hover,
.field select:hover,
.field textarea:hover,
.tel-polje:hover { border-color: var(--grey-45); }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus,
.tel-polje:focus-within {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
  outline: none;
}
.field .tel-polje input:not([type="checkbox"]):not([type="radio"]),
.field .tel-polje input:not([type="checkbox"]):not([type="radio"]):focus,
.field .tel-polje input:not([type="checkbox"]):not([type="radio"]):hover {
  border: 0;
  box-shadow: none;
}
.tel-polje__pozivni { border-right: 1px solid #c4c4c4; }
.tel-polje:focus-within .tel-polje__pozivni { border-right-color: var(--orange); }
.field [aria-invalid="true"]:not(.tel-polje input),
.tel-polje:has(input[aria-invalid="true"]) { border-color: #c62828; }

/* --- Kupnja: cetiri koraka ---------------------------------------------------
   Kartice u nizu, svaka s brojem u kosom narancastom kvadratu i ikonom.
   Na desktopu ih spaja strelica izmedju kartica. */
.kp-koraci-sekcija { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.kp-k { display: grid; gap: 1rem; counter-reset: none; }
.kp-k li {
  position: relative;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--grey-05);
  border-top: 3px solid var(--ink);
  transition: border-color var(--fast), transform var(--fast);
}
.kp-k li:hover { border-top-color: var(--orange); transform: translateY(-3px); }
.kp-k__glava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.kp-k__br {
  display: inline-grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  background: var(--orange);
  color: var(--paper);
  font-size: 1.25rem;
  font-weight: 800;
  transform: skewX(-8deg);
}
.kp-k__ikona { color: var(--ink); }
.kp-k h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .5rem; }
.kp-k p { color: var(--grey-70); line-height: 1.6; }
.kp-k__opcija {
  display: inline-block;
  margin-left: .35rem;
  padding: .15rem .45rem;
  vertical-align: middle;
  border: 1px solid var(--grey-45);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-70);
}
.kp-k__dno { margin-top: 2rem; }
.kp-k__dno .btn { width: auto; }

@media (min-width: 640px) { .kp-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .kp-k { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
  /* strelica prema sljedecem koraku */
  .kp-k li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.6rem;
    right: -1.35rem;
    width: .9rem; height: .9rem;
    border-top: 3px solid var(--orange);
    border-right: 3px solid var(--orange);
    transform: rotate(45deg);
  }
}

/* --- Dostava uskoro ----------------------------------------------------------
   Kosa oznaka kao kod akcije: blijedo narancasta podloga, crta lijevo.
   Namjerno mala, da ne izgleda kao da dostava vec postoji. */
.dostava-uskoro,
.kp-cinjenice .kp-cinjenice__uskoro {
  display: inline-block;
  margin-top: .85rem;
  padding: .28rem .6rem .24rem;
  background: var(--orange-dim);
  box-shadow: inset 3px 0 0 var(--orange);
  color: var(--orange-hover);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
.kp-cinjenice .kp-cinjenice__uskoro {
  margin-top: .4rem;
  background: rgba(255, 91, 0, .18);
  color: #ff8a4a;
  font-size: .6875rem;
}
/* U kartici koraka tekst je dulji, pa bez velikih slova stane u jedan red. */
.kp-k .dostava-uskoro { text-transform: none; letter-spacing: 0; font-size: .8125rem; }

/* --- Kupnja: jamstvo i servis u jednom bloku ---------------------------------
   Tablica s objasnjenjem ispod svake stavke (bez strucnih rijeci), zatim tri
   koraka kad se nesto pokvari i dvije kratke napomene. */
.kp-jam li b { display: block; font-size: 1.0625rem; }
.kp-jam li b i {
  display: block;
  margin-top: .15rem;
  font-style: normal;
  font-size: .875rem;
  font-weight: 500;
  color: var(--grey-70);
}
.kp-jam--da li b i { color: #b8b8b8; }
.kp-jam li { align-items: center; padding: .8rem 0; }
.kp-jam--da li span { font-size: 1.0625rem; white-space: nowrap; }

.kp-kvar { margin-top: clamp(2rem, 4vw, 3rem); }
.kp-kvar > h3 { font-size: var(--t-h3); font-weight: 800; margin-bottom: 1rem; }
.kp-kvar__koraci { display: grid; gap: .75rem; counter-reset: kvar; }
.kp-kvar__koraci li {
  counter-increment: kvar;
  position: relative;
  padding: 1.25rem 1.25rem 1.35rem 3.75rem;
  background: var(--grey-05);
  border-top: 3px solid var(--ink);
}
.kp-kvar__koraci li::before {
  content: counter(kvar);
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  background: var(--orange);
  color: var(--paper);
  font-weight: 800;
  transform: skewX(-8deg);
}
.kp-kvar__koraci b { display: block; font-size: 1.125rem; font-weight: 800; margin-bottom: .3rem; }
.kp-kvar__koraci p { color: var(--grey-70); line-height: 1.55; }
.kp-kvar__cijena { display: block; font-weight: 600; color: var(--grey-70); }
.kp-kvar__cijena--da { color: var(--ink); font-weight: 800; margin-bottom: .2rem; }
@media (min-width: 900px) { .kp-kvar__koraci { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }

.kp-dodatno { display: grid; gap: 1rem; margin-top: 1rem; }
.kp-dodatno > div { padding: 1.25rem 1.4rem; border: 1px solid var(--rule); border-left: 4px solid var(--orange); }
.kp-dodatno h3 { font-size: 1.125rem; font-weight: 800; margin-bottom: .3rem; }
.kp-dodatno p { color: var(--grey-70); line-height: 1.55; }
@media (min-width: 760px) { .kp-dodatno { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Podnozje: stupac Preuzimanje -------------------------------------------
   Kratki parovi naziv / vrijednost umjesto recenice, i jedan jasan poziv. */
.footer__podaci { display: grid; gap: .45rem; margin: 0; }
.footer__podaci div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; font-size: .9375rem; }
.footer__podaci dt { color: #9b9b9b; }
.footer__podaci dd { margin: 0; color: #fff; font-weight: 600; }
.footer__col a.footer__termin {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: underline 2px var(--orange);
  text-underline-offset: 5px;
}
.footer__col a.footer__termin::after { content: "→"; display: inline-block; color: var(--orange); transition: transform var(--fast); }
.footer__col a.footer__termin:hover { color: var(--orange); }
.footer__col a.footer__termin:hover::after { transform: translateX(3px); }

/* --- Kupnja: hero ------------------------------------------------------------
   Pitanja su naslov: veliko pitanje lijevo, odgovor u jednoj recenici desno,
   kljucna rijec narancasta. */
.kh {
  background: var(--ink);
  color: var(--paper);
  padding-top: var(--header-h);
}
.kh .shell { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.75rem); }
.kh__naslov {
  margin-bottom: 1.25rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #9b9b9b;
}
.kh__pitanja { margin: 0; border-top: 1px solid rgba(255,255,255,.15); }
.kh__red {
  display: grid;
  gap: .4rem 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.kh__red dt {
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}
.kh__red dd { margin: 0; font-size: 1.125rem; line-height: 1.5; color: #d6d6d6; }
.kh__red dd b { color: var(--orange); font-weight: 800; }
@media (min-width: 900px) {
  .kh__red { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; }
}
.kh__dno { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.75rem; color: #bdbdbd; }
.kh__dno .btn { width: auto; }

/* --- Podnozje: stupac Preuzimanje -------------------------------------------
   Kratki parovi naziv / vrijednost umjesto recenice, i jedan jasan poziv. */
.footer__podaci { display: grid; gap: .45rem; margin: 0; }
.footer__podaci div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; font-size: .9375rem; }
.footer__podaci dt { color: #9b9b9b; }
.footer__podaci dd { margin: 0; color: #fff; font-weight: 600; }
.footer__col a.footer__termin {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: underline 2px var(--orange);
  text-underline-offset: 5px;
}
.footer__col a.footer__termin::after { content: "→"; display: inline-block; color: var(--orange); transition: transform var(--fast); }
.footer__col a.footer__termin:hover { color: var(--orange); }
.footer__col a.footer__termin:hover::after { transform: translateX(3px); }

/* --- Kupnja: hero ------------------------------------------------------------
   Tamna ploha kao na stranicama modela; umjesto motora na svijetloj kosoj
   plohi stoje kljucne cinjenice. Velika brojka gore, tri manje u redu. */
.kh .mh__tekst { padding-block: 2rem 3rem; }
.kh__ploha {
  position: relative;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 1.75rem;
  padding: 2.25rem 0 2.5rem 14%;
  color: var(--ink);
}
.kh__ploha::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  right: -50vw;
  background: #ededed;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
.kh__ploha > * { position: relative; z-index: 1; }
.kh__glavno { display: flex; align-items: flex-end; gap: 1.1rem; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 3px solid var(--ink); }
.kh__glavno b {
  font-size: clamp(4rem, 2rem + 6vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .82;
  color: var(--orange);
}
.kh__glavno span { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; padding-bottom: .35rem; }
.kh__brojke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kh__brojke li + li { padding-left: 1rem; border-left: 1px solid #c9c9c9; }
.kh__brojke b { display: block; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; }
.kh__brojke span { display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 600; color: var(--grey-70); }

@media (max-width: 899px) {
  .kh .mh__tekst { padding-bottom: 1.5rem; }
  .kh__ploha { padding: 1.75rem 0 2rem; }
  .kh__ploha::before { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); clip-path: none; }
}
@media (max-width: 480px) {
  .kh__brojke { grid-template-columns: 1fr; gap: .6rem; }
  .kh__brojke li + li { padding-left: 0; border-left: 0; padding-top: .6rem; border-top: 1px solid #c9c9c9; }
}

/* Kratko objasnjenje ispod strucnog naziva u tablicama specifikacija. */
.spec-table th small,
.compare tbody th small {
  display: block;
  margin-top: .1rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--grey-45);
  line-height: 1.35;
}

/* Poveznice u uvodu pitanja na pocetnoj (upit, WhatsApp). */
.faq-uvod .lead a { font-weight: 700; color: var(--ink); text-decoration: underline 2px var(--orange); text-underline-offset: 4px; }
.faq-uvod .lead a:hover { color: var(--orange); }

/* Ultra ima najvecu ustedu, pa je ta oznaka puna narancasta umjesto blijede.
   Bez dodatnog teksta, samo jaci naglasak na brojci. */
.kart-akcija--jako {
  background: var(--orange);
  box-shadow: none;
  color: var(--paper);
}

/* --- Kupnja i jamstvo prije upita --------------------------------------------
   Vecina upita i poruka ima odgovor na Kupnji. Na Kontaktu je okvir prije
   obrasca, a u zavrsnom bloku ostalih stranica poveznica ispod gumba. */
.prije-upita {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--orange-dim);
  border-left: 4px solid var(--orange);
  transition: background var(--fast);
}
.prije-upita:hover { background: rgba(255, 91, 0, .2); }
.prije-upita__tekst { display: grid; gap: .25rem; }
.prije-upita b { font-size: 1.0625rem; font-weight: 800; color: var(--ink); }
.prije-upita__tekst > span { font-size: .9375rem; line-height: 1.5; color: var(--grey-70); }
.prije-upita__strelica { margin-left: auto; font-size: 1.5rem; font-weight: 700; color: var(--orange); transition: transform var(--fast); }
.prije-upita:hover .prije-upita__strelica { transform: translateX(4px); }
.bok__tekst a { font-weight: 700; text-decoration: underline 2px var(--orange); text-underline-offset: 3px; }

.on-cta__prije {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: underline 2px var(--orange);
  text-underline-offset: 5px;
}
.on-cta__prije span { display: inline-block; color: var(--orange); transition: transform var(--fast); }
.on-cta__prije:hover { color: var(--orange); }
.on-cta__prije:hover span { transform: translateX(3px); }
@media (min-width: 900px) { .on-cta__prije { justify-self: end; margin-top: -1rem; } }

/* Rasprodana boja na karticama modela: posivljena i prekrizena. */
.kart-boja.je-rasprodano { opacity: .5; }
.kart-boja.je-rasprodano::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 2.4rem; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%) rotate(-45deg);
}