/* сбрасываем стили, которые есть по-умолчанию */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:60%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


body { font-family: PTRootUIWeb, sans-serif; color: #151528; }

.light{ color: rgb(93, 93, 100) }
.w100{ width: 100%; }
.error{ color: red; }

a {transition: 0.3s; text-decoration: none; color: #1683c6; }
a:hover{ color:rgb(254, 114, 0); } 
.hidden { display: none !important; }

.h2 {margin: 15px 0; font-weight: bold; font-size: 25px;}
.h1 {margin: 15px 0; font-weight: bold; font-size: 35px;}
.b {font-weight: bold;}
hr {background-color: #dfdfe1; height: 1px; margin: 20px 0; border: 0;}
sup{ opacity: 0.7; }

button {  
  padding: 15px 40px;
  width: 100%;
  background-color: rgb(254, 114, 0);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
}

button:hover {
  opacity: 0.9;
}

button.korpa-orange-icon, button.poredenje-icon{ position: relative; }
button.korpa-orange-icon img{ position: relative; top: 2px; left: -10px; }
button.izabrano-icon img { position: relative; top: 3px; left: -10px; }
button.poredenje-icon img { position: relative; top: 1px; left: -10px; }

.container { display: flex;}  
.column {flex: 1; }


/* Скрываем стандартный чекбокс */
input[type="checkbox"] {
  display: none;
  /* Скрываем стандартный чекбокс */
}

/* Стили для кастомного чекбокса */
input[type="checkbox"]+label { display: block; position: relative; cursor: pointer; padding-left: 25px; margin: 7px 0; }
input[type="checkbox"]+label span{
  position: absolute; top: 0; left: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  /* Цвет границы */
  border-radius: 4px;
  /* Округление углов */
  background-color: white;
  /* Белый фон */
  /* Отступ между чекбоксом и текстом */
  vertical-align: middle;
  /* Выравнивание по центру */
  margin-right: 8px;
}

/* Стили для выбранного чекбокса */
input[type="checkbox"]:checked+label span{
  background-color: #5d5d64;
  /* Темно-серый фон */
  border-color: #5d5d64;
  /* Цвет границы при выбранном состоянии */
}

/* Стили для галочки внутри чекбокса */
input[type="checkbox"]:checked+label span::before {
  content: '✔';
  /* Галочка */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Центрируем галочку */
  color: white;
  /* Цвет галочки */
  font-size: 12px;
  /* Размер галочки */
  line-height: 1;
}

input[type="radio"]+label {  
  display: block;
  position: relative;
  cursor: pointer;  
  padding-left: 25px;
    margin: 7px 0;
}
/* Скрываем стандартную радиокнопку */
input[type="radio"] {
  display: none;
  /* Скрываем стандартную радиокнопку */
}

.not_active{ pointer-events: none; opacity: 0.5; }

/* Стили для кастомной радиокнопки */
input[type="radio"]+label span{
  position: absolute;
    top: 0;
    left: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #5d5d64;
  /* Цвет границы */
  border-radius: 50%;
  /* Круглая форма */
  background-color: white;
  /* Белый фон */
  cursor: pointer;
  margin-right: 8px;
  /* Отступ между радиокнопкой и текстом */
  vertical-align: middle;
  /* Выравнивание по центру */
}

/* Стили для выбранной радиокнопки */
input[type="radio"]:checked+label span{
  border-color: #5d5d64;
  /* Цвет границы при выбранном состоянии */
}

/* Стили для внутреннего круга (при выбранном состоянии) */
input[type="radio"]:checked+label span::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background-color: #5d5d64;
  /* Серый цвет внутри радиокнопки */
  border-radius: 50%;
  /* Круглая форма */
}


/*** Основыные стили ***/

/* блок по центру экрана и органиченной ширины */
.cn {max-width:1500px; margin:0 auto; padding: 0 15px;}

/* шапка сайта */

.header { padding: 10px; position: relative; height: 133px; }
.top-menu { position: absolute; right: 15px; top: 10px; }
.top-menu li { display: inline;}
.top-menu a { font-size: 14px; letter-spacing: 0.02em; text-decoration: none; color: #5d5d64;  margin-right: 10px;}
.top-menu a:hover { color: rgb(254, 114, 0); }

.header .phone { top: 16px; left: 300px; position: absolute;}
.phone { font-size: 16px; text-decoration: none; color: inherit; }
.phone span {opacity: 0.8}

.catalog-button {
  color: #FF7300;
  cursor: pointer;
  align-items: center;
  padding: 10px 15px; border: 1px solid rgb(254, 114, 0); border-radius: 7px; position:relative; top:30px; left:4px; font-weight: bold; transition: 0.3s;
}

.catalog-button svg path {  fill: currentColor;}

.catalog-button:hover {  color: #fff; background-color: rgb(254, 114, 0); cursor: pointer;}


.catalog-button .catalog-button-text{ margin-left: 5px; }
.header .container { position: relative; margin-left: 290px;}

.search {position: relative;}
.search input {border: none; width: 100%; border-bottom: 1px solid #dfdfe1; position: relative; top:19px;transition: 0.3s;}
.search input:focus { outline: none; border-color:rgb(254, 114, 0); }
.search img {position: absolute; right: 3px; z-index: 2; top: 13px; cursor: pointer;}

.cat-slide-left .search { margin: 30px 0;}
.cat-slide-left .search input { width: 100%;  top:0px; }
.cat-slide-left .search img {position: absolute; right: 3px; z-index: 2; top: 0px; cursor: pointer;}

.menu { position: relative;}
.blocks { position: absolute; right: 15px; }

a.menu-block { position: relative; display: inline-block; height: 40px; text-align: center; margin-left: 20px; color:inherit;}
a.menu-block span { display: block; color: #5d5d64; text-decoration: none; font-size: 14px; letter-spacing: 0.02em; }
a.menu-block:hover span{ color: rgb(254, 114, 0); }

.num {
  position: absolute;
  bottom:32px;
  left: 48%;
  display: inline-block;
  width: 18px;
  padding: 0px 5px;
  border-radius: 20px;
  background-color: rgb(254, 114, 0);
  box-sizing: border-box;
  text-align: center;
  line-height: 18px;
  font-size: 10px;
  color: rgb(255, 255, 255) !important;
  white-space: nowrap;
  z-index: 1;
}

/* путь */

.path { font-size: 14px; color: #5d5d64;  }
.path a { color: #5d5d64; }
.path a:hover { color: rgb(254, 114, 0); }


/* Контент */

h1 { margin: 30px 0}

.categories {
  display: flex;
  flex-wrap: wrap;
  /* Разрешаем перенос элементов на новую строку */
  gap: 10px;
  /* Отступы между блоками */
}

.catblock {
  max-width: 292px;
  min-width: 180px;
  flex: 1 1 calc(20% - 10px);
  /* Автоматическая ширина с учётом отступов */
  box-sizing: border-box;
  /* Чтобы padding не увеличивал размер блока */
  background-color: #fff;
  color: inherit;
  /* Пример фона для видимости */
  padding: 10px;
  text-align: center;
  box-shadow: rgba(30, 31, 33, 0.12) 0px 5px 25px;
  font-weight: bold;
  font-size: 16px;
  line-height: 23px;
  /* Пример границы для видимости */
}



.catblock img {
  max-width: 70px;
  max-height: 70px;
  /* Чтобы изображения не выходили за пределы блока */
  height: auto;
}

.catblock span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.catalog { display:flex; max-width: 100%; flex-wrap: wrap; line-height: 25px; }
.cat-elem { display:block; padding: 0 20px 20px 0; flex: 1 0 25%; } 
.cat-elem a { color: inherit; font-size: 14px;}
.cat-elem a:hover { color: rgb(254, 114, 0); }
.cat-elem span a { font-weight: bold; font-size: 16px;}

.dark-bg { position: fixed;
  display: none;
  /* Закрепляем элемент поверх страницы */
  top: 0;
  left: 0;
  width: 100vw;
  /* Ширина 100% от экрана */
  height: 100vh;
  /* Высота 100% от экрана */
  background-color: rgba(0, 0, 0, 0.7);
  /* Полупрозрачный черный фон */ z-index: 10; 
  transition: 1.2s; }


.cat-slide {
  display: flex;
  position: fixed;
  top: 0;
  left: -100%;
  width: 80vw;
  /* Ширина 70% от экрана */
  height: 100vh;
  /* Высота 100% от экрана */
  background-color: white;
  /* Полупрозрачный черный фон */
  z-index: 11;
}


span.close{ position: absolute; top:15px; right: 27px; font-size: 40px; cursor: pointer; transition: 0.3s; z-index: 10;}
span.close:hover{color: rgb(254, 114, 0);}

.cat-slide-left { width:350px; height: 100vh; max-height: 100vh; overflow-y: auto; border-right: 6px solid #f5f5f6; padding: 20px 20px 20px 65px;}
.cat-slide-left a { transition: none; display: flex; align-items: center; color:inherit;  margin-bottom: 15px; }
.cat-slide-left a:hover { text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);  color: rgb(254, 114, 0); }
.cat-slide-left a img {margin-right: 10px;}
.cat-slide-left svg{ font-size: 20px; margin-right: 10px; color: #fe770a !important; }
.cat-slide-right { width: 100%; padding: 20px 20px; margin-right: 40px ;}
.slide_right {  max-height: 95vh;  overflow-y: auto; }

.footer {background-color: #f5f5f6; width: 100%; padding: 20px 0; margin-top: 30px; box-sizing: border-box;}
.footer-columns { display: flex;}


.footer-column {
  width:33%;
}

.footer-column ul {
  list-style: none; padding-left: 0;
}

.footer-column ul li { margin: 10px 0;}

.footer-column ul li a {font-size: 14px;letter-spacing: 0.02em;text-decoration: none;color: inherit;margin-right: 10px;}

.footer-column a:hover {
  color: rgb(254, 114, 0);
}

.footer-column .footer-logo{ margin-top: 10px;}

.footer-column p a {color: inherit;}

a.button, .siv_button {padding: 10px 40px; border: 1px solid #151528; border-radius: 6px; color:#151528; font-weight: bold; background: none;}
.footer .siv_button { width: auto; }

.product .artikal{ font-size: 14px; margin: 20px 0; }
.product .artikal span:last-child{cursor: pointer;}

.product .container { display: flex; }
.product .column { width: 33%; padding-right: 30px; }

.product .Kome_odgovara{ margin: 20px 0; background-color: #f5f5f6; padding: 20px 10px; border-radius: 10px;}

.product_params {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.product_params.is-collapsed {
  max-height: 400px;
}
.show-more {
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
}

.product_params h2{ font-size: 120%; }


.product .column div.product_param { padding-bottom: 7px; }

.product .column div.price {color: #000; font-weight: 700; font-size: 36px; margin: 10px 0; }

.c3 {max-width: 400px;}

.buttons {margin: 5px 0}
.buttons button {
  padding: 15px 20px;
  width: 49%;
  background-color: #f5f5f6;
  border: none;
  border-radius: 6px;
  color: #4f4f4f;
  font-weight: normal;
  font-size: 14px}

.buttons button:hover{color:rgb(254, 114, 0)}

.product .full_monitor{ position: fixed; top: 0; left: 0; z-index:15; width: 100%; height: 100%; background: #fff;}

.main-photo { display: block; max-width: 100%; margin: 0 auto; cursor: pointer;}
.photo { max-width: 100px; max-height: 100px; cursor: pointer;}

.product .productPageButton.in-cart {border: 1px solid #151528; background-color: #fff; color: #151528; font-weight: normal;}
.product .small-photos img{ margin: 5px; }
.product .full_monitor .small-photos { position: fixed;  bottom: 0;  left: 50%; transform: translateX(-50%);  display: flex;  justify-content: center;  gap: 20px;  padding: 10px;}


.imgArrow {position: absolute;width: 50px; height: 50px; border-radius: 25px; background-color: #f5f5f6; color:#6b6b72; text-align: center; vertical-align: middle; font-weight: bold; font-size:24px; transition: 0.3s; cursor: pointer;}


.imgArrow span{position: absolute;
  /* Абсолютное позиционирование */
  top: 50%;
  /* Отступ от верхней границы 50% */
  left: 50%;
  /* Отступ от левой границы 50% */
  transform: translate(-50%, -50%);}

.imgArrow:hover { color: #fff; background-color: rgb(254, 114, 0)}

.leftarr {top:45vh;left:10vw}
.rightarr {top:45vh;right:10vw}
  
.full_monitor .main-photo {margin-top:5vh;}

.product .opis {max-width: 850px;} 


.questions { padding-left:30px; padding-top: 20px; position: relative; margin-top:40px;background: #f5f5f6; width: 100%; height: 110px; font-size: 20px;  border-radius: 10px;}
.questions button { margin-top:  20px; background-color: #fff; border:1px solid #7f7f7f; color: #393939; font-size: 18px; padding: 10px 0; width:40%; font-weight: normal;}
.questions button:hover{border-color: rgb(254, 114, 0); color: rgb(254, 114, 0);}

.questions img {position: absolute; bottom: 0; right: 10px}

/****** list *********************/

.list .list-right{ padding-left: 10px; width: 100%; }

.list .list-right .list-right-top{ border-top: 1px solid #dfdfe1; margin: 0 20px; padding: 20px 0;}

.list .l-updates { position: relative; }
.list .l-updates .proiz-view {position: absolute; top: 0; right: 5px;}
.list .l-updates .proiz-view img:first-child{margin-right:10px}
.list .l-updates span {cursor: pointer; transition: 0.3s; margin-right: 7px;}
.list .l-updates span:hover {color: rgb(254, 114, 0);}

.proizvode {display: flex; width: 100%; flex-wrap: wrap; gap:10px }
.proizvode .proizvod {
  transition: 0.4s;
  position: relative;
  box-sizing: border-box;
  height: 300px;
  width: calc(25% - 10px);
  /* Высота каждого элемента */
  margin-bottom: 5px;
  padding: 20px;
  border: 1px solid #dfdfe1;
  border-radius: 20px;
 }

.proizvode.kratko .proizvod:hover { box-shadow: rgba(30, 31, 33, 0.12) 0px 5px 25px;}

.proizvode.kratko .proizvod a.proizvod-img{ display: block; text-align: center; margin-top: 10px;}
.proizvode.kratko .proizvod a.proizvod-img img{  max-height: 170px; max-width: 100%; }

.proizvode.kratko .proizvod a.name{ position: absolute;display: block; font-size: 16px; color:#151528; cursor: pointer; top: 190px}
.proizvode.kratko .proizvod a.name:hover{color: rgb(254, 114, 0);}

.proizvode.kratko .proizvod span.price-int { margin-top: 10px; font-size: 24px; }
.proizvode.kratko .proizvod div.price { position:absolute; display: block; bottom:15px; }

.proizvode.kratko .proizvod div.add-to-cart {position: absolute;display:inline-block;background-color: rgb(254, 114, 0);width:36px; height: 36px;  border-radius: 18px;  cursor:pointer; right:25px;bottom:15px; font-size: 20px;transition: 0.8s;}
.proizvode.kratko .proizvod div.add-to-cart.in-cart {background-color: #fff; border:1px solid #151528; }
.proizvode.kratko .proizvod div.add-to-cart:hover {opacity: 0.6;}
.proizvode.kratko .proizvod div.add-to-cart img { margin-top:9.5px; margin-left: 8px} 

.proizvode .proizvod div.functions { position: absolute; right: 25px; }
.proizvode .proizvod div.functions img{display: block; margin-bottom: 10px; cursor: pointer;}
.proizvode .proizvod div.functions img:first-child{ margin-left: 1px;}



.proizvode.podrobno { display: block; }
.proizvode.podrobno .proizvod{ width: 100%; height: 400px; border: none; border-radius: 0; border-bottom: 1px solid #dbdbdd; margin-bottom: 0; }

.proizvode.podrobno .proizvod a.proizvod-img { text-align: left; margin-right:25px; position: absolute; top: 20px }
.proizvode.podrobno .proizvod a.proizvod-img img{ max-height: 250px; max-width: 250px; }

.proizvode.podrobno .proizvod .text { position: absolute; left: 290px; width: 65%; } 
.proizvode.podrobno .proizvod .text a.name { font-size: 16px; position: absolute; color: #000; }
.proizvode.podrobno .proizvod .text a.name:hover { color: rgb(254, 114, 0); }

.proizvode.podrobno .proizvod .text div.params { display: inline-block; margin-top: 55px; }
.proizvode.podrobno .proizvod .text div.params .param {margin-bottom: 5px}
.proizvode.podrobno .proizvod .text div.params .param span.param-name {font-size: 14px; color:#5d5d64; }
.proizvode.podrobno .proizvod .text div.params .param span.param-value {font-size: 14px; color:#151528 }

.proizvode.podrobno .proizvod div.add-to-cart {position: absolute; right: 20px; bottom:20px; background-color: rgb(254, 114, 0); color: white; padding:10px 16px; border-radius: 10px; transition: 0.7s; cursor: pointer; }
.proizvode.podrobno .proizvod div.add-to-cart.in-cart {border:1px solid #151528; background-color: #fff; color:#151528}
.proizvode.podrobno .proizvod div.add-to-cart img{position: relative; top:2px; margin-right: 3px;} 
.proizvode.podrobno .proizvod div.add-to-cart:hover {opacity: 0.8;}
.proizvode.podrobno .proizvod div.add-to-cart.in-cart:hover {opacity: 0.5;}

.proizvode.podrobno .proizvod div.price {position: absolute; right: 250px; bottom: 25px; font-size: 18px;}
.proizvode.podrobno .proizvod span.price-int { font-size: 30px; font-weight: bold; }




/*  filteri   */

.list-content .filters-button {display:none; padding: 10px 15px;color: rgb(254, 114, 0);border: 1px solid rgb(254, 114, 0);background-color: white;border-radius: 7px;position: relative;font-weight: bold;transition: 0.3s;}
.list-content .filters-button:hover {color: white;background-color: rgb(254, 114, 0);cursor: pointer;}

.filters { position: relative; min-width: 300px; width: 300px; background-color: #f5f5f6; padding: 20px; box-sizing: border-box; border-radius: 20px; }
.filters input {border: none; outline: none; padding: 5px 7px}
.filters span.filteri {font-size: 20px; font-weight: bold;}
.filters input.search {width: 240px; box-sizing: border-box; margin-top: 10px;}
.filters input.cena {width: 100px; margin: 10px 0; display: inline-block;}
.filters div.block-header {font-size: 16px; margin-top: 15px; font-weight: bold; color: #19192b; cursor: pointer; }
.filters div.block-header:hover {color: black}
.filters div.block-header img { position:relative; float: right; top:6px; transition: 0.4s;  transform: rotate(-90deg); }
.filters div.block { margin: 10px 0; display: none; }
.filters div.block .checkbox, .filters div.block .radio { margin: 7px 0; }
.filters div.block .showMore { color: rgb(254, 114, 0); font-size: 14px;}
.filters div.block .showMore:hover { cursor: pointer; transition: 0.3s;}
.filters div.block input:not(.top5) + label { display: none; }
.filters .close-filters {top:14px; right: 27px; display: none; position: absolute;font-size: 40px;cursor: pointer}
.filters .button{ margin-top: 20px;}
.filters .filters-clear-all{ position: absolute; top: 25px; right: 30px; color: rgb(254, 114, 0); font-size: 14px; cursor: pointer; } 

/*----------*/

.price-filter { margin-top: 8px; }
.price-inputs { margin-bottom: 10px; }

.price-slider{
  position: relative;
  height: 26px;
  user-select: none;
}

.price-slider .track{
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 999px;
  background: #e6e6e6; /* серый */
}

.price-slider .range{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 999px;
  background: #ff7300; /* оранжевый */
}

/* range больше НЕ ловят мышь вообще */
.price-slider .thumb{
  pointer-events: none !important;
  opacity: 0;
}

/* кружки ловят мышь */

.price-slider .dot{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff7300;
  box-shadow: 0 0 0 4px rgba(255,115,0,0.18);
  pointer-events: auto !important;
  cursor: pointer;
}


/* Два range поверх, но невидимые */
.price-slider .thumb{
  position: absolute;
  left: 0; right: 0;
  top: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  opacity: 0;
  pointer-events: all;
}

.price-slider .thumb-max { z-index: 3; }
.price-slider .thumb-min { z-index: 2; }


/*----------*/


.apply-filters-bubble{
  position: absolute;
  background: #ff7300;
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: .15s;
}

.apply-filters-bubble:before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-style: solid;
  border-color: transparent #ff7300 transparent transparent;
}

.apply-filters-bubble.is-visible{
  opacity: 0.8;
  pointer-events: auto;
}
.apply-filters-bubble.is-visible:hover{
  opacity: 1;
}

/* на мобильном — снизу под инпутом */
@media (max-width: 768px){
  .apply-filters-bubble:before{
    left: 16px;
    top: -6px;
    transform: none;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #ff7300 transparent;
  }
}




/*----------*/


.list-content {display: flex;}

.proizvode .pager{ width: 100%; text-align: center; margin-top: 20px;}
.proizvode .pager span, .proizvode .pager span.selected, .proizvode .pager a, .proizvode .pager a.selected { display: inline-block; color: #151528; margin: 0 5px; padding: 7px 10px; border-radius: 15px; cursor: pointer;}
.proizvode .pager span:hover, .proizvode .pager a:hover {background-color: #fef0e4;color: rgb(254, 114, 0);}
.proizvode .pager span.selected, .proizvode .pager a.selected {background-color: #f5f5f6;}
.proizvode .pager span:first-child:hover, .proizvode .pager a:last-child:hover, .proizvode .pager a:first-child:hover {background-color: #fef0e4;}
.proizvode .pager .prev, .proizvode .pager .next{ color:rgb(254, 114, 0); }

.proizvode .pager button {margin-left:20px;font-weight:normal;max-width:150px;display: inline-block; white-space:nowrap; padding: 7px 15px; border: 1px solid rgb(254, 114, 0);color: rgb(254, 114, 0); background-color: white;}

.proizvode .pager button:hover {background-color:rgb(254, 114, 0); color:white;}


.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


.list .selected-filters { display: flex; }
.list .selected-filters div.filter { padding: 6px 8px; color: #151528; font-size: 16px; background-color: #f5f5f6; border-radius: 3px; margin-right: 10px; margin-bottom: 20px; cursor: pointer; }
.list .selected-filters div.filter span {color: #a8a8ac; margin-left: 7px; cursor: pointer; }

div.l-updates div.proiz-view span { opacity: 0.3; }
div.l-updates div.proiz-view span.b { opacity: 1; }

.izabrano .list-content .izabrano-functions { width: 220px; padding-right:20px}
img.remove-izabrano {opacity: 1.4; position: relative; right: 0px;}

.izabrano-functions button {background-color: #fff; color: rgb(254, 114, 0); border: 1px solid rgb(254, 114, 0); padding: 10px; margin-bottom: 10px}
.izabrano-functions button:hover {background-color: rgb(254, 114, 0); color: #fff;}

.korpa {display: flex; gap: 30px}
.korpa .korpa-proizvode {display: block; width: 75%; margin-right: 30px;}

.korpa .korpa-proizvode div.korpa-proizvod { position: relative; width: 100%; padding: 20px; border-bottom:1px solid #c2c2c2; }
.korpa .korpa-proizvode div.korpa-proizvod:hover{ box-shadow: rgba(30, 31, 33, 0.12) 0px 5px 25px; }
.korpa .korpa-proizvode .korpa-proizvod .main-img { margin-left: 38px; }
.korpa .korpa-proizvode .korpa-proizvod .name { position: absolute; top: 20px; margin-left: 200px; width: calc(100% - 420px); }
.korpa .korpa-proizvode .korpa-proizvod .name a{ color: black; font-size: 24px; }
.korpa .korpa-proizvode .korpa-proizvod .name a:hover{ color: rgb(254, 114, 0)}
.korpa .korpa-proizvode .korpa-proizvod div.price{position: absolute; right: 20px; bottom: 20px;}
.korpa .korpa-proizvode .korpa-proizvod div.price .price-int{ font-size: 35px; }
.korpa .korpa-proizvode .korpa-proizvod div.price .light { font-size: 25px; }
.korpa .korpa-proizvode .korpa-proizvod .functions {position: absolute; top:20px; right: 20px;}
.korpa .korpa-proizvode .korpa-proizvod .functions img.func_img {margin-left: 10px;}
.korpa .korpa-proizvode .korpa-proizvod .functions .korpa-checkbox {}
.korpa .korpa-proizvode .korpa-proizvod .functions div.amount {display: inline-block; margin-right: 20px; position: relative;bottom: 3px;}
.korpa .korpa-proizvode .korpa-proizvod .functions div.amount input {width:40px; text-align: center; border: none; border-bottom: 1px solid #c0c0c0; outline: none;}
.korpa .korpa-proizvode .korpa-proizvod .functions .iz-add, .korpa-del { cursor: pointer;}
.korpa .more, .korpa .less { font-weight: bold; cursor: pointer}


.korpa .korpa-right { display: block; width: 25%; }
.korpa .korpa-right .block1 { background-color: #f5f5f6; padding: 20px;border-radius: 10px; margin-bottom: 15px;}
.korpa .korpa-right .block1 div.price {margin-bottom: 10px;}
.korpa .korpa-right .block1 div.price .price-int {font-size: 30px;}
.korpa .korpa-right .block1 div.price .light {font-size: 20px;}
.korpa .korpa-right .block1 .proiz-amount {font-size: 14px;}


.gray-button {margin-bottom: 15px; background-color: white; border:1px solid black; color:black; padding: 10px 0}
.gray-button:hover {background-color: black; color: white}


.korpa .korpa-right .block2 { background-color: white; padding: 20px;border:1px solid rgb(254, 114, 0); border-radius:10px; margin-bottom: 15px;}


/** Сравнение **/

.poredenje button.siv_button{ max-width: 200px; margin-bottom: 30px;}
.poredenje .price-int { font-size: 26px;}
.poredenje a { color: inherit; }
.poredenje a:hover { color: rgb(254, 114, 0); }

.poredenje table td{
  max-width: 300px;
  padding: 10px;
}

.poredenje table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #dfdfe1;
  margin-bottom: 10px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  margin-right: 5px;
  transition: background-color 0.3s;
}

.tab:hover {
  color: #000;
}

.tab.active {
  border-bottom: 2px solid #151528;
  font-weight: bold;
}

.tabs-content {
  padding: 20px 0;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.poredenje div.add-to-cart {
  display: inline-block;
  background-color: rgb(254, 114, 0);
  color: white;
  padding: 10px 16px;
  border-radius: 10px;
  transition: 0.7s;
  cursor: pointer;
  /* margin-left: 10px; */
}

.poredenje div.add-to-cart.in-cart {
  border: 1px solid #151528;
  background-color: #fff;
  color: #151528
}

.poredenje div.add-to-cart img {
  position: relative;
  top: 2px;
  margin-right: 3px;
}

.poredenje div.add-to-cart:hover {
  opacity: 0.8;
}

.poredenje div.add-to-cart.in-cart:hover {
  opacity: 0.5;
}


.poredenje .poredenje-td{ position: relative; }

.poredenje div.functions {
  position: absolute; 
  top: 0;
  right: 25px;
}
.poredenje div.functions img {
  position: absolute;
  cursor: pointer;
}
.poredenje div.functions img.iz-add {
  top: 25px;
}


/******************************/

.compare-topscroll{
  overflow-x: scroll;       /* важно: scroll, чтобы полоса рисовалась */
  overflow-y: hidden;

  height: 10px;             /* реальная высота полосы */
  padding: 0;               /* убираем padding, чтобы не ломать */
  margin-bottom: 10px;
  background: #fff;

  box-sizing: border-box;
  min-width: 0;
}
/* ПЕРЕБИВАЕМ любые глобальные правила */
.compare-topscroll::-webkit-scrollbar{
  height: 10px !important;
}

.compare-topscroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.35) !important;
  border-radius: 10px;
}

.compare-topscroll::-webkit-scrollbar-track{
  background: transparent;
}

/* spacer */
.compare-topscroll .spacer{
  height: 1px;
  width: 0; /* задаёт JS */
}


.compare-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}


.compare-scroll{
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* старый Edge/IE */
}
.compare-scroll::-webkit-scrollbar{
  height: 0;                    /* Chrome/Safari */
}


.compare-table{
  min-width: 100%;
  border-collapse: collapse;
}
.compare-table td.b{
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fafafa; /* ОБЯЗАТЕЛЬНО, иначе будет прозрачный */
  min-width: 150px; /* можно подстроить */
}
.compare-table tr:nth-child(even) td.b{
  background: #f2f2f2;
}

.compare-table tr td.b{
  box-shadow: 2px 0 0 #e5e5e5; /* визуальное разделение */
}
@media (max-width: 768px){
  .compare-table td{
    min-width: 220px; /* чтобы карточки товаров были читаемы */
  }
  .compare-table td.b{
    min-width: 100px;
    position: static;   /* или relative */
    left: auto;
    z-index: auto;
  }
}


/******************************/



.obaviti-porudzbinu table { width: 100%; }
.obaviti-porudzbinu table tr td { padding: 10px 30px 30px 30px; }
.obaviti-porudzbinu input[type="text"] { border: none;width: 100%; border-bottom: 1px solid #dfdfe1; transition: 0.3s;}
.obaviti-porudzbinu input:focus {outline: none; border-color: rgb(254, 114, 0);}

.obaviti-porudzbinu input[type="radio"]+label {  line-height: 30px; display: inline-block; margin-right: 10px; border: 1px solid #b3b3b7; box-sizing: border-box; padding: 5px 15px; border-radius: 5px; text-align: center;}
.obaviti-porudzbinu input[type="radio"]:checked+label { border: 2px solid rgb(254, 114, 0); }

.obaviti-porudzbinu button{ width: auto; }

.obaviti-porudzbinu .korpa-right ul {padding-left: 0;}
.obaviti-porudzbinu .korpa-right li{list-style: none;  margin-bottom: 10px;}
.obaviti-porudzbinu .korpa-right .block1 div.price .price-int {font-size: 20px;}
.obaviti-porudzbinu .korpa-right .block1 div.price .light {font-size: 13px;}
.obaviti-porudzbinu .korpa-right .block1 .proiz-info {color:#727272; font-size: 90%;}

/**** upit ******/
#upit {
  display: none;
}
#upit .dark-bg {display: block; z-index: 10;}
#upit .form {  background-color: white; height: 100vh; width: 600px; position: fixed; z-index: 12; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; }

#upit .form .h1 { margin-bottom: 30px; }
#upit .form input { border: none; outline: none; border-bottom: 1px solid #b3b3b7;  width: 100%; }
#upit .form label { margin-bottom: 30px; }
#upit .form textarea { border: 1px solid #b3b3b7; outline: none; border-radius: 5px; width:100%; height: 200px;resize: none;box-sizing: border-box; padding: 10px }
#upit .form .error{ margin-bottom: 30px; }


/**********/

.loader-ring {
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff7300,
    #ffb347,
    #ff7300,
    transparent 65%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 3px)
  );

  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}




/*---------------- Адаптивные версии ------------------*/

@media (max-width: 1500px) {
    .proizvode .proizvod {
      width: calc(33% - 10px);
    }
    .proizvode.podrobno .proizvod div.price {right: 230px; bottom: 20px; font-size: 16px; }

}

@media (max-width: 1300px) {
    .proizvode.podrobno .proizvod .text { width: 60%; } 
}

@media (max-width: 1250px) {
    .proizvode .proizvod {
      width: calc(50% - 10px);
    }
}
@media (max-width: 1200px) {
    .proizvode.podrobno .proizvod .text { width: 55%; } 
    .korpa .korpa-proizvode .korpa-proizvod .name a{ font-size: 18px; }
    .cat-slide { width: 95vw;}      
    .cat-elem {
      flex: 1 0 33%;
    }    
}

@media (max-width: 1000px) {

    .blocks a.menu-block span:last-child ,
    span.catalog-button span.catalog-button-text ,
    a.phone,
    .header div.search, 
    ul.top-menu,
    .path_last
    { display: none; }

      .footer-column { width: 50%; }
      div.footer-column:last-child { display: none; }

    .header{ height: 50px; }
    span.catalog-button{ top: 9px; }
    .logo { position: absolute; top: 8px; height: 40px; width: auto;}
    .logo img{height: 40px; width: auto; }

    div.blocks { top: 20px; min-width: 120px; }

    .product .container {flex-direction: column;}
    .product .container .column {width: 100%;}

    .list-content {display: block;}

    .questions{
      padding-left: 10px; 
      margin-top: 10px;
      width: auto;
    }

    .product .container .column{
      box-sizing: border-box;   
    }
    .product .column{
      padding-right: 0;
    }

    h1{
      font-size: 18px;
    }

    .list .list-right .list-right-top {
      margin: 0;
    }  

    .list-content .filters-button {display: block;}

    .filters { position: absolute; left: -100%; top:0; width: 100vw; border-radius: 0;}
    .filters .close-filters { display: inline; } 
    .filters .filters-clear-all{ left: 100px; } 

    .list .list-right{ padding-left: 0;}
    .proizvode.podrobno .proizvod { padding: 20px 0; } 
    .proizvode.podrobno .proizvod .text { left: 260px; width: 60%; } 


    .korpa {display: block; }
    .korpa .korpa-proizvode{ width: auto; }
    .korpa .korpa-right { width: auto; margin-top: 20px; }    
    .korpa .korpa-proizvode .korpa-proizvod div.price .price-int{ font-size:25px; }
    .korpa .korpa-proizvode .korpa-proizvod div.price .light { font-size: 20px; }

    .korpa .korpa-proizvode .korpa-proizvod .name { display: block; position: relative; top: 0; margin-top: 10px; margin-left: 0px; width: 100%; font-size: 14px;  }        
    .korpa .korpa-proizvode .korpa-proizvod .functions div.amount { display: block; margin-right: 0px; }    
    .korpa .korpa-proizvode .korpa-proizvod .functions img.func_img { margin-top: 20px; margin-right: 5px;}    

    .poredenje table td{ font-size: 14px; }

}


@media (max-width: 800px) {

    .cat-slide-right,
    .cat-slide-left .h2,
    .slide-link-arrow
    { display: none; }

    .cat-slide-left {
      padding-left: 20px;
      border-right: none;
    }    

    .proizvode.podrobno .proizvod a.proizvod-img img{ max-width: 200px; }
    .proizvode.podrobno .proizvod .text { left: 210px; width: 60%; }
}

@media (max-width: 660px) {

    .proizvode .proizvod {
        margin-bottom: 0px;
        padding: 10px;
        width: calc(50% - 5px);
    }
    .proizvode.kratko .proizvod a.name{ font-size: 12px; top: 190px}
    .proizvode.kratko .proizvod span.price-int{ font-size: 16px;}
    .proizvode.kratko .proizvod div.add-to-cart{ right: 5px; bottom: 5px; }
    .proizvode.kratko .proizvod div.functions { right: 10px; }
    .proizvode.kratko .proizvod div.functions img{ display: inline; margin-left: 10px; }    
    .proizvode.kratko .proizvod a.proizvod-img{ margin-top: 25px; }    

    .proizvode.podrobno .proizvod div.functions { position: absolute; display: block; left: 0px; bottom: 12px; }
    .proizvode.podrobno .proizvod div.functions img{ display: inline; margin-left: 10px; }
    .proizvode.podrobno .proizvod div.functions img:first-child{ margin-left: 0px; }

    .proizvode.podrobno .proizvod a.proizvod-img img{ max-width: 150px; max-height: 150px; }
    .proizvode.podrobno .proizvod .text { left: 160px; width: 52%; font-size: 12px;}   
    .proizvode.podrobno .proizvod .text a.name { font-size: 12px; } 
    .proizvode.podrobno .proizvod .text div.params .param span.param-name {font-size: 12px; }
    .proizvode.podrobno .proizvod .text div.params .param span.param-value {font-size: 12px;  }    

    .proizvode.podrobno .proizvod div.price { font-size: 12px; right: 120px; bottom: 20px; }
    .proizvode.podrobno .proizvod span.price-int { font-size: 22px; } 
    
    .proizvode.podrobno .proizvod div.add-to-cart { right: 0px; bottom: 16px; padding: 7px; font-size: 11px; }   
    
    .proizvode .proizvod:hover { box-shadow: none;}

    #upit .form {  width: 90%; }   

    .poredenje table td{ font-size: 12px; }

}


/* HERO */
.hero { padding: 40px 0; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  margin: 0 0 14px;
}

.hero__lead {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 18px;
  opacity: 0.95;
}

.hero__list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.hero__list li {
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
  line-height: 1.5;
}
.hero__list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.12);
  transition: transform .08s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.08); }

.btn--primary { background: #111; color: #fff; border-color: #111; }
.btn--ghost { background: transparent; color: #111; }

.hero__note {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 14px;
  line-height: 1.5;
}
.hero__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  margin-right: 8px;
}

.hero__media { display: grid; gap: 14px; }
.hero__img {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  background: #f6f6f6;
}
.hero__img img { width: 100%; height: auto; display: block; }

.hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-card {
  border-radius: 16px;
  padding: 14px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
.hero-card__title { font-weight: 700; margin-bottom: 6px; }
.hero-card__text { font-size: 13px; line-height: 1.45; opacity: 0.95; }

@media (max-width: 900px) {
  .hero { padding: 26px 0; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .hero__cards { grid-template-columns: 1fr; }
  .btn { width: 100%; }
}