@charset "UTF-8";
/* ===== Izgled kao VTK-ŠATVAR katalog, raspored prema skici (2026-11) ===== */
:root {
  --kat-navy: #49579d;
  --kat-navy-dark: #3b4785;
  --kat-navy-deep: #2f3a70;
  --kat-orange: #fcb040;
  --kat-beige: #e9dbc6;
  --kat-beige-light: #f3eadc;
  --kat-text: #1c1c22;
  --kat-muted: #5d5a55;
  --kat-line: #e4ddd2;
  --kat-shadow: 0 1px 2px rgba(40, 32, 20, .07), 0 8px 22px -10px rgba(40, 32, 20, .22);
  --kat-shadow-hover: 0 2px 4px rgba(40, 32, 20, .08), 0 14px 30px -12px rgba(40, 32, 20, .32);
  --kat-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fcb040'/%3E%3Cpath d='M10 7l5 5-5 5' fill='none' stroke='%231c1c22' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* iza sata na mobitelu (Safari boju uzima iz pozadine stranice) i kod povlačenja plavo, sav sadržaj bež */
html, body { background: var(--kat-navy) !important; }
body { position: relative; color: var(--kat-text); }
.t3-wrapper, .home .tp-features { background: var(--kat-beige) !important; }
.t3-mainbody, .tp-brands, .tp-promo { background: transparent none !important; }
.tp-promo { border-top: 0 !important; }

/* ---------- zaglavlje: logo | Kategorije + tražilica | Prijava, Registracija | košarica ---------- */
.t3-wrapper { position: relative; }
#topbar.tp-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2010; height: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent !important; overflow: visible; }
#topbar .container { position: relative; }
#topbar .t3-topbar-1:not(.text-right) { display: none !important; }
#topbar .text-right { position: absolute; top: 28px; right: 84px; width: auto !important; float: none; padding: 0; }
#topbar .nav > li { display: inline-block; float: none; }
#topbar .nav > li > a { padding: 6px 10px; }
#topbar a, #topbar span { color: #fff !important; text-transform: none; font-weight: 600; }
#topbar a:hover, #topbar a:hover span { color: var(--kat-orange) !important; }

#t3-header { background: var(--kat-navy) !important; border-bottom: 6px solid var(--kat-orange); padding: 14px 0 !important; margin: 0 !important; }
#t3-header, #t3-header .container { overflow: visible !important; }
/* zaglavlje (s izbornikom Kategorije) iznad strelica bannera, rezultati pretrage iznad zaglavlja */
#t3-header { position: relative; z-index: 2000 !important; }
#search-results137 { z-index: 2100 !important; max-width: calc(100vw - 30px) !important; }
#t3-header .container { position: relative; }
#t3-header .row { display: flex; align-items: center; gap: 0; margin: 0; }
#t3-header .row::before { display: none; }
#t3-header .row::after { display: none; content: ""; }
#t3-header .row > div { float: none; width: auto; min-width: 0; padding: 0; margin: 0; }
#t3-header .row > .logo { flex: 0 0 auto; margin-right: 40px; }
#t3-header .row > div:nth-child(3) { flex: 1 1 auto; max-width: 620px; }
#t3-header .row > div:last-child { flex: 0 0 auto; margin-left: auto; padding-left: 250px; }
#t3-header .head-search { padding-top: 0 !important; }

/* logo: samo natpis ELUX (slika images/elux-natpis.png) */
#t3-header .logo, #t3-header .logo-image { text-align: left !important; }
#t3-header .logo img { height: 30px !important; width: auto !important; display: block; margin: 0 !important; filter: brightness(0) invert(1); }   /* natpis cijeli bijeli */

/* Kategorije kao lijevi dio tražilice */
#t3-header .row > .head-menu { position: relative; flex: 0 0 auto; z-index: 30; }
#t3-header .dropdown { width: 150px; height: 50px; background: #fff !important; border-radius: 999px 0 0 999px; border-right: 1px solid var(--kat-line); }
#t3-header .dropdown::before { display: none !important; }
#t3-header .dropdown::after { right: 16px !important; color: var(--kat-text) !important; }
#t3-header .dropdown > a.dropdown-toggle > span { left: 22px !important; right: auto !important; text-align: left; color: var(--kat-text) !important; text-transform: none; font-weight: 600; font-size: 14px; }
#t3-header .dropdown .dropdown-menu { border-radius: 12px; border: 0; box-shadow: 0 12px 30px -12px rgba(40, 32, 20, .35); margin-top: 6px; overflow: hidden; }
#t3-header .dropdown .dropdown-menu li { background-image: none !important; }   /* samo nazivi, bez ikona */

/* tražilica: desni dio istog oblika, narančasta tipka */
#t3-header .offlajn-ajax-search-container { border-radius: 0 999px 999px 0 !important; overflow: hidden; }
#t3-header .row > div:nth-child(3) .head-search, #t3-header #offlajn-ajax-search137, #t3-header .offlajn-ajax-search-container, #t3-header #search-form137, #t3-header .offlajn-ajax-search-inner, #t3-header #search-area137, #t3-header #search-area137 + input { width: 100% !important; }
.offlajn-ajax-search-inner input { border-color: #fff !important; }

/* Akcije privremeno skrivene */
#t3-header .head-link, #t3-header .row > div:has(> .head-link) { display: none !important; }

/* košarica: narančasta ikona s brojem artikala */
#t3-header .head-cart { position: relative; left: auto !important; right: auto !important; transform: none !important; width: 40px; height: 40px; margin: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcb040' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 11.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 7H6.2'/%3E%3C/svg%3E") center / 32px 32px no-repeat !important; }
#t3-header .head-cart .jb-cart-headding, #t3-header .head-cart .jb-cart-summary { visibility: hidden; }
#t3-header .head-cart .jb-cart-header { position: absolute; inset: 0; width: auto; height: auto; cursor: pointer; }
#t3-header .head-cart .jb-dropdown-cart, #t3-header .head-cart .jb-cart-summary-wrap, #t3-header .head-cart .jb-cart-icon { position: static !important; }
#t3-header .head-cart .jb-cart-count { position: absolute !important; top: -6px; right: -8px; left: auto !important; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--kat-orange) !important; color: var(--kat-text) !important; font: bold 12px/20px Arial, sans-serif !important; text-align: center; box-shadow: 0 0 0 2px var(--kat-navy); }

/* ---------- početna: niski banner (modul „Naslovna – banner“) ---------- */
.tp-slideshow:has(.elux-hero) .rev_slider_wrapper { display: none !important; }
.elux-hero { background: #f1f1f1 url("/images/slide/slider_4.jpg") right center / auto 100% no-repeat; }
.elux-hero-in { max-width: 1170px; min-height: 300px; margin: 0 auto; padding: 46px 15px; box-sizing: border-box; }
.elux-hero h1 { margin: 0 0 14px; font-size: 46px; line-height: 1.08; font-weight: 800; color: var(--kat-navy-deep); letter-spacing: -.01em; }
.elux-hero h1 span { display: block; color: var(--kat-orange); }
.elux-hero p { max-width: 420px; margin: 0 0 24px; font-size: 17px; line-height: 1.5; color: #3a3a44; }
.elux-hero-btn, .elux-hero-btn:hover, .elux-hero-btn:focus { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--kat-orange); color: var(--kat-text) !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 8px 18px -8px rgba(233, 154, 31, .8); }
.elux-hero-btn::after { content: "  →"; }

/* ---------- početna: „Naše kategorije“ – vodoravne kartice ---------- */
.home .tp-intro { padding-top: 34px !important; padding-bottom: 10px !important; }
.home .tp-intro-left { display: none !important; }
.home .tp-intro.col-md-10 { width: 100%; max-width: 1200px; margin: 0 auto; float: none; }
#Mod106::before { content: "Naše kategorije"; display: block; margin: 0 0 2px; text-align: center; font-size: 26px; font-weight: 800; color: var(--kat-navy-deep); background: linear-gradient(var(--kat-orange), var(--kat-orange)) left center / calc(50% - 130px) 2px no-repeat, linear-gradient(var(--kat-orange), var(--kat-orange)) right center / calc(50% - 130px) 2px no-repeat; }
#Mod106 .module-inner::before { content: "Brzo pronađite ono što vam treba"; display: block; margin: 0 0 20px; text-align: center; font-size: 14px; color: var(--kat-muted); }
#Mod106 .row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; }
#Mod106 .row::before, #Mod106 .row::after { display: none; }
#Mod106 .row > div { width: auto; float: none; padding: 0; margin: 0; }
.box-main { display: flex; flex-direction: row; align-items: center; gap: 14px; height: 72px !important; min-height: 0; margin: 0 !important; padding: 0 16px !important; text-align: left; border: 0 !important; border-radius: 16px; background: #fff !important; box-shadow: var(--kat-shadow) !important; transition: box-shadow .15s, transform .15s; }
.box-main > img:not(.icon-hover) { display: block !important; flex: 0 0 auto; width: auto; max-width: 44px; max-height: 38px; margin: 0 !important; opacity: 1 !important; }
.box-main > img.icon-hover { display: none !important; }
.box-main > a:not(.link) { display: block; flex: 1 1 auto; min-width: 0; color: var(--kat-navy-deep) !important; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: left !important; text-transform: none; }
.box-main > a:not(.link)::first-letter { text-transform: uppercase; }
.box-main::after { content: ""; flex: 0 0 22px; height: 22px; background: var(--kat-arrow) center / 22px 22px no-repeat; }
.box-main:hover { box-shadow: var(--kat-shadow-hover) !important; transform: translateY(-1px); }

/* ---------- početna: „Kvaliteta na prvom mjestu“ i prednosti (modul „Naslovna – prednosti“) ---------- */
.elux-kvaliteta { position: relative; display: flex; align-items: center; gap: 22px; min-height: 120px; margin: 26px 0 16px; padding: 26px 34px; border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(90deg, var(--kat-navy-deep) 0%, var(--kat-navy-deep) 48%, rgba(47, 58, 112, .55) 72%, rgba(47, 58, 112, .15) 100%), url("/images/slide/resized-image-Promo.jpg") right center / 120% auto no-repeat, var(--kat-navy-deep); box-shadow: var(--kat-shadow); }
.elux-kvaliteta-ico { flex: 0 0 60px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fcb040' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 3l5 3.6 6.2-.3 1.9 5.9 5 3.6-1.9 5.9 1.9 5.9-5 3.6-1.9 5.9-6.2-.3L24 45l-5-3.6-6.2.3-1.9-5.9-5-3.6 1.9-5.9-1.9-5.9 5-3.6 1.9-5.9 6.2.3z'/%3E%3Cpath d='M16.5 24.5l5 5 10-10.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.elux-kvaliteta-txt h3 { margin: 0 0 4px; color: #fff; font-size: 24px; font-weight: 800; line-height: 1.2; text-transform: none; }
.elux-kvaliteta-txt p { margin: 0; color: #e6e9f5; font-size: 15px; }
.elux-kvaliteta-btn, .elux-kvaliteta-btn:hover, .elux-kvaliteta-btn:focus { margin-left: auto; padding: 11px 24px; border: 2px solid #fff; border-radius: 999px; color: #fff !important; font-weight: 700; white-space: nowrap; text-decoration: none !important; background: rgba(47, 58, 112, .35); }
.elux-kvaliteta-btn:hover { background: #fff; color: var(--kat-navy-deep) !important; }
.elux-kvaliteta-btn::after { content: "  →"; }
.elux-prednosti { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 40px; padding: 18px 8px; border-radius: 16px; background: #fff; box-shadow: var(--kat-shadow); }
.elux-prednost { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 16px; }
.elux-prednost + .elux-prednost { border-left: 1px solid rgba(252, 176, 64, .7); }
.elux-prednost::before { content: ""; flex: 0 0 42px; height: 42px; background: center / contain no-repeat; }
.elux-p-dostava::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232f3a70' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 12h26v20H3zM29 19h8l6 7v6H29z'/%3E%3Ccircle cx='11' cy='35' r='4' fill='%23fff'/%3E%3Ccircle cx='36' cy='35' r='4' fill='%23fff'/%3E%3Cpath d='M1 18h8M1 24h6'/%3E%3C/svg%3E"); }
.elux-p-sigurno::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232f3a70' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 4l16 6v12c0 10-7 18-16 22C15 40 8 32 8 22V10z'/%3E%3Cpath d='M17 24l5 5 9-10'/%3E%3C/svg%3E"); }
.elux-p-podrska::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232f3a70' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M9 27v-5a15 15 0 0 1 30 0v5'/%3E%3Crect x='5' y='25' width='8' height='12' rx='3'/%3E%3Crect x='35' y='25' width='8' height='12' rx='3'/%3E%3Cpath d='M39 37c0 4-4 6-10 6h-3'/%3E%3C/svg%3E"); }
.elux-prednost b { display: block; color: var(--kat-navy-deep); font-size: 15px; font-weight: 700; line-height: 1.3; }
.elux-prednost span { display: block; color: var(--kat-muted); font-size: 12.5px; line-height: 1.35; }

/* ---------- stranica artikla: slika zadržava svoj omjer (img ima width/height 700, predložak smanjuje samo širinu) ---------- */
.productdetails-view .vm-product-media-container img, .productdetails-view .main-image img, .productdetails-view .additional-images img, .productdetails-view .vm-additional-images img { height: auto !important; max-width: 100%; object-fit: contain; }
.productdetails-view .main-image { height: auto !important; }

/* ---------- stranice kategorija i ostale: traka s naslovom plava umjesto crne ---------- */
.tp-breadcrumb { background: var(--kat-navy) none !important; }

/* ---------- traka za newsletter i podnožje ---------- */
.tp-promo { background-color: var(--kat-beige-light) !important; }
#t3-footer { background: var(--kat-navy) !important; border-top: 6px solid var(--kat-orange); }
#t3-footer, #t3-footer a, #t3-footer li, #t3-footer p, #t3-footer span { color: #fff !important; }
#t3-footer .module-title, #t3-footer h6 { color: var(--kat-orange) !important; }
.t3-copyright { background: var(--kat-navy-deep) !important; }

/* glavni gumbi plavi kao u katalogu */
.btn-primary { background-color: var(--kat-navy) !important; border-color: var(--kat-navy) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--kat-navy-deep) !important; border-color: var(--kat-navy-deep) !important; }

/* ---------- manja računala ---------- */
@media (max-width: 1199px) {
  #Mod106 .row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .elux-hero { background-position: calc(100% + 120px) center; }
  .elux-hero-in { max-width: 970px; min-height: 280px; padding: 40px 15px; }
  .elux-hero h1 { font-size: 36px; }
  .elux-hero p { max-width: 320px; font-size: 15px; }
}

/* ---------- tablet ---------- */
@media (max-width: 991px) {
  #Mod106 .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* zaglavlje u dva reda: logo, Prijava, Registracija i košarica gore; Kategorije i tražilica dolje */
  #t3-header { padding: 10px 0 12px !important; }
  #t3-header .row { flex-wrap: wrap; padding: 0; }
  #t3-header .row::after { display: block; flex: 0 0 100%; height: 10px; order: 3; }
  #t3-header .row > .logo { order: 1; flex: 1 0 auto; margin-right: 0; }
  #t3-header .row > div:last-child { order: 2; padding-left: 0; margin-left: 0; }
  #t3-header .row > .head-menu { order: 4; }
  #t3-header .row > div:nth-child(3) { order: 5; flex: 1 1 0; max-width: none; }
  #topbar .text-right { top: 14px; right: 62px; }
  /* banner na tabletu i mobitelu: samo slika, niska */
  .elux-hero { background: none; }
  .elux-hero-in { width: 100%; min-height: 0 !important; padding: 0 !important; aspect-ratio: 1600 / 583; max-width: none; background: #f1f1f1 url("/images/slide/slider_4.jpg") center / cover no-repeat; }
  .elux-hero-in > * { display: none; }
  .elux-prednost { flex-direction: column; text-align: center; gap: 8px; }
}

/* ---------- mobitel ---------- */
@media (max-width: 767px) {
  #t3-header .logo img { height: 26px !important; }
  #topbar .nav > li > a { padding: 4px 8px; font-size: 12px; }
  #t3-header .dropdown { width: 122px; height: 46px; }
  #t3-header .dropdown > a.dropdown-toggle > span { left: 16px !important; font-size: 13px; top: 10px !important; }
  #t3-header .dropdown::after { right: 12px !important; top: 6px !important; }
  #t3-header .dropdown .dropdown-menu { min-width: 260px; }
  #t3-header .offlajn-ajax-search-container, #t3-header #search-area137, #t3-header #search-area137 + input { height: 46px !important; }
  #Mod106::before { font-size: 21px; background-size: calc(50% - 110px) 2px, calc(50% - 110px) 2px; }
  #Mod106 .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .box-main { height: 64px !important; gap: 10px; padding: 0 12px !important; }
  .box-main > img:not(.icon-hover) { max-width: 34px; max-height: 30px; }
  .box-main > a:not(.link) { font-size: 13px; }
  .elux-kvaliteta { flex-wrap: wrap; padding: 22px 20px; gap: 14px; background-size: auto, 260% auto, auto; }
  .elux-kvaliteta-ico { flex-basis: 48px; height: 48px; }
  .elux-kvaliteta-txt { flex: 1 1 200px; }
  .elux-kvaliteta-txt h3 { font-size: 20px; }
  .elux-kvaliteta-btn { margin-left: 0; }
  .elux-prednosti { grid-template-columns: 1fr; padding: 6px 16px; }
  .elux-prednost { flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px 0; }
  .elux-prednost + .elux-prednost { border-left: 0; border-top: 1px solid rgba(252, 176, 64, .6); }
}

/* mali mobiteli: Prijava i Registracija bez ikona, manji logo, kartice bez strelice */
@media (max-width: 480px) {
  #topbar .nav > li > a img { display: none !important; }
  #topbar .nav > li > a { padding: 4px 6px; font-size: 11px; }
  #t3-header .logo img { height: 22px !important; }
  .box-main::after { display: none; }
}
@media (max-width: 360px) {
  #t3-header .logo img { height: 20px !important; }
  #t3-header .dropdown { width: 118px; }
  #t3-header .dropdown > a.dropdown-toggle > span { left: 14px !important; font-size: 12.5px; }
  #t3-header .dropdown::after { right: 10px !important; }
}

/* stranica se na mobitelu ne smije pomicati lijevo-desno */
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow: clip) { html, body, .t3-wrapper { overflow-x: clip; } }
#head-search-dropdown { display: none !important; }   /* druga, nekorištena tražilica predloška bila je 1 px šira od ekrana */
@media (max-width: 991px) {
  #search-results137 { left: 15px !important; right: auto !important; width: calc(100vw - 30px) !important; max-width: calc(100vw - 30px) !important; }
  #search-results-moovable137, #search-results-inner137 { left: 0 !important; width: 100% !important; max-width: 100% !important; }
}