@import url('../fonts/montserrat/montserrat.css');

/*#########################################################################*/
/*#### DIZAJN TOKENI                                                    ####*/
/*#### Jedno mjesto za boje, razmake, radijuse i sjene. Vrijednosti     ####*/
/*#### koje dolaze iz admin panela (--primary-bg, --secondary-bg,       ####*/
/*#### --header-bg ...) se i dalje definisu u header.twig i ovdje se    ####*/
/*#### ne diraju.                                                       ####*/
/*#########################################################################*/
:root{
	/* Brend - tri nijanse, ne pet */
	--brand:        #960000;
	--brand-dark:   #7a0000;
	--brand-tint:   #fdf1f1;

	/* Tekst - cetiri nivoa, svaki sa jasnom ulogom */
	--ink:          #1a1a1a;  /* naslovi, cijena, naziv artikla */
	--ink-body:     #444444;  /* tekst */
	--ink-soft:     #6b6b6b;  /* sekundarni tekst, meta podaci */
	--ink-faint:    #999999;  /* labele, placeholder, stara cijena */

	/* Povrsine i linije */
	--surface:      #ffffff;
	--surface-alt:  #f7f7f7;  /* sekcije, sidebar kutije, forme */
	--line:         #e5e5e5;  /* standardna linija/border */
	--line-soft:    #f0f0f0;  /* unutrasnji razdjelnici */

	/* Statusi */
	--ok:           #1a7f37;
	--warn-bg:      #fff8e6;
	--warn-line:    #f0dfa8;
	--warn-ink:     #8a6300;

	/* Radijusi - tri vrijednosti + 50% za prave kruznice */
	--r-sm:  2px;   /* badge, chip, oznaka */
	--r:     3px;   /* dugme, input, kartica */
	--r-lg:  4px;   /* panel, modal, veca kutija */

	/* Sjene - dvije za sadrzaj, jedna za slojeve iznad stranice */
	--shadow-sm:  0 1px 2px rgba(0,0,0,.06);
	--shadow:     0 2px 8px rgba(0,0,0,.08);
	--shadow-over: 0 8px 24px rgba(0,0,0,.16);

	/* Tipografska skala */
	--fs-xs:  11px;
	--fs-sm:  12px;
	--fs-md:  13px;
	--fs:     14px;
	--fs-lg:  16px;
	--fs-xl:  18px;
	--fs-2xl: 22px;
	--fs-3xl: 28px;
	--fs-hero: 34px;

	/* Razmaci - 4px mreza */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;

	/* Prijelazi: --t za sitne promjene boje, --t-panel za klizne panele */
	--t: .15s ease;
	--t-panel: .25s ease;
}

html{
	margin:0px;
	padding: 0px;
	overflow-x: hidden;
}
body{
	margin:0px;
	padding: 0px;
	font-family: "Montserrat", sans-serif;
	font-size: var(--fs);
	line-height: 1.55;
	color: var(--ink-body);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img{
	max-width: 100%;
	height: auto;
}

a{
	text-decoration: none !important;
	color:#000;
}


.breadcrumb a,
.btn-link{
	color:#000 !important;
}

.btn-primary,
#content .btn-primary{
	background-color: var(--primary-bg) !important;
	color: var(--primary-color) !important;
	border-color: var(--primary-bg) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary:focus-visible {
	background-color: var(--primary-bg) !important;
	color: var(--primary-color) !important;
	border-color: var(--primary-bg) !important;
	opacity: 0.9;
}

.btn-secondary {
	background-color: var(--secondary-bg) !important;
	color: var(--secondary-color) !important;
	border-color: var(--secondary-bg) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:active:focus,
.btn-secondary:focus-visible {
	background-color: var(--secondary-bg) !important;
	color: var(--secondary-color) !important;
	border-color: var(--secondary-bg) !important;
	opacity: 0.9;
}

.list-group-item.active {
    z-index: 2;
    color: var(--primary-color);
    background-color: var(--primary-bg);
    border-color: var(--primary-bg);
}

.list-group-item:hover{
	background-color: var(--secondary-bg) !important;
	color: var(--secondary-color) !important;
	border-color: var(--secondary-bg) !important;
}

label.input-group-addon{
	padding-right: 15px;
}

.alert{
	position: relative;
}

.close{
	position: absolute;
	right:15px;
	top:50%;
	transform: translateY(-50%);
	background: none;
	border:none;
	font-size: var(--fs-2xl);
}

button:focus:not(:focus-visible) {
    outline: 0;
}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
    border-color: var(--line);
}

.accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: var(--primary-bg);
    box-shadow: none;
}

h1{
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: 1.25;
}

h2{
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.3;
}

h3{
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.35;
}

h4,
h5,
h6{
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.4;
}


/*#########################*/
/*#### HEADER */
/*#########################*/
/* Konacne vrijednosti za header su u bloku AFTER.BA nize u fajlu; ovdje
   ostaje samo ono sto se tamo ne dira. */

header .header-top .btn.btn-outline-secondary{
	color:var(--header-color);
	border:none;
	font-weight: 400;
}

header .header-top .btn.btn-outline-secondary:hover{
	background: var(--secondary-bg);
	color:var(--secondary-color);
}

header .header-container{
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-3);
}
header .header-main-row{
	width: 100%;
}

header .header-contact-icon{
	margin-right: 10px;
}
header .header-contact-icon .fa{
	font-size: var(--fs-lg);
	color: var(--brand);
}

header .header-contact-mobile{
	display:none;
}

header .header-interface{
	flex-shrink: 0;
	padding: 0;
}

header .header-interface-list{
	list-style: none;
	padding: 0px;
	margin:0px;
}

header .header-logo{
	max-width: 190px;
	flex-shrink: 0;
	margin-right: 0;
}
header .header-logo img{
	filter: brightness(0) invert(1);
}

header .btn-header{
	border:none;
	background: none;
	padding: 0;
	position: relative;
	color:var(--header-color);
	font-size: var(--fs-lg);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r);
	transition: background var(--t), color var(--t);
}

header .btn-header:hover{
	background: rgba(255,255,255,.12) !important;
	color: #ffffff !important;
}

header .header-interface-list > li:not(:first-child) {
    margin-left: 2px;
}

header .header-contact-mobile a{
	color:#000;
}
header .header-contact-mobile .dropdown-menu,
header .header-contact-mobile .dropdown-menu a{
	color:var(--ink) !important;
}
header .header-contact-mobile .header-contact-label{
	color:#777 !important;
	font-size: var(--fs-sm);
}

#menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: var(--shadow);
}

#menu.fixed  .navbar-nav{
	margin: 0 auto;
}

.header-top,
.header-main-content {
    transition: transform var(--t-panel), opacity var(--t-panel);
}

header.compact .header-top,
header.compact .header-main-content {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform var(--t-panel), opacity var(--t-panel);
}

.header-page-title{
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-7);
}

.header-page-title h1{
	font-size: var(--fs-hero);
	color:var(--title-color);
	text-align: center;
}

.header-page-title .subtitle{
	font-size: var(--fs-2xl);
	color:var(--title-color);
	text-align: center;
}

@media (max-width: 991.98px) {
	.header-contact{
		display:none !important;
	}

	.header-contact-mobile{
		display: block !important;
	}

	.header-contact-mobile .header-contact-content{
		padding: 15px;
	}
}

@media (max-width: 991.98px){
	/* Search dobija svoj red ispod loga - na uskom ekranu ne stane
	   izmedju loga i ikona, a skrivati ga iza jos jednog klika bi vratilo
	   problem zbog kojeg je i izvucen iz panela. */
	header .header-main-row{
		flex-wrap: wrap;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.header-search{
		order: 3;
		flex: 0 0 100%;
		max-width: 100%;
		margin: var(--sp-3) 0 0;
	}
	header .header-interface{
		margin-left: auto;
	}
}

@media (max-width: 767.98px) {
	header .header-container{
		padding-top: var(--sp-2);
		padding-bottom: var(--sp-2);
	}
	header .header-logo{
		max-width: 140px;
	}
	.header-search .form-control{
		height: 38px;
	}
	.header-search .btn-search{
		width: 46px;
	}
	header .btn-header{
		width: 36px;
		height: 36px;
	}
	ul.breadcrumb{
		margin: var(--sp-3) 0;
		font-size: var(--fs-sm);
	}
}

/*#########################*/
/*#### HEADER SEARCH */
/*#########################*/
/* Search je ranije bio panel koji klizi preko cijele stranice iza ikone.
   U katalogu gdje se trazi po oznaci modela (CRS310, RB5009, SFP+) polje
   mora biti vidljivo bez klika, pa je sada traka u sredini headera.
   id="search-panel" je zadrzan jer su na njega vezani JS handleri u
   theme.js (submit, Enter, autocomplete) - markup je premjesten, skripta
   nije dirana. */
.header-search{
	position: relative;
	flex: 1 1 auto;
	max-width: 620px;
	margin: 0 var(--sp-5);
}
.header-search .input-group{
	border-radius: var(--r);
	overflow: hidden;
}
.header-search .form-control{
	border: none;
	height: 42px;
	font-size: var(--fs);
	padding: 0 var(--sp-3);
	background: var(--surface);
	color: var(--ink);
	box-shadow: none;
}
.header-search .form-control::placeholder{
	color: var(--ink-faint);
}
.header-search .form-control:focus{
	box-shadow: none;
	background: var(--surface);
}
.header-search .btn-search{
	width: 52px;
	border: none;
	border-radius: 0;
	background: var(--brand);
	color: #ffffff;
	font-size: var(--fs-lg);
	transition: background var(--t);
}
.header-search .btn-search:hover{
	background: var(--brand-dark);
	color: #ffffff;
}
/* fokus prstenom oko cijele trake, a ne oko pojedinog polja */
.header-search:focus-within .input-group{
	box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}

.search-result-box {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  z-index: 9999;
  box-shadow: var(--shadow-over);
  display: none;
  text-align: left;
}

.search-result-box a {
  display: block;
  padding: 10px var(--sp-3);
  color: var(--ink-body);
  font-size: var(--fs-md);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}

.search-result-box a:last-child{
  border-bottom: none;
}

.search-result-box a:hover {
  background-color: var(--surface-alt);
  color: var(--brand);
}

.search-result-box::-webkit-scrollbar {
  width: 6px;
}
.search-result-box::-webkit-scrollbar-track {
  background: transparent;
}
.search-result-box::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/*#########################*/
/*#### HEADER CART */
/*#########################*/
.cart-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100%;
  background: var(--surface);
  box-shadow: var(--shadow-over);
  z-index: 1050;
  transition: right var(--t-panel);
  display: flex;
  flex-direction: column;
}

.cart-panel.open {
  right: 0;
}

