/* =====================================================================
   Избранное + вид "плитка" (кубики) + переключатель список/плитка.
   Один файл, подключается один раз в header.php — работает на всех
   страницах: header, product.php, category.php, favorites.php.
   ===================================================================== */

/* ---------- Иконка "избранное" в шапке сайта (ссылка на /favorites) ---------- */
.favorites_widget .favorite_heart_icon{color:#001a34;vertical-align:middle}
.favorites_widget a.is-active .favorite_heart_icon,
.favorites_widget a:hover .favorite_heart_icon{color:#e53935}
.favorites_widget .favorites_count{display:inline-block;min-width:16px;padding:0 4px;text-align:center;font-size:12px;line-height:16px;border-radius:8px;background:#e53935;color:#fff;vertical-align:middle}

/* ---------- Кнопка "В избранное" на странице товара (после блока all_chars) ---------- */
.favorite_btn_pr{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;margin:10px 0;border:1px solid #d5d9dd;border-radius:8px;background:#fff;color:#001a34;font-size:14px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.favorite_btn_pr .favorite_btn_icon{flex:0 0 auto;color:inherit}
.favorite_btn_pr:hover{border-color:#e53935}
.favorite_btn_pr.in_favorite{background:#fdeceb;border-color:#e53935;color:#e53935}
.favorite_btn_pr.in_favorite .favorite_btn_icon path{fill:#e53935}
.favorite_btn_pr.is-loading{opacity:.6;pointer-events:none}

/* ---------- Кнопка-сердечко на карточках (список и плитка: категория, товар, избранное) ---------- */
.fav_heart_btn{border:none;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.15);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#9aa4ad;transition:transform .15s,color .15s}
.fav_heart_btn:hover{transform:scale(1.08);color:#e53935}
.fav_heart_btn.in_favorite{color:#e53935}
.fav_heart_btn.in_favorite svg path{fill:currentColor}
.fav_heart_btn.is-loading{opacity:.5;pointer-events:none}
.fav_heart_btn_list{position:absolute;top:10px;right:10px;z-index:3}
.fav_heart_btn_grid{position:absolute;top:14px;right:14px;z-index:3}
.cat_list_row{position:relative}

/* кнопка "убрать из избранного" на странице /favorites (всегда красная, без переключения) */
.fav_remove_btn{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#e53935;transition:transform .15s}
.fav_remove_btn:hover{transform:scale(1.08)}
.fav_remove_btn.is-loading{opacity:.5;pointer-events:none}

/* красивая анимация "пульса" сердечка при добавлении в избранное */
@keyframes fav_heart_pop{
	0%{transform:scale(1);}
	35%{transform:scale(1.28);}
	65%{transform:scale(.92);}
	100%{transform:scale(1);}
}
.fav_heart_btn.in_favorite,
.favorite_btn_pr.in_favorite .favorite_btn_icon{
	animation:fav_heart_pop .38s ease;
}

/* =====================================================================
   Карточка-"плитка" (кубик): .fav_card — на странице избранного,
   .cat_grid_card — в категории (вид "плитка") и на странице товара
   в блоках "С этим товаром покупают" / "Вас также может заинтересовать".
   Разметка внутри одинаковая, поэтому стили общие.
   ===================================================================== */
.fav_card,
.cat_grid_card{
	position:relative;
	border:1px solid #e6e9ec;
	border-radius:14px;
	padding:18px;
	background:#fff;
	display:flex;
	flex-direction:column;
	transition:box-shadow .2s,border-color .2s;
}
.fav_card:hover,
.cat_grid_card:hover{
	box-shadow:0 8px 24px rgba(0,26,52,.08);
	border-color:#d5dbe1;
}
.fav_card.fav_card_removed{display:none}

/* картинка + скраб-галерея (наведение мышью переключает фото товара) */
.fav_img_wrap{position:relative;height:200px;border-radius:8px;overflow:hidden;margin-bottom:14px;cursor:pointer;background:#fafbfc}
.fav_img_wrap a.fav_img_link{display:block;width:100%;height:100%}
.fav_img_wrap img.fav_main_img{width:100%;height:100%;object-fit:contain}
.fav_dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px}
.fav_dot{width:6px;height:6px;border-radius:50%;background:#d5dbe1}
.fav_dot.active{background:#4caf50}

/* статус наличия, название, рейтинг */
.fav_availability{margin-bottom:8px;font-size:13px}
.fav_name{display:block;font-size:15px;font-weight:600;color:#001a34;text-decoration:none;line-height:1.3;margin-bottom:8px;min-height:39px}
.fav_name:hover{color:#e5a913}
.fav_rating_row{margin-bottom:10px;min-height:20px}
.fav_no_rating{font-size:13px;color:#9aa4ad;display:flex;align-items:center;gap:5px}

/* цена, старая цена, бейдж скидки */
.fav_price_block{margin-bottom:12px}
.fav_price_row{font-size:20px;font-weight:700;color:#001a34;margin-bottom:10px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.fav_price_row .fav_unit{font-size:13px;font-weight:400;color:#8b949b}
.fav_price_row .fav_discount_badge{margin-left:2px}

/* переключатель единицы измерения (метр/тонна и т.п.) */
.fav_unit_toggle{display:flex;gap:8px;margin-bottom:10px}
.fav_unit_btn{flex:1 1 auto;border:1px solid #e6e9ec;background:#f4f5f7;color:#5b6670;border-radius:8px;padding:8px 6px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.fav_unit_btn.active{background:#f4b73f;border-color:#f4b73f;color:#3a2c00}

/* степпер количества */
.fav_qty_row{display:flex;align-items:stretch;border:1px solid #e6e9ec;border-radius:8px;overflow:hidden;margin-bottom:10px}
.fav_qty_row .fav_qty_btn{flex:0 0 38px;display:flex;align-items:center;justify-content:center;background:#f4f5f7;cursor:pointer;font-size:18px;color:#001a34;user-select:none}
.fav_qty_row input.fav_qty_input{flex:1 1 auto;border:none;text-align:center;font-size:15px;width:100%;background:#fff}
.fav_qty_row input.fav_qty_input:focus{outline:none}

/* блок "На сумму / Вес / Длина" (deatil_praduct — как на странице товара) */
.deatil_praduct{font-size:13px;color:#5b6670}
.deatil_praduct .tot_price{font-size:13px;color:#5b6670;margin-bottom:4px}
.deatil_praduct .tot_price b{font-size:15px;font-weight:700;color:#001a34}
.deatil_praduct .tot1{font-size:13px;color:#5b6670}
.deatil_praduct .tot1 b{color:#001a34;font-weight:600}

/* кнопка "В корзину" / "Перейти в корзину" */
.fav_add_cart_btn{margin-top:12px;border:none;border-radius:8px;padding:12px;background:#f4b73f;color:#3a2c00;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
.fav_add_cart_btn:hover{background:#e5a913}
.fav_add_cart_btn.is-loading{opacity:.6;pointer-events:none}
.fav_add_cart_btn.go_to_cart{background:#4caf50;color:#fff}
.fav_add_cart_btn.go_to_cart:hover{background:#3d9140}

/* =====================================================================
   Страница /favorites — обёртка и сетка
   ===================================================================== */
.favorites_page{max-width:1400px;margin:0 auto;padding:20px 15px 60px}
.favorites_page h1{margin:0 0 20px}
.favorites_empty{text-align:center;padding:60px 15px}
.favorites_empty p{font-size:16px;color:#5b6670;margin:0 0 20px}
.favorites_empty a{display:inline-block;padding:10px 24px;border-radius:8px;background:#001a34;color:#fff;text-decoration:none}
.favorites_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}

/* =====================================================================
   Страница категории — переключатель "список / плитка"
   ===================================================================== */
.cat_view_switch{display:inline-flex;gap:6px;margin-left:14px;vertical-align:middle}
.cat_view_btn{width:34px;height:34px;border:1px solid #e6e9ec;border-radius:8px;background:#fff;color:#8b949b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cat_view_btn.active{background:#001a34;border-color:#001a34;color:#fff}

/* по умолчанию — список, плитка скрыта; при переключении класса на #items — наоборот */
#items.view-list .cat_grid_card{display:none}
#items.view-grid .cat_list_row{display:none}
#items.view-grid .cart-table-header{display:none}
#items.view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}

/* =====================================================================
   Страница товара — блоки "плитки" товаров ("С этим товаром покупают",
   "Вас также может заинтересовать") + бесконечный скролл
   ===================================================================== */
.related_grid_only{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.related_load_sentinel{height:1px}
.related_load_end{text-align:center;padding:20px 0;color:#8b949b;font-size:14px}

/* кнопка "Показать ещё" (блок "С этим товаром покупают") */
.related_load_more_btn{display:block;margin:24px auto 0;padding:12px 32px;border:1px solid #e6e9ec;border-radius:8px;background:#fff;color:#001a34;font-size:15px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.related_load_more_btn:hover{border-color:#001a34}
.related_load_more_btn.is-loading{opacity:.6;pointer-events:none}