/* ==========================================================================
   ФАЙЛ: 0.css - ПОЛНАЯ ЦВЕТОВАЯ ГАММА "ТИНОМ" (TINOM)
   Тематика: Кондиционеры и климатическая техника
   Города: Ставрополь, Михайловск
   
   СТИЛЬ: "Холодный премиум" - ледяной голубой + бирюзовый акцент
   
   ИНСТРУКЦИЯ: 
   - Все блоки пронумерованы и имеют заголовки
   - Каждый цвет отмечен ★★★ и имеет комментарий, за что отвечает
   - Чтобы изменить цвет - замените hex-код (например #00ACC1 на #FF6600)
   ========================================================================== */


/* ==========================================================================
   БЛОК 1: ФОН ОСНОВНЫХ БЛОКОВ (ВКЛАДКИ, ЗАГОЛОВКИ, ФИЛЬТРЫ)
   ========================================================================== */

/* 1.1. Фон вкладок товара (Описание, Характеристики, Отзывы) */
ul.tabs li,
/* 1.2. Фон элементов фильтра в журнале */
.box .journal-filter ul li,
/* 1.3. Фон фильтра на главной странице */
#journal-filter-0,
/* 1.4. Фон административной панели */
#adminset_show,
/* === ЦВЕТ ТЕКСТА ДЛЯ ПОДЗАГОЛОВКОВ .h2 === */
.h2,
/* 1.6. Фон заголовков блоков в боковых колонках */
.box-heading,
/* 1.7. Фон блока "С этим товаром часто покупают" */
#relproduct,
/* 1.8. Фон выбранной страницы в пагинации (цифры 1,2,3...) */
.pagination a.selected:hover,
.pagination a.selected {
  background-color: #00ACC1; /* ★★★ БИРЮЗОВЫЙ - фон вкладок и заголовков ★★★ */
}

/* 1.9. Фон основного информационного блока */
.mainproduct, 
/* 1.10. Фон блока "Вас также могут заинтересовать" */
#hitproduct, 
/* 1.11. Фон блока "С этим товаром часто покупают" (дубль) */
#relproduct,
/* 1.12. Фон основного блока в синей версии */
.mainproduct.blue, 
/* 1.13. Фон блока внимания в синей версии */
.attention.blue {
  background-color: #FFFFFF; /* ★★★ БЕЛЫЙ - фон информационных блоков ★★★ */
  box-shadow: 0 4px 12px rgba(0,172,193,0.15);
}

/* 1.14. Рамка выбранной страницы в пагинации (цифры страниц) */
.pagination a.selected:hover,
.pagination a.selected {
  border-color: #EF5350; /* ★★★ КРАСНЫЙ - рамка активной страницы ★★★ */
}


/* ==========================================================================
   БЛОК 2: ЦВЕТ ТЕКСТА И ССЫЛОК
   ========================================================================== */

/* 2.1. Цвет всех обычных ссылок на сайте */
a,
/* 2.2. Цвет текста хлебных крошек (цепочка Главная → Каталог → Товар) */
.breadcrumb,
/* 2.3. Цвет названия товара в карточке */
.product_title,
/* 2.4. Цвет заголовка в блоке сравнения товаров */
.titlecomp,
/* 2.5. Цвет ссылки "Читать далее" */
.cutmore,
/* 2.6. Цвет заголовка записи в блоге */
#blogline .post_title,
/* 2.7. Цвет ссылок в блоке контактов подвала */
.connect .contact-methods a {
  color: #424242; /* ★★★ ТЁМНО-СЕРЫЙ - цвет текста ссылок и заголовков ★★★ */
}


/* ==========================================================================
   БЛОК 3: ИКОНКИ "ИЗБРАННОЕ" (СЕРДЕЧКО) И "СРАВНИТЬ" (ВЕСЫ)
   ========================================================================== */

/* 3.1. Цвет иконок "Добавить в сравнение" и "В избранное" (активное состояние) */
.addcompare svg,
.towish svg {
  fill: #EF5350; /* ★★★ КРАСНЫЙ - цвет иконок сердечка и весов ★★★ */
}