.cart-panel-header {
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

.cart-panel-content {
  padding: 1rem;
  overflow-y: auto;
  flex-grow: 1;
}

.btn-remove{
	background: none;
	border:none;
	padding: 0px;
}

.cart-empty{
	padding: 60px 20px;
	color: var(--ink-faint);
}
.cart-empty i{
	font-size: var(--fs-3xl);
	color: #ddd;
	margin-bottom: 16px;
	display: block;
}
.cart-empty p{
	font-size: var(--fs);
	margin: 0;
}

.row-cart{
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px #ccc solid;
}

.quantity-group {
    max-width: 100px;
    margin-top: 10px;
}
.quantity-group .form-control {
    text-align: center;
    padding: 0 0.4rem;
    height: 26px;
    line-height: 1;
    font-size: 0.8rem;
}

.quantity-group .btn {
    padding: 0 0.4rem;
    height: 26px;
    font-size: 0.8rem;
    line-height: 1;
}
.cart-loader {
    display: none;
    text-align: center;
    padding: 1rem;
	position: absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	background: rgba(255, 255, 255, 0.8);
	z-index: 2;
}

.cart-count-badge-container{
	position: relative;
}

.cart-loader i{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	font-size: var(--fs-3xl);
}

.cart-count-badge.badge {
    position: absolute;
    top: -5px;
    right: -10px;
    left: auto !important; /* cancel Bootstrap's start-100 (left:100%) — with both left
        and right set, width is computed from the gap between them instead of the
        content, which is what was making 3-digit counts overflow the badge */
    background-color: var(--brand);
    color: white;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px !important; /* .rounded-pill sets border-radius via !important, so this must too */
    line-height: 1;
    display: inline-block;
    min-width: 18px;
    text-align: center;
}

@media (max-width: 575.98px) {
	.cart-panel {
	  position: fixed;
	  top: 0;
	  right: -100%;
	  width: 100%;
	  height: 100%;
	  background: var(--surface);
	  box-shadow: var(--shadow-over);
	  z-index: 1050;
	  transition: right var(--t-panel);
	  display: flex;
	  flex-direction: column;
	}
}

/*#########################*/
/*#### HEADER MENU */
/*#########################*/
/* Boje i velicine za #menu su u bloku AFTER.BA nize; ovdje ostaje samo
   ponasanje koje se tamo ne ponavlja. */
#menu a.nav-link{
	background: none;
	white-space: nowrap;
	transition: background var(--t), color var(--t);
}

#menu .header-menu-title{
	font-weight: 700;
	font-size: var(--fs-md);
}

/*#########################*/
/*#### HEADER SHIPPING */
/*#########################*/
.header-shipping-info{
	font-size: var(--fs);
	font-weight: 700;
}

.header-shipping-info i{
	font-size: var(--fs-3xl);
	margin-right: 15px;
}

@media (max-width: 767.98px) {
	.header-shipping-info{
		display:none !important;
	}
}

/*#########################*/
/*#### CONSTRUCTION */
/*#########################*/
#content{
	background: var(--surface);
}

/*#########################*/
/*#### PRODUCT MODULES */
/*#########################*/
.module-products{
	padding: var(--sp-6) 0 0;
	margin-top: var(--sp-4);
	margin-bottom: 0;
	border-top: 1px solid var(--line);
}
/* prva sekcija ispod hero/trust trake ne treba gornju liniju */
.module-products:first-of-type{
	border-top: none;
}
/* Naslov sekcije je orijentir, ne naslovna grafika: lijevo poravnat,
   u velicini naslova podstranice, bez centriranja i bez ukrasne crtice. */
.module-products h3{
	text-align: left;
	padding: 0;
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--ink);
}
.module-products.blog-module{
	padding-top: var(--sp-6);
}
.module-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}
.module-head h3{
	margin-bottom: 0;
}

.btn-listing{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--r);
	font-size: var(--fs-md);
	font-weight: 600;
	background: var(--surface);
	color: var(--ink-soft);
	border: 1px solid var(--line);
	transition: background var(--t), color var(--t), border-color var(--t);
}

.btn-listing:hover{
	background: var(--surface-alt);
	color: var(--ink);
	border-color: #d5d5d5;
}
/* primarna akcija na kartici */
.btn-listing-primary{
	flex: 1 1 auto;
	background: var(--surface);
	color: var(--brand);
	border-color: #e0c4c4;
	font-weight: 600;
}
.btn-listing-primary:hover{
	background: var(--brand);
	color: #ffffff;
	border-color: var(--brand);
}

/* main "Add to cart" button on the product page */
.btn-add-cart{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 12px 28px;
	border-radius: var(--r);
	font-weight: 700;
	font-size: var(--fs);
	border: 1px solid var(--brand);
	background: var(--brand);
	color: #ffffff;
	transition: background var(--t), border-color var(--t);
}
.btn-add-cart i{
	font-size: var(--fs);
}
.btn-add-cart:hover,
.btn-add-cart:focus{
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #ffffff;
}
.out-of-stock-notice{
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	background: var(--brand-tint);
	color: var(--brand);
	border: 1px solid #f0c6c6;
	border-radius: var(--r);
	padding: var(--sp-3) var(--sp-4);
	font-weight: 600;
	font-size: var(--fs);
	margin-bottom: var(--sp-4);
}
.out-of-stock-notice i{
	font-size: var(--fs-lg);
}
.btn-listing-muted{
	flex: 0 0 auto;
	width: 34px;
	padding: 0;
}

/* blog module on the homepage */
.blog-card{
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	height: 100%;
	transition: border-color var(--t);
}
.blog-card:hover{
	border-color: #c9c9c9;
}
.blog-card-image{
	display: block;
	overflow: hidden;
}
.blog-card-image img{
	width: 100%;
	height: 190px;
	object-fit: cover;
}
.blog-card-body{
	padding: 20px;
}
.blog-card-body h4{
	font-size: var(--fs-xl);
	margin-bottom: 10px;
}
.blog-card-body h4 a{
	color: var(--ink);
}
.blog-card-body h4 a:hover{
	color: var(--brand);
}
.blog-card-body p{
	color: var(--ink-soft);
	font-size: var(--fs);
	margin-bottom: 12px;
	/* izvod na 3 reda - inace se izlije cijeli paragraf i kartice
	   u istom redu dobiju jako razlicite visine teksta */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-card-more{
	color: var(--brand);
	font-size: var(--fs);
	font-weight: 600;
}
.blog-card-more:hover{
	color: var(--brand-dark);
}
.btn-blog-all{
	display: inline-block;
	border: 1px solid var(--line);
	color: var(--ink-body) !important;
	font-weight: 600;
	font-size: var(--fs-md);
	padding: 10px 22px;
	border-radius: var(--r);
	margin-top: var(--sp-2);
	transition: background var(--t), border-color var(--t), color var(--t);
}
.btn-blog-all:hover{
	background: var(--surface-alt);
	border-color: #c9c9c9;
	color: var(--ink) !important;
}

/* blog list page */
.blog-list-title{
	font-size: var(--fs-3xl);
	font-weight: 700;
	margin: var(--sp-5) 0 var(--sp-4);
}
.blog-filter-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--surface-alt);
	border-radius: var(--r);
	padding: 16px;
	margin-bottom: 30px;
}
.blog-filter-bar .input-group{
	flex-wrap: nowrap;
	width: auto;
	max-width: 100%;
}
.blog-filter-bar #input-search{
	min-width: 180px;
}
.blog-sort-group{
	max-width: 320px;
}
.blog-card-meta{
	margin: 0 0 12px;
	padding: 0;
	color: var(--ink-faint);
	font-size: var(--fs-sm);
}
.blog-card-meta li{
	margin-right: 14px;
}
.blog-card-meta i{
	color: var(--brand);
	margin-right: 3px;
}
.blog-card-meta a{
	color: var(--ink-faint);
}
.blog-card-meta a:hover{
	color: var(--brand);
}
@media (max-width: 767.98px){
	.blog-filter-bar{
		flex-direction: column;
		align-items: stretch;
	}
	.blog-filter-bar .input-group,
	.blog-sort-group{
		max-width: 100%;
	}
}

/* single blog article page */
#cms-blog .blog-article-title{
	font-size: var(--fs-3xl);
	font-weight: 700;
	margin: 24px 0 12px;
}
#cms-blog .blog-article-meta{
	color: var(--ink-faint);
	font-size: var(--fs-md);
	margin: 0 0 20px;
	padding: 0;
}
#cms-blog .blog-article-meta li{
	margin-right: 16px;
}
#cms-blog .blog-article-meta i{
	color: var(--brand);
	margin-right: 4px;
}
#cms-blog .blog-article-image{
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--r);
	margin-bottom: 24px;
}
#cms-blog .blog-article-body{
	font-size: var(--fs);
	line-height: 1.75;
	color: var(--ink-body);
}
#cms-blog .blog-article-tags{
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: var(--fs-md);
	color: var(--ink-faint);
}
#cms-blog .blog-article-tags a{
	display: inline-block;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	color: var(--ink-soft);
	padding: 3px 9px;
	border-radius: var(--r-sm);
	margin: 0 var(--sp-1) var(--sp-1) 0;
	font-size: var(--fs-sm);
}
#cms-blog .blog-article-tags a:hover{
	background: var(--brand);
	color: #ffffff;
}
#cms-blog #comment-container{
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

/* content inside migrated blog articles (headings, images, tables, code, buttons) */
#cms-blog .blog-article-body h2{
	font-size: var(--fs-2xl);
	font-weight: 700;
	margin: 32px 0 14px;
	padding-left: 12px;
	border-left: 4px solid var(--brand);
}
#cms-blog .blog-article-body h2:first-child{
	margin-top: 0;
}
#cms-blog .blog-article-body h5{
	font-size: var(--fs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--brand) !important;
	background: none !important;
	margin: 20px 0 8px;
}
#cms-blog .blog-article-body p{
	margin-bottom: 14px;
}
#cms-blog .blog-article-body ul,
#cms-blog .blog-article-body ol{
	margin: 0 0 16px;
	padding-left: 22px;
}
#cms-blog .blog-article-body li{
	margin-bottom: 6px;
}
#cms-blog .blog-article-body img{
	display: block;
	max-width: 100%;
	max-height: 340px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 18px auto;
	border-radius: var(--r);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}
#cms-blog .blog-article-body .table-responsive,
#cms-blog .blog-article-body figure.wp-block-table{
	overflow-x: auto;
	margin-bottom: 18px;
}
#cms-blog .blog-article-body table{
	width: 100%;
	max-width: 100%;
	margin-bottom: 18px;
	border-collapse: collapse;
	font-size: var(--fs);
}
#cms-blog .blog-article-body table td,
#cms-blog .blog-article-body table th{
	border: 1px solid var(--line);
	padding: 8px 12px;
}
#cms-blog .blog-article-body table thead th,
#cms-blog .blog-article-body table tr:first-child{
	background: var(--surface-alt);
	color: var(--ink);
	font-weight: 700;
}
#cms-blog .blog-article-body table thead th td,
#cms-blog .blog-article-body table tr:first-child td{
	color: var(--ink);
}
#cms-blog .blog-article-body table tbody tr:nth-child(even){
	background: var(--surface-alt);
}
#cms-blog .blog-article-body pre{
	background: #22252a;
	color: #e8e8e8;
	padding: 14px 16px;
	border-radius: var(--r);
	overflow-x: auto;
	font-size: var(--fs-md);
	line-height: 1.6;
	margin: 6px 0 18px;
}
#cms-blog .blog-article-body pre code{
	background: none;
	color: inherit;
	padding: 0;
	font-family: 'Courier New', Courier, monospace;
}
#cms-blog .blog-article-body code{
	background: var(--surface-alt);
	color: var(--brand);
	padding: 2px 6px;
	border-radius: var(--r);
	font-size: var(--fs-md);
}
#cms-blog .blog-article-body blockquote{
	margin: 18px 0;
	padding: 12px 18px;
	border-left: 4px solid var(--brand);
	background: var(--brand-tint);
	font-style: italic;
	color: var(--ink-soft);
}
#cms-blog .blog-article-body .btn{
	margin: 0 6px 10px 0;
}
#cms-blog .blog-article-body p:has(> .btn:first-child){
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* Kontaktirajte nas (Contact) page */
.contact-page-title{
	font-size: var(--fs-3xl);
	font-weight: 700;
	margin: var(--sp-5) 0;
}
.contact-info-list{
	margin-bottom: 20px;
}
.contact-info-item{
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.contact-info-item:first-child{
	padding-top: 0;
}
.contact-info-icon{
	flex-shrink: 0;
	width: 20px;
	color: var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs);
	padding-top: 2px;
}
.contact-info-label{
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--ink-faint);
	margin-bottom: 3px;
}
.contact-info-item a,
.contact-info-item address{
	color: var(--ink);
	font-size: var(--fs);
	margin: 0;
	font-style: normal;
}
.contact-info-item a:hover{
	color: var(--brand);
}
.contact-map{
	width: 100%;
	height: 280px;
	border-radius: var(--r);
	overflow: hidden;
	border: 1px solid var(--line);
}
.contact-form-card{
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-5);
	height: 100%;
}
.contact-form-title{
	font-size: var(--fs-xl);
	font-weight: 700;
	margin-bottom: 20px;
}
@media (max-width: 991.98px){
	.contact-form-card{
		padding: 24px;
	}
}

