@media(min-width:768px){ #top.navbar-default .navbar-nav>li>a {color: #aaaaaa;}#top.navbar-default .navbar-nav>li>a:focus, #top.navbar-default .navbar-nav>li>a:hover, #top.navbar-default .navbar-nav>.open>a, #top.navbar-default .navbar-nav>.open>a:focus, #top.navbar-default .navbar-nav>.open>a:hover, #cart > a > small.fa-stack {color: #ffffff;}.owl-moneymaker2-fullscreen #top.navbar-default .navbar-nav>li>a {color: #aaaaaa;}.owl-moneymaker2-fullscreen #top.navbar-default .navbar-nav>li>a:focus, .owl-moneymaker2-fullscreen #top.navbar-default .navbar-nav>li>a:hover, .owl-moneymaker2-fullscreen #top.navbar-default .navbar-nav>.open>a, .owl-moneymaker2-fullscreen #top.navbar-default .navbar-nav>.open>a:focus, .owl-moneymaker2-fullscreen #top.navbar-default .navbar-nav>.open>a:hover, .owl-moneymaker2-fullscreen #cart > a > small.fa-stack {color: #ffffff;}#top.navbar-default {background-color: rgb(17, 17, 17);background-color: rgba(17, 17, 17, 0.8);}#cart > a > small.fa-stack > span.fa-stack-1x {color: rgba(17, 17, 17, 0.8);}.categories-menu.navbar-default {background-color: rgb(51, 51, 51);background-color: rgba(51, 51, 51, 0.75);}.categories-menu.navbar-default .navbar-nav>li>a {color: #eeeeee;}.categories-menu.navbar-default .navbar-nav>li>a:focus, .categories-menu.navbar-default .navbar-nav>li>a:hover, .categories-menu.navbar-default .navbar-nav>.open>a, .categories-menu.navbar-default .navbar-nav>.open>a:focus, .categories-menu.navbar-default .navbar-nav>.open>a:hover {color: #ffffff;}.owl-moneymaker2-fullscreen .categories-menu.navbar-default .navbar-nav>li>a {color: #eeeeee;}.owl-moneymaker2-fullscreen .categories-menu.navbar-default .navbar-nav>li>a:focus, .owl-moneymaker2-fullscreen .categories-menu.navbar-default .navbar-nav>li>a:hover, .owl-moneymaker2-fullscreen .categories-menu.navbar-default .navbar-nav>.open>a, .owl-moneymaker2-fullscreen .categories-menu.navbar-default .navbar-nav>.open>a:focus, .owl-moneymaker2-fullscreen .categories-menu.navbar-default .navbar-nav>.open>a:hover {color: #ffffff;}#contacts span.phone {color: #ffffff;}}/*@media*/.navbar-header > a, #top.navbar-default .btn-link.dropdown-toggle {color: #aaaaaa;}.navbar-header > a:hover, .navbar-header > a:focus, #top.navbar-default .btn-link.dropdown-toggle:focus, #top.navbar-default .btn-link.dropdown-toggle:hover {color: #ffffff;}.owl-moneymaker2-fullscreen .navbar-header > a, .owl-moneymaker2-fullscreen #top.navbar-default .btn-link.dropdown-toggle {color: #aaaaaa;}.owl-moneymaker2-fullscreen .navbar-header > a:hover, .owl-moneymaker2-fullscreen .navbar-header > a:focus, .owl-moneymaker2-fullscreen #top.navbar-default .btn-link.dropdown-toggle:hover, .owl-moneymaker2-fullscreen #top.navbar-default .btn-link.dropdown-toggle:focus {color: #ffffff;}@media(max-width:767px){ #top .navbar-header {background-color: rgb(17, 17, 17);background-color: rgba(17, 17, 17, 0.8);}body.owl-moneymaker2-fullscreen header > #top.navbar-default { margin-bottom: 0;}}/*@media*/#logo > a {text-decoration: none;}#logo .fa-stack .fa-stack-1x {color: #ffffff;}#logo .fa-stack .fa-stack-2x {color: #337ab7;}#logo .text-primary {color: #f7ff00;}#logo small {color: #cccccc;}#logo>a:hover .fa-stack .fa-stack-1x, #logo>a:focus .fa-stack .fa-stack-1x {color: #337ab7;}#logo>a:hover .fa-stack .fa-stack-2x, #logo>a:focus .fa-stack .fa-stack-2x {color: #ffffff;}#logo>a:hover .text-primary, #logo>a:focus .text-primary {color: #40a7ff;}#logo>a:hover small, #logo>a:focus small {color: #dddddd;}.sticker > .tooltip.right .tooltip-inner {background-color: rgba(0, 0, 0, 0.50);}.sticker > .tooltip.right .tooltip-arrow {border-right-color: rgba(0, 0, 0, 0.50);}.sticker.sticker-special {color: #D9534F;}.sticker.sticker-popular {color: #337AB7;}.sticker.sticker-rated {color: #F7941D;}.sticker.sticker-new {color: #5CB85C;}.sticker.sticker-custom1 {color: #337ab7;}body {background-color: #ffffff;}.fa-stack.img-thumbnail {background-color: #ffffff;}div.hr:after {border-color: #ffffff transparent;}.advantage-caret-right:after {border-left: 10px solid #ffffff;}.advantage-caret-left:after {border-right: 10px solid #ffffff;}.owl-moneymaker2.owl-moneymaker2-products .owl-buttons .owl-prev, #column-left .owl-moneymaker2 .owl-buttons .owl-prev,#column-right .owl-moneymaker2 .owl-buttons .owl-prev {background: linear-gradient(to left, rgba(255,255,255, 0.0), rgba(255,255,255, 1));}.owl-moneymaker2.owl-moneymaker2-products .owl-buttons .owl-next, #column-left .owl-moneymaker2 .owl-buttons .owl-next, #column-right .owl-moneymaker2 .owl-buttons .owl-next {background: linear-gradient(to right, rgba(255,255,255, 0.0), rgba(255,255,255, 1));}.moneymaker_activity > div {background: linear-gradient(to bottom, rgba(255,255,255, 0.0), rgb(255,255,255), rgb(255,255,255));}.products .product-list .product-thumb .additional .stock {display: none;}.products .product-grid .product-thumb .additional .stock {display: none;}.products .product-list .product-thumb .additional .code {display: none;}.products .product-grid .product-thumb .additional .code {display: none;}.products .product-list .product-thumb .description {display: none;}.products .product-grid .product-thumb .description {display: none;}.col-sm-12 .thumbnails.image-additional{height:80px}.product-thumb .additional .stock.instock {border-color: #449d44;color: #449d44;}.product-thumb .additional .stock {border-color: #999999;color: #999999;}#content .product-thumb .caption {white-space: nowrap; overflow: hidden;}#content .product-thumb .caption > a::after, #content .product-thumb .caption > span::after {content: '';position: absolute;right: 15px;width: 80px;height: 22px;background: linear-gradient(to right, rgba(255,255,255, 0.1), rgba(255,255,255, 1));}.product-points .stock-7 .fa-stack { color: #5CB85C ; } .product-points .stock-5 .fa-stack { color: #D9534F ; } .product-points .stock-6 .fa-stack { color: #F0AD4E ; } .product-points .stock-8 .fa-stack { color: #aaaaaa ; } .product-thumb.promo {background-color: #f5f5f5;}#content .product-thumb.promo .caption > a::after, #content .product-thumb.promo .caption > span::after {background: linear-gradient(to right, rgba(255,255,255, 0.1),#f5f5f5);}footer {background-color: #202020; border-top: 2px solid #777777; color: #777777;}footer .col-sm-3 > ul .input-group > input {color: #777777;}footer .bottom .col-sm-3 {color: #777777;}footer .bottom {background-color: #181818;}footer a, footer .bottom .col-sm-9 .fa-stack .fa-inverse {color: #aaaaaa;}footer a:hover, footer a:focus {color: #ffffff;}footer .h5.text-muted {color: #777777;}footer .h5, footer .bottom .col-sm-9 .fa-stack {border-color: #555555;}@media screen and (max-width: 767px) {body, html {overflow-x: hidden;} body > .container > .row {position: relative;} #column-left {left: -72%;margin-left: 15px;} #column-right {right: -72%;margin-right: 15px;} #column-left, #column-right {position: absolute;top: 0;width: 68%;}#column-left.active, #column-right.active {width: 72%;} }body > .header-alert {background-color: #cccccc;}#logo > a:hover > .fa-stack {	transform: rotateY(180deg);}#logo .text-primary .mmr2-inner {	color: #40a7ff;	margin-left: 1px;}#logo > a:hover > .text-primary .mmr2-inner, #logo > a:focus > .text-primary .mmr2-inner {	color: #fff;} 




<style>
/* --- ОСНОВНА СІТКА --- */
.custom-catalog-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Компенсація відступів */
}
.catalog-item-col {
    padding: 0 15px;
    margin-bottom: 30px; /* Відступ між рядами */
    display: flex;
}

