/* Arcane MC / EasyDonate / lullaby-dark
 * Подключить ПОСЛЕ штатных CSS. HTML и JavaScript менять не нужно.
 * Файл меняет компоновку главной страницы, сохраняя оформление темы.
 * Требуется современный браузер с :has().
 */

html:has(#welcome-section) {
    height: 100%;
    overflow: hidden;
}

body:has(#welcome-section) {
    --arcane-gap: clamp(12px, 2vw, 32px);
    /* Текущее фоновое изображение из HTML сайта. */
    --arcane-background: url("https://cdn.easydonate.ru/images/backgrounds/default.jpg");
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(rgba(20, 10, 32, .65), rgba(15, 12, 22, .78)),
                var(--arcane-background) center / cover no-repeat;
}

body:has(#welcome-section) *,
body:has(#welcome-section) *::before,
body:has(#welcome-section) *::after {
    box-sizing: border-box;
}

/* Навигация и компактный футер входят в высоту окна. */
body:has(#welcome-section) > .navbar-main {
    grid-area: 1 / 1;
    position: relative !important;
    inset: auto;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 6px var(--arcane-gap);
}

body:has(#welcome-section) > .navbar-main > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

body:has(#welcome-section) .navbar-brand img {
    height: 30px;
    width: auto;
}

/* Скрываем пункт целиком, включая иконку и отступы. */
body:has(#welcome-section) .navbar-main li:has(> a[href="#help"]),
body:has(#welcome-section) .navbar-main a[href="#help"] {
    display: none !important;
}

/* Это существующая обёртка между navbar и footer. */
body > div:has(> main > #welcome-section) {
    grid-area: 2 / 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

main:has(> #welcome-section) {
    background: transparent !important;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/* Левая панель с названием. Убираем отступы section-xl/pt-6/pb-8. */
#welcome-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
    padding: var(--arcane-gap) !important;
    background: transparent !important;
    border-radius: 0;
}

#welcome-section > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

#welcome-section > .container > .row {
    margin: 0;
}

#welcome-section .shop-title {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

#welcome-section .shop-name {
    margin: 0 !important;
    font-size: clamp(28px, 6.5vw, 112px);
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

#welcome-section > .pattern {
    display: none;
}

/* Фон теперь общий: убираем отдельное затемнение и слой параллакса. */
#welcome-section::before,
#welcome-section::after,
#welcome-section > [id^="jarallax-container"] {
    display: none !important;
}

/* Правая панель. Заголовок, поиск и теги неподвижны. */
#welcome-section + section {
    background: rgba(10, 8, 16, 0.68) !important;
    border-radius: 24px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
    padding: var(--arcane-gap) !important;
}

#welcome-section + section > .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

#welcome-section + section > .container > .d-flex {
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding-bottom: 14px;
}

#welcome-section + section > .container > .d-flex > h2 {
    margin: 0 !important;
    font-size: clamp(20px, 2.4vw, 36px);
}

#welcome-section + section .form-group {
    min-width: 0;
    max-width: 100%;
}

#welcome-section + section input[name="search_name"] {
    min-width: 0;
    font-size: 16px;
}

#shop {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Теги — отдельная строка вне области прокрутки. */
#shop > .filter-button-group {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 0 14px;
}

#shop > .filter-button-group > .filter-button {
    margin: 0 !important;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

#shop > .filter-button-group > .filter-button.active {
    background: var(--accent-color, #8b00ff) !important;
}

/* Прокручивается только внешняя обёртка списка, включая AJAX-обновления. */
#shop > .row {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 8px 76px 0 !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color, #8b00ff) #171717;
}

/* Только внешняя сетка товаров: внутренние row карточек не ломаем.
 * Сбрасываем также inline-координаты, если сетку раскладывает Isotope.
 * display не переопределяем у карточек: фильтрация может скрывать их.
 */
