/* Cahayabox Gear: dizajn po Claude Designu (#114, docs/dizajn-2026-10-02/),
   pravila Crew P1 do P21 i Gear P1 do P5, svijetla i tamna tema kao Crew.
   Slova: Playfair Display za naslove, Manrope za sve ostalo, Marcellus samo
   u logotipu (P3). Narančasta #f83600 je podloga glavne radnje s tamnim
   tekstom (#111, 4,96:1 na toploj bijeloj), obrub fokusa i znak; nikad boja
   sitnog teksta (P8). Jedna glavna radnja po zaslonu (P11).
   Mreža (P1): sadržaj najviše 1280 px, bočni razmak 20 / 40 / 80 px.
   Razmaci (P2) iz ljestvice 4-8-12-16-24-32-48-64-96, odjeljci 64 / 96 px.
   Točke loma 390 / 768 / 1200 / 1440 (P17); izbornik se sabire ispod 900 px
   (pet grupa, dvije poveznice i tražilica ne stanu u jedan red). */

/* ---------- tokeni ----------
   Svijetla tema je zadana; tamna (P19) dolazi samo iz izbora u prekidaču
   (data-theme na <html>, js/tema.js). Postavka sustava se ne prati (kao Crew).
   Kontrast prema #f7f4ef (P7): #111 17,2:1, tijelo #3a3733 10,8:1, sporedni
   #6b665f 5,2:1; prema #121110 (P19): #f2efe9 16,4:1, sporedni #a39d94 7,0:1.
   Stara imena (--ink, --paper, --mute) ostaju kao drugo ime za iste boje, da
   pravila stranica koje dizajn ne mijenja rade u obje teme. */
/* Zamjenski fontovi s mjerama Manropea i Playfaira (#153, red 6): dok Google Fonts stižu, tekst se crta u Arialu/Timesu
   razvučenom na iste širine i visine redaka, pa zamjena fonta ne prelama tekst i ne pomiče stranicu (CLS 0,09 do 0,28
   mjereno na mobitelu 7. 10.: naslovnica, proizvod i popis, izvor je bio prelamanje teksta pri zamjeni fonta).
   Mjere: prosječna širina slova po učestalosti u hrvatskom/engleskom tekstu i hhea metrike fontova (fontTools). */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); size-adjust: 104.8%; ascent-override: 101.7%; descent-override: 28.6%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Display Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Tinos"); size-adjust: 112.8%; ascent-override: 95.9%; descent-override: 22.2%; line-gap-override: 0%; }

:root {
  --bg: #f7f4ef;
  --card: #ffffff;
  --fg: #111111;
  --body: #3a3733;
  --mut: #6b665f;
  --line: rgba(17, 17, 17, 0.10);
  --line2: rgba(17, 17, 17, 0.18);
  --field: rgba(17, 17, 17, 0.45);
  --warm: #efebe4;
  /* zlatna je samo crta i znak (aktivna grupa, podnožje), ne tekst: #8a7443 na #f7f4ef je 4,0:1 */
  --gold: #8a7443;
  --orange: #f83600;
  /* 21.6 fokus zove istu boju `--hot`: obrub od 2 px, nikad `outline: none`.
     Ista vrijednost kao `--orange`: dva imena, jedna boja, da se obrub fokusa
     ne mijenja kad se nekad promijeni boja glavne radnje. */
  --hot: #f83600;
  --red: #8c2016;
  --red-bg: #fbf1ee;
  --green: #2f7a3f;
  --green-bg: #eaf4ec;
  --bolje: #276b35; /* bolja vrijednost na usporedbi (#158): 5,45:1 prema --warm, 5,91:1 prema --bg */
  --photo: #ffffff;
  --shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06);
  --ink: var(--fg);
  --paper: var(--card);
  --mute: var(--mut);
  --sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
  --logo: "Marcellus", Georgia, serif;
  --r: 4px;
  --pad: 20px;
  --gap: 64px;
  --h1: 40px;
  --h2: 30px;
  --h3: 20px;
  --tijelo: 16px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #121110;
  --card: #1c1a18;
  --fg: #f2efe9;
  --body: #f2efe9;
  --mut: #a39d94;
  --line: rgba(242, 239, 233, 0.14);
  --line2: rgba(242, 239, 233, 0.24);
  --field: rgba(242, 239, 233, 0.45);
  --warm: #1c1a18;
  --gold: #c9a96a;
  --red: #ff8a66;
  --red-bg: #2a1712;
  --green: #6fcf85;
  --green-bg: #16271a;
  --bolje: #6fcf85; /* 9,04:1 prema --warm, 9,83:1 prema --bg */
  --shadow: 0 0 0 1px rgba(242, 239, 233, 0.14);
  color-scheme: dark;
}
@media (min-width: 768px) {
  :root { --pad: 40px; --gap: 96px; --h1: 80px; --h2: 48px; --h3: 24px; --tijelo: 17px; }
}
@media (min-width: 1200px) {
  :root { --pad: 80px; }
}

/* ---------- osnova ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  font: 400 var(--tijelo)/1.6 var(--sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg); text-decoration-color: var(--line2); text-underline-offset: 3px; }
a:hover { color: var(--fg); text-decoration-color: currentColor; }
.filters a:hover, .site-foot a:hover, .empty a:hover, .list-foot a:hover { color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
/* Polja unosa: umjesto punog okvira tanka narančasta crta s dna, 2 px u
   `--hot` (odluka 24. 9. 2026., P1). Zamjenjuje odluku od 04.09.2026. po kojoj
   polje na fokusu nije imalo nikakav znak — traka filtera je tipkovnicom bila
   slijepa i sajt je padao na WCAG 2.1 2.4.7 Focus Visible (AA), istu razinu
   koju 21.6 postavlja kao cilj.
   Crta je `box-shadow`, ne `border`: obrub bi polje pri fokusu podigao za 2 px
   i raspored trake bi poskočio. Mišem se ne crta ništa (`:focus` ostaje čist),
   tipkovnicom se crta (`:focus-visible`).
   Gumbi i poveznice zadržavaju outline iznad. */
input:focus,
textarea:focus,
select:focus { outline: none; box-shadow: none; }
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--hot); }
::placeholder { color: var(--mut); opacity: 1; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0 0 .4em; font-family: var(--serif); font-weight: 400; color: var(--fg); text-wrap: balance; }
h1 { font-size: 30px; line-height: 1.05; }
h2 { font-size: var(--h2); line-height: 1.15; }
h3 { font-size: var(--h3); line-height: 1.3; }
@media (min-width: 768px) { h1 { font-size: 48px; } }
.h-serif { font-family: var(--serif); font-weight: 400; }
p { margin: 0 0 .9em; }
.lead { font-size: var(--tijelo); line-height: 1.6; max-width: 65ch; color: var(--body); }
.muted { color: var(--mut); }
.small { font-size: 14px; line-height: 1.5; }
.label { font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
.warn { color: var(--red); background: var(--red-bg); border-left: 3px solid var(--red); padding: 8px 12px; border-radius: var(--r); }
.wrap { width: 100%; max-width: calc(1280px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--orange); color: #111; padding: 8px 16px; z-index: 100; }
.skip:focus { left: 16px; }
.row-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.n { color: var(--mut); font-size: .85em; margin-left: .25em; font-variant-numeric: tabular-nums; }
.hp { position: absolute; left: -9999px; }

/* ---------- gumbi (P12) ----------
   Rečenična slova, 48 px, zaobljenje 4 px. Glavna radnja je narančasta s
   tekstom #111; mišem preko nje klizi bijela zavjesa (dogovor 25. 9., isti
   prijelaz kao Crew). Sve ostale radnje su obrubljene (P11). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: var(--r);
  font: 600 15px/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  color: #111 !important; border: 1px solid var(--orange);
  background-color: var(--orange); background-image: linear-gradient(90deg, var(--orange) 50%, #ffffff 50%);
  background-size: 202% 100%; background-position: 0 0;
  transition: background-position .45s cubic-bezier(.2, .8, .2, 1), border-color .2s;
}
.btn:hover { background-position: 100% 0; color: #111 !important; }
.btn svg { flex: 0 0 auto; }
.btn-outline { color: var(--fg) !important; border-color: var(--fg); background: transparent; }
.btn-outline:hover { color: var(--fg) !important; border-color: var(--orange); background: var(--card); }
.btn-small { height: 40px; padding: 0 16px; font-size: 14px; }
.btn.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { text-decoration-color: currentColor; }
.danger { color: var(--red) !important; }
.chip {
  display: inline-flex; align-items: center; gap: .3em; min-height: 36px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font: 500 14px/1.4 var(--sans); color: var(--fg); text-decoration: none;
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip-alt { background: var(--warm); }
/* Čip vrste na stranici grupe kao prekidač (Odluke.md 3. 10., kao Crew): uključen ima
   kvačicu i jači obrub; zadnji uključeni nije poveznica pa ne reagira na hover. */
.chip.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 .5px var(--fg); }
.chip svg { flex: 0 0 auto; margin-left: -4px; }
.chip[aria-disabled="true"]:hover { color: var(--fg); }
.badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 12px; text-align: center; line-height: 1.5em; }

