/* ============================================================
   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 */
	--uhMuted: #7c857c; /* muted/secondary text on user pages */
}

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

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; }
.hidden { display: none !important; }
select {cursor: pointer; border: 0;}
img {max-width: 100%; height: auto; }
.xadmin-links {position: fixed; right: 0; top: 50%; background: var(--theme-color); border: 1px solid #fff;z-index: 10; }
.xadmin-links a {padding: 6px 10px; display: block; color: #fff;}

/* custom 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; }
}

@media (max-width: 359.98px) {
  .hide-on-xxs { display: none !important; }
}


/* ============================================================
   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
   ============================================================ */
#header { position: sticky; top: 0; z-index: 1000; }
.mainNav { position: relative; 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: end; }
.navLogo { display: flex; align-items: center; flex-shrink: 0; max-width: 100%; width: auto;}
.navLogo img { max-height: 40px; width: auto;}

/* 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 12px; font-size: var(--nav-fs-md); font-weight: 400; 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: 18px; 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); }

/* ============================================================
   Usluge dropdown — dopuna (.ddSub opis ispod labele)
   ============================================================ */
.ddSub { display: block; color: var(--txt3); font-size: var(--nav-fs-sm); font-weight: 400; margin-top: 1px; }

/* ============================================================
   Akcija — mega meni (navMega, 3 kolone)
   ============================================================ */
.navMega { position: absolute; top: 100%; left: 50%; padding-top: 10px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t); z-index: 1001; }
@media (min-width: 901px) {
	.navItem:hover .navMega { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); }
}
.navItem.open .navMega { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); }
.navMega .dropBox { width: 680px; padding: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 24px; }
.mmHeading { font-size: var(--nav-fs-sm); font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--txt3); padding: 2px 10px 8px; }
.mmItem { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; transition: background var(--t); }
.mmItem:hover { background: var(--hover); }
.mmIcon { width: 34px; height: 34px; background: var(--theme-color-light); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--theme-color); font-size: 16px; transition: background var(--t), color var(--t); }
.mmItem:hover .mmIcon { background: var(--theme-color); color: var(--white-color); }
.mmLabel { display: block; font-size: var(--nav-fs-md); font-weight: 500; color: var(--txt); }
.mmDesc { display: block; font-size: var(--nav-fs-sm); color: var(--txt3); margin-top: 1px; }
.mmDivider { grid-column: 1/-1; height: 1px; background: var(--nav-border); margin: 12px 0; }
.mmFooter { grid-column: 1/-1; display: flex; gap: 8px; padding-top: 4px; }
.mmBadge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--hover); border-radius: 6px; font-size: var(--nav-fs-md); font-weight: 500; color: var(--txt2); transition: background var(--t), color var(--t); }
.mmBadge:hover { background: var(--theme-color-light); color: var(--theme-color); }

/* ============================================================
   Kompanija — ugnjezdeni meni (nestedMenu, fly-out podnivoi)
   ============================================================ */
.nestedMenu { min-width: 220px; padding: 6px; }
.ndItem { position: relative; }
.ndLink { display: flex; align-items: center; justify-content: space-between; gap: 8px; 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); }
.ndLink:hover, .ndItem.ndOpen .ndLink { background: var(--hover); color: var(--txt); }
.ndArrow { width: 12px; height: 12px; flex-shrink: 0; stroke: var(--txt3); fill: none; stroke-width: 2; stroke-linecap: round; transition: stroke var(--t); }
.ndItem.ndOpen .ndArrow, .ndLink:hover .ndArrow { stroke: var(--theme-color); }
.ndSub { position: absolute; top: -6px; left: calc(100% - 2px); min-width: 200px; background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: var(--r-md); box-shadow: var(--drop-sh); padding: 6px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t); }
@media (min-width: 901px) {
	.ndItem:hover > .ndSub { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(0); }
}
.ndItem.ndOpen > .ndSub { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(0); }
.ndSubItem { display: block; padding: 8px 11px; border-radius: 6px; font-size: var(--nav-fs-md); font-weight: 500; color: var(--txt2); transition: background var(--t), color var(--t); }
.ndSubItem:hover { background: var(--hover); color: var(--txt); }
.ndDivider { height: 1px; background: var(--nav-border); margin: 5px 0; }



/* ============================================================
   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; margin-left: auto; transition: background var(--t), color var(--t); }
.searchPanelSubmit:hover { background: var(--theme-color); color: var(--white-color); }
/* typeahead: fuzzySearch.js obmota .fuzzySearchQuery u <span.twitter-typeahead> */
.searchPanelForm .twitter-typeahead { flex: 1 1 auto; min-width: 0; display: block !important; }
.searchPanelForm .tt-input, .searchPanelForm .tt-hint { width: 100% !important; padding: 0; border: 0; background: transparent; font-size: var(--nav-fs-md); color: var(--txt); outline: none; }
.searchPanelForm .tt-hint { color: var(--txt3); }
.searchPanel .tt-menu { position: absolute !important; top: calc(100% + 10px) !important; left: 0 !important; right: 0 !important; width: auto !important; max-height: 60vh; overflow-y: auto; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: 8px; box-shadow: var(--nav-shadow); z-index: 999; }



.tt-menu .tt-suggestion { padding: 8px 16px; cursor: pointer; }
.tt-menu .tt-suggestion a { display: flex; align-items: flex-start; text-decoration: none; color: inherit; width: 100%; }
.tt-menu .tt-suggestion .btn:hover { background-color: var(--theme-color-darker); color: #fff; }
.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 {  color: #666; margin-top: 2px; }
.tt-menu .tt-suggestion .tt-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px;  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; }


	/* form postaje pozicioni kontekst za padajući meni */
	.searchPanelForm { position: relative; }
	.searchPanelForm .twitter-typeahead { position: static !important; }

}




.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; }


@media screen and (min-width: 901px){
    .navIconMob {display: none;}
}


/* ============================================================
   header — mobilni (do 900px)
   ============================================================ */
@media (max-width: 900px) {
	.navBar { display: flex; gap: 4px; }
	.navLeft {flex: 1 1 100%;}
	.navRight { margin-left: auto; }
	.navRight .navIconBtn { display: none; }
	.navRight .navSearchBtnDesk { display: none; }
	.navRight .navIconMob {padding: 0 5px; position: relative;}
	.navRight .navIconMob i {font-size: 18px;}
	.navRight .navIconMob .navBadge {display: flex; align-items: center; justify-content: center;top: 15px; right: -5px; width: 18px; height: 18px; padding: 0;}
	.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,
	.navMega,
	.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 .navMega,
	.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: 440px) {
	.navCallText { display: none; }
}
@media (max-width: 575px) {
	.subPanel { grid-template-columns: 1fr; }
}


@media (max-width: 380px) {
    .navCallBtn {display: none;}
}


/* ============================================================
   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 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; }
	.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; z-index: 2;}
.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(--theme-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.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-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); padding: 12px;  }
.one-category .cat-holder:hover {  }
.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); }


/* ============================================================
   kartica vesti — listing (.news-template-short2/3/4) + brendovi (.service-box)
   ============================================================ */