#shop > .row,
#shop .row:has(> [class*="col-"] .profile-card),
#shop .row:has(> .profile-card) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-content: start;
    gap: 16px;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* Реальная разметка: row > col-12 > row > col-12 > .filter-items. */
#shop .row:has(.filter-items),
#shop .row.filter-items {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

#shop [class*="col-"]:has(.filter-items) {
    padding: 0 !important;
    min-width: 0;
}

#shop > .row > [class*="col-"],
#shop .row > [class*="col-"]:has(.profile-card),
#shop .row > .profile-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch;
}

#shop .profile-card,
#shop .profile-card > .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    border-radius: 18px !important;
}

#shop .profile-card > .card {
    overflow: hidden;
    background: rgba(30, 27, 38, 0.94) !important;
}

#shop .profile-card > .card > a[data-request="onRenderProduct"] {
    display: block;
    width: 100%;
}

#shop .profile-card > .card > a[data-request="onRenderProduct"] > .row {
    margin: 0;
}

#shop .badge,
#shop .btn {
    border-radius: 10px !important;
}

#welcome-section + section .input-group {
    border-radius: 12px;
    overflow: hidden;
}

body:has(#welcome-section) .modal-content {
    border-radius: 20px;
}

#shop .profile-card > .card > .row {
    margin-right: 0;
    margin-left: 0;
}

#shop .card-title {
    overflow-wrap: anywhere;
}

#shop .product-image {
    max-width: calc(100% - 24px);
    height: auto;
    max-height: 170px;
    object-fit: contain;
}

#shop > .row::-webkit-scrollbar { width: 6px; }
#shop > .row::-webkit-scrollbar-track { background: #171717; }
#shop > .row::-webkit-scrollbar-thumb {
    background: var(--accent-color, #8b00ff);
    border-radius: 999px;
}

/* WOW рассчитывает видимость по скроллу window, а теперь скролл вложенный. */
#welcome-section .wow,
#welcome-section + section,
#shop .wow {
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Нижние ленты не входят в двухпанельную компоновку. */
body:has(#welcome-section) #sections {
    display: none !important;
}

body:has(#welcome-section) > footer.footer {
    background: transparent !important;
    grid-area: 3 / 1;
    min-width: 0;
    margin: 0 !important;
    padding: 6px var(--arcane-gap) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
}

body:has(#welcome-section) > footer > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

body:has(#welcome-section) #footer {
    align-items: center;
    margin: 0;
}

body:has(#welcome-section) #footer > [class*="col-"] {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
}

body:has(#welcome-section) #footer p { font-size: 11px; line-height: 1.35; }
body:has(#welcome-section) #footer .footer-brand img { width: 26px; height: 26px; }
body:has(#welcome-section) #footer-social-links { margin: 0; }
body:has(#welcome-section) #captcha-container { position: fixed; z-index: 10060; }

/* Модальные окна покупки сохраняют собственную прокрутку при открытии. */
body:has(#welcome-section) .modal.show {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Вертикальный viewport; узкий телефон в landscape также не тесним. */
@media (orientation: portrait), (max-width: 640px) {
    main:has(> #welcome-section) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    #welcome-section {
        height: auto;
        padding: 14px var(--arcane-gap) !important;
    }

    #welcome-section .shop-name {
        font-size: clamp(26px, 7vw, 48px);
    }

    #welcome-section + section {
        padding: 12px var(--arcane-gap) 0 !important;
    }

    #welcome-section + section > .container > .d-flex {
        padding-bottom: 10px;
    }

    #welcome-section + section > .container > .d-flex > h2 {
        font-size: 22px;
    }

    #welcome-section + section .form-group {
        flex: 1 1 140px;
    }
}

@media (max-height: 450px) {
    #welcome-section + section { padding: 8px 12px !important; }
    #welcome-section + section > .container > .d-flex { padding-bottom: 6px; }
    #welcome-section { padding: 8px 12px !important; }
}