/* --- КАРТКА --- */
.catalog-card {
    background: #fff;
    border: 1px solid #eee; /* Тонка рамка */
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* Дуже легка тінь */
}
/* Ефект при наведенні на всю картку */
.catalog-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-color: #ddd;
    transform: translateY(-2px); /* Легке підняття */
}

/* --- ВЕРХНЯ ЧАСТИНА (ФОТО + ЗАГОЛОВОК) --- */
.card-header-link {
    display: flex; /* Розміщуємо картинку і текст В РЯД */
    align-items: center; /* Центруємо по вертикалі */
    padding: 15px;
    text-decoration: none !important;
    background: #fff;
    border-bottom: 1px solid #f0f0f0; /* Лінія під шапкою */
    min-height: 90px; /* Фіксована висота шапки для рівності */
}

/* --- АВТОМАТИЧНЕ ЗМЕНШЕННЯ ФОТО --- */
.card-img-wrapper {
    width: 110px;   /* Фіксована ширина місця під фото */
    height: 75px;   /* Фіксована висота */
    flex-shrink: 0; /* Забороняємо стискати блок фото */
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Головний секрет: вписує велике фото в малий блок */
}

/* --- ЗАГОЛОВОК --- */
.card-title-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: space-between; /* Текст зліва, стрілка справа */
    align-items: center;
}
.card-title-wrapper h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    line-height: 1.3;
}
.header-arrow {
    color: #72b026; /* Зелений колір стрілки */
    font-size: 16px; /* Трохи більша стрілка */
    margin-left: 10px;
    font-weight: bold;
}
/* Зміна кольору тексту при наведенні */
.catalog-card:hover .card-title-wrapper h3 {
    color: #72b026; 
}

