/* ==========================================================================
KLAS — Poljoprivredna apoteka
Varijanta 11: KATALOG — profesionalni radni alat
Prazninu koju popunjava: svih deset prethodnih su izlozi. Nijedna nije
napravljena za ratara koji tačno zna šta hoće i naručuje četrdeset stavki.
Ovde stranica nije brošura nego alat: gustina umesto vazduha, podatak
umesto atmosfere, ništa što ne nosi informaciju. Bez senki, bez zaobljenja
preko 6px, bez ijedne dekoracije. Brojevi su u mono fontu da se poravnaju
i uporede u koloni.
========================================================================== */
:root{
--accent:#1256C4;
--accent-600:#0E44A0;
--accent-50:#EDF3FD;
--accent-100:#D6E4FA;
--ok:#177245;
--ok-50:#EAF5EF;
--warn:#B45309;
--sale:#C81E1E;
--sale-50:#FDECEC;
--amber:#D97706;
--ink:#161B22;
--ink-2:#242C36;
--body:#4A5560;
--mute:#7A8794;
--bg:#F2F4F6;
--panel:#FFFFFF;
--line:#DCE1E7;
--line-2:#EBEEF1;
--row:#F7F9FA;
--r-xs:3px;
--r-sm:4px;
--r:6px;
--wrap:1440px;
--ease:cubic-bezier(.3,.7,.4,1);
--f-display:'Inter Tight',system-ui,sans-serif;
--f-body:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--f-mono:'Roboto Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--f-body);
font-size:14px; line-height:1.5; color:var(--body);
background:var(--bg); overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
h1,h2,h3,h4{
font-family:var(--f-display);
color:var(--ink); margin:0; line-height:1.18;
letter-spacing:-.02em; font-weight:600;
}
h1 em,h2 em,h3 em{font-style:normal; color:var(--accent); font-weight:600}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--accent-100)}
:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-sm)}
.skip:focus{left:8px; top:8px}
/* ---------- ikonice ---------- */
.ic{
width:18px; height:18px; flex:none;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.ic--sm{width:13px; height:13px}
#i-star{fill:currentColor; stroke:none}
/* ==========================================================================
DUGMAD — mala, pravougaona, bez ukrasa
========================================================================== */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:9px 16px; border-radius:var(--r-sm);
font-family:var(--f-display); font-weight:600; font-size:13.5px;
border:1px solid transparent; white-space:nowrap;
transition:background .15s, color .15s, border-color .15s;
}
.btn--lg{padding:12px 22px; font-size:14.5px}
.btn--full{width:100%}
.btn--green{background:var(--accent); color:#fff}
.btn--green:hover{background:var(--accent-600)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:var(--ink-2)}
.btn--white{background:#fff; color:var(--ink); border-color:var(--line)}
.btn--white:hover{background:var(--row)}
.btn--outline{border-color:var(--line); color:var(--ink); background:#fff}
.btn--outline:hover{border-color:var(--accent); color:var(--accent)}
.btn--ghost{border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.08)}
.btn--ghost:hover{background:#fff; color:var(--ink); border-color:#fff}
.iconbtn{
width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center;
color:var(--ink); transition:background .15s;
}
.iconbtn:hover{background:var(--row)}
.link{
display:inline-flex; align-items:center; gap:6px;
font-weight:600; font-size:13px; color:var(--accent);
padding:7px 10px; border-radius:var(--r-sm);
transition:background .15s;
}
.link:hover{background:var(--accent-50)}
/* ---------- oznake: male, čitljive, bez zaobljenja ---------- */
.tag{
display:inline-flex; align-items:center; gap:4px;
font-family:var(--f-mono); font-size:10.5px; font-weight:500;
letter-spacing:.02em; padding:3px 6px; border-radius:var(--r-xs);
}
.tag--green{background:var(--ok-50); color:var(--ok); border:1px solid rgba(23,114,69,.25)}
.tag--red{background:var(--sale); color:#fff}
.tag--dark{background:var(--ink); color:#fff}
.tag--white{background:#fff; color:var(--ink); border:1px solid var(--line)}
.eyebrow{
display:inline-flex; align-items:center; gap:6px;
font-family:var(--f-mono); font-size:10.5px; font-weight:500;
letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
margin-bottom:6px;
}
.eyebrow--green{color:#8FB4E8}
/* ==========================================================================
TOP TRAKA — statusna linija, kao u aplikaciji
========================================================================== */
.topbar{background:var(--ink); color:#A6B1BD; font-size:12px}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:32px}
.topbar__ticker{position:relative; flex:1; min-width:0; height:32px}
.tick{
position:absolute; inset:0; display:flex; align-items:center; gap:7px;
opacity:0; transition:opacity .3s; pointer-events:none; white-space:nowrap;
}
.tick.is-on{opacity:1}
.tick b{color:#fff; font-family:var(--f-mono); font-weight:500}
.tick .ic{width:14px; height:14px; color:#6F9CE0}
.topbar__links{display:flex; align-items:center; gap:18px}
.topbar__links a{display:flex; align-items:center; gap:5px; transition:color .15s}
.topbar__links a:hover{color:#fff}
.topbar__links .ic{width:13px; height:13px}
.topbar__tel{color:#fff; font-family:var(--f-mono); font-weight:500}
/* ==========================================================================
HEDER — jedan red, pretraga je glavni alat
========================================================================== */
.hdr{
position:sticky; top:0; z-index:60;
background:var(--panel); border-bottom:1px solid var(--line);
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__main{display:flex; align-items:center; gap:16px; padding-block:10px}
.hdr__burger{display:none; color:var(--ink)}
.brand img{height:30px; width:auto}
/* ---------- pretraga: najveći element na stranici ---------- */
.search{
position:relative; flex:1; max-width:none;
display:flex; align-items:stretch;
background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
transition:border-color .15s, box-shadow .15s;
}
.search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50)}
.search input{flex:1; min-width:0; border:0; background:none; padding:9px 12px; font-size:14px}
.search input:focus{outline:none}
.search input::placeholder{color:var(--mute)}
.search button[type=submit]{
display:flex; align-items:center; gap:6px;
background:var(--accent); color:#fff; border-radius:0 3px 3px 0;
padding:0 16px; font-family:var(--f-display); font-weight:600; font-size:13.5px;
transition:background .15s;
}
.search button[type=submit]:hover{background:var(--accent-600)}
.sugg{
position:absolute; top:calc(100% + 4px); left:-1px; right:-1px; z-index:20;
background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
box-shadow:0 8px 24px -8px rgba(22,27,34,.25); padding:4px; max-height:400px; overflow:auto;
}
.sugg__it{
display:flex; align-items:center; gap:10px; width:100%;
padding:7px 8px; border-radius:var(--r-xs); text-align:left; transition:background .12s;
}
.sugg__it:hover,.sugg__it.is-on{background:var(--accent-50)}
.sugg__it img{width:34px; height:34px; border-radius:var(--r-xs); object-fit:cover; flex:none; border:1px solid var(--line)}
.sugg__it b{display:block; font-size:13.5px; color:var(--ink); font-weight:500}
.sugg__it small{color:var(--mute); font-size:11.5px; font-family:var(--f-mono)}
.sugg__it i{margin-left:auto; font-style:normal; font-family:var(--f-mono); font-weight:500; color:var(--ink); font-size:13px}
.sugg__none{padding:14px; text-align:center; color:var(--mute); font-size:13px}
/* ---------- akcije ---------- */
.hdr__acts{display:flex; align-items:center; gap:2px; margin-left:auto}
.act{
position:relative; display:flex; align-items:center; gap:8px;
padding:6px 9px; border-radius:var(--r-sm); color:var(--ink);
transition:background .15s;
}
.act:hover{background:var(--row)}
.act--icon{padding:8px}
.act__txt{display:flex; flex-direction:column; line-height:1.2}
.act__txt small{font-size:10.5px; color:var(--mute)}
.act__txt b{font-family:var(--f-mono); font-size:13px; font-weight:500}
.act--phone .ic{color:var(--mute)}
.act--cart{background:var(--ink); color:#fff; padding:7px 14px 7px 11px}
.act--cart:hover{background:var(--ink-2)}
.act--cart .act__txt small{color:#9AA6B2}
.dot{
position:absolute; top:-1px; left:20px;
min-width:16px; height:16px; padding:0 4px; border-radius:8px;
background:var(--sale); color:#fff; font-family:var(--f-mono);
font-size:10px; font-weight:500; display:grid; place-items:center;
border:1.5px solid var(--panel);
}
.act--icon .dot{left:17px; top:1px}
/* ---------- navigacija ---------- */
.nav{background:var(--panel); border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:stretch; gap:0; height:38px}
.nav__all{
display:flex; align-items:center; gap:7px; cursor:pointer;
background:var(--row); border-right:1px solid var(--line); color:var(--ink);
padding:0 14px; font-weight:600; font-size:13px;
transition:background .15s;
}
.nav__all:hover,.nav__all.is-on{background:var(--accent-50); color:var(--accent)}
.nav__all .ic--sm{transition:transform .2s}
.nav__all.is-on .ic--sm{transform:rotate(90deg)}
.nav__list{display:flex; align-items:stretch; flex:1}
/* li mora da bude flex da bi popunio punu visinu trake — inače
tekst stoji zalepljen za gornju ivicu, jer nema vertikalni padding */
.nav__list li{display:flex}
.nav__list a{
display:flex; align-items:center; padding:0 13px;
font-size:13.5px; font-weight:500; color:var(--body);
border-bottom:2px solid transparent;
transition:color .15s, border-color .15s;
}
.nav__list a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.nav__deal{
display:flex; align-items:center; gap:6px; padding:0 13px;
color:var(--sale); font-weight:600; font-size:13px;
}
.nav__deal .ic{width:14px; height:14px}
/* ---------- mega meni ---------- */
.mega{
position:absolute; left:0; right:0; top:100%;
background:var(--panel); border-bottom:1px solid var(--line);
box-shadow:0 12px 26px -12px rgba(22,27,34,.25);
}
.mega__in{display:grid; grid-template-columns:repeat(5,1fr) 1fr; gap:0; padding-block:20px}
.mega__col{padding-inline:18px; border-right:1px solid var(--line-2)}
.mega__col:first-child{padding-left:0}
.mega__col h4{
font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--mute); margin-bottom:8px; font-weight:500;
}
.mega__col a{display:block; padding:4px 0; font-size:13.5px; transition:color .15s}
.mega__col a:hover{color:var(--accent)}
.mega__promo{position:relative; overflow:hidden; min-height:150px; display:flex; align-items:flex-end; margin-left:18px; border-radius:var(--r-sm)}
.mega__promo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mega__promo::after{content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(22,27,34,.9),transparent 70%)}
.mega__promo>div{position:relative; z-index:1; padding:14px; color:#fff}
.mega__promo strong{display:block; font-size:15px; font-weight:600; margin:6px 0 3px}
.mega__promo em{display:flex; align-items:center; gap:5px; font-style:normal; font-size:12px; font-weight:600; color:#8FB4E8}
/* ==========================================================================
HERO — sažet na traku: jedna ponuda, jedan red podataka
========================================================================== */
.hero{position:relative; background:var(--ink); overflow:hidden; border-bottom:1px solid var(--line)}
.hero__slides{display:grid}
.slide{grid-area:1 / 1; position:relative; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s}
.slide.is-on{opacity:1; visibility:visible}
.hero__bg{position:absolute; inset:0; overflow:hidden}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 55%}
.hero__bg::after{
content:''; position:absolute; inset:0;
background:linear-gradient(94deg, rgba(18,22,28,.97) 0%, rgba(18,22,28,.86) 42%, rgba(18,22,28,.35) 78%);
}
.hero__in{position:relative; z-index:4; padding-block:34px 40px}
.hero__copy{max-width:620px}
.pill{
display:inline-flex; align-items:center; gap:7px;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
color:#fff; font-family:var(--f-mono); font-size:10.5px; font-weight:500;
letter-spacing:.06em; text-transform:uppercase;
padding:4px 10px; border-radius:var(--r-xs);
}
.blip{width:6px; height:6px; border-radius:50%; background:#5B9BEF}
.hero__copy h1{color:#fff; font-size:clamp(1.7rem,2.6vw,2.3rem); margin:12px 0 8px; letter-spacing:-.025em}
.hero__copy h1 em{color:#7FB0F3}
.hero__copy p{color:#A6B1BD; font-size:14.5px; max-width:60ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 16px}
/* dokazi kao red podataka, ne kao slogani */
.hero__trust{display:flex; flex-wrap:wrap; gap:0; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm); width:fit-content; max-width:100%}
.hero__trust li{
display:flex; align-items:center; gap:7px; color:#D3DAE1;
font-size:12.5px; padding:7px 14px; border-right:1px solid rgba(255,255,255,.16);
}
.hero__trust li:last-child{border-right:0}
.hero__trust .ic{width:14px; height:14px; color:#5B9BEF; stroke-width:2.4}
.hdots{position:absolute; left:0; right:0; bottom:12px; z-index:5; display:flex; justify-content:center; gap:4px}
.hdot{position:relative; overflow:hidden; width:24px; height:3px; background:rgba(255,255,255,.25); transition:background .2s}
.hdot.is-on{background:rgba(255,255,255,.2)}
.hdot__bar{position:absolute; inset:0; display:block; overflow:hidden}
.hdot__bar::before{content:''; display:block; height:100%; width:100%; background:#5B9BEF; transform:scaleX(0); transform-origin:left}
.hdot.is-on .hdot__bar::before{animation:hprog var(--hero-dur,7s) linear forwards}
.hero.is-paused .hdot.is-on .hdot__bar::before{animation-play-state:paused}
@keyframes hprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.harrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:5;
width:32px; height:32px; border-radius:var(--r-sm);
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
color:#fff; display:grid; place-items:center; transition:background .15s;
}
.harrow:hover{background:rgba(255,255,255,.24)}
.harrow--prev{left:12px}
.harrow--prev .ic{transform:rotate(180deg)}
.harrow--next{right:12px}
@media (max-width:900px){.harrow{display:none}}
/* ---------- odbrojavanje ---------- */
.cd{display:flex; gap:4px}
.cd>div{background:#fff; border:1px solid var(--line); border-radius:var(--r-xs); padding:5px 9px; text-align:center; min-width:44px}
.cd b{display:block; font-family:var(--f-mono); font-size:15px; font-weight:500; color:var(--ink)}
.cd small{font-family:var(--f-mono); font-size:9.5px; text-transform:uppercase; color:var(--mute)}
.cd--sm>div{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18)}
.cd--sm b{color:#fff}
.cd--sm small{color:#9AA6B2}
/* ==========================================================================
USP — jedan red, hairline podeone linije
========================================================================== */
.usp{background:var(--panel); border-bottom:1px solid var(--line)}
.usp__in{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0}
.usp__it{display:flex; align-items:center; gap:10px; padding:12px 18px; border-right:1px solid var(--line-2)}
.usp__it:first-child{padding-left:0}
.usp__it:last-child{border-right:0}
.usp__it .ic{width:17px; height:17px; color:var(--accent); flex:none}
.usp__it b{display:block; font-size:13px; color:var(--ink); font-weight:600}
.usp__it small{font-size:12px; color:var(--mute)}
/* ==========================================================================
SEKCIJE — uske, sa hairline zaglavljem
========================================================================== */
.sec{padding-block:34px}
.sec--sand{background:var(--panel); border-block:1px solid var(--line)}
.sec--dark{background:var(--ink); color:#A6B1BD}
.sec--dark h2{color:#fff}
.sec--dark h2 em{color:#7FB0F3}
.sec__hd{
display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.sec--dark .sec__hd{border-bottom-color:rgba(255,255,255,.14)}
.sec__hd h2{font-size:1.35rem; font-weight:600}
.sec__hd--center{justify-content:center; text-align:center}
.sec__hd-r{display:flex; align-items:center; gap:12px}
.sec__more{display:flex; justify-content:center; margin-top:20px}
.carousel-nav{display:flex; gap:4px}
.cbtn{
width:32px; height:32px; border-radius:var(--r-sm);
border:1px solid var(--line); color:var(--ink); background:#fff;
display:grid; place-items:center; transition:all .15s;
}
.cbtn[data-scroll="-1"] .ic{transform:rotate(180deg)}
.cbtn:hover{border-color:var(--accent); color:var(--accent)}
.sec--dark .cbtn{background:transparent; border-color:rgba(255,255,255,.2); color:#fff}
.sec--dark .cbtn:hover{background:rgba(255,255,255,.12)}
/* ---------- kategorije: kompaktna mreža koja se popuni bez rupa ---------- */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.cat{
position:relative; overflow:hidden; border-radius:var(--r-sm);
min-height:0; display:flex; flex-direction:column;
background:var(--panel); border:1px solid var(--line);
transition:border-color .15s;
}
.cat:hover{border-color:var(--accent)}
.cat img{position:static; width:100%; height:88px; object-fit:cover; flex:none}
.cat::after{display:none}
.cat__b{position:relative; z-index:1; padding:8px 10px 10px; width:100%}
.cat__b h3{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:1px; line-height:1.25}
.cat__b p{font-family:var(--f-mono); font-size:11px; color:var(--mute)}
.cat--xl{grid-column:span 2; grid-row:span 2}
.cat--xl img{height:100%; flex:1; min-height:120px}
.cat--xl .cat__b{padding:12px 14px 14px}
.cat--xl .cat__b h3{font-size:1.05rem; margin:6px 0 3px}
.cat--xl .cat__b p{font-family:var(--f-body); font-size:12.5px; color:var(--body)}
.cat--xl em{
display:inline-flex; align-items:center; gap:6px; margin-top:10px;
font-style:normal; font-weight:600; font-size:12.5px; color:var(--accent);
}
.cat--xl .tag{margin-bottom:2px}
/* ==========================================================================
KARTICA PROIZVODA — gusta, sa šifrom, poravnatim cenama i statusom zalihe
========================================================================== */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.rail{
display:grid; grid-auto-flow:column; grid-auto-columns:minmax(228px,1fr);
gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
padding:0 0 8px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.card{
position:relative; display:flex; flex-direction:column;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.card:hover{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.card__img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--row); border-bottom:1px solid var(--line-2)}
.card__img img{width:100%; height:100%; object-fit:cover}
.card__badges{position:absolute; top:6px; left:6px; display:flex; gap:4px; z-index:2}
.card__wish{
position:absolute; top:6px; right:6px; z-index:2;
width:26px; height:26px; border-radius:var(--r-xs);
background:rgba(255,255,255,.94); border:1px solid var(--line);
display:grid; place-items:center; color:var(--body); transition:all .15s;
}
.card__wish .ic{width:14px; height:14px}
.card__wish:hover{color:var(--sale); border-color:var(--sale)}
.card__wish.is-on{background:var(--sale); color:#fff; border-color:var(--sale)}
.card__wish.is-on .ic{fill:currentColor}
.card__b{padding:9px 10px 10px; display:flex; flex-direction:column; flex:1; gap:4px}
.card__cat{
font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
color:var(--mute);
}
.card__t{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.32}
.card__rate{display:flex; align-items:center; gap:4px; font-family:var(--f-mono); font-size:11px; color:var(--mute)}
.card__rate .ic{width:11px; height:11px; color:var(--amber)}
.card__rate b{color:var(--ink); font-weight:500}
.card__stock{
display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500;
color:var(--ok); background:var(--ok-50); padding:3px 7px; border-radius:var(--r-xs);
width:fit-content;
}
.card__stock i{width:5px; height:5px; border-radius:50%; background:var(--ok); flex:none}
.card__stock.is-low{color:var(--warn); background:#FEF4E7}
.card__stock.is-low i{background:var(--warn)}
.card__foot{margin-top:auto; padding-top:9px; display:flex; flex-direction:column; gap:7px}
.card__price{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 7px; line-height:1.2}
.card__price b{font-family:var(--f-mono); font-size:1.05rem; font-weight:700; color:var(--ink); order:1}
.card__price s{font-family:var(--f-mono); font-size:11.5px; color:var(--mute); order:2}
.card__price small{font-family:var(--f-mono); font-size:10px; color:var(--mute); order:3; flex-basis:100%}
.card__add{
display:flex; align-items:center; justify-content:center; gap:6px;
width:100%; height:32px; border-radius:var(--r-sm);
background:var(--accent); color:#fff; font-family:var(--f-display);
font-size:13px; font-weight:600; transition:background .15s;
}
.card__add .ic{width:15px; height:15px}
.card__add::after{content:'U korpu'}
.card__add:hover{background:var(--accent-600)}
.card__add.is-done{background:var(--ok)}
.card__add.is-done::after{content:'Dodato'}
/* ---------- tabovi: segmenti ---------- */
.tabs{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:#fff}
.tab{
padding:7px 14px; font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--body);
border-right:1px solid var(--line); transition:all .15s;
}
.tab:last-child{border-right:0}
.tab:hover{background:var(--row)}
.tab.is-on{background:var(--accent); color:#fff}
/* ---------- promo ---------- */
.promos{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.promo{
position:relative; overflow:hidden; border-radius:var(--r-sm);
min-height:180px; display:flex; align-items:center; border:1px solid var(--line);
}
.promo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.promo>div{position:relative; z-index:1; padding:22px; max-width:340px}
.promo h3{font-size:1.3rem; margin:8px 0 6px; font-weight:600}
.promo p{font-size:13px; margin-bottom:14px}
.promo--a::after{content:''; position:absolute; inset:0; background:linear-gradient(94deg,rgba(22,27,34,.95) 26%,rgba(22,27,34,.4) 84%)}
.promo--a h3{color:#fff} .promo--a p{color:#A6B1BD}
.promo--b::after{content:''; position:absolute; inset:0; background:linear-gradient(94deg,rgba(255,255,255,.97) 26%,rgba(255,255,255,.55) 84%)}
/* ---------- agronom ---------- */
.agro{background:var(--panel); border-block:1px solid var(--line)}
.agro__in{display:grid; grid-template-columns:.8fr 1fr; gap:32px; align-items:center; padding-block:36px}
.agro__img{position:relative; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:16/10; border:1px solid var(--line)}
.agro__img img{width:100%; height:100%; object-fit:cover}
.agro__copy h2{font-size:1.5rem; margin-bottom:8px}
.agro__copy>p{font-size:14px; max-width:60ch}
.agro__list{margin:14px 0 18px; display:grid; gap:6px}
.agro__list li{display:flex; align-items:center; gap:8px; color:var(--ink); font-size:13.5px}
.agro__list .ic{width:15px; height:15px; color:var(--ok); stroke-width:2.4}
.agro__form{display:flex; gap:6px; max-width:400px}
.agro__form input{
flex:1; min-width:0; background:#fff; border:1px solid var(--line);
border-radius:var(--r-sm); padding:9px 12px; font-size:14px; transition:border-color .15s;
}
.agro__form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50)}
.agro__form input.is-bad{border-color:var(--sale)}
.agro__note{display:block; margin-top:8px; font-size:12px; color:var(--mute)}
/* ---------- brendovi ---------- */
.brands{padding-block:22px; background:var(--bg)}
.brands__t{
text-align:center; font-family:var(--f-mono); font-size:10.5px;
letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:12px;
}
.brands__row{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.brands__row span{
font-size:12.5px; font-weight:500; color:var(--body);
padding:5px 12px; border:1px solid var(--line); border-radius:var(--r-xs); background:#fff;
}
/* ---------- blog ---------- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.post{
display:flex; flex-direction:column; gap:5px;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px;
transition:border-color .15s;
}
.post:hover{border-color:var(--accent)}
.post__img{position:relative; aspect-ratio:16/9; border-radius:var(--r-xs); overflow:hidden; margin-bottom:3px}
.post__img img{width:100%; height:100%; object-fit:cover}
.post__img .tag{position:absolute; top:7px; left:7px}
.post time{font-family:var(--f-mono); font-size:10.5px; color:var(--mute)}
.post h3{font-size:14px; font-weight:600; line-height:1.32}
.post p{font-size:12.5px}
.post em{
display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:6px;
font-style:normal; font-weight:600; font-size:12.5px; color:var(--accent);
}
/* ---------- utisci ---------- */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.rev{
margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
padding:16px; display:flex; flex-direction:column; gap:9px;
}
.stars{display:flex; gap:1px; color:var(--amber)}
.stars .ic{width:13px; height:13px}
.rev blockquote{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.rev figcaption{display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:9px; border-top:1px solid var(--line-2)}
.ava{
width:32px; height:32px; border-radius:var(--r-xs); flex:none; display:grid; place-items:center;
background:var(--a,var(--accent)); color:#fff; font-family:var(--f-mono); font-weight:500; font-size:12px;
}
.rev figcaption b{display:block; font-size:13px; color:var(--ink)}
.rev figcaption small{font-family:var(--f-mono); font-size:11px; color:var(--mute)}
/* ---------- newsletter ---------- */
.news{background:var(--bg); padding-block:0}
.news__in{
display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:center;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
padding:22px 24px; margin-block:0 34px;
}
.news h2{font-size:1.2rem; margin-bottom:4px}
.news p{font-size:13px}
.news__form{position:relative; display:flex; gap:6px}
.news__form input{
flex:1; min-width:0; border:1px solid var(--line); background:#fff;
border-radius:var(--r-sm); padding:9px 12px; font-size:14px; transition:border-color .15s;
}
.news__form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50)}
.news__form input.is-bad{border-color:var(--sale)}
.news__msg{position:absolute; top:calc(100% + 5px); left:2px; font-size:12px; font-weight:600; color:var(--ok)}
/* ==========================================================================
FUTER
========================================================================== */
.ftr{background:var(--ink); color:#A6B1BD; padding-top:32px}
.ftr__top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; padding-bottom:24px}
.ftr__brand img{height:28px; width:auto; margin-bottom:12px}
.ftr__brand p{font-size:12.5px; max-width:40ch; margin-bottom:14px}
.ftr__contact{display:grid; gap:6px}
.ftr__contact a,.ftr__contact span{display:flex; align-items:center; gap:8px; font-size:13px}
.ftr__contact a{color:#fff}
.ftr__contact a:hover{color:#7FB0F3}
.ftr__contact .ic{width:14px; height:14px; color:#6F9CE0}
.ftr__col h4{
color:#fff; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
text-transform:uppercase; margin-bottom:9px; font-weight:500;
}
.ftr__col a,.ftr__col span{display:block; padding:3px 0; font-size:13px; transition:color .15s}
.ftr__col a:hover{color:#fff}
.ftr__wa{
display:inline-flex !important; align-items:center; gap:6px; margin-top:10px;
background:rgba(255,255,255,.1); color:#fff !important;
padding:7px 12px !important; border-radius:var(--r-sm); font-size:12.5px !important; font-weight:600;
}
.ftr__wa:hover{background:rgba(255,255,255,.18)}
.ftr__bot{
display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.12); padding-block:14px; font-size:12px;
}
.pay{display:flex; gap:5px}
.pay span{background:rgba(255,255,255,.09); padding:4px 9px; border-radius:var(--r-xs); font-family:var(--f-mono); font-size:10.5px}
/* ==========================================================================
KORPA — kao red u tabeli
========================================================================== */
.ovl{position:fixed; inset:0; background:rgba(22,27,34,.5); z-index:80}
.drawer{
position:fixed; top:0; right:0; bottom:0; width:min(400px,100%); z-index:90;
background:var(--panel); display:flex; flex-direction:column;
border-left:1px solid var(--line); box-shadow:-8px 0 30px -12px rgba(22,27,34,.3);
}
.drawer__hd{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--row)}
.drawer__hd h3{font-size:15px}
.drawer__hd span{font-family:var(--f-mono); color:var(--mute); font-size:13px}
.drawer__body{flex:1; overflow-y:auto; padding:0 16px}
.drawer__empty{text-align:center; padding:48px 16px; color:var(--mute)}
.drawer__empty .ic{width:36px; height:36px; color:var(--line); margin:0 auto 12px}
.drawer__empty b{display:block; color:var(--ink); font-size:14px; margin-bottom:4px}
.ci{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.ci img{width:52px; height:52px; border-radius:var(--r-xs); object-fit:cover; flex:none; border:1px solid var(--line)}
.ci__b{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.ci__t{font-size:13px; font-weight:600; color:var(--ink); line-height:1.3}
.ci__p{font-family:var(--f-mono); font-size:11.5px; color:var(--mute)}
.ci__r{display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:8px}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-xs); overflow:hidden}
.qty button{width:24px; height:24px; display:grid; place-items:center; color:var(--ink); font-size:13px; transition:background .15s}
.qty button:hover{background:var(--row)}
.qty b{min-width:26px; text-align:center; font-family:var(--f-mono); font-size:12px; border-inline:1px solid var(--line); align-self:stretch; display:grid; place-items:center}
.ci__sum{font-family:var(--f-mono); font-weight:700; color:var(--ink); font-size:13px}
.ci__del{color:var(--mute); font-size:11.5px; transition:color .15s}
.ci__del:hover{color:var(--sale)}
.drawer__ft{border-top:1px solid var(--line); background:var(--row); padding:14px 16px 16px; display:grid; gap:9px}
.drawer__ship{font-size:12px; color:var(--ok); background:var(--ok-50); padding:8px 10px; border-radius:var(--r-xs)}
.drawer__sum{display:flex; align-items:baseline; justify-content:space-between}
.drawer__sum span{font-size:13px}
.drawer__sum b{font-family:var(--f-mono); font-size:1.3rem; font-weight:700; color:var(--ink)}
.drawer__cont{font-size:12.5px; font-weight:600; color:var(--mute)}
.drawer__cont:hover{color:var(--ink)}
.mnav{
position:fixed; top:0; left:0; bottom:0; width:min(300px,86%); z-index:90;
background:var(--panel); padding:14px; display:flex; flex-direction:column; gap:12px;
border-right:1px solid var(--line);
}
.mnav__hd{display:flex; align-items:center; justify-content:space-between}
.mnav__list{display:grid; flex:1; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.mnav__list a{padding:10px 12px; font-size:13.5px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line-2)}
.mnav__list a:last-child{border-bottom:0}
.mnav__list a:hover{background:var(--accent-50); color:var(--accent)}
.totop{
position:fixed; right:16px; bottom:16px; z-index:70;
width:34px; height:34px; border-radius:var(--r-sm);
background:var(--ink); color:#fff; display:grid; place-items:center;
opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.totop.is-on{opacity:1; visibility:visible}
.totop:hover{background:var(--accent)}
.toast{
position:fixed; left:50%; bottom:16px; z-index:100;
transform:translate(-50%,10px); opacity:0; visibility:hidden;
display:flex; align-items:center; gap:8px;
background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
font-size:13px; transition:all .2s; max-width:calc(100% - 24px);
}
.toast.is-on{opacity:1; visibility:visible; transform:translate(-50%,0)}
.toast .ic{width:15px; height:15px; color:#5FD08A; stroke-width:2.4}
/* ==========================================================================
RESPONZIVNO
========================================================================== */
@media (max-width:1100px){
.grid{grid-template-columns:repeat(3,1fr)}
.mega__in{grid-template-columns:repeat(5,1fr)}
.mega__promo{display:none}
.mega__col:last-of-type{border-right:0}
}
@media (max-width:1024px){
.topbar__links a:not(.topbar__tel){display:none}
.nav{display:none}
.hdr__burger{display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-sm)}
.act--phone{display:none}
.agro__in{grid-template-columns:1fr; gap:22px; padding-block:28px}
.promos{grid-template-columns:1fr}
.posts{grid-template-columns:1fr 1fr}
.posts .post:last-child{display:none}
.news__in{grid-template-columns:1fr; gap:16px}
.cats{grid-template-columns:repeat(3,1fr)}
.cat--xl{grid-column:span 3; grid-row:auto}
.cat--xl img{height:150px; flex:none}
}
@media (max-width:860px){
.hdr__main{flex-wrap:wrap; gap:10px}
.act--cart .act__txt{display:none}
.act--cart{padding:11px}
.act--cart .dot{left:22px; top:4px}
.search{order:3; flex-basis:100%}
.grid{grid-template-columns:1fr 1fr}
.revs{grid-template-columns:1fr}
.revs .rev:last-child{display:none}
.ftr__top{grid-template-columns:1fr 1fr; gap:20px}
.usp__in{grid-template-columns:1fr 1fr}
.usp__it{padding-left:18px; border-bottom:1px solid var(--line-2)}
.usp__it:nth-child(2n){border-right:0}
.usp__it:nth-child(n+3){border-bottom:0}
}
@media (max-width:600px){
.wrap{padding-inline:14px}
.topbar__links{display:none}
.topbar__in{justify-content:center}
.cats{grid-template-columns:1fr 1fr}
.cat--xl{grid-column:span 2; grid-row:auto}
.cat--xl img{height:130px; flex:none}
.posts{grid-template-columns:1fr}
.posts .post:last-child{display:flex}
.hero__trust li{flex:1 1 100%; border-right:0; border-bottom:1px solid rgba(255,255,255,.16)}
.hero__trust li:last-child{border-bottom:0}
.agro__form,.news__form{flex-direction:column}
.ftr__top{grid-template-columns:1fr}
.usp__in{grid-template-columns:1fr}
.usp__it{border-right:0; padding-inline:0}
.tabs{width:100%}
.tab{flex:1; text-align:center}
.sec__hd-r{width:100%; justify-content:space-between}
}
@media (max-width:420px){
.grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
/* vrlo uski telefoni (~360px): jos malo skupi razmak izmedju burger/logo/ikonica
da stanu u jedan red pored logotipa */
@media (max-width:400px){
.hdr__main{gap:6px}
.hdr__acts{gap:0}
.act--icon{padding:8px}
.act--cart{padding:8px}
.hdr__burger{width:38px !important; height:38px !important}
.brand img{height:36px !important}
}