/* ---------- zaglavlje (dizajn, kao Crew) ---------- */
.site-head { position: relative; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 400 1.15rem var(--logo); white-space: nowrap; }
.brand svg { flex: 0 0 auto; }
.brand:hover { color: var(--fg); }
.head-sp { flex: 1; }
.head-nav { display: flex; gap: 32px; font: 500 15px/1.5 var(--sans); }
.head-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--body); text-decoration: none; }
.head-nav a:hover, .head-login:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--fg); }
.head-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--fg); cursor: pointer;
}
.head-ico:hover { background: var(--card); }
.head-ico[hidden] { display: none; }
.zvono { position: relative; color: var(--fg); }
.zvono-n { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #111; font: 600 11px/18px var(--sans); text-align: center; }
.prekidaci { list-style: none; padding: 0; }
.prekidaci label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.prekidaci input { width: 18px; height: 18px; accent-color: var(--gold); }
.head-login { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px var(--sans); color: var(--fg); text-decoration: none; white-space: nowrap; }
.head-login.is-active { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-muted { color: var(--mut) !important; }
.tema-sunce { display: none; }
.tema-mjesec { display: flex; }
html[data-theme="dark"] .tema-sunce { display: flex; }
html[data-theme="dark"] .tema-mjesec { display: none; }
.menu-btn { border: 1px solid var(--line); }

/* Torba posvuda u zaglavlju (#135, zaslon A; iza zastavice Torba:Zaglavlje): čip s brojem komada,
   plutajući popis; gost i prazna torba imaju isprekidan obrub. Zaglavlje je pretrpano, pa je čip samo
   ikona s brojem (naziv čita čitač zaslona); naziv se pokaže od 1200 px, a i sažetak od 1440 px.
   Na uskom ekranu se popis razvuče preko cijelog retka zaglavlja. */
.torba { position: relative; flex: 0 0 auto; }
.torba summary { list-style: none; }
.torba summary::-webkit-details-marker { display: none; }
.torba-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg); color: var(--fg); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; }
.torba-chip:hover, .torba[open] .torba-chip { background: var(--card); }
.torba-prazna .torba-chip { border-style: dashed; }
.torba-ic { display: grid; place-items: center; flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 700 13px var(--sans); font-variant-numeric: tabular-nums; }
.torba-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.torba-t small { color: var(--mut); font-size: 13px; }
.torba-t small:empty { display: none; }
@media (min-width: 1200px) {
  .torba-t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .torba-chip { padding-right: 14px; }
  .torba-t small { display: none; }
}
@media (min-width: 1440px) { .torba-t small { display: inline; } .torba-t small:empty { display: none; } }
.torba-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 360px; max-width: calc(100vw - 32px); padding: 16px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); font-size: 14px; }
.torba-pop p { margin: 0; }
.torba-h { color: var(--fg); }
.torba-p { margin-top: 6px !important; color: var(--mut); }
.torba-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.torba-list li { display: flex; justify-content: space-between; gap: 12px; }
.torba-list small { flex: 0 0 auto; color: var(--mut); }
.torba-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.torba-list + .torba-row { margin-top: 0; }
@media (max-width: 560px) {
  .head-row:has(> .torba) { position: relative; }
  .torba { position: static; }
  .torba-pop { left: 0; right: 0; top: 100%; width: auto; max-width: none; margin-top: 0; }
  /* Prijavljen ima i zvono: uz čip se zaglavlje ne bi stisnulo u 390 px, pa naziv i razmaci malo uži. */
  .head-row:has(> .torba) { gap: 4px; }
  .head-row:has(> .torba) .brand { gap: 8px; font-size: 1rem; }
}
@media (max-width: 380px) {
  .head-row:has(> .torba) { gap: 0; }
  .head-row:has(> .torba) .brand { gap: 6px; font-size: .9rem; }
}

/* drugi redak: Gearov izbornik i tražilica */
.head-bar { border-top: 1px solid var(--line); }
.bar-row { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; font: 500 15px/1.5 var(--sans); }
.site-nav > a, .dd summary {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--body); text-decoration: none;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.site-nav > a.is-active, .site-nav > a:hover, .dd summary.is-active, .dd summary:hover { border-bottom-color: var(--gold); color: var(--fg); }
/* Padajuće grupe (odluka 25. 9. 2026., #97). Na mobitelu se otvaraju jedna
   ispod druge unutar izbornika; od 900 px je popis plutajući panel. */