/* register page */
.register-header{
	text-align: center;
	margin: 10px 0 26px;
}
.register-header h1{
	font-size: var(--fs-3xl);
	font-weight: 700;
	margin-bottom: 8px;
}
.register-header p{
	color: var(--ink-soft);
}
.register-header p a{
	color: var(--brand);
	font-weight: 600;
}
.register-form-card{
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-6);
	margin-bottom: var(--sp-7);
}
.register-section{
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}
.register-section-last{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 10px;
}
.register-section-title{
	font-size: var(--fs-md);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink);
	margin-bottom: var(--sp-4);
}

.register-submit-row{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 10px;
}
@media (max-width: 767.98px){
	.register-form-card{
		padding: 24px;
	}
	.register-submit-row{
		justify-content: center;
		text-align: center;
	}
}

/* login page */
.login-card{
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-5);
	height: 100%;
}
.login-card-title{
	font-size: var(--fs-xl);
	font-weight: 700;
	margin-bottom: 10px;
}
.login-card-lead{
	font-weight: 700;
	color: var(--brand);
	margin-bottom: 10px;
}
.login-card-text{
	color: var(--ink-soft);
	line-height: 1.6;
}
.login-card .text-end{
	margin-top: 20px;
}
.login-forgot-link{
	display: inline-block;
	margin-top: 4px;
	font-size: var(--fs-md);
	color: var(--brand);
}
@media (max-width: 767.98px){
	.login-card{
		padding: 24px;
	}
}
.forgotten-actions{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 10px;
}
.forgotten-actions a{
	color: var(--brand);
	font-weight: 600;
}
@media (max-width: 575.98px){
	.forgotten-actions{
		justify-content: center;
		text-align: center;
	}
}

/* O nama (About) page */
.about-hero{
	padding: 10px 0 30px;
}
.about-hero-title{
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: var(--sp-4);
}
.about-hero-title .text-accent{
	color: var(--brand);
}
.about-hero-text{
	font-size: var(--fs-lg);
	color: var(--ink-soft);
	max-width: 800px;
	line-height: 1.7;
}
.about-vision{
	background: var(--surface-alt);
	color: var(--ink-body);
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand);
	border-radius: var(--r);
	padding: var(--sp-6);
	margin-bottom: var(--sp-7);
}
.about-vision-row{
	display: flex;
	align-items: center;
	gap: 40px;
}
.about-vision-label{
	display: inline-block;
	color: var(--brand);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-2);
}
.about-vision-text h2{
	font-size: var(--fs-2xl);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: var(--sp-3);
}
.about-vision-text p{
	color: var(--ink-soft);
	line-height: 1.7;
	margin-bottom: var(--sp-4);
}
/* ikona od 120px u kruznici je bila cisti ukras */
.about-vision-icon{
	display: none;
}
.about-features{
	margin-bottom: 10px;
}
.about-feature-card{
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-5);
	height: 100%;
	transition: border-color var(--t);
}
.about-feature-card:hover{
	border-color: #c9c9c9;
}
.about-feature-card i{
	font-size: var(--fs-2xl);
	color: var(--brand);
	margin-bottom: var(--sp-3);
}
.about-feature-card h4{
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: 10px;
}
.about-feature-card p{
	color: var(--ink-soft);
	font-size: var(--fs-md);
	line-height: 1.6;
	margin-bottom: 0;
}
@media (max-width: 767.98px){
	.about-vision-row{
		flex-direction: column;
		text-align: center;
	}
	.about-vision{
		padding: 28px 22px;
	}
}

/* responsive YouTube embed inside product descriptions */
.video-embed-wrapper{
	position: relative;
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16 / 9;
	margin: 15px 0;
}
.video-embed-wrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--r);
}

.price{
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--ink);
}

.price-new{
	color: var(--brand);
}

.price-old{
	color: var(--ink-faint);
	text-decoration: line-through;
	font-weight: 400;
	font-size: var(--fs-md);
}

.price-tax{
	font-weight: 400;
	font-size: var(--fs-sm);
	color: var(--ink-faint);
}

.product-thumb{
	transition: border-color var(--t), box-shadow var(--t);
	padding: var(--sp-3);
	margin-bottom: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* row-cols grids (homepage modules, Shop, categories) stretch children to equal height via flexbox,
   which can make wrapped rows visually touch/overlap despite product-thumb's own margin-bottom */
.module-products .row,
#product-list.row,
.related-products .row{
	row-gap: var(--sp-5);
}

.product-thumb:hover{
	border-color: #c9c9c9;
	box-shadow: var(--shadow);
}

.product-thumb .image{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	margin-bottom: var(--sp-3);
	overflow: hidden;
}

.product-thumb .image img{
	max-height: 150px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.product-thumb .caption{
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Brend je oznaka, ne naslov: sitno, razmaknuto, tiho - oko ga preskoci
   dok ne treba, a kad treba nadje ga odmah. */
.pt-brand{
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 3px;
}
/* Oznaka modela je ono po cemu se ovakav artikal zaista prepoznaje,
   pa je ona naslov kartice. */
.product-thumb .caption h4{
	font-size: var(--fs) !important;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-thumb .caption h4 a{
	color: var(--ink);
}

.product-thumb .caption h4 a:hover{
	color: var(--brand);
	text-decoration: underline !important;
}
/* Tip uredjaja: dvije kartice sa istim modelom razlikuju se ovdje */
.pt-type{
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* stanje i cijena se lijepe za dno, da se kartice u redu poravnaju
   bez obzira na duzinu naziva */
.pt-foot{
	margin-top: auto;
	padding-top: var(--sp-2);
}

.product-thumb .caption .price{
	font-size: var(--fs-xl);
	font-weight: 700;
	margin: 0;
}

.product-thumb .button-group{
	display: flex;
	justify-content: stretch;
	gap: 6px;
	margin-top: var(--sp-3);
}

.swiper-viewport {
    margin: 0 0 var(--sp-6);
    background: var(--surface);
    z-index: 1;
    width: 100%;
    position: relative;
    overflow: visible;
}

.carousel.swiper-viewport{
	margin-bottom: 50px;
}

.swiper-container{
	padding-top: 15px;
	padding-left: 40px;
	padding-right: 40px;
}

/* Karusel je imao 50px bocnog paddinga (prostor za strelice) plus jos 15px
   na .owl-stage-outer, pa je prva kartica pocinjala 65px desnije od naslova
   sekcije, a zadnja izlazila iz containera. Kartice sada prate istu ivicu
   kao ostatak stranice, a strelice sjede na rubu, u gutteru containera. */
.product-carousel,
.carousel-module .owl-carousel.owl-theme{
	position: relative;
	padding-left: 0;
	padding-right: 0;
}

/* Owl slaze slajdove kao float blokove (.owl-stage je display:block), pa
   se height:100% na kartici nema na sta osloniti i kartice u istom redu
   zavrsavaju na razlicitim visinama. U Bootstrap gridu isto pravilo radi
   jer je .col flex item. Flex na stageu daje karuselu isto ponasanje:
   sve kartice u vidljivom redu su jednake visine, a cijena i dugmad se
   preko .pt-foot margin-top:auto poravnaju na dnu. */
.product-carousel .owl-stage,
.carousel-module .owl-carousel .owl-stage{
	display: flex;
	align-items: stretch;
}
.product-carousel .owl-item,
.carousel-module .owl-carousel .owl-item{
	display: flex;
	flex-shrink: 0;
	height: auto;
}
.product-carousel .owl-item > .item,
.carousel-module .owl-carousel .owl-item > .item,
.product-carousel .owl-item > .item > .product-thumb,
.carousel-module .owl-carousel .owl-item > .item > .product-thumb{
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* vertikalni prostor da hover-sjena kartice ne bude odsjecena */
.owl-stage-outer{
	padding: 3px 0;
	margin: -3px 0;
}

#content .owl-carousel .owl-next,
#content .owl-carousel .owl-prev{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: var(--surface);
	color: var(--ink-body);
	transition: background var(--t), border-color var(--t), color var(--t);
	border: 1px solid var(--line);
	padding: 0px;
	width: 36px;
	height: 36px;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	border-radius: var(--r);
}

#content .owl-carousel .owl-next:hover,
#content .owl-carousel .owl-prev:hover{
	background: var(--surface-alt);
	color: var(--brand);
	border-color: #c9c9c9;
}

#content .owl-carousel .owl-next{
	right: -18px;
}

#content .owl-carousel .owl-prev{
	left: -18px;
}

/* ispod lg container nema dovoljno guttera za strelice na rubu; swipe
   ionako pokriva navigaciju na dodirnim ekranima */
@media (max-width: 991.98px){
	#content .product-carousel .owl-nav,
	#content .carousel-module .owl-nav{
		display: none !important;
	}
}

/*#########################*/
/*#### BREADCRUMBS */
/*#########################*/
/* Bio: siva kutija sa radijusom i sjenom, linkovi u Bootstrap plavoj (#007bff)
   - jedina plava boja na sajtu. Sada obican niz sitnih linkova. */
ul.breadcrumb {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0;
	margin: var(--sp-4) 0;
	font-size: var(--fs-md);
}

ul.breadcrumb li {
	display: flex;
	align-items: center;
}

ul.breadcrumb li:not(:last-child)::after {
	content: "/";
	margin: 0 var(--sp-2);
	color: #cfcfcf;
}

ul.breadcrumb li a {
	color: var(--ink-soft);
	transition: color var(--t);
}

ul.breadcrumb li a:hover {
	color: var(--brand);
	text-decoration: underline !important;
}

ul.breadcrumb li:last-child a {
	color: var(--ink);
	pointer-events: none;
	cursor: default;
}

/*#########################*/
/*#### CONTENTS */
/*#########################*/
.listing-inerface{
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: var(--sp-3) 0;
	margin: var(--sp-3) 0 var(--sp-4);
}

/* Usporedba je rijetko koristena funkcija - bila je najveci crveni element
   na listi, sada je diskretan link. */
.btn-compare-total{
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	width: auto;
	background: transparent;
	color: var(--ink-soft);
	border: none;
	font-weight: 400;
	font-size: var(--fs-md);
	padding: 2px 0;
	border-radius: 0;
	transition: background var(--t), color var(--t), box-shadow var(--t);
}
.btn-compare-total:hover{
	background: transparent;
	color: var(--brand);
	box-shadow: none;
	text-decoration: underline;
}

.refine-search{
	border-top: 1px solid var(--line);
	padding-top: var(--sp-4);
	margin-top: var(--sp-4);
}

.refine-search ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.refine-search ul li{
	display: block;
	margin: 0px;
	padding: 0px;
}

.refine-search ul li a{
	display: block;
	background-color: var(--primary-bg) !important;
	color: var(--primary-color) !important;
	 transition: background var(--t), color var(--t), border-color var(--t);
	 padding: 5px 7px 5px 7px;
	 margin-top: 5px;
	 border-radius: var(--r);
}

.refine-search ul li a:hover{
	background-color: var(--secondary-bg) !important;
	color: var(--secondary-color) !important;
}

.pagination-interface{
	margin: 15px 0;
}

.page-search-panel{
	background: var(--surface-alt);
	border: 1px solid var(--line);
	padding: var(--sp-4);
	border-radius: var(--r);
	margin-bottom: var(--sp-5);
}

.page-header{
	margin-top: 25px;
}

.nav-tabs{
  border-bottom: 1px solid var(--line);
}
/* Bili: sivi "folder" tabovi sa punom brend pozadinom kad su aktivni -
   Bootstrap default. Sada samo linija ispod aktivnog. */
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-right: var(--sp-5);
  padding: var(--sp-2) 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: color var(--t), border-color var(--t);
}