/* --- СПИСОК ПІДКАТЕГОРІЙ --- */
.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fdfdfd; /* Легкий фон для списку */
    flex-grow: 1; /* Список займає все вільне місце */
}
.card-list li {
    border-bottom: 1px solid #f5f5f5; /* Лінії між пунктами */
}
.card-list li:last-child {
    border-bottom: none; /* Прибираємо лінію в останнього пункту */
}
.card-list li a {
    display: flex;
    justify-content: space-between; /* Текст -- стрілка */
    align-items: center;
    padding: 10px 15px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.card-list li a:hover {
    background: #f8f8f8;
    color: #000;
}
.list-arrow {
    color: #72b026; /* Зелена маленька стрілочка */
    font-size: 12px;
}

/* --- АДАПТАЦІЯ ПІД МОБІЛЬНІ --- */
@media (max-width: 767px) {
    .catalog-item-col { margin-bottom: 15px; }
    .card-img-wrapper { width: 90px; height: 60px; } /* Трохи менше фото на телефоні */
    .card-title-wrapper h3 { font-size: 16px; }
    .card-header-link { padding: 10px; min-height: auto; }
}

/* --- АДАПТАЦІЯ ПІД МОБІЛЬНІ --- */
@media (max-width: 767px) {
    .catalog-item-col { margin-bottom: 15px; }
    .card-img-wrapper { width: 90px; height: 60px; }
    .card-title-wrapper h3 { font-size: 18px; } /* Трохи збільшили заголовок теж */
    .card-header-link { padding: 10px; min-height: auto; }
    
    /* ЗБІЛЬШЕНИЙ ШРИФТ ДЛЯ СПИСКУ ПІДКАТЕГОРІЙ */
    .card-list li a { 
        font-size: 16px; /* Було 13px, стало 15px (можна поставити 16px) */
        padding: 12px 15px; /* Трохи збільшив відступ, щоб легше було попасти пальцем */
    }
}


/* --- СТИЛЬ ДЛЯ H1 --- */
.custom-main-title {
    font-size: 32px;           /* Розмір на комп'ютері */
    font-weight: 700;          /* Жирний шрифт */
    color: #333;               /* Темно-сірий колір тексту */
    text-transform: uppercase; /* Всі великі літери (як на фото-зразках) */
    text-align: center;        /* Центрування */
    margin-top: 20px;          /* Відступ зверху */
    margin-bottom: 30px;       /* Відступ до каталогу */
    line-height: 1.2;          /* Міжрядковий інтервал */
    letter-spacing: 1px;       /* Невеликий відступ між літерами для стилю */
}

/* --- МОБІЛЬНА АДАПТАЦІЯ --- */
@media (max-width: 767px) {
    .custom-main-title {
        font-size: 22px;       /* Зменшений розмір для телефонів */
        margin-top: 15px;
        margin-bottom: 20px;
        padding: 0 10px;       /* Щоб текст не торкався країв екрана */
    }
}


/* ============================================================
   СТОРІНКА: ДОСТАВКА ТА ОПЛАТА (Information Page)
   Опис: Стилі для карток з іконками, списків та бейджів
   ============================================================ */

/* Загальний контейнер */
.delivery-payment-container {
    line-height: 1.6;
    color: #333;
}

/* Відступи між секціями */
.dp-section {
    margin-bottom: 30px;
}

/* Стиль картки (білий блок з рамкою) */
.dp-card {
    background: #fdfdfd;
    border: 1px solid #e5e5e5;
    padding: 25px;
    border-radius: 4px;
    height: 100%; /* Щоб блоки були однакової висоти */
    transition: border-color 0.3s;
}
.dp-card:hover {
    border-color: #bbb; /* Трохи темніша рамка при наведенні */
}

/* Заголовки всередині карток (H3) */
.dp-card h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    color: #222;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.dp-card h3 i {
    color: #72b026; /* Зелена іконка */
    margin-right: 12px;
    font-size: 22px;
}