.dd { position: relative; }
.dd summary { list-style: none; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.dd[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.dd-list { list-style: none; margin: 0; padding: 4px 0 8px 16px; }
.site-nav .dd-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; font-weight: 400; color: var(--fg); text-decoration: none; }
.site-nav .dd-list a:hover { background: var(--warm); }
.dd-list .n { margin-left: 0; }
.site-nav .dd-all { font-weight: 600 !important; }
.dd-sep { border-top: 1px solid var(--line); margin: 4px 0; }
.dd-h { display: block; padding: 12px 0 4px; font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.dd-sub-list { list-style: none; margin: 0; padding: 0 0 0 12px; }
.nav-sep { display: inline-block; width: 1px; height: 1em; background: var(--line2); }
.nav-me { font-weight: 600; }

.search { position: relative; display: flex; align-items: center; flex: 0 1 360px; margin-left: auto; border-bottom: 1px solid var(--field); }
.search input { flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--fg); font: 400 16px var(--sans); padding: 0; }
.search input::-webkit-search-cancel-button { display: none; }
.search button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--fg); cursor: pointer; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); z-index: 40; max-height: 70vh; overflow: auto; min-width: 280px; }
.suggest[hidden] { display: none; }
.suggest .sg-h { padding: 8px 16px 4px; font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.suggest a { display: flex; justify-content: space-between; gap: 16px; padding: 8px 16px; min-height: 44px; align-items: center; text-decoration: none; color: var(--fg); font-size: 15px; }
.suggest a:hover, .suggest a.is-sel { background: var(--warm); }
.suggest .sg-all { border-top: 1px solid var(--line); font-weight: 600; }
/* Tražilica na mobitelu preko cijelog zaslona (21.6, #35); klasu stavlja gear.js */
.search .search-close, .hero-search .search-close { display: none; }
@media (max-width: 640px) {
  html.search-full { overflow: hidden; }
  /* heroj naslovnice (z-index 20) je ispod zaglavlja (30): dok je tražilica otvorena, heroj ide gore */
  html.search-full .home-hero { z-index: 40; }
  .search.is-full, .hero-search.is-full {
    position: fixed; inset: 0; z-index: 100; margin: 0; max-width: none; padding: 8px 60px 0 16px;
    display: flex; flex-flow: row wrap; align-content: flex-start; align-items: center; gap: 0 8px;
    background: var(--bg); border: 0; border-radius: 0; box-shadow: none; overflow-y: auto;
  }
  .search.is-full input, .hero-search.is-full .hero-field { flex: 1 1 0; }
  .hero-search.is-full .btn { display: none; }
  .search.is-full .search-close, .hero-search.is-full .search-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--fg); cursor: pointer; }
  .is-full .suggest { position: static; flex: 0 0 calc(100% + 76px); min-width: 0; max-height: none; margin: 8px -60px 0 -16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--bg); }
  .is-full .suggest a { min-height: 56px; padding: 12px 16px; font-size: 17px; }
}
/* Magazin na /pretraga (19.3, #35) */
.search-mag { margin-top: var(--gap); }
.search-mag h2 { margin: 0 0 8px; font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.search-mag ul { list-style: none; margin: 0; padding: 0; }
.search-mag li a { display: flex; align-items: center; min-height: 44px; }

@media (min-width: 900px) {
  .menu-btn, .head-mob { display: none !important; }
  .dd-list { position: absolute; top: 100%; left: -16px; z-index: 50; min-width: 280px; margin-top: 4px; padding: 8px 0;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); }
  .site-nav .dd-list a { padding: 8px 16px; }
  .dd-h { padding: 12px 16px 4px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .site-nav { gap: 4px 16px; }
  .search { flex-basis: 220px; }
}
@media (max-width: 899px) {
  .head-desk { display: none !important; }
  .head-row { gap: 8px; }
  .head-bar { border-top: 0; }
  .head-bar:not(:has(.search)):not(:has(.site-nav.is-open)) { display: none; }
  .bar-row { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding-bottom: 12px; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px; border-top: 1px solid var(--line); font-size: 17px; }
  .site-nav.is-open .nav-sep { width: 100%; height: 1px; margin: 8px 0; }
  .search { flex: 1 1 auto; margin: 0; order: -1; }
}

main { padding: 32px 0 0; min-height: 60vh; }
@media (min-width: 768px) { main { padding-top: 48px; } }

/* ---------- podnožje: tamno u obje teme (dizajn, kao Crew) ---------- */
.site-foot { margin-top: var(--gap); background: #121110; color: #a39d94; border-top: 1px solid rgba(242, 239, 233, .14); font: 400 14px/1.5 var(--sans); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 32px; }
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; color: #f2efe9; text-decoration: none; }
.site-foot a:hover { color: #f2efe9; text-decoration: underline; text-underline-offset: 3px; }
.foot-brand { font: 400 16px var(--logo); color: #f2efe9; }
/* „Gear" svijetao uz zlatnu crtu (Odluke.md 2. 10., mijenja P2 od 24. 9. za
   tamno podnožje): #f2efe9 na #121110 je 16,4:1, crta #c9a96a 8,6:1. Crta je
   na inline elementu, pa ne mijenja visinu retka. */
.foot-brand b { color: #f2efe9; font-weight: 400; border-bottom: 2px solid #c9a96a; padding-bottom: 2px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 0 24px; padding-top: 8px; }
.foot-legal { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding-top: 16px; padding-bottom: 32px; font-size: 13px; border-top: 1px solid rgba(242, 239, 233, .14); }

/* ---------- mrvice, naslov popisa ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--mut); margin-bottom: 16px; }
.crumbs a { color: var(--mut); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.list-head { margin-bottom: 32px; }
.list-head h1 { margin-bottom: 12px; }
.list-head .lead { margin-bottom: 0; }
.list-head > * + .row-links, .list-head .grupa-vrste { margin-top: 16px; }
.list-head .grupa-sazetak { margin: 12px 0 0; }

/* ---------- naslovnica (dizajn) ---------- */
/* Slika iza naslova i tražilice (Odluke.md 3. 10. 2026.), od ruba do ruba kao
   hero na Crew naslovnici: sekcija ostaje u .wrap (tekst poravnat sa sadržajem),
   pozadina se rasteže na 100vw, a body reže višak (overflow-x: clip ne stvara
   klizač pa ne smeta ljepljivim elementima). Isječci za 390/780 su kvadrat oko
   opreme, za 1440/2880 cijeli kadar (tools/hero.py).
   P10: zatamnjenje je jednoliko, crno 0,6, pa i najsvjetliji dio slike
   (bijeli teleobjektiv) ispod bijelog teksta daje najmanje 4,5:1; mjeri ga
   tests/site. Ista slika i zatamnjenje u svijetloj i tamnoj temi. */
body { overflow-x: clip; }
.home-hero { position: relative; z-index: 20; margin-top: -32px; padding: 48px 0; color: #fff; }
.home-hero-bg { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; background: #1a120b; z-index: -1; }
.home-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.home-hero-ov { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.home-hero h1 { font-size: var(--h1); line-height: 1.05; max-width: 13em; margin: 0; color: #fff; }
@media (min-width: 768px) { .home-hero { margin-top: -48px; padding: 96px 0; } }
.hero-search {
  position: relative; display: flex; gap: 16px; max-width: 760px; margin-top: 48px; padding: 8px 8px 8px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
}
.hero-field { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--fg); }
.hero-field:has(input:focus-visible) { box-shadow: inset 0 -2px 0 var(--hot); }
.hero-field svg { flex: 0 0 auto; }
.hero-field input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--fg); font: 400 17px/1.5 var(--sans); padding: 0; }
.hero-field input:focus-visible { box-shadow: none; }
.hero-field input::-webkit-search-cancel-button { display: none; }
.hero-search .btn { padding: 0 28px; }
@media (max-width: 767px) {
  .hero-search { flex-direction: column; gap: 8px; padding-left: 16px; }
}
.home-block { padding-top: var(--gap); }
.home-block > h2 { margin: 0; }
.home-sub { margin: 12px 0 0; color: var(--body); max-width: 65ch; }
.home-sub.muted { color: var(--mut); font-size: 14px; }
.home-more { margin: 24px 0 0; font-weight: 600; font-size: 15px; }
.home-block > ul { margin-top: 32px; }

/* Sva oprema: kartice grupa u redu na računalu, jedna ispod druge inače (dizajn) */
.grupe { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1200px) { .grupe { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.grupe a { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--fg); transition: border-color .2s; }
.grupe a:hover { border-color: var(--fg); }
.grupe h3 { margin: 0; }
.grupe-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.grupe-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 500 15px/1.4 var(--sans); }
.grupe-n { font: 400 14px/1.5 var(--sans); color: var(--mut); font-variant-numeric: tabular-nums; }

/* Sustavi: tri stupca na računalu, dva inače (dizajn) */
.sys-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (min-width: 1200px) { .sys-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sys-list a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--fg); transition: border-color .2s; }
.sys-list a:hover { border-color: var(--fg); }
.sys-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sys-top h3 { margin: 0; }
.sys-n { font: 600 17px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.sys-d { font: 400 14px/1.5 var(--sans); color: var(--mut); }
@media (max-width: 767px) { .sys-list a { padding: 16px; } }
/* Graf sustava po marki (#116): traka je ploha #111 na toplom polju, tekst postotka ostaje u #111 (AA) */
.marke-graf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.marke-graf li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 3.5rem; align-items: center; gap: 12px; }
.marke-ime { font: 600 15px/1.3 var(--sans); overflow-wrap: anywhere; }
.marke-traka { display: block; height: 12px; background: var(--warm); border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; }
.marke-traka > span { display: block; height: 100%; min-width: 2px; background: var(--fg); }
.marke-pct { font: 600 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 767px) { .marke-graf li { grid-template-columns: minmax(0, 1fr) 3.5rem; } .marke-traka { grid-column: 1 / -1; grid-row: 2; } }

/* Gotovi izbori jednim dodirom (žarišne, najtraženije) */
.pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pick-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 15px/1.4 var(--sans); color: var(--fg); text-decoration: none; }
.pick-list a:hover { border-color: var(--fg); }

/* Rasponi objektiva (dizajn): tri skupine i gumb u jednom redu na računalu */
.home-ranges { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; align-items: end; margin-top: 32px; }
@media (min-width: 1200px) { .home-ranges { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }
.home-ranges fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.home-ranges legend { padding: 0; margin-bottom: 4px; font: 500 14px/1.5 var(--sans); color: var(--mut); }
.range-row { display: flex; gap: 16px; }
.range-f { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--field); font: 400 14px/1.5 var(--sans); color: var(--mut); }
.range-f input { flex: 1; min-width: 0; height: 48px; border: 0; border-radius: 0; background: transparent; color: var(--fg); font: 400 16px var(--sans); padding: 0; -moz-appearance: textfield; }
.range-f input::-webkit-outer-spin-button, .range-f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.home-ranges .btn { justify-self: start; }

/* Pojeftinilo: četiri kartice, 4 / 2 / 1 stupac (dizajn) */
.drops { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .drops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .drops { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.drops a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--fg); transition: border-color .2s; }
.drops a:hover { border-color: var(--fg); }
/* S6 (#114): ploha slike je uvijek 16:9 (slika se smanji u nju, ne širi je),
   a kartica bez slike ima plohu iste veličine s vrstom proizvoda, pa su sve
   četiri kartice iste visine i naziv je svugdje ispod plohe. */
.drop-media { position: relative; display: block; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background: var(--photo); }
.drop-media img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); max-width: none; object-fit: contain; }
.drop-plate { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 16px; background: var(--warm); color: var(--mut); font: 400 15px/1.3 var(--serif); }
.drop-name { font: 400 20px/1.3 var(--serif); color: var(--fg); text-wrap: balance; }
.drop-media + .drop-name, .drop-plate + .drop-name { padding: 24px 24px 0; }
.drop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 24px 24px 0; margin-top: auto; font-variant-numeric: tabular-nums; }
.drop-price b { font: 600 20px/1.3 var(--sans); }
.drop-price s { font-size: 14px; color: var(--mut); }
.drop-pct { margin-left: auto; font: 600 14px/1.5 var(--sans); }
.drop-fresh { padding: 4px 24px 24px; font-size: 14px; color: var(--mut); }

/* Iz magazina: tri članka o opremi, 3 / 1 stupac (Odluke.md 3. 10.); kartica kao Pojeftinilo */
.home-clanci { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .home-clanci { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-clanci a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--fg); transition: border-color .2s; }
.home-clanci a:hover { border-color: var(--fg); }
.home-clanci img, .clanak-plate { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--warm); }
.clanak-title { padding: 24px 24px 0; font: 400 20px/1.3 var(--serif); color: var(--fg); text-wrap: balance; }
.clanak-date { padding: 8px 24px 24px; margin-top: auto; font-size: 14px; color: var(--mut); }