.nav-tabs .nav-link:hover {
  background: none;
  color: var(--ink);
}

.nav-tabs .nav-link.active {
  background: none !important;
  color: var(--ink) !important;
  border-bottom-color: var(--brand);
}

.tab-content {
  border: none;
  padding: var(--sp-4) 0 0;
  background: none;
}

.tempus-dominus-widget {
  border-radius: var(--r-lg);
  z-index: 9999 !important;
}

.related-products{
	margin-top: var(--sp-6);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.listing-inerface .input-group {
		flex-wrap: nowrap;
	}

	.listing-inerface .input-group > .input-group-text,
	.listing-inerface .input-group > .form-select {
		flex: 0 0 auto;
		width: auto;
	}
}

@media (max-width: 767.98px) {
  #button-cart {
    margin-top: 0.5rem;
  }

  .listing-inerface  .input-group {
		margin-bottom: var(--sp-3);
	}
}
/* OpenCart core (catalog/view/javascript/common.js) prepisuje klasu
   #product-list iz localStorage pri svakom ucitavanju, pa row-cols-* iz
   twiga i product_grid_class iz kontrolera nemaju efekta. Broj kolona se
   zato drzi ovdje: #product-list (1,0,0) je specificniji od Bootstrapovih
   .row-cols-* (0,1,0), a core JS ostaje netaknut.
   Prikaz "lista" (.product-list) i dalje ostaje jedna kolona. */
#product-list:not(.product-list) > *{
	flex: 0 0 auto;
	width: 50%;
}
@media (min-width: 768px){
	#product-list:not(.product-list) > *{ width: 33.3333%; }
}
@media (min-width: 992px){
	#product-list:not(.product-list) > *{ width: 25%; }
}
#product-list.product-list > *{
	width: 100%;
}

/*#########################*/
/*#### PODUCT GALLERY */
/*#########################*/
#product-gallery {
  max-width: 100%;
}

#product-gallery .owl-nav{
  display: block !important;
}

#main-image {
  border-radius: var(--r-lg);
  max-height: 600px;
  object-fit: contain;
}
.gallery-thumb {
  cursor: pointer;
  transition: border-color var(--t);
}
.gallery-thumb:hover {
  border-color: var(--primary-color);
}
.owl-carousel .item {
  padding: 0 4px;
}

.thumbnail-container{
	padding-left: 60px;
	padding-right: 60px;
	position: relative;
	margin-bottom: 25px;
}

#content .thumbnail-container .owl-carousel .owl-prev{
	left: -60px;
}

#content .thumbnail-container .owl-carousel .owl-next{
	right: -60px;
}

/*#########################*/
/*#### RELATED PRODUCTS */
/*#########################*/
.related-products h3,
.module-blog h3,
.back-in-stock-row h3{
	text-align: left;
	padding: 0;
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--ink);
}

/*#########################*/
/*#### BLOG */
/*#########################*/
.module-blog h4{
	margin-bottom: var(--sp-3);
	margin-top: var(--sp-4);
}

.module-blog .description p{
	text-align: justify;
}


/*#########################*/
/*#### FOOTER */
/*#########################*/
footer{
	background: var(--header-bg-solid);
	color:var(--header-color);
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 25px;
}
footer ul li a{
	display: inline-block;
	padding: 4px 0;
}

footer ul li a,
footer a,
footer h5{
	color: var(--header-color);
	transition: color var(--t);
}

footer ul li a:hover,
footer a:hover{
	color: #ffffff;
	text-decoration: underline !important;
}

/*#########################################*/
/*#### AFTER.BA STYLE OVERRIDES ###########*/
/*#########################################*/

/* Utility traka: kontakt i radno vrijeme lijevo, jezik/valuta desno.
   Sitan tip na tamnoj podlozi - informacija koja mora biti dostupna,
   ali ne smije se natjecati sa logom i pretragom ispod. */
header .header-top{
	background: #0d0d0d !important;
	color: #9a9a9a;
	font-size: var(--fs-sm);
	border-bottom: 1px solid #1f1f1f;
	padding-top: 0;
	padding-bottom: 0;
}
header .header-top a,
header .header-top .btn.btn-outline-secondary{
	color: #9a9a9a !important;
}
header .header-top .container{
	min-height: 34px;
}
.header-util-end{
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	white-space: nowrap;
}
.header-util-link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 var(--sp-4) 0 0;
	margin-right: var(--sp-4);
	border-right: 1px solid #262626;
	white-space: nowrap;
	transition: color var(--t);
}
.header-util-link:last-of-type{
	border-right: none;
	margin-right: 0;
}
.header-util-link i{
	color: var(--brand);
	font-size: var(--fs-sm);
}
a.header-util-link:hover{
	color: #ffffff !important;
}
header .header-container{
	background: #000000 !important;
	color: #ffffff;
}
header .header-container a,
header a{
	color: #ffffff;
}
#menu.fixed{
	background-color: #000000 !important;
}

.banner-grid{
	margin: 30px 0;
}
.brands-section{
	padding: var(--sp-6) 0 0;
	margin-top: var(--sp-4);
	border-top: 1px solid var(--line);
}
.brands-title{
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: var(--sp-1);
}
.brands-subtitle{
	color: var(--ink-soft);
	font-size: var(--fs-md);
	margin-bottom: var(--sp-4);
}
.banner-vertical-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 30px 0;
}
.banner-vertical-item{
	flex: 0 0 calc(20% - 12px);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-4);
	text-align: center;
	transition: border-color var(--t);
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.banner-vertical-item:hover{
	border-color: #c9c9c9;
}
.banner-vertical-item img{
	max-height: 48px;
	width: auto;
	max-width: 100%;
}
@media (max-width: 991.98px){
	.banner-vertical-item{ flex: 0 0 calc(33.333% - 10px); }
}
@media (max-width: 575.98px){
	.banner-vertical-item{ flex: 0 0 calc(50% - 7px); }
}
.banner-grid img{
	width: 100%;
	display: block;
}

/* hero banner slider: full viewport width is applied via JS in banner.twig (more reliable than the CSS vw-breakout trick inside this nested flex layout) */
#common-home #banner0 img,
#common-home .banner-single img{
	width: 100%;
}

/* black header: icons sit directly on it, no pill background needed */
header .header-interface{
	background: transparent !important;
}
header .header-interface,
header .header-interface > ul > li > a.btn-header,
header .header-interface > ul > li > a.dropdown-toggle,
header .header-interface .btn-header{
	color: #ffffff !important;
}
header .header-interface .dropdown-menu a.dropdown-item{
	color: var(--ink) !important;
}
header .header-interface .dropdown-menu a.dropdown-item:hover{
	background: var(--brand) !important;
	color: #ffffff !important;
}

/* dark red category/navigation bar */
#menu{
	display: block;
	background: var(--brand);
	margin: 0;
	padding: 0;
	border-top: none;
}

#menu a.nav-link{
	color: #ffffff !important;
	font-size: var(--fs-md) !important;
	font-weight: 600 !important;
}
#menu .dropdown-menu a.nav-link{
	color: var(--ink) !important;
	text-transform: none;
	font-size: var(--fs-md) !important;
	font-weight: 400 !important;
}
#menu a.nav-link:hover,
#menu .dropdown-menu a.nav-link:hover{
	background: var(--brand-dark);
	color: #ffffff !important;
}
#menu .header-menu-title,
#menu button.navbar-toggler,
#menu button.navbar-toggler .navbar-toggler-icon{
	color: #ffffff !important;
}

/* Katalog dropdown (left) + centered static links */
#menu > .container{
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--sp-3);
	min-height: 44px;
	padding-left: 0;
	padding-right: 0;
}
#menu .catalog-dropdown{
	flex-shrink: 0;
}
#menu .catalog-toggle{
	background: var(--surface);
	color: var(--brand) !important;
	font-size: var(--fs-md);
	font-weight: 700;
	padding: 12px 18px;
	border-radius: 0;
	border: none;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	white-space: nowrap;
	align-self: stretch;
	transition: background var(--t);
}
#menu .catalog-toggle i{
	font-size: var(--fs-md);
}
#menu .catalog-toggle:hover,
#menu .catalog-toggle:focus,
#menu .catalog-toggle[aria-expanded="true"]{
	background: rgba(255,255,255,.82);
	color: var(--brand) !important;
}
#menu.fixed .catalog-toggle{
	border-radius: 0;
}
#menu .catalog-menu{
	min-width: 270px;
	padding: var(--sp-1) 0;
	border: none;
	border-radius: 0 0 var(--r) var(--r);
	box-shadow: var(--shadow-over);
	margin-top: 0;
}
#menu .catalog-menu .catalog-item{
	position: relative;
}
#menu .catalog-menu .catalog-item > a.nav-link,
#menu .catalog-menu .catalog-item > a.dropdown-item{
	color: var(--ink) !important;
	font-size: var(--fs-md) !important;
	font-weight: 400 !important;
	text-transform: none;
	padding: 9px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background var(--t), color var(--t);
}
#menu .catalog-menu .catalog-item > a.nav-link:hover,
#menu .catalog-menu .catalog-item > a.dropdown-item:hover{
	background: var(--brand);
	color: #ffffff !important;
}
#menu .catalog-menu .dropend > .dropdown-menu{
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 0 0 2px;
	min-width: 240px;
}
#menu .catalog-menu .dropend:hover > .dropdown-menu,
#menu .catalog-menu .dropend > .dropdown-menu:hover,
#menu .catalog-menu .dropend.open > .dropdown-menu{
	display: block;
}
#menu .catalog-menu .dropend > a.dropdown-toggle::after{
	transition: transform var(--t);
}
#menu .catalog-menu .dropend.open > a.dropdown-toggle::after{
	transform: rotate(-90deg);
}
#menu .catalog-menu .dropend > .dropdown-menu{
	padding: var(--sp-1) 0;
	border: none;
	border-radius: var(--r);
	box-shadow: var(--shadow-over);
	min-width: 220px;
}
#menu .catalog-menu .dropend > .dropdown-menu.dropdown-column-2{ min-width: 420px; }
#menu .catalog-menu .dropend > .dropdown-menu.dropdown-column-3{ min-width: 600px; }
#menu .catalog-menu .dropend > .dropdown-menu.dropdown-column-4{ min-width: 760px; }
#menu .catalog-menu .dropend .dropdown-inner{
	display: flex;
}
#menu .catalog-menu .dropend .dropdown-inner > ul{
	flex: 1;
}
#menu .catalog-menu .dropend .dropdown-inner{
	padding: 2px 0;
}
#menu .catalog-menu .dropend .dropdown-menu .dropdown-item{
	color: var(--ink-body) !important;
	font-size: var(--fs-sm) !important;
	font-weight: 400 !important;
	text-transform: none;
	padding: 8px 18px;
	display: block;
	white-space: normal;
	transition: background var(--t), color var(--t);
}
#menu .catalog-menu .dropend .dropdown-menu .dropdown-item:hover{
	background: var(--surface-alt);
	color: var(--brand) !important;
}
#menu .catalog-menu .dropend .dropdown-menu .dropdown-item-all{
	color: var(--brand) !important;
	font-weight: 700 !important;
}
#menu .catalog-menu .dropend .dropdown-menu .dropdown-item-all:hover{
	background: var(--brand);
	color: #ffffff !important;
}
#menu .catalog-menu .dropend .dropdown-divider{
	margin: 4px 0;
	border-color: var(--line);
}
#menu .menu-static-links{
	flex: 1 1 auto;
	justify-content: center;
	gap: 4px;
}
#menu .menu-static-links .nav-link{
	padding: 12px 14px !important;
	position: relative;
	transition: color var(--t);
	letter-spacing: .01em;
}
#menu .menu-static-links .nav-link::after{
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 5px;
	height: 2px;
	background: var(--surface);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--t);
}
#menu .menu-static-links .nav-link:hover::after{
	transform: scaleX(1);
}
@media (max-width: 991.98px){
	#menu > .container{
		justify-content: space-between;
		align-items: center;
	}
	#menu .menu-static-links{
		justify-content: flex-start;
	}
	#menu .catalog-menu .dropend > .dropdown-menu{
		position: static;
		display: none;
		box-shadow: none;
		margin: 0;
		padding-left: 12px;
		min-width: 0;
	}
	#menu .catalog-menu .dropend.open > .dropdown-menu{
		display: block;
	}
}

