/* ===============================================================
   Rasadnik Floriven — ceo vizuelni sistem u jednom fajlu (DESIGN.md).
   Telefon prvi: osnovna pravila su za 375 px, šire ekrane dodaju @media.
   =============================================================== */

/* [hidden] UVEK sakriva — inače display:flex/grid na klasi poništi atribut. */
[hidden] { display: none !important; }

/* --- Fontovi (lokalno; latin-ext nosi č ć š ž đ) ------------------ */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Boje i mere ------------------------------------------------ */
:root {
  --paper: #FAF7F0;
  --paper-2: #F1ECE0;
  --card: #FFFFFF;
  --ink: #1B2419;
  --ink-2: #4A5446;
  --ink-3: #6E776A;
  --forest: #1F4A2E;
  --forest-deep: #153520;
  --forest-tint: #E3EDE4;
  --gold: #B8963E;
  --gold-deep: #8F7228;
  --moss: #7A8F6A;
  --rule: rgba(27, 36, 25, .14);
  --rule-strong: rgba(27, 36, 25, .32);
  --err: #9B2C1F;
  --ok: #2F6B3C;
  --radius: 10px;
  --radius-card: 16px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::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(--sans); font-size: 16px; line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: var(--forest); text-underline-offset: 3px; }
a:hover { color: var(--forest-deep); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
::selection { background: #EAD9A6; color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--gold-deep); outline-offset: 2px; }
html { scrollbar-color: var(--moss) var(--paper-2); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap-uzak { max-width: 780px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preskoci { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--card); padding: 8px 12px; }
.preskoci:focus { left: 8px; }
.ic { flex-shrink: 0; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 28px; } .mt-5 { margin-top: 40px; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .small { font-size: 14px; }
.center { text-align: center; }

/* --- Dugmad ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: var(--radius);
  font-family: var(--sans); font-weight: 800; font-size: 15px; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--forest-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-ghost:hover { background: var(--forest-tint); color: var(--forest-deep); }
.btn-svetlo { background: #fff; color: var(--forest); }
.btn-svetlo:hover { background: var(--forest-tint); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #C9A64C; color: var(--ink); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn-lg { min-height: 54px; font-size: 16px; padding: 12px 24px; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* --- Zaglavlje -------------------------------------------------- */
.zaglavlje { position: sticky; top: 0; z-index: 100; }
.zaglavlje-traka { background: var(--forest); color: #fff; border-bottom: 3px solid var(--forest-deep); }
.zaglavlje-red { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.brend { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; text-decoration: none; margin-right: auto; }
.brend:hover { color: #fff; }
.brend-logo { height: 40px; width: auto; display: block; }
@media (max-width: 380px) { .brend-logo { height: 34px; } }
.brend-word { font-family: var(--serif); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.brend-leaf { color: #D9BC6E; }
.meni-dugme {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: none; border: 0; color: #fff; cursor: pointer; margin-left: -8px;
}
.pretraga { display: none; position: relative; flex: 1; max-width: 420px; }
.pretraga input {
  width: 100%; height: 42px; padding: 0 44px 0 14px; border: 0; border-radius: var(--radius);
  font: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
.pretraga button {
  position: absolute; right: 0; top: 0; width: 44px; height: 42px; border: 0; background: none; color: var(--forest); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.zaglavlje-tel { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 800; min-height: 44px; }
.zaglavlje-tel span { display: none; }
.zaglavlje-tel:hover { color: #D9BC6E; }
.zaglavlje-korpa { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; }
.zaglavlje-korpa:hover { color: #D9BC6E; }
.korpa-broj {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
.korpa-broj:empty { display: none; }
.korpa-broj.skok { animation: skok .45s var(--ease); }
@keyframes skok { 40% { transform: scale(1.35); } }

/* Meni: na telefonu fioka ispod trake, na desktopu red sa kategorijama. */
.meni { display: none; background: var(--paper); border-bottom: 1px solid var(--rule); max-height: calc(100vh - 63px); overflow-y: auto; }
.meni.otvoren { display: block; }
.meni .wrap { padding-top: 12px; padding-bottom: 20px; }
.pretraga-meni { display: block; max-width: none; margin-bottom: 8px; }
.pretraga-meni input { border: 1.5px solid var(--rule-strong); }
.meni-lista { list-style: none; }
.meni-lista > li { position: relative; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; }
.meni-lista > li > a { flex: 1; display: block; padding: 12px 4px; font-weight: 800; color: var(--ink); text-decoration: none; font-size: 17px; }
.meni-lista a[aria-current] { color: var(--forest); text-decoration: underline; text-decoration-thickness: 2px; }
.meni-akcija { color: var(--gold-deep) !important; }
.podmeni-dugme {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
}
.podmeni { display: none; list-style: none; width: 100%; padding: 0 0 10px 12px; }
.ima-podmeni.otvoren .podmeni { display: block; }
.ima-podmeni.otvoren .podmeni-dugme svg { transform: rotate(180deg); }
.podmeni a { display: block; padding: 8px 4px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.podmeni a:hover { color: var(--forest); }
.meni-tel { margin-top: 16px; }
.meni-tel .btn { width: 100%; }

@media (min-width: 900px) {
  .meni-dugme { display: none; }
  .brend { margin-right: 8px; }
  .pretraga { display: block; margin: 0 auto; }
  .pretraga-meni, .meni-tel { display: none !important; }
  .zaglavlje-tel span { display: inline; }
  .meni { display: block; max-height: none; overflow: visible; background: var(--paper); }
  .meni .wrap { padding-top: 0; padding-bottom: 0; }
  .meni-lista { display: flex; flex-wrap: wrap; gap: 0 2px; }
  .meni-lista > li { border: 0; flex-wrap: nowrap; }
  .meni-lista > li > a { padding: 12px 10px; font-size: 15px; }
  .podmeni-dugme { width: 22px; height: 44px; margin-left: -6px; }
  .podmeni {
    position: absolute; top: 100%; left: 0; min-width: 240px; padding: 8px 0; z-index: 120;
    background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--forest);
    box-shadow: 0 12px 28px rgba(27, 36, 25, .12);
  }
  .podmeni a { padding: 9px 16px; }
  .ima-podmeni:hover .podmeni, .ima-podmeni:focus-within .podmeni, .ima-podmeni.otvoren .podmeni { display: block; }
}

/* --- Traka činjenica --------------------------------------------- */
.cinjenice { background: var(--forest-tint); border-bottom: 1px solid var(--rule); font-size: 14px; font-weight: 700; color: var(--forest-deep); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cinjenice-okvir { display: flex; width: max-content; }
.cinjenice-niz { list-style: none; display: flex; flex-shrink: 0; gap: 34px; padding: 11px 17px; }
.cinjenice li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cinjenice .ic { color: var(--moss); }

/* --- Sekcije ---------------------------------------------------- */
.sekcija { padding: 40px 0; }
.sekcija-papir { background: var(--paper-2); }
.sekcija-zelena { background: var(--forest); color: #fff; }
.sekcija-zelena h2, .sekcija-zelena h3 { color: #fff; }
.sekcija-glava { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.sekcija-glava h2 { font-size: clamp(26px, 6vw, 38px); }
.sekcija-glava p { color: var(--ink-2); max-width: 60ch; margin-top: 6px; }
.sekcija-glava a { font-weight: 800; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .sekcija { padding: 64px 0; } }

/* --- Hero ------------------------------------------------------- */
.hero { position: relative; background: var(--forest-deep); color: #fff; overflow: hidden; }
.hero-slika { position: absolute; inset: 0; }
.hero-slika img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-slika::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,53,32,.35) 0%, rgba(21,53,32,.55) 45%, rgba(21,53,32,.92) 100%); }
.hero-sadrzaj { position: relative; padding-top: 180px; padding-bottom: 36px; }
.hero h1 { color: #fff; font-size: clamp(32px, 8.4vw, 64px); font-weight: 800; max-width: 16ch; letter-spacing: -0.02em; }
.hero-pod { margin-top: 14px; font-size: 18px; max-width: 46ch; color: #F2EEE2; }
.hero-dugmad { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.hero-dugmad .btn { width: 100%; }
@media (min-width: 600px) {
  .hero-dugmad { flex-direction: row; }
  .hero-dugmad .btn { width: auto; }
}
@media (min-width: 900px) {
  .hero-sadrzaj { padding-top: 220px; padding-bottom: 72px; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-slika::after { background: linear-gradient(90deg, rgba(21,53,32,.94) 0%, rgba(21,53,32,.72) 42%, rgba(21,53,32,.12) 75%); }
}

/* --- Pločice kategorija ----------------------------------------- */
.plocice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }
.plocica { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--paper-2); color: #fff; text-decoration: none; }
.plocica picture, .plocica img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.plocica:hover img { transform: scale(1.04); }
.plocica::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(21,53,32,.88)); }
.plocica-tekst { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; }
.plocica-tekst b { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.plocica-tekst span { font-size: 13px; font-weight: 700; color: #E9E2CC; }
.plocice-male .plocica { aspect-ratio: 3 / 2; }
@media (min-width: 700px) { .plocice { grid-template-columns: repeat(3, 1fr); gap: 16px; } .plocica-tekst b { font-size: 22px; } }
@media (min-width: 1100px) { .plocice-9 { grid-template-columns: repeat(5, 1fr); } .plocice-9 li:first-child { grid-row: span 2; grid-column: span 1; } }

/* --- Mreža i kartica proizvoda ---------------------------------- */
.mreza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
@media (min-width: 700px) { .mreza { grid-template-columns: repeat(3, 1fr); gap: 28px 18px; } }
@media (min-width: 1500px) { .mreza-4, .katalog .mreza { grid-template-columns: repeat(4, 1fr); } }
.mreza-4 { }
@media (min-width: 1000px) { .mreza-4 { grid-template-columns: repeat(4, 1fr); } }

.kartica { display: flex; flex-direction: column; min-width: 0; }
.kartica-foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); border-radius: var(--radius-card); }
.kartica-foto picture { position: absolute; inset: 0; transition: opacity .35s ease; }
.kartica-foto img { width: 100%; height: 100%; object-fit: cover; }
.kartica-slika-2 { opacity: 0; }
@media (hover: hover) { .kartica:hover .kartica-slika-2 { opacity: 1; } }
.kartica-telo { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; flex: 1; }
.kartica-naslov { font-size: 17px; line-height: 1.2; }
.kartica-naslov a { color: var(--ink); text-decoration: none; }
.kartica-naslov a:hover { color: var(--forest); text-decoration: underline; }
.kartica-opis { font-size: 14px; color: var(--ink-2); line-height: 1.4; display: none; }
.kartica .cena-blok { margin-top: auto; padding-top: 6px; border-top: 2px solid var(--gold); }
.btn-kartica { width: 100%; min-height: 44px; font-size: 14px; padding: 8px 10px; }
@media (min-width: 700px) { .kartica-opis { display: block; } .kartica-naslov { font-size: 19px; } }

.ph { width: 100%; height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--moss); background: var(--paper-2); font-size: 13px; font-weight: 700; }

.bedzevi { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; z-index: 2; }
.bedz { display: inline-block; padding: 3px 8px; border-radius: var(--radius); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.bedz-akcija { background: var(--gold); color: var(--ink); }
.bedz-upit { background: var(--forest); color: #fff; }
.bedz-nema { background: var(--ink-2); color: #fff; }

/* Cena: uvek zlatna (tamna), najkrupnija u okruženju. */
.cena-blok { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cena { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--gold-deep); letter-spacing: -0.02em; }
.cena-stara { font-size: 14px; color: var(--ink-3); }
.cena-upit { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--forest); }
.cena-velika .cena { font-size: clamp(34px, 9vw, 46px); }
.cena-velika .cena-stara { font-size: 17px; }

.atributi { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-2); }
.atributi li { display: inline-flex; align-items: center; gap: 5px; }
.atributi .ic { color: var(--moss); }
.atributi-veliki { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); font-size: 15px; }
.atributi-veliki li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.atributi-veliki .ic { grid-row: span 2; margin-top: 2px; }
.atributi-veliki .at-n { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.atributi-veliki .at-v { font-weight: 700; color: var(--ink); }

/* --- Koraci ----------------------------------------------------- */
.koraci { list-style: none; display: grid; gap: 22px; counter-reset: k; }
.koraci li { position: relative; padding-top: 14px; border-top: 2px solid var(--forest); }
.korak-br { position: absolute; top: -15px; right: 0; font-family: var(--serif); font-size: 44px; font-weight: 800; color: var(--forest-tint); line-height: 1; }
.koraci .ic { color: var(--forest); margin-bottom: 8px; }
.koraci h3 { font-size: 21px; }
.koraci p { color: var(--ink-2); margin-top: 6px; }
@media (min-width: 800px) { .koraci { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* --- O rasadniku ------------------------------------------------ */
.o-rasadniku { display: grid; gap: 24px; align-items: center; }
.o-rasadniku picture img { border-radius: var(--radius-card); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.principi { list-style: none; margin-top: 16px; }
.principi li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.principi .ic { color: var(--forest); margin-top: 3px; }
@media (min-width: 900px) { .o-rasadniku { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* --- Utisci ----------------------------------------------------- */
.utisci-mreza { display: grid; gap: 18px; }
@media (min-width: 800px) { .utisci-mreza { grid-template-columns: repeat(3, 1fr); } }
.utisak { margin: 0; padding-top: 14px; border-top: 2px solid var(--gold); }
.utisak blockquote { margin: 8px 0 0; font-size: 16px; }
.utisak figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.utisak-izvor { display: block; font-size: 12px; color: var(--ink-3); }
.ocena { color: var(--gold-deep); letter-spacing: 2px; }

/* --- Vodiči ------------------------------------------------------ */
.vodici { display: grid; gap: 20px; list-style: none; }
@media (min-width: 800px) { .vodici { grid-template-columns: repeat(3, 1fr); } }
.vodic { border-top: 2px solid var(--forest); padding-top: 12px; }
.vodic h3 { font-size: 20px; }
.vodic h3 a { color: var(--ink); text-decoration: none; }
.vodic h3 a:hover { color: var(--forest); text-decoration: underline; }
.vodic p { color: var(--ink-2); margin-top: 6px; font-size: 15px; }
.vodic picture img { border-radius: var(--radius-card); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: 10px; }

/* --- Breadcrumb, naslovi strana --------------------------------- */
.mrvice { font-size: 13px; color: var(--ink-3); padding: 14px 0 8px; }
.mrvice ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.mrvice li + li::before { content: "›"; margin-right: 4px; color: var(--ink-3); }
.mrvice a { color: var(--ink-2); }
.naslov-strane { font-size: clamp(30px, 7.5vw, 48px); font-weight: 800; }
.uvod { margin-top: 10px; font-size: 17px; color: var(--ink-2); max-width: 70ch; }

/* --- Kategorija / katalog --------------------------------------- */
.kat-glava { padding-bottom: 8px; }
.kat-uvod { margin-top: 12px; max-width: 75ch; color: var(--ink-2); }
.kat-uvod p + p { margin-top: 10px; }
.kat-uvod.skupljen { max-height: 7.2em; overflow: hidden; position: relative; }
.kat-uvod.skupljen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(transparent, var(--paper)); }
.procitaj-vise { background: none; border: 0; padding: 6px 0; color: var(--forest); font-weight: 800; cursor: pointer; text-decoration: underline; }
.podkat { list-style: none; display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; scrollbar-width: none; }
.podkat::-webkit-scrollbar { display: none; }
.podkat a { display: inline-block; white-space: nowrap; padding: 9px 14px; border: 1.5px solid var(--forest); border-radius: 999px; color: var(--forest); font-weight: 800; font-size: 14px; text-decoration: none; background: var(--card); }
.podkat a[aria-current], .podkat a:hover { background: var(--forest); color: #fff; }

.katalog { display: grid; gap: 20px; padding-bottom: 48px; }
.katalog-alati { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.katalog-alati .broj { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.katalog-alati select { min-height: 44px; }
.filter-dugme { display: inline-flex; }
@media (min-width: 1000px) {
  .katalog { grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }
  .filter-dugme { display: none; }
}
.filteri { display: none; }
.filteri.otvoreni { display: block; position: fixed; inset: 0; z-index: 200; background: var(--paper); overflow-y: auto; padding: 16px 16px 100px; }
@media (min-width: 1000px) {
  .filteri, .filteri.otvoreni { display: block; position: sticky; top: 130px; inset: auto; padding: 0; background: none; z-index: auto; max-height: calc(100vh - 150px); overflow-y: auto; }
  .filteri-glava, .filteri-dno { display: none !important; }
}
.filteri-glava { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--forest); }
.filteri-glava h2 { font-size: 22px; }
.filteri-glava button { width: 44px; height: 44px; background: none; border: 0; font-size: 22px; cursor: pointer; }
.filter-grupa { border: 0; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.filter-grupa legend { font-family: var(--serif); font-weight: 700; font-size: 17px; padding: 0; margin-bottom: 6px; }
.filter-grupa label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.filter-grupa label span { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.filter-grupa input { width: 20px; height: 20px; accent-color: var(--forest); }
.filteri-dno { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--rule); display: flex; gap: 10px; }
.filteri-dno .btn { flex: 1; }
.filteri-poništi { display: inline-block; margin-top: 12px; font-weight: 700; }
.prazno { padding: 40px 0; text-align: center; color: var(--ink-2); }

.stranice { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.stranice a, .stranice span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius); text-decoration: none; font-weight: 700; color: var(--ink); background: var(--card); }
.stranice span[aria-current] { background: var(--forest); color: #fff; border-color: var(--forest); }

.saveti { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--forest); }
.saveti h2 { font-size: 24px; }
.saveti ul { list-style: none; margin-top: 10px; }
.saveti li { padding: 8px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 8px; align-items: center; }
.saveti .ic { color: var(--forest); }

/* --- Stranica proizvoda ----------------------------------------- */
/* minmax(0, 1fr): bez toga traka sa sličicama (lavanda ima 10 slika) razvuče
   kolonu na ~680 px i na telefonu slika izlazi van ekrana. */
.proizvod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 40px; }
@media (min-width: 900px) { .proizvod { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
.galerija-glavna { position: relative; aspect-ratio: 4 / 5; background: var(--paper-2); border-radius: var(--radius-card); overflow: hidden; cursor: zoom-in; }
.galerija-glavna picture, .galerija-glavna img { width: 100%; height: 100%; object-fit: cover; }
.galerija-slicice { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.galerija-slicice button { flex: 0 0 68px; width: 68px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: var(--radius); background: var(--paper-2); cursor: pointer; overflow: hidden; }
.galerija-slicice button[aria-current="true"] { border-color: var(--forest); }
.galerija-slicice img { width: 100%; height: 100%; object-fit: cover; }
.galerija-napomena { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
@media (min-width: 900px) { .galerija { position: sticky; top: 130px; } }

.kupovina { display: flex; flex-direction: column; gap: 16px; }
.kupovina h1 { font-size: clamp(30px, 7.5vw, 44px); font-weight: 800; }
.podnaslov { color: var(--ink-2); font-size: 17px; margin-top: -8px; }
.latinski { font-style: italic; color: var(--ink-3); font-size: 15px; margin-top: -10px; }
h1 .latinski { display: block; margin-top: 6px; font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.3; }
.cena-red { padding-top: 10px; border-top: 3px solid var(--gold); }
.cena-napomena { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.mali-naslov { font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }

.visine-izbor { display: flex; flex-wrap: wrap; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.visina { flex: 1 1 33%; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; background: var(--card); border: 0; border-right: 1px solid var(--rule); cursor: pointer; }
.visina:last-child { border-right: 0; }
.visina span { font-weight: 800; }
.visina b { font-size: 13px; color: var(--gold-deep); }
.visina.aktivna { background: var(--forest); color: #fff; }
.visina.aktivna b { color: #EAD9A6; }
.visine-ostale { display: flex; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.visine-ostale .ic { color: var(--forest); margin-top: 3px; }

.porodica ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.porodica li { border-bottom: 1px solid var(--rule); }
.porodica li:nth-child(odd) { border-right: 1px solid var(--rule); }
.porodica a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-height: 56px; text-decoration: none; color: var(--ink); background: var(--card); font-size: 14px; font-weight: 700; }
.porodica a b { color: var(--gold-deep); font-size: 14px; }
.porodica a:hover { background: var(--forest-tint); }
.porodica a.aktivan { background: var(--forest); color: #fff; }
.porodica a.aktivan b { color: #EAD9A6; }

.kolicina-red { display: flex; gap: 10px; align-items: stretch; }
.kolicina { display: inline-flex; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); }
.kolicina button { width: 46px; min-height: 52px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--forest); }
.kolicina input { width: 52px; border: 0; text-align: center; font: inherit; font-weight: 800; font-size: 17px; background: none; -moz-appearance: textfield; }
.kolicina input::-webkit-outer-spin-button, .kolicina input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kolicina-red .btn { flex: 1; min-height: 54px; font-size: 16px; }

.poverenje { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule); font-size: 14px; }
.poverenje li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.poverenje .ic { color: var(--forest); margin-top: 2px; }
.poverenje b { color: var(--ink); }

.kontakt-dugmad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kontakt-dugmad .btn { font-size: 14px; padding: 8px 10px; }

.akordeoni { border-top: 2px solid var(--forest); }
.akordeon { border-bottom: 1px solid var(--rule); }
.akordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: 20px; }
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary::after { content: "+"; font-family: var(--sans); font-size: 26px; color: var(--forest); transition: transform .2s; }
.akordeon[open] summary::after { transform: rotate(45deg); }
.akordeon-telo { padding: 0 0 20px; }

.tekst h3 { font-size: 20px; margin: 22px 0 8px; }
.tekst h3:first-child { margin-top: 0; }
.tekst p { margin: 10px 0; }
.tekst ul, .tekst ol { margin: 10px 0 10px 22px; }
.tekst li { margin: 4px 0; }
.tekst a { font-weight: 700; }

.upit { padding: 18px; background: var(--paper-2); border-radius: var(--radius-card); }
.upit h2 { font-size: 22px; }

/* Lepljiva traka na telefonu: cena + „Dodaj u korpu" kad glavno dugme ode iznad ekrana. */
.traka-kupi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 10px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 2px solid var(--gold); box-shadow: 0 -6px 20px rgba(27,36,25,.12); transform: translateY(110%); transition: transform .3s var(--ease); }
.traka-kupi.vidljiva { transform: none; }
.traka-kupi .cena { font-size: 20px; }
.traka-kupi-ime { font-size: 13px; color: var(--ink-2); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traka-kupi > div { flex: 1; min-width: 0; }
.traka-kupi .btn { min-height: 48px; }
@media (min-width: 900px) { .traka-kupi { display: none; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; background: rgba(12, 20, 14, .92); padding: 16px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 34px; width: 56px; height: 56px; cursor: pointer; }
.lightbox-close { top: 8px; right: 8px; }
.lightbox .prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 4px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; }

/* Prozorče „Dodato u korpu" */
.korpa-obavestenje { position: fixed; z-index: 300; left: 12px; right: 12px; bottom: 12px; padding: 14px; background: var(--card); border-top: 3px solid var(--forest); box-shadow: 0 12px 32px rgba(27,36,25,.2); transform: translateY(140%); transition: transform .35s var(--ease); }
.korpa-obavestenje.otvoreno { transform: none; }
@media (min-width: 700px) { .korpa-obavestenje { left: auto; right: 20px; top: 84px; bottom: auto; width: 360px; transform: translateY(-20px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease), opacity .3s; } .korpa-obavestenje.otvoreno { opacity: 1; pointer-events: auto; } }
.korpa-obavestenje-glava { display: flex; justify-content: space-between; align-items: center; color: var(--forest); }
.korpa-obavestenje-glava button { background: none; border: 0; font-size: 18px; width: 40px; height: 40px; cursor: pointer; }
.korpa-obavestenje-proizvod { display: flex; gap: 10px; align-items: center; margin: 8px 0 12px; font-size: 14px; font-weight: 700; }
.korpa-obavestenje-proizvod img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); }
.korpa-obavestenje-proizvod .cena { display: block; font-size: 17px; }
.korpa-obavestenje-dugmad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* --- Korpa ------------------------------------------------------ */
.korpa-mreza { display: grid; gap: 28px; padding-bottom: 48px; }
@media (min-width: 900px) { .korpa-mreza { grid-template-columns: 1fr 380px; align-items: start; } }
.korpa-lista { list-style: none; border-top: 2px solid var(--forest); }
.korpa-stavka { display: grid; grid-template-columns: 72px 1fr auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.korpa-stavka img, .korpa-stavka .ph { width: 72px; height: 72px; min-height: 0; object-fit: cover; border-radius: var(--radius); }
.korpa-stavka-ime { font-weight: 800; color: var(--ink); text-decoration: none; line-height: 1.3; }
.korpa-stavka-cena { font-size: 14px; color: var(--ink-2); }
.korpa-stavka-zbir { font-family: var(--serif); font-weight: 800; color: var(--gold-deep); white-space: nowrap; }
.korpa-stavka-alati { grid-column: 2 / 4; display: flex; justify-content: space-between; align-items: center; }
.korpa-stavka .kolicina button { width: 40px; min-height: 40px; font-size: 18px; }
.korpa-stavka .kolicina span { min-width: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.ukloni { background: none; border: 0; color: var(--ink-3); text-decoration: underline; cursor: pointer; min-height: 40px; font-size: 14px; }
.korpa-promena { padding: 10px 12px; background: #FFF6DC; border-top: 2px solid var(--gold); font-size: 14px; margin-bottom: 12px; }
.zbir { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius-card); padding: 18px; }
.zbir h2 { font-size: 22px; margin-bottom: 10px; }
.zbir-red { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.zbir-red b { white-space: nowrap; }
.zbir-ukupno { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; }
.zbir-ukupno .cena { font-size: 28px; text-align: right; }
.plus-post { display: block; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.zbir .btn { width: 100%; margin-top: 14px; }
.postarina-napomena { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.tabela-postarina { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.tabela-postarina th, .tabela-postarina td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); }
.tabela-postarina th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.tabela-postarina td:last-child { font-weight: 800; }

/* --- Formulari -------------------------------------------------- */
input:not([type]), input[type=text], input[type=tel], input[type=email], input[type=search], input[type=number], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--forest); outline: none; box-shadow: 0 0 0 3px var(--forest-tint); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label, .field > span { font-weight: 800; font-size: 14px; }
.req { color: var(--err); }
.forma { display: flex; flex-direction: column; gap: 16px; }
.alert { padding: 12px 14px; border-radius: var(--radius); font-size: 15px; }
.alert-error { background: #FBEDEA; color: #6E1D13; border-top: 2px solid var(--err); }
.alert-ok { background: var(--forest-tint); color: var(--forest-deep); border-top: 2px solid var(--forest); }
.alert-info { background: var(--paper-2); color: var(--ink); border-top: 2px solid var(--gold); }

/* Vođen unos adrese (preuzeto iz Tvog Dušeka; porudzbina.js koristi ove klase). */
.porudzbina .field { gap: 4px; }
.field-primer { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); }
.field-box { position: relative; }
.field-box input { padding-right: 42px; }
.field-ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: none; color: var(--ok); font-weight: 900; font-size: 18px; pointer-events: none; }
.field.ok .field-ok { display: block; }
.field.ok input { border-color: var(--ok); }
.field.err input, .field.err textarea { border-color: var(--err); box-shadow: 0 0 0 3px #FBEDEA; }
.field-poruka { display: none; margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #6E1D13; }
.field.err .field-poruka, .field.upozorenje .field-poruka { display: block; }
.field.upozorenje input { border-color: #B7791F; }
.field.upozorenje .field-poruka { color: #6B4A00; }
.field-predlog { display: inline-block; margin: 6px 6px 0 0; padding: 8px 12px; min-height: 40px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; background: var(--card); color: var(--forest); border: 1.5px solid var(--forest); border-radius: var(--radius); }
.field-predlog.tiho { color: var(--ink-2); border-color: var(--rule-strong); font-weight: 600; }
.adresa-uvod { margin: 8px 0 -4px; padding: 10px 12px; font-size: 14px; font-weight: 700; background: var(--forest-tint); border-top: 2px solid var(--forest); }
.adresa-red { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 400px) { .adresa-red { grid-template-columns: 7fr 3fr; } }
.placanje { border: 1.5px solid var(--forest); border-radius: var(--radius); padding: 12px 14px; margin: 0; }
.placanje legend { font-weight: 800; font-size: 14px; padding: 0 4px; }
.placanje label { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.placanje input { width: 20px; height: 20px; accent-color: var(--forest); margin-top: 2px; }
.placanje small { display: block; font-weight: 400; color: var(--ink-2); }
.porudzbina [data-poruci] { min-height: 54px; font-size: 16px; width: 100%; }
.porudzbina [data-poruci][disabled] { opacity: .6; cursor: wait; }
.checkout-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .checkout-grid { grid-template-columns: 1fr 380px; align-items: start; } .checkout-pregled { order: 2; position: sticky; top: 130px; } }
.pregled-lista { list-style: none; font-size: 14px; }
.pregled-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }

.potvrda { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(12, 20, 14, .55); overflow-y: auto; }
@media (min-width: 600px) { .potvrda { align-items: center; } }
.potvrda-kutija { width: 100%; max-width: 520px; background: var(--paper); border-top: 4px solid var(--forest); padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.potvrda-kutija h2 { font-size: 22px; }
.potvrda-podaci { font-size: 18px; line-height: 1.45; border-top: 1px solid var(--rule); padding-top: 12px; }
.potvrda-podaci b { font-size: 20px; }
.potvrda-stavke { font-size: 15px; border-top: 1px solid var(--rule); padding-top: 12px; }
.potvrda-stavke p { margin: 0 0 4px; display: flex; justify-content: space-between; gap: 12px; }
.potvrda-dugmad { display: flex; flex-direction: column; gap: 10px; }
.potvrda-dugmad .btn { width: 100%; min-height: 52px; }

/* --- Tekstualne i pravne stranice ------------------------------- */
.strana { padding-bottom: 56px; }
.strana .tekst { margin-top: 24px; max-width: 72ch; }
.tekst h2 { font-size: 24px; margin: 32px 0 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.prodavac { list-style: none; margin: 10px 0; }
.prodavac li { padding: 4px 0; }
.napomena { font-size: 14px; color: var(--ink-2); padding: 10px 12px; background: var(--paper-2); border-top: 2px solid var(--gold); }
.azurirano { margin-top: 32px; font-size: 13px; color: var(--ink-3); }
.pdf-lista { list-style: none; margin-top: 16px; }
.pdf-lista li { border-bottom: 1px solid var(--rule); }
.pdf-lista a { display: flex; gap: 12px; align-items: center; padding: 14px 0; text-decoration: none; font-weight: 800; }
.pdf-lista .ic { color: var(--forest); }
.pdf-lista small { display: block; font-weight: 400; color: var(--ink-2); }
.kontakt-mreza { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 900px) { .kontakt-mreza { grid-template-columns: 1fr 1fr; } }
.kontakt-kartica { list-style: none; }
.kontakt-kartica li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.kontakt-kartica .ic { color: var(--forest); margin-top: 3px; }
.kontakt-kartica b { display: block; }
.mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-card); background: var(--paper-2); }
.mesta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 8px; }
.mesta li { padding: 6px 12px; background: var(--forest-tint); border-radius: 999px; font-weight: 700; font-size: 14px; }

/* Kalkulator */
.kalkulator { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 900px) { .kalkulator { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } }
.kalk-rezultat { padding: 20px; background: var(--card); border-top: 3px solid var(--gold); border-radius: var(--radius-card); }
.kalk-rezultat .broj-sadnica { font-family: var(--serif); font-size: 52px; font-weight: 800; color: var(--forest); line-height: 1; }

/* Vodič (post) */
.clanak { max-width: 72ch; }
.clanak-slika img { border-radius: var(--radius-card); margin: 20px 0; width: 100%; }

/* --- Podnožje --------------------------------------------------- */
.podnozje { background: var(--forest-deep); color: #D8DED3; font-size: 15px; margin-top: 0; }
.podnozje a { color: #fff; }
.podnozje a:hover { color: #EAD9A6; }
.podnozje-mreza { display: grid; gap: 28px; padding-top: 44px; padding-bottom: 32px; }
@media (min-width: 800px) { .podnozje-mreza { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.podnozje h2 { font-family: var(--sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #EAD9A6; margin: 0 0 10px; }
.podnozje h2 + ul + h2, .podnozje ul + h2 { margin-top: 20px; }
.podnozje ul { list-style: none; }
.podnozje li { padding: 4px 0; }
.podnozje-opis { margin-top: 12px; max-width: 34ch; }
.podnozje-mreze { display: flex; gap: 10px; margin-top: 14px; }
.mreza-ikona { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; }
.mreza-ikona:hover { background: #EAD9A6; border-color: #EAD9A6; color: var(--forest-deep); }
.podnozje-kontakt li { display: flex; gap: 10px; align-items: flex-start; }
.podnozje-kontakt .ic { margin-top: 4px; color: #EAD9A6; }
.podnozje-dostava { margin-top: 14px; font-size: 14px; }
.podnozje-dno { border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.podnozje-dno .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.brend-svetli { color: #fff; }

/* Traka za kolačiće */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; background: var(--ink); color: #EDEDE6; font-size: 14px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
.cookie-inner { display: flex; flex-direction: column; gap: 10px; }
.cookie-bar a { color: #EAD9A6; }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions .btn { flex: 1; }
.cookie-bar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
@media (min-width: 800px) { .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; } .cookie-actions .btn { flex: none; } }

/* --- Pokret ----------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ===============================================================
   Telefon (≤560 px) — kartice 2 u redu bez opisa, dugmad puna širina
   =============================================================== */
@media (max-width: 560px) {
  /* Između imena i cene: dva kratka podatka (visina/položaj/zima), jedan ispod drugog. */
  .kartica .atributi { flex-direction: column; flex-wrap: nowrap; gap: 3px; font-size: 12.5px; line-height: 1.3; }
  .kartica .atributi li { align-items: flex-start; gap: 5px; }
  .kartica .atributi li:nth-child(n+3) { display: none; }
  .kartica .atributi .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
  .kartica-naslov { font-size: 15px; }
  .cena { font-size: 19px; }
  .btn-kartica { font-size: 13px; gap: 4px; padding: 8px 6px; }
  .btn-kartica .ic { display: none; }
  .sekcija-glava { margin-bottom: 16px; }
  .atributi-veliki { grid-template-columns: 1fr; }
}

/* 05.10.2026 — količinski popust, koliko komada po metru */
.popusti, .po-metru { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.popusti ul { margin: 6px 0 4px; padding-left: 18px; }
.po-metru-polje { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 600; }
.po-metru-polje input { width: 90px; padding: 8px 10px; font: inherit; border: 1px solid var(--rule); border-radius: 8px; }
.po-metru-rez { margin: 4px 0; }
.popust-oznaka { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--forest-tint); color: var(--forest); font-size: 13px; font-weight: 700; }
.paket-veza { margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: var(--forest-tint); font-size: 15px; }

/* Prijava na obaveštenja (podnožje, zahvalnica) */
.prijava { margin-top: 20px; max-width: 420px; }
.prijava-naslov { display: block; font-weight: 700; margin-bottom: 8px; }
.prijava-red { display: flex; gap: 8px; }
.prijava-red input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--rule-strong); border-radius: 10px; }
.prijava-napomena { font-size: 13px; opacity: .8; margin-top: 6px; }
.prijava-poruka { margin-top: 6px; font-weight: 700; }
.prijava-poruka.greska { color: #F2B8A8; }
.podnozje .prijava-red input { background: #fff; color: var(--ink, #1B2419); border-color: transparent; }
.zahvalnica-prijava .prijava-poruka.greska { color: #A33A1F; }
.kat-tabela { margin-top: 36px; }
.kat-tabela h2 { font-size: 24px; margin-bottom: 10px; }
.kat-tabela table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.kat-tabela th, .kat-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.kat-tabela th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.tabela-skrol { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vodici-uz-biljku { margin: 18px 0; } .vodici-uz-biljku ul { list-style: none; padding: 0; margin: 6px 0 0; } .vodici-uz-biljku li { display: flex; gap: 8px; align-items: center; padding: 6px 0; }


/* ===============================================================
   POKRET (06.10.2026) — „rasadnik u jesen"
   Glavni trenutak: naslov početne izrasta reč po reč i zlatni izdanak
   se iscrta. Ostalo samo objašnjava stanje: traka klizi, pločice izlaze
   „iz zemlje", koraci se povezuju linijom, slika kartice prelazi u
   galeriju (View Transitions), cena se zakotrlja pri izboru visine.
   Podrazumevano je sve VIDLJIVO; animacije idu samo uz .js, a
   prefers-reduced-motion ih gasi (pravilo iznad + blok na dnu).
   =============================================================== */

/* --- naslov početne ----------------------------------------------- */
.hero-naslov .rec { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-naslov .rec > span { display: inline-block; }
.js .hero-naslov .rec > span { animation: rec-izrasta .95s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
@keyframes rec-izrasta { from { transform: translateY(108%); } }
.js .hero-slika img, .js .mozaik-foto img { animation: hero-smiri 2.4s var(--ease) both; }
@keyframes hero-smiri { from { transform: scale(1.09); } }
.js .hero-pod { animation: magla .8s var(--ease) .75s both; }
.js .hero-dugmad { animation: magla .8s var(--ease) .9s both; }
@keyframes magla { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } }

.izdanak { display: block; width: clamp(150px, 40vw, 220px); height: auto; margin-top: 14px; overflow: visible; }
.izdanak path { fill: none; stroke: #D9BC6E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.izdanak .izdanak-list { fill: rgba(217, 188, 110, 0); }
.js .izdanak path { animation: crta 1.3s var(--ease) .55s both; }
.js .izdanak .izdanak-list { animation: crta .9s var(--ease) 1.25s both, list-puni .6s ease 1.9s forwards; }
.js .izdanak .izdanak-list:last-child { animation-delay: 1.45s, 2.05s; }
@keyframes crta { from { stroke-dashoffset: 1; } }
@keyframes list-puni { to { fill: rgba(217, 188, 110, .9); } }

/* --- traka činjenica: neprekidno klizi --------------------------- */
.js .cinjenice-okvir { animation: traka 48s linear infinite; }
.cinjenice:hover .cinjenice-okvir, .cinjenice:focus-within .cinjenice-okvir, .cinjenice.stoji .cinjenice-okvir { animation-play-state: paused; }
@keyframes traka { to { transform: translateX(-50%); } }

/* --- pločice kategorija: izlaze „iz zemlje" ----------------------- */
/* Maska je na .plocica, NE na <li> koji posmatra IntersectionObserver —
   Chrome računa clip-path u presek, pa potpuno maskiran element nikad ne
   „uđe" u ekran i ostaje prazan (greška od 06.10.2026). */
.js .plocice .reveal { opacity: 1; transform: none; transition: none; }
.js .plocice .reveal .plocica { clip-path: inset(100% 0 0 0 round var(--radius-card)); transition: clip-path 1s var(--ease); transition-delay: calc(var(--i, 0) * 75ms); }
.js .plocice .reveal.shown .plocica { clip-path: inset(0 0 0 0 round var(--radius-card)); }
.plocica picture { display: block; height: 100%; transition: transform 1.3s var(--ease); }
.js .plocice .reveal:not(.shown) .plocica picture { transform: scale(1.14) translateY(4%); }

/* --- koraci: linija ih povezuje redom ----------------------------- */
.js .koraci li.reveal { border-top-color: var(--rule); }
.js .koraci li.reveal::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--forest); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 220ms + 150ms); }
.js .koraci li.reveal.shown::before { transform: scaleX(1); }
.js .koraci li.reveal .korak-br { transition: background-color .3s, color .3s; transition-delay: calc(var(--i, 0) * 220ms + 500ms); }

/* --- zaglavlje dobija dubinu kad se stranica pomeri --------------- */
.zaglavlje-traka { transition: box-shadow .25s ease; }
.skrol .zaglavlje-traka { box-shadow: 0 8px 22px rgba(21, 53, 32, .28); }

/* --- slika kartice prelazi u galeriju proizvoda (View Transitions) - */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.galerija-glavna picture { view-transition-name: biljka-foto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }
::view-transition-group(biljka-foto) { animation-duration: .5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(biljka-foto), ::view-transition-new(biljka-foto) { height: 100%; object-fit: cover; }

/* --- cena se zakotrlja pri izboru visine -------------------------- */
.cena-kotrlja { display: inline-block; animation: kotrlja .32s var(--ease); }
@keyframes kotrlja { from { opacity: 0; transform: translateY(.45em); filter: blur(2px); } }

/* --- akordeoni se otvaraju glatko (gde pregledač ume) -------------- */
.akordeon { interpolate-size: allow-keywords; }
.akordeon::details-content { block-size: 0; overflow: hidden; transition: block-size .32s var(--ease), content-visibility .32s allow-discrete; }
.akordeon[open]::details-content { block-size: auto; }

/* --- pritisak dugmeta -------------------------------------------- */
.btn { transition: background .15s, color .15s, border-color .15s, transform .12s ease; }
.btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .cinjenice { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scrollbar-width: none; }
  .cinjenice-niz[aria-hidden="true"] { display: none; }
  .js .plocice .reveal .plocica { clip-path: none; }
  .js .koraci li.reveal { border-top-color: var(--forest); }
  .js .koraci li.reveal::before { display: none; }
}


/* ===============================================================
   OSVEŽENJE 06.10.2026 — svetao prvi ekran, pretraga, mekši oblici
   =============================================================== */

/* --- prvi ekran: tekst + pretraga levo, mozaik sa sadnicama desno --- */
.hero2 { position: relative; overflow: hidden; padding: 28px 0 40px;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(122, 143, 106, .22), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(184, 150, 62, .12), transparent 70%),
    var(--paper); }
.hero2-mreza { display: grid; gap: 30px; align-items: center; }
.hero2 .hero-naslov { color: var(--ink); font-size: clamp(36px, 9vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; max-width: 13ch; text-wrap: balance; }
.hero2 .izdanak path { stroke: var(--gold); }
.hero2 .izdanak .izdanak-list { fill: rgba(184, 150, 62, 0); }
.hero2 .hero-pod { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.hero2 .hero-dugmad { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.hero2 .hero-dugmad .btn { width: 100%; }
.js .hero2 .izdanak .izdanak-list { animation: crta .9s var(--ease) 1.25s both, list-puni-zlatno .6s ease 1.9s forwards; }
.js .hero2 .izdanak .izdanak-list:last-child { animation-delay: 1.45s, 2.05s; }
@keyframes list-puni-zlatno { to { fill: rgba(184, 150, 62, .95); } }

.hero-pretraga { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 22px; max-width: 560px;
  padding: 6px; background: var(--card); border: 1.5px solid var(--rule); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(21, 53, 32, .10); transition: border-color .2s, box-shadow .2s; }
.hero-pretraga:focus-within { border-color: var(--forest); box-shadow: 0 12px 36px rgba(21, 53, 32, .16); }
.hero-pretraga-ikona { display: inline-flex; padding-left: 12px; color: var(--moss); }
.hero-pretraga input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.hero-pretraga input::placeholder { color: var(--ink-3); }
.hero-pretraga input::-webkit-search-cancel-button { display: none; }
.hero-pretraga .btn { border-radius: 999px; min-height: 46px; padding: 0 22px; }
.hero-popularno { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.hero-popularno > span { color: var(--ink-3); font-weight: 700; margin-right: 2px; }
.hero-popularno a { padding: 6px 12px; border-radius: 999px; background: var(--forest-tint); color: var(--forest-deep); font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.hero-popularno a:hover { background: var(--forest); color: #fff; }

.hero2-mozaik { position: relative; }
.mozaik-foto { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: var(--paper-2); box-shadow: 0 24px 60px rgba(21, 53, 32, .18); }
.mozaik-foto picture, .mozaik-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mozaik-foto figcaption { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: rgba(250, 247, 240, .92); color: var(--forest-deep); font-size: 13px; font-weight: 800; }
.mozaik-foto figcaption .ic { color: var(--moss); }
.lebdi { position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; max-width: 250px; border-radius: 18px; background: var(--card);
  color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px rgba(21, 53, 32, .22); transition: box-shadow .25s; }
.lebdi img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.lebdi > span { display: flex; flex-direction: column; min-width: 0; }
.lebdi-ime { font-weight: 800; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lebdi-cena { color: var(--gold-deep); font-size: 17px; }
.lebdi:hover { box-shadow: 0 24px 50px rgba(21, 53, 32, .30); }
.lebdi-1 { left: 12px; bottom: 12px; }
.lebdi-2 { display: none; }
.js .lebdi { animation: lebdi 6s ease-in-out infinite alternate; }
.js .lebdi-2 { animation-delay: -3s; }
.stoji .lebdi { animation-play-state: paused; }
@keyframes lebdi { from { transform: translateY(0); } to { transform: translateY(-8px); } }

@media (min-width: 640px) {
  .hero2 .hero-dugmad { flex-direction: row; }
  .hero2 .hero-dugmad .btn { width: auto; }
  .lebdi-2 { display: flex; right: 12px; top: 64px; }
}
@media (min-width: 1000px) {
  .hero2 { padding: 56px 0 72px; }
  .hero2-mreza { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .mozaik-foto { aspect-ratio: 4 / 5; }
  .lebdi-1 { left: -36px; bottom: 14%; }
  .lebdi-2 { right: -24px; top: 12%; }
}

/* --- predlozi pretrage (zaglavlje i prvi ekran) -------------------- */
.predlozi { position: absolute; z-index: 120; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: 18px; background: var(--card);
  box-shadow: 0 24px 60px rgba(21, 53, 32, .22); border: 1px solid var(--rule); text-align: left; color: var(--ink); }
.predlozi a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.predlozi a:hover, .predlozi a[aria-selected="true"] { background: var(--forest-tint); }
.predlozi img, .predlozi .ph-mala { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--paper-2); }
.predlozi .p-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.predlozi .p-ime { font-weight: 800; font-size: 15px; line-height: 1.25; }
.predlozi .p-pod { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.predlozi .p-cena { font-weight: 800; color: var(--gold-deep); white-space: nowrap; font-size: 14px; }
.predlozi .p-sve { justify-content: center; font-weight: 800; color: var(--forest); border-top: 1px solid var(--rule); border-radius: 0 0 12px 12px; margin-top: 4px; }
.predlozi .p-prazno { padding: 12px; color: var(--ink-2); font-size: 14px; }

/* --- pretraga u zaglavlju: pilula na tamnozelenoj traci ------------- */
.zaglavlje-red .pretraga input { height: 42px; padding: 0 46px 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .22); transition: background .2s, border-color .2s, color .2s; }
.zaglavlje-red .pretraga input::placeholder { color: rgba(255, 255, 255, .75); }
.zaglavlje-red .pretraga input:focus { background: #fff; color: var(--ink); border-color: #fff; outline: none; }
.zaglavlje-red .pretraga input:focus::placeholder { color: var(--ink-3); }
.zaglavlje-red .pretraga button { color: rgba(255, 255, 255, .85); background: transparent; border-radius: 999px; }
.zaglavlje-red .pretraga:focus-within button { color: var(--forest); }
.pretraga-meni input { border-radius: 999px; }

/* --- „Posetite rasadnik" ---------------------------------------- */
.poseta { display: grid; gap: 28px; align-items: center; }
.poseta-fotke { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 5 / 4; }
.poseta-foto { border-radius: 20px; overflow: hidden; background: var(--paper-2); }
.poseta-foto picture, .poseta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poseta-foto-1 { grid-row: span 2; }
.poseta-tekst h2 { font-size: clamp(28px, 6vw, 42px); line-height: 1.08; max-width: 16ch; }
.poseta-podaci { display: grid; margin: 20px 0 22px; }
.poseta-podaci > div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
.poseta-podaci dt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.poseta-podaci dt .ic { color: var(--moss); }
.poseta-podaci dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.poseta-dugmad { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .poseta { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* --- mekši oblici i dubina ---------------------------------------- */
.kartica-foto { transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
@media (hover: hover) { .kartica:hover .kartica-foto { box-shadow: 0 18px 40px rgba(21, 53, 32, .16); transform: translateY(-3px); } }
.plocica { box-shadow: 0 10px 28px rgba(21, 53, 32, .10); }
.btn-gold, .btn-primary { box-shadow: 0 6px 16px rgba(21, 53, 32, .14); }
@media (prefers-reduced-motion: reduce) { .js .lebdi { animation: none; } }
.hero2-tekst { position: relative; z-index: 3; }
.hero-pretraga:focus-within { z-index: 10; }
@media (min-width: 1100px) { .plocice-9 li:first-child .plocica { height: 100%; aspect-ratio: auto; } .plocice-9 li:first-child .plocica-tekst b { font-size: 30px; } }

/* 12.10.2026 — paketi od više biljaka (sadržaj, poređenje sa pojedinačnom cenom), kalkulator */
.paket-sadrzaj { padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.paket-sadrzaj ul { list-style: none; margin: 8px 0 6px; }
.paket-sadrzaj li { display: flex; align-items: baseline; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.paket-sadrzaj li:last-child { border-bottom: 0; }
.paket-sadrzaj li a { flex: 1; min-width: 0; color: var(--ink); }
.paket-kom { font-weight: 800; color: var(--forest); min-width: 36px; }
.paket-cena { color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.paket-poredjenje { margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--gold); font-size: 15px; }
.paket-usteda { color: var(--forest); }
.paket-stavka { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.kalk-paket { padding: 12px 14px; border-radius: 10px; background: var(--forest-tint); }
.kalk-paket .btn { width: 100%; margin-top: 6px; white-space: normal; }