/************************************************************
 * СТИЛЬ ФИЛЬТРОВ ОПИСАНИЯ ТОВАРА (НЕ ТРОГАЕМ РАЗМЕТКУ)
 * Цвет бренда: #4caf50
 ************************************************************/

/* ====== Строка группы: подпись сверху, значения ниже ====== */
.offers-description-filter__row {
  width: 100%;
  display: flex;
  flex-direction: column; /* Заголовок (лейбл) над вариантами */
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0; /* Убираем межстрочный пробел между inline-блоками */
}

/* ====== Заголовок группы ====== */
.offers-description-filter__label {
  display: block;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.3;
  color: #1c1c1c;
}

.offers-description-filter__sign {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* ====== Поле вариантов: общая обёртка ====== */
.offers-description-filter__field {
  display: flex;
  flex-wrap: wrap;   /* переносятся на новую строку */
  gap: 8px;          /* отступы между элементами */
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================
   ВАРИАНТЫ-ТЕКСТ («пилюли») — status=0
   ========================================================== */

/* Контейнер пункта (снимаем лишние бордеры/отступы) */
.offers-description-filter-control {
  position: relative;
  display: inline-block;
  border: none;
  background: transparent;
  margin: 0;            /* отступы задаём через gap у родителя */
  box-shadow: none;
  font-size: 13px;
  line-height: 1;
}

/* Кнопка-пилюля */
.offers-description-filter-control__switcher-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  background: #fff;
  color: #1e1e1e;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}

/* Ховер по пилюле */
.offers-description-filter-control__switcher-inner:hover {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .12);
}

/* Фокус по клавиатуре */
.offers-description-filter-control__switcher-inner:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .20);
}

/* Активное значение (класс активного пункта у тебя — .ytszxgb45)
   Для ТЕКСТОВЫХ вариантов: делаем зелёную ЗАЛИВКУ */
.ytszxgb45 .offers-description-filter-control__switcher-inner,
.ytszxgb45.optprvgf { /* подстраховка для <option> */
  background: #4caf50;
  border-color: #4caf50;
  color: #fff !important;
  cursor: default;
  pointer-events: none;
}

/* Недоступные (например, .sort0) — делаем пунктир и приглушение */
.sort0 .offers-description-filter-control__switcher-inner {
  border-style: dashed;
  color: #9aa0a6;
  opacity: .6;
}

/* Чистим устаревшие бордеры (иногда такие классы добавлялись темой) */
.offers-description-filter-control_switcher,
.offers-description-filter-control {
  border: none;
}

/* ==========================================================
   ВЫПАДАЮЩИЙ СПИСОК — status=1
   ========================================================== */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 40px;
  padding: 0 40px 0 14px; /* место под стрелку справа */
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  background:
    #fff
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'>\
<path fill='%23494949' d='M7 10l5 5 5-5z'/>\
</svg>") no-repeat right 12px center / 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1e1e1e;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select.form-control:hover {
  border-color: #4caf50;
}

select.form-control:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .15);
}

/* ==========================================================
   ВАРИАНТЫ С КАРТИНКОЙ — status=2 (.imageoptfb)
   ========================================================== */

/* Карточка с картинкой/подписью */
a.imageoptfb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 92px;                  /* фиксированная карточка как в примере */
  padding: 10px;
  border: 1px solid #e4e6eb;
  border-radius: 12px;
  background: #fff;             /* ВАЖНО: фон всегда белый */
  text-decoration: none;
  transition:
    transform .12s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

/* Ховер по карточке с изображением */
a.imageoptfb:hover {
  border-color: #4caf50;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}

/* Картинка внутри карточки */
a.imageoptfb img {
  width: 72px;
  height: 72px;
  object-fit: contain;          /* не искажаем изображение */
  border-radius: 8px;
  display: block;
}

/* Подпись под изображением */
a.imageoptfb div {
  width: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  color: #1e1e1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⚠️ АКТИВНАЯ карточка с изображением:
   ТОЛЬКО зелёная рамка + лёгкий подсвет, БЕЗ зелёного фона */
a.imageoptfb.ytszxgb45 {
  background: #fff;                           /* оставляем белый фон */
  border-color: #4caf50;                      /* выделяем рамкой */
  color: #1e1e1e !important;                  /* текст тёмный */
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .12);
  transform: none;
  cursor: default;
  pointer-events: none;                       /* как и у активных — не кликается */
}

/* На «активной» карточке ховер не меняет поведение */
a.imageoptfb.ytszxgb45:hover {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .12);
  transform: none;
}

/* Недоступная карточка (.sort0) — пунктир + приглушение */
.sort0.imageoptfb {
  opacity: .45;
  border-style: dashed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================
   Отступы секции
   ========================================================== */
.offers-description-filter {
  margin: 18px 0;
}

/* ==========================================================
   Адаптивность
   ========================================================== */
@media (max-width: 1024px) {
  .offers-description-filter__field { gap: 10px; }
  a.imageoptfb { width: 88px; }
  a.imageoptfb img { width: 68px; height: 68px; }
}

@media (max-width: 768px) {
  .offers-description-filter__label { font-size: 13px; }
  .offers-description-filter__field { gap: 8px; }
  .offers-description-filter-control__switcher-inner {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  /* 3 карточки в ряд на узких экранах (с учётом gap) */
  a.imageoptfb { width: calc(33.333% - 8px); }
  a.imageoptfb img { width: 100%; height: auto; }
}