/* 3.2. Цвет иконок сравнения и избранного ПРИ НАВЕДЕНИИ мыши */
.gocompare svg:hover,
.inwish svg:hover,
.addcompare svg:hover,
.towish svg:hover {
  fill: #00ACC1; /* ★★★ БИРЮЗОВЫЙ - цвет иконок при наведении ★★★ */
}

/* 3.3. Цвет иконок сравнения и избранного в обычном состоянии (неактивные) */
.gocompare svg,
.inwish svg {
  fill: #78909C; /* ★★★ СЕРЕБРИСТЫЙ - цвет неактивных иконок ★★★ */
}


/* ==========================================================================
   БЛОК 4: РАЗНЫЕ ФОНОВЫЕ ЭЛЕМЕНТЫ
   ========================================================================== */

/* 4.1. ФОН при наведении на ссылку в блоке qwbox */
.qwbox span a:hover {
  background-color: #B0BEC5; /* ★★★ СЕРЕБРИСТЫЙ - фон ссылки при наведении ★★★ */
}

/* 4.2. Цвет иконок в колонках подвала (соцсети, контакты) */
#footer .column svg {
  fill: #78909C; /* ★★★ СЕРЕБРИСТЫЙ - цвет иконок в подвале ★★★ */
}

/* 4.3. Цвет ТЕКСТА в заголовках блоков и верхнем меню */
.box-heading,
#adminset_show span,
#super-menu > ul > li > a,
.connect .contact-profiles a {
  color: #FFFFFF; /* ★★★ БЕЛЫЙ - цвет текста на тёмном фоне ★★★ */
}


/* ==========================================================================
   БЛОК 5: ФОН ПОДВАЛА (ФУТЕРА)
   ========================================================================== */

/* 5.1. Основной фон подвала сайта */
.footerbody,
/* 5.2. Фон нижней части подвала */
#footer {
  background-color: #E3F2FD; /* ★★★ ЛЕДЯНОЙ ГОЛУБОЙ - фон подвала ★★★ */
}

/* 5.3. Фон для иконок соцсетей и обёртки контактов в подвале */
.connect .contact-profiles div, 
.connect div span {
  background-color: #00ACC1; /* ★★★ БИРЮЗОВЫЙ - фон кнопок соцсетей в подвале ★★★ */
}


/* ==========================================================================
   БЛОК 6: ФОН ХЛЕБНЫХ КРОШЕК И БОКОВЫХ КОЛОНОК
   ========================================================================== */

/* 6.1. Фон хлебных крошек (цепочка навигации) */
.breadcrumb,
/* 6.2. Фон боковых теней */
.side-shade,
.side-shade2,
/* 6.3. Фон левой боковой колонки (где фильтры) */
#column-left,
/* 6.4. Фон правой боковой колонки */
#column-right {
  background-color: #FFFFFF; /* ★★★ БЕЛЫЙ - фон боковых колонок ★★★ */
  box-shadow: 0 2px 8px rgba(0,172,193,0.1);
}

/* 6.5. Фон элементов боковых колонок ПРИ НАВЕДЕНИИ */
#column-right .box-content > ul > li > a:hover,
#column-right .box-category > ul > li > a:hover,
#column-left .box-content > ul > li > a:hover,
#column-left .box-category > ul > li > a:hover {
  background-color: #E3F2FD; /* ★★★ ЛЕДЯНОЙ ГОЛУБОЙ - фон при наведении в боковых колонках ★★★ */
}

/* 6.6. Цвет текста в списках боковых колонок (фильтры, категории) */
#column-right .box-content ul li,
#column-left .box-content ul li {
  color: #424242; /* ★★★ ТЁМНО-СЕРЫЙ - цвет текста в боковых колонках ★★★ */
}


/* ==========================================================================
   БЛОК 7: ОСНОВНОЙ КОНТЕЙНЕР САЙТА
   ========================================================================== */

