html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative; 
  min-height: 100%;
}

body {
    height: 100%;
    /*margin-bottom: 60px;*/
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Контейнер займет как минимум всю высоту страницы */
}

main {
    flex: 1; /* Контент займет все доступное пространство между хедером и футером */
    overflow: auto;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* переопределяем цвета */

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #a18f83;
}

.nav-link {
    color: inherit;
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
    .nav-link:focus, .nav-link:hover {
        color: #e56b13;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    /*box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;*/
    box-shadow: none;
}

.form-control:focus, .form-select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #e6bfa2;
    outline: 0;
    box-shadow: none;
    /*box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);*/
}


/************** Общее **************/

a, .a {
    color: #7c6b5f;
    text-decoration: none;
}

    a:hover, .a:hover {
        color: #e56b13;
        text-decoration: none;
    }


.btn-xs,
.btn-group-xs > .btn {
    padding: 0.2rem 0.4rem;
    font-size: .75rem;
    border-radius: .2rem;
}

/* Переопределяем цвета радио-кнопок */
.form-check-input:checked {
    background-color: #e56b13;
    border-color: #e56b13;
}

.sticky-top {
    z-index: 1020;
}

.pointer {
    cursor: pointer !important;
}

#service-info {
    transition: top 0.3s;
    font-size: 0.8rem;
    color: #68432d
}
/*    #service-info a:hover {
        color: #e56b13;
    }*/

.logo-row {
    transition: top 0.3s;
}

/* всплывающее уведомление */
#toast {
    z-index: 1150; /* Чтобы отображаться поверх модального окна */
    transition: opacity 0.5s ease-in-out;
}


.text-logo-ff {
    line-height: 1.1;
    font-size: 1.2em;
    text-align: justify-all;
    color: #e56b13;
    letter-spacing: 1.5px;
}

.font-alt {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-alt-nospace {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
}

.font-condensed {
    font-family: "Roboto Condensed", sans-serif;
}

.text-accent {
    color: #e56b13;
}

.text-accent2 {
    color: #5cb85c;
}

.bg-accent {
    background-color: #e56b13;
}

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e56b13;
    --bs-btn-border-color: #e56b13;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #cf6112;
    --bs-btn-hover-border-color: #be6424;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #be6424;
    --bs-btn-active-border-color: #b64c00;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #e58f51;
    --bs-btn-disabled-border-color: #e58f51;
}

.text-small {
    font-size: 80%;
}

.badge-informer {
    font-size: .5em;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    transform: translate(-50%, -50%) !important;
}


.articul {
    padding: 0 5px 1px 5px;
    color: #696969;
    background-color: #efdfd4;
    font-size: 0.85rem;
    border-radius: 4px;
    /*text-align: center;*/
    position: relative;
    display: inline-block;
}





/* Убираем стрелочки в input на всех браузерах */
/* ПОТОМ ПЕРЕДЕЛАТЬ ТОЛЬКО ДЛЯ КОРЗИНЫ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Для Firefox */
}


/* Иконка в меню */
.topmenu-element {
    font-size: 1.7em;
}

/************** Выпадающее меню корзины **************/

.cart-button {
    padding: 0.25rem 0.625rem;
    font-size: 1.25rem;
    border: none;
}

.cart-dropdown {
    display: none;
    position: absolute;
    top: 100%; /* Позиционирование ниже иконки */
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1000;
    padding: 1rem;
    min-width: 50vw;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow-x: auto; /* Прокрутка при необходимости */
}

@media (max-width: 768px) {
    .cart-dropdown {
        min-width: 100vw; /* Меню занимает всю ширину экрана */
        /*padding: 0.75rem;*/
    }
}

/* Стили для списка товаров */
.cart-list {
    /*list-style: none;*/
    padding: 0;
    margin: 0;
}

.cart-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

    .cart-item:last-child {
        /*border-bottom: none;*/
    }

.cart-item-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cart-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #666;
}

.cart-item-quantity,
.cart-item-price {
    white-space: nowrap;
}

.cart-total {
    font-weight: 600;
    text-align: right;
    margin-top: 1rem;
}

.cart-footer {
    margin-top: 1rem;
    text-align: right;
}

    /* Кнопка перехода в корзину */
    .cart-footer .btn {
        margin-top: 0.5rem;
    }


