/* сбрасываем стили, которые есть по-умолчанию */
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; }
body.filters-open { overflow: hidden; }

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

h1 .h1-tip{
  display: inline;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  margin-left: 8px;
  color: rgb(93, 93, 100);
}

.brand-pages{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 0 0 24px;
}
.brand-pages a{
  display:inline-block;
  padding:8px 14px;
  border:1px solid #dfdfe1;
  border-radius:999px;
  color:#5d5d64;
  background:#f5f5f6;
}
.brand-pages a:hover,
.brand-pages a.active{
  color:#fff;
  border-color:rgb(254, 114, 0);
  background:rgb(254, 114, 0);
}

.brand-pages a.brand-pages-all{
  color: rgb(254, 114, 0);
  border-color: rgb(254, 114, 0);
  background: #fff7f1;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(254, 114, 0, 0.12);
}

.brand-pages a.brand-pages-all:hover,
.brand-pages a.brand-pages-all.active{
  color:#fff;
  border-color:rgb(254, 114, 0);
  background:rgb(254, 114, 0);
  box-shadow: 0 12px 28px rgba(254, 114, 0, 0.2);
}

.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,
.catalog-button svg rect { 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: 150px;
  max-height: 150px;
  /* Чтобы изображения не выходили за пределы блока */
  height: auto;
}

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

.brands-grid .brand-card {
  display: flex;
  min-height: 70px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.brand-card-logo {
  max-width: 160px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-card-name {
  margin-top: 12px;
}

.top-brands-more {
  margin-top: 22px;
  text-align: center;
}

.top-brands-more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgb(254, 114, 0);
  border-radius: 999px;
  background: #fff7f1;
  color: rgb(254, 114, 0);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(254, 114, 0, 0.12);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.top-brands-more a:hover {
  background: rgb(254, 114, 0);
  color: #fff;
  border-color: rgb(254, 114, 0);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(254, 114, 0, 0.2);
}

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

.category-text {
  margin-top: 28px;
  padding: 26px 28px;
  border: 1px solid #dfdfe1;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfbfc 0%, #f5f5f7 100%);
  box-shadow: 0 10px 30px rgba(30, 31, 33, 0.06);
  color: #24242b;
}

.category-text h2 {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.25;
}

.category-text p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  color: #3a3a42;
}

.category-text p:last-child {
  margin-bottom: 0;
}

.category-text strong {
  color: #151528;
}

.category-brands {
  margin-top: 28px;
}

.category-brands h2 {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.25;
}

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

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
}

.availability-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

.availability-badge.in-stock {
  color: #136f39;
  background: #ebf8ef;
  border: 1px solid #c8e8d1;
}

.availability-badge.out-of-stock {
  color: #9f2f2f;
  background: #fff1f1;
  border: 1px solid #f1cccc;
}

.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;
  --viewer-top-space: 84px;
  --viewer-side-space: 110px;
  --viewer-bottom-space: 168px;
}

.main-photo {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  cursor: pointer;
  object-fit: contain;
  box-sizing: border-box;
}

.product .photos {
  width: 100%;
}

.product .small-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.photo {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dfdfe1;
  box-sizing: border-box;
  padding: 4px;
}

.product .small-photos img {
  margin: 0;
}

.product .productPageButton.in-cart {border: 1px solid #151528; background-color: #fff; color: #151528; font-weight: normal;}

.product .full_monitor .small-photos {
  position: fixed;
  left: 50%;
  bottom: 16px;
  width: auto;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  padding: 12px 14px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  justify-content: flex-start;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 36px rgba(21, 21, 40, 0.14);
  z-index: 2;
}

.imgArrow {
  position: fixed;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: rgba(245, 245, 246, 0.92);
  color:#6b6b72;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 24px;
  transition: 0.3s;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(21, 21, 40, 0.12);
}


.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: 50%;
  left: 24px;
  transform: translateY(calc(-50% - 28px));
}

.rightarr {
  top: 50%;
  right: 24px;
  transform: translateY(calc(-50% - 28px));
}
  