/* 7.1. Основной контейнер, где находится всё содержимое страницы */
#container {
  background-color: #E3F2FD; /* ★★★ ЛЕДЯНОЙ ГОЛУБОЙ - фон основного контента ★★★ */
  overflow: hidden;
}


/* ==========================================================================
   БЛОК 8: ГЛАВНЫЕ КНОПКИ САЙТА ★★★★★ САМОЕ ВАЖНОЕ ★★★★★
   ========================================================================== */

/* 8.1. Кнопка "В корзину" (класс button red) - ОСНОВНАЯ КНОПКА ПОКУПКИ */
.button.red,
.button.red.m,
.button.red.l,
.button.red.s,
input[type="submit"].button.red {
  background-color: #00ACC1 !important; /* ★★★ БИРЮЗОВЫЙ - цвет кнопки "В корзину" ★★★ */
  background-image: none !important;
  border-color: #00ACC1 !important;
  color: #ffffff !important;
}

/* 8.2. Кнопка "В корзину" ПРИ НАВЕДЕНИИ мыши */
.button.red:hover,
.button.red.m:hover,
input[type="submit"].button.red:hover {
  background-color: #00838F !important; /* ★★★ ТЁМНО-БИРЮЗОВЫЙ - кнопка при наведении ★★★ */
  border-color: #00838F !important;
  color: #ffffff !important;
}

/* 8.3. Синие кнопки на сайте (если есть) */
.button.blue,
.button.gblue,
input[type="submit"].button {
  background-color: #00ACC1 !important; /* ★★★ БИРЮЗОВЫЙ - цвет синих кнопок ★★★ */
  border-color: #00ACC1 !important;
}

/* 8.4. Синие кнопки ПРИ НАВЕДЕНИИ */
.button.blue:hover,
.button.gblue:hover {
  background-color: #00838F !important; /* ★★★ ТЁМНО-БИРЮЗОВЫЙ - при наведении ★★★ */
}

/* 8.5. Стиль красной кнопки (устаревший, оставлен для совместимости) */
.buttonred {
  background-color: #00ACC1; /* ★★★ БИРЮЗОВЫЙ ★★★ */
  border: 0px solid #00ACC1;
}

/* 8.6. Красная кнопка ПРИ НАВЕДЕНИИ */
.buttonred:hover {
  background-color: #00838F; /* ★★★ ТЁМНО-БИРЮЗОВЫЙ - при наведении ★★★ */
  color: #ffffff;
}


/* ==========================================================================
   БЛОК 9: БЛОК КОНТАКТОВ В ПОДВАЛЕ
   ========================================================================== */

/* 9.1. Блок с контактами в подвале (адрес, телефон) */
.connect {
  background: #FFFFFF; /* ★★★ БЕЛЫЙ - фон блока контактов в подвале ★★★ */
  border: 1px solid #B0BEC5; /* ★★★ СЕРЕБРИСТЫЙ - рамка блока контактов ★★★ */
}


/* ==========================================================================
   БЛОК 10: КАРТОЧКИ ТОВАРОВ И КАТЕГОРИЙ
   ========================================================================== */

/* 10.1. Тень для карточек товаров */
.tiny_products .product {
  box-shadow: 0 4px 12px rgba(0,172,193,0.15); /* ★★★ ГОЛУБАЯ - тень карточек товаров ★★★ */
}

/* 10.2. Карточки в карусели (стандартный вид) */
.tiny_products.owl-carousel .product {
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0,172,193,0.15);
  background: #FFFFFF; /* ★★★ БЕЛЫЙ - фон карточек в карусели ★★★ */
}

/* 10.3. Эффект ПРИ НАВЕДЕНИИ на карточку товара */
.tiny_products .product:hover {
  border: 1px solid #00ACC1; /* ★★★ БИРЮЗОВАЯ - рамка при наведении ★★★ */
  box-shadow: 0 8px 24px rgba(0,172,193,0.25);
}

/* 10.4. Эффект ПРИ НАВЕДЕНИИ на карточку в карусели */
.tiny_products.owl-carousel .product:hover {
  background: #FFFFFF; /* ★★★ БЕЛЫЙ - фон при наведении ★★★ */
  border: 2px solid #00ACC1; /* ★★★ БИРЮЗОВАЯ - рамка при наведении ★★★ */
  box-shadow: 0 8px 24px rgba(0,172,193,0.25);
}