/************** Общий стиль для контейнера с прокруткой **************/

.category-scroll {
    display: flex;  /* Делаем элементы в одну строку */
    gap: 20px;      /* Расстояние между элементами */
    overflow-x: auto; /* Включаем горизонтальную прокрутку */
    scrollbar-width: none; /* Скрываем скроллбар для Firefox */
    padding-bottom: 5px;    /* Для небольшого отступа снизу */
}

    /* Скрываем скроллбар для Chrome, Safari и Edge */
    .category-scroll::-webkit-scrollbar {
        display: none;
    }

/* Стиль для ссылок-категорий */
.category-item {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px; 
    background-color: #f8f9fa; 
    /*color: #646464; */
    text-decoration: none; 
    font-family: "Arial", sans-serif;
    font-size: 0.9rem; 
    white-space: nowrap; /* Запрещаем перенос текста */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход при наведении */
}

    /* Эффект при наведении мышки */
    .category-item:hover {
        background-color: #f6f1ed;
        color: #2c6045; 
    }

/* Адаптация для небольших экранов */
@media (max-width: 768px) {
    .category-item {
        font-size: 0.86rem; /* Уменьшаем шрифт на мобильных */
    }

    .category-scroll {
        gap: 12px;      /* Расстояние между элементами */
    }
}

/************** Гамбургер и текст в кнопке каталога **************/

#catalogDropdown {
    white-space: nowrap; /* Исключаем перенос текста */
    /*background-color: #779090;*/
    background-color: #e56b13;
    border-color: #e56b13;
}

    #catalogDropdown span {
        display: inline;
    }

@media (max-width: 768px) {
    #catalogDropdown span {
        display: none; /* Скрываем текст на маленьких экранах */
    }
}

/* Общие стили для выпадающего меню */
.catalog-menu {
    display: none; /* Скрыто по умолчанию */
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 1rem; /* Добавляем отступы для контента */
    z-index: 1000;
    width: 60vw; /* 60% ширины экрана */
    left: 0;
    top: 100%;
    border-radius: 4px;
    overflow: hidden;
}

/* Сетка категорий в каталоге */
.catalog-grid {
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);*/ /* Три фиксированные колонки */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Адаптивная сетка */
    gap: 20px; /* Расстояние между блоками */
}

@media (max-width: 768px) {
    .catalog-menu {
        min-width: 100vw; /* Меню занимает всю ширину экрана */
        padding: 0.5rem; /* Уменьшаем отступы */
    }

    .catalog-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Уменьшаем ширину колонок */
    }
}

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

/* Категория в каталоге */
.catalog-category {
    display: flex;
    align-items: flex-start;
    gap: 15px; /* Расстояние между иконкой и текстом */
    /*flex-direction: column;*/
    /*width: 220px;*/
    /*width: 100%;*/
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .category-header h6 {
        margin: 0; /* Убираем отступы заголовка */
        font-size: 16px;
        font-weight: bold;
    }

.text-wrapper {
    flex: 1; /* Текст занимает оставшееся место */
}


.category-icon {
    font-size: 30px;
    margin-right: 10px;
    color: #e9b793; /*#e56b13;*/
}

.icon-wrapper {
    display: flex; /* Убедимся, что иконка центрируется внутри блока */
    align-items: center;
    justify-content: center;
    min-width: 50px; /* Минимальная ширина для иконки */
}

.category-image {
    width: 50px;        /* Подстроено под размер иконки */
    height: 50px;
    object-fit: cover;  /* Обрезка без искажений */
    border-radius: 50%; /* Если нужны круглые изображения */
}

.catalog-category ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /*padding-left: 40px;*/ /* Выравниваем подкатегории под заголовком */
}

    .catalog-category ul li {
        font-size: 14px;
        margin-bottom: 5px;
        color: #666;
    }

/* раскрытие подкатегорий */
.hidden-subcategory {
    display: none; /* Скрываем подкатегории по умолчанию */
}

.show-more {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #a7a7a7;
    cursor: pointer;
    text-decoration: none;
}

    .show-more:hover {
        text-decoration: underline;
        color: #828181;
    }


/* Прокрутка, если контент превышает доступное пространство */
.catalog-menu {
    max-height: 90vh;
    overflow-y: auto;
}

