/* ============================================================
   EXPLICIT v6.0 — custom.css
   Bootstrap 5 + Swiper 12 | Header (1 linija) + Footer + Ticker
   ============================================================ */

:root {
	--theme-color: #58af1a; /* Glavna boja teme (zamena za zelenu) */
	--theme-color-lighter: #97c938; /* Svetlija varijanta — header top */
	--theme-color-darker: #248e22; /* Tamnija varijanta — hover stanja */
	--alt-color: #f2a53d; /* Sekundarna/akcent boja (zamena za narandžastu) */
	--dark-color: #292929; /* Tamni tekst i tamne pozadine */
	--light-color: #d0d0d0; /* Borderi i svetli elementi */
	--white-color: #fff; /* Bela */

	--order-btn: #0AA707; /* Add to cart, Checkout dugmad */
	--order-btn-darker: #248e22; /* Hover za order dugmad */

	--order-btn-alt: #f1971a; /* Open checkout dugme */
	--order-btn-alt-darker: #e47604; /* Hover za alt order dugme */

	--checkout-heading: #23527c; /* Naslovi u checkout-u (zamena za teget) */
	--swiper-btn-color: #4fa530; /* Swiper navigaciona dugmad */
	--aliceblue: #f5f7f5; /* Svetla pozadina checkout sekcija */
	--red: #c9103d; /* Greške, upozorenja, akcije brisanja */

	--theme-color-light: #eef6e6; /* Svetla zelena nijansa — hover/aktivne pozadine u meniju */
	--nav-bg: #fff; /* Pozadina headera i dropdown-a */
	--nav-border: #e8e8e8; /* Border headera i dropdown-a */
	--nav-height: 64px; /* Visina headera (jedna linija) */
	--nav-shadow: 0 4px 24px rgba(0,0,0,.08); /* Senka headera na skrol */
	--nav-fs-lg: 16px; /* Veći font u navigaciji */
	--nav-fs-md: 14px; /* Srednji font u navigaciji i footeru */
	--nav-fs-sm: 12px; /* Mali font — opisi, naslovi sekcija u meniju */
	--txt: #111; /* Primarni tekst */
	--txt2: #555; /* Sekundarni tekst */
	--txt3: #888; /* Tercijarni tekst — placeholderi, opisi */
	--hover: #f5f5f5; /* Neutralna hover pozadina */
	--drop-sh: 0 8px 40px rgba(0,0,0,.11); /* Senka dropdown-a */
	--r: 7px; /* Mali border-radius */
	--r-md: 10px; /* Srednji border-radius */
	--t: 180ms ease; /* Standardna tranzicija */
	--footer-bg: #f0f5ee; /* Pozadina footera — svetlo zelenkasta */
	--footer-title: #2b3a24; /* Naslovi u footeru */
	--footer-text: #5d6e54; /* Tekst i linkovi u footeru */
}

body { font-family: 'Inter', sans-serif; font-size: 15px; color: var(--txt); }

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }
.hidden { display: none !important; }

/* container */
.container-xxxl { width: 100%; padding-left: 12px; padding-right: 12px; margin-left: auto; margin-right: auto; }
@media (min-width: 1450px) {
	.container-xxxl { max-width: 1450px; }
}

/* ============================================================
   swiperTicker — traka iznad headera
   ============================================================ */
.swiperTickerBar { background: var(--theme-color); color: var(--white-color); }
.swiperTicker { height: 36px; }
.swiperTicker .swiper-slide { display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--nav-fs-md); }
.swiperTicker .swiper-slide a { color: var(--white-color); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   mainNav — header u jednoj liniji
   ============================================================ */
.mainNav { position: sticky; top: 0; z-index: 1000; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); transition: box-shadow var(--t); }
.mainNav.scrolled { box-shadow: var(--nav-shadow); border-bottom-color: transparent; }
.mainNav ul { list-style: none; padding: 0; margin: 0; }
.navBar { height: var(--nav-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.navLeft { display: flex; align-items: center; }
.navRight { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.navLogo { display: flex; align-items: center; flex-shrink: 0; }
.navLogo img { max-height: 40px; }

/* dugmad u headeru: search, wishlist, korpa, user */
.navSearchBtn, .navIconBtn { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r); color: var(--txt2); font-size: 18px; transition: background var(--t), color var(--t); }
.navSearchBtn:hover, .navIconBtn:hover { background: var(--hover); color: var(--txt); }
.navSearchBtn.active { background: var(--theme-color-light); color: var(--theme-color); }
.navSearchBtnMob { display: none; }
.navBadge { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; background: var(--theme-color); color: var(--white-color); font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; border-radius: 9px; }

/* korisnicki dropdown */
.navUser { position: relative; }
.navUserDrop { position: absolute; top: 100%; right: 0; padding-top: 10px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t); z-index: 1001; }
.navUser:hover .navUserDrop, .navUser.open .navUserDrop { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); }
.navUserDrop .dropBox { min-width: 220px; padding: 6px; }