/* dark footer to match after.ba */
footer{
	position: relative;
	background: #161616;
	color: #c9c9c9;
	padding-top: var(--sp-7);
	padding-bottom: 0;
	margin-top: var(--sp-7);
}
footer h5{
	font-size: var(--fs-md);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #ffffff;
	margin-bottom: var(--sp-3);
}
footer ul li a,
footer a{
	color: #c9c9c9;
	font-size: var(--fs-md);
}
footer ul li a:hover,
footer a:hover{
	color: #ffffff;
}
.footer-social{
	display: flex;
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}
.footer-social a{
	width: 32px;
	height: 32px;
	border-radius: var(--r);
	border: 1px solid #333;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #c9c9c9;
	transition: border-color var(--t), color var(--t);
}
.footer-social a:hover{
	border-color: var(--ink-soft);
	color: #ffffff;
	text-decoration: none !important;
}
footer .footer-contact li{
	padding: 4px 0;
	margin: 0;
	font-size: var(--fs-md);
}
footer .footer-contact i{
	color: var(--ink-soft);
	width: 18px;
	text-align: center;
	margin-right: 6px;
}
.footer-newsletter{
	text-align: center;
	margin: var(--sp-6) 0;
}
.btn-newsletter{
	display: inline-block;
	background: transparent;
	color: #ffffff;
	font-weight: 600;
	padding: 11px 24px;
	border: 1px solid #444;
	border-radius: var(--r);
	font-size: var(--fs-md);
	transition: border-color var(--t), background var(--t);
}
.btn-newsletter:hover{
	background: var(--brand);
	border-color: var(--brand);
	color: #ffffff;
	text-decoration: none !important;
}
.footer-bottom{
	position: relative;
	z-index: 1;
	border-top: 1px solid #2a2a2a;
	padding: var(--sp-4) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	color: #7d7d7d;
}
.footer-payment{
	display: flex;
	align-items: center;
}
.footer-payment-img{
	height: 28px;
	width: auto;
	max-width: 100%;
	border-radius: var(--r-sm);
	opacity: .8;
}

/* out of stock badge on product thumbnails and gallery */
.product-thumb .image,
#product-gallery{
	position: relative;
}
.badge-stock,
.badge-discount{
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: 2;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .03em;
	padding: 3px 7px;
	border-radius: var(--r-sm);
}
/* "nema na stanju" je informacija - siva. Popust je ponuda - brend boja. */
.badge-stock{
	background: #eaeaea;
	color: var(--ink-soft);
}
.badge-discount{
	background: var(--brand);
	color: #ffffff;
}
.badge-stock i,
.badge-discount i{
	font-size: 9px;
	margin-right: 3px;
}

/* fallback shown on the product page when no photo exists */
.no-image-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	aspect-ratio: 1 / 1;
	width: 100%;
	background: var(--surface-alt);
	border: 2px dashed #ddd;
	border-radius: var(--r-lg);
	color: var(--ink-faint);
}
.no-image-box i{
	font-size: var(--fs-3xl);
	color: var(--ink-faint);
}
.no-image-box span{
	font-size: var(--fs);
	font-weight: 600;
	text-align: center;
	padding: 0 20px;
}

.badge-sale{
	display: inline-block;
	background: var(--brand);
	color: #ffffff;
	font-size: var(--fs-sm);
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--r-sm);
	margin-left: 8px;
	vertical-align: middle;
}

/* homepage "recently discounted" promo cards */
.discount-promo-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin: 30px 0;
}
.discount-promo-card{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: 190px;
	padding: var(--sp-5) var(--sp-6);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--brand);
	color: #ffffff;
	text-decoration: none;
	transition: background var(--t);
}
.discount-promo-card:hover{
	color: #ffffff;
	background: var(--brand-dark);
}
.promo-content{
	position: relative;
	z-index: 1;
	max-width: 60%;
}
.promo-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,.15);
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--fs-xs);
	font-weight: 700;
	padding: 4px 9px;
	border-radius: var(--r-sm);
	margin-bottom: var(--sp-3);
}
.promo-content h3{
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--sp-3);
	color: #ffffff;
}
.promo-price-row{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.promo-price-old{
	text-decoration: line-through;
	color: rgba(255,255,255,.6);
	font-size: var(--fs-md);
	font-weight: 400;
}
.promo-price-new{
	font-size: var(--fs-2xl);
	font-weight: 700;
}
.promo-badge{
	background: rgba(255,255,255,.15);
	color: #ffffff;
	font-weight: 700;
	font-size: var(--fs-sm);
	padding: 3px 7px;
	border-radius: var(--r-sm);
}
.promo-btn{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--surface);
	color: var(--brand);
	font-weight: 600;
	font-size: var(--fs-md);
	padding: 9px 18px;
	border-radius: var(--r);
}
.promo-visual{
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 140px;
	height: 140px;
	border-radius: var(--r);
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.promo-visual img{
	width: 78%;
	height: 78%;
	object-fit: contain;
}
@media (max-width: 767.98px){
	.discount-promo-grid{
		grid-template-columns: 1fr;
	}
	.promo-content{
		max-width: 100%;
	}
}

/*#########################*/
/*#### STRANICA ARTIKLA: zaglavlje i cijena */
/*#########################*/
/* Brend iznad naziva - ista oznaka kao na kartici u listi, pa je prelaz
   sa liste na artikal vizuelno neprekinut. */
.product-brand-link{
	display: inline-block;
	color: var(--ink-faint) !important;
	margin-bottom: var(--sp-1);
	transition: color var(--t);
}
.product-brand-link:hover{
	color: var(--brand) !important;
}
#product-info h1,
#content #product-info h1{
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: var(--sp-2);
}
/* Cijena dobija vlastiti blok sa linijama iznad i ispod: to je podatak
   zbog kojeg se stranica otvara, ne jos jedna stavka u nizu. */
.product-price-block{
	margin: var(--sp-4) 0;
	padding: var(--sp-4) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.product-price-block li{
	margin: 0;
}
.product-price-block h2{
	margin: 0;
	line-height: 1.1;
}
.product-price-block li:not(:first-child):not(:has(h2)){
	font-size: var(--fs-md);
	color: var(--ink-soft);
	margin-top: var(--sp-1);
}

/* product info panel */
.product-meta li{
	padding: 3px 0;
	color: var(--ink-soft);
	font-size: var(--fs-md);
}
.product-meta a{
	color: var(--brand);
}
.product-links{
	display: flex;
	gap: var(--sp-4);
	margin: var(--sp-3) 0;
}
.product-links .link-action{
	background: none;
	border: none;
	padding: 0;
	color: var(--ink-soft);
	font-size: var(--fs-md);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color var(--t);
}
.product-links .link-action:hover{
	color: var(--brand);
}
.product-share{
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
}
/* Dugmad za dijeljenje nisu sadrzaj; u bojama Facebooka/Twittera/Pinteresta
   nadjacavala su cijenu i dugme za kupovinu odmah iznad njih. */
.product-share a{
	width: 30px;
	height: 30px;
	border-radius: var(--r);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	color: var(--ink-soft) !important;
	font-size: var(--fs-md);
	transition: background var(--t), color var(--t), border-color var(--t);
}
.product-share a:hover{
	background: var(--surface);
	border-color: #c9c9c9;
	color: var(--ink) !important;
}
#product-info h2 .price-new{
	color: var(--brand);
	font-weight: 700;
	font-size: var(--fs-3xl);
}

/* snizena cijena na stranici artikla: samo tiha podloga i lijevi brend rub,
   bez gradijenta i bez animacije - popust nosi sam iznos */
#product-info ul:has(.price-old){
	display: block;
	background: var(--brand-tint);
	border: 1px solid #f3c4c4;
	border-left: 3px solid var(--brand);
	border-radius: var(--r);
	padding: var(--sp-3) var(--sp-4) var(--sp-1);
	margin-bottom: var(--sp-3);
}
#product-info .price-old{
	font-size: var(--fs-lg);
	color: var(--ink-faint);
}
#product-info .badge-sale{
	background: var(--brand);
	color: #ffffff;
	font-size: var(--fs-md);
	font-weight: 700;
	padding: 3px 9px;
	border-radius: var(--r-sm);
	margin-left: var(--sp-2);
}

/* category checkbox-style sidebar filter */
.category-filter-title{
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .07em;
	font-size: var(--fs-xs);
	color: var(--ink-soft);
	padding-bottom: var(--sp-2);
	margin-bottom: var(--sp-2);
	border-bottom: 1px solid var(--line);
}
/* svaka filter grupa je vizuelno zaseban blok */
.shop-filter-manufacturer,
.shop-filter-price,
.shop-filter-stock{
	margin-top: var(--sp-5);
}
/* Linija ispod svake stavke pravila je rasterizovanu listu od 24 reda;
   razmak je dovoljan za razdvajanje. */
.category-filter-list > li{
	border-bottom: none;
}
.category-filter-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.category-filter-link{
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 5px 0;
	color: var(--ink-body) !important;
	font-size: var(--fs-md);
	line-height: 1.35;
	flex: 1;
}
.category-filter-link .fa-square,
.category-filter-link .fa-square-check{
	color: #bdbdbd;
	font-size: var(--fs);
}
.category-filter-list li.active .fa-square-check{
	color: var(--brand);
}
.category-filter-link:hover{
	color: var(--brand) !important;
}
.category-filter-list li.active > .category-filter-row > .category-filter-link{
	color: var(--brand) !important;
	font-weight: 700;
}
.category-filter-toggle{
	background: none;
	border: none;
	color: var(--ink-faint);
	font-size: var(--fs-xs);
	padding: 6px;
}
.category-filter-toggle:hover{
	color: var(--brand);
}
.category-filter-children{
	padding-left: 22px;
}

/* shop sidebar: manufacturer list caps at ~10 rows, then scrolls */
.shop-filter-manufacturer .category-filter-list{
	max-height: 400px;
	overflow-y: auto;
	padding-right: 6px;
}
.shop-filter-manufacturer .category-filter-list::-webkit-scrollbar{
	width: 6px;
}
.shop-filter-manufacturer .category-filter-list::-webkit-scrollbar-track{
	background: transparent;
}
.shop-filter-manufacturer .category-filter-list::-webkit-scrollbar-thumb{
	background: #ccc;
	border-radius: var(--r-sm);
}
.shop-filter-manufacturer .category-filter-list::-webkit-scrollbar-thumb:hover{
	background: var(--brand);
}