/* Показ меню при открытии */
.dropdown.show .catalog-menu {
    display: block;
}



/* Большой баннер с текстом */
.banner {
    position: relative;
    overflow: hidden;
    height: 400px; /* Высота фиксированная */
}

    .banner img {
        object-fit: cover;
        height: 100%;
    }

.banner-text {
    width: 33%;
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

    .banner-text h2 {
        font-size: 2rem; /* Размер заголовка */
        margin-bottom: 0.5rem;
    }

.banner-subtitle {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.banner-rotating-text {
    font-size: 1rem;
    font-weight: 300;
    transition: opacity 1s ease; /* Плавное появление текста */
}

    .banner-rotating-text span {
        font-family: "Georgia", serif;
        font-style: italic;
        font-size: 1.2rem;
        display: none;
        transition: opacity 1s ease;
    }

        .banner-rotating-text span:first-child {
            display: inline;
        }

@media (max-width: 768px) {
    .banner-text {
        width: 100%; /* Растягиваем текстовый блок на всю ширину */
        top: auto; /* Сбрасываем позиционирование сверху */
        bottom: 0; /* Закрепляем внизу */
        transform: none; /* Убираем трансформацию */
        padding: 10px 20px; /* Добавляем отступы */
        background: rgba(0, 0, 0, 0.3); /* Прозрачный фон */
        text-align: center; /* Центрируем текст */
        border-radius: 0;
    }

        .banner-text h2 {
            font-size: 1.5rem; /* Уменьшаем размер заголовка */
        }

    .banner-subtitle {
        font-size: 1rem; /* Уменьшаем размер подзаголовка */
    }

    .banner-rotating-text {
        font-size: 0.9rem; /* Уменьшаем размер строки */
        margin-bottom: 0;
    }
}


/********** секции с карточками ************/
.section {
    padding: 20px 15px;
}

    /* чередуем задний фон секций */
    .section:nth-child(even) {
        background-color: #f5efe9;
    }

    .section:nth-child(odd) {
        background-color: #fff;
    }

    .section .container {
        padding-left: 15px;
        padding-right: 15px;
    }


.product-card {
    position: relative;
    transition: box-shadow 0.2s ease-in-out;
    min-height: 350px;
    max-height: 451px;
    border-radius: 10px;
    min-width: 250px;
    max-width: 250px;
    margin-bottom: 5px;
}

    .product-card:hover {
        box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
    }

    .product-card .card-body {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .product-card .card-footer {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #fff;
        border-top: none;
    }

    .product-card .fw-bold {
        white-space: nowrap;
    }

    .product-card small, .product-rating small {
        font-size: 0.7rem;
        color: #858585;
    }

.old-price {
    /*margin: 0 10px;*/
    padding: 3px 5px;
    color: #858585;
    background-color: #e9ecef;
    font-size: 0.8rem;
    border-radius: 4px;
    text-transform: unset;    
    text-align: center;
    position: relative;
    display: inline-block;
}

    .old-price::before {
        content: '';
        position: absolute;
        top: 45%;
        left: 10%;
        width: 80%;
        height: 2px; /* Толщина линии */
        background-color: #e56b13; /* Цвет линии */
        transform: rotate(-10deg); /* Угол наклона линии */
    }

.product-images {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
}

    .product-images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.product-title {
    cursor: pointer;
}

@media (max-width: 768px) {
    .product-card {
        min-height: 250px;
        max-height: 350px;
        /*        min-width: 155px;
        max-width: 155px;*/
        min-width: 47%;
        max-width: 47%;
        font-family: "Roboto Condensed", sans-serif !important;
    }

        .product-card:hover {
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
        }

        .product-card .card-body {
            padding-top: 0.75rem;
            padding-bottom: 0.2rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .product-card .card-footer {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            padding-top: 0.2rem;
        }

        .product-card h6 {
            font-size: 0.9rem;
        }

    .product-images {
        height: 155px;
    }

    .old-price {
        font-size: 0.86rem;
    }
}

/* эмблемки на карточки */
.badge-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

    .badge-overlay span {
        margin-right: 5px;
    }


/* заготовка на будущее для кнопочки избранного */
.btn-heart {
    border: none; /* Убираем границу */
    background: transparent; /* Убираем фон */
    color: #6c757d; /* Серый цвет для иконки */
    transition: color 0.3s ease; /* Плавный переход цвета */
}

    .btn-heart:hover,
    .btn-heart:focus {
        color: red; /* Красный цвет при наведении или фокусе */
    }

    .btn-heart .bi-heart-fill {
        display: none; /* Изначально скрываем заполненную иконку */
    }

    .btn-heart:hover .bi-heart {
        display: none; /* Скрываем обычную иконку при наведении */
    }

    .btn-heart:hover .bi-heart-fill {
        display: inline; /* Показываем заполненную иконку при наведении */
    }


/* Расположение карточек на странице и прокрутка на мобильных устройствах */
/* Стандартный перенос */
.flex-scroll {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* с прокруткой у мобильных */
.horizontal-scroll {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; /* Позволяет переносить элементы на новую строку */
}

    .horizontal-scroll::-webkit-scrollbar {
        /*height: 8px;*/
        display: none;
    }

    .horizontal-scroll::-webkit-scrollbar-thumb {
        background-color: #dedede;
        border-radius: 4px;
    }

    .horizontal-scroll::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

@media (max-width: 768px) {
    .horizontal-scroll {
        flex-wrap: nowrap; /* Убирает перенос для маленьких экранов */
        overflow-x: auto;
    }

        .horizontal-scroll::-webkit-scrollbar {
            height: 4px;
            display: block;
        }
}


/* Текст и картинка для ананоса статьи */
/*.preview-image {
    width: 200px;
    height: 150px;
    overflow: hidden;    Скрыть части изображения, выходящие за границы position: relative;
}*/
.preview-image img {
    width: 160px;
    height: 120px;
    object-fit: cover;
    object-position: bottom; /* Смещение обрезки */
    margin: 5px 0;
}

.preview-article {
    margin: 5px 0;
}

    .preview-article p {
        font-style: italic;
        font-family: "Georgia", serif;
        font-size: 0.85rem;
        margin-bottom: 0px;
    }

/********** футер страницы ************/

.footer {
    background-color: #11463c;
    margin-top: 30px;
    padding: 40px 20px;
    color: #dddbc6;
    font-size: 14px;
    border-top: 1px solid #ddd;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column {
    flex: 1 1 220px; /* Минимальная ширина каждой колонки */
    margin: 0 10px;
}

    .footer-column h4, .footer-column .h4 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #fff;
    }

    .footer-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .footer-column ul li {
            margin-bottom: 8px;
        }

            .footer-column ul li a {
                text-decoration: none;
                color: #c8c8c8;
                transition: color 0.3s;
            }

                .footer-column ul li a:hover {
                    color: #e56b13;
                }

    .footer-column p {
        margin: 5px 0;
    }

    .footer-column a {
        color: #c8c8c8;
    }

        .footer-column a:hover {
            color: #e56b13;
        }

.font18 {
    margin-right: 0.5rem;
    font-size: 18px;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

    .social-links li a {
        display: flex;
        align-items: center;
        text-decoration: none;
        /*color: #007bff;*/
    }

        .social-links li a i {
            margin-right: 8px;
            font-size: 18px;
        }

        .social-links li a:hover {
            color: #e56b13;
        }


/********** окно с подробностями товара ************/

.image-viewer-container {
    flex: 1 0 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-viewer {
    width: 100%;
    max-height: 550px;
    max-width: 550px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    border-radius: 10px;
}

    .image-viewer .image-track {
        display: flex;
        transition: transform 0.3s ease;
    }

    .image-viewer img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: inline-block;
    }

.preview-thumbnails {
    display: flex;
    gap: 0.5rem;
    /*justify-content: center;*/ /* !!! При центрировании вылезает глюк с левой превьюшкой */
    margin-top: 1rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none; /* Firefox */
    scroll-behavior: smooth;
    padding: 2px;
}

    .preview-thumbnails::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .preview-thumbnails img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 10px;
    }

        .preview-thumbnails img.active {
            /*border-color: #e56b13;*/
            outline: 1px solid #198754; /* Подсветка активной миниатюры */
        }

.product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

    .product-details ul {
        list-style-type: none;
        padding-left: 0;
    }

    .product-details .articul {
        max-width: 120px;
    }


@media (max-width: 768px) {
    .modal-body {
        padding: 0;
        scrollbar-width: none;
    }

        .modal-body::-webkit-scrollbar {
            display: none;
        }

    .image-viewer {
        border-radius: 0;
    }

    .product-details {
        gap: 0.7rem;
        padding: 1rem 0;
    }

    .fixed-footer {
    }

    /* ??? */
    .image-viewer-container, .product-details {
        flex: 0 0 auto;
        width: 100%;
    }
}

.fixed-footer {
    position: sticky;
    bottom: 0;
    background-color: white;
    z-index: 1000;
    padding: 1rem;
    display: flex;
    justify-content: end;
    gap: 1rem;
    align-items: center;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* поверх изображения */
.btn-spec {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 1);
    color: black;
    border-radius: 50%;
    z-index: 1100;
    line-height: 0.5rem;
    display: flex;
}

/* стили для анимации изменения количества товаров */
.quantity-input {
    display: flex;
    align-items: center;
    /*gap: 0.5rem;*/
}

    .quantity-input input {
        width: 50px;
        text-align: center;
        transition: transform 0.2s ease, color 0.2s ease;
    }

        .quantity-input input.animate {
            transform: scale(1.2);
            color: #28a745; /* Зеленый цвет для визуальной обратной связи */
            background-color: #f2fff5
        }

.total-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/********** страница корзины ************/

.cart-page {
    padding-bottom: 7rem;
}

    .cart-page h4 {
        background-color: #f5efe9;
        padding: .2rem .5rem;
        margin: 2rem 0 1rem 0;
    }

.cart-card {
    /*background-color: #f1f8f2;*/
}

.cart-img {
    height: 80px;
    width: 80px;
    border-radius: 4px;
}

.cart-row-sum {
    color: #5c6364;
    font-weight:500;
}

.quantity-input-block {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.product-card-offer {
    max-height: 175px;
    min-height: 175px;
    min-width: 300px;
    max-width: 350px;
    position: relative;
    transition: box-shadow 0.2s ease-in-out;
    border-radius: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
}

    .product-card-offer .card-title {
        display: -webkit-box;       /* Включить поддержку для многорядного текста */
        -webkit-line-clamp: 5;      /* Ограничить количество строк */
        -webkit-box-orient: vertical; /* Вертикальное расположение строк */
        overflow: hidden;           /* Обрезать текст */
        text-overflow: ellipsis;    /* Добавить многоточие */
        max-width: 100%;            /* Ширина элемента */
    }

    .product-card-offer .card-body {
        display: flex;
        flex-direction: column; /* Расположить элементы вертикально */
        justify-content: space-between; /* Для распределения пространства */
    }

.product-offer-images {
    position: relative;
    min-width: 175px;
    overflow: hidden;
    border-radius: 10px 0 0 10px;
}

    .product-offer-images img {
        width: 175px;
        height: 175px;
        object-fit: cover;
    }

.offer-footer {
    margin-top: auto; /* Отодвигает блок вниз */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Вертикальное центрирование */
}


/********** страница заказа ************/

.bg-light-green {
    background-color: #f1f8f2;
}

.bg-light-orange {
    background-color: #f7e9d6;
}

#map {
    width: 100%;
    height: 400px;
}

@media (max-width: 768px) {

    .product-card-offer {
        max-height: 100px;
        min-height: 100px;
        min-width: 200px;
        max-width: 2250px;
    }

        .product-card-offer .card-title {
            font-size: 0.8rem;
            -webkit-line-clamp: 3; /* Ограничить количество строк */
            text-decoration: none;
        }

        .product-card-offer .price {
            font-size: 0.9rem;
        }

    .product-offer-images {
        min-width: 100px;
    }

        .product-offer-images img {
            width: 100px;
            height: 100px;
        }

    .product-card-offer .card-body {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    /* карта */
    #map {
        height: 300px;
    }

    .text-map {
        font-size: 0.7rem;
        color: #b4b4b4;
    }
}

/********** список заказов ************/

.order-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

    .order-row:hover {
        background-color: #f8f9fa;
    }

.order-details {
    background-color: #f8f9fa;
}

    .order-details table {
        margin-bottom: 1rem;
    }