/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */
.quick-filters-desktop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Автоматические колонки */
    gap: 25px;
    background: #fdfdfd;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Заголовки групп */
.section-title {
    font-size: 12px;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

/* Контейнер кнопок внутри группы */
.section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Сами кнопки-ссылки */
.section-buttons a {
    display: inline-block;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #dcdcdc;
    color: #333 !important;
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.section-buttons a:hover {
    border-color: #e34133;
    color: #e34133 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Кнопка сброса (стиль как на скриншоте) */
.btn-reset-filters {
    background-color: #e34133;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    font-size: 13px;
    transition: opacity 0.3s;
}

.btn-reset-filters:hover {
    opacity: 0.9;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .quick-filters-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn-reset-filters {
        width: 100%;
        text-align: center;
    }
    .quick-filters-desktop-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильном */
        padding: 15px;
    }
}


.product-field-type-R {

    margin: 0 4px !important;
  
}
/* Общий контейнер */
.truss-catalog-wrapper {
    display: grid;
    /* По умолчанию 3 колонки для десктопа */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px; /* Отступы: 30px между рядами, 20px между колонками */
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Элемент карточки */
.truss-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Обертка картинки с рамкой */
.truss-img-box {
    width: 100%;
    margin-bottom: 15px;
}

.browseCategoryImage, .truss-img-box img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee; /* Тонкая серая рамка */
    padding: 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.truss-img-box img:hover {
    border-color: #ff4500; /* Цвет рамки при наведении (оранжевый как на фото) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


/* Эффект при наведении */
.spacer a:hover img.browseCategoryImage, 
.spacer img.browseCategoryImage:hover {
    border-color: #ff0000 !important; /* Ярко-красный */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    cursor: pointer;
}


/* Ссылка-заголовок */
.truss-item-title {
    font-size: 16px;
    line-height: 1.3;
    color: #ff4500; /* Оранжевый цвет текста из вашего примера */
    text-decoration: none;
    font-weight: 400;
}

.truss-item-title:hover {
    text-decoration: underline;
}

/* --- Адаптив для мобильных устройств --- */
@media (max-width: 992px) {
    .truss-catalog-wrapper {
        /* 2 элемента в ряд на планшетах и телефонах */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }
    
    .truss-item-title {
        font-size: 14px;
    }
}

/* Опционально: 1 элемент в ряд на очень маленьких экранах (до 400px) */
@media (max-width: 400px) {
    .truss-catalog-wrapper {
        grid-template-columns: 1fr;
    }
}


/* Разделитель на всю ширину сетки */
.truss-grid-separator {
    grid-column: 1 / -1; /* Растягивает блок на все колонки */
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    padding: 10px 0;
}

/* Линии по бокам от текста */
.truss-grid-separator::before,
.truss-grid-separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ddd; /* Цвет линии */
}

/* Стиль самого текста */
.truss-grid-separator span {
    padding: 0 20px;
    color: #555;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Добавим небольшой отступ сверху для второго ряда картинок, 
   чтобы они не прилипали к линии */
.truss-grid-separator + .truss-item {
    margin-top: 10px;
}


/* Базовые стили для картинки */
.tm-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* Для ОЧЕНЬ больших мониторов (свыше 1600px) оставляем 350px */
.tm-logo {
    display: inline-block;
    width: 350px;
}

/* Для вашего ноутбука (1520px) и всех экранов меньше 1600px */
@media (max-width: 1600px) {
    .tm-logo {
        width: 250px; /* Тот самый размер, который вы просили */
    }
}

/* Опционально: еще чуть меньше для планшетов, чтобы меню не "взорвалось" */
@media (max-width: 1024px) {
    .tm-logo {
        width: 200px;
    }
}