/*
 * Широкий макет video-standart (як robik: rm-style/wide-layout.css, 07f536cc).
 * Нижче 1200px макет не змінюється (лише поля кнопки «Передзвоніть мені» на 992–1199); мобільний — як був.
 *
 * Слайдери головної (.slider-hit: «Акційні», «Новинки») від 1200px беруть ширину
 * слайда з CSS (jdefault.js get_cv), тому кількість карток = ширина .box / ширина слайда:
 *   1200–1399: 1200 / 300 = 4 (без змін)
 *   1400–1719: 1380 / 345 = 4 (без обрізаної 5-ї картки, як на robik)
 *   ≥1720:     1700 / 340 = 5 (поріг 1720, а не 1700: смуга прокрутки ~15px)
 * «Рекомендуємо також» (картка товару, колонка 3/4): 1035 / 345 = 3, 1275 / 318 = 4 (цілі px: дробові дають зсув після прокрутки).
 * Списки (категорія, акційні, новинки — .goods-items.s2.view-tiles) поруч із лівою колонкою:
 *   3 в ряд до 1720, 4 в ряд від 1720 (як на robik).
 */

@media only screen and (min-width: 1400px) and (max-width: 1719px) {
    .container {
        max-width: 1380px;
    }

    .slider-hit:not(.slider-hit-aside) .list-item {
        width: 345px;
    }
}

@media only screen and (min-width: 1720px) {
    .container {
        max-width: 1700px;
    }

    .slider-hit:not(.slider-hit-aside) .list-item {
        width: 340px;
    }

    /* «Рекомендуємо також» на картці — у колонці col-md-9 (1275px): 4 слайди без обрізаного. */
    .slider-hit.recommended-slider .list-item {
        width: 318px;
    }

    .goods-items.s2.view-tiles .col-md-4 {
        width: 25%;
    }

    .goods-items.s2.view-tiles .col-md-4:nth-child(n) {
        clear: none;
    }

    .goods-items.s2.view-tiles .col-md-4:nth-child(4n+1) {
        clear: left;
    }
}

/* Верхня панель: один рядок. Пункти меню займають усе місце, якого не потребують іконки праворуч. */
@media only screen and (min-width: 1200px) {
    .bg-light.hidden-xs > .container > .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .bg-light.hidden-xs > .container > .row:before,
    .bg-light.hidden-xs > .container > .row:after {
        display: none;
    }

    .bg-light.hidden-xs > .container > .row > .col-xs-8 {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .bg-light.hidden-xs > .container > .row > .col-xs-4 {
        flex: 0 0 auto;
        width: auto;
    }

    .main-navbar .navbar-nav {
        display: flex;
        flex-wrap: nowrap;
        float: none;
    }

    .bg-light.hidden-xs > .container > .row > .col-xs-8 {
        margin-right: 16px;
    }

    .main-navbar .nav > li > a {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* 1200–1399 (контейнер 1200): 9 пунктів не вміщуються в 14px — 13px і вужчі поля. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .main-navbar .nav > li > a {
        font-size: 13px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* «ПЕРЕДЗВОНІТЬ МЕНІ» у шапці: тексту з полями 24px треба 174px, а колонка дає 130–168px — напис обрізався. */
@media only screen and (min-width: 992px) and (max-width: 1399px) {
    .btn-callback {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .btn-callback {
        font-size: 11px;
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Два описи каталогу (robik 834fa2cd): короткий над товарами, повний під ними. */
.catalog-description--short { margin: 6px 0 16px; line-height: 1.6; font-size: 15px; color: #222; }
.catalog-description--short p { margin: 0; }
.catalog-description--full { margin: 24px 0; line-height: 1.7; }
.catalog-description--full h2, .catalog-description--full h3 { color: inherit; line-height: 1.35; margin: 18px 0 8px; }
.catalog-description--full h2 { font-size: 20px; }
@media only screen and (max-width: 767px) {
    .catalog-description--short { margin: 6px 0 12px; font-size: 14px; }
    .catalog-description--full { margin: 18px 0; }
}

/*
 * CLS слайдерів «Хіт» (головна: «Акційні», «Новинки»; RUM CF 17.10: ul.list CLS 0,44/0,34).
 * До ініціалізації jdefault.js (slider$ → calc) список .list ще без inline-стилю: картки (float) переносилися
 * в кілька рядів, а після calc ставали в один ряд зі зсувом — стрибок 1020→1700 px.
 * Тепер до ініціалізації — той самий один ряд і та сама ширина картки, що задасть get_cv:
 *   <480: 1 картка на ширину, 480–767: 2, 768–991: 3 (ширина .box, як this.element.width()), ≥992 — з CSS вище.
 * Після calc у .list з'являється style="width…;left…", і правила нижче вже не діють.
 */
.slider-hit:not(.slider-hit-aside) .box {
    container-type: inline-size;
}

.slider-hit:not(.slider-hit-aside) .box > .list:not([style]) {
    width: 10000px;
    /* calc зсуває сам .list ліворуч на ширину клонів (left: -N px), картки при цьому лишаються на місці.
       Сам .list нічого не малює; прихований до ініціалізації, він не рахується як зсув. Картки видимі. */
    visibility: hidden;
}

.slider-hit:not(.slider-hit-aside) .box > .list:not([style]) > .list-item {
    visibility: visible;
}

@media only screen and (max-width: 991px) {
    .slider-hit:not(.slider-hit-aside) .box > .list:not([style]) > .list-item {
        width: 33.3333cqw;
    }
}

@media only screen and (max-width: 767px) {
    .slider-hit:not(.slider-hit-aside) .box > .list:not([style]) > .list-item {
        width: 50cqw;
    }
}

@media only screen and (max-width: 479px) {
    .slider-hit:not(.slider-hit-aside) .box > .list:not([style]) > .list-item {
        width: 100cqw;
    }
}

/*
 * CLS банера-ротатора головної (≥768): висоту дає заглушка /images/1180x320.png без розмірів у HTML —
 * до її завантаження блок 0 px, потім 199–320 px і слайдери під ним зсуваються вниз (прод 18.10: CLS 0,14–0,24).
 * Розміри заглушки відомі (1180×320) — резервуємо місце одразу.
 */
.rotation-main .box img.img-responsive {
    width: 1180px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1180 / 320;
}