/* hamburger */
.navHamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: var(--r); transition: background var(--t); }
.navHamburger:hover { background: var(--hover); }
.navHamburger span { display: block; width: 100%; height: 2px; background: var(--txt); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.navHamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navHamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navHamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* call dugme — mobilni */
.navCallBtn { display: none; }

/* meni */
.navMenuWrap { display: flex; align-items: center; }
.navMenu { display: flex; align-items: center; gap: 2px; }
.navItem { position: relative; }
.navLinkWrap { display: flex; align-items: center; border-radius: var(--r); transition: background var(--t); }
.navLink { display: flex; align-items: center; gap: 7px; padding: 8px 4px 8px 12px; font-size: var(--nav-fs-lg); font-weight: 500; color: var(--txt2); transition: color var(--t); white-space: nowrap; }
.navLinkActive { color: var(--theme-color) !important; }
.navItem:hover .navLink, .navItem.open .navLink { color: var(--txt); }
.navLinkWrap:hover, .navItem.open .navLinkWrap { background: var(--hover); }
.navSubBtn { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 4px; border-radius: 4px; color: var(--txt3); transition: color var(--t); }
.navItem[data-sub] .navSubBtn { display: flex; }
.navChevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform .25s cubic-bezier(.34,1.56,.64,1); stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.navItem:hover .navChevron, .navItem.open .navChevron { transform: rotate(180deg); }

/* dugmad u mob overlay-u */
.navMobActions { display: none; }
.navBtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: var(--nav-fs-lg); font-weight: 500; border-radius: var(--r); transition: all var(--t); white-space: nowrap; }
.navBtnGhost { color: var(--txt2); }
.navBtnGhost:hover { background: var(--hover); color: var(--txt); }
.navBtnPrimary { background: var(--theme-color); color: var(--white-color); }
.navBtnPrimary:hover { background: var(--theme-color-darker); color: var(--white-color); }

/* ============================================================
   dropdown / mega meni kategorija
   ============================================================ */
.navDrop, .navCatMenu { position: absolute; top: 100%; left: 0; padding-top: 10px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t); z-index: 1001; }
.dropBox { background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: 12px; box-shadow: var(--drop-sh); }
@media (min-width: 901px) {
	.navItem:hover .navDrop,
	.navItem:hover .navCatMenu { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); }
}
.navItem.open .navDrop, .navItem.open .navCatMenu { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); }

/* stavke klasicnog dropdown-a (koristi i user meni) */
.navDrop .dropBox { min-width: 230px; padding: 6px; }
.ddItem { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 6px; font-size: var(--nav-fs-md); font-weight: 500; color: var(--txt2); transition: background var(--t), color var(--t); }
.ddItem:hover { background: var(--hover); color: var(--txt); }
.ddIcon { width: 30px; height: 30px; background: var(--theme-color-light); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--theme-color); font-size: 14px; transition: background var(--t), color var(--t); }
.ddItem:hover .ddIcon { background: var(--theme-color); color: var(--white-color); }
.ddLabel { display: block; color: var(--txt); font-size: var(--nav-fs-md); }
.ddDivider { height: 1px; background: var(--nav-border); margin: 5px 0; }

/* mega meni kategorija: leva lista + desni panel */
.navCatMenu .dropBox { width: 560px; position: relative; overflow: hidden; }
.navCatMenu .dropBox::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 190px; background: #fafafa; border-right: 1px solid var(--nav-border); pointer-events: none; }
.navCatMenu .dropInner { display: block; position: relative; min-height: 260px; padding: 8px 0; }
.catItem { width: 190px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin: 2px 8px; border-radius: 6px; font-size: var(--nav-fs-md); font-weight: 500; color: var(--txt2); cursor: pointer; position: relative; z-index: 1; transition: background var(--t), color var(--t); }
.catItem:hover, .catItem.active { background: var(--theme-color-light); color: var(--theme-color); }
.catIco { width: 26px; height: 26px; background: var(--nav-bg); border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--txt3); font-size: 13px; transition: background var(--t), color var(--t); }
.catItem.active .catIco, .catItem:hover .catIco { background: var(--theme-color); color: var(--white-color); }
.catName { flex: 1; }
.catArrow { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--txt3); fill: none; stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity var(--t), stroke var(--t); }
.catItem.active .catArrow, .catItem:hover .catArrow { opacity: 1; stroke: var(--theme-color); }
.subPanel { position: absolute; left: 198px; top: 8px; right: 8px; display: none; grid-template-columns: 1fr 1fr; align-content: start; gap: 2px; padding: 0 4px; }
.subPanel.active { display: grid; animation: subFade .15s ease; }
@keyframes subFade { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.subPanelTitle { grid-column: 1/-1; font-size: var(--nav-fs-sm); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--txt3); padding: 4px 8px 6px; transition: color var(--t); }
.subPanelTitle:hover { color: var(--theme-color); }
.subItem { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 6px; font-size: var(--nav-fs-md); font-weight: 500; color: var(--txt2); transition: background var(--t), color var(--t); }
.subItem:hover { background: var(--hover); color: var(--txt); }
.subItemDot { width: 6px; height: 6px; border-radius: 50%; background: var(--nav-border); flex-shrink: 0; transition: background var(--t); }
.subItem:hover .subItemDot { background: var(--theme-color); }

