/* ==========================================================================
   Итоговый слой конструктора вида (подключается ПОСЛЕ style.css).

   Зачем отдельный файл: style.css состоит из многих слоёв-«заплаток», где
   колонки, отступы и углы карточек переопределены по нескольку раз, часть
   с !important. Селекторы здесь усилены (html body …) и тоже с !important,
   поэтому выигрывают у всех старых правил независимо от порядка.

   Значения берутся из CSS-переменных (их задаёт /api.php?route=/theme.css
   из админки). Запасные значения после запятой = ТЕКУЩИЙ вид сайта, так что
   без настроек ничего не меняется. Брейкпоинты 768/1024 те же, что в style.css.
   Новый параметр: ThemeSchema.php + правило здесь.
   ========================================================================== */

/* Сетка каталога */
html body .product-grid-wide {
    grid-template-columns: repeat(var(--catalog-cols-mobile, 2), 1fr) !important;
    gap: var(--catalog-gap-mobile, 0px) var(--catalog-gap-mobile-x, 0px) !important;
}
@media (min-width: 768px) {
    html body .product-grid-wide {
        grid-template-columns: repeat(var(--catalog-cols-tablet, 3), 1fr) !important;
        gap: var(--catalog-gap-tablet, 0px) var(--catalog-gap-tablet-x, 0px) !important;
    }
}
@media (min-width: 1024px) {
    html body .product-grid-wide {
        grid-template-columns: repeat(var(--catalog-cols-desktop, 4), 1fr) !important;
        gap: var(--catalog-gap-desktop, 0px) var(--catalog-gap-desktop-x, 0px) !important;
    }
}

/* Карточка товара: закругление (везде) */
html body .product-card {
    border-radius: var(--card-radius, 0px) !important;
}
/* Карточка в сетке каталога: ширина и позиция в клетке.
   margin-left:0 нужен, иначе auto-отступы перебивают justify-self. */
html body .product-grid-wide .product-card {
    max-width: var(--card-max-width, 100%) !important;
    margin-left: 0 !important;
    justify-self: var(--card-position, start) !important;
}

/* Текст карточки */
html body .card-text-block {
    text-align: var(--card-text-align, left) !important;
}
html body .card-text-block > .pt-1.flex.items-center.justify-between {
    justify-content: var(--card-row-justify, space-between) !important;
}

/* ==========================================================================
   БАНЕРИ НА ГОЛОВНІЙ (слайдер #mainBannerContainer)
   Висота = мінімальна висота (за замовчуванням як було: 400px на планшеті/комп’ютері, 200px на телефоні),
   а якщо обрано «формат» — висоту ще й рахує браузер від ширини (aspect-ratio). Береться більша з двох.
   Брейкпоінти 768/1024, як у каталозі.
   ========================================================================== */
html body #promo-banner-top {
    max-width: var(--banner-max-width, 1920px) !important;
    margin-bottom: var(--banner-gap-bottom, 24px) !important;
}
@media (min-width: 768px) {
    html body #promo-banner-top {
        padding-left: var(--banner-pad-x, 32px) !important;
        padding-right: var(--banner-pad-x, 32px) !important;
    }
}
html body #promo-banner-top #mainBannerContainer {
    height: auto !important;
    min-height: var(--banner-height-mobile, 200px) !important;
    max-height: var(--banner-max-height, 1400px) !important;
    aspect-ratio: var(--banner-ratio-mobile, auto) !important;
    border-radius: var(--banner-radius, 0px) !important;
    background: var(--banner-bg, transparent) !important;
}
@media (min-width: 768px) {
    html body #promo-banner-top #mainBannerContainer {
        min-height: var(--banner-height-tablet, 400px) !important;
        aspect-ratio: var(--banner-ratio-tablet, auto) !important;
    }
}
@media (min-width: 1024px) {
    html body #promo-banner-top #mainBannerContainer {
        min-height: var(--banner-height-desktop, 400px) !important;
        aspect-ratio: var(--banner-ratio-desktop, auto) !important;
    }
}
/* слайд і фото заповнюють контейнер (старі правила для телефону задавали фіксовані 200px) */
html body #promo-banner-top #mainBannerContainer .banner-slide,
html body #promo-banner-top #mainBannerContainer img {
    height: 100% !important;
    min-height: 0 !important;
}
html body #promo-banner-top #mainBannerContainer img {
    object-fit: var(--banner-fit, cover) !important;
    object-position: var(--banner-position, center center) !important;
    border-radius: var(--banner-radius, 0px) !important;
}
html body #promo-banner-top #mainBannerContainer > * {
    transition-duration: var(--banner-fade, 0.8s) !important;
}
/* показати / сховати елементи керування слайдером */
html body #promo-banner-top > button[onclick^="window.scrollBanner"] { visibility: var(--banner-arrows, visible) !important; }
html body #promo-banner-top #bannerDots { visibility: var(--banner-dots, visible) !important; }
html body #promo-banner-top #bannerProgressWrap { visibility: var(--banner-progress, visible) !important; }
html body #promo-banner-top #bannerBtnWrap { visibility: var(--banner-button, visible) !important; }

/* ==========================================================================
   ГАЛЕРЕЯ РОБІТ (#galleryGrid)
   ========================================================================== */
html body #galleryMain {
    max-width: var(--gallery-max-width, 1440px) !important;
}
html body #galleryGrid {
    grid-template-columns: repeat(var(--gallery-cols-mobile, 2), minmax(0, 1fr)) !important;
    gap: var(--gallery-gap-mobile, 16px) var(--gallery-gap-mobile-x, 16px) !important;
}
@media (min-width: 768px) {
    html body #galleryGrid {
        grid-template-columns: repeat(var(--gallery-cols-tablet, 4), minmax(0, 1fr)) !important;
        gap: var(--gallery-gap-tablet, 16px) var(--gallery-gap-tablet-x, 16px) !important;
    }
}
@media (min-width: 1024px) {
    html body #galleryGrid {
        grid-template-columns: repeat(var(--gallery-cols-desktop, 5), minmax(0, 1fr)) !important;
        gap: var(--gallery-gap-desktop, 16px) var(--gallery-gap-desktop-x, 16px) !important;
    }
}
html body #galleryGrid > div {
    border-radius: var(--gallery-radius, 8px) !important;
    border-width: var(--gallery-border, 1px) !important;
}
html body #galleryGrid .aspect-square {
    aspect-ratio: var(--gallery-ratio, 1 / 1) !important;
}
html body #galleryGrid .aspect-square img {
    object-fit: var(--gallery-fit, cover) !important;
}
html body #galleryGrid .group:hover .aspect-square img {
    transform: scale(var(--gallery-zoom, 1.05)) !important;
}
html body #galleryGrid .aspect-square > .absolute.inset-0 {
    display: var(--gallery-overlay, flex) !important;
}
html body #galleryGrid > div > .p-3 {
    display: var(--gallery-caption, flex) !important;
}
html body #gallery-main-filters {
    justify-content: var(--gallery-filters-align, center) !important;
}