/* Odakle cijene: kartice trgovaca, tri stupca (dizajn „Trgovine") */
.ret-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ret-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ret-list li { display: flex; flex-direction: column; gap: 4px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.ret-list b { font-size: 20px; line-height: 1.3; font-weight: 400; }
.ret-list .muted { font-size: 14px; }
.ret-list + p { margin-top: 24px; max-width: 65ch; }
.is-stale { color: var(--red); }

/* ---------- ostale stranice: sustavi, marke, grupe ---------- */
.home-block > h2 + .row-links, .home-block > h2 + .grid, .home-block > h2 + .empty { margin-top: 24px; }
.sys-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sys-grid a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--fg); font-size: 15px; transition: border-color .2s; }
.sys-grid a:hover { border-color: var(--fg); }
.sys-grid b { font-size: var(--h3); line-height: 1.3; font-weight: 400; margin-bottom: 4px; }
.brand-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brand-cloud a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 15px/1.4 var(--sans); text-decoration: none; color: var(--fg); }
.brand-cloud a:hover { border-color: var(--fg); }
/* „Traži se" (#68): naziv, broj koji imamo, gumb na Club upload; na mobitelu gumb ide u novi red. */
.trazi-se { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.trazi-se li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.trazi-se .ts-name { flex: 1 1 260px; font: 500 16px/1.4 var(--sans); color: var(--fg); }
.trazi-se .ts-n { flex: 0 1 auto; color: var(--mut); font-size: 15px; }
.brand-head { margin-bottom: 24px; }
.grupa-vrste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.compat-list, .parts, .gen-list, .mag-list, .offer-list, .f-links { list-style: none; margin: 0; padding: 0; }

/* ---------- popis: filteri + mreža ---------- */
.list-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .list-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; } .filters { position: sticky; top: 24px; } }
.filters { background: var(--warm); border-radius: var(--r); padding: 16px 24px; position: relative; }
/* 21.5 na mobitelu: filteri iza gumba „Filtriraj", punoekranski panel.
   Vrijedi samo uz JS (`js-filters` na <html> postavlja tema.js u <head>); bez
   njega traka stoji gdje je i dosad, jer je obična GET forma. */
.filters-btn { width: 100%; margin-bottom: 16px; }
html:not(.js-filters) .filters-btn { display: none; }
.filters-btn .badge { margin-left: 8px; }
.filters-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--fg); cursor: pointer; }
@media (max-width: 899px) {
  .js-filters .filters { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; padding: 16px 20px 32px; overflow-y: auto; display: none; background: var(--bg); }
  .js-filters .filters.is-open { display: block; }
}
@media (min-width: 900px) { .filters-btn, .filters-close { display: none !important; } }
/* P1 (#114): u mobilnom panelu „Primijeni" i broj proizvoda stoje u traci na
   dnu koja ostaje na mjestu dok se panel pomiče. Bez JS-a i na širokom
   ekranu traka je obična, kao i dosad, a broja nema. */
.f-count { display: none; }
@media (max-width: 899px) {
  .js-filters .filters.is-open { padding-bottom: 0; }
  .js-filters .filters .f-actions { position: sticky; bottom: 0; z-index: 1; align-items: center; margin: 0 -20px; padding: 12px 20px 16px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); }
  .js-filters .filters .f-count { display: block; margin-left: auto; font-size: 15px; font-variant-numeric: tabular-nums; }
}
.f-group { border-bottom: 1px solid var(--line); padding: 8px 0; }
.f-group:last-of-type { border-bottom: 0; }
.f-group summary { cursor: pointer; font: 500 14px/1.5 var(--sans); color: var(--mut); padding: 4px 0; list-style: none; display: flex; justify-content: space-between; }
.f-group summary::-webkit-details-marker { display: none; }
.f-group summary::after { content: "+"; color: var(--mut); }
.f-group[open] summary::after { content: "−"; }
.f-links li a { display: flex; justify-content: space-between; padding: 4px 0; text-decoration: none; font-size: 15px; color: var(--fg); }
.f-links li a:hover { text-decoration: underline; }
/* Aktivan filter nosi tintu i debljinu, ne zlatnu (21.6: zlatna nije tekst
   na toploj plohi; boja i onako ne smije biti jedini nositelj značenja). */
.f-links li a.is-on { color: var(--ink); font-weight: 600; }
/* Trgovine (#126): kvačice, broj uz desni rub kao kod veza iznad. */
.f-trgovine .f-check { margin: 0; padding: 4px 0; }
.f-trgovine .f-check .n { margin-left: auto; }
/* Svojstva objektiva (#170): isti oblik kao trgovine; „Video" je podnaslov skupine. */
.f-svojstva .f-check .n { margin-left: auto; }
.f-svojstva .f-sub { margin: 12px 0 0; font-size: 13px; color: var(--mut); }
.search-trgovine { max-width: 360px; margin: 0 0 24px; }
.f-range { display: flex; gap: 16px; }
.f-range input, .f-inline input, .f-select, .f-inline select {
  width: 100%; height: 40px; font: 400 15px var(--sans); color: var(--fg); padding: 0;
  border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent;
}
.f-select option, .f-inline select option { background: var(--card); color: var(--fg); }
.f-inline { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 8px 0; }
.f-inline input { width: 6rem; }
.f-check { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 8px 0; }
.f-check input, .rate-opt input, .me-toggle input, .report-form input[type="radio"] { accent-color: var(--fg); }
.f-actions { display: flex; gap: 8px; padding-top: 16px; }
.list-count { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 15px; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.list-foot { margin-top: 32px; color: var(--mut); font-size: 15px; }
.list-foot a { color: var(--fg); }
.list-mag { margin-top: 48px; }

/* ---------- kartica proizvoda ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.list-main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .list-main .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); transition: border-color .2s; }
.card:hover { border-color: var(--fg); }
/* bijela ploha kao pozadina fotki proizvoda i u tamnoj temi, da manja slika ne „probija" (#96) */
.card-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: var(--photo); }
/* Manja slika se ne razvlači nego stoji u sredini okvira, veća se smanji da stane (#86). */
.card-media img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; object-fit: contain; }
.card-placeholder { display: flex; align-items: flex-end; height: 100%; width: 100%; padding: 16px; background: var(--warm); color: var(--mut); font: 400 15px/1.3 var(--serif); }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-kind { font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 0; }
.card-title { font: 600 15px/1.35 var(--sans); margin: 0; }
.card-title a { text-decoration: none; color: var(--fg); }
.card-title a:hover { text-decoration: underline; }
.card-sum { font-size: 13px; line-height: 1.5; color: var(--mut); margin: 0; font-variant-numeric: tabular-nums; }
.card-price { margin: auto 0 0; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14px; }
.card-price b { color: var(--fg); font: 600 17px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.card-drop { font-size: 14px; margin: 0; }
.card-rating { font-size: 14px; margin: 4px 0 0; }
.card-rating a { color: inherit; text-decoration: none; }
.card-rating a:hover b, .card-rating a:focus-visible b { text-decoration: underline; }
.card-drop b { color: var(--green); }
.card-compare { align-self: flex-start; font-size: 14px; min-height: 32px; }
.card-compare.is-on { color: var(--green); }

.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 32px 0; }
.pager a { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 1px solid var(--fg); border-radius: var(--r); text-decoration: none; font: 600 15px var(--sans); }
.pager a:hover { border-color: var(--orange); background: var(--card); }
.empty { padding: 32px 24px; text-align: center; background: var(--warm); border-radius: var(--r); }
.empty h1 { margin-bottom: 16px; }
.empty .row-links { justify-content: center; }
.empty-404 { margin-top: 32px; padding: 64px 24px; }
.empty-inline { color: var(--mut); }
.search-asked { margin-top: 12px; }

/* ---------- proizvod (4.1, dizajn) ---------- */
/* Jedna mreža (poravnanje 3. 10. 2026.): vrh i specifikacije s opisom dijele
   iste stupce 7/12 i 5/12 s razmakom 64 px, pa se rubovi poklapaju u svim
   odjeljcima. Lijevo slika i „Je li sad trenutak", desno naziv, ponude,
   gumbi i obavijest; desni stupac je ljepljiv do kraja vrha („Što na njega
   ide"). Kad je viši od prozora, gear.js mu spusti --p-vrh da mu se vidi dno.
   Desni stupac je prvi u HTML-u (H1 prvi naslov, #41b), pa su stupci
   postavljeni izričito. Do 1199 px jedan stupac: stupci se rastvaraju (display: contents) i
   dijelovi idu redom naziv, slika, ponude, gumbi, obavijest, trenutak. */