/* shop sidebar: price filter + clear filters */
.shop-filter-price .shop-price-form{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.shop-price-inputs{
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
}
.shop-price-inputs input{
	width: 0;
	flex: 1 1 0;
	min-width: 60px;
}
.shop-price-inputs span{
	color: var(--ink-faint);
}
.btn-shop-filter{
	background: var(--brand);
	color: #ffffff;
	border: none;
	border-radius: var(--r-sm);
	padding: 6px 16px;
	font-size: var(--fs-md);
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--t);
}
.btn-shop-filter:hover{
	background: var(--brand-dark);
	color: #ffffff;
}
.btn-clear-filters{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--brand) !important;
	font-size: var(--fs-md);
	font-weight: 600;
	margin-bottom: 20px;
}
.btn-clear-filters:hover{
	text-decoration: underline;
}

/* pagination in brand red instead of Bootstrap blue */
.pagination .page-link{
	color: var(--brand);
}
.pagination .page-item.active .page-link{
	background-color: var(--brand) !important;
	border-color: var(--brand) !important;
	color: #ffffff !important;
}
.pagination .page-link:hover,
.pagination .page-link:focus{
	background-color: #f3d9d9;
	border-color: var(--brand);
	color: var(--brand);
	box-shadow: none;
}
.pagination .page-item.disabled .page-link{
	color: #b98a8a;
}

/* prevent wide content (tables, images) from forcing #content to wrap below the sidebar column */
.row > #content.col,
.row > #column-left{
	min-width: 0;
}
#content table{
	max-width: 100%;
}
#content .table-responsive{
	overflow-x: auto;
}

/* ============ Checkout page ============ */
/* Core OpenCart markup + JS untouched - styled purely via CSS to avoid any risk
   of breaking the checkout flow's embedded scripts. */
#checkout-checkout h1{
	font-size: var(--fs-3xl);
	font-weight: 700;
	text-align: center;
	margin: 10px 0 30px;
}

#checkout-checkout fieldset{
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
}
#checkout-checkout legend{
	float: none;
	width: auto;
	font-size: var(--fs-md);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink);
	margin-bottom: var(--sp-4);
	padding: 0;
}

/* nested fieldset (e.g. password box sitting inside the personal-details fieldset) */
#checkout-checkout fieldset fieldset{
	background: transparent;
	border: none;
	padding: 0;
	margin-bottom: 0;
}

#checkout-checkout input[type="radio"],
#checkout-checkout input[type="checkbox"]{
	accent-color: var(--brand);
}

/* account type (register / guest) toggle */
#checkout-checkout .form-check-inline{
	background: var(--surface);
	border: 2px solid var(--line);
	border-radius: var(--r-lg);
	padding: 10px 16px 10px 34px;
	margin-right: 12px;
	transition: border-color var(--t), background var(--t);
}
#checkout-checkout .form-check-inline:has(.form-check-input:checked){
	border-color: var(--brand);
	background: var(--brand-tint);
}
#checkout-checkout .form-check-inline .form-check-label{
	font-weight: 600;
	cursor: pointer;
}

#checkout-checkout .form-control:focus,
#checkout-checkout .form-select:focus{
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(150,0,0,.12);
}

/* shipping / payment method selector row */
#checkout-checkout .input-group-text{
	background: var(--surface-alt);
	color: var(--ink-body);
	border-color: var(--line);
}

/* order summary table */
#checkout-checkout .table{
	background: var(--surface);
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line);
}
#checkout-checkout .table td,
#checkout-checkout .table th{
	border: none;
	border-bottom: 1px solid var(--line);
}
#checkout-checkout .table thead th{
	background: var(--surface-alt);
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--fs-xs);
	letter-spacing: .06em;
}
#checkout-checkout .table tbody tr:last-child td{
	border-bottom: none;
}
#checkout-checkout .table tfoot td{
	background: var(--surface-alt);
}
#checkout-checkout .table tfoot tr:last-child td{
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--brand);
	border-bottom: none;
}

.checkout-next-steps-hint{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff8e6;
	color: #8a6300;
	border: 1px solid #f0dfa8;
	border-radius: var(--r-lg);
	padding: 14px 16px;
	margin-bottom: 14px;
	font-size: var(--fs);
	line-height: 1.5;
}
.checkout-next-steps-hint i{
	font-size: var(--fs-lg);
	flex-shrink: 0;
	margin-top: 2px;
}

#checkout-checkout textarea.form-control{
	border-radius: var(--r-lg);
}

/* guided checkout: a finished step fades back so the eye moves to what's next */
#checkout-checkout .checkout-step-done{
	opacity: 0.55;
	transition: opacity var(--t);
}
#checkout-checkout .checkout-step-done:hover{
	opacity: 1;
}

/* red/green per-field feedback on submit (Bootstrap's is-invalid/is-valid,
   just made a bit more visible against this theme) */
#checkout-checkout .is-invalid{
	border-color: #dc3545 !important;
}
#checkout-checkout .is-valid{
	border-color: #4caf50 !important;
}

/* modal used for the shipping/payment method picker popup */
.modal .modal-content{
	border-radius: var(--r-lg);
	border: none;
}
.modal .modal-header{
	border-bottom: 1px solid var(--line);
}
.modal .modal-title{
	font-weight: 700;
	color: var(--brand);
}

@media (max-width: 767.98px){
	#checkout-checkout fieldset{
		padding: 20px;
	}
}

/* shopping cart page */
#checkout-cart h1{
	font-weight: 700;
	margin-bottom: 20px;
}
#checkout-cart #output-cart{
	margin-bottom: var(--sp-5);
	border-radius: var(--r);
	border: 1px solid var(--line);
}
#checkout-cart #output-cart table{
	margin-bottom: 0;
}
#checkout-cart #output-cart thead th{
	background: var(--surface-alt);
	color: var(--ink);
	font-weight: 700;
	font-size: var(--fs-md);
	border-color: var(--line);
	white-space: nowrap;
}
#checkout-cart #output-cart tbody tr:hover{
	background: var(--brand-tint);
}
#checkout-cart #output-cart td{
	vertical-align: middle;
}
#checkout-cart #output-cart .img-thumbnail{
	border-radius: var(--r-lg);
	max-width: 64px;
}
#checkout-cart #output-cart tbody td a{
	font-weight: 600;
	color: #222;
}
#checkout-cart #output-cart tbody td a:hover{
	color: var(--brand);
}
#checkout-cart #output-cart .input-group{
	max-width: 160px;
}
#checkout-total tr:last-child td{
	font-size: var(--fs-xl);
	font-weight: 700;
	color: var(--brand);
	border-top: 2px solid var(--brand);
}

#checkout-cart h2{
	font-size: var(--fs-xl);
	font-weight: 700;
	margin-top: 8px;
	padding-left: 12px;
	border-left: 4px solid var(--brand);
}
#checkout-cart #accordion{
	margin-bottom: var(--sp-5);
	border-radius: var(--r);
	overflow: hidden;
}
#checkout-cart #accordion .accordion-item{
	border-color: var(--line);
}
#checkout-cart #accordion .accordion-button{
	font-weight: 700;
}
#checkout-cart #accordion .accordion-button:not(.collapsed){
	background: var(--brand-tint);
	color: var(--brand);
	box-shadow: none;
}
#checkout-cart .btn-light{
	border: 1px solid var(--line);
	font-weight: 600;
}
#checkout-cart .btn-light:hover{
	background: var(--surface-alt);
}
#checkout-cart .row.cart-actions > .col{
	display: flex;
	align-items: center;
}
#checkout-cart .row.cart-actions > .col.text-end{
	justify-content: flex-end;
}
#checkout-cart .row.cart-actions .btn{
	padding: 10px 22px;
	border-radius: var(--r-lg);
}

@media (max-width: 767.98px){
	#checkout-cart .row.cart-actions .col,
	#checkout-cart .row.cart-actions .col.text-end{
		text-align: center !important;
		margin-bottom: 10px;
	}
}

/* success page (order confirmation, contact form sent, etc.) */
#common-success{
	padding-bottom: 40px;
}
#common-success .success-card{
	max-width: 560px;
	margin: var(--sp-6) auto 0;
	padding: var(--sp-7) var(--sp-6);
	text-align: center;
	background: var(--surface);
	border-radius: var(--r);
	border: 1px solid var(--line);
}
#common-success .success-icon{
	font-size: 40px;
	color: #2e9e44;
	margin-bottom: 18px;
	display: block;
}
#common-success h1{
	font-weight: 700;
	margin-bottom: 18px;
}
#common-success .success-message p{
	color: var(--ink-soft);
	margin-bottom: 10px;
	line-height: 1.7;
}
#common-success .success-message a{
	color: var(--brand);
	font-weight: 600;
	text-decoration: underline;
}
#common-success .success-message a:hover{
	color: var(--brand-dark);
}
#common-success .btn{
	margin-top: 20px;
	padding: 10px 28px;
	border-radius: var(--r-lg);
	font-weight: 700;
}

/* "My account" section: sidebar menu + form pages (newsletter, address, password, etc.) */
#column-right .list-group,
#column-left .list-group{
	border-radius: var(--r);
	overflow: hidden;
	border: 1px solid var(--line);
}
#column-right .list-group-item,
#column-left .list-group-item{
	padding: 12px 18px;
	font-weight: 600;
	color: var(--ink-body);
	border-color: var(--line);
}
#column-right .list-group-item:hover,
#column-left .list-group-item:hover{
	background: var(--brand-tint);
	color: var(--brand);
}

#content h1{
	font-weight: 700;
	margin-bottom: 22px;
}
#content form fieldset{
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
}
#content form fieldset legend{
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: var(--fs-md);
	color: var(--ink);
	margin-bottom: var(--sp-4);
}

#content form .form-switch-lg .form-check-input{
	width: 3em;
	height: 1.5em;
}
/* Nazad/Nastavi-style button row at the bottom of simple account forms
   (newsletter, etc). Scoped to an explicit .form-actions class, not just
   ".row > .col" — that generic selector previously also matched ordinary
   field grids (e.g. register.twig's firstname/lastname ".col" fields),
   flexing labels and inputs onto one line instead of stacking them. */
#content form .row.form-actions > .col{
	display: flex;
	align-items: center;
}
#content form .row.form-actions > .col.text-end{
	justify-content: flex-end;
}
#content form .row.form-actions .btn{
	padding: 10px 22px;
	border-radius: var(--r-lg);
}

/* "we switched systems, please register again" notice on login/forgotten pages */
.new-system-notice{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff8e6;
	color: #8a6300;
	border: 1px solid #f0dfa8;
	border-radius: var(--r-lg);
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: var(--fs);
	line-height: 1.6;
}
.new-system-notice i{
	font-size: var(--fs-xl);
	flex-shrink: 0;
	margin-top: 2px;
}

/* site-wide "we relaunched" banner, shown under the nav on every page until dismissed */
.site-notice-modal{
	border-radius: var(--r-lg);
	border: none;
	overflow: hidden;
}
.site-notice-modal .modal-body{
	padding: 40px 36px 32px;
	text-align: center;
	position: relative;
}
.site-notice-modal .btn-close{
	position: absolute;
	top: 16px;
	right: 16px;
}
.site-notice-modal-icon{
	font-size: var(--fs-3xl);
	color: #2d84c0;
	margin-bottom: 16px;
	display: block;
}
.site-notice-modal h5{
	font-weight: 700;
	font-size: var(--fs-2xl);
	margin-bottom: 14px;
}
.site-notice-modal p{
	color: var(--ink-soft);
	line-height: 1.7;
	margin-bottom: 10px;
}
.site-notice-modal-actions{
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
	flex-wrap: wrap;
}
.site-notice-modal-actions .btn{
	padding: 10px 26px;
	border-radius: var(--r-lg);
	font-weight: 700;
}