/* 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 { 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; }
}

/* ============================================================
   FAZA 1 — STATIČKE STRANE (about, contact, faq, team, 404)
   ============================================================ */


/* legacy layout helperi */
.box-shadow { box-shadow: 3px 3px 9px -2px rgba(0,0,0,.25); }
.text-shadow { text-shadow: -2px 1px 5px #494949; }

/* dugmad / linkovi */
.theme-button { display: inline-flex; align-items: center; background: var(--theme-color); color: var(--white-color); border: 2px solid transparent; padding: 9px 20px; line-height: 25px; border-radius: 6px; font-weight: 700; text-align: center; text-decoration: none; white-space: break-spaces; cursor: pointer; transition: background var(--t), color var(--t); }
.theme-button:hover, .theme-button:focus { background: var(--theme-color-darker); color: var(--white-color); text-decoration: none; }
.theme-color { color: var(--theme-color); }
.theme-underline { color: var(--theme-color); text-decoration: underline; text-underline-offset: 3px; }
a.animated-dark { display: inline-block; border: 2px solid var(--dark-color); color: var(--dark-color); padding: 13px 36px; font-weight: 700; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--t), color var(--t); }
a.animated-dark:hover { background: var(--dark-color); color: var(--white-color); text-decoration: none; }


/* about — sekcije tekst + slika */
.section-title { font-size: 24px; font-weight: 400; }
@media screen and (min-width: 768px){
    .section-title {font-size: 34px;}
}
.text-img-section { padding: 50px 0; }
.my-responsive-baner { flex-wrap: wrap; background: transparent; padding: 30px 15px; }
.my-responsive-baner.img-first { flex-direction: row-reverse; }
.my-responsive-baner h1 { margin: 0 0 15px; }
.my-responsive-baner p { line-height: 1.6; }
.my-responsive-baner hr { width: 30%; margin: 0; border: 0; border-top: 3px solid var(--theme-color); }
.my-responsive-baner .text-container { padding: 0 50px; }
.my-responsive-baner img { border-radius: 5px; box-shadow: rgb(100 100 111 / 20%) 0 4px 20px 0; }

