:root{ --tinta:#101a4b; --navy:#2168c0; --navy-d:#124a94; --crvena:#f2811c; --crvena-d:#d96a0c; --papir:#f5f6fa; --bijela:#ffffff; --celik:#5b6390; --linija:rgba(16,26,75,.14); --linija-s:rgba(255,255,255,.16); --oblak:#f2811c; --oblak-d:#d96a0c; --zelena:#1d9e6f; --sjena:0 10px 34px rgba(16,26,75,.14); --sjena-jaka:0 24px 60px rgba(16,26,75,.22); --rub:14px; --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono','SF Mono',Consolas,monospace; } *{margin:0;padding:0;box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth} body{font-family:var(--font);color:var(--tinta);background:var(--bijela);line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} input{font-family:inherit} :focus-visible{outline:3px solid var(--oblak);outline-offset:2px;border-radius:4px} .mono{font-family:var(--mono)} .container{max-width:1280px;margin:0 auto;padding:0 22px} .img-ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#2c60b4,#101a4b);color:#b9cdf7;border-radius:inherit} .img-ph span{font:800 20px/1 var(--font);letter-spacing:.06em} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--crvena);display:inline-flex;align-items:center;gap:9px;margin-bottom:14px} .eyebrow::before{content:"";width:26px;height:1px;background:currentColor} .h2{font-size:clamp(25px,3.1vw,38px);font-weight:900;letter-spacing:-.022em;line-height:1.1;margin-bottom:12px} .sub{color:var(--celik);font-size:15.5px;max-width:560px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14.5px;font-weight:700;padding:13px 25px;border-radius:999px;transition:.2s} .btn-red{background:var(--crvena);color:#fff} .btn-red:hover{background:var(--crvena-d);transform:translateY(-2px)} .btn-navy{background:var(--navy-d);color:#fff} .btn-navy:hover{background:var(--navy)} .btn-ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-line{border:1.5px solid var(--linija);color:var(--tinta)} .btn-line:hover{border-color:var(--navy);background:var(--papir)} /* ============ TICKER ============ */ .ticker{background:var(--crvena);color:#fff;font-size:12.5px;position:relative} .ticker .container{display:flex;align-items:center;gap:12px;min-height:34px;position:relative} .ticker-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.22);padding:2px 8px;border-radius:20px;white-space:nowrap} .ticker-msgs{position:relative;flex:1;height:34px;overflow:hidden} .ticker-msg{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .ticker-msg.on{opacity:1;transform:none} .ticker-dots{display:flex;gap:5px} .ticker-dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);padding:0} .ticker-dots button.on{background:#fff} /* ============ UTILITY BAR ============ */ .util{background:var(--navy-d);color:#fff;font-size:13px} .util .container{display:flex;align-items:center;gap:18px;min-height:38px} .util a:hover{color:#cfe0ff} .util-right{margin-left:auto;display:flex;align-items:center;gap:16px} .util-sep{width:1px;height:16px;background:var(--linija-s)} .region{position:relative} .region-btn{display:flex;align-items:center;gap:7px;font-size:13px;color:#fff;padding:5px 2px} .region-btn .chev{font-size:9px;opacity:.7;transition:transform .2s} .region.open .region-btn .chev{transform:rotate(180deg)} .region-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;color:var(--tinta);border-radius:12px;box-shadow:var(--sjena-jaka);padding:8px;min-width:235px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:60} .region.open .region-menu{opacity:1;visibility:visible;transform:none} .region-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13.5px} .region-menu a:hover{background:var(--papir)} .region-menu .code{font-family:var(--mono);font-size:10.5px;color:var(--celik);margin-left:auto} .util-contact{display:flex;align-items:center;gap:16px} .util-contact svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px} .hide-m{display:flex;align-items:center} /* ============ HEADER (static, fixes itself on scroll) ============ */ #hdrSpacer{display:none} body.hdr-fixed #hdrSpacer{display:block} .hdr{background:#fff;border-bottom:1px solid var(--linija);position:relative;z-index:50} .hdr.fixed{position:fixed;top:0;left:0;right:0;box-shadow:0 8px 30px rgba(16,26,75,.14);animation:hdrIn .28s} @keyframes hdrIn{from{transform:translateY(-100%)}to{transform:none}} .hdr-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;padding:15px 0} .hdr.fixed .hdr-main{padding:10px 0} .hdr.fixed .nav-item>button,.hdr.fixed .nav-item>a{padding-top:10px;padding-bottom:10px} /* logo: real image + designed fallback */ .logo-stack{display:flex;flex-direction:column;gap:3px} .logo-img{height:54px;width:auto;align-self:center} .hdr.fixed .logo-img{height:44px} .logo-fallback{display:flex;align-items:center;gap:10px} .logo-sub{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--celik)} .logo{display:flex;align-items:center;gap:12px;flex-shrink:0} .logo-mark{position:relative;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#2c60b4,var(--navy-d));display:grid;place-items:center;box-shadow:0 6px 16px rgba(13,20,64,.28)} .logo-mark b{color:#fff;font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1;transform:translateY(-1px)} .logo-mark i{position:absolute;right:8px;bottom:9px;width:7px;height:7px;border-radius:2px;background:var(--crvena)} .logo-txt{display:flex;flex-direction:column;line-height:1.05} .logo-txt b{font-weight:900;font-size:21px;letter-spacing:-.025em} .logo-txt b span{color:var(--crvena)} .logo-txt small{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--celik);margin-top:4px} /* search */ .search{position:relative;width:100%;max-width:620px;justify-self:center} .search-box{display:flex;align-items:center;background:var(--papir);border:2px solid var(--linija);border-radius:999px;padding:4px 4px 4px 18px;transition:border-color .2s,background .2s} .search-box:focus-within{border-color:var(--navy);background:#fff} .search.ai-mode .search-box{border-color:var(--oblak);background:#fff6ec} .search-box input{flex:1;border:0;background:none;font-size:14.5px;outline:none;min-width:0;color:var(--tinta)} .search-box input::placeholder{color:#9aa1c4} .ai-toggle{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:7px 12px;border-radius:999px;color:var(--celik);white-space:nowrap;transition:.2s} .ai-toggle:hover{color:var(--oblak)} .search.ai-mode .ai-toggle{background:var(--oblak);color:#fff} .search-go{width:42px;height:42px;border-radius:50%;background:var(--crvena);color:#fff;display:grid;place-items:center;flex-shrink:0;transition:.2s} .search-go:hover{background:var(--crvena-d);transform:scale(1.05)} .search.ai-mode .search-go{background:var(--oblak)} .sugg{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border-radius:16px;box-shadow:var(--sjena-jaka);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:70;max-height:420px;overflow:auto} .sugg.open{opacity:1;visibility:visible;transform:none} .sugg-head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--celik);padding:8px 12px 4px} /* Autocomplete red = thumb + ime (nowrap/ellipsis) + jedna cijena. = klik na pravi proizvod. */ .sugg-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;width:100%;text-align:left;font-size:14px;color:inherit;text-decoration:none} .sugg-item:hover,.sugg-item.sel{background:var(--papir)} .sugg-thumb{position:relative;width:46px;height:46px;border-radius:9px;flex:none;overflow:hidden;background:var(--papir);display:grid;place-items:center} .sugg-thumb img{width:100%;height:100%;object-fit:contain} .sugg-thumb .img-ph{width:100%;height:100%;display:grid;place-items:center} .sugg-thumb .img-ph span{font-size:12px;color:var(--celik)} .sugg-name{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;flex:1 1 auto} .sugg-name b{font-weight:600;color:var(--tinta);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sugg-name small{color:var(--celik);font-size:11.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sugg-name mark{background:#ffe9a8;border-radius:3px;padding:0 1px} .sugg-meta{flex:none;text-align:right;white-space:nowrap;padding-left:6px} .sugg-meta .price{font-weight:700;font-size:13.5px;color:var(--tinta)} .sugg-meta .price.muted{font-weight:600;color:var(--celik)} .sugg-empty{padding:16px 12px;font-size:13.5px;color:var(--celik)} .sugg-ai{display:flex;align-items:center;gap:10px;margin:6px 4px 4px;padding:11px 14px;border-radius:12px;background:linear-gradient(100deg,#fff2e4,#fff7ef);font-size:13.5px;width:calc(100% - 8px);text-align:left;border:1px dashed rgba(242,129,28,.4)} .sugg-ai:hover{background:linear-gradient(100deg,#ffe6cf,#fff0dd)} .sugg-ai b{color:var(--oblak)} /* header actions */ .hdr-acts{display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative} .hdr-act{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 11px;border-radius:12px;font-size:11px;color:var(--celik);transition:.2s} .hdr-act:hover{background:var(--papir);color:var(--tinta)} .hdr-act svg{width:21px;height:21px} .badge{position:absolute;top:2px;right:6px;min-width:17px;height:17px;border-radius:9px;background:var(--crvena);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid #fff} .badge.blue{background:var(--oblak)} .burger{display:none;width:44px;height:44px;border-radius:12px;place-items:center} .burger:hover{background:var(--papir)} .burger svg{width:24px;height:24px} /* ============ NAV / MEGA ============ */ .nav{border-top:1px solid var(--linija);position:relative;background:#fff} .nav-in{display:flex;align-items:stretch;gap:2px} .nav-item>button,.nav-item>a{display:flex;align-items:center;gap:5px;padding:12px 11px;font-size:13.5px;font-weight:600;color:var(--tinta);position:relative;white-space:nowrap} .nav-item>button .chev{font-size:9px;color:var(--celik);transition:transform .2s} .nav-item>button::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--crvena);border-radius:3px 3px 0 0;transform:scaleX(0);transition:transform .2s} .nav-item.open>button::after,.nav-item>button:hover::after{transform:scaleX(1)} .nav-item.open>button .chev{transform:rotate(180deg)} .nav-quick{margin-left:auto;display:flex;align-items:center;gap:8px} .chip{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;border:1.5px solid var(--linija);color:var(--tinta);transition:.2s;white-space:nowrap} .chip:hover{border-color:var(--navy);background:var(--papir)} .chip.hot{background:var(--navy-d);border-color:var(--navy-d);color:#fff} .chip.hot:hover{background:var(--navy)} .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--zelena)} .mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--linija);box-shadow:0 32px 60px rgba(16,26,75,.18);border-radius:0 0 18px 18px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s;z-index:45} .nav-item.open .mega{opacity:1;visibility:visible;transform:none} .mega-in{display:grid;grid-template-columns:1fr 290px;gap:34px;padding:26px 28px 22px} .mega-cols{columns:3;column-gap:28px} .mega-cols a{display:flex;align-items:center;gap:8px;padding:7px 9px;margin:0 -9px;border-radius:8px;font-size:13.5px;color:var(--tinta);break-inside:avoid;transition:.15s} .mega-cols a:hover{background:var(--papir);color:var(--crvena);transform:translateX(3px)} .mega-cols a::before{content:"→";font-family:var(--mono);font-size:11px;color:var(--crvena);opacity:0;transition:.15s;margin-right:-6px} .mega-cols a:hover::before{opacity:1;margin-right:0} .mega-feat{border-radius:var(--rub);overflow:hidden;position:relative;background:linear-gradient(150deg,var(--navy),var(--navy-d));color:#fff;display:flex;flex-direction:column;min-height:240px} .mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85} .mega-feat .img-ph{border-radius:0} .mega-feat-body{position:relative;margin-top:auto;padding:18px;background:linear-gradient(transparent,rgba(13,20,64,.94) 45%)} .mega-feat-body .fe{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#cfe0ff;display:block;margin-bottom:5px} .mega-feat-body b{font-size:17px;font-weight:800;display:block;margin-bottom:9px} .mega-feat-body .go{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;background:#fff;color:var(--navy-d);padding:8px 15px;border-radius:999px} .mega-foot{grid-column:1/-1;display:flex;align-items:center;gap:10px;border-top:1px solid var(--linija);padding-top:15px;flex-wrap:wrap} .mega-foot .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--celik);margin-right:6px} /* mobile nav */ .mnav{position:fixed;inset:0;background:rgba(13,20,64,.5);backdrop-filter:blur(3px);z-index:90;opacity:0;visibility:hidden;transition:.25s} .mnav.open{opacity:1;visibility:visible} .mnav-panel{position:absolute;top:0;left:0;bottom:0;width:min(360px,88vw);background:#fff;overflow:auto;padding:18px;transform:translateX(-100%);transition:transform .3s} .mnav.open .mnav-panel{transform:none} .mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .mnav-close{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--papir)} .macc{border-bottom:1px solid var(--linija)} .macc>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 4px;font-size:15px;font-weight:700;color:var(--tinta)} .macc>button .chev{transition:transform .2s;color:var(--celik);font-size:11px} .macc.open>button .chev{transform:rotate(180deg)} .macc-body{display:none;padding:0 4px 14px} .macc.open .macc-body{display:block} .macc-body a{display:block;padding:8px 10px;font-size:14px;color:var(--celik);border-radius:8px} .macc-body a:hover{background:var(--papir);color:var(--tinta)} /* ============ HERO ============ */ .hero{background:linear-gradient(160deg,var(--navy-d) 0%,var(--navy) 58%,#2f88db 100%);color:#fff;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:repeat;background-size:460px 460px;opacity:.5;background-image:url("data:image/svg+xml;utf8,")} .hero::after{content:"";position:absolute;right:-140px;top:-140px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(242,129,28,.32),transparent 65%);pointer-events:none} .hero-in{position:relative;display:grid;grid-template-columns:1fr 480px;gap:48px;padding:56px 0 64px;align-items:center} .hero .eyebrow{color:#cfe0ff} .hero h1{font-size:clamp(30px,4.3vw,50px);font-weight:900;letter-spacing:-.025em;line-height:1.06;margin-bottom:16px} .hero h1 em{font-style:normal;color:#ffc48a} .hero p.hsub{font-size:16.5px;color:#dce8fc;max-width:470px;margin-bottom:24px} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} .hero-badges{display:flex;gap:18px;flex-wrap:wrap} .hero-badges span{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#cad9f8;display:flex;align-items:center;gap:7px} .hero-badges svg{width:14px;height:14px;color:#6ee7b7;flex-shrink:0} /* ── signature: live logo mockup ── */ .mock{background:#fff;color:var(--tinta);border-radius:22px;box-shadow:0 44px 90px rgba(0,0,0,.4);padding:20px;position:relative} .mock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .mock-head b{font-size:15px;font-weight:800} .mock-tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;background:#fff2e6;color:var(--crvena);padding:4px 9px;border-radius:20px} .mock-stage{background:linear-gradient(160deg,#eef1f9,#dde3f2);border-radius:16px;padding:10px;position:relative;overflow:hidden} .mock-stage::before{content:"";position:absolute;inset:0;background-repeat:repeat;background-size:300px 300px;opacity:.6;background-image:url("data:image/svg+xml;utf8,")} .mock-stage svg{position:relative;width:100%;height:auto;display:block} .mock-stage .plogo,.mock-stage .pplate,.mock-stage .ptxt{cursor:grab;touch-action:none} .mock-stage.dragging .plogo,.mock-stage.dragging .pplate,.mock-stage.dragging .ptxt{cursor:grabbing} .mock-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--celik);text-align:center;padding:9px 4px 2px;min-height:30px} .mock-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap} .mock-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--celik);width:100%;margin-bottom:-3px} .pchip{font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;border:1.5px solid var(--linija);transition:.18s} .pchip:hover{border-color:var(--navy)} .pchip.on{background:var(--navy-d);border-color:var(--navy-d);color:#fff} .cchip{width:26px;height:26px;border-radius:50%;border:2.5px solid transparent;box-shadow:inset 0 0 0 1.5px rgba(16,26,75,.15);transition:.18s;position:relative} .cchip.on{border-color:var(--navy);transform:scale(1.12)} .mock-input{display:flex;gap:8px;margin-top:12px} .mock-input input{flex:1;border:1.5px solid var(--linija);border-radius:12px;padding:10px 14px;font-size:13.5px;outline:none;min-width:0;font-weight:600;letter-spacing:.02em} .mock-input input:focus{border-color:var(--navy)} .mock-ctas{display:flex;gap:8px;margin-top:12px} .mock-ctas .btn{flex:1;padding:11px 10px;font-size:13px} /* ============ TRUST STRIP ============ */ .trust{background:var(--navy-d);color:#fff;position:relative} .trust::before{content:"";position:absolute;inset:0;background-repeat:repeat;background-size:460px 460px;opacity:.4;background-image:url("data:image/svg+xml;utf8,")} .trust-in{position:relative;display:grid;grid-template-columns:repeat(4,1fr)} .trust-cell{padding:26px 22px;border-left:1px solid var(--linija-s);text-align:center} .trust-cell:first-child{border-left:0} .trust-cell b{font-size:clamp(24px,2.6vw,34px);font-weight:900;letter-spacing:-.02em;display:block} .trust-cell b i{font-style:normal;color:#ffc48a} .trust-cell span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#b9cdf7} /* ============ CATEGORIES ============ */ .cats{padding:66px 0 26px;background:var(--papir)} .cats-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap} .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .cat{position:relative;background:#fff;border:1px solid var(--linija);border-radius:var(--rub);overflow:hidden;transition:.22s;display:flex;flex-direction:column} .cat:hover{transform:translateY(-5px);box-shadow:var(--sjena);border-color:transparent} .cat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--crvena);transform:scaleY(0);transform-origin:top;transition:.22s} .cat:hover::after{transform:scaleY(1)} .cat-img{position:relative;height:150px;overflow:hidden;background:var(--papir)} .cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .cat:hover .cat-img img{transform:scale(1.06)} .cat.big{grid-column:span 2;grid-row:span 2} .cat.big .cat-img{height:100%;min-height:260px;flex:1} .cat-body{padding:15px 16px 16px} .cat.big .cat-body{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(13,20,64,.95) 55%);color:#fff;padding:40px 20px 18px} .cat-body .ce{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--celik);display:block;margin-bottom:4px} .cat.big .cat-body .ce{color:#cfe0ff} .cat-body b{font-size:16px;font-weight:800;display:block} .cat.big .cat-body b{font-size:22px} .cat-body small{font-size:12.5px;color:var(--celik)} .cat.big .cat-body small{color:#dce8fc} /* ============ POPULAR ============ */ .pop{padding:56px 0;background:var(--papir)} .pop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .prod{background:#fff;border:1px solid var(--linija);border-radius:var(--rub);padding:13px;transition:.2s;display:flex;flex-direction:column;gap:9px;text-align:left} .prod:hover{transform:translateY(-4px);box-shadow:var(--sjena)} .prod-img{position:relative;height:130px;border-radius:10px;overflow:hidden;background:var(--papir)} .prod-img img{width:100%;height:100%;object-fit:cover} .prod b{font-size:13.5px;font-weight:700;line-height:1.3} .prod .pm{font-family:var(--mono);font-size:10px;color:var(--celik)} .prod .pp{display:flex;align-items:center;justify-content:space-between;margin-top:auto} .prod .pp b{font-size:14px;color:var(--navy)} .prod .add{width:30px;height:30px;border-radius:9px;background:var(--papir);color:var(--navy);display:grid;place-items:center;font-size:17px;font-weight:800;transition:.2s} .prod .add:hover{background:var(--crvena);color:#fff} /* ============ PROCESS ============ */ .proc{padding:66px 0;counter-reset:step} .proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} .step{background:var(--papir);border-radius:var(--rub);padding:26px 22px;position:relative;counter-increment:step} .step::before{content:"korak 0" counter(step);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--crvena);display:block;margin-bottom:12px} .step b{font-size:17px;font-weight:800;display:block;margin-bottom:8px} .step p{font-size:13.5px;color:var(--celik)} /* ============ B2B ============ */ .b2b{background:var(--navy-d);color:#fff;position:relative;overflow:hidden} .b2b::before{content:"";position:absolute;inset:0;background-repeat:repeat;background-size:460px 460px;opacity:.4;background-image:url("data:image/svg+xml;utf8,")} .b2b-in{position:relative;display:grid;grid-template-columns:1fr 400px;gap:50px;padding:64px 0;align-items:center} .b2b .eyebrow{color:#cfe0ff} .b2b .h2{color:#fff} .b2b ul{list-style:none;margin-top:18px;display:grid;gap:12px} .b2b li{display:flex;gap:11px;font-size:14.5px;color:#dce8fc} .b2b li svg{width:18px;height:18px;color:#6ee7b7;flex-shrink:0;margin-top:2px} .calc{background:#fff;color:var(--tinta);border-radius:20px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.35)} .calc b.t{font-size:15px;font-weight:800;display:block;margin-bottom:4px} .calc small.s{font-size:12.5px;color:var(--celik);display:block;margin-bottom:14px} .calc select{width:100%;border:1.5px solid var(--linija);border-radius:12px;padding:11px 12px;font-size:13.5px;font-family:inherit;font-weight:600;color:var(--tinta);background:#fff;margin-bottom:13px} .calc input[type=range]{width:100%;accent-color:var(--crvena)} .calc-qty{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--celik);margin:2px 0 12px} .calc-out{background:var(--papir);border-radius:13px;padding:13px 15px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap} .calc-out b{font-size:21px;font-weight:900;color:var(--navy)} .calc-out span{font-family:var(--mono);font-size:10px;color:var(--celik)} .calc .btn{width:100%;margin-top:13px} /* ============ FINAL CTA ============ */ .fin{background:linear-gradient(150deg,var(--crvena-d),var(--crvena));color:#fff;text-align:center;position:relative;overflow:hidden} .fin::before{content:"";position:absolute;inset:0;background-repeat:repeat;background-size:400px 400px;opacity:.5;background-image:url("data:image/svg+xml;utf8,")} .fin-in{position:relative;padding:62px 0} .fin .h2{color:#fff;max-width:640px;margin:0 auto 10px} .fin p{color:#ffe6cf;margin-bottom:26px} .fin .btn-white{background:#fff;color:var(--crvena-d)} .fin .btn-white:hover{transform:translateY(-2px)} .fin .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ============ FOOTER ============ */ .foot{background:var(--navy-d);color:#cad9f8;padding:52px 0 0} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px} .foot h4,.foot h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#b9cdf7;margin-bottom:14px} .foot a{display:block;font-size:13.5px;padding:4px 0;color:#dce8fc} .foot a:hover{color:#fff} .foot .logo-txt b{color:#fff} .foot .logo-txt small{color:#b9cdf7} .foot p.fd{font-size:13px;margin-top:14px;max-width:280px;color:#b9cdf7} .foot-contact div{display:flex;gap:10px;font-size:13.5px;padding:5px 0;color:#dce8fc;align-items:center} .foot-contact svg{width:15px;height:15px;flex-shrink:0;color:#b9cdf7} .foot-bar{border-top:1px solid var(--linija-s);padding:16px 0} .foot-bar .container{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px} .foot-bar .mono{font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-left:auto;color:#b9cdf7} .foot .foot-legal{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;margin-top:18px;font-size:11.5px;line-height:1.6;color:#8ea3d4} .foot .foot-legal .fl-co{font-weight:600;color:#b9cdf7} /* ============ AI CLOUD ============ */ .cloud-btn{position:fixed;right:22px;bottom:22px;z-index:80;filter:drop-shadow(0 14px 30px rgba(216,106,12,.45));transition:transform .2s} .cloud-btn:hover{transform:translateY(-4px) scale(1.04)} .cloud-btn .cb-label{position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;background:var(--navy-d);padding:2px 8px;border-radius:20px} .cloud-btn .badge{top:6px;right:14px;border-color:transparent} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .cloud-btn .cb-inner{display:block;position:relative;animation:floaty 3.6s ease-in-out infinite} .cloud-hint{position:fixed;right:118px;bottom:44px;z-index:79;background:#fff;border-radius:14px 14px 3px 14px;box-shadow:var(--sjena-jaka);padding:12px 16px;font-size:13px;max-width:230px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.3s} .cloud-hint.on{opacity:1;visibility:visible;transform:none} .cloud-hint b{color:var(--oblak)} /* ============ AI PANEL ============ */ .ai{position:fixed;right:22px;bottom:22px;z-index:95;width:min(400px,calc(100vw - 28px));height:min(620px,calc(100vh - 60px));background:#fff;border-radius:22px;box-shadow:0 40px 100px rgba(13,20,64,.45);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);transition:.28s} .ai.open{opacity:1;visibility:visible;transform:none} .ai-head{background:linear-gradient(120deg,var(--oblak-d),var(--oblak) 60%,#ffb066);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0} .ai-ava{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex-shrink:0} .ai-head-t b{font-size:15.5px;font-weight:800;display:block} .ai-head-t small{font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:6px} .ai-head-t .st{width:7px;height:7px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 0 3px rgba(110,231,183,.3)} .ai-head-acts{margin-left:auto;display:flex;gap:4px} .ai-head-acts button{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff} .ai-head-acts button:hover{background:rgba(255,255,255,.18)} .ai-body{flex:1;overflow-y:auto;padding:16px;background:linear-gradient(#fff6ec,#fffbfb 120px)} .msg{display:flex;gap:9px;margin-bottom:13px;max-width:92%} .msg.user{margin-left:auto;flex-direction:row-reverse} .msg-ava{width:28px;height:28px;border-radius:50%;background:var(--oblak);color:#fff;display:grid;place-items:center;flex-shrink:0;font-size:13px} .msg.user .msg-ava{background:var(--navy-d)} .msg-b{background:#fff;border:1px solid var(--linija);border-radius:4px 15px 15px 15px;padding:11px 14px;font-size:13.5px} .msg.user .msg-b{background:var(--navy-d);color:#fff;border:0;border-radius:15px 4px 15px 15px} .msg-b p+p{margin-top:7px} .msg-b .note{font-family:var(--mono);font-size:10px;color:var(--celik);display:block;margin-top:7px} .aiprod{display:flex;gap:11px;align-items:center;border:1.5px solid var(--linija);border-radius:12px;padding:9px;margin-top:9px;background:#fff;transition:.2s} .aiprod:hover{border-color:var(--oblak)} .aiprod-lnk{display:flex;gap:11px;align-items:center;flex:1;min-width:0;text-decoration:none;color:inherit;cursor:pointer} .aiprod-lnk:hover .aiprod-t b{text-decoration:underline} .aiprod .sugg-thumb{width:52px;height:52px} .aiprod-t{min-width:0;flex:1} .aiprod-t b{font-size:12.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aiprod-t small{font-family:var(--mono);font-size:10px;color:var(--celik)} .aiprod-t .pr{font-size:12.5px;font-weight:800;color:var(--navy)} .aiprod>button{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:#fff1e2;color:var(--oblak);display:grid;place-items:center;font-size:17px;font-weight:700;transition:.2s} .aiprod>button:hover{background:var(--oblak);color:#fff} .aiprod>button.added{background:var(--zelena);color:#fff} .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .chips button{font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;background:#fff1e2;color:var(--oblak-d);transition:.2s;text-align:left} .chips button:hover{background:var(--oblak);color:#fff} .typing{display:inline-flex;gap:4px;padding:12px 15px;background:#fff;border:1px solid var(--linija);border-radius:4px 15px 15px 15px} .typing i{width:6px;height:6px;border-radius:50%;background:var(--celik);animation:tp 1.1s infinite} .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s} @keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .ai-quote{border-top:1px solid var(--linija);background:#fff7ef;padding:10px 16px;display:none;align-items:center;gap:10px;font-size:12.5px;flex-shrink:0} .ai-quote.on{display:flex} .ai-quote b{color:var(--navy)} .ai-quote .send{margin-left:auto;font-size:12px;font-weight:700;background:var(--zelena);color:#fff;padding:8px 14px;border-radius:999px} .ai-quote .send:hover{filter:brightness(1.08)} .ai-foot{border-top:1px solid var(--linija);padding:11px 12px;display:flex;gap:8px;flex-shrink:0;background:#fff} .ai-foot input{flex:1;border:1.5px solid var(--linija);border-radius:999px;padding:11px 16px;font-size:13.5px;outline:none;min-width:0} .ai-foot input:focus{border-color:var(--oblak)} .ai-send{width:44px;height:44px;border-radius:50%;background:var(--oblak);color:#fff;display:grid;place-items:center;flex-shrink:0;transition:.2s} .ai-send:hover{background:var(--oblak-d)} .ai-demo{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--celik);padding:0 0 8px;background:#fff;flex-shrink:0} /* ============ CART DRAWER ============ */ .drawer{position:fixed;inset:0;z-index:96;visibility:hidden} .drawer.open{visibility:visible} .drawer-bg{position:absolute;inset:0;background:rgba(13,20,64,.5);opacity:0;transition:.25s} .drawer.open .drawer-bg{opacity:1} .drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(380px,92vw);background:#fff;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column} .drawer.open .drawer-panel{transform:none} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--linija)} .drawer-head b{font-size:16px;font-weight:800} .drawer-body{flex:1;overflow:auto;padding:18px 20px;font-size:14px;color:var(--celik)} .drawer-foot{border-top:1px solid var(--linija);padding:16px 20px} .drawer-foot .btn{width:100%} /* ============ CALLOUTS ============ */ .co{position:absolute;z-index:85;pointer-events:none;opacity:0;transition:.3s} body.callouts .co{opacity:1} .co i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--crvena);color:#fff;font-style:normal;font-family:var(--mono);font-size:12px;font-weight:600;box-shadow:0 0 0 5px rgba(242,129,28,.28)} .co-toggle{position:fixed;left:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:9px;background:var(--navy-d);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:11px 17px;border-radius:999px;box-shadow:var(--sjena-jaka);transition:.2s} .co-toggle:hover{background:var(--navy)} .co-toggle .sw{width:30px;height:16px;border-radius:10px;background:rgba(255,255,255,.25);position:relative;transition:.2s} .co-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:.2s} body.callouts .co-toggle .sw{background:var(--zelena)} body.callouts .co-toggle .sw::after{left:16px} /* ============ MOBILE BAR ============ */ .mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:75;background:#fff;border-top:1px solid var(--linija);box-shadow:0 -8px 30px rgba(16,26,75,.12)} .mbar a,.mbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 10px;font-size:10.5px;font-weight:600;color:var(--celik)} .mbar svg{width:20px;height:20px} .mbar .hot{color:var(--oblak)} /* ============ NEWSLETTER ============ */ .news{background:var(--papir);border-top:1px solid var(--linija)} .news-in{display:grid;grid-template-columns:1fr 460px;gap:40px;padding:46px 0;align-items:center} .news-form{display:flex;gap:10px} .news-form input[type=email]{flex:1;border:2px solid var(--linija);border-radius:999px;padding:13px 20px;font-size:14px;outline:none;min-width:0;background:#fff} .news-form input[type=email]:focus{border-color:var(--navy)} .news-legal{display:block;font-size:11px;color:var(--celik);margin-top:10px;line-height:1.5} .news-legal a{text-decoration:underline} /* ============ RESPONSIVE ============ */ @media(max-width:1180px){ .nav{display:none} .burger{display:grid} } @media(max-width:1080px){ .mega-cols{columns:2} .cat-grid{grid-template-columns:repeat(3,1fr)} .pop-grid{grid-template-columns:repeat(3,1fr)} .nav-quick .chip:nth-child(n+3){display:none} .hero-in{grid-template-columns:1fr 420px;gap:32px} .foot-grid{grid-template-columns:1fr 1fr} .news-in{grid-template-columns:1fr;gap:20px} } @media(max-width:860px){ .hero-in{grid-template-columns:1fr;padding:40px 0 48px} .hide-m{display:none} .nav{display:none} .burger{display:grid} .search{grid-column:1 / -1;max-width:none;justify-self:stretch;order:0} .hdr-main{grid-template-columns:1fr auto;gap:12px;padding:12px 0} .logo-sub{display:none} .logo-img{height:42px} .trust-in{grid-template-columns:1fr 1fr} .trust-cell{border-left:0;border-top:1px solid var(--linija-s)} .trust-cell:nth-child(-n+2){border-top:0} .trust-cell:nth-child(even){border-left:1px solid var(--linija-s)} .cat-grid{grid-template-columns:1fr 1fr} .cat.big{grid-column:span 2;grid-row:span 1} .cat.big .cat-img{min-height:190px} .pop-grid{grid-template-columns:1fr 1fr} .proc-grid{grid-template-columns:1fr} .b2b-in{grid-template-columns:1fr;padding:46px 0;gap:32px} .foot-grid{grid-template-columns:1fr} .mbar{display:flex} body{padding-bottom:62px} .cloud-btn{bottom:76px} .ai{bottom:76px;height:min(560px,calc(100vh - 110px))} .co-toggle{bottom:76px;padding:10px 13px} .cloud-hint{bottom:98px;right:110px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} html{scroll-behavior:auto} } /* ============ PRODUCTION v1 overrides ============ */ .co,.co-toggle{display:none!important} /* review-only feature markers */ body:not(.pia-live) .cloud-btn,body:not(.pia-live) .cloud-hint,body:not(.pia-live) .ai{display:none!important} /* Pia hidden until enabled via ?pia=1 */ /* ============================================================ Promoitems — uskladi E5 homepage_products modul (
kartice) s novim dizajnom + smanji preveliki "Questions?" upitnik. ============================================================ */ .pi-prod-grid, .pop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} /* FOUC fix: grid na NATIVNI E5 kontejner (prisutan na prvom paintu, prije JS .pi-prod-grid wrapa) */ .products_group_right_column{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start} .products_group_right_column > *:not(article){grid-column:1/-1} .products_group_right_column > article{background:#fff;border:1px solid var(--linija);border-radius:var(--rub);padding:13px;display:flex;flex-direction:column;gap:8px;margin:0;text-align:left;transition:.2s} .products_group_right_column > article:hover{transform:translateY(-4px);box-shadow:var(--sjena)} .products_group_right_column > article figure{margin:0;height:150px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--linija)} .products_group_right_column > article figure img{width:100%;height:100%;object-fit:cover} .pi-prod-grid article, .pop-grid article{ background:#fff;border:1px solid var(--linija);border-radius:var(--rub); padding:13px;display:flex;flex-direction:column;gap:8px;transition:.2s;margin:0;text-align:left; } .pi-prod-grid article:hover, .pop-grid article:hover{transform:translateY(-4px);box-shadow:var(--sjena)} .pi-prod-grid article figure, .pop-grid article figure{margin:0;height:150px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--linija)} .pi-prod-grid article figure img, .pop-grid article figure img{width:100%;height:100%;object-fit:contain;padding:8px} .pi-prod-grid article h1, .pop-grid article h1,.pop-grid article h3{font-size:13.5px;line-height:1.3;font-weight:700;margin:0;letter-spacing:0} .pi-prod-grid article h1 a, .pop-grid article h1 a,.pop-grid article h3 a{color:var(--tinta)} .pi-prod-grid article h1 a:hover, .pop-grid article h1 a:hover,.pop-grid article h3 a:hover{color:var(--crvena)} .price_request_pp_questions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:auto} .price_request_pp_questions p{width:100%;margin:0;font-size:11px;line-height:1;color:var(--celik)} .price_request_pp_questions strong{font-size:16px;font-weight:900;color:var(--navy)} .questions_clickhere_btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--celik)} .questions_clickhere_btn:hover{color:var(--crvena)} .questions_clickhere_btn img{width:15px;height:15px;flex:0 0 auto} .pi-prod-grid article figure + *, .pop-grid article figure + *{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .pi-prod-grid article figure + * img, .pop-grid article figure + * img{width:16px;height:16px;border-radius:50%} .priceonrequest_btn{background:var(--navy);color:#fff;text-align:center;padding:9px 12px;border-radius:10px;font-weight:700;font-size:12.5px;text-decoration:none;transition:.2s;display:inline-block} .priceonrequest_btn:hover{background:var(--navy-d)} @media(max-width:1080px){.pi-prod-grid,.pop-grid,.products_group_right_column{grid-template-columns:repeat(3,1fr)}} @media(max-width:860px){.pi-prod-grid,.pop-grid,.products_group_right_column{grid-template-columns:1fr 1fr}} /* ══════════ KATEGORIJE: raznobojne gradijent pločice (E5 nema slika kategorija) ══════════ */ .cat-grid .cat:nth-child(6n+1) .img-ph{background:linear-gradient(135deg,#2c60b4,#101a4b)} .cat-grid .cat:nth-child(6n+2) .img-ph{background:linear-gradient(135deg,#f2811c,#c85a08)} .cat-grid .cat:nth-child(6n+3) .img-ph{background:linear-gradient(135deg,#1d9e6f,#0f5f42)} .cat-grid .cat:nth-child(6n+4) .img-ph{background:linear-gradient(135deg,#7b5cff,#3b2a99)} .cat-grid .cat:nth-child(6n+5) .img-ph{background:linear-gradient(135deg,#e0447a,#8f1f4c)} .cat-grid .cat:nth-child(6n+6) .img-ph{background:linear-gradient(135deg,#2aa9c4,#0f5f75)} .cat-grid .img-ph span{color:rgba(255,255,255,.94);font-size:22px} /* Mockup — jasno pokaži da se logo/tekst može povlačiti */ .mock-stage{position:relative} .mock-draghint{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:4; background:var(--navy-d); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; display:none; align-items:center; gap:6px; box-shadow:var(--sjena); pointer-events:none; white-space:nowrap; animation:mdh 1.8s ease-in-out infinite; } .mock-stage.has-art .mock-draghint{display:inline-flex} @keyframes mdh{0%,100%{transform:translateX(-50%) translateY(0);opacity:.9} 50%{transform:translateX(-50%) translateY(-3px);opacity:1}} .mock-stage .plogo,.mock-stage .ptxt{cursor:grab} .mock-stage.dragging .plogo,.mock-stage.dragging .ptxt{cursor:grabbing} .mock-stage .plogo:hover{filter:drop-shadow(0 4px 10px rgba(16,26,75,.28))} /* Newsletter subscribe — honeypot skriven + poruka */ .news-form .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none} .news-msg{margin:8px 0 0;font-family:var(--mono);font-size:12px;font-weight:600} .news-msg.ok{color:#1d9e6f} .news-msg.err{color:var(--crvena)} /* ============================================================ Promoitems — CATEGORY / PRODUCT LISTING (E5 category_products) Dodati na kraj promoitems.css, bumpni ?v=. Kartice proizvoda već stiliziraju .pi-prod-grid article (bestsellers CSS) — Kodi samo omota grid u
. Ovdje je: layout, naslov, toolbar (.sorter) i paginacija (.paging_content). ============================================================ */ /* ---- content wrap ---- */ .products_group_view_category{background:var(--papir)} .products_group_inner{max-width:1280px;margin:0 auto;padding:22px} .products_group_right_column{width:100%} /* ---- naslov kategorije ---- */ .category_info_cnt{padding:6px 0 2px} .category_info_cnt h1{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.02em; color:var(--tinta);margin:6px 0 16px;line-height:1.1} /* ---- toolbar: .sorter ---- */ .sorter{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; background:#fff;border:1px solid var(--linija);border-radius:var(--rub);padding:11px 16px;margin-bottom:18px} .sorter h3{font-size:14px;font-weight:700;color:var(--tinta);margin:0;white-space:nowrap} .sorter h3 strong{color:var(--navy)} .sorter form[name=sorter]{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .sorter form[name=sorter] > div{display:flex;align-items:center;gap:10px} .sorter label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--celik);margin:0} .sorter ul{list-style:none;display:flex;gap:6px;margin:0;padding:0} .sorter ul li{margin:0} .sorter input[type=submit]{font:inherit;font-size:12.5px;font-weight:600;color:var(--tinta); background:#fff;border:1.5px solid var(--linija);border-radius:999px;padding:7px 13px;cursor:pointer; transition:border-color .15s,background .15s,color .15s} .sorter input[type=submit]:hover{border-color:var(--navy)} .sorter input[type=submit].active{background:var(--navy-d);border-color:var(--navy-d);color:#fff} /* grid/list toggle ikone (ako postoje u sorteru) — drži ih malenima */ .sorter a img{width:18px;height:18px;vertical-align:middle} /* ---- grid razmak (kartice = .pi-prod-grid article) ---- */ .products_group_right_column .pi-prod-grid{margin-bottom:6px} /* ---- paginacija: .paging_content ---- */ .paging_content{padding:26px 0 44px;text-align:center} .paging{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center} .paging a,.paging span{min-width:38px;height:38px;display:inline-grid;place-items:center;padding:0 10px; border:1px solid var(--linija);border-radius:10px;font-weight:700;font-size:13.5px;color:var(--tinta); background:#fff;text-decoration:none} .paging a:hover{border-color:var(--navy);background:#fff} .paging span.active{background:var(--navy-d);border-color:var(--navy-d);color:#fff} .paging_info{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--celik);margin-top:14px} /* ---- responsive ---- */ @media(max-width:900px){ .sorter{flex-direction:column;align-items:flex-start} .sorter form[name=sorter]{gap:14px} } /* ============================================================ SEARCH REZULTATI — search modul emitira
kao DIREKTNU djecu .products_group_inner (BEZ .products_group_right_column wrappera koji kategorija ima), a toolbar je
(kategorija ima