.full_monitor .main-photo {
  width: auto;
  max-width: min(1400px, calc(100vw - (var(--viewer-side-space) * 2)));
  max-height: calc(100vh - var(--viewer-top-space) - var(--viewer-bottom-space));
  margin: var(--viewer-top-space) auto var(--viewer-bottom-space);
}

.product .full_monitor > .close{
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 3;
  width: 52px;
  height: 52px;
  line-height: 52px;
  border-radius: 26px;
  background: rgba(245, 245, 246, 0.96);
  text-align: center;
  box-shadow: 0 10px 24px rgba(21, 21, 40, 0.12);
}

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

.product .opis img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px auto;
}

.product .opis p,
.product .opis ul,
.product .opis ol,
.product .opis table,
.product .opis iframe {
  max-width: 100%;
}
.product .brand-info,
.list .brand-info,
.brand-page-intro {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid #dfdfe1;
  border-radius: 12px;
  background: #f9f9fa;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.product .brand-info-text,
.list .brand-info-text,
.brand-page-intro .brand-info-text {
  flex: 1 1 auto;
}
.product .brand-info-text h2,
.list .brand-info-text h2,
.brand-page-intro .brand-info-text h2 {
  margin-top: 0;
}
.product .brand-info-logo,
.list .brand-info-logo,
.brand-page-intro .brand-info-logo {
  flex: 0 0 auto;
  max-width: 160px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-page-intro{
  margin-bottom: 30px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.brand-page-intro .brand-info-text {
  min-width: 0;
}

.brand-page-intro .brand-info-logo {
  flex: 0 0 180px;
  max-width: 180px;
  max-height: 96px;
  margin-left: auto;
  align-self: flex-start;
}

.brand-rubrics{
  margin-top: 30px;
}

.brand-rubrics h2{
  margin-bottom: 18px;
}

.brand-rubrics-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.brand-rubric-card{
  flex: 1 1 calc(25% - 14px);
  min-width: 220px;
  padding: 18px 20px;
  border: 1px solid #dfdfe1;
  border-radius: 16px;
  background: #fff;
  box-shadow: rgba(30, 31, 33, 0.08) 0 5px 20px;
  color: inherit;
  transition: 0.3s;
}

.brand-rubric-thumb{
  display: block;
  max-width: 120px;
  max-height: 90px;
  width: auto;
  height: auto;
  margin: 0 auto 14px;
  object-fit: contain;
}

.brand-rubric-card:hover{
  color: inherit;
  border-color: rgb(254, 114, 0);
  box-shadow: rgba(254, 114, 0, 0.15) 0 8px 24px;
  transform: translateY(-2px);
}

.brand-rubric-name{
  display: block;
  color: #151528;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
}

.brand-rubric-meta{
  display: block;
  color: #5d5d64;
  font-size: 14px;
}

.empty-state{
  position: relative;
  margin: 18px 0 28px;
  padding: 34px 32px;
  border: 1px solid #e7ded6;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(254, 114, 0, 0.14), transparent 28%),
    linear-gradient(135deg, #fffaf6 0%, #fff 55%, #f7f7f8 100%);
  box-shadow: 0 18px 40px rgba(31, 24, 19, 0.08);
  overflow: hidden;
}

.empty-state::after{
  content: "";
  position: absolute;
  top: -38px;
  right: -38px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(254, 114, 0, 0.09);
}

.empty-state-badge{
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #151528;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.empty-state-title{
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-bottom: 10px;
  color: #151528;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.12;
}

.empty-state p{
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  color: #5b5b64;
  font-size: 17px;
  line-height: 1.55;
}

@media (max-width: 768px){
  .categories{
    gap: 8px;
  }

  .catblock{
    flex: 0 0 calc(50% - 4px);
    min-width: 0;
    max-width: none;
    padding: 8px;
  }

  .catblock img{
    max-width: 110px;
    max-height: 110px;
  }

  .catblock span{
    margin-top: 8px;
    font-size: 14px;
  }
  .empty-state{
    padding: 24px 20px;
    border-radius: 18px;
  }

  .empty-state-title{
    font-size: 26px;
  }

  .empty-state p{
    font-size: 15px;
  }
}


.questions { padding-left:30px; padding-top: 20px; position: relative; margin-top:40px;background: #f5f5f6; 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:-5px;
  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;}

.empty-products{
  width: 100%;
  margin: 12px 0 0;
  padding: 32px 28px;
  border: 1px solid #dfdfe1;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfbfc 0%, #f5f5f6 100%);
  text-align: center;
  box-sizing: border-box;
}

.empty-products-title{
  color: #151528;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}

.empty-products-text{
  max-width: 520px;
  margin: 0 auto;
  color: #5d5d64;
  font-size: 16px;
  line-height: 1.6;
}


.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 .name .tip-proizvoda { margin: 8px 0 6px; color: #6d6d6d; font-size: 16px; }
.korpa .korpa-proizvode .korpa-proizvod div.price{position: absolute; right: 20px; bottom: 20px;}
.korpa .korpa-proizvode .korpa-proizvod div.price .price-int{ font-size: 26px; }
.korpa .korpa-proizvode .korpa-proizvod div.price .light { font-size: 20px; }
.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 div.amount {display: inline-flex; align-items: center; gap: 8px; margin-right: 20px; position: relative; bottom: 3px;}
.korpa .korpa-proizvode .korpa-proizvod .functions div.amount input {width: 52px; height: 34px; text-align: center; border: none; border-bottom: 1px solid #c0c0c0; outline: none; font-size: 18px;}
.korpa .korpa-proizvode .korpa-proizvod .functions .iz-add, .korpa-del { cursor: pointer;}
.korpa .more, .korpa .less {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; 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;}
.korpa .korpa-right .block1 a.disabled {pointer-events: none; cursor: default;}
.korpa .korpa-right .block1 button.disabled,
.korpa .korpa-right .block1 button:disabled {background-color: #d6d6d8; border-color: #d6d6d8; color: #7c7c84; cursor: not-allowed;}
.korpa .korpa-right .block1 button.disabled:hover,
.korpa .korpa-right .block1 button:disabled:hover {background-color: #d6d6d8; color: #7c7c84;}


.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;
  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 li a {color: #151528; text-decoration: none;}
.obaviti-porudzbinu .korpa-right li a:hover {color: rgb(254, 114, 0);}
.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%;}
.obaviti-porudzbinu .korpa-right .back-to-cart {display: inline-block; margin-top: 12px; color: #151528; text-decoration: none; border-bottom: 1px solid #151528;}
.obaviti-porudzbinu .korpa-right .back-to-cart:hover {color: rgb(254, 114, 0); border-bottom-color: rgb(254, 114, 0);}

/**** upit ******/
#upit {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  padding: 24px 16px;
  box-sizing: border-box;
}
#upit .dark-bg {display: block; position: fixed; inset: 0; z-index: 0;}
#upit .form {
  position: relative;
  z-index: 1;
  width: min(600px, 100%);
  margin: 0 auto;
  padding: 24px 20px 28px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(21, 21, 40, 0.18);
}

#upit .form .close{
  top: 16px;
  right: 18px;
}

#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: 180px;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; left: 80px; height: 40px; width: auto;}
    .logo img{height: 40px; width: auto; }

    div.blocks { top: 0px; 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;
    }

    .product .column.c3{
      margin-top: 12px;
    }

    .product .brand-info,
    .list .brand-info,
    .brand-page-intro {
      padding: 18px;
      flex-direction: column;
    }

    .product .brand-info-logo,
    .list .brand-info-logo,
    .brand-page-intro .brand-info-logo {
      max-width: 140px;
      max-height: 80px;
    }

    .brand-page-intro {
      flex-direction: column;
      gap: 16px;
    }

    .brand-page-intro .brand-info-logo {
      order: -1;
      margin-left: 0;
      flex-basis: auto;
      max-width: 160px;
      max-height: 84px;
    }

    .brand-rubric-card{
      flex-basis: 100%;
      min-width: 0;
    }

    .category-text {
      padding: 18px;
      border-radius: 12px;
    }

    .category-text h2 {
      font-size: 20px;
    }

    .category-text p {
      font-size: 15px;
      line-height: 1.65;
    }

    .empty-products{
      padding: 24px 18px;
      border-radius: 12px;
    }

    .empty-products-title{
      font-size: 22px;
    }

    .empty-products-text{
      font-size: 15px;
    }

    h1{
      font-size: 20px;
    }

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

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

    .filters { position: fixed; left: -100%; top: 0; width: 100vw; border-radius: 0; padding: 64px 20px 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}
    .filters .close-filters { display: inline; top: 8px; right: 18px; line-height: 1; z-index: 2; } 
    .filters .filters-clear-all{ top: 24px; left: 20px; right: auto; } 

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

    .obaviti-porudzbinu table,
    .obaviti-porudzbinu table tbody,
    .obaviti-porudzbinu table tr,
    .obaviti-porudzbinu table td{
      display: block;
      width: 100%;
    }

    .obaviti-porudzbinu table tr td{
      box-sizing: border-box;
      padding: 10px 0 18px;
    }

    .obaviti-porudzbinu .tabs{
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
    }

    .obaviti-porudzbinu .tabs .tab{
      flex: 1 1 0;
      text-align: center;
    }

    .obaviti-porudzbinu input[type="radio"] + label{
      display: block;
      width: 100%;
      margin: 0 0 10px;
      box-sizing: border-box;
    }

    .obaviti-porudzbinu button{
      width: 100%;
    }

}


@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 { padding: 0; }
    #upit .form {
      width: 100%;
      min-height: 100dvh;
      margin: 0;
      padding: 20px 16px 28px;
      border-radius: 0;
      box-shadow: none;
    }
    #upit .form .close{
      top: 10px;
      right: 14px;
    }

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

}


.search-categories{
  margin-bottom: 30px;
}

.search-category-group{
  margin-bottom: 26px;
}

.search-category-parent{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  margin-bottom: 14px;
  background: #f5f5f6;
  border-radius: 18px;
  color: inherit;
}

.search-category-parent:hover{
  box-shadow: rgba(30, 31, 33, 0.12) 0px 5px 25px;
  color: inherit;
}

.search-category-parent img{
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex: 0 0 90px;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
}

.search-category-parent span{
  display: block;
  font-size: 28px;
  line-height: 1.2;
  font-weight: bold;
}

.search-category-children{
  margin-left: 0;
}

@media (max-width: 800px){
  .search-category-parent{
    padding: 12px 14px;
    gap: 12px;
  }

  .search-category-parent img{
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .search-category-parent span{
    font-size: 20px;
  }
}

.search-category-group .categories{
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 10px;
}
.search-category-group{
  width: 100%;
}

mark.search-highlight {
  background: #fff3a0;
  padding: 0 2px;
  border-radius: 3px;
}


@media (max-width: 768px){

  .product .full_monitor{
    --viewer-top-space: 72px;
    --viewer-side-space: 24px;
    --viewer-bottom-space: 138px;
  }

  .product .full_monitor .small-photos {
    bottom: 10px;
    max-width: calc(100vw - 20px);
    padding: 10px;
    border-radius: 14px;
    gap: 8px;
  }

  .product .full_monitor > .close{
    top: 10px;
    right: 10px;
    width: 46px;
    height: 46px;
    line-height: 46px;
  }

  .product .full_monitor .imgArrow{
    width: 44px;
    height: 44px;
    border-radius: 22px;
    font-size: 20px;
  }

  .product .full_monitor .leftarr{
    left: 8px;
    transform: translateY(calc(-50% - 18px));
  }

  .product .full_monitor .rightarr{
    right: 8px;
    transform: translateY(calc(-50% - 18px));
  }

  .product .small-photos {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 5px;
  }

  .product .small-photos::-webkit-scrollbar {
    height: 4px;
  }

  .product .small-photos::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }

  .photo {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
  }

}