/* ============================================================
   searchPanel — pretraga ispod headera
   ============================================================ */
.searchPanel { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); box-shadow: var(--nav-shadow); z-index: 998; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
.searchPanel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.searchPanelInner { padding-top: 14px; padding-bottom: 14px; }
.searchPanelForm { display: flex; align-items: center; gap: 10px; background: var(--hover); border: 1.5px solid var(--nav-border); border-radius: 8px; padding: 10px 14px; transition: border-color var(--t), box-shadow var(--t), background var(--t); }
.searchPanelForm:focus-within { border-color: var(--theme-color); box-shadow: 0 0 0 3px var(--theme-color-light); background: var(--white-color); }
.searchPanelIco { flex-shrink: 0; color: var(--txt3); font-size: 16px; }
.searchPanelInput { flex: 1; border: none; background: transparent; font-size: var(--nav-fs-md); color: var(--txt); outline: none; min-width: 0; }
.searchPanelInput::placeholder { color: var(--txt3); }
.searchPanelClear { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--txt3); color: var(--white-color); font-size: var(--nav-fs-sm); font-weight: 700; flex-shrink: 0; transition: background var(--t); }
.searchPanelClear:hover { background: var(--txt); }
.searchPanelClear.visible { display: flex; }
.searchPanelSubmit { font-size: var(--nav-fs-md); font-weight: 500; color: var(--theme-color); background: var(--theme-color-light); padding: 7px 16px; border-radius: var(--r); flex-shrink: 0; transition: background var(--t), color var(--t); }
.searchPanelSubmit:hover { background: var(--theme-color); color: var(--white-color); }