/* ==========================================================================
   БЛОК 11: КАРТОЧКИ "ВЫ ПРОСМАТРИВАЛИ" И "ИЗБРАННОЕ"
   ========================================================================== */

/* 11.1. Фон карточек в блоках "Вы просматривали" и "Избранное" */
.browsedview .product, 
.parentscat .product, 
.wishlistview .product {
  background: #FFFFFF; /* ★★★ БЕЛЫЙ - фон дополнительных карточек ★★★ */
  padding: 0px 0 6px 0px;
  box-shadow: 0 2px 8px rgba(0,172,193,0.1);
}

/* 11.2. Фон этих карточек ПРИ НАВЕДЕНИИ */
.browsedview .product:hover, 
.parentscat .product:hover, 
.wishlistview .product:hover {
  background: #E3F2FD; /* ★★★ ЛЕДЯНОЙ ГОЛУБОЙ - фон при наведении ★★★ */
}


/* ==========================================================================
   БЛОК 12: ЛЕНТА БЛОГА НА ГЛАВНОЙ
   ========================================================================== */

/* 12.1. Стиль ленты блога на главной странице */
#container #blogline {
  border: 0px solid #B0BEC5;
  box-shadow: none;
  background-color: transparent; /* ★★★ ПРОЗРАЧНЫЙ - фон ленты блога ★★★ */
  padding: 8px 0px 0px 0px;
}

/* 12.2. Стиль основного текстового блока на главной странице */
#container .main-text {
  border: 0px solid #B0BEC5;
  box-shadow: none;
  padding: 5px 5px 0 5px;
}


/* ==========================================================================
   БЛОК 13: КОПИРАЙТ (НИЖНЯЯ СТРОКА)
   ========================================================================== */

/* 13.1. Цвет текста в нижней полосе копирайта */
#powered p {
  color: #424242; /* ★★★ ТЁМНО-СЕРЫЙ - цвет текста копирайта ★★★ */
}


/* ==========================================================================
   БЛОК 14: ОСНОВНЫЕ НАСТРОЙКИ СТРАНИЦЫ (BODY)
   ========================================================================== */

/* 14.1. Основные стили для всей страницы */
body {
  color: #424242; /* ★★★ ТЁМНО-СЕРЫЙ - основной цвет текста на сайте ★★★ */
  background-color: #E3F2FD; /* ★★★ ЛЕДЯНОЙ ГОЛУБОЙ - фон всей страницы ★★★ */
}


/* ==========================================================================
   БЛОК 15: КОРЗИНА И ТАБЛИЦЫ
   ========================================================================== */

/* 15.1. Фон заголовков таблицы в корзине и самой корзины */
#carttitles td,
.cart-blue {
  background: #00ACC1 !important; /* ★★★ БИРЮЗОВЫЙ - фон корзины и таблиц ★★★ */
}


/* ==========================================================================
   БЛОК 16: ИЗОБРАЖЕНИЯ В КАРТОЧКАХ И ШАПКА
   ========================================================================== */

/* 16.1. Фон для изображений в карточках товаров и шапки сайта */
.tiny_products .product .image,
header {
  background-color: #FFFFFF; /* ★★★ БЕЛЫЙ - фон изображений и шапки ★★★ */
}


/* ==========================================================================
   БЛОК 17: МЕНЮ НАВИГАЦИИ
   ========================================================================== */

/* 17.1. Фон основного меню и выпадающих пунктов при наведении */
.menu,
.menu .dropdown-menu li:hover > a {
  background-color: #FFFFFF; /* ★★★ БЕЛЫЙ - фон меню ★★★ */
}

/* 17.2. Левая граница для пунктов основного меню */
#super-menu > ul > li {
  border-left: 1px solid #B0BEC5; /* ★★★ СЕРЕБРИСТАЯ - разделитель меню ★★★ */
}