/* product comparison page */
#product-compare h1{
	font-weight: 700;
	margin-bottom: 20px;
}
#product-compare .table-responsive{
	border-radius: var(--r);
	overflow-x: auto;
	border: 1px solid var(--line);
	margin-bottom: var(--sp-5);
}
#product-compare table{
	margin-bottom: 0;
	min-width: 620px;
}
#product-compare thead td{
	background: var(--surface-alt);
	color: var(--ink);
	font-weight: 700;
	font-size: var(--fs-md);
	border-color: var(--line);
}
#product-compare tbody tr > td:first-child{
	background: var(--brand-tint);
	font-weight: 700;
	color: var(--ink-body);
	white-space: nowrap;
	min-width: 140px;
}
#product-compare tbody td{
	vertical-align: middle;
	padding: 12px 16px;
}
#product-compare .img-thumbnail{
	border-radius: var(--r-lg);
	max-width: 110px;
}
#product-compare .price-new{
	color: var(--brand);
	font-weight: 700;
}
#product-compare .price-old{
	color: var(--ink-faint);
	text-decoration: line-through;
	font-size: var(--fs-md);
	margin-left: 4px;
}
#product-compare .description{
	font-size: var(--fs-md);
	color: var(--ink-soft);
	max-width: 260px;
}
#product-compare .btn-block{
	display: block;
	width: 100%;
	margin-bottom: 8px;
	border-radius: var(--r-lg);
}
#product-compare tbody tr:last-child > td{
	border-bottom: none;
	background: var(--surface);
}

/* Site-wide success/error alert container (#alert, present on every page — many
   forms prepend into it: register, login, payment/shipping method, reviews, etc).
   By default it sits inline in the page flow right under the header, so on a long
   page it's off-screen until you scroll up. Making it a fixed floating toast fixes
   that everywhere at once without touching any of those forms' own JS. */
#alert{
	position: fixed;
	top: 110px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1090;
	width: 92%;
	max-width: 520px;
	pointer-events: none;
}
#alert .alert{
	pointer-events: auto;
	box-shadow: var(--shadow-over);
	border-radius: var(--r-lg);
	margin-bottom: 10px;
}
@media (max-width: 767.98px){
	#alert{
		top: 90px;
		width: 94%;
	}
}

/* Homepage hero banner (layout: 'hero' on the module.1 banner setting) —
   background photo with an HTML text overlay instead of a flat image, so
   the heading/copy/button can be styled and edited independently of the
   photo itself. */
.hero-banner{
	position: relative;
	display: flex;
	align-items: center;
	min-height: 360px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.hero-banner-overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1) 100%);
}
/* The element also carries Bootstrap's .container class, which supplies
   width/max-width/margin-inline: auto - so the copy lines up with the menu and
   the rest of the page at every breakpoint while the photo behind it stays full
   width. Only the padding is restated here, matching the container gutter
   (.75rem), because .hero-banner-content is declared after bootstrap.min.css
   and would otherwise wipe out the horizontal padding. */
.hero-banner-content{
	position: relative;
	z-index: 1;
	padding: 40px 12px;
	color: #fff;
}
.hero-banner-eyebrow{
	color: var(--primary-bg, #dc3545);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.hero-banner-title{
	font-size: var(--fs-hero);
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 18px;
}
.hero-banner-text{
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: rgba(255,255,255,.85);
	margin-bottom: 26px;
}
.hero-banner-btn{
	padding: 12px 28px;
	font-weight: 600;
	border-radius: var(--r);
}

/* banner_image.align = 'right' -> the copy hugs the right edge and the overlay
   gradient is mirrored, so the dark end stays behind the text and the photo
   stays readable on the other side. .hero-banner-content has no max-width any
   more, so text-align is what actually moves the copy. */
.hero-banner-right .hero-banner-content{
	text-align: right;
}
.hero-banner-right .hero-banner-overlay{
	background: linear-gradient(270deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1) 100%);
}

/* More than one banner in the "Pocetna slajder" group -> the hero turns into
   an Owl slider (dots + swipe only, no arrows). The dots sit on top of the
   photo so the section keeps exactly the same height as a single hero. */
/* the global .owl-stage-outer padding (see ~line 1513) is meant for product
   carousels; here it would leave a 15px strip of the neighbouring slide
   visible, because overflow:hidden clips at the padding edge, not the content
   edge, while Owl sizes slides from the carousel root */
/* Full bleed. The module renders inside .container > .row > #content.col, so
   the hero is capped at the container width. margin-left: calc(50% - 50vw)
   pulls it back to the viewport edge: 50% resolves against #content's content
   box, whose left edge sits exactly (100vw - 100%) / 2 from the viewport, so
   the two cancel out. html/body already carry overflow-x: hidden, so the few
   px 100vw counts for the scrollbar cannot cause a horizontal scrollbar.
   Scoped to #common-home because the maths assumes a centred, sidebar-less
   container. */
#common-home .hero-slider{
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.hero-slider.owl-carousel .owl-stage-outer{
	padding-left: 0;
	padding-right: 0;
}
/* banner_image.style = 'plain' -> the image speaks for itself: no gradient,
   no eyebrow/heading/button, the whole slide is the link. Height comes from
   the artwork, which autoHeight then follows. */
/* 360px matches .hero-banner's min-height, so every slide in the carousel is
   the same height and autoHeight has nothing to animate between */
.hero-plain,
.hero-plain > a{
	display: block;
	height: 360px;
}
/* the module resizes banners to 1600x450, so the artwork nearly always has to
   be rescaled to fit this box; cover crops the overflow instead of letting the
   slide letterbox. Needs a definite height on the parent - height: 100% cannot
   resolve against an auto height. */
.hero-plain img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero-slider.owl-carousel .owl-dots{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	margin: 0;
}
.hero-slider.owl-carousel .owl-dots .owl-dot span{
	width: 10px;
	height: 10px;
	margin: 0 4px;
	background: rgba(255,255,255,.45);
}
.hero-slider.owl-carousel .owl-dots .owl-dot.active span,
.hero-slider.owl-carousel .owl-dots .owl-dot:hover span{
	background: var(--surface);
}
@media (max-width: 767.98px){
	.hero-banner{
		min-height: 300px;
	}
	.hero-plain,
	.hero-plain > a{
		height: 300px;
	}
	.hero-banner-overlay,
	.hero-banner-right .hero-banner-overlay{
		background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.9) 100%);
	}
	.hero-banner-title{
		font-size: var(--fs-3xl);
	}
	.hero-banner-text{
		font-size: var(--fs);
	}
}

/* Maintenance / "store offline" page — a full dark section between the
   (already black) header and footer instead of a bare white gap, with a
   pulsing "broadcast" icon nodding to what the company actually sells. */
.maintenance-page{
	background: radial-gradient(circle at 50% 30%, var(--ink) 0%, #0a0a0a 65%);
	min-height: 100vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}
.maintenance-card{
	max-width: 560px;
	text-align: center;
}
.maintenance-logo{
	max-width: 180px;
	max-height: 60px;
	margin-bottom: 36px;
}
.maintenance-icon{
	position: relative;
	width: 90px;
	height: 90px;
	margin: 0 auto 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.maintenance-icon i{
	position: relative;
	z-index: 1;
	font-size: var(--fs-3xl);
	color: var(--primary-bg, #dc3545);
}
.maintenance-ring{
	position: absolute;
	inset: 0;
	border: 2px solid var(--primary-bg, #dc3545);
	border-radius: 50%;
	opacity: 0;
	animation: maintenance-ping 2.4s ease-out infinite;
}
.maintenance-ring-2{
	animation-delay: 1.2s;
}
@keyframes maintenance-ping{
	0%{
		transform: scale(0.6);
		opacity: .7;
	}
	100%{
		transform: scale(1.9);
		opacity: 0;
	}
}
.maintenance-title{
	color: #fff;
	font-size: var(--fs-3xl);
	font-weight: 700;
	margin-bottom: 14px;
}
.maintenance-text{
	color: rgba(255,255,255,.65);
	font-size: var(--fs);
	line-height: 1.7;
	margin-bottom: 30px;
}
.maintenance-contact{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}
.maintenance-contact-item{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff !important;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	padding: 10px 18px;
	border-radius: var(--r);
	font-size: var(--fs);
	transition: background var(--t), border-color var(--t);
}
.maintenance-contact-item i{
	color: var(--primary-bg, #dc3545);
}
.maintenance-contact-item:hover{
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.28);
}
.maintenance-crew{
	margin-top: 42px;
	display: flex;
	justify-content: center;
	gap: 28px;
}
.maintenance-crew i{
	font-size: var(--fs-xl);
	color: rgba(255,255,255,.22);
}
.maintenance-crew i:nth-child(2){
	font-size: var(--fs-3xl);
	color: var(--primary-bg, #dc3545);
	animation: maintenance-dig 1.6s ease-in-out infinite;
}
@keyframes maintenance-dig{
	0%, 100%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(-12deg);
	}
}
@media (max-width: 767.98px){
	.maintenance-title{
		font-size: var(--fs-2xl);
	}
	.maintenance-contact{
		flex-direction: column;
		align-items: center;
	}
}

/* floating Viber contact button */
.viber-float{
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1030;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: var(--r);
	background-color: #7360F2;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-over);
	transition: transform var(--t), box-shadow var(--t);
}
.viber-float i{
	font-size: var(--fs-xl);
}
.viber-float:hover{
	background-color: #5b48d8;
}
@media (max-width: 767.98px){
	.viber-float{
		right: 14px;
		bottom: 14px;
		padding: 12px;
	}
	.viber-float span{
		display: none;
	}
}

/*#########################*/
/*#### NAJPRODAVANIJI – istaknuta sekcija */
/*#########################*/
/* :not(.blog-module) je tu samo da izjednaci specifičnost sa
   .module-products:nth-of-type(even):not(.blog-module), koje inace prebrise pozadinu */
/* "TOP" oznaka u gornjem desnom uglu - lijevi ugao je zauzet
   sa .badge-stock / .badge-discount */
.module-bestseller .product-thumb .image::after{
	content: "TOP";
	position: absolute;
	top: var(--sp-2);
	right: var(--sp-2);
	z-index: 2;
	background: var(--ink);
	color: #ffffff;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	padding: 3px 7px;
	border-radius: var(--r-sm);
}

/*#########################*/
/*#### TRAKA POVJERENJA (pocetna, ispod hero banera) */
/*#########################*/
/* Razdjelnici su 1px praznine mreze kroz koje se vidi pozadina kontejnera -
   radi na svakom broju kolona, bez nth-child racunice koja se lomi
   izmedju breakpointa. */
.trust-bar{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r);
	margin: var(--sp-5) 0;
	overflow: hidden;
}
.trust-bar-item{
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--surface);
}
.trust-bar-icon{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--brand);
	font-size: var(--fs-xl);
}
.trust-bar-title{
	font-weight: 600;
	font-size: var(--fs-md);
	line-height: 1.3;
	color: var(--ink);
}
.trust-bar-text{
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	line-height: 1.35;
	margin-top: 1px;
}
@media (max-width: 991.98px){
	.trust-bar{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
	.trust-bar{ grid-template-columns: 1fr; }
	.trust-bar-item{ padding: var(--sp-3) var(--sp-4); }
}

/*#########################*/
/*#### GRID KATEGORIJA (pocetna) */
/*#########################*/
.category-grid{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
.category-grid-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	text-align: center;
	text-decoration: none;
	color: var(--ink);
	transition: border-color var(--t), color var(--t);
}
.category-grid-item:hover{
	color: var(--brand);
	border-color: #c9c9c9;
}
.category-grid-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--brand);
	font-size: var(--fs-2xl);
	height: 32px;
}
.category-grid-icon img{
	max-width: 34px;
	max-height: 34px;
	width: auto;
}
.category-grid-name{
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.3;
}
@media (max-width: 991.98px){
	.category-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px){
	.category-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
	.category-grid-item{ padding: var(--sp-4) var(--sp-2); }
	.category-grid-icon{ font-size: var(--fs-xl); }
}
.category-grid-total{
	font-size: var(--fs-sm);
	color: var(--ink-faint);
	font-weight: 400;
	margin-top: -2px;
}