.tt-menu .tt-suggestion { padding: 8px 12px; cursor: pointer; }
.tt-menu .tt-suggestion a { display: flex; align-items: flex-start; text-decoration: none; color: inherit; width: 100%; }
.tt-menu .tt-suggestion img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; margin-right: 12px; flex-shrink: 0; }
.tt-menu .tt-suggestion .text-block { display: flex; flex-direction: column; line-height: 1.3; width: 100%; text-align: left; }
.tt-menu .tt-suggestion .title { font-size: 14px; font-weight: 600; color: #222; }
.tt-menu .tt-suggestion .category { font-size: 12px; color: #666; margin-top: 2px; }
.tt-menu .tt-suggestion .tt-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 11px; line-height: 1.2; }
.tt-menu .tt-suggestion .tt-sku { color: #999; white-space: nowrap; }
.tt-menu .tt-suggestion .tt-price { font-weight: 600; color: #222; white-space: nowrap; }
.tt-menu .tt-suggestion .tt-price-old { text-decoration: line-through; color: #bbb; font-weight: 400; margin-right: 3px; }
.tt-menu .tt-suggestion .tt-price-sale { color: #c0392b; font-weight: 700; }
.tt-menu strong.highlight { background: #fcf884; font-weight: inherit; }

.tt-dataset-categories .tt-suggestion,
.tt-dataset-brands .tt-suggestion { display: inline-block; padding: 0; }

.tt-dataset-categories .tt-suggestion:hover,
.tt-dataset-brands .tt-suggestion:hover { background-color: transparent; cursor: default; }

.tt-dataset-categories .tt-suggestion .btn:hover,
.tt-dataset-brands .tt-suggestion .btn:hover { cursor: pointer; }




#search-advanced { position: relative; }
.navbar-form.search { position: relative; }
.advanced-search { width: 99%; margin: 0 auto; }
.advanced-search .icon { position: absolute; left: 20px; top: 6px; z-index: 1; }
.advanced-search .input { position: relative; }
.advanced-search .input input { width: 100%; border: 1px solid #f1f1f1; padding: 10px 100px 10px 40px; color: #333; }
.advanced-search .input input:focus { outline: none; border: 1px solid #b9b9b9; }
.advanced-search .input input::placeholder { color: #ccc; opacity: 1; }
.advanced-search .button { position: absolute; right: 25px; top: 8px; }
.advanced-search .button input { background: transparent; border-color: transparent; font-weight: 700; color: #5e5e5e; }
.advanced-search .search-clear-btn { background: #f9f7f7; border: 2px solid white; }

.advanced-search .tt-menu { width: 100%; background: #fff; border: 1px solid #f1f1f1; border-radius: 2px; }
.advanced-search .tt-dataset-products .tt-suggestion:hover { background-color: #eaeaea; }
.advanced-search .tt-dataset-categories,
.advanced-search .tt-dataset-brands { padding: 8px 4px; }

@media only screen and (max-width: 767px) {
    .advanced-search .icon { top: 22px; }
    .advanced-search .button { top: 18px; }
}




.search-box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.96); z-index: 9999; will-change: opacity, transform; transform: translateZ(0); }
.search-box > .container { display: table; vertical-align: top; text-align: center; height: 100%; }
.search-box .hide-search-box { z-index: 1; cursor: pointer; position: absolute; right: 15px; top: 15px; width: 50px; height: 50px; font-size: 48px; }
.search-box #search { display: table-cell; vertical-align: top; text-align: center; }
.search-box .input { margin: 75px auto 0 auto; position: relative; width: 100%; border: 3px solid #484848; max-width: 450px; padding: 18px 15px; border-radius: 30px; color: #484848; }
.search-box .input input { border: 0; width: 100%; background: transparent; padding: 0px 26px 0px 19px; }
.search-box .input input:focus { outline: none; border: 1px solid transparent;}
.search-box .input input::placeholder { color: #ccc; opacity: 1; }
.search-box .input input::-ms-input-placeholder { color: #ccc; }
.search-box .input .button { position: absolute; right: 10px; top: 18px; }
.search-box .input .button input { background: transparent; border-color: transparent; font-weight: 700; color: var(--theme-color); }
.search-box .search-clear-btn { background: transparent; border: none; font-size: 18px; color: #999; cursor: pointer; padding: 2px 15px; line-height: 1; }
.search-box .search-clear-btn:hover { color: #333; }

.search-box .twitter-typeahead { display: block !important; max-width: 450px; margin: 0 auto; }
.search-box .tt-menu { width: 100%; max-width: 450px; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; margin-top: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); text-align: left; overflow: hidden; }
.search-box .tt-dataset-categories,
.search-box .tt-dataset-brands { padding: 8px 12px; border-bottom: 1px solid #f1f1f1; }
.search-box .tt-dataset-products .d-block { font-size: 12px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-top: 1px solid #f1f1f1; }

@media only screen and (max-width: 767px) {
    .search-box { transition: opacity 0.15s ease-in-out; }
    .search-box > .container { width: 90%; }
    .search-box .tt-menu { border-radius: 8px; }
}

body.noscroll { position: fixed; width: 100%; overflow: hidden !important; }






/* ============================================================
   header — mobilni (do 900px)
   ============================================================ */
@media (max-width: 900px) {
	.navBar { display: flex; gap: 4px; }
	.navLeft { flex: none; }
	.navRight { margin-left: auto; }
	.navRight .navIconBtn { display: none; }
	.navRight .navSearchBtnDesk { display: none; }
	.navUser { display: none; }
	.navCallBtn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--theme-color); color: var(--white-color); border-radius: var(--r); font-size: var(--nav-fs-md); font-weight: 600; white-space: nowrap; transition: background var(--t); }
	.navCallBtn:hover { background: var(--theme-color-darker); color: var(--white-color); }
	.navSearchBtnMob { display: flex; }
	.navHamburger { display: flex !important; }
	.navMenuWrap { position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: var(--nav-bg); display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 0; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; z-index: 999; }
	.mainNav.open .navMenuWrap { opacity: 1; pointer-events: all; transform: translateY(0); }
	.navMobActions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 12px 32px; width: 100%; }
	.navMobActions .navBtn { justify-content: center; padding: 14px; font-size: var(--nav-fs-md); width: 100%; }
	.navMobActions .navBtnGhost { border: 1px solid var(--nav-border); }

	.navMenu { flex-direction: column; align-items: stretch; gap: 0; flex: none; width: 100%; }
	.navItem { position: static; }
	.navItem + .navItem { border-top: 1px solid var(--nav-border); }
	.navLinkWrap { border-radius: 0; position: relative; }
	.navLink { flex: 1; padding: 15px 16px; font-size: var(--nav-fs-lg); }
	.navSubBtn { position: absolute; right: 0; top: 0; bottom: 0; width: 60px; height: auto; margin: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; }
	.navItem[data-sub] .navLink { padding-right: 68px; }

	.navDrop,
	.navCatMenu { display: none; position: static !important; width: 100% !important; padding: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
	.navItem.open .navDrop,
	.navItem.open .navCatMenu { display: block; }
	.dropBox { width: auto !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 0 8px 16px !important; display: block !important; background: transparent !important; }
	.navCatMenu .dropBox::before { display: none; }
	.dropInner { display: block !important; }
	.navCatMenu .dropBox { padding: 0 !important; }
	.navCatMenu .dropInner { display: block !important; position: static !important; min-height: 0 !important; padding: 0; }
	.catItem { width: 100% !important; margin: 0; border-radius: 0; padding: 13px 16px; border-bottom: 1px solid var(--nav-border); }
	.subPanel { position: static !important; left: auto !important; top: auto !important; right: auto !important; display: none; grid-template-columns: 1fr 1fr; padding: 6px 8px 6px 16px !important; border-bottom: 1px solid var(--nav-border); background: #fafafa; }
	.subPanel.active { display: grid; }
	.subPanelTitle { padding: 6px 4px 4px; }
}
@media (max-width: 399px) {
	.navCallText { display: none; }
	.navCallBtn { padding: 8px; border-radius: 50%; }
}
@media (max-width: 575px) {
	.subPanel { grid-template-columns: 1fr; }
}

/* ============================================================
   footer
   ============================================================ */
#footer { font-size: var(--nav-fs-md); }

/* footerTop — kontakt CTA */
.footerTop { background: linear-gradient(180deg, var(--white-color) 0%, var(--footer-bg) 100%); padding: 72px 20px 84px; text-align: center; }
.footerTopTitle { color: var(--footer-title); font-size: clamp(26px, 4vw, 35px); font-weight: 700; margin-bottom: 6px; }
.ftTagline { font-weight: 400; color: var(--footer-text); margin-bottom: 8px; }
.ftLabel { color: var(--footer-title); font-weight: 700; margin-bottom: 2px; }
.ftHours { color: var(--footer-text); margin-bottom: 28px; }
.btnPhone { display: inline-flex; align-items: center; gap: 8px; background: var(--alt-color); color: var(--white-color); border-radius: 50px; padding: 13px 36px; font-weight: 700; letter-spacing: .4px; box-shadow: 0 4px 18px rgba(242,165,61,.35); transition: background .2s, transform .15s, box-shadow .2s; }
.btnPhone:hover { background: var(--order-btn-alt-darker); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(242,165,61,.45); color: var(--white-color); }

/* footerMain */
.footerMain { background: var(--footer-bg); padding: 56px 0 36px; }
.footerBrandCard { background: rgba(255,255,255,.55); box-shadow: 2px 2px rgba(215,215,215,.2); border-radius: 12px; padding: 28px 22px; height: 100%; }
.footerBrandCard .footerLogo { max-height: 44px; margin-bottom: 16px; }
.footerBrandCard p { color: var(--footer-text); line-height: 1.7; margin: 0; }
.socialIcons { list-style: none; padding: 0; margin: 20px 0 0; display: flex; gap: 8px; }
.socialIcons li a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white-color); color: var(--footer-text); font-size: 16px; transition: background var(--t), color var(--t); }
.socialIcons li a:hover { background: var(--theme-color); color: var(--white-color); }

.footerTitle { font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--footer-title); margin-bottom: 15px; }
.footerLinksCol ul { list-style: none; padding: 0; margin: 0; }
.footerLinksCol ul li { margin-bottom: 9px; color: var(--footer-text); }
.footerLinksCol ul li a { color: var(--footer-text); transition: color .15s; }
.footerLinksCol ul li a:hover { color: var(--theme-color); }

/* footerBottom */
.footerBottom { background: var(--footer-bg); border-top: 1px solid rgba(88,175,26,.18); padding: 16px 0; }
.footerCopy { color: var(--footer-text); margin: 0; }
.footerCopy a { color: var(--footer-title); font-weight: 700; }
.footerCreditCards { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.footerCreditCards img { max-height: 28px; }

/* footer — mobilni */
@media (max-width: 575px) {
	.footerTop { padding: 50px 16px 60px; }
	.btnPhone { padding: 12px 26px; }
	.footerMain { padding: 36px 0 24px; }
	.footerLinksCol .footerTitle { border-bottom: 1px solid rgba(88,175,26,.18); padding-bottom: 8px; }
	.footerCopy { text-align: center; margin-bottom: 10px; }
	.footerCreditCards { justify-content: center; }
}

/* ============================================================
   cookie notifikacija + scrollToTop
   ============================================================ */
.cookieNotification { position: fixed; left: 16px; bottom: 16px; z-index: 1050; max-width: 360px; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: 12px; box-shadow: var(--drop-sh); padding: 18px 20px; }
.cookieHeader { font-weight: 700; color: var(--txt); margin-bottom: 6px; }
.cookieNotification p { color: var(--txt2); font-size: var(--nav-fs-md); margin-bottom: 12px; }
.closeCookieNotification { display: inline-block; background: var(--theme-color); color: var(--white-color); padding: 8px 18px; border-radius: var(--r); font-weight: 500; transition: background var(--t); }
.closeCookieNotification:hover { background: var(--theme-color-darker); color: var(--white-color); }

.scrollToTop { position: fixed; right: 16px; bottom: 16px; z-index: 1040; font-size: 36px; color: var(--theme-color); line-height: 1; transition: color var(--t), transform var(--t); }
.scrollToTop:hover { color: var(--theme-color-darker); transform: translateY(-2px); }

/* ============================================================
   bigBanner — Ken Burns hero slajder (Swiper 12)
   ============================================================ */
.bigBanner { position: relative; width: 100%; overflow: hidden; --slide-h: 650px; --kb-scale: 1.12; --kb-duration: 7s; }
.swiperKenBurns { width: 100%; height: var(--slide-h); }
.swiperKenBurns .swiper-slide { position: relative; overflow: hidden; width: 100%; height: var(--slide-h); }
.swiperKenBurns .swiper-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.75) 100%); pointer-events: none; z-index: 1; }
.kenBurns { position: absolute; inset: -5%; width: 110%; height: 110%; background-size: cover; background-position: center; transform-origin: center center; will-change: transform; }
.swiperKenBurns .swiper-slide-active .kenBurns { animation: kbZoom var(--kb-duration) ease-in-out forwards; }
.swiperKenBurns .swiper-slide:nth-child(2n) .kenBurns { transform-origin: 70% 60%; }
.swiperKenBurns .swiper-slide:nth-child(2n).swiper-slide-active .kenBurns { animation-name: kbZoomAlt; }
@keyframes kbZoom { from { transform: scale(1) translate(0, 0); } to { transform: scale(var(--kb-scale)) translate(-1.5%, -1%); } }
@keyframes kbZoomAlt { from { transform: scale(1) translate(0, 0); } to { transform: scale(var(--kb-scale)) translate(1.5%, 1%); } }
@media (prefers-reduced-motion: reduce) {
	.kenBurns { animation: none !important; }
}
.videoWrapper { position: absolute; inset: 0; overflow: hidden; }
.videoWrapper video { width: 100%; height: 100%; object-fit: cover; }
.bannerCaption { position: absolute; inset: 0; z-index: 4; padding: 40px 48px; display: flex; align-items: center; justify-content: center; text-align: center; }
.bannerCaptionInner { max-width: 640px; transform: translateY(12px); opacity: 0; transition: transform .55s ease .25s, opacity .55s ease .25s; }
.swiperKenBurns .swiper-slide-active .bannerCaptionInner { transform: translateY(0); opacity: 1; }
.bannerCaption .bannerLabel { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2.8px; text-transform: uppercase; color: var(--theme-color-lighter); margin-bottom: 8px; }
.bannerCaption .bannerTitle { font-size: clamp(26px, 3.5vw, 42px); font-weight: 500; line-height: 1.2; color: var(--white-color); margin-bottom: 12px; }
.bannerCaption .bannerSub { font-size: var(--nav-fs-md); color: rgba(255,255,255,.72); margin-bottom: 20px; }
.themeButton { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.9px; text-transform: uppercase; color: var(--white-color); background: var(--alt-color); padding: 10px 26px; border-radius: 2px; transition: background .2s; }
.themeButton:hover { background: var(--order-btn-alt-darker); color: var(--white-color); }
.slideLink { position: absolute; inset: 0; z-index: 3; display: block; }
.swiperKenBurns .swiper-pagination { bottom: 20px !important; }
.swiperKenBurns .swiper-pagination-bullet { width: 6px; height: 6px; background: rgba(255,255,255,.45); opacity: 1; border-radius: 50%; transition: background .3s, transform .3s; }
.swiperKenBurns .swiper-pagination-bullet-active { background: var(--theme-color-lighter); transform: scale(1.4); }
.swiperKenBurns .swiper-button-prev,
.swiperKenBurns .swiper-button-next { width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); color: var(--white-color); transition: background .2s, border-color .2s; }
.swiperKenBurns .swiper-button-prev:hover,
.swiperKenBurns .swiper-button-next:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }
.swiperKenBurns .swiper-button-prev::after,
.swiperKenBurns .swiper-button-next::after { font-size: 13px; font-weight: 700; }
@media (max-width: 768px) {
	.bigBanner { --slide-h: 440px; }
	.bannerCaption { padding: 24px 20px; }
}

/* ============================================================
   validatrix — poruke obaveznih polja
   ============================================================ */
.requiredLabel { color: var(--red); font-size: var(--nav-fs-sm); margin-top: 4px; }
.requiredActive { border-color: var(--red) !important; }
/* ============================================================
   kartica proizvoda — grid + swiper (.one-product / .product-holder)
   ============================================================ */
.one-product { text-align: left; }
.one-product .product-holder { position: relative; height: 100%; padding: 14px; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); transition: box-shadow var(--t), transform var(--t), border-color var(--t); display: flex; flex-direction: column; }
.one-product .product-holder:hover { transform: translateY(-4px); box-shadow: var(--nav-shadow); border-color: transparent; }

/* slika */
.one-product .product-img { position: relative; overflow: hidden; border-radius: var(--r); margin-bottom: 12px; }
.one-product .product-img img.photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: transform .4s ease; }
.one-product .product-holder:hover .product-img img.photo { transform: scale(1.04); }
.one-product .product-img .brand { position: absolute; right: 6px; bottom: 6px; background: rgba(255,255,255,.85); border-radius: 4px; padding: 2px 4px; }
.one-product .product-img .brand img { max-height: 26px; width: auto; aspect-ratio: auto; }

/* wishlist srce */
.one-product .follow-featured { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 20px; line-height: 1; }
.one-product .follow-featured label { cursor: pointer; margin: 0; color: var(--txt3); transition: color var(--t); }
.one-product .follow-featured label:hover { color: var(--red); }
.one-product input[type="checkbox"].icon-checkbox { display: none; }
.one-product input[type="checkbox"].icon-checkbox + label .unchecked { display: inline; }
.one-product input[type="checkbox"].icon-checkbox + label .checked { display: none; color: var(--red); }
.one-product input[type="checkbox"]:checked.icon-checkbox + label .unchecked { display: none; }
.one-product input[type="checkbox"]:checked.icon-checkbox + label .checked { display: inline; }

/* flagovi (novo / akcija / popularno / popust) */
.product-flags { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.exp-on-new, .exp-on-action, .exp-on-top, .exp-on-discount { padding: 3px 9px; color: var(--white-color); border-radius: 50px; line-height: 1.4; }
.exp-on-new { background: var(--theme-color); }
.exp-on-action { background: var(--red); }
.exp-on-top { background: var(--alt-color); }
.exp-on-discount { background: var(--dark-color); }

/* sadrzaj kartice */
.one-product .product-content-short { display: flex; flex-direction: column; flex: 1; }
.one-product .product-title { margin-bottom: 8px; min-height: 42px; }
.one-product .product-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--txt); transition: color var(--t); }
.one-product .product-title a:hover { color: var(--theme-color); text-decoration: none; }

/* cene */
.one-product .price { color: var(--theme-color); font-size: 18px; font-weight: 700; }
.one-product .price-old { color: var(--txt3); font-size: 14px; font-weight: 400; text-decoration: line-through; margin-right: 6px; }
.one-product .salesprice { color: var(--theme-color); font-size: 18px; font-weight: 700; }
.one-product .currency { font-size: 13px; font-weight: 500; }
.one-product .promo-text { margin: 6px 0; font-size: 13px; color: var(--alt-color); }
.one-product .exp-on-difference { font-size: 12px; color: var(--txt2); }

/* rating (RateYo render prostor) */
.one-product .rateYoGet { margin: 6px 0; }

/* CTA dugme + kolicina */
.one-product .add-to-cart-short { margin-top: auto; padding-top: 12px; }
.one-product .product-holder label { margin: 0; }
.one-product .product-holder label span { display: none; }
.one-product .short-add-to-cart-btn { width: 100%; background: var(--order-btn); color: var(--white-color); font-weight: 700; padding: 9px 12px; border: 0; border-radius: 50px; cursor: pointer; transition: background var(--t), transform var(--t); }
.one-product .short-add-to-cart-btn:hover { background: var(--order-btn-darker); }
.one-product .short-add-to-cart-btn:active { transform: translateY(2px); }
.one-product .short-add-to-cart-input { padding: 7px 9px; width: 60px; border: 1px solid var(--nav-border); border-radius: var(--r); }

/* swiper kontekst */
.swiper-container.swiperProducts { padding: 10px !important; }
.swiperProducts .swiper-slide { height: auto; }

/* ============================================================
   kartica kategorije — shop (.productcategory-holder) + swiper (.cat-holder) + home (snip1321)
   ============================================================ */
.one-product .productcategory-holder { height: 100%; text-align: center; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); padding: 12px; transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.one-product .productcategory-holder:hover { transform: translateY(-4px); box-shadow: var(--nav-shadow); border-color: transparent; }
.one-product .productcategory-holder .product-img { overflow: hidden; border-radius: var(--r); margin-bottom: 12px; }
.one-product .productcategory-holder .product-img img.photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.one-product .productcategory-holder:hover .product-img img.photo { transform: scale(1.05); }
.one-product .productcategory-holder h3 { margin: 0; font-size: 15px; font-weight: 500; }
.one-product .productcategory-holder h3 a, .one-product .productcategory-holder a h3 { color: var(--txt); transition: color var(--t); }
.one-product .productcategory-holder:hover h3, .one-product .productcategory-holder:hover h3 a { color: var(--theme-color); }

/* swiper kategorije */
.one-category .cat-holder { height: 100%; text-align: center; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); padding: 12px; transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.one-category .cat-holder:hover { transform: translateY(-4px); box-shadow: var(--nav-shadow); border-color: transparent; }
.one-category .cat-holder img.photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin-bottom: 10px; transition: transform .4s ease; }
.one-category .cat-holder:hover img.photo { transform: scale(1.05); }
.one-category .cat-title { font-size: 15px; font-weight: 500; }
.one-category .cat-title a { color: var(--txt); transition: color var(--t); }
.one-category .cat-holder:hover .cat-title a { color: var(--theme-color); }

/* home kategorije (figure.snip1321) */
figure.snip1321 { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-md); }
figure.snip1321 img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
figure.snip1321:hover img { transform: scale(1.06); }
figure.snip1321 figcaption { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 60%); }
figure.snip1321 figcaption i { display: none; }
figure.snip1321 h2 { margin: 0; font-size: 17px; font-weight: 500; color: var(--white-color); }

/* ============================================================
   kartica vesti — listing (.news-template-short2/3/4) + brendovi (.service-box)
   ============================================================ */
.one-news { margin-bottom: 24px; }

/* short2 — grid vesti */
.news-template-short2 .imgdiv { overflow: hidden; border-radius: var(--r-md); margin-bottom: 12px; aspect-ratio: 16 / 10; background: var(--hover); }
.news-template-short2 .imgdiv img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.news-template-short2:hover .imgdiv img { transform: scale(1.05); }
.news-template-short2 .content { padding: 0 2px; }
.news-template-short2 .news-category-badge { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--theme-color); margin-bottom: 6px; transition: color var(--t); }
.news-template-short2 .news-category-badge:hover { color: var(--theme-color-darker); }
.news-template-short2 .title { margin-bottom: 8px; }
.news-template-short2 .title a { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--txt); transition: color var(--t); }
.news-template-short2 .title a:hover { color: var(--theme-color); }
.news-template-short2 p { font-size: 14px; color: var(--txt2); line-height: 1.6; margin: 0; }

/* short3 — vesti red (slika levo, tekst desno) */
.news-template-short3 .imgdiv { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--hover); }
.news-template-short3 .imgdiv img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.news-template-short3:hover .imgdiv img { transform: scale(1.05); }
.news-template-short3 .news-category-badge { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--theme-color); }
.news-template-short3 .title { margin: 6px 0; }
.news-template-short3 .title a { font-size: 18px; font-weight: 500; color: var(--txt); transition: color var(--t); }
.news-template-short3 .title a:hover { color: var(--theme-color); }

/* flag video / galerija na slici vesti */
.imgdiv { position: relative; }
.video-box { position: absolute; top: 10px; left: 10px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: var(--white-color); border-radius: 50%; font-size: 14px; }

/* service-box — brendovi/ostalo */
.service-box { height: 100%; padding: 18px; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.service-box:hover { transform: translateY(-4px); box-shadow: var(--nav-shadow); border-color: transparent; }
.service-box .title { margin: 10px 0 6px; font-size: 16px; font-weight: 500; }
.service-box img { width: 100%; height: auto; border-radius: var(--r); }

/* ============================================================
   kartice — mobilni
   ============================================================ */
@media (max-width: 575px) {
	.one-product .product-holder { padding: 10px; }
	.one-product .product-title { min-height: 38px; }
	.one-product .product-title a { font-size: 14px; }
	.one-product .price, .one-product .salesprice { font-size: 16px; }
	.news-template-short2 .title a { font-size: 16px; }
}