/* Глобальні змінні теми ECO */
    :root {
        --eco-darkest: #0B0F19; /* Глибокий темно-синій, майже чорний */
        --eco-dark-surface: #1A202C; /* Темна поверхня для карток, модалок */
        --eco-medium-surface: #2D3748; /* Середньо-темна поверхня */
        --eco-light-surface: #4A5568; /* Світліша темна поверхня для акцентів */

        --eco-lime-green: #78EB4A; /* <-- НОВИЙ ЗЕЛЕНИЙ КОЛІР */
        --eco-lime-green-darker: #56bb2a; /* Темніший лайм для ховерів */
        --eco-electric-blue: #3B82F6; /* Електричний синій */
        --eco-electric-blue-darker: #2563EB; /* Темніший синій для ховерів */
        --eco-neon-cyan: #22D3EE; /* Неоновий блакитний */
        --eco-darkest--transparent: rgba(11, 15, 25, 0.8); /* Прозорий фон для offcanvas */

        --eco-text-primary: #E2E8F0; /* Основний світлий текст */
        --eco-text-secondary: #CBD5E0; /* Другорядний світлий текст */
        --eco-text-muted: #94A3B8; /* Приглушений текст */

        --eco-border-color: rgba(255, 255, 255, 0.1); /* Колір для розділювачів */
        --eco-border-hover: rgba(120, 235, 74, 0.5); /* Колір рамки при ховері */

        --eco-shadow-sm: 0 2px 10px rgba(0,0,0,0.3);
        --eco-shadow-md: 0 5px 20px rgba(0,0,0,0.4);
        --eco-shadow-lg: 0 10px 35px rgba(0,0,0,0.5);

        --eco-radius-sm: 0.5rem; /* 8px */
        --eco-radius-md: 0.75rem; /* 12px */
        --eco-radius-lg: 1rem; /* 16px */
        --eco-radius-xl: 1.5rem; /* 24px */
        --eco-radius-full: 9999px; /* Для круглих елементів */

        --eco-font-main: 'Inter', sans-serif;
        --eco-font-marios: 'Marios Black Sans Serif', sans-serif; /* Новий шрифт */
        accent-color: var(--eco-lime-green); /* Для чекбоксів, радіо і т.д. */
    }

    body {
        font-family: var(--eco-font-main);
        background-color: var(--eco-darkest);
        background-image:
                radial-gradient(circle at 10% 20%, rgba(34, 211, 238, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 90% 80%, rgba(120, 235, 74, 0.08) 0%, transparent 30%);
        color: var(--eco-text-primary);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--eco-text-primary);
        font-weight: 700;
    }

    a {
        color: var(--eco-electric-blue);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    a:hover {
        color: var(--eco-neon-cyan);
    }


    .bg-eco-dark-surface { background-color: var(--eco-dark-surface) !important; }
    .bg-eco-medium-surface { background-color: var(--eco-medium-surface) !important; }
    .text-eco-lime { color: var(--eco-lime-green) !important; }
    .text-eco-blue { color: var(--eco-electric-blue) !important; }
    .text-eco-cyan { color: var(--eco-neon-cyan) !important; }
    .text-eco-muted { color: var(--eco-text-muted) !important; }

    .btn {
        border-radius: var(--eco-radius-full); /* Закруглення всіх кнопок */
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        letter-spacing: 0.5px;
    }
    .btn-lg {
        padding: 0.85rem 1.75rem;
        font-size: 1.1rem;
    }

    .btn-eco-lime {
        background: linear-gradient(135deg, var(--eco-lime-green), var(--eco-lime-green-darker));
        color: var(--eco-darkest);
        box-shadow: 0 4px 15px rgba(120, 235, 74, 0.3), 0 0 5px var(--eco-lime-green) inset;
    }
    .btn-eco-lime:hover {
        background: linear-gradient(135deg, var(--eco-lime-green-darker), var(--eco-lime-green));
        color: var(--eco-darkest);
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 6px 20px rgba(120, 235, 74, 0.5), 0 0 8px var(--eco-lime-green) inset;
    }

    .btn-eco-blue {
        background: linear-gradient(135deg, var(--eco-electric-blue), var(--eco-electric-blue-darker));
        color: var(--eco-text-primary);
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3), 0 0 5px var(--eco-electric-blue) inset;
    }
    .btn-eco-blue:hover {
        background: linear-gradient(135deg, var(--eco-electric-blue-darker), var(--eco-electric-blue));
        color: var(--eco-text-primary);
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5), 0 0 8px var(--eco-electric-blue) inset;
    }

    .btn-outline-light-eco {
        border: 2px solid var(--eco-border-color);
        color: var(--eco-text-secondary);
    }
    .btn-outline-light-eco:hover {
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--eco-text-primary);
        border-color: var(--eco-neon-cyan);
        box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    }

    /* --- Додані/змінені стилі для фільтра та карток --- */

    /* Контейнер елементів керування каталогом */
    .catalog-controls {
    }

    /* Кнопка перемикання фільтра - рівний розмір */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center; /* Центрування вмісту кнопки */
        gap: 0.75rem;
        background-color: var(--eco-medium-surface);
        border: 1px solid var(--eco-border-color);
        color: var(--eco-text-primary);
        padding: 0.75rem 1.5rem;
        border-radius: var(--eco-radius-full);
        font-weight: 600;
        box-shadow: var(--eco-shadow-sm);
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        flex-shrink: 0; /* Не дозволяти зменшуватися */
        min-width: 150px; /* Забезпечення мінімальної ширини для однакового розміру */
        height: 50px; /* Фіксована висота */
    }
    .filter-toggle-btn:hover {
        background-color: var(--eco-light-surface);
        color: var(--eco-neon-cyan);
        border-color: var(--eco-neon-cyan);
        box-shadow: var(--eco-shadow-md), 0 0 15px rgba(34, 211, 238, 0.4);
        transform: translateY(-2px);
    }
    .filter-toggle-btn .filter-icon { /* Стиль для SVG іконки */
        width: 1.5em;
        height: 1.5em;
        /* Використовуємо `currentColor` щоб SVG успадковував колір тексту кнопки */
        fill: currentColor;
        transition: fill 0.3s ease, filter 0.3s ease; /* Додаємо перехід для фільтра */
    }
    .filter-toggle-btn:hover .filter-icon {
        fill: var(--eco-neon-cyan); /* Зміна кольору іконки при ховері */
        filter: drop-shadow(0 0 5px var(--eco-neon-cyan)); /* Неонова тінь для іконки */
    }
    /* Стиль для path всередині SVG, щоб він був кольоровим */
    .filter-toggle-btn .filter-icon path {
        fill: currentColor; /* Застосовуємо колір батька */
    }


    /* Кнопка очищення фільтрів - рівний розмір */
    .catalog-controls .btn-secondary {
        background-color: var(--eco-medium-surface);
        border: 1px solid var(--eco-border-color);
        color: var(--eco-text-secondary);
        border-radius: var(--eco-radius-full);
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        box-shadow: var(--eco-shadow-sm);
        flex-shrink: 0; /* Не дозволяти зменшуватися */
        min-width: 150px; /* Забезпечення мінімальної ширини для однакового розміру */
        height: 50px; /* Фіксована висота */
    }
    .catalog-controls .btn-secondary:hover {
        background-color: var(--eco-light-surface);
        border-color: var(--eco-lime-green);
        color: var(--eco-lime-green);
        box-shadow: var(--eco-shadow-md), 0 0 15px rgba(120, 235, 74, 0.4);
        transform: translateY(-2px);
    }

    /* Стилі для випадаючого списку сортування (global_order) */
    .catalog-controls .global-order {
        height: 50px; /* Фіксована висота, як і у кнопок */
        background-color: var(--eco-medium-surface);
        border: 1px solid var(--eco-border-color);
        border-radius: var(--eco-radius-full);
        color: var(--eco-text-primary);
        padding: 0.75rem 1.5rem 0.75rem .75rem;
        font-weight: 600;
        box-shadow: var(--eco-shadow-sm);
        transition: all 0.3s ease;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378EB4A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Зелена стрілка */
        background-repeat: no-repeat;
        background-position: right .5rem center;
        background-size: 16px 12px;
        max-width: auto; /* Обмеження ширини для естетики */
        text-align: center; /* Центрування тексту */
        text-align-last: center; /* Для IE/Edge */
    }
    .catalog-controls .global-order:focus {
        background-color: var(--eco-dark-surface);
        border-color: var(--eco-electric-blue);
        box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25), inset 0 1px 3px rgba(0,0,0,0.5);
        outline: none;
    }
    .select form-select{
        background-color: var(--eco-dark-surface);
        border-color: var(--eco-electric-blue);
        box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25), inset 0 1px 3px rgba(0,0,0,0.5);
        outline: none;
    }
    .catalog-controls .form-select-modern option {
        background-color: var(--eco-dark-surface); /* Фон для опцій у випадаючому списку */
        color: var(--eco-text-primary);
    }

    /* Offcanvas бічна панель фільтра */
    .offcanvas-filter {
        background-color: var(--eco-darkest--transparent) !important;
        border-left: 1px solid var(--eco-border-color);
        color: var(--eco-text-primary);
        box-shadow: var(--eco-shadow-lg);
        backdrop-filter: blur(5px);
    }
    .offcanvas-filter .offcanvas-header {
        border-bottom: 1px solid var(--eco-border-color);
        padding: 1.5rem;
    }
    .offcanvas-filter .offcanvas-title {
        color: var(--eco-lime-green);
        font-weight: 700;
        font-size: 1.8rem;
        font-family: var(--eco-font-marios);
        text-shadow: 0 0 10px var(--eco-lime-green);
    }
    .offcanvas-filter .btn-close {
        filter: invert(1);
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    .offcanvas-filter .btn-close:hover {
        opacity: 1;
        transform: scale(1.1);
    }
    .offcanvas-filter .form-label, .offcanvas-filter label {
        color: var(--eco-text-secondary);
        font-weight: 500;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    /* Поля введення фільтра (загальні) в offcanvas, тепер з однаковими стилями */
    .offcanvas-filter .form-control,
    .offcanvas-filter .form-select,
    .offcanvas-filter .select2-container--default .select2-selection--single {
        background-color: var(--eco-medium-surface); /* Фон інпутів в offcanvas */
        color: var(--eco-text-primary); /* Колір тексту в інпутах */
        border: 1px solid var(--eco-border-color);
        border-radius: var(--eco-radius-md);
        padding: 0.6rem 1rem;
        height: auto;
        min-height: calc(1.5em + 1.2rem + 2px); /* Забезпечує мінімальну висоту */
        transition: all 0.3s ease;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    }
    .offcanvas-filter .form-control:focus,
    .offcanvas-filter .form-select:focus,
    .offcanvas-filter .select2-container--default .select2-selection--single:focus-within {
        background-color: var(--eco-dark-surface);
        border-color: var(--eco-electric-blue);
        box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25), inset 0 1px 3px rgba(0,0,0,0.5);
        outline: none;
    }

    /* Спеціальна стрілка для form-select в offcanvas */
    .offcanvas-filter .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378EB4A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 16px 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .form-select{
        background-color: var(--eco-medium-surface);
        border: 1px solid var(--eco-border-color);
        color: var(--eco-text-secondary);
        border-radius: var(--eco-radius-full);
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        box-shadow: var(--eco-shadow-sm);
        flex-shrink: 0;
        /*min-width: 150px;*/
        /*height: 50px;*/
        /*margin-top: 10px;*/
    }
        /* Стиль для опцій у випадаючому списку Select2 */
    .select2-container--default .select2-results__option {
        background-color: var(--eco-dark-surface); /* Фон для опцій */
        color: var(--eco-text-primary); /* Колір тексту для опцій */
        padding: 0.75rem 1rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
	/*Крестик - удалить выбор*/
	.select2-container--default .select2-selection--single .select2-selection__clear {
		padding-left: .5rem !important;
		color: #f43f5e !important;
		font-weight: 1000 !important;
		font-size: 1.2rem !important;
		height: 1rem !important;
		text-shadow: var(--eco-shadow-md), 0 0 3px #f43f5e;
	}



    /* Select2 специфічні стилі для узгодженості в offcanvas */
    .offcanvas-filter .select2-container--default .select2-selection--single {
        background-color: var(--eco-medium-surface);
        border: 1px solid var(--eco-border-color);
        border-radius: var(--eco-radius-md);
        height: auto;
        min-height: calc(1.5em + 1.2rem + 2px); /* Забезпечує мінімальну висоту */
        display: flex;
        align-items: center;
        padding: 0.6rem 1rem;
    }
    .offcanvas-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--eco-text-primary);
        padding: 0;
        line-height: inherit;
    }
    .offcanvas-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: calc(1.5em + 1.2rem + 2px);
        top: 0;
        right: 1rem;
        display: flex;
        align-items: center;
    }
    .offcanvas-filter .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: var(--eco-lime-green) transparent transparent transparent;
        border-width: 6px 4px 0 4px;
        margin-left: 0;
        margin-top: 2px;
    }
    .offcanvas-filter .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent var(--eco-lime-green) transparent;
        border-width: 0 4px 6px 4px;
    }

    /* Результати випадаючого списку Select2 (для offcanvas та global_order) */
    .select2-container--default .select2-results__option {
        background-color: var(--eco-dark-surface);
        color: var(--eco-text-primary);
        padding: 0.75rem 1rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: var(--eco-medium-surface) !important;
        color: var(--eco-neon-cyan) !important;
    }
    .select2-container--default .select2-results__option--selected {
        background-color: var(--eco-light-surface) !important;
        color: var(--eco-lime-green) !important;
        font-weight: 600;
    }
    .select2-container--default .select2-dropdown {
        background-color: var(--eco-darkest);
        border: 1px solid var(--eco-border-color);
        border-radius: var(--eco-radius-md);
        box-shadow: var(--eco-shadow-lg);
        overflow: hidden;
    }

    .select2-search--dropdown .select2-search__field {
        background-color: var(--eco-medium-surface) !important;
        color: var(--eco-text-primary) !important;
        border: 1px solid var(--eco-border-color) !important;
        border-radius: var(--eco-radius-sm) !important;
        padding: 0.5rem 0.75rem !important;
    }

    .offcanvas-filter .form-check-label {
        font-size: 1rem;
        color: var(--eco-text-secondary);
    }
    .offcanvas-filter .form-group, .offcanvas-filter .mb-3 {
        margin-bottom: 1rem !important;
    }


    /* Контейнер картки товару для рівної висоти */
    .row.align-items-start.justify-content-center {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    /* Картка товару */
    @keyframes pulse-neon-border {
        0%, 100% { border-color: var(--eco-neon-cyan); box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); }
        33% { border-color: var(--eco-lime-green); box-shadow: 0 0 10px rgba(120, 235, 74, 0.5); }
        66% { border-color: var(--eco-electric-blue); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
    }
    .product-card {
        background-color: var(--eco-dark-surface);
        border: 1px solid var(--eco-border-color);
        border-radius: var(--eco-radius-lg);
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        box-shadow: var(--eco-shadow-md);
        display: flex;
        flex-direction: column;
        animation: pulse-neon-border 8s infinite linear;
        padding: 0 !important;
        margin: 0.5rem !important;
        width: 100%;
        max-width: 15.5rem;
        height: 100%;
        overflow: hidden;
    }
    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--eco-shadow-lg), 0 0 25px rgba(34, 211, 238, 0.7);
        border-color: var(--eco-neon-cyan);
        animation-play-state: paused;
    }
    .product-card .img-container {
        position: relative;
    }
    .product-card .img-fluid {
        border-top-left-radius: var(--eco-radius-lg);
        border-top-right-radius: var(--eco-radius-lg);
        border: none;
        padding: 0;
        aspect-ratio: 1/1;
        object-fit: cover;
    }
    .product-card .badge {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 10;
        font-weight: 600;
        border-radius: var(--eco-radius-full) !important;
        padding: 0.4em 0.8em;
    }
    .product-card .badge.text-bg-success {
        background-color: var(--eco-lime-green) !important;
        color: var(--eco-darkest) !important;
    }
    .product-card .badge.text-bg-warning {
        background-color: var(--eco-electric-blue) !important;
        color: var(--eco-text-primary) !important;
    }
    .product-card .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 1.2rem;
    }
    .product-card .card-title {
        color: var(--eco-text-primary);
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.4;
        flex-grow: 1;
        margin-bottom: 0.75rem;
    }
    .product-card .card-title a {
        color: inherit;
        text-decoration: none;
    }
    .product-card .card-title a:hover {
        color: var(--eco-lime-green);
    }
    .product-card .card-text {
        color: var(--eco-text-secondary);
        font-size: 1.05rem;
    }
    .product-card .card-text .price-main {
        color: var(--eco-lime-green);
        font-weight: 800;
        font-size: 1.3rem;
    }
    .product-card .card-text .price-old {
        color: var(--eco-neon-cyan);
        text-decoration: line-through;
        margin-left: 0.75rem;
        font-size: 0.9rem;
    }
    .product-card .card-text .details-small {
        display: block;
        font-size: 0.85rem;
        color: var(--eco-text-muted);
        margin-top: 0.5rem;
    }


    /* Пагінація */
    .pagination {
        --bs-pagination-color: var(--eco-text-secondary);
        --bs-pagination-bg: var(--eco-dark-surface);
        --bs-pagination-border-color: var(--eco-border-color);
        --bs-pagination-hover-color: var(--eco-text-primary);
        --bs-pagination-hover-bg: var(--eco-medium-surface);
        --bs-pagination-hover-border-color: var(--eco-neon-cyan);
        --bs-pagination-focus-color: var(--eco-text-primary);
        --bs-pagination-focus-bg: var(--eco-medium-surface);
        --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(34, 211, 238, 0.3);
        --bs-pagination-active-color: var(--eco-darkest);
        --bs-pagination-active-bg: var(--eco-lime-green);
        --bs-pagination-active-border-color: var(--eco-lime-green);
        --bs-pagination-disabled-color: var(--eco-light-surface);
        --bs-pagination-disabled-bg: rgba(45, 55, 72, 0.5);
        --bs-pagination-disabled-border-color: var(--eco-border-color);
    }
    .pagination .page-link {
        border-radius: var(--eco-radius-md);
        margin: 0 0.35rem;
        padding: 0.6rem 0.9rem;
    }


    /* Стилі модального вікна */
    .modal-content-custom {
        background-color: var(--eco-dark-surface);
        border: 1px solid var(--eco-border-color);
        border-radius: var(--eco-radius-lg);
        box-shadow: var(--eco-shadow-lg);
    }
    .modal-header-custom {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--eco-border-color);
        padding: 1.5rem;
    }
    .modal-header-custom .modal-title {
        color: var(--eco-text-primary);
        font-family: var(--eco-font-marios);
        font-size: 1.8rem;
    }
    .modal-header-custom .btn-close {
        filter: invert(1);
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
    .modal-header-custom .btn-close:hover {
        opacity: 1;
        transform: scale(1.1);
    }
    .modal-body {
        padding: 1.5rem;
    }
    .modal-footer-custom {
        border-top: 1px solid var(--eco-border-color);
        padding: 1.5rem;
    }

    .modal-content-custom .table {
        --bs-table-color: var(--eco-text-secondary);
        --bs-table-bg: transparent;
        --bs-table-border-color: var(--eco-border-color);
        --bs-table-striped-color: var(--eco-text-primary);
        --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
        --bs-table-hover-color: var(--eco-text-primary);
        --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    }
    .modal-content-custom .table th, .modal-content-custom .table td {
        padding: 0 0;
    }
    .modal-content-custom .form-floating {
        color: var(--eco-text-muted);
    }
    .modal-content-custom .form-control:disabled {
        background-color: transparent;
        border: none;
        color: var(--eco-text-primary);
        padding-left: 0.75rem;
    }
    .modal-content-custom .form-floating > label {
        padding-left: 0.75rem;
    }
    .modal-content-custom .form-check-input:disabled {
        opacity: 1;
        background-color: var(--eco-medium-surface);
        border-color: var(--eco-border-color);
    }
    .modal-content-custom .form-check-input:checked {
        background-color: var(--eco-lime-green);
        border-color: var(--eco-lime-green);
    }
    .modal-content-custom .bd-callout {
        padding: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--eco-border-color);
        border-left-width: .4rem;
        border-radius: var(--eco-radius-md);
        border-left-color: var(--eco-neon-cyan);
        box-shadow: var(--eco-shadow-sm);
    }
    .modal-content-custom .modal-footer .btn {
        border-radius: var(--eco-radius-full);
    }
    .modal-title-date{
        width: 100%;
        display: flex;
        justify-content: start;
    }
    .one-modal-title.fs-5{
        width: 100%;
        display: flex;
        justify-content: start;
    }
    #div_id_global_order {
            width: auto;
            margin-bottom: 0 !important;*/ /* Видалити нижній відступ, якщо є */
    }

    /* --- Коригування макету для мобільних пристроїв --- */
    @media (max-width: 767.98px) { /* Застосовується для пристроїв менших за 768px */
        .catalog-controls {
            flex-wrap: wrap; /* Дозволяє елементам переноситися на новий рядок */
            padding: 0.75rem 0rem; /* Зменшити загальний відступ */
            margin-bottom: 1.5rem; /* Трохи менший відступ знизу */
            gap: 0; /* Менший проміжок між елементами */
            justify-content: center; /* Центрувати елементи */
        }

        .catalog-controls .col-md-auto {
            width: auto; /* Дозволити ширині адаптуватися до вмісту */
            flex-grow: 1; /* Дозволяє їм займати доступний простір */
            display: flex; /* Зробити flex-контейнером для центрування вмісту */
            justify-content: center; /* Центрувати вміст всередині col */
            padding: 0.25rem; /* Зменшити внутрішній відступ */
        }

        .filter-toggle-btn,
        .catalog-controls .btn-secondary,
        .catalog-controls .form-select-modern {
            width: auto; /* Зробити кнопки та селектор повною шириною в межах col-md-auto */
            min-width: unset; /* Видалити фіксовану мінімальну ширину на малих екранах */
            height: 40px; /* Трохи менша фіксована висота для кнопок */
            padding: 0.5rem 1rem; /* Зменшити відступи для менших кнопок */
            font-size: 0.7rem; /* Трохи менший розмір шрифту */
        }

        .catalog-controls .global-order {
            background-position: right 0.75rem center; /* Налаштувати позицію стрілки */
            /*padding-right: 2rem;*/ /* Забезпечити простір для стрілки */
            text-align: center; /* Центрування тексту */
            text-align-last: center; /* Для IE/Edge */
			height: 40px;
        }
        .form-select {
            height: 40px;
            /*margin-top: 0;*/
            padding: 10px;
            font-size: 0.7rem;
			<!-- width: 150px; -->
        }
        .modal-header-custom{
            grid-auto-flow: dense;
        }
    }

    /* Запобігання "стрибкам" при відсутності оголошень */
    .container-xxl.pt-2 {
        /* Мінімальна висота, щоб вміст не "стрибав".
           Потрібно замінити 0px на висоту вашого заголовка та/або нижнього колонтитула.
           Наприклад, якщо у вас є фіксований хедер висотою 60px, змініть --header-height на 60px. */
        <!-- min-height: calc(100vh - var(--header-height, 0px) - var(--footer-height, 0px) - 50px); -->
        display: flex;
        flex-direction: column;
    }

    /* Дозволяє сітці продуктів займати доступний простір, штовхаючи пагінацію вниз */
    .row.row-cols-2.row-cols-sm-3.row-cols-lg-4.row-cols-xl-5.g-4.justify-content-center {
        flex-grow: 1;
        align-content: flex-start; /* Залишає рядки у верхній частині сітки */
    }

    /* Вертикальне центрування тексту "Оголошень не знайдено" */
    .no-found { /* Змінено селектор з h1 на клас .no-found */
        display: flex; /* Перетворити на flex-контейнер */
        align-items: center; /* Центрувати по вертикалі */
        justify-content: center; /* Центрувати по горизонталі */
        min-height: 30vh; /* Надати достатньо висоти для центрування; налаштуйте за потреби */
        margin-top: 2rem; /* Додати верхній відступ від елементів керування */
        margin-bottom: 2rem; /* Додати нижній відступ від пагінації */
        font-size: 1.8rem; /* Зробити текст трохи більшим для кращого сприйняття */
        text-shadow: 0 0 15px rgba(34, 211, 238, 0.7); /* Додати неонову тінь для ефекту */
        /* Додатково: переконайтеся, що h1 не має конфліктних margin-bottom */
        margin-bottom: 0 !important;
    }
	/*Выбор глобальной сортировки*/
	.global-order {
		transition: all 0.3s ease;
	}
	.global-order:hover{
        background-color: var(--eco-light-surface);
        color: var(--eco-neon-cyan);
        border-color: var(--eco-neon-cyan);
        box-shadow: var(--eco-shadow-md), 0 0 15px rgba(34, 211, 238, 0.4);
        transform: translateY(-2px);
    }
	/*Иконка увеличения фото обьявления*/
	.zoom-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 48px;
		color: white;
		background: rgba(0, 0, 0, 0.1);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}
	/* Показываем иконку при наведении */
	.carousel-item:hover .zoom-icon {
		opacity: 1;
	}
    .page-title-news {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 800;
        text-shadow: 0 0 20px rgba(163, 230, 53, 0.4);
    }
	.title {
		  /* Стилизация */
		  text-align: center;
		  font-size: 2rem;
		  font-weight: bold;
		  color: var(--eco-lime-green);
		  pointer-events: none; /* Чтобы не мешал кликать по контенту */
		  text-transform: uppercase;
		  white-space: nowrap;
	}
	.eco-hero {
		position: relative;
		overflow: hidden;
		padding: 0px 50px;
		
		margin-top: 0px;
		text-align: center;
		/*background: rgba(255, 255, 255, 0.2); */
		/*backdrop-filter: blur(10px);  Размытие заднего плана */
	}

	.eco-hero-bg {
		position: absolute;
		top: -10%;
		left: 50%;
		/*transform: translate(-50%, -50%);*/
		font-size: 100px;
		font-weight: 900;
		color: var(--eco-medium-surface);
		white-space: nowrap;
		pointer-events: none;
		z-index: 0;
		text-transform: uppercase;
		animation: scrollText 30s alternate infinite;
	}
	@keyframes scrollText {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-60%);
		}
	}
	
	.eco-hero-content {
		position: relative;
		z-index: 1;
		max-width: 800px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		/*align-items: center;*/
		/*justify-content: start;*/
	}

	.eco-hero-content h2 {
		font-size: 30px;
		font-weight: bold;
		margin-bottom: 0rem;
		display: inline-block;
		color: var(--eco-neon-cyan);
		text-transform: uppercase;
		transition: transform 1.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		white-space: nowrap;
		transform: scale(calc(1 + (30 - var(--progress)) * 0.01));
		animation: progress 3s alternate infinite;
	}
	/*
	.eco-hero-content h2:hover {
		transform: translateY(-5px) scale(1.2);
	}
	*/
	.eco-hero-content h3 {
		text-align: center;
		--direction: -1;
		font-style: italic;
		transform: 
			translateX(calc(var(--direction) * 1vw * var(--progress, 0))) 
			scale(calc(1 + (30 - var(--progress)) * 0.002))
			skewX(calc(var(--direction) * -5deg));
		animation: 
			progress 3s alternate infinite,
			flash 3s alternate infinite;
		
		font-weight: calc(300 + (30 - var(--progress)) * 50);
		font-variation-settings: "wght" calc(300 + (30 - var(--progress)) * 50);
		
		filter: blur(calc(50 * 0.02px - (30 - var(--progress)) * 0.02px));
		transition: filter 0.2s ease-out;
	}
	@property --progress {
		inherits: true;
		initial-value: 0;
		syntax: "<number>";
	}
	@keyframes progress {
		from {
			--progress: 30;
		}
		to {
			--progress: 0;
			}
	}
	@keyframes flash {
		0%, 90% { 
			color: inherit; /* Обычный цвет до 90% пути */
			text-shadow: none;
		}
		100% { 
			color: var(--eco-lime-green); /* Вспышка */
			text-shadow: 0 0 15px var(--eco-lime-green); /* Эффект свечения */
		}
	}
	.left {
		--direction: 1 !important;
	}
	.right {
		--direction: -1 !important;
	}
	.eco-hero-content p {
		font-size: 18px;
		color: #555;
		margin-bottom: 0px;
		color: var(--eco-neon-cyan);
	}
	.base-filter-content {
		display: flex;
		background-color: var(--eco-dark-surface);
		position: relative;
		justify-content: space-between;
		border-radius: var(--eco-radius-xl);
		flex-wrap: nowrap;
		overflow: auto;
		align-items: center;
		padding: 1vh .7vh;
		margin: 1vh 0vh 1vh .3vh;
		box-shadow: var(--eco-shadow-md);
		border: 1px solid var(--eco-border-color);
	}