/* ==========================================================================
   БЛОК 18: ЭФФЕКТЫ ПРИ НАВЕДЕНИИ НА ЭЛЕМЕНТЫ
   ========================================================================== */

/* 18.1. Цвет ПРИ НАВЕДЕНИИ на название товара */
.product_title:hover,
/* 18.2. Активный фильтр в боковой колонке */
.box-content ul li a.filter-active,
/* 18.3. При наведении на стрелку в категориях */
.box-category a span:hover,
/* 18.4. При наведении на любую ссылку */
a:hover,
/* 18.5. При наведении на кнопку сравнения */
.compare:hover,
/* 18.6. При наведении на ссылку "Читать далее" */
.cutmore:hover,
/* 18.7. Цвет текста в блоке контактов подвала */
.connect div {
  color: #00ACC1; /* ★★★ БИРЮЗОВЫЙ - цвет при наведении ★★★ */
}

/* 18.8. Фон иконок соцсетей в подвале ПРИ НАВЕДЕНИИ */
.connect .contact-profiles div:hover {
  background-color: #00838F; /* ★★★ ТЁМНО-БИРЮЗОВЫЙ - фон кнопок соцсетей при наведении ★★★ */
}


/* ==========================================================================
   БЛОК 19: ВЕРХНЯЯ ПОЛОСА ШАПКИ (ВХОД/РЕГИСТРАЦИЯ)
   ========================================================================== */

/* 19.1. Фон верхней полоски шапки (где Вход и Регистрация) */
header .top-hdr {
  background-color: #78909C; /* ★★★ СЕРЕБРИСТЫЙ - фон верхней полоски ★★★ */
}


/* ==========================================================================
   БЛОК 20: ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ (СТРЕЛКИ, РАЗДЕЛИТЕЛИ)
   ========================================================================== */

/* 20.1. Фон разделителя в блоке (прозрачный) */
.block-header__divider {
  background-color: transparent;
}

/* 20.2. Цвет стрелки и фона в блоке */
.block-header__arrow {
  fill: #78909C; /* ★★★ СЕРЕБРИСТЫЙ - цвет стрелки ★★★ */
  background-color: #FFFFFF; /* ★★★ БЕЛЫЙ - фон стрелки ★★★ */
}

/* 20.3. Цвет стрелки и фона ПРИ НАВЕДЕНИИ */
.block-header__arrow:hover {
  fill: #00ACC1; /* ★★★ БИРЮЗОВЫЙ - цвет стрелки при наведении ★★★ */
  background-color: #E3F2FD; /* ★★★ ЛЕДЯНОЙ ГОЛУБОЙ - фон стрелки при наведении ★★★ */
}


/* ==========================================================================
   БЛОК 21: НАСТРОЙКИ ВЁРСТКИ (ОТСТУПЫ, РАМКИ, РАСПОЛОЖЕНИЕ)
   ========================================================================== */

/* 21.1. Отступы для основного контента относительно левой колонки */
#column-left + #content {
  padding: 20px 10px 15px 30px;
}

/* 21.2. Жирный шрифт для ссылок в колонках подвала */
#footer .column a {
  font-weight: 700;
}

/* 21.3. Верхняя граница для блока с копирайтом */
#powered div {
  border-top: 1px solid #B0BEC5;
}

/* 21.4. Убираем нижнюю границу у заголовков в подвале */
#footer h3 {
  border-bottom: none;
  padding-bottom: 0;
}

/* 21.5. Отступ сверху для списков в колонках подвала */
#footer .column ul {
  margin-top: 3px;
}

/* 21.6. Убираем тень у основного контейнера */
#container {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* 21.7. Убираем обводку у боковых колонок и теней */
.side-shade, .side-shade2, #column-left {
  outline: none;
}

/* 21.8. Стили для заголовков блоков в боковых колонках */
.box-heading {
  padding: 6px 0 6px 10px;
  border-radius: 5px;
  height: auto;
  line-height: normal;
}

/* 21.9. Стили для заголовка H1 на страницах */
#content > h1 {
  font-size: 22px;
  margin: -23px -10px 5px -15px;
}