/* Списки (Доставка, Оплата) */
.dp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dp-list li {
    position: relative;
    padding-left: 25px; /* Місце під галочку */
    margin-bottom: 15px;
}
/* Зелена галочка перед кожним пунктом */
.dp-list li:before {
    content: "\f00c"; /* FontAwesome check */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 2px;
    color: #72b026;
    font-size: 14px;
}

/* Зелений бейдж "Зручно" */
.dp-badge {
    display: inline-block;
    background: #72b026;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: middle;
}

/* Жовтий блок "Важливо" */
.dp-note {
    background: #fffdf0;
    border: 1px solid #f0e5c5;
    border-left: 4px solid #f0ad4e; /* Помаранчева лінія зліва */
    padding: 15px;
    margin-top: 25px;
    font-size: 13px;
    color: #8a6d3b;
    border-radius: 3px;
}

/* Адаптація під мобільні */
@media (max-width: 767px) {
    .dp-card {
        height: auto;
        padding: 15px;
        margin-bottom: 15px;
    }
    .dp-section {
        margin-bottom: 0; /* Прибираємо зайві відступи */
    }
}

/* Сітка для текстового блогу */
.info-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Картка статті без фото */
.info-hub-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    /* Кольоровий акцент зверху (можна змінити колір #d9534f на свій) */
    border-top: 4px solid #d9534f; 
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Ефект при наведенні */
.info-hub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-top-color: #333; /* Колір смужки змінюється при наведенні */
}

/* Контент всередині */
.info-hub-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Заголовок статті */
.info-hub-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.info-hub-title a {
    text-decoration: none;
    color: #222;
    transition: color 0.2s;
}

.info-hub-title a:hover {
    color: #d9534f; /* Колір тексту при наведенні */
}

/* Короткий опис */
.info-hub-excerpt {
    font-size: 15px;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
    flex-grow: 1; /* Штовхає кнопку вниз */
}

