/*Своя иконка избранного в карточках товаров*/
:root{
    --iconNormal: url(https://static.tildacdn.com/tild3732-6461-4666-b934-343230333565/free-icon-bookmark-2.png);
    --iconAdded: url(https://static.tildacdn.com/tild6439-6263-4932-a436-663437623131/free-icon-bookmark-2.png);
    --iconScaleHover: scale(1.1);  /*Увеличение иконки при наведении*/
    --iconTransition: all .4s ease-in-out;  /*Плавность анимации*/
    --bgIconRadiusNormal: 2px; /*Радиус скругления углов у подложки с иконкой*/
    --bgIconRadiusHover: 2px; /*Радиус скругления углов у подложки с иконкой при наведении*/
    --bgIconColorHover: ;    /*Цвет подложки с иконкой при наведении*/
    --bgIconColorAdded: ;    /*Цвет подложки с иконкой, когда товар добавлен в избранное*/
    --bgIconColorNomral: ; /*Цвет подложки в обычном состоянии*/
    --widthIcon: 20px;
    --heightIcon: 20px;
    
}
/*Иконка в обычном состоянии*/
    a.t1002__addBtn:after {
    content: "";
    position: absolute;
    width: var(--widthIcon);
    height: var(--heightIcon);
    background-image: var(--iconNormal);
    background-repeat: no-repeat;
    background-size: cover;
    transition: var(--iconTransition);
}   

/*Иконка при наведении*/
    a.t1002__addBtn:hover:after {
    content: "";
    transform: var(--iconScaleHover);
    transition: var(--iconTransition);
}   

/*Иконка, когда товар добавили в избранное*/
    a.t1002__addBtn_active:after {
    content: "";
    width: var(--widthIcon);
    height: var(--heightIcon);
    background-image: var(--iconAdded);
    background-repeat: no-repeat;
}

/*Скрываем оригинальную иконку*/
.t1002__addBtn svg{
    display:none;
}

/*Если нужен определенный радиус скругления и цвет у подложки с иконкой*/

.t1002__addBtn{
    border-radius: var(--bgIconRadiusNormal) !important; /*Радиус скругления*/
    background: var(--bgIconColorNomral) !important;    /*Цвет подложки*/
    transition: var(--iconTransition);
}
.t1002__addBtn:hover{
    border-radius: var(--bgIconRadiusHover) !important; /*Радиус скругления при наведении*/
    background: var(--bgIconColorHover) !important;    /*Цвет подложки при наведении*/
    transition: var(--iconTransition);
}
.t1002__addBtn_active{
    background: var(--bgIconColorAdded) !important;
}

/* ==========================================================================
   НАСТРОЙКА ПАНЕЛИ КАТАЛОГА T1261
   ========================================================================== */

/* 1. Основная панель (Header Panel)
   Сбрасывает программные смещения (transform) и делает фон панели 
   полностью прозрачным, чтобы она сливалась с шапкой сайта. */
#t-header .t-rec .t1261__panel {
  transform: translatex(0px) translatey(0px);
  background-color: transparent;
}

/* 2. Обертка содержимого (Wrap)
   Сдвигает внутренний контент панели на 10px вниз от верхнего края. */
.t1261 .t1261__panel .t1261__wrap {
  top: 10px;
}

/* 3. Нижняя разделительная линия
   Добавляет внешний отступ в 10px сверху от линии, отделяя её от контента выше. */
.t1261__panel .t1261__wrap .t1261__bottom-line {
  margin-top: 10px;
}

/* 4. Кнопки категорий (Catalog Buttons)
   Принудительно устанавливает высоту кнопок каталога равной 30px. */
.t1261__top-middle .t1261__catalog-buttons .t1261__catalog-button {
  height: 30px !important;
}

/* 5. Адаптация кнопки для телефона (Catalog Buttons)
   Принудительно устанавливает высоту кнопок каталога равной 10px. */

@media (min-width:320px){

 /* Division */
 .t1261__top-line .t1261__top-middle{
  margin-top:10px;
 }
 
}

/* ==========================================================================
   ОСНОВНЫЕ СТИЛИ КАТАЛОГА (T1291)
   ========================================================================== */

/* 1. Кнопки поверх изображения (например, "Избранное")
   Принудительно прижимает кнопку к самому верхнему правому углу карточки. */
.t-catalog__card-list a a {
  top: 0px !important;
  right: 0px !important;
}

/* 2. Ширина ярлыка (Sale/New)
   Устанавливает фиксированную ширину 45px для меток в блоке T1291. */
#allrecords .t-rec .t1291 .js-catalog .js-catalog-cont-w-filter .t-catalog__cont-wrapper .js-catalog-grid-cont .t-catalog__card-list .t-item a .t-catalog__card__imgwrapper .t-catalog__card__mark-wrapper .t-catalog__card__mark {
  width: 45px !important;
}

/* 3. Форма ярлыка
   Задает высоту 20px и легкое скругление углов (2px) для всех меток каталога. */
