/*!
Theme Name: stroymatshop
Theme URI: http://underscores.me/
Author: 3jd
Author URI: https://3jd.ru/
Description: 3jd with ❤️ for - stroymatshop
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: stroymatshop
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

stroymatshop is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
body {
	font-family: "Montserrat", sans-serif;
}


.block_1 {
    font-size: .9rem;
}

.block_1 a {
    color: #333;
}

.content{
    min-height: 100vh;
}

.bg-blue {
    background-color: rgb(0 68 136) !important;
}


.block_3 .nav-link{
    color: #fff !important;
}

.block_3 .nav-link:hover{
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 5px;
}


.block_3 {
    background-color: #333;
    color: #fff;
}


.grid-item {
    margin-bottom: 1rem;
    width: 100%;
}

.grid-link {
    position: relative;
    display: block;
    overflow: hidden;
    box-shadow: 1px 4px 11px 4px rgb(0 0 0 / 22%);
    transition: transform 0.3s ease;
}

.grid-link:hover {
    transform: scale(1.02);
    text-decoration: none;
}

.grid-link img {
    width: 100%;
    height: auto;
    display: block;
}

.grid-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    width: 100%;
    padding: 0 15px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
}

.grid-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@media (min-width: 576px) {
    .grid-item {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .grid-item {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .grid-item {
        width: 33.333%;
    }
}

@media (min-width: 1200px) {
    .grid-item {
        width: 25%;
    }
}





/* Иконка бургера */
.toggler-icon {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 18px;
    cursor: pointer;
}


button:focus:not(:focus-visible){
    box-shadow: none;
}

.toggler-icon span {
    position: absolute;
    height: 2px;
    width: 100%;
    background: white;
    left: 0;
    transition: all 0.3s ease;
}

.toggler-icon span:nth-child(1) {
    top: 0;
}
.toggler-icon span:nth-child(2) {
    top: 8px;
}
.toggler-icon span:nth-child(3) {
    top: 16px;
}

/* Закрытое состояние (collapsed) — три полоски */
.navbar-toggler.collapsed .toggler-icon span:nth-child(1) {
    transform: rotate(0);
    top: 0;
}
.navbar-toggler.collapsed .toggler-icon span:nth-child(2) {
    opacity: 1;
}
.navbar-toggler.collapsed .toggler-icon span:nth-child(3) {
    transform: rotate(0);
    top: 16px;
}

/* Открытое состояние — крестик */
.navbar-toggler:not(.collapsed) .toggler-icon span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
}
.navbar-toggler:not(.collapsed) .toggler-icon span:nth-child(2) {
    opacity: 0;
}
.navbar-toggler:not(.collapsed) .toggler-icon span:nth-child(3) {
    transform: rotate(-45deg);
    top: 8px;
}


/* === Material Design Pagination === */

.material-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

.material-pagination .page-item {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.material-pagination .page-item a,
.material-pagination .page-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Текущая страница */
.material-pagination .page-item .current {
    background-color: #004488 !important;
    color: #fff !important;
    border-color: #004488;
    box-shadow: 0 4px 12px rgba(98, 0, 238, 0.3);
    font-weight: 600;
    transform: scale(1.1);
}

/* Наведение */
.material-pagination .page-item a:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Стрелки "Назад" и "Вперёд" */
.material-pagination .material-prev,
.material-pagination .material-next {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-weight: bold;
    color: #555;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
}

.material-pagination .material-prev:hover,
.material-pagination .material-next:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* Отключённые ссылки (например, "Назад" на 1-й странице) */
.material-pagination .page-item span.current,
.material-pagination .page-item span[aria-hidden="true"] {
    pointer-events: none;
    color: #bbb;
    border-color: #eee;
    background-color: #fafafa;
}

/* Адаптивность */
@media (max-width: 576px) {
    .material-pagination {
        gap: 6px;
    }
    .material-pagination .page-item a,
    .material-pagination .page-item span {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}



/* === Material Design Карточки Товаров === */

/* Акцентный цвет */
.text-accent {
    color: #004488 !important;
}

.btn-accent {
    background-color: #004488 !important;
    border-color: #003366 !important;
    color: #fff !important;
    font-weight: 500;
}

.btn-accent:hover {
    background-color: #003366 !important;
    border-color: #002244 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 68, 136, 0.25);
}

/* Текст ссылок */
.text-primary-dark {
    color: #004488 !important;
}

.text-primary-dark:hover {
    color: #003366 !important;
}

/* Эффект масштабирования изображения */
.transition-scale img {
    transition: transform 0.3s ease;
}

.transition-scale:hover img {
    transform: scale(1.05);
}

/* Лёгкий подъём кнопки и карточки */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.catalog-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px !important;
    overflow: hidden;
}

.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -8px rgba(0, 68, 136, 0.25);
}

/* Ограничение строк (чтобы не рвало верстку) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Убираем границы у footer, делаем отступы красивыми */
.card-footer {
    background: #fff;
}

/* Адаптивность */
@media (max-width: 576px) {
    .catalog-card .card-body,
    .catalog-card .card-footer {
        padding: 0.75rem;
    }
    .btn-sm {
        font-size: 0.85rem;
        padding: 0.375rem 0;
    }
}



/* === Single Product — Material Design Style === */

/* Акцентный цвет */
.text-primary-dark {
    color: #004488 !important;
}

/* Эффект масштабирования изображения */
.transition-scale:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

/* Заголовок */
.entry-title {
    font-weight: 600;
    letter-spacing: -0.5px;
}


/* Секции с заголовками */
section h2 {
    position: relative;
}

/* Адаптивность */
@media (max-width: 768px) {
    .entry-header .entry-title {
        font-size: 1.5rem;
    }
    .p-lg-5 {
        padding: 1rem;
    }
    .row.g-5 {
        margin-top: 1rem;
    }
}

/* Плавная анимация при загрузке */
article {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Кнопка "В избранное" — стиль Material Design */
.favorite-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    color: #004488;
    border: 1px solid #004488;
    border-radius: 24px; /* Закруглённые края как в Material */
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 68, 136, 0.1);
    transition: all 0.2s ease;
    outline: none;
    min-height: 40px;
}

/* Эффект при наведении */
.favorite-button:hover {
    background-color: #004488;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 68, 136, 0.2);
    transform: translateY(-1px);
}

/* Активное состояние (если уже в избранном) */
.favorite-button.active {
    background-color: #004488;
    color: #fff;
}



/* Плавная анимация при переключении */
.favorite-button::before {
    transform-origin: center;
}

.favorite-button:hover::before {
    transform: scale(1.1);
}

/* Список избранных товаров */
.favorites-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

/* Карточка товара в избранном */
.favorite-item {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.favorite-item:hover {
    box-shadow: 0 4px 16px rgba(0, 68, 136, 0.12);
    transform: translateY(-2px);
}

.favorite-item h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #004488;
}

.favorite-item h3 a {
    color: inherit;
    text-decoration: none;
}

.favorite-item h3 a:hover {
    text-decoration: underline;
}

.favorite-item p {
    margin: 0 0 16px 0;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}



/* xl-размер (<=1200px) */
@media (max-width: 1399px) {
    .fs-2{
        font-size: 1.5rem!important;
    }
}

/* lg-размер (<=1199px) */
@media (max-width: 1199px) {}

/* md-размер (<=991px) */
@media (max-width: 991px) {}

/* sm-размер (<=768px) */
@media (max-width: 767px) {}

/* xs-размер (<=575px) */
@media (max-width: 575px) {}