/*#########################*/
/*#### LISTA: rezultati, chipovi aktivnih filtera, filter proizvodjaca */
/*#########################*/
.listing-summary{
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.listing-results{
	font-size: var(--fs);
	color: var(--ink-body);
	font-weight: 600;
}
.active-filters{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}
.active-filters-label{
	font-size: var(--fs-md);
	color: var(--ink-soft);
}
.filter-chip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	color: var(--ink-body);
	font-size: var(--fs-md);
	font-weight: 400;
	padding: 4px 10px;
	border-radius: var(--r-sm);
	text-decoration: none;
	transition: background var(--t), border-color var(--t), color var(--t);
}
.filter-chip:hover{
	background: var(--brand);
	border-color: var(--brand);
	color: #ffffff;
}
.filter-chip i{
	font-size: var(--fs-xs);
	opacity: 0.8;
}
.filter-chip-clear{
	font-size: var(--fs-md);
	color: var(--ink-soft);
	text-decoration: underline;
}
.filter-chip-clear:hover{
	color: var(--brand);
}

/* Lista proizvodjaca: 8 vidljivih + pretraga, inace je 40+ stavki u scroll kutiji */
.mfr-search{
	margin-bottom: 8px;
}
.shop-filter-manufacturer .mfr-list{
	max-height: none;
	overflow: visible;
}
.shop-filter-manufacturer li.mfr-extra{
	display: none;
}
.shop-filter-manufacturer.mfr-open li.mfr-extra,
.shop-filter-manufacturer li.mfr-extra.mfr-force-show{
	display: block;
}
.shop-filter-manufacturer li[hidden]{
	display: none !important;
}
.mfr-toggle{
	background: none;
	border: none;
	color: var(--brand);
	font-size: var(--fs-md);
	font-weight: 600;
	padding: 8px 0 0;
	cursor: pointer;
}
.mfr-toggle:hover{
	text-decoration: underline;
}
/* kad je lista otvorena vrati scroll cap, da 40+ stavki ne razvuce sidebar */
.shop-filter-manufacturer.mfr-open .mfr-list{
	max-height: 400px;
	overflow-y: auto;
	padding-right: 6px;
}

/* Pozitivna potvrda zaliha na kartici - do sada se vidio samo negativan
   slucaj ("Nema na stanju") kao badge preko slike. */
.stock-line{
	font-size: var(--fs-sm);
	font-weight: 400;
	margin-bottom: var(--sp-1);
}
.stock-line-in{
	color: var(--ok);
}
.stock-line-in i{
	font-size: 10px;
	margin-right: 3px;
}

/* Artikli bez zalihe se ne skrivaju, ali se povlace u drugi plan da ne
   dominiraju listom kad se sortira po najnovijem. */
/* Namjera je i dalje da se artikal bez zalihe povuce u drugi plan, ali
   badge "Nema na stanju" vec nosi tu poruku - 55% + grayscale je cinio da
   pola grida izgleda pokvareno umjesto rasprodano. */
.product-thumb-out .image img{
	opacity: 0.7;
}
.product-thumb-out:hover .image img{
	opacity: 1;
}
.product-thumb-out .price{
	color: var(--ink-faint);
}

/*#########################*/
/*#### STRANICA ARTIKLA */
/*#########################*/
.product-availability{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-md);
	font-weight: 600;
	padding: 0;
	background: none;
	margin-bottom: var(--sp-3);
}
.product-availability.is-in{
	color: var(--ok);
}
.product-availability.is-out{
	color: #b42318;
}

/* Prvih pet specifikacija odmah ispod cijene */
.product-key-specs{
	list-style: none;
	padding: 0;
	margin: 4px 0 10px;
	border-top: 1px solid var(--line);
}
.product-key-specs li{
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: 6px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: var(--fs-md);
}
.product-key-specs li span{
	color: var(--ink-soft);
}
.product-key-specs li strong{
	color: var(--ink);
	text-align: right;
	font-weight: 600;
}
.product-key-specs-more{
	background: none;
	border: none;
	padding: 0;
	color: var(--brand);
	font-size: var(--fs-md);
	font-weight: 600;
	cursor: pointer;
}
.product-key-specs-more:hover{
	text-decoration: underline;
}

/* Blok sigurnosti ispod dugmeta za korpu */
.product-assurance{
	list-style: none;
	padding: var(--sp-4) 0 0;
	margin: var(--sp-4) 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: var(--sp-2);
}
.product-assurance li{
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-md);
	color: var(--ink-soft);
}
.product-assurance i{
	width: 16px;
	text-align: center;
	color: var(--ink-faint);
}



/* Strelice ispod galerije su bile iste velicine i boje kao glavna navigacija
   slike, pa je hijerarhija bila obrnuta. Sada su diskretne. */
#content .thumbnail-container .owl-carousel .owl-prev,
#content .thumbnail-container .owl-carousel .owl-next{
	width: 30px;
	height: 30px;
	background: var(--surface);
	color: var(--ink-soft);
	border: 1px solid var(--line);
	font-size: var(--fs-sm);
}
#content .thumbnail-container .owl-carousel .owl-prev:hover,
#content .thumbnail-container .owl-carousel .owl-next:hover{
	background: var(--surface-alt);
	color: var(--brand);
	border-color: var(--ink-faint);
}
.thumbnail-container{
	padding-left: 38px;
	padding-right: 38px;
}
#content .thumbnail-container .owl-carousel .owl-prev{ left: -38px; }
#content .thumbnail-container .owl-carousel .owl-next{ right: -38px; }

/* Na 375px sirine dvije kartice po redu daju ~165px po kartici; dugmad i
   razmaci moraju se skupiti da "U korpu" ostane citljivo. */
@media (max-width: 575.98px){
	.product-thumb{
		padding: var(--sp-2);
	}
	.product-thumb .image{
		height: 130px;
	}
	.product-thumb .image img{
		max-height: 130px;
	}
	.product-thumb .caption h4{
		font-size: var(--fs-sm) !important;
		min-height: 34px;
	}
	.product-thumb .caption .price{
		font-size: var(--fs-lg);
		margin-bottom: var(--sp-2);
	}
	.btn-listing{
		height: 32px;
		padding: 0 var(--sp-1);
		font-size: var(--fs-sm);
	}
	.btn-listing-muted{
		width: 32px;
	}
	/* usporedba je rijetko koristena - na uskom ekranu ustupa mjesto cijeni */
	.product-thumb .button-group .btn-listing-muted:last-child{
		display: none;
	}
}

/* Fiksna traka za kupovinu na mobitelu */
.mobile-buy-bar{
	display: none;
}
@media (max-width: 767.98px){
	.mobile-buy-bar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
		background: var(--surface);
		border-top: 1px solid #e5e5e5;
		box-shadow: 0 -2px 8px rgba(0,0,0,.08);
		padding: 10px 14px;
	}
	.mobile-buy-bar-price{
		font-size: var(--fs-xl);
		font-weight: 700;
		color: var(--ink);
	}
	.mobile-buy-bar .btn{
		font-weight: 700;
	}
	/* Viber baloncic bi inace sjedio na fiksnoj traci */
	body:has(.mobile-buy-bar:not([hidden])) .viber-float{
		bottom: 74px;
	}
	#main-image{
		max-height: 320px;
	}
}

/* "Ponovo na lageru" je sada red kartica iznad "Preporucujemo Vam";
   razmak izmedju dvije sekcije drzi h3 iz .related-products */
.back-in-stock-row h3{
	padding-top: 40px;
}

/* --- "Ponovo na lageru" in the category sidebar --------------------------
   The same module is also assigned to the Product layout's content_bottom.
   The hardcoded col-lg-3 in back_in_stock.twig means 25% of a col-3 sidebar
   here, i.e. ~50px wide cards - Bootstrap columns are a share of the parent
   row, not of the viewport. The template has to stay as it is for the product
   page, where four across is right, so the sidebar re-flows the very same card
   markup into a compact list, borrowing the type and colours of the
   .category-filter block directly above it. */
#column-left .back-in-stock-row{
	margin-top: 22px;
}
#column-left .back-in-stock-row h3{
	text-align: left;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-size: var(--fs);
	padding: 0;
	margin-bottom: 12px;
}
#column-left .back-in-stock-row .row{
	row-gap: 0;
}
#column-left .back-in-stock-row .product-layout{
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}
/* .text-center sits on .product-thumb itself and, being a Bootstrap utility,
   carries !important - specificity alone cannot turn it off */
#column-left .back-in-stock-row .product-thumb{
	flex-direction: row;
	align-items: center;
	gap: 12px;
	height: auto;
	padding: 10px 0;
	margin-bottom: 0;
	text-align: left !important;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
}
#column-left .back-in-stock-row .product-layout:last-child .product-thumb{
	border-bottom: 0;
}
#column-left .back-in-stock-row .product-thumb:hover{
	box-shadow: none;
	border-color: var(--line);
}
/* a padded square tile: without it a flat, wide product (patch panel, rack
   unit) renders as a 58x14 sliver next to a tall one and the list looks ragged */
#column-left .back-in-stock-row .product-thumb .image{
	flex: 0 0 58px;
	width: 58px;
	height: 58px;
	margin-bottom: 0;
	padding: 6px;
	background: var(--surface-alt);
	border-radius: var(--r);
}
#column-left .back-in-stock-row .product-thumb .image a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
#column-left .back-in-stock-row .product-thumb .image img{
	max-height: 100%;
	max-width: 100%;
}
#column-left .back-in-stock-row .product-thumb:hover .image img{
	transform: none;
}
/* min-width: 0 lets the name shrink and clamp; flex items default to
   min-width: auto, which would push the row wider than the sidebar */
#column-left .back-in-stock-row .product-thumb .caption{
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
#column-left .back-in-stock-row .product-thumb .caption h4{
	font-size: var(--fs-md) !important;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 4px;
	min-height: 0;
}
#column-left .back-in-stock-row .product-thumb .caption h4 a{
	color: var(--ink-body);
}
#column-left .back-in-stock-row .product-thumb .caption h4 a:hover{
	color: var(--brand);
}
#column-left .back-in-stock-row .product-thumb .caption .price{
	font-size: var(--fs);
	font-weight: 700;
	color: var(--brand);
	margin: 0;
}
/* redundant here - everything in this module is in stock - and the sidebar is
   for discovering a product, not buying from the list */
#column-left .back-in-stock-row .stock-line,
#column-left .back-in-stock-row .product-thumb form{
	display: none;
}

/* Zamjenski tekst kad artikal nema unesen opis */
.product-no-description{
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand);
	border-radius: var(--r);
	padding: 16px 18px;
	color: var(--ink-soft);
	font-size: var(--fs);
}
.product-no-description p:last-child{
	margin-bottom: 0;
}
/* Viber dugme unutar zamjenskog teksta - jedino mjesto na stranici artikla
   gdje Viber ima smisla, jer tu nema podataka koje bi kupac inace procitao */
.btn-ask-viber{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 8px 16px;
	background: #7360f2;
	color: #ffffff !important;
	border-radius: var(--r);
	font-size: var(--fs);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--t);
}
.btn-ask-viber:hover{
	background: #5b48d8;
	color: #ffffff !important;
}
/* Plocica "Artikli na akciji" - nije kategorija, pa se izdvaja brend bojom
   umjesto zutim gradijentom koji je bio jedina zuta povrsina na sajtu */
.category-grid-item-sale{
	background: var(--brand-tint);
	border-color: #f0d2d2;
}
.category-grid-item-sale .category-grid-name{
	color: var(--brand);
	font-weight: 700;
}
.category-grid-item-sale:hover{
	border-color: var(--brand);
}