.t-catalog__card-list a .t-catalog__card__mark {
  height: 20px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* ==========================================================================
   АДАПТИВНОСТЬ: МОБИЛЬНЫЕ УСТРОЙСТВА (от 320px)
   ========================================================================== */
@media (min-width: 320px) {

  /* 4. Настройка кнопок (Избранное/Корзина)
     Убирает все отступы и фиксирует ширину кнопки на уровне 30px. */
  .t-catalog__card-list a a {
    margin-left: 0px;
    margin-bottom: 0px !important;
    padding-top: 0px;
    width: 30px;
  }
  
  /* Дублирующее правило для фиксации ширины кнопок в каталоге с фильтрами. */
  .js-catalog-cont-w-filter .t-item a a {
    width: 30px !important;
  }
  
  /* Устанавливает высоту 30px для кнопок, расположенных поверх фото товара. */
  #allrecords .t-rec .t1291 .js-catalog .js-catalog-cont-w-filter .t-catalog__cont-wrapper .js-catalog-grid-cont .t-catalog__card-list .t-item a .t-catalog__card__imgwrapper a {
    height: 30px !important;
  }
  
  /* 5. Настройка ярлыков (Sale/New) на мобильных
     Уменьшает размер ярлыка до 30x20 пикселей. */
  .t-rec .t1291 .js-catalog .js-catalog-cont-w-filter .t-catalog__cont-wrapper .js-catalog-grid-cont .t-catalog__card-list .t-item a .t-catalog__card__imgwrapper .t-catalog__card__mark-wrapper .t-catalog__card__mark {
    width: 30px !important;
    height: 20px !important;
  }
  
  /* 6. Позиционирование ярлыка с "вылетом"
     Убирает внутренние отступы и сдвигает ярлык на 5px вверх и влево, 
     чтобы он немного выходил за границы изображения. */
  .t-catalog__card-list a .t-catalog__card__mark {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    top: -5px;
    left: -5px;
  }
 
}

/* ==========================================================================
   ОБЩИЕ НАСТРОЙКИ КАРТОЧКИ (УПЛОТНЕНИЕ)
   ========================================================================== */

/* 1. Описание товара
   Убирает пустой отступ над текстом описания товара. */
.t-catalog__card-list a .js-catalog-prod-descr {
  margin-top: 0px;
}

/* 2. Цена товара
   Убирает пустой отступ над блоком с ценой. */
.t-catalog__card-list a .t-catalog__card__price-wrapper {
  margin-top: 0px;
}

/* 3. Блок управления (кнопки/опции)
   Удаляет внутренний отступ сверху над кнопками и сбрасывает все смещения (transform). */
.t-catalog__card-list .t-item .t-catalog__card__prod-controls-wrapper {
  padding-top: 0px;
  transform: translatex(0px) translatey(0px);
}

/* ==========================================================================
   АДАПТИВНОСТЬ И НАСТРОЙКА ОПЦИЙ (от 320px)
   ========================================================================== */
@media (min-width: 320px) {

  /* 4. Кнопки выбора параметров (размер, цвет)
     Делает кнопки выбора маленькими квадратами (20x20px), убирает все 
     внутренние отступы и задает минимальный шаг между кнопками (2px). */
  .t-catalog__card-list .t-item label {
    width: 20px !important;
    min-height: 20px !important;
    margin-right: 2px !important;
    margin-bottom: 2px !important;
    padding: 0px !important;
  }
  
  /* Устанавливает минимальную ширину для кнопок вариантов товара. */
  .t-catalog__card-list .t-item .js-product-edition-option label {
    min-width: 20px !important;
  }
  
  /* Скрытие внутренних индикаторов
     Этот длинный селектор находит технические элементы (точки/радиокнопки) 
     внутри кнопок выбора и уменьшает их до 2px, делая практически невидимыми. */
  .js-catalog .js-catalog-cont-w-filter ... .t-product__option-variants_buttons label {
    width: 2px !important;
    height: 2px !important;
  }
  
  /* 5. Настройка шрифтов
     Уменьшает размер подписей и текста внутри карточки до 10px. */
  .t-catalog__card-list .t-item span {
    font-size: 10px;
    line-height: 10px !important;
  }
  
  /* Уменьшает размер названия опции (например, слово "Размер:") до 10px. */
  .t-catalog__card-list .t-item .js-product-edition-option-name {
    font-size: 10px;
  }
  
  /* 6. Внутренние отступы блока
     Добавляет микро-отступ 2px слева для всего текстового блока карточки. */
  .t-catalog__card-list .t-item .t-catalog__card__wrap_txt-and-btns {
    padding-left: 2px;
  }
  
  /* Убирает внешние отступы (сверху и снизу) у блока выбора вариантов товара. */
  .t-catalog__card-list .t-item .js-product-edition-option {
    margin-top: 0px;
    margin-bottom: 0px;
  }
 
}

/* ==========================================================================
   НАСТРОЙКА ВЕРХНЕЙ ЛИНИИ ПАНЕЛИ T1261
   ========================================================================== */

/* 1. Центральная часть верхней линии (Top Middle)
   Сдвигает среднюю часть меню (где обычно находятся кнопки или поиск) 
   на 7px вверх относительно её стандартного положения для более 
   точной визуальной центровки. */
.t1261__top-line .t1261__top-middle {
  padding-right: 1px;    /* Минимальный отступ справа в 1 пиксель */
  position: relative;    /* Включаем режим свободного позиционирования */
  top: -7px;             /* Смещаем блок ВВЕРХ на 7px */
}

/* ==========================================================================
   АДАПТИВНОСТЬ: МОБИЛЬНЫЕ УСТРОЙСТВА И ВЫШЕ (от 320px)
   ========================================================================== */
@media (min-width: 320px) {

  /* 2. Основной контейнер панели
     Устанавливает боковые отступы (поля) в 10px слева и справа. 
     Это гарантирует, что на узких экранах смартфонов содержимое 
     панели не будет прилипать вплотную к краям дисплея. */
  .t1261__wrap .t1261__top-line .t1261__container {
    padding-left: 10px;
    padding-right: 10px;
  }
 
}