.p-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.p-left, .p-head { display: contents; }
.p-title { order: 1; }
.p-media { order: 2; min-width: 0; }
.offers { order: 3; }
.ident-actions { order: 4; }
.rate-form { order: 5; }
.p-alert { order: 6; }
.timing { order: 7; min-width: 0; }
.p-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1200px) {
  .p-top, .p-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  /* Opis je lijevi stupac (4. 10. 2026., #33), i kad bloka specifikacija nema. */
  .p-left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 64px; min-width: 0; }
  .p-head { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 32px; min-width: 0; position: sticky; top: var(--p-vrh, 24px); }
}
.p-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--photo); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.p-photo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.p-placeholder { aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 24px; background: var(--warm); border-radius: var(--r); }
@media (min-width: 768px) { .p-placeholder { padding: 48px; } }
.p-placeholder-name { font: 400 var(--h3)/1.3 var(--serif); color: var(--fg); max-width: 16em; text-wrap: balance; }
.p-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.p-keys span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 999px; font: 500 14px/1.5 var(--sans); color: var(--fg); }
.p-title h1 { margin: 0; }
.p-sum { margin: 12px 0 0; font: 500 var(--tijelo)/1.6 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
/* Ukinut i povučen (21.12, #50): oznaka uz naslov, traka iznad svega. */
.p-status { margin: 8px 0 0; font: 600 14px/1.5 var(--sans); color: var(--mut); }
.recall-bar { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 12px 16px; color: var(--red); background: var(--red-bg); border-left: 3px solid var(--red); border-radius: var(--r); font: 600 15px/1.5 var(--sans); }
.recall-bar p { margin: 0; }
.recall-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.offers { display: flex; flex-direction: column; gap: 16px; }
.offers h2, .p-more h2, .timing h2 { font-size: var(--h3); line-height: 1.3; margin: 0; }
.offers > p { margin: 0; }
.offer-list { display: flex; flex-direction: column; gap: 8px; }
.offer { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.offer.is-lowest { border: 1.5px solid var(--fg); }
@media (min-width: 768px) { .offer { padding: 24px; } }
.offer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.offer-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.offer-best { font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.offer-name { font: 600 17px/1.4 var(--sans); color: var(--fg); }
.offer-meta { display: flex; flex-wrap: wrap; gap: 0 4px; font: 400 14px/1.5 var(--sans); color: var(--mut); }
.offer-meta > span + span::before { content: "· "; color: var(--mut); font-weight: 400; }
.offer-avail { color: var(--mut); }
.av-na_stanju { color: var(--green); }
.offer-tag { color: var(--mut); }
.offer-akcija { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.offer-disclosure { font: 400 12px/1.4 var(--sans); color: var(--mut); }
/* #126: poveznica na stranicu trgovine, ispod podataka ponude. */
.offer-store { align-self: flex-start; font: 400 14px/1.5 var(--sans); color: var(--fg); }
/* 04.09.2026.: oznaka izvedbe (boja / komplet); bez nje pet ponuda tri boje
   izgleda kao pet puta isti redak. Prikazuje se samo kad varijanti ima više. */
.offer-variant { color: var(--fg); font-weight: 500; }
.offer-price { flex: 0 0 auto; text-align: right; }
.offer-price b { display: block; font: 600 20px/1.2 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-lowest .offer-price b { font-size: 24px; }
@media (min-width: 768px) { .is-lowest .offer-price b { font-size: 32px; } }
.offer-card { display: block; font-size: 14px; color: var(--mut); white-space: nowrap; }
.flagged { color: var(--red); }
.flagged.is-strong { font-weight: 600; }
.is-flagged .offer-price b { color: var(--mut); }
.offer-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
@media (max-width: 767px) { .offer-go > .btn { flex: 1 1 100%; } }
/* Upozorenje prije kupnje (#178): ista traka kao .warn, manja, iznad popisa ponuda i uz redak ponude. */
.offer-warn { margin: 8px 0; font: 500 14px/1.45 var(--sans); }
.report { font-size: 14px; }
.report summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--body); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.report summary::-webkit-details-marker { display: none; }
.report[open] { flex: 1 1 100%; }
.report-form { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; font-size: 15px; width: 100%; }
.report-form label { display: block; }
.report-price { padding-left: 24px; }
.report-variant { display: block; margin-bottom: 8px; }
.report-variant span { display: block; font-size: 14px; color: var(--mut); }
.report-variant select { min-height: 44px; font: 400 15px var(--sans); color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; }
.report-price span { display: block; font-size: 14px; color: var(--mut); }
.report-form input[type="text"], .report-form textarea { width: 100%; font: inherit; color: var(--fg); padding: 8px 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent; }
.report-form .btn { align-self: flex-start; }
/* 21.6 forme: skup grešaka je na vrhu forme (s poveznicom na polje), ista
   poruka stoji i uz polje. Oba spremnika su uvijek u HTML-u i prazna dok
   greške nema; prazan se ne crta, pa forma izgleda isto kao prije. */
.report-msg { margin: 0 0 8px; font-size: 14px; color: var(--green); }
.report-msg.is-err { color: var(--red); }
.report-msg:empty, .form-errors:empty, .field-err:empty { display: none; }
.form-errors { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--red); background: var(--red-bg); border-radius: var(--r); font-size: 14px; }
.form-errors a { color: var(--red); }
.field-err { margin: 0 0 8px; color: var(--red); font-size: 14px; }
[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 1px; }
/* Red gumba na punoj širini stupca, rub uz kartice ponuda, jedan red na
   svim širinama (odluka 3. 10.): „Dodaj u moju opremu" (ili „Ocijeni")
   zauzima ostatak reda, lista želja i usporedba su kvadrati s ikonom,
   široki koliko je red visok (48 px, ispod 900 px 44 px). */
.ident-actions { display: flex; gap: 8px; margin: 0; }
.ident-actions > .btn { flex: 1 1 0; min-width: 0; padding-inline: 16px; white-space: nowrap; }
.ident-actions > .btn-icon { flex: 0 0 48px; width: 48px; padding: 0; }
.btn-icon.is-on .i-heart, .btn-icon.is-on .i-compare rect { fill: currentColor; }
@media (max-width: 899px) { .ident-actions > .btn-icon { flex-basis: 44px; width: 44px; } }
.ident-note { margin: 8px 0 0; font-size: 15px; }

/* Razmak između odjeljaka je svugdje --gap; zadnji redak odjeljka ne
   dodaje svoj donji rub, inače bi razmaci bili nejednaki. */
.p-sec { padding-top: var(--gap); }
.p-left > :last-child > :last-child, .p-head > :last-child > :last-child, .p-sec > :last-child, .p-sec > * > :last-child, .p-text > * > :last-child { margin-bottom: 0; }
.timing p { max-width: 65ch; color: var(--body); }
.timing h2 { margin-bottom: 16px; }
.timing p.muted { color: var(--mut); }
.p-chart { position: relative; margin: 24px 0 0; padding: 32px 24px 40px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.p-chart svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: visible; }
@media (min-width: 768px) { .p-chart svg { aspect-ratio: 16 / 6; } }
.p-chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-chart-base { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-chart-line { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* P6: crta po trgovini. Puna tamna je trgovina s najnižom ponudom danas,
   ostale sive isprekidane; trgovina s jednim danom podataka je točka. */
.p-chart-line.is-other { stroke: var(--mut); stroke-dasharray: 6 6; }
.p-chart-dot { stroke: var(--fg); stroke-width: 8; stroke-linecap: round; }
.p-chart-dot.is-other { stroke: var(--mut); }
.p-chart-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 12px 0 0; padding: 0; font-size: 14px; color: var(--body); }
.p-chart-key li { display: inline-flex; align-items: center; gap: 8px; }
.p-chart-key li::before { content: ""; width: 24px; border-top: 2px solid var(--fg); }
.p-chart-key li.is-other::before { border-top: 2px dashed var(--mut); }
.p-chart span { position: absolute; padding: 0 4px; background: var(--card); font: 400 13px/1.5 var(--sans); color: var(--mut); font-variant-numeric: tabular-nums; }
/* Cijene lijevo, svaka odmah iznad svoje crte: crte su na GrafPad/GrafH
   (16/200 = 8 %) i (GrafH - GrafPad)/GrafH (92 %) visine plohe. Dani ispod grafa. */
.p-chart-plot { position: relative; }
.p-chart-max, .p-chart-min { left: -4px; transform: translateY(-100%); }
.p-chart-max { top: 8%; }
.p-chart-min { top: 92%; }
.p-chart-od { bottom: 10px; left: 20px; }
.p-chart-do { bottom: 10px; right: 20px; }
.p-alert { padding: 32px; background: var(--warm); border-radius: var(--r); }
.ident-alert { font-size: 15px; }
.ident-alert-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ident-alert-row input { width: 7rem; height: 44px; font: 400 17px var(--sans); color: var(--fg); padding: 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent; }
.ident-alert-guest { margin: 0; color: var(--body); }
.ident-alert .me-label { display: block; }

/* Što na njega ide (dodatak 3. 10. 2026.): grupa po grupa, naslov H3, tri
   kartice u retku od 768 px, na mobitelu jedna ispod druge (P17: bez
   usamljene pločice u dva stupca), ispod poveznica „još N …". Čip ostaje samo
   za stariji odgovor bez kartica. */
.compat h2 { margin: 0; }
.compat-group { margin-top: 32px; }
.compat-group h3 { margin: 0 0 16px; }
.compat-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .compat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.compat-more { margin: 16px 0 0; }
.compat-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* C4 pokrivenost na kartici (#33) i D „Tko snima ovim": imena kao čipovi, cilj 44 px. */
.card-note { font-size: 13px; line-height: 1.5; color: var(--fg); margin: 0; font-variant-numeric: tabular-nums; }
.owners-n { margin: 8px 0 0; }
.owners-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.owners-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 15px/1.4 var(--sans); color: var(--fg); text-decoration: none; }
.owners-list a:hover { border-color: var(--fg); }
/* #173: za što vlasnik radi, uz ime u istom čipu, prigušeno; pre-wrap čuva razmak ispred „·" (početak flex
   stavke) i i dalje lomi dug popis na mobitelu. */
.owners-za { color: var(--mut); font-weight: 400; white-space: pre-wrap; }
/* D fotografije članova Cluba (#33): sličice, nikad glavna slika; dva stupca na
   mobitelu, četiri od 768 px. Sličica se reže na 4:3, naslov i autor ispod. */
.club-photos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .club-photos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.club-photos-grid a { display: block; color: var(--fg); text-decoration: none; }
.club-photos-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--line); }
.club-photo-title { display: block; margin-top: 8px; font: 500 15px/1.4 var(--sans); overflow-wrap: anywhere; }
.club-photo-author { display: block; font-size: 13px; line-height: 1.5; color: var(--mut); }
.club-photos-grid a:hover .club-photo-title { text-decoration: underline; }
.compat-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.compat-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 500 15px/1.4 var(--sans); color: var(--fg); text-decoration: none; }
.compat-list a:hover { border-color: var(--fg); }

.p-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .p-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .p-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-more > section { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.p-more h2 { margin-bottom: 16px; }
.parts li, .gen-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.parts li:first-child, .gen-list li:first-child { border-top: 0; }
.rating-stars { font-size: 18px; margin: 0 0 4px; }
.rating-dims { list-style: none; margin: 8px 0 0; padding: 0; color: var(--mut); font-size: 15px; }
.rating-texts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; font-size: 15px; }
.rating-texts blockquote { margin: 0 0 2px; padding-left: 12px; border-left: 2px solid var(--line, currentColor); white-space: pre-line; }

/* Specifikacije i opis, dva stupca na računalu (dizajn) */
/* vrh opisa u istoj liniji s vrhom specifikacija (.prose h2 inače nosi margin-top) */
.p-desc.prose > :first-child { margin-top: 0; }
.p-specs h2, .p-desc h2, .fit h2 { margin: 0 0 24px; }
.p-specs dl { margin: 0; border-top: 1px solid var(--line); }
.p-spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.p-spec dt { color: var(--mut); }
.p-spec dd { margin: 0; font-weight: 500; color: var(--fg); }
.p-desc { max-width: none; }
.p-desc h2 { font-size: var(--h2); }
.p-desc h2 + h2, .p-desc p + h2, .p-desc ul + h2 { margin-top: 48px; }
/* „Opis" iste veličine kao „Pune specifikacije"; „Za početnika" i „Za naprednog"
   podnaslovi ispod njega (4. 10. 2026., #33). .prose h2 inače spušta na --h3. */
.p-desc .p-desc-title { font-size: var(--h2); }
.p-desc .p-desc-sub { margin: 0 0 16px; font-size: var(--h3); line-height: 1.3; }
.p-desc * + .p-desc-sub { margin-top: 40px; }
.p-desc h2 + .p-desc-sub { margin-top: 0; }
.p-desc p { color: var(--body); max-width: 65ch; }
.p-desc-empty { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--warm); border-radius: var(--r); }
.p-desc-empty p { margin: 0; font-size: 15px; line-height: 1.6; }
.p-desc-name { font: 500 var(--tijelo)/1.6 var(--sans) !important; color: var(--fg) !important; }
/* Torbe, „Što stane" (#89): podatak proizvođača, hrvatski citat bez navodnika (i s prijelomima retka) */
.fit { margin-top: 48px; }
.fit-rows { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fit-rows li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.fit-src { color: var(--mut); font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.fit-quote { display: block; margin: 4px 0; font-style: italic; white-space: pre-line; color: var(--body); }
.fit-src a { color: inherit; }
.f-fit { justify-content: space-between; }
.fit-note { font-size: 15px; color: var(--mut); margin: 16px 0 0; }

/* Iz magazina */
.mag h2 { margin: 0 0 12px; }
.mag > p { color: var(--mut); font-size: 15px; }
.mag-list { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
@media (min-width: 768px) { .mag-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mag-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mag-list li { display: flex; flex-direction: column; gap: 4px; padding: 0 0 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mag-list li > :not(.mag-media) { margin-inline: 24px; }
.mag-list li > a:not(.mag-media) { margin-top: 16px; }
/* Slika članka (04.09.2026.): fiksni omjer da kartice ostanu iste visine bez
   obzira na to je li fotografija pejzažna ili portretna. */
.mag-media { display: block; background: var(--warm); }
.mag-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mag-list a { font: 400 20px/1.3 var(--serif); text-decoration: none; color: var(--fg); }
.mag-list a:hover { text-decoration: underline; }
.mag-list .small { color: var(--mut); }
.mag-list p { margin: 4px 0 0; color: var(--body); }

.sticky-price { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 20px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); z-index: 25; }
.sticky-price b { font: 600 17px var(--sans); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .sticky-price { display: none; } }
@media (max-width: 899px) { body:has(.sticky-price) .site-foot { padding-bottom: 64px; } }

/* ---------- usporedba ---------- */
.table-wrap { overflow-x: auto; }
.cmp { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font: 400 20px/1.3 var(--serif); }
.cmp tbody th { color: var(--mut); font-weight: 500; white-space: nowrap; }
/* S4 (#114): prvi stupac (nazivi redaka) ostaje vidljiv pri pomicanju; na
   mobitelu se naziv lomi u uži stupac, da proizvodima ostane mjesta. */
.cmp tbody th, .cmp thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
@media (max-width: 767px) { .cmp tbody th { white-space: normal; min-width: 96px; max-width: 128px; } }
.cmp tr.is-same td { color: var(--mut); }
.cmp tr.is-diff td { font-weight: 600; background: var(--warm); }
.cmp tr.is-diff td.is-better { color: var(--bolje); font-weight: 700; }
.compare-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 72px; display: flex; gap: 12px; align-items: center; padding: 8px 16px; background: var(--fg); color: var(--bg); border-radius: 999px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); z-index: 26; font-size: 14px; max-width: calc(100% - 32px); }
.compare-bar a, .compare-bar button { color: var(--bg); }
.compare-bar[hidden] { display: none; }
[data-compare-add][hidden] { display: none; } /* nesrodna vrsta (#91) */
@media (min-width: 900px) { .compare-bar { bottom: 24px; } }
.cmp-add { position: relative; margin: 0 0 24px; max-width: 34rem; }
.cmp-add input { width: 100%; height: 48px; font: 400 16px var(--sans); color: var(--fg); padding: 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent; }
.cmp-add .suggest a { display: block; padding: 8px 12px; }

/* ---------- prose / pravne ---------- */
.prose { max-width: 72ch; }
.prose p, .prose li { color: var(--body); }
.prose h2 { margin-top: 1.4em; font-size: var(--h3); }
.prose h3 { margin-top: 1.1em; font-size: 20px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 16px 0 24px; }
.prose th, .prose td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose code { background: var(--warm); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .45em; }

/* ---------- privola (21.9 kolačići): Odbij jednako vidljiv kao Prihvati ---------- */
/* Traka je ljepljiva uz dno: kad se Manrope učita i tekst promijeni broj redaka, cijela traka skoči (CLS 0,09 do 0,11, #153 red 6).
   Zato ide u sistemskom fontu, koji se ne mijenja; sve ostalo na stranici je zaštićeno zamjenskim fontovima gore. */
.consent { --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--sans); position: fixed; left: 16px; right: 16px; bottom: 16px; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 40px rgba(0, 0, 0, .18); padding: 16px; z-index: 50; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 320px; }
@media (min-width: 900px) { .consent { left: auto; max-width: 560px; } }
/* Na mobitelu traka privole stoji iznad ljepljive cijene, ne preko nje (#114 V1). */
@media (max-width: 899px) { body:has(.sticky-price) .consent { bottom: 80px; } }

/* ---- dodirne mete (21.5): najmanja meta je 44 x 44 px ----------------
   Vrijedi ispod 900 px, gdje je prst jedini ulaz; na stolnom računalu
   se raspored ne rasteže bez potrebe. Mjereno na 390 px prije ove
   promjene: gumbi .btn-small 35,2 px, redak filtera 29,8 px, izbornik
   40 x 40,3 px, poveznica u podnozju 29,9 x 21,1 px, „+ usporedi" 19,8 px. */
@media (max-width: 899px) {
  .btn, .btn-small { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; height: auto; }
  .link-btn, .pager a, .chip, .crumbs a, .brand, .foot-grid a, .site-nav a, .dd summary {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .foot-grid a { display: flex; }
  .site-nav.is-open > a, .site-nav .dd-list a { display: flex; }
  .skip { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .search input, .search button { min-height: 44px; }
  .f-group summary, .suggest a, .f-links li a, .f-inline, .f-check { min-height: 44px; align-items: center; }
  .f-check { display: flex; gap: 8px; }
  .card-title a { display: inline-block; min-height: 44px; }
  .card-compare { min-height: 44px; }
  .report summary, .me-item-actions a, .me-item-actions button {
    display: flex; align-items: center; min-height: 44px;
  }
  .f-range input, .f-inline input, .f-select, .f-inline select, .report-form input, .me-panel input, .me-panel select { min-height: 44px; }
  .me-item-actions { gap: 0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }
@media print { .site-head, .site-foot, .sticky-price, .compare-bar, .consent, .filters, .ident-actions, .p-alert, .partner-akcije { display: none !important; } body { background: #fff; color: #111; } }

/* ---- Moja oprema (21.1, Faza 9) --------------------------------------- */
.is-hidden { display: none !important; }
.me { max-width: 760px; margin: 0 auto; }
.me-head { margin: 0 0 24px; }
.me-add { position: relative; margin-bottom: 24px; }
.me-search { position: relative; }
.me-search input, .me-add input[type="search"], .me-add input[type="text"] { width: 100%; height: 48px; font: 400 16px var(--sans); color: var(--fg); padding: 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent; }
.me-sg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.me-sg:last-child { border-bottom: 0; }
.me-rucni-open { margin: 8px 0 0; font-size: 14px; }
.me-rucni { margin-top: 12px; border-radius: var(--r); }
.me-rucni-ok { margin: 8px 0 0; }
.me-rucni-list { margin: 0 0 24px; }
.me-empty { padding: 24px; background: var(--warm); border-radius: var(--r); }
.me-group { font: 400 var(--h3)/1.3 var(--serif); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.me-group .n { color: var(--mut); font: 400 15px var(--sans); }
.me-vrijednost .me-vr-iznos { font-size: var(--h2); margin: 0 0 4px; } /* #140: vrijednost Moje opreme danas */
.me-items { list-style: none; padding: 0; margin: 0; }
.me-item { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; background: var(--card); }
.me-item-main { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.me-thumb { flex: 0 0 auto; width: 56px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--photo); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.me-thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; object-fit: contain; }
.me-thumb-ph { font-size: 13px; color: var(--mut); text-align: center; padding: 2px; }
.me-item-body { flex: 1 1 auto; min-width: 0; }
.me-item-title { margin: 0; font-weight: 600; }
.me-item-title a { text-decoration: none; }
.me-tag { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 400; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--mut); }
.me-item-meta { margin: 4px 0 0; font-size: 14px; }
.me-bag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mut); white-space: nowrap; }
.me-item-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 14px; }
.me-panel { padding: 16px; border-top: 1px solid var(--line); background: var(--warm); display: grid; gap: 12px; }
.me-field { display: grid; gap: 4px; }
.me-field-row { grid-template-columns: 1fr 1fr; gap: 12px; }
.me-label { font: 500 14px/1.5 var(--sans); color: var(--body); }
.me-panel input, .me-panel select, .me-panel textarea { font: inherit; color: var(--fg); padding: 8px 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent; width: 100%; }
.me-panel select option { background: var(--card); color: var(--fg); }
.me-panel-foot { display: flex; align-items: center; gap: 12px; }
.me-saved { font-size: 14px; color: var(--green); }
.me-saved.is-err { color: var(--red); }
.me-gap-list, .me-hist-list { list-style: none; padding: 0; margin: 0; }
.me-gap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.me-gap-act { display: flex; gap: 12px; white-space: nowrap; }
.me-bagbox, .me-history, .me-privacy, .me-gaps { margin-top: 32px; }
.me-hist-list li { display: flex; gap: 8px; padding: 4px 0; font-size: 14px; border-bottom: 1px dotted var(--line); }
.me-hist-when { flex: 0 0 auto; color: var(--mut); min-width: 8.5em; }
.me-toggle { display: flex; gap: 8px; align-items: flex-start; padding: 16px; background: var(--warm); border-radius: var(--r); cursor: pointer; }
.me-toggle input { margin-top: 4px; }
@media (max-width: 560px) {
  .me-item-main { flex-wrap: wrap; }
  .me-bag { order: 3; }
  .me-item-actions { order: 4; flex-direction: row; gap: 12px; margin-left: auto; }
  .me-field-row { grid-template-columns: 1fr; }
}

/* ---- Prijenos anonimnog odabira na /moja-oprema (9.7) ---------------- */
.me-exif { margin: 12px 0 0; padding: 12px; background: var(--warm); border-radius: var(--r); }
.me-exif-h { margin: 0 0 8px; font-weight: 600; }

/* Lista želja (21.2): redak nosi razliku od dana spremanja, to je poanta. */
.wish-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.wish-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center;
  padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.wish-media { display: flex; align-items: center; justify-content: center; border-radius: 2px; overflow: hidden; background: var(--photo); }
.wish-media img { display: block; width: auto; height: auto; max-width: 100%; min-width: 0; }
.wish-title { margin: 0 0 4px; font: 600 17px/1.4 var(--sans); }
.wish-price, .wish-delta, .wish-fresh { margin: 2px 0; }
.wish-delta .is-down { color: var(--green); font-weight: 600; }
.wish-delta .is-up { color: var(--red); font-weight: 600; }
.wish-act { display: grid; gap: 8px; justify-items: stretch; text-align: center; }
.wish-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; }
.wish-tools .f-select { width: auto; }
.wish-tools .f-check { margin: 0; }
.wish-group { margin: 24px 0 0; font-size: 20px; }
.wish-row-plain { grid-template-columns: 1fr; }
.wish-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0 0; }
.wish-share-url { flex: 1 1 280px; min-width: 0; height: 44px; padding: 0 12px; font: inherit; border: 1px solid var(--line2); border-radius: var(--r); background: var(--card); color: var(--fg); }
.wish-drops { margin-top: 32px; }
@media (max-width: 640px) {
  .wish-row { grid-template-columns: 84px 1fr; }
  .wish-act { grid-column: 1 / -1; grid-auto-flow: column; }
}

/* Ocjena vlasnika (4.6, issue #85): forma Ocijeni pod gumbima. Oznaka
   obuhvaća polje, pa je dodirna meta oznaka (21.5, P4). */
[data-rating-open][hidden] { display: none; } /* .btn je inline-flex i inače bi pregazio `hidden` */
[data-odjava-natrag][hidden] { display: none; } /* isto: nakon „Uključi ponovno" gumb se skriva (#57) */
.rate-form { padding: 24px; border-radius: var(--r); background: var(--warm); color: var(--fg); }
.rate-intro { margin: 0 0 12px; font-weight: 600; }
.rate-q { border: 0; margin: 0 0 12px; padding: 0; }
.rate-q legend { font-weight: 600; font-size: 15px; margin-bottom: 4px; padding: 0; }
.rate-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 16px; }
.rate-form textarea { display: block; width: 100%; font: inherit; color: var(--fg); padding: 8px 0; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent; margin: 4px 0 12px; }
/* Objektiv za težinu seta (#65): gumb ispod tablice, tražilica ispod gumba;
   redak se pri skoku ne skriva pod ljepljivim zaglavljem sajta. */