/* 21.10. Стили для фильтра на странице каталога */
.product-filter {
  box-shadow: 0 2px 8px rgba(0,172,193,0.1);
  border: 1px solid #B0BEC5;
}

/* 21.11. Отступы для содержимого блоков в боковых колонках */
.box-content {
  margin: 5px 0;
}

/* 21.12. Цвет ссылки в блоке mainproduct */
.mainproduct .bloglink {
  color: #00ACC1; /* ★★★ БИРЮЗОВЫЙ - цвет ссылки в блоке ★★★ */
}

/* 21.13. Стили для ленты блога на главной странице */
.mainview .blogline {
  background-color: #FFFFFF;
  border: 1px solid #B0BEC5;
  border-top: 0;
}

/* 21.14. Цвет ссылки блога ПРИ НАВЕДЕНИИ */
.bloglink:hover {
  color: #00ACC1;
}

/* 21.15. Цвет фона для нечетных элементов в ленте блога */
.blogposts .blogitem_wrapper:nth-child(odd), 
.blogposts:nth-child(odd) .blogitem_wrapper {
  background-color: #78909C;
}

/* 21.16. Цвет текста в основном меню, корзине и выпадающих списках */
ul.super-menu > li > a, 
.cart, 
.dropdown-menu li:hover a {
  color: #424242;
}

/* 21.17. Цвет заливки иконок в выпадающем меню при наведении */
.dropdown-menu li:hover > a svg {
  fill: #00ACC1;
}

/* 21.18. Цвет иконок в правой части шапки (корзина, избранное, сравнение) */
.topinfowrapper svg, 
.cart svg {
  fill: #78909C; /* ★★★ СЕРЕБРИСТЫЙ - цвет иконок в шапке ★★★ */
}

/* 21.19. Цвет иконок в правой части шапки ПРИ НАВЕДЕНИИ */
.topinfowrapper svg:hover {
  fill: #00ACC1;
}

/* 21.20. Цвет полосок у иконки "гамбургер" (три полоски) в меню */
.menu-icon span {
  background-color: #78909C;
}

/* 21.21. Тень под основным меню */
.menu {
  -webkit-box-shadow: 0 2px 8px rgba(0,172,193,0.15);
  box-shadow: 0 2px 8px rgba(0,172,193,0.15);
}

/* 21.22. Стили для строки поиска и выпадающего списка */
.searchchoose,
#search .button_search,
#search .input_search,
.listsearch {
  border: 1px solid #B0BEC5;
}

/* 21.23. Фон и рамка для кнопки поиска */
#search .button_search {
  background-color: #FFFFFF;
  border-right: 0;
}

/* 21.24. Фон и высота для выбора типа поиска (в блоге, в товарах...) */
.searchchoose {
  background-color: #FFFFFF;
  line-height: 40px;
  border-left: 0;
}

/* 21.25. Отступы для пунктов выпадающего списка поиска */
.listsearch li {
  padding-left: 6px;
}

/* 21.26. Отступы для карточек в блоке "Избранное" */
.wishlistview .product {
  margin-right: 10px;
}

/* 21.27. Убираем рамку у изображений в блоке последних просмотренных товаров */
#last_products li > .image {
  border: 0;
}

/* 21.28. Рамка для элементов категорий на главной странице */
.mainview .category_item {
  border: 1px solid #B0BEC5;
}

/* 21.29. Цвет иконок в верхней панели (Вход, Регистрация) */
#welcome svg {
  fill: #FFFFFF;
}

/* 21.30. Цвет иконок в верхней панели ПРИ НАВЕДЕНИИ */
#welcome svg:hover {
  fill: #E3F2FD;
}

/* ==========================================================================
 22:  === ЗАГОЛОВОК H1 - ДЕЛАЕМ ВИДИМЫМ === 
 ========================================================================== */
h1,
#content > h1 {
  color: #00ACC1 !important; /* ★★★ БИРЮЗОВЫЙ - цвет заголовка H1 ★★★ */
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}