/* faq — akordeon (custom.js: slideToggle + togglerSkriven) */
.toggler-one { display: block; position: relative; }
.faq .toggler-one { border-top: 1px solid #e1e1e1; }
.faq .toggler-one .tgNaslov { display: block; padding: 22px 20px; margin: 0; font-size: 20px; line-height: 30px; color: var(--dark-color); background: none; text-decoration: none; cursor: pointer; transition: color var(--t); }
.faq .toggler-one .tgNaslov:hover { color: #000; }
.faq .toggler-one .tgSadrzaj { padding: 0 20px 34px; }
.faq .toggler-one a.toggler:after { transition: transform .2s linear; }
.faq .toggler-one a.toggler:not(.togglerSkriven):after { transform: rotate(-45deg); }
.tgSadrzaj.nevidljivo { display: none; }

.tgNaslov {position: relative; padding: 12px 0; width: 100%; display: flex; font-size: 16px; border-bottom: 0; background: none; border-top: 1px solid #cacaca; }
.togglerSkriven {background-image: none!important;}
.tgNaslov:after { content: ''; position: absolute; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22currentColor%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%22/%3E%3C/svg%3E'); 
background-repeat: no-repeat; width: 18px; height: 18px; background-size: 18px 18px; right: 0; top: calc(50% - 9px); transform: rotate(180deg);  }
.tgNaslov.togglerSkriven:after {transform: rotate(0deg);}
.tgSadrzaj {padding: 0 0 15px;}
.tgSadrzaj.nevidljivo {display: none;}

/* team — kartice tima */
.team .team-image { position: relative; overflow: hidden; border-radius: var(--r-md); }
.team .team-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.team .team-item:hover .team-image img { transform: scale(1.05); }
.team .team-social-wrapper { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
.team .team-social-content h3 { margin: 0 0 2px; font-size: 18px; color: var(--white-color); }
.team .team-social-content h4 { margin: 0; font-size: 14px; font-weight: 400; color: rgba(255,255,255,.85); }

/* animate-me — fade-in-up bez animate.css (JS dodaje .animate__animated na skrol) */
.animate-me { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.animate-me.animate__animated { opacity: 1; transform: none; }

/* statičke strane — mobilni */
@media (max-width: 767px) {
	.my-responsive-baner { flex-direction: column; }
	.my-responsive-baner.img-first { flex-direction: column; }
	.my-responsive-baner .text-container { padding: 0 15px; }
}
@media (max-width: 575px) {
	.p-xs-15 { padding-left: 15px !important; padding-right: 15px !important; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.animate-me { opacity: 1; transform: none; transition: none; }
}



/* BS3 -> BS5 compat (templejti koriste stare nazive klasa) */
.hide { display: none !important; }


.productbrand .sidebar .logo {max-width: 150px}

/* product page header fix */
.responsive-center {text-align: center;}
.responsive-clearfix { clear: both;}




/* brands-advanced2 — raspored: veliko slovo + lista brendova */
.brand-row { display: flex; flex-wrap: wrap; align-items: flex-start; }

/* b2b-login — ikone u poljima forme (Bootstrap Icons) */
.usericon, .passicon { position: relative; }
.usericon:before, .passicon:before { position: absolute; left: 0; top: 0; width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; font-family: "bootstrap-icons"; font-size: 20px; opacity: .55; pointer-events: none; }
.usericon:before { content: "\F4E1"; }
.passicon:before { content: "\F44F"; }
.usericon .form-control, .passicon .form-control { padding-left: 44px; }

/* blog — intro sekcija */

/* pagination — gola <li><a> struktura (blog, news) */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 0; list-style: none; }
.pagination li a { display: block; padding: 9px 15px; border: 1px solid var(--nav-border); border-radius: var(--r); color: var(--txt); text-decoration: none; transition: background var(--t), color var(--t), border-color var(--t); }
.pagination li a:hover { background: var(--theme-color); border-color: var(--theme-color); color: var(--white-color); }
.pagination li.active a { background: var(--theme-color); border-color: var(--theme-color); color: var(--white-color); }

/* grupa 2 — mobilni / compat širine */
@media (min-width: 576px) {
	.col-sm-offset-1 { margin-left: 8.3333%; }
}





/* breadcrumb — override BS5 (static templejti koriste <ul> sa golim <li>) */
.breadcrumb { display: flex; align-items: center; background: transparent; padding: 10px 0; margin-bottom: 0; font-size: 11px; list-style: none; }
.breadcrumb li { display: inline-block; }
.breadcrumb li a { color: var(--txt2); }
.breadcrumb li a:hover { color: var(--theme-color); }
.breadcrumb li.active { color: var(--txt3); }
.breadcrumb li + li:before { content: "/"; padding: 0 8px; color: var(--txt3); }
.breadcrumb li.back { cursor: pointer;margin-left: auto; }
.breadcrumb li.back:before { content: ""; padding: 0; }

@media (max-width: 767px) {
	.hidden-xs { display: none !important; }
	.scroll-xs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
	.brand-row .col-md-3 { width: 100%; }
	.brand-row .col-md-9 { width: 100%; }

	.breadcrumb { display: flex; overflow-x: auto; white-space: nowrap; padding: 5px 9px; list-style: none; background-color: #f8f9fa; margin: 0; border-radius: 5px;}
	.breadcrumb li { display: inline; }
	.breadcrumb::-webkit-scrollbar { height: 5px; }
	.breadcrumb::-webkit-scrollbar-track { background: #f1f1f1;}
	.breadcrumb::-webkit-scrollbar-thumb { background: #888; border-radius: 4px;}
	.breadcrumb::-webkit-scrollbar-thumb:hover { background: #ccc; }

}
@media (max-width: 575px) {
	.col-xs-6 { flex: 0 0 auto; width: 50%; }
	.col-xs-12 { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   FAZA 2 (grupa A) — grid temelj (kategorije / proizvodi / shop)
   product-list-N se ponaša kao BS5 .row; kartice nose svoje col-* klase
   ============================================================ */
.product-list-2, .product-list-3, .product-list-4, .product-list-5, .product-list-6 { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.product-list-2 > *, .product-list-3 > *, .product-list-4 > *, .product-list-5 > *, .product-list-6 > * { padding-right: 12px; padding-left: 12px; margin-bottom: 24px; }

/* ============================================================
   FAZA 2 (grupa B) — cat-advanced
   (strana se najvećim delom stilizuje i skriptuje inline;
   ovde su samo rupe + BS3->BS5 compat)
   ============================================================ */

/* BS3 -> BS5 compat */
.row.gutter-10 { margin-right: -5px; margin-left: -5px; }
.row.gutter-10 > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.pull-right { float: right; }
.visible-xs, .visible-sm { display: none; }



/* swiper podkategorija — stil kartica (swiper se inicijalizuje u custom.js) */
.category-advanced-item { height: 100%; padding: 12px 16px; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); transition: box-shadow var(--t), border-color var(--t); }
.category-advanced-item:hover { border-color: transparent; box-shadow: var(--nav-shadow); }
.category-advanced-item a { color: var(--txt); text-decoration: none; }
.category-advanced-title { margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--txt); }

/* cat-advanced — mobilni / compat širine */
@media (max-width: 767px) {
	.visible-xs { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.visible-sm { display: block !important; }
	.hidden-sm { display: none !important; }
}

/* ============================================================
   FAZA 2 (grupa C) — search (rezultati pretrage)
   većina pokrivena ranije (grid/kartice/pagination); ovde rupe
   ============================================================ */

/* spacing helperi koji su falili (search, brands) */
.m-b-15 { margin-bottom: 15px !important; }
.m-b-30 { margin-bottom: 30px !important; }
.m-t-10 { margin-top: 10px !important; }
.m-l-15 { margin-left: 15px !important; }
.m-r-15 { margin-right: 15px !important; }

/* naslovi sekcija — linija iza teksta (h2.background > span) */
.search h2.background { position: relative; text-align: center; margin: 30px 0 24px; }
.search h2.background::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--nav-border); }
.search h2.background span { position: relative; padding: 0 18px; background: var(--white-color); }

/* rezultati kategorija/vesti — kartice (vesti nemaju .one-product) */
.search .category .product-holder { height: 100%; padding: 12px; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); text-align: center; transition: box-shadow var(--t), border-color var(--t); }
.search .category .product-holder:hover { border-color: transparent; box-shadow: var(--nav-shadow); }
.search .category .product-holder a { display: block; color: var(--txt); text-decoration: none; }
.search .category .product-holder img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 8px; }
.search .category .product-holder h4 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }

/* sortiranje rezultata */
.search .orderby { margin-bottom: 20px; }
.search .orderby select { padding: 8px 14px; border: 1px solid var(--nav-border); border-radius: var(--r); background: var(--white-color); color: var(--txt); cursor: pointer; }

/* ============================================================
   FAZA 3 (3A) — PROIZVOD: galerija + info kolona
   (portovano iz starog custom.css; v6 koristi iste klase/scope)
   ============================================================ */

/* BS3 -> BS5 + spacing */
.img-responsive { max-width: 100%; height: auto; }
.m-l-10 { margin-left: 10px !important; }

/* galerija — flagovi / promo / discount (slick layout je u slick.css) */
.product-photo { position: relative; }
.product-photo .img-holder { position: relative; overflow: hidden; }
.product-photo .promo-text { position: absolute; left: 15px; bottom: 30px; padding: 10px; background: var(--theme-color); color: #fff; font-size: 16px; }
.product-photo .discount-percent { position: absolute; right: 15px; top: 0; }
.product-flags { position: absolute; width: 65px; right: 7px; top: 8px; font-weight: 700; text-transform: uppercase; text-align: center; font-size: 11px; z-index: 1; }
.dropdown:hover ~ .product-flags { z-index: 0; }

/* video u galeriji */
.product .productitemvideo { position: relative; }
.product .productitemvideo img { width: 100% !important; }
.product .productitemvideo .bi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 27px; }
.product .thumbnail-image svg, .product .productitemvideo svg { position: absolute; left: 50%; top: 45%; width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 0 3px #000c); transform: translate(-50%, -30%); }
.product .productitemvideo svg { width: 50px; height: 50px; }


/* info kolona */
.product-details { position: relative; }
.product-details h1 { margin: -4px 0 10px; padding: 0; letter-spacing: 1px; }
.product-details .description { margin: 25px 0; }
.product-details ul { padding: 15px; list-style-type: circle; }
.product .product-brand { color: var(--theme-color); }
.product .product-brand img { max-width: unset; aspect-ratio: 2 / 1; }
.product .choose-option { color: #9b851f; }
.product .sticky-element { position: sticky; top: 0; height: auto; }

/* cena */
.product-details .price, .product-details .price .salesprice, .discountedprice { color: var(--theme-color); font-size: 17px; font-weight: 700; }
.product-details .price .price-old, .price-old-b2b { color: #868686; font-size: 14px; text-decoration: line-through; }
.product-details .price-description { color: #ea4a1f; font-weight: 700; }
.product-details .salespriceend { color: var(--theme-color); font-size: 13px; }
.price-vat-desc { font-size: 13px; }
.product .vat-info { color: #9f9f9f; }
.product-details .vat-info { color: #c6c6c6; font-size: 14px; font-weight: 400; }
.product-details .catalog-mode { padding: 20px; border: 1px solid var(--red); color: var(--red); }
.sp-input .available { color: var(--theme-color); }
.product .available i { font-size: 17px; }

/* tajmer (countdown) */
.countdown-timer-wrapper { min-height: 100px; max-width: 300px; margin-bottom: 10px; padding: 10px; border-radius: 5px; background-color: #6da67d; color: #fff; text-align: center; font-size: 12px; }
.countdown-timer-wrapper .timer { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 10px; }
.countdown-timer-wrapper .timer .timer-wrapper .time { font-size: 26px; font-weight: 700; }
.countdown-timer-wrapper .timer .timer-wrapper:last-of-type { color: #fde8e8; }
.countdown-timer-wrapper a { color: #fff; text-decoration: underline; }

/* quantity stepper + dugmad korpe */
/* fix: galerija i info kolona jedna pored druge (BS5 row kontekst) */
#product-sub-container { display: flex; flex-wrap: wrap; }
.mobile-slideshow { width: 100%; max-width: 100%; }
.mobile-slideshow .swiper { width: 100%; overflow: hidden; }
.mobile-slideshow .swiper-slide { overflow: hidden; text-align: center; }
.mobile-slideshow .swiper-slide a { display: block; }
.mobile-slideshow .swiper-slide img, .mobile-slideshow .swiper-slide video { display: block; width: 100%; max-width: 100%; height: auto; }

/* quantity blok — labela (unos + stanje) iznad reda sa steperom */
.product-details .sp-quantity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; padding-top: 2px; }
.product-details .quantity-label { display: block; width: 100%; margin-bottom: 8px; font-weight: 500; }
.product-details .quantity-label .available { color: var(--theme-color); }
.product-details .sp-input { display: flex; align-items: center; }
.product-details .add-border { padding: 0 10px; border: 1px solid #454d57; }
.product-details .btn-radius { border-radius: 25px; }
.product-details .sp-minus, .product-details .sp-plus { display: flex; align-items: center; height: 50px; padding: 0 5px; font-size: 22px; line-height: 38px; }
.product-details .sp-minus:hover, .product-details .sp-plus:hover { color: var(--theme-color); }
.product-details .quantity-input { width: 40px; height: 50px; border: 0; background: transparent; font-weight: 700; text-align: center; }
.product-details input.quantity-input:disabled { background: #fff; color: #000; }
.product-details a:hover { text-decoration: none; }
.product-details .add-to-cart {display: inline-flex; align-items: center; height: 50px; margin: 0 10px; padding: 13px 27px; background-color: var(--order-btn); color: #fff; font-size: 19px; text-transform: uppercase; }
.product-details .add-to-cart:hover { background-image: linear-gradient(to bottom, var(--order-btn), var(--order-btn-darker)); }
.product-details .go-to-checkout { padding: 14px 15px; background-color: var(--order-btn-alt); color: #fff; font-size: 18px; text-transform: uppercase; }
.product-details .go-to-checkout:hover { background-image: linear-gradient(to bottom, var(--order-btn-alt), var(--order-btn-alt-darker)); }

/* alt dugme */
.theme-button-alt { display: inline-block; padding: 9px 20px; line-height: 25px; border: 2px solid transparent; border-radius: 6px; background-color: var(--alt-color); color: #fff; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--t), color var(--t); }
.theme-button-alt:hover, .theme-button-alt:focus { background-color: var(--theme-color); color: #fff; text-decoration: none; }

/* favorite (srce) — inline round varijanta na strani proizvoda */
.addtofav.inline .checkbox-inline { padding-left: 0; }
.addtofav.inline .bi-heart, .addtofav.inline .bi-heart-fill { float: left; color: var(--theme-color); line-height: 23px; cursor: pointer; }
.addtofav.inline .text { float: left; margin-left: 15px; }
.addtofav.inline input[type="checkbox"].icon-checkbox { display: none; }
.addtofav.inline input[type="checkbox"].icon-checkbox + label .unchecked { display: inline; font-size: 20px; }
.addtofav.inline input[type="checkbox"].icon-checkbox + label .checked { display: none; font-size: 20px; }
.addtofav.inline input[type="checkbox"]:checked.icon-checkbox + label .unchecked { display: none; }
.addtofav.inline input[type="checkbox"]:checked.icon-checkbox + label .checked { display: inline; }
.addtofav.inline.round { margin-right: 10px; }
.addtofav.inline.round .checkbox-inline { display: flex; padding: 15px; }
.addtofav.inline.round .text { display: none; }
.addtofav.inline.round .follow-featured { border-radius: 50%; background-color: aliceblue; cursor: unset; }
.addtofav.inline.round .follow-featured label { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; cursor: pointer; }

/* product bullets + checklist */
ul.product-bullets { margin: 0 0 25px; padding: 0; }
ul.product-bullets li { padding: 4px 0; border-bottom: 1px dotted #ccc; list-style-type: none; }
ul.product-bullets li:last-child { border-bottom: 0; }
ul.product-bullets li a { text-decoration: underline; }
ul.product-bullets li .title { font-weight: 700; }
ul.checked { position: relative; padding-left: 0; list-style: none; }
ul.checked li { position: relative; margin-bottom: 10px; padding-left: 30px; }
ul.checked li::before { content: ""; position: absolute; left: 1px; top: 1px; width: 1em; height: 1em; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a679'%3E%3Cpath fill-rule='evenodd' d='M0 10a10 10 0 1 0 20 0 10 10 0 0 0-20 0zm15.2-1.8a1 1 0 0 0-1.4-1.4l-4.8 4.8-2.3-2.3a1 1 0 0 0-1.4 1.4l3 3c.4.4 1 .4 1.4 0l5.5-5.5z'%3E%3C/path%3E%3C/svg%3E"); }
ul.checked li a { color: #023c64; }



.productSpecs {padding: 60px 0;}
.productAccordion .accordion-item {background: transparent; border: none; border-bottom: 2px solid var(--theme-color); border-radius: 0; box-shadow: none;}
.productAccordion .accordion-item:last-of-type {border-bottom: 0;}
.productAccordion .accordion-header {margin: 0; }
.productAccordion .accordion-button {position: relative; display: flex; padding: 16px 0; font-size: 17px; font-weight: 700; background: transparent; border: none; box-shadow: none;}
.productAccordion .accordion-button:focus, .productAccordion .accordion-button:not(.collapsed) {color: inherit; background-color: transparent; box-shadow: none;}
.productAccordion .accordion-button::after {display: none;}
.productAccordion .accordion-button::before {content: '+'; position: absolute; right: 5px; font-size: 24px; font-weight: 500;}
.productAccordion .accordion-button:not(.collapsed)::before {content: '-'; right: 7px; font-size: 30px;}
.productAccordion .accordion-collapse {background: transparent;}
.productAccordion .accordion-body {padding: 16px 0;}
.productAccordion .accordion-body table {width: 100%;}
.productAccordion .accordion-body table th {padding-bottom: 8px;}
.productAccordion .accordion-body table tr {display: flex; justify-content: space-between; align-items: center; padding: 9px 10px;}
.productAccordion .accordion-body table tbody tr:nth-child(2n+1) {background: #f4ecdf; border-radius: 12px;}



/* PROIZVOD — mobilni */
@media (max-width: 767px) {
	.product h1 { margin-top: 4px; padding: 0; font-size: 22px; }
	.product-details h1 { font-size: 26px; }
	.product-details { min-height: 400px; }
	.product-details .add-to-cart { margin: 0 0 0 15px; padding: 13px 15px; font-size: 12px; }
	.product .mobile-slideshow { aspect-ratio: 1 / 1; }
	.product .mobile-slideshow img, .product .mobile-slideshow video { aspect-ratio: 1 / 1; object-fit: contain; }
	.countdown-timer-wrapper { max-width: 100%; margin-top: 15px; }
}



/* ============================================================
   FAZA 3 (3A2) — PROIZVOD: varijacije (boja / dugme / dropdown / legacy)
   ============================================================ */
.product-configuration { margin-bottom: 15px; border-bottom: 1px dashed #eaeaea; }

/* boja — swatch (color-choose) */
.product-color { margin-bottom: 15px; }
.color-choose div { display: inline-block; position: relative; margin-right: 3px; }
.color-choose input[type="radio"] { display: none; }
.color-choose input[type="radio"] + label span { display: inline-block; width: 40px; height: 40px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; transition: all .4s; border: 2px solid #fff; box-shadow: 0 1px 3px 0 rgba(0,0,0,.33); }
.color-choose input[type="radio"] + label span:hover { border: 2px solid #f9f9f9; box-shadow: 0 2px 4px 0 rgba(0,0,0,.43); }
.color-choose input[type="radio"].active + label span::before, .color-choose input[type="radio"]:checked + label span::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: url(/img/icon/icon-check.svg) no-repeat center; }

/* dugme — size buttons (product-button-choose) */
.product-button-choose { margin-bottom: 17px; }
.product-button-choose button { position: relative; margin: 0 5px 5px 0; padding: 10px 15px; border: 2px solid #e1e8ee; border-radius: 6px; color: #5e6977; background-color: #fff; cursor: pointer; transition: all .4s; transition-property: background-color, border-color, color; }
.product-button-choose button:hover, .product-button-choose button:active, .product-button-choose button:focus { border: 2px solid #86939e; background: #efefef; }
.product-button-choose button.active { border: 2px solid #86939e; background: #efefef; }
.product-button-choose button:disabled, .product-button-choose button[disabled], .product-button-choose button.disabled-attribute { background-color: #fff2f2; }
.product-button-choose button:disabled:after, .product-button-choose button.disabled-attribute:after { content: ""; display: block; position: absolute; bottom: 2px; left: 3px; width: calc(87%); height: 38px; transform: rotate(15deg); border: 1px solid transparent; background: linear-gradient(to left top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - .75px), #cccccc 50%, rgba(0,0,0,0) calc(50% + .75px), rgba(0,0,0,0) 100%); }

/* dropdown */
.product-dropdown { margin-bottom: 30px; }

/* legacy varijacije (productVariationsV: ul.variant + product-collection; productOptions: .productoption) */
.product-details .product-collection { grid-template-columns: repeat(7, 1fr); gap: 7px; }
.product-details .product-collection-item img { width: auto; border: 1px solid #dedede; border-radius: 10px; }
.product-details .product-collection-item a:hover img, .product-details .product-collection-item.active img { border: 1px solid var(--dark-color); }
.product-details ul.variant { margin: 0 0 30px 0; padding: 0; text-transform: uppercase; }
.product-details ul.variant li { display: inline-block; margin-right: 10px; padding: 7px 15px; list-style-type: none; background: #fff; border: 1px solid #ccc; cursor: pointer; }
.product-details ul.variant li.variant-active { border: 2px solid #3a863a; }
.product-details ul.variant li a { padding: 10px 10px; text-decoration: none; }
.productoption { margin-bottom: 21px; border-bottom: 1px dashed #eaeaea; }


/* ============================================================
   FAZA 3 (3B) — PROIZVOD: tabovi (BS5) + specifikacija
   ============================================================ */

/* col-md-offset-2 (BS3) -> BS5 (offset u .col-md-offset sintaksi ne postoji) */
@media (min-width: 768px) {
	.col-md-offset-2 { margin-left: 16.6667%; }
}

/* tabovi (BS5 nav-tabs) */
.product .bettertabs { background: whitesmoke; }
.product .bettertabs .nav-tabs { border-bottom: 1px solid var(--nav-border); }
.product .bettertabs .nav-tabs.centered { justify-content: center; }
.product .bettertabs .nav-tabs .nav-link { padding: 12px 20px; border: 0; background: transparent; color: var(--txt); font-size: 17px; font-weight: 500; }
.product .bettertabs .nav-tabs .nav-link:hover { border: 0; color: var(--theme-color); }
.product .bettertabs .nav-tabs .nav-link.active { border: 0; border-bottom: 2px solid var(--theme-color); background: transparent; color: var(--theme-color); }
.product .bettertabs .tab-content { padding-top: 30px; }

/* tabela specifikacije */
.product .attributes .attribute-name { width: 200px; font-weight: 700; white-space: nowrap; }
.product .attributes .attribute-value a { color: var(--theme-color); }

/* tabovi — mobilni */
@media (max-width: 767px) {
	.product .bettertabs .nav-tabs { flex-wrap: wrap; }
	.product .bettertabs .nav-tabs .nav-link { padding: 8px 14px; font-size: 15px; }
	.product .bettertabs .tab-content { padding-top: 20px; }
}

/* ===== 3C: KOMENTARI / RECENZIJE (strana proizvoda) ===== */
.product .comments { border: 1px solid var(--light-color); border-radius: var(--r-md); margin: 40px 0 60px; padding: 30px 20px; background: var(--white-color); }
.product .comments h3 { margin: 0 0 6px; }
.product .comments #mycomments { color: var(--dark-color); text-decoration: none; transition: color var(--t); }
.product .comments #mycomments:hover { color: var(--theme-color); }
.product .comments #mycomments i { font-size: 20px; }
.product .comments > .rateYoGet { display: inline-block; margin: 0 auto 18px; }
.product .comments .main-comment, .product .comments .load-comment { margin-top: 20px; }

/* lista komentara (AJAX) */
#comments { display: block; padding: 20px 0 0; }
#comments .cmmnt { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--nav-border); }
#comments .cmmnt:first-child { border-top: 0; }
#comments .cmmnt .avatar { flex: 0 0 auto; }
#comments .cmmnt .avatar img { width: 50px; height: 50px; aspect-ratio: 1 / 1; border-radius: var(--r); object-fit: cover; }
#comments .cmmnt .cmmnt-content { flex: 1 1 auto; padding: 0; }
#comments .cmmnt .cmmnt-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; }
#comments .cmmnt .cmmnt-header .rateYoGet { float: none; margin: 0 4px 0 0; }
#comments .cmmnt .userlink { font-weight: 700; color: var(--txt); }
#comments .cmmnt .pubdate { font-size: 13px; color: var(--txt3); }
#comments .cmmnt .cmmnt-description { color: var(--txt2); line-height: 1.55; }
#comments .cmmnt .cmmnt-reply { margin-top: 8px; }
#comments .cmmnt .cmmnt-reply a { font-size: 14px; color: var(--theme-color); text-decoration: none; transition: color var(--t); }
#comments .cmmnt .cmmnt-reply a:hover { color: var(--theme-color-darker); text-decoration: underline; }

/* odgovori (uvuceno) */
#comments .replies { display: flex; flex-direction: row; margin-left: 64px; }
#comments .replies .cmmnt { width: 100%; }

/* comment modal forma */
#comment-modal .modal-body #rateYo { margin: 6px 0 4px; }
#comment-modal .modal-body textarea { min-height: 110px; resize: vertical; }

/* ===== 3C: SUPPORT UPLOAD WIDGET ===== */
#support #image-gallery { margin-top: 14px; }
#support #image-gallery::after { content: ""; display: block; clear: both; }
#support .one-image { float: left; width: 100px; margin: 10px 10px 0 0; text-align: center; }
#support .one-image .preview img { width: 100%; height: 100px; object-fit: cover; border: 1px solid var(--light-color); border-radius: var(--r); }
#support .one-image img.delete { width: 13px; margin-bottom: 5px; cursor: pointer; }
#support .one-image p.name { font-size: 12px; color: var(--txt2); margin: 4px 0 0; word-break: break-word; }
#support .one-image p.size { font-size: 12px; color: var(--txt3); margin: 2px 0; }

@media (max-width: 575px) {
    #comments .replies { margin-left: 24px; }
    #support .one-image { width: calc(50% - 10px); }
}


/* ============================================================
   SIDEBAR KORPA (slide-out posle dodavanja u korpu)
   ============================================================ */
#sidebar-cart { position: fixed; top: 0; right: 0; z-index: 1000; width: 360px; height: 100%; padding: 15px; background-color: #fff; box-shadow: -2px 0 5px rgb(92 78 78 / 50%); overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; }
#sidebar-cart.active { transform: translateX(0); }
#sidebar-cart #added-to-cart { color: var(--order-btn-darker); }
#sidebar-cart #close-sidebar { position: absolute; top: 6px; right: 8px; padding: 10px; border: none; background: #fff; cursor: pointer; }
#sidebar-cart .subtitle { padding: 30px 0 10px; font-size: 18px; }
#sidebar-cart .btn-radius { border-radius: 25px; }
#sidebar-cart .go-to-checkout { padding: 11px 15px; border: 2px solid var(--order-btn-alt-darker); background-color: var(--order-btn-alt); color: #fff; font-size: 18px; text-transform: uppercase; }
#sidebar-cart .go-to-checkout:hover { background-image: linear-gradient(to bottom, var(--order-btn-alt), var(--order-btn-alt-darker)); }
#sidebar-overlay { position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; }
#sidebar-overlay.active { display: block; }

.sidebar-cart .cart_product {}
.sidebar-cart .cart_product .item-image a {display: flex; width: 100px; min-width: 100px; height: 100px; object-fit: cover;}
.sidebar-cart .cart_product .item-image img {}



@media (max-width: 480px) {
	#sidebar-cart { width: 85vw; }
}

/* tablet: glavna slika galerije ne sme da prelije usku kolonu (slick min-width:400) */
@media (max-width: 991px) {
	.banner-slider .slider.slider-for { min-width: 0; }
}


/* ============================================================
   CHECKOUT - jedna kolona (Faza 1 layout + UX)
   ============================================================ */
.checkout .checkout-content { background: #f6f7f6; padding: 40px 0 60px; }
.checkout .checkout-single { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; }

/* sekcijske kartice */
.checkout .checkout-block { background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); padding: 26px 26px; margin-bottom: 18px; box-shadow: 0 2px 14px rgba(0,0,0,.04); }
.checkout .checkout-block h2 { font-size: 22px; margin: 0 0 25px; display: flex; align-items: center; }
.checkout .checkout-block h2 i { color: var(--theme-color); }
.checkout .checkout-block > h3 { font-size: 20px; margin: 0 0 4px; }

/* login (uslovni) */
.checkout .login { float: none; width: 100%; max-width: 460px; margin: 0 auto 18px; background: var(--white-color); border: 1px solid var(--nav-border); border-radius: var(--r-md); padding: 26px; }
.checkout .login h3.sign-in { margin-top: 0; }

/* ---- 2. Vasa porudzbina ---- */
.checkout .order-summary .your-order { margin-top: 0; }
.checkout .order-summary .cart_head { display: flex; justify-content: space-between; padding: 0 0 10px; border-bottom: 2px solid var(--nav-border); }
.checkout .order-summary .cart_head .clearfix { display: none; }

.checkout .order-summary .cart_product { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--nav-border); }
.checkout .order-summary .cart_product .levo { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.checkout .order-summary .cart_product .desno { flex: 0 0 auto; text-align: right; font-weight: 500; white-space: nowrap; }
.checkout .order-summary .checkout-item.item-image img { width: 52px; min-width: 52px; height: 52px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--nav-border); }
.checkout .order-summary .checkout-item.item-description { min-width: 0; }
.checkout .order-summary .checkout-item.item-description a { color: var(--txt); text-decoration: none; }
.checkout .order-summary .checkout-item.item-description a:hover { color: var(--theme-color); }
.checkout .order-summary .item-delete a { color: var(--txt3); font-size: 16px; transition: color var(--t); }
.checkout .order-summary .item-delete a:hover { color: var(--red); }
.checkout .order-summary .item-quantity { background: aliceblue; padding: 2px 8px; }
.checkout .order-summary .item-quantity .editable { color: var(--theme-color-darker); font-weight: 700; text-decoration: none; }
.checkout .order-summary .price-old { text-decoration: line-through; color: var(--txt3); margin-right: 6px; font-size: 13px; }
.checkout .order-summary .product-options { width: 100%; font-size: 13px; color: var(--txt2); padding-left: 74px; }
@media screen and (min-width: 768px){
    .checkout .order-summary .cart_product .levo {gap: 12px;}
    .checkout .order-summary .checkout-item.item-image img { width: 62px; min-width: 62px; height: 62px;}
}

/* totali */
.checkout .order-summary .cart_subtotal, .checkout .order-summary .cart_delivery, .checkout .order-summary .cart_bulk_discount, .checkout .order-summary .cart_subtotal_weight { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--nav-border); }
.checkout .order-summary .cart_subtotal .levo, .checkout .order-summary .cart_delivery .levo, .checkout .order-summary .cart_bulk_discount .levo { flex: 1 1 auto; }
.checkout .order-summary .cart_subtotal .desno, .checkout .order-summary .cart_delivery .desno, .checkout .order-summary .cart_bulk_discount .desno, .checkout .order-summary .cart_subtotal_weight .desno { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.checkout .order-summary .cart_delivery .levo > div { font-size: 13px; color: var(--txt3); }
.checkout .order-summary .voucher-dicount { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; margin: 10px 0; background: var(--aliceblue); border-radius: var(--r); }
.checkout .order-summary .voucher-dicount .levo a { color: var(--red); margin-right: 6px; }
.checkout .order-summary .cart_bulk_discount.loyalty .desno input { width: 90px; }
.checkout .order-summary .cart_total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 0; margin-top: 8px; border-top: 2px solid var(--nav-border); font-size: 18px; }
.checkout .order-summary .cart_total .desno { font-weight: 700; color: var(--theme-color-darker); white-space: nowrap; }
.checkout .order-summary .clearfix { display: none; }

/* free delivery bar */
.checkout .free-delivery-container { width: 100%; margin: 16px 0; text-align: center; }
.checkout .free-delivery-bar { position: relative; width: 100%; height: 26px; background: #e2e2e2; border-radius: 20px; overflow: hidden; display: flex; align-items: center; }
.checkout .free-delivery-bar .progress { height: 100%; width: 0; transition: width .5s; }
.checkout .free-delivery-bar .progress-label { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; color: #fff; }
.checkout .free-delivery-bar .progress-label.left { left: 10px; }
.checkout .free-delivery-bar .progress-label.right { right: 10px; }
.checkout #free-delivery-text { margin-top: 8px; font-size: 13px; color: var(--txt2); }

/* vaucer kod */
.checkout .voucher-input { margin-top: 18px; }
.checkout .voucher-input #voucher-form { display: flex; flex-wrap: wrap; gap: 10px; }
.checkout .voucher-input .code-input { flex: 1 1 160px; padding: 11px 14px; border: 1px solid var(--light-color); border-radius: var(--r); }
.checkout .voucher-input #voucher-submit { flex: 0 0 auto; padding: 11px 20px; border: 0; border-radius: var(--r); background: var(--theme-color); color: var(--white-color); font-weight: 500; cursor: pointer; transition: background var(--t); }
.checkout .voucher-input #voucher-submit:hover { background: var(--theme-color-darker); }
.checkout #promo_msg { display: block; margin-top: 8px; font-size: 13px; }

/* ---- 3/5. Nacin isporuke i placanja (kartice iz radio dugmadi) ---- */
.checkout .delivery_info_options, .checkout .payment_info_options { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.checkout .delivery_info_options li, .checkout .payment_info_options li { list-style: none; flex: 1 1 200px; }
.checkout .delivery_info_options label, .checkout .payment_info_options label { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; margin: 0; padding: 14px 16px; border: 1px solid var(--light-color); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t), background var(--t); }
.checkout .delivery_info_options label:hover, .checkout .payment_info_options label:hover { border-color: var(--theme-color); }
.checkout .delivery_info_options label:has(input:checked), .checkout .payment_info_options label:has(input:checked) { border-color: var(--theme-color); background: var(--theme-color-light); }
.checkout .delivery_info_options input[type="radio"], .checkout .payment_info_options input[type="radio"] { accent-color: var(--theme-color); width: 18px; height: 18px; flex: 0 0 auto; }
.checkout .local_pickup { margin-top: 14px; }
.checkout .local_pickup .form-control { max-width: 360px; }

/* ---- 4. Licni podaci (forma) ---- */
.checkout .user-details .form-title { font-weight: 500; margin-bottom: 5px; font-size: 14px; color: var(--txt2); }
.checkout .checkout-account-links { margin: 0 0 18px; font-size: 14px; color: var(--txt2); }
.checkout .checkout-account-links a { color: var(--theme-color); text-decoration: none; font-weight: 500; }
.checkout .checkout-account-links a:hover { text-decoration: underline; }
.checkout .user-details .form-control { border-radius: var(--r); }
.checkout .user-details .form-control:focus { border-color: var(--theme-color); box-shadow: 0 0 0 3px rgba(88,175,26,.15); }
.checkout .user-details .gutter-10 { --bs-gutter-x: 16px; }
.checkout .user-details .form-floating > label { color: var(--txt3); }
.checkout .user-details .order-as-company { background: var(--aliceblue); border-radius: var(--r); padding: 16px; margin-bottom: 6px; }
.checkout .user-details .pretty label { font-weight: 500; }

/* ---- 6. Potvrda + CTA ---- */

.checkout .confirm-block .checkoutCheckboxes .pretty { display: block; margin-bottom: 8px; }
.checkout .confirm-block .checkoutCheckboxes .tos-desc { color: var(--txt3);  }
.checkout .btn-block { display: block; width: 100%; }
.checkout #checkout-submit { width: 100%; padding: 16px; font-size: 17px; font-weight: 700; border-radius: var(--r-md); position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform var(--t), box-shadow var(--t); }
.checkout #checkout-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(25,135,84,.35); }
.checkout #checkout-submit:active { transform: translateY(0); }
.checkout #checkout-submit .checkout-submit-amount { padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.2); white-space: nowrap; }
.checkout #checkout-submit .glare { position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-220%) skewX(-20deg); pointer-events: none; }
.checkout #checkout-submit:hover .glare { animation: checkoutGlare 850ms ease; }
@keyframes checkoutGlare { from { transform: translateX(-220%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }

/* trust badges */
.checkout .checkout-support { margin-top: 34px; }
.checkout .checkout-support-pattern {height: 12px; background: url(/img/patterns/ukoso.png) center center repeat-x;}
.checkout .checkout-support img { height: 42px; }

.checkoutCheckboxes .invalid-feedback { display: block; padding-left: 23px; color: var(--red); }


@media (max-width: 767px) {
    .checkout .checkout-block { padding: 20px 16px; }
    .checkout .order-summary .product-options { padding-left: 0; }
    .checkout .delivery_info_options li, .checkout .payment_info_options li { flex: 1 1 100%; }
}

/* ============================================================
   Akcija mega + Kompanija nested — mobilni prikaz
   ============================================================ */
@media (max-width: 900px) {
	.navMega .dropBox > .dropInner > div { display: block; }
	.mmFooter { flex-direction: column; }
	.mmBadge { width: 100%; justify-content: center; }
	.mmDivider { margin: 8px 0; }
	.ndSub { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; border: none; box-shadow: none; border-radius: 0; padding: 0 0 4px 16px; display: none; }
	.ndItem.ndOpen > .ndSub { display: block; }
	.ndLink { padding: 11px 12px; }
	.ndSubItem { padding: 9px 12px; border-left: 2px solid var(--theme-color-light); }
	.ndSubItem:hover { border-left-color: var(--theme-color); }
}



/* ============================================================
   USER HOME (user-home.php)
   All selectors are scoped under .userHome (or the page-specific
   .user-pages-menu) so they never leak onto other pages.
   ============================================================ */

/* ---- left menu (output of $userPagesMenu) ---- */
.userHome .left-panel { padding-right: 12px; }
.user-pages-menu { list-style: none; margin: 0; padding: 8px 0; background: var(--white-color); border: 1px solid var(--light-color); border-radius: 12px; overflow: hidden; position: sticky; top: 90px; }
.user-pages-menu li { width: 100%; }
.user-pages-menu li a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--dark-color); font-weight: 500; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.user-pages-menu li a i { font-size: 17px; width: 20px; text-align: center; }
.user-pages-menu li a:hover { background: var(--aliceblue); color: var(--theme-color-darker); border-left-color: var(--theme-color); }

/* ---- right panel base ---- */
.userHome .right-panel h1, .userHome .right-panel h2 { margin: 0; }

/* ---- welcome bar ---- */
.userHomeWelcome { background: linear-gradient(120deg, var(--theme-color-darker), var(--theme-color) 55%, var(--theme-color-lighter)); border-radius: 12px; padding: 24px 28px; color: var(--white-color); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; overflow: hidden; margin-bottom: 24px; }
.userHomeWelcome::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); border-radius: 50%; pointer-events: none; }
.userHomeWelcomeText, .welcomeLeft { position: relative; z-index: 1; }
.userHomeWelcomeHi, .welcomeGreeting { font-size: 13px; opacity: .85; margin-bottom: 4px; }
.userHomeWelcomeName, .welcomeName { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--white-color); }
.userHomeWelcomeMeta, .welcomeMeta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; opacity: .9; }
.userHomeWelcomeMeta span, .welcomeMetaItem { display: inline-flex; align-items: center; gap: 6px; }
.userHomeWelcomeActions { position: relative; z-index: 1; }
.userHomeWelcomeAside { position: relative; z-index: 1; }
.userHomeWelcome .accountMgr { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 14px; }
.userHomeWelcome .accountMgrAvatar { width: 40px; height: 40px; border-radius: 50%; background: var(--alt-color); color: var(--white-color); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.userHomeWelcome .accountMgrInfo { line-height: 1.3; }
.userHomeWelcome .mgLabel { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: .65; }
.userHomeWelcome .mgName { font-size: 13px; font-weight: 700; }
.userHomeWelcome .mgPhone { font-size: 11px; opacity: .8; }
.userHomeWelcome .mgCallBtn { width: 36px; height: 36px; border-radius: 8px; background: var(--alt-color); color: var(--white-color); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; transition: transform .15s, background .15s; }
.userHomeWelcome .mgCallBtn:hover { background: var(--order-btn-alt-darker); transform: scale(1.07); }

/* ---- KPI cards ---- */
.userHomeKpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.userHomeKpi { background: var(--white-color); border: 1px solid var(--light-color); border-radius: 12px; padding: 18px; transition: transform .18s, box-shadow .18s; }
.userHomeKpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(88,175,26,.12); }
.userHomeKpiTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.userHomeKpiTrend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.userHomeKpiTrend.up { background: #eef7e6; color: var(--theme-color-darker); }
.userHomeKpiTrend.down { background: #fbe7ec; color: var(--red); }
.userHomeKpiTrend.neutral { background: #fdf1e1; color: #b9761b; }
.userHomeKpiIcon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.userHomeKpiVal { font-size: 24px; font-weight: 700; line-height: 1; }
.userHomeKpiVal small { font-size: 13px; font-weight: 500; color: var(--uhMuted); }
.userHomeKpiLbl { font-size: 12px; color: var(--uhMuted); margin-top: 5px; }
.userHomeKpiSub { font-size: 11px; color: var(--uhMuted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--light-color); }
.userHomeKpi .iconGreen { background: #eef7e6; color: var(--theme-color-darker); }
.userHomeKpi .iconOrange { background: #fdf1e1; color: var(--alt-color); }
.userHomeKpi .iconBlue { background: #e9f0f6; color: var(--checkout-heading); }
.userHomeKpi .iconRed { background: #fbe7ec; color: var(--red); }

/* ---- orders card ---- */
.userHomeCard { background: var(--white-color); border: 1px solid var(--light-color); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.userHomeCardHead { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--light-color); }
.userHomeCardTitle { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.userHomeCardTitle i { color: var(--theme-color); }

/* ---- orders table ---- */
.userHomeTable { width: 100%; margin: 0; }
.userHomeTable thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--uhMuted); font-weight: 700; padding: 12px 20px; background: var(--aliceblue); border: none; white-space: nowrap; }
.userHomeTable tbody td { padding: 14px 20px; border-bottom: 1px solid var(--light-color); vertical-align: middle; }
.userHomeTable tbody tr:last-child td { border-bottom: none; }
.userHomeTable .orderNum { font-weight: 700; color: var(--theme-color-darker); margin-top: 6px; }
.userHomeTable .orderDate { font-size: 12px; color: var(--uhMuted); }
.userHomeTable .orderDelType, .userHomeTable .orderPayType, .userHomeTable .orderShipTo { font-size: 12px; color: var(--dark-color); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.userHomeTable .orderDelType i, .userHomeTable .orderPayType i, .userHomeTable .orderShipTo i { color: var(--uhMuted); }
.userHomeTable .orderAmt { font-weight: 700; white-space: nowrap; }
.userHomeTable .orderItems { font-size: 11px; color: var(--uhMuted); margin-top: 6px; line-height: 1.5; }
.userHomeEmpty { text-align: center; padding: 40px 20px; color: var(--uhMuted); font-size: 14px; }
.userHomeEmpty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .6; }

/* status + paid badges */
.uhStatus { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.uhStatus::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.uhStatus.stNew { background: #fdf1e1; color: #b9761b; }
.uhStatus.stPrep { background: #e9f0f6; color: #1f5b8a; }
.uhStatus.stSent { background: #eaf4fb; color: #1d6fb8; }
.uhStatus.stDone { background: #eef7e6; color: var(--theme-color-darker); }
.uhStatus.stCancel { background: #fbe7ec; color: var(--red); }
.uhPaid { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.uhPaid.yes { color: var(--theme-color-darker); }
.uhPaid.no { color: var(--red); }
.userHomeTable .uhPdfBtn { white-space: nowrap; }

/* ---- responsive ---- */
@media (max-width: 991px) {
    .user-pages-menu {
        position: static;
        display: flex;
        flex-wrap: wrap;
    }
    .user-pages-menu li {
        width: auto;
    }
    .user-pages-menu li a {
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .user-pages-menu li a:hover {
        border-left: none;
        border-bottom-color: var(--theme-color);
    }
    .userHomeKpis {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .userHomeKpis {
        grid-template-columns: 1fr 1fr;
    }
    .userHomeWelcome {
        padding: 20px;
    }
    .userHomeWelcomeName {
        font-size: 19px;
    }
}



/* quantity discount tiers - interactive per-unit pricing */
.quantityDiscount { border: 1px solid var(--nav-border); border-radius: var(--r-md); padding: 14px 16px; background: var(--aliceblue); }
.quantityDiscountTitle { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--txt); margin-bottom: 12px; }
.quantityDiscountTitle i { color: var(--theme-color); }
.quantityDiscountTiers { display: flex; flex-wrap: wrap; gap: 10px; }
.quantityDiscountTier { position: relative; flex: 1 1 120px; min-width: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; background: var(--white-color); border: 2px solid var(--nav-border); border-radius: var(--r); text-align: left; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.quantityDiscountTier:hover { border-color: var(--theme-color-lighter); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.quantityDiscountTier.is-active { border-color: var(--theme-color); background: var(--theme-color-light); }
.quantityDiscountBadge { position: absolute; top: -9px; right: 10px; padding: 2px 8px; background: var(--red); color: var(--white-color); font-size: 11px; font-weight: 700; border-radius: 20px; }
.quantityDiscountRange { font-size: 13px; font-weight: 500; color: var(--txt2); }
.quantityDiscountUnit { font-size: 17px; font-weight: 700; color: var(--txt); }
.quantityDiscountTier.is-active .quantityDiscountUnit { color: var(--theme-color-darker); }
.quantityDiscountSummary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--light-color); }
.quantityDiscountSummaryText { font-size: 14px; color: var(--txt2); }
.quantityDiscountSummaryDisc { color: var(--theme-color-darker); font-weight: 700; }
.quantityDiscountSummaryTotal { font-size: 20px; font-weight: 700; color: var(--txt); white-space: nowrap; }

@media (max-width: 575px) {
    .quantityDiscountTier { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; }
    .quantityDiscountBadge { position: static; }
    .quantityDiscountSummaryTotal { font-size: 18px; }
}