/* === Roboto: Light (300) === */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-Light.woff2') format('woff2'),
         url('fonts/roboto/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* === Roboto: Regular (400) === */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto/Roboto-Regular.woff2') format('woff2'),
         url('fonts/roboto/Roboto-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* === Применение Roboto по всему сайту === */
body, html {
    font-family: 'Roboto', sans-serif !important;
}

/* === Цвет текста сайта === */
/* Меняет только обычный текст, ИКОНКИ НЕ ЗАТРАГИВАЕТ */
body,
body *:not(i):not(.fa):not(.fal):not(.far):not(.fas):not([class*="icon"]):not([class*="icons"]) {
    color: #173D6E !important;
}

.catalog-tiles-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: nowrap; /* ряд на десктопе */
    margin: 20px 0;
}

.catalog-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 160px; /* уменьшенный размер */
}

.catalog-tile img {
    width: 100%;
    height: auto;
}

.main-c-catalog-title-2 {
    font-size: 18px;
    line-height: 1.3;
    margin-top: 10px;
    text-align: center;
}

/* Адаптив */
@media (max-width: 1199px) {
    .catalog-tiles-row {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: flex-start;
    }
    .catalog-tile {
        width: calc(25% - 20px);
    }
}
@media (max-width: 991px) {
    .catalog-tile {
        width: calc(50% - 12px);
    }
}
@media (max-width: 575px) {
    .catalog-tile {
        width: 100%;
    }
}

/* === КНОПКА РЕГИСТРАЦИИ — ОФОРМЛЕНИЕ === */
ul.nav.nav-pills.pull-right.top-auth-block li.register-btn-li a.register-btn {
    background: #fe171f !important;
    color: #ffffff !important;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: none !important;
}

/* Белый текст внутри кнопки */
ul.nav.nav-pills.pull-right.top-auth-block li.register-btn-li a.register-btn * {
    color: #ffffff !important;
}

/* Hover */
ul.nav.nav-pills.pull-right.top-auth-block li.register-btn-li a.register-btn:hover {
    background: #d31219 !important;
    color: #ffffff !important;
}

/* Прячем кнопку на мобильных */
@media (max-width: 767px) {
    ul.nav.nav-pills.pull-right.top-auth-block li.register-btn-li {
        display: none !important;
    }
}

/* ПЕРЕОПРЕДЕЛЕНИЕ цвета текста  */
ul.nav.nav-pills.pull-right.top-auth-block li.register-btn-li > a.register-btn,
ul.nav.nav-pills.pull-right.top-auth-block li.register-btn-li > a.register-btn *,
li.register-btn-li a.register-btn,
li.register-btn-li a.register-btn * {
    color: #ffffff !important;
}

/* Если внутри кнопки есть span */
li.register-btn-li a.register-btn span {
    color: #ffffff !important;
}

/* === УНИФИКАЦИЯ ШРИФТА В ФУТЕРЕ === */
.footer, 
.footer * {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important; /* как в блоке реквизитов */
}

/* === ПЛИТКИ КАТАЛОГА  === */
.catalog-tiles-row {
    display: flex !important;
    flex-wrap: wrap !important; /* разрешаем перенос на следующий ряд */
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 12px !important; /* плитки ближе друг к другу */
    margin: 20px 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.catalog-tiles-row .catalog-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* текст по левому краю */
    text-align: left !important;
    width: 184px !important; /* чуть больше (увеличено на 15%) */
    max-width: 184px !important;
    min-width: 140px !important; /* минимальная ширина для маленьких экранов */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* картинка в плитке с рамкой и тенью */
.catalog-tiles-row .catalog-tile a img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: 1px solid #d0d0d0; /* еле видимая серо-синяя окантовка */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* легкая тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* плавная анимация */
}

/* эффект при наведении на плитку */
.catalog-tiles-row .catalog-tile:hover a img {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* текст под плиткой */
.catalog-tiles-row .catalog-tile .main-c-catalog-title-2 {
    font-size: 14px !important; /* чуть меньше, чтобы помещался в одну строку */
    line-height: 1.2 !important;
    margin-top: 6px !important;
    width: 100% !important; /* чтобы выравнивался по ширине плитки */
    text-align: left !important;
    white-space: nowrap !important; /* в одну строку */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #173D6E !important;
}

/* Адаптив: планшет/мобильные */
@media (max-width: 1199px) {
    .catalog-tiles-row .catalog-tile {
        width: calc(33.33% - 12px) !important; /* 3 в ряд */
        max-width: calc(33.33% - 12px) !important;
        min-width: unset !important;
    }
}

@media (max-width: 991px) {
    .catalog-tiles-row .catalog-tile {
        width: calc(50% - 12px) !important; /* 2 в ряд */
        max-width: calc(50% - 12px) !important;
    }
}

@media (max-width: 575px) {
    .catalog-tiles-row .catalog-tile {
        width: 100% !important; /* 1 в ряд */
        max-width: 100% !important;
    }
}