.cmp-set { margin: 16px 0 24px; }
.cmp-set .cmp-add { margin: 16px 0 0; }
.cmp-set .cmp-add[hidden], .cmp-set [data-set-open][hidden] { display: none; }
.cmp-set [data-set-open] { min-height: 44px; }
#tezina-seta { scroll-margin-top: 96px; }
.cmp .set-obj { display: inline-block; margin-top: 4px; }
/* Što ti nedostaje na naslovnici (#130): iste grupe kao „Što na njega ide",
   naslov grupe je poveznica na popis ili na tijelo. */
.home-preporuka .compat-group h3 a { color: inherit; }

/* Gearove obavijesti (#133): /obavijesti, nepročitano s crtom kao zvono */
.obavijesti-popis { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.obavijesti-popis li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 14px 12px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.obavijesti-popis li.is-unread { border-left-color: var(--gold); }
.obavijesti-popis time { flex: 0 0 auto; color: var(--mut); font-size: 14px; }
.push-optin { margin: 1rem 0; }
/* Nacrt iza zastavice Obavijesti:Tekstovi (#133 točka 3): rečenica uz push gumb, prazan popis, kartica za instalaciju */
.push-napomena { display: block; margin-top: 8px; color: var(--mut); font-size: 14px; }
.obavijesti-prazno { color: var(--mut); }
.aplikacija-kartica { position: relative; margin: 1rem 0; padding: 16px 44px 16px 16px; border: 1px solid var(--line); border-radius: 12px; }
.aplikacija-kartica .aplikacija-naslov { margin: 0 0 6px; font-size: 16px; }
.aplikacija-tekst { margin: 0; color: var(--mut); font-size: 14px; }
.aplikacija-koraci { margin: 10px 0 0; padding-left: 1.2rem; font-size: 14px; line-height: 1.7; }
.aplikacija-kartica .btn { margin-top: 12px; }
.aplikacija-zatvori { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--mut); cursor: pointer; }
.aplikacija-zatvori:hover, .aplikacija-zatvori:focus-visible { color: inherit; }