/* Кнопка "Читати далі" */
.info-hub-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #fcfcfc;
    color: #444;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #ccc;
    transition: all 0.2s;
    font-size: 14px;
}

.info-hub-btn:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
    text-decoration: none;
}









/* --- СТИЛІ ДЛЯ СТАТТІ ПРО ДОГЛЯД ЗА КИЄМ --- */

.blog-cue-article-wrapper {
font-family: inherit;
    font-size: 18px; /* Додано: встановлює базовий розмір для всього тексту */
    color: #333;
    line-height: 1.7; /* Збільшено інтервал між рядками для кращої читабельності більшого тексту */
    max-width: 900px;
    margin: 0 auto;
    padding: 15px;
}

.blog-cue-main-title {
    text-align: center;
    font-size: 1.8em;
    color: #2c3e50;
    margin-bottom: 25px;
}

.blog-cue-intro {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #555;
}

.blog-cue-intro:last-of-type {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}

.blog-cue-section {
    margin-bottom: 40px;
    background: #fff;
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #f2f2f2;
}

.blog-cue-subtitle {
    font-size: 1.4em;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #3498db;
    display: inline-block;
}

.blog-cue-list {
    list-style-type: none;
    padding-left: 0;
}

.blog-cue-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
}

.blog-cue-list li::before {
    content: "\2022";
    color: #3498db;
    font-weight: bold;
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: -4px;
}

.blog-cue-list strong {
    color: #2c3e50;
}

/* Блоки з попередженнями та інформацією */
.blog-cue-alert {
    padding: 15px 20px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 0.95em;
}

.blog-cue-alert-danger {
    background-color: #fdf2f2;
    border-left: 5px solid #e74c3c;
    color: #c0392b;
}

.blog-cue-alert-info {
    background-color: #f0f8ff;
    border-left: 5px solid #3498db;
    color: #2980b9;
}

/* Стилі для впорядкованого списку (нумерація) */
.blog-cue-ordered-list {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 25px;
}

.blog-cue-ordered-list li {
    margin-bottom: 8px;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 768px) {
    .blog-cue-section {
        padding: 15px;
    }
    .blog-cue-subtitle {
        font-size: 1.25em;
    }
}




/* --- ОНОВЛЕНІ СТИЛІ ДЛЯ ТАБЛИЦІ В СТАТТІ --- */

.blog-cue-table-responsive {
    margin: 15px 0 20px 0;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.blog-cue-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    text-align: left;
}

.blog-cue-table th, 
.blog-cue-table td {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
}

.blog-cue-table th {
    background-color: #f8f9fa;
    color: #2c3e50;
    font-weight: 600;
    border-bottom: 2px solid #3498db;
}

.blog-cue-table td strong {
    color: #2c3e50;
}

/* Адаптивність для мобільних пристроїв (екрани до 768px) */
@media (max-width: 768px) {
    .blog-cue-table thead {
        display: none; /* Ховаємо стандартні заголовки колонок */
    }
    .blog-cue-table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 2px solid #ecf0f1;
        border-left: 4px solid #3498db; /* Акцентна лінія зліва */
        border-radius: 6px;
        overflow: hidden;
    }
    .blog-cue-table tbody td {
        display: block;
        border: none;
        border-bottom: 1px solid #eee;
        padding: 12px 15px;
    }
    .blog-cue-table tbody td:last-child {
        border-bottom: none;
    }
    
    /* Додаємо підписи для кожної комірки (заміна заголовкам) */
    .blog-cue-table tbody td:nth-of-type(1)::before {
        content: "Жорсткість:";
        font-weight: 600;
        color: #7f8c8d;
        display: block;
        margin-bottom: 4px;
        font-size: 0.9em;
    }
    .blog-cue-table tbody td:nth-of-type(2)::before {
        content: "Характеристики:";
        font-weight: 600;
        color: #7f8c8d;
        display: block;
        margin-bottom: 4px;
        font-size: 0.9em;
    }
    .blog-cue-table tbody td:nth-of-type(3)::before {
        content: "Кому підходить:";
        font-weight: 600;
        color: #7f8c8d;
        display: block;
        margin-bottom: 4px;
        font-size: 0.9em;
    }
}


</style>