/* Oznaka „Paše uz tvoj …" na kartici (#136, zaslon B; iza zastavice Torba:Pase). Boje su tokeni obje teme. */
.card-pase { margin: 8px 0 0; }
.pase-ozn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px; font: 600 13px/1.4 var(--sans); text-decoration: none; }
.pase-ozn svg { flex: 0 0 auto; }
.pase-ok { color: var(--green); background: var(--green-bg); }
.pase-ne { color: var(--red); background: var(--red-bg); }
.pase-imas { color: var(--fg); background: var(--line); }
.pase-gost { color: var(--body); background: var(--line); font-weight: 500; }
a.pase-gost:hover { color: var(--fg); text-decoration: underline; }
.pase-filter { margin: 0 0 12px; }

/* „Za tvoj …" (#174; iza opcije cbgear_preporuke): redak razloga na kartici i oznaka s prekidačem na popisu. */
.card-razlog { margin: 4px 0 0; color: var(--body); font-size: 14px; line-height: 1.45; }
.zt-popis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }

/* Okvir „Uz tvoju opremu" na stranici proizvoda (#137, zaslon C; iza zastavice Torba:Okvir). */
.p-okvir { margin: 16px 0; padding: 16px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--card); font-size: 14px; }
.p-okvir-h { margin: 0 0 8px; font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.p-okvir p { margin: 0 0 8px; }
.p-okvir p:last-child { margin-bottom: 0; }
.p-okvir-v { font-size: 16px; color: var(--fg); }
.p-okvir-v b { display: inline-flex; align-items: center; gap: 6px; }
.pase-ok-t { color: var(--green); }
.pase-ne-t { color: var(--red); }
.p-okvir-r { color: var(--body); }
.p-okvir-l { margin: 0; padding-left: 18px; color: var(--body); }
.p-okvir-l li + li { margin-top: 4px; }

/* Sposobnosti (#44): blok C2 na stranici proizvoda i „Koliko gubiš" u usporedbi */
.caps h2, .cmp-gubis h2 { margin: 0 0 24px; }
.caps-group + .caps-group { margin-top: 24px; }
.caps-h, .gubis-h { margin: 0 0 8px; font: 500 15px/1.4 var(--sans); color: var(--mut); }
.caps-list { margin: 0; border-top: 1px solid var(--line); }
.cap { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cap dt { font-weight: 500; }
.cap dd { margin: 0; }
.cap-dots { letter-spacing: 2px; margin-right: 8px; }
.cap-n { font-weight: 500; }
.cap-why { display: block; margin-top: 4px; color: var(--mut); font-size: 15px; }
.caps-note { margin: 16px 0 0; color: var(--mut); font-size: 15px; }
.cmp-gubis { margin-top: 32px; }
.gubis-p + .gubis-p { margin-top: 24px; }
.gubis-t { margin: 0 0 12px; font: 500 17px/1.4 var(--sans); }
.gubis-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 32px; }
.gubis-l { margin: 0; padding-left: 20px; }
.gubis-l li + li { margin-top: 8px; }
.gubis-nista { margin: 0; color: var(--mut); font-size: 15px; }
@media (max-width: 600px) { .cap { grid-template-columns: 1fr; } }
/* Što s njim možeš na usporedbi (#157): iste točkice i „N od 5", bolja ocjena u retku podebljana kao u tablici specifikacija */
.cmp-caps { margin: 0 0 32px; }
.cmp-caps h2 { margin: 0 0 16px; }
.cmp-caps .cap-n { font-weight: 400; }
.cmp-caps .cap-n.is-best { font-weight: 600; }
.cmp-caps .cap-nema { color: var(--mut); }
.cmp-caps .caps-g th { font: 500 15px/1.4 var(--sans); color: var(--mut); padding-top: 20px; }
.cmp-caps .cap-why { font-size: 13px; }
.cmp-caps .cap-why-m { display: none; }
.cmp-caps .cap-why-m summary { cursor: pointer; margin-top: 4px; min-height: 44px; display: flex; align-items: center; font-size: 13px; color: var(--mut); }
@media (max-width: 767px) { .cmp-caps .cap-why-d { display: none; } .cmp-caps .cap-why-m { display: block; } }
/* Presuda na usporedbi (#158): iznad „Što s njim možeš", samo ocjene i cijena */
.cmp-presuda { margin: 0 0 32px; max-width: 46rem; }
.cmp-presuda .presuda-r { margin: 0 0 8px; font: 400 20px/1.4 var(--serif); }
.cmp-presuda .presuda-l { margin: 0; padding-left: 20px; color: var(--mut); font-size: 15px; }
.cmp-presuda .presuda-l li + li { margin-top: 4px; }
/* Usporedba po namjeni (#167, zastavica Usporedba:Namjena): pitanje, prijevod brojki, retci važni za namjenu */
.cmp-namjena { margin: 0 0 32px; }
.cmp-namjena h2 { margin: 0 0 16px; }
.namjena-f { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 0 0 16px; }
.namjena-f label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--mut); }
.namjena-f select { min-height: 44px; font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--field); border-radius: var(--r); padding: 0 8px; }
.namjena-f button { min-height: 44px; }
.namjena-vazno { margin: 0 0 16px; max-width: 46rem; }
.namjena-prijava { margin: 0; min-height: 44px; display: flex; align-items: center; }
.namjena-preporuke { margin: 0 0 16px; padding-left: 1.2em; max-width: 46rem; }
.namjena-preporuke li + li { margin-top: 4px; }
.namjena-komplet { margin: 0 0 16px; }
/* Komplet za namjenu (#172) */
.komplet-stavke { list-style: none; margin: 0 0 16px; padding: 0; max-width: 46rem; }
.komplet-stavke li { display: grid; grid-template-columns: 11rem 1fr auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--field); }
.komplet-vrsta { color: var(--mut); }
.komplet-cijena { text-align: right; }
.komplet-napomena { margin: 0 0 8px; max-width: 46rem; }
.komplet-ukupno { margin: 16px 0 0; font-size: 20px; }
@media (max-width: 600px) { .komplet-stavke li { grid-template-columns: 1fr; } .komplet-cijena { text-align: left; } }
.cmp tr.is-namjena th { color: var(--fg); font-weight: 700; }
.cmp tr.is-namjena th::before { content: ""; display: inline-block; width: 4px; height: 1em; margin-right: 8px; vertical-align: -2px; background: var(--gold); }