/* Start:/local/templates/owenkomplekt/components/bitrix/catalog/catalogMain/style.min.css?1686844932959*/
.grid .bx_content_section{margin-bottom:15px}.grid .bx_sidebar{margin-bottom:15px}.grid2x1 .bx_content_section{float:left;width:66%;margin-bottom:15px}.grid2x1 .bx_sidebar{float:right;width:33%;margin-bottom:15px;padding-left:5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media(max-width:960px){.grid2x1 .bx_sidebar{padding-left:4%}}@media(max-width:640px){.grid2x1 .bx_content_section,.grid2x1 .bx_sidebar{width:100%;float:none}.grid2x1 .bx_sidebar{padding-left:3%}}@media(max-width:479px){.grid2x1 .bx_sidebar{padding-left:1%}}.catalog-block-header{font-size:14px;font-weight:bold;text-align:left;margin:5px 0;padding:5px 15px;border-bottom:2px solid #d9dee6;color:#000}body.bx-theme-blue .catalog-block-header{border-color:#006cc0}body.bx-theme-green .catalog-block-header{border-color:#63aa28}body.bx-theme-red .catalog-block-header{border-color:#da3737}body.bx-theme-yellow .catalog-block-header{border-color:#f4b236}
/* End */


/* Start:/local/templates/owenkomplekt/components/bitrix/catalog/catalogMain/bitrix/catalog.element/oka/style.css?178857070929254*/
/*main {*/
/*    overflow-x: hidden;*/
/*}*/
article.product-card {
    --product-card-columns-gap: 20px;
    --container-width: 1400px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 48px 0 66px;
    display: grid;
    grid-row-gap: 24px;
    grid-column-gap: var(--product-card-columns-gap);
    grid-template-columns: 335px calc(var(--container-width) - 670px - var(--product-card-columns-gap) * 2) 335px;
    grid-template-areas:
        "NAME NAME NAME"
        "LINE LINE LINE"
        "NAV IMG ASIDE"
        "NAV IMG INFO"
        "NAV TABS TABS"
        "ALSO ALSO ALSO";
}

/** какая-то дичь. Чтобы совпадало с хедером */
@media (width < 1411px) {
    article.product-card {
        --container-width: 1360px;
    }
}

/*
   Ссылки в новой карточке товара оформляются точечно классом .dotted-hover
   (глобальный, styles.css) - явно на тех ссылках, где нужен синий пунктир на
   hover. Так безопаснее, чем одно широкое правило по article.product-card:
   такое правило задевало бы и ссылки со своим hover-стилем (пункты
   .product-card__nav-links, миниатюры товаров в проектах), потому что
   text-decoration не конфликтует с их background/border - специфичность тут
   не спасает, оба стиля просто накладываются друг на друга.
*/

/*
   Кнопки в виде ссылки для копирования артикула в буфер обмена.
   Используются в двух местах: в product-card__sku-line и product-card__nav-guarantee
*/
.product-card__copy-button {
    display: flex;
    gap: 4px;
    align-items: center;

    span {
        color: var(--color-text-regular);
        /* без этого подчёркивание сидит на дне унаследованного line-height (~21px),
           а не у текста (14px) - визуально "утекает" вниз */
        line-height: 1;
        border-bottom: 1px dotted var(--color-text-regular);
    }

    svg {
        color: var(--color-grey);
    }
}

.product-card__name {
    color: var(--color-text-regular);
    margin-bottom: 8px;
    grid-area: NAME;
}

.product-card__sku-line {
    height: 17px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark-grey);
    display: flex;
    gap: 32px;
    grid-area: LINE;

    .sku-line__item {
        display: flex;
        align-items: center;
        gap: 8px;

        svg {
            color: var(--color-grey);
        }
    }

    .sku-line__item {
        .dashed {
            display: none;
        }
    }

    .sku-line__rating {
        /* съедаем свободное место справа, толкая покупки/сравнить к краю */
        margin-right: auto;
        gap: 4px;
        white-space: nowrap;

        svg {
            color: var(--color-red);
        }

        /* ссылка на #reviews - только подпись с числом отзывов, звезда и цифра
           рейтинга (.p1-bold) вне ссылки и цвет не меняют. Не .dotted-hover
           напрямую: скобки вокруг числа - часть текста самой ссылки, но не
           должны быть подчёркнуты, поэтому пунктир (тем же приёмом, что и
           .dotted) переносим со всей ссылки на вложенный span */
        .sku-line__reviews {
            color: var(--color-grey);

            &:hover {
                color: var(--color-blue);
                border-bottom: 0;

                span {
                    border-bottom: 1px dotted var(--color-blue);
                }
            }
        }

        /* переопределение должно быть не менее специфичным, чем правило выше
           (тот же .sku-line__rating .sku-line__reviews:hover span), иначе
           border-bottom из базового правила победит по специфичности и
           подчёркивание будет двойным - и border-bottom, и text-decoration сразу */
        @supports (text-decoration-style: dotted) {
            .sku-line__reviews:hover {
                text-decoration: none;
            }

            .sku-line__reviews:hover span {
                text-decoration-style: dotted;
                text-decoration-line: underline;
                text-decoration-color: currentColor;
                border-bottom: 0;
            }
        }

        /* отзывов ещё нет: гасим звезду */
        &.sku-line__rating--empty {
            color: var(--color-grey);

            svg {
                color: var(--color-grey);
            }
        }
    }

    .sku-line__compare {
        &:has(button.active) {
            color: var(--color-blue);
        }

        &:has(button.active) svg {
            color: var(--color-blue);
        }

        /* подчёркивание всегда есть (не .dotted-hover: тут hover должен только
           менять цвет линии, а не переключать border-bottom на text-decoration -
           иначе через nesting специфичность у border-bottom окажется выше
           (0,0,2,1) против (0,0,2,0) у .dotted-hover:hover и линии задвоятся) */
        button {
            border: 0;
            border-bottom: 1px dotted var(--color-grey);
            height: 17px;
            display: flex;
            align-items: center;

            &:hover {
                color: var(--color-blue);
                border-bottom-color: var(--color-blue);
            }
        }
    }

    @supports (text-decoration-style: dotted) {
        .sku-line__compare button {
            text-decoration-style: dotted;
            text-decoration-line: underline;
            text-decoration-color: var(--color-grey);
            border-bottom: 0;

            &:hover {
                text-decoration-color: var(--color-blue);
            }
        }
    }

    /* враппер для экранов < 1024px */

    .sku-line__wr {
        display: contents;
    }

    .sku-line__vendor-code {
        display: none;
    }
}

.product-card__nav {
    grid-area: NAV;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-card__nav-guarantee {
    background-color: var(--color-very-light-grey);
    border-radius: 8px;
    padding: 6px 20px 0;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 6px;
    align-items: center;

    & > svg {
        color: var(--color-red);
    }

    & > div {
        grid-column: 1/-1;
        background-color: #fff;
        border: 1px solid var(--color-light-grey);
        padding: 20px;
        border-radius: 8px;
        margin: 0 -20px;
        gap: 24px;
    }

    .brand {
        display: grid;
        grid-template-columns: 1fr 72px;
        grid-template-rows: 24px 14px;
        gap: 4px;
        align-items: center;
        justify-items: flex-start;
        margin-bottom: 24px;

        img {
            grid-row: 1/-1;
            grid-column: 2;
            justify-self: flex-end;
        }

        a {
            padding: 0;
            align-self: flex-start;
        }
    }

    .vendor-code {
        display: flex;
        gap: 4px;
        align-items: center;

        span {
            flex: 1;
        }
    }
}

.product-card__nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: calc(120px + 24px);

    a {
        border-radius: 8px;
        background-color: var(--color-very-light-grey);
        border: 1px solid var(--color-very-light-grey);
        padding: 12px 20px;
        display: flex;
        gap: 12px;
        align-items: center;
        color: var(--color-dark-grey);
        cursor: pointer;

        /* дефолтная подсветка тапа в мобильных браузерах (полупрозрачный
           голубой поверх кнопки) - не относится к :hover и не гасится
           через (hover: hover), убираем отдельно */
        -webkit-tap-highlight-color: transparent;
    }

    /* глобальный легаси-стиль (css/style.css: "a:hover{color:#0284c7}") красит
       в синий вообще любую ссылку на сайте и ничем не ограничен - та же
       специфичность (тег+псевдокласс), что и у ".product-card__nav-links a"
       (класс+тег) выше, поэтому кто победит - вопрос порядка подключения файлов,
       а не логики. Явный a:hover тут специфичнее (класс+тег+псевдокласс) и
       гарантированно перебивает его в любом порядке. По умолчанию держим тот
       же dark-grey, что и в покое - это и есть защита на тачскрине, где
       (hover: hover) ниже не матчится, а легаси-стиль всё равно "залипает" */
    a:hover {
        color: var(--color-dark-grey);
    }

    /* (hover: hover) - истинно только когда есть точное указывающее устройство
       (мышь/трекпад). На чистом тачскрине браузер эмулирует :hover после тапа
       и не снимает его до следующего тапа в другое место - кнопка "залипает"
       подсвеченной. Без (hover: hover) это была бы уже отдельная JS-история
       (например, снимать фокус/hover по touchend), а так браузер просто
       никогда не матчит :hover на таких устройствах. Здесь же, поверх
       защиты выше, возвращаем синий - но только там, где hover настоящий,
       а не "залипший" тач */
    @media (hover: hover) {
        a:hover {
            background-color: var(--color-white);
            border: 1px solid var(--color-light-grey);
            color: var(--color-blue);
        }
    }

    svg {
        min-width: 20px;
    }
}


/* Блок с управлением товара в корзине ... */
.product-card__aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    grid-area: ASIDE;

    /* ... цены, нашли дешевле, управление количеством в корзине */

    .product-card__aside_control {
        padding: 32px;
        display: flex;
        gap: 4px;
        flex-direction: column;
        justify-content: center;
        border-radius: 8px;
        box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.08);

        .price-old {
            line-height: 24px;
            color: var(--color-grey);
            text-decoration: line-through;
        }

        .price-old-details {
            border: 1px solid var(--color-red);
            color: 1px solid var(--color-red);
            border-radius: 4px;
            padding: 4px 8px;
            display: inline-block;
            height: 24px;
        }

        .found-cheaper {
            border: none;
            color: var(--color-blue);
            width: fit-content;
            height: 14px;
            line-height: 14px;
            padding: 0;
            margin-top: 8px;
        }
    }

    .product-card__price-wrapper {
        display: contents;
    }

    .product-card__price {
        font-size: 32px;
        font-weight: 600;
        line-height: 38px;
    }

    .product-card__aside_control.floating {
        position: fixed;
        top: 160px;
        z-index: 2; /* @todo: кринж, это временно, чтобы побороть чужие relative */
    }

    .product-card__aside_available {
        display: grid;
        grid-template-columns: 20px 1fr;
        column-gap: 12px;
        row-gap: 16px;

        .item {
            display: contents;
        }

        svg {
            color: var(--color-grey);
            min-width: 20px;
        }

        /* не просто a { color }, иначе специфичность (2 класса + a) выше, чем
           у .dotted-hover:hover (2 класса), и ссылка никогда не посинеет -
           :not(:hover) вместо борьбы за специфичность просто перестаёт
           действовать на время hover */
        a:not(:hover) {
            color: var(--color-text-regular);
        }
    }

}

.product-card__aside-info-blocks {
    grid-area: INFO;
    display: flex;
    flex-direction: column;
    gap: 24px;


    .product-card__asutp-tp {
        border: 1px solid var(--color-light-grey);
        border-radius: 8px;
        width: 100%;
        position: relative;

        background-size: auto 100%, cover;
        background-position: left center, right center;
        background-repeat: no-repeat, no-repeat;

        padding: 24px;
    }
}

.product-card__utp {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    justify-content: flex-start;
    padding-top: 56px;

    div {
        display: flex;

        p {
            flex-grow: 1;

            span {
                display: block;
                font-size: 24px;
                font-weight: 700;
                line-height: 29px;
                color: var(--color-blue);
                margin-bottom: 4px;
            }
        }

        p.b {
            width: 0;
            border-left: 1px solid #ccc;
        }

        p:first-of-type {
            padding-left: 0;
        }

        p:last-of-type {
            padding-right: 0;
        }
    }
}

.product-card__utp-header {
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    display: flex;
    gap: 16px;
    align-items: center;

    svg {
        width: 24px;
        height: 24px;
        color: var(--color-blue);
    }
}

.product-card__tabs {
    grid-area: TABS;
    display: flex;
    flex-direction: column;
    gap: 80px;

    /*max-width: calc(var(--container-width) - 670px - var(--product-card-columns-gap) * 2);*/
    /*overflow: hidden;*/

    .product-card__characteristics-wrapper {
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        display: block;
        max-width: 100%;

        /*h3 {*/
        /*    font-size: 24px;*/
        /*    font-weight: 700;*/
        /*    line-height: 29px;*/
        /*    padding: 16px 0;*/
        /*}*/

        table {
            border: 1px solid var(--color-very-light-grey);
            width: 100%;
        }

        table tr:nth-of-type(odd) {
            background-color: var(--color-very-light-grey);
        }

        table td {
            padding: 16px;

            &:nth-of-type(even) {
                text-align: end;
            }
        }
    }

    section {
        padding: 0;
        /*padding: 0 0 100px;*/
        /*margin-top: -100px;*/

        display: grid;
        column-gap: 16px;
        row-gap: 24px;
        grid-template-columns: 24px 1fr;

        & > svg {
            align-self: center;
            color: var(--color-blue);
        }

        & > div {
            grid-column: 1/-1;
        }

        table td {
            padding: 8px;
        }

        ol {
            list-style: inherit;
            padding-left: 32px;
        }
    }
}

.product-card__detail-text {
    p {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 24px;
    }

    h3 {
        /*margin-bottom: 16px;*/
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        margin-bottom: 12px;
    }

    ul {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 24px;
        padding-left: 20px;

        li {
            list-style-type: disc;
        }
    }
}

.product-card__detail-text--preview {
    margin-bottom: 24px;
    border-radius: 8px;
    border: 1px solid var(--color-light-grey);
    background-color: var(--color-very-very-light-grey);
    padding: 16px 24px;
    color: var(--color-text-regular);
}

.product-card__characteristics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
    /* скругление углов держит контейнер, ячейки просто обрезаются по нему.
       позиционные радиусы на span/h3 не годятся: заголовка группы может не быть,
       их может быть несколько, а :nth-child считает h3 наравне со span */
    overflow: hidden;
    align-items: stretch;

    h3 {
        grid-column: 1/-1;
        background-color: var(--color-dark-grey);
        color: var(--color-white);
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        height: 54px;
        padding: 16px 24px;
    }

    span {
        padding: 16px 24px;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        align-content: flex-start;
    }

    span:nth-of-type(odd) {
        border-right: 1px solid var(--color-light-grey);
    }

    span:nth-of-type(4n+1), span:nth-of-type(4n+2) {
        background-color: var(--color-very-very-light-grey);
    }

    /* ну это для множественных значений, так в дизайне бл */

    ul {
        list-style: disc;
        padding-left: 16px;
    }
}

/* блок с изображениями товара и слайдером с thumbnails */
.product-images {
    display: flex;
    flex-direction: column;
    gap: 16px;

    grid-area: IMG;
    position: relative;
}

.product-see-also {
    display: flex;
    flex-direction: column;
    gap: 32px;
    grid-area: ALSO;
    margin-top: calc(120px - 24px);

}

.modal-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.express-order-info {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 48px 24px;
    column-gap: 16px;
    row-gap: 8px;

    img {
        border: 1px solid var(--color-light-grey);
        border-radius: 8px;
        padding: 6px;
        max-width: 80px;
        height: 80px;
        grid-row: 1/-1;
        object-fit: contain;
    }

    .name {
        overflow: hidden;
    }
}

.express-order-totals {
    padding: 20px;
    border-radius: 8px;
    background-color: var(--color-very-light-grey);
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 12px;
    color: var(--color-text-regular);

    .itogo {
        display: flex;
        align-items: baseline;

        &:after {
            width: 100%;
            content: " ";
            height: 14px;
            border-bottom: 1px dashed var(--color-grey);
        }
    }

    .btw {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-grey);
        grid-column: 1/-1;
    }
}

/* тело формы раскрыто прямо в flex-контейнер диалога (gap между блоками),
   поэтому прячем его отдельным правилом: атрибут hidden тут перебивается
   правилом display: contents и сам по себе не сработает */
.baseline-dialog__body {
    display: contents;
}

.baseline-dialog__body[hidden] {
    display: none;
}

@media (width < 1400px) {
    article.product-card {
        /*padding: 0 24px;*/
        --container-width: calc(100dvw - 48px);
        grid-template-columns:
            clamp(229px, calc(var(--container-width) - var(--product-card-columns-gap) * 2) / 4, 335px)
            clamp(478px, calc(var(--container-width) - var(--product-card-columns-gap) * 2) / 2, 690px)
            clamp(229px, calc(var(--container-width) - var(--product-card-columns-gap) * 2) / 4, 335px);

        grid-template-areas:
        "NAME NAME NAME"
        "LINE LINE LINE"
        "NAV IMG ASIDE"
        "NAV INFO INFO"
        "NAV TABS TABS"
        "ALSO ALSO ALSO";
    }

    .product-card__nav-guarantee {
        /* на узких экранах часть про гарантию должна обрезаться, кринж */

        .gar-additional {
            display: none;
        }
    }


    .product-card__utp {
        p.no-xxl {
            display: none;
        }
    }

    section#projects {
        margin-right: -24px;
    }

    .product-see-also {
        margin-right: -24px;
        ol {
            padding-right: 24px;
        }
    }
}

@media (width < 1400px) and (width >= 768px) {
    .product-card__aside {
        .product-card__price {
            font-size: 24px;
            font-weight: 700;
            line-height: 29px;
        }
    }

    .product-card__aside-info-blocks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* строка выше карточек — на выступающую голову менеджера (150 − 131) */
        height: 150px;
        align-items: end;

        .product-card__aside-manager {
            /* на всю строку: фото торчит над карточкой, оверлей ниже */
            height: 150px;

            .overlay {
                height: 131px;
                padding: 20px;
            }

            img {
                max-height: 100%;
            }
        }

        .product-card__asutp-tp {
            height: 131px;
        }
    }
}

@media (width < 1024px) and (width >= 768px) {
    .product-card__aside {
        .product-card__aside_control {
            .cart-control {
                flex-direction: row;

                button {
                    width: 100%;
                }
            }

            .product-card__price-wrapper {
                display: flex;
                gap: 14px;
                align-items: center;
            }
        }

        .product-card__aside_available {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
            column-gap: 20px;

            .item {
                display: flex;
                gap: 12px;
            }

            .available {
                grid-row: 1/3;
            }
        }
    }

    .product-card__aside-info-blocks {
        .product-card__aside-manager .overlay,
        .product-card__asutp-tp {
            /* вот это вообще непонятно - нахуй так сделано */
            padding-top: 10px;
        }
    }

    /* тот же приём, что на <768px: min-width не даёт таблице стать слишком
       узкой (и включает скролл в .product-card__characteristics-wrapper,
       если колонке не хватает места), но при этом даёт растягиваться на
       широких планшетах, а не оставлять пустое место справа */
    .product-card__tabs {
        .product-card__characteristics {
            min-width: 727px;
        }
    }
}

@media (width < 1024px) {
    article.product-card {
        grid-template-columns:
            44px /* 68px минус 24px margin */
            calc(100dvw - 92px - 24px);
        /*1fr;*/
        grid-template-areas:
        /* NAV растянут от самого верха (уровень хлебных крошек), а не только
           от IMG - иначе меню визуально начинается под h1/sku-line */
        "NAV NAME"
        "NAV LINE"
        "NAV IMG"
        "NAV ASIDE"
        "NAV INFO"
        "NAV TABS"
        "ALSO ALSO";
        max-width: 100%;
        margin: 0 24px;
    }

    .product-card__sku-line {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: unset;

        .sku-line__wr {
            display: flex;
            justify-content: flex-end;
            gap: 32px;
        }

        .sku-line__sku {
            grid-row: 2;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            border: 1px solid var(--color-light-grey);
            border-radius: 8px;
            gap: 4px;

            .semicolon {
                display: none;
            }
        }

        .sku-line__vendor-code {
            grid-row: 2;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            border: 1px solid var(--color-light-grey);
            border-radius: 8px;
            gap: 4px;
        }

        .sku-line__item {
            .dashed {
                display: inline;
                flex-grow: 1;
                height: 17px;
                border-bottom: 1px dashed #ccc;
            }
        }

    }

    .product-card__nav-guarantee {
        display: none;
    }

    .product-card__nav {
        margin-left: -24px;
    }

    .product-card__nav-links {
        a {
            border-radius: 0 8px 8px 0;
        }

        span {
            display: none;
        }
    }
    .product-see-also {
        margin-top: calc(100px - 24px);
        margin-right: -24px;
        ol {
            padding-right: 24px;
        }
    }
}

@media (width < 1080px) {
    .product-card__nav-links {
        top: 24px;
    }
}

@media (width < 768px) {
    article.product-card {
        grid-template-columns: 36px calc(100% - 52px);
        margin: 0 16px;
        column-gap: 16px;
        grid-template-areas:
            "NAV IMG"
            "NAV NAME"
            "NAV LINE"
            "NAV ASIDE"
            "NAV INFO"
            "NAV TABS"
            "ALSO" "ALSO";
    }

    .product-card__nav {
        margin-left: -16px;
    }

    .product-card__nav-links {
        a {
            padding: 14px 16px;
        }
    }

    .product-card__aside-info-blocks {
        flex-direction: column;
        gap: 16px;

        .product-card__asutp-tp {
            margin: 0;
        }
    }

    .product-card__tabs {
        row-gap: 48px;

        .product-card__characteristics {
            min-width: 397px;
        }
    }

    .product-card__utp {
        padding-top: 24px;

        div {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 16px;
            row-gap: 24px;

            p.b {
                display: none;
            }
        }
    }

    .product-card__utp-header {
        font-size: 18px;
        font-weight: 700;
        line-height: 22px;

        svg {
            width: 20px;
            height: 20px;
        }
    }

    .product-card__sku-line {
        grid-template-columns: 1fr 1fr;
        height: unset;
        row-gap: 0;

        .sku-line__wr {
            display: flex;
            justify-content: flex-end;
            gap: 32px;
        }

        .sku-line__sku {
            grid-row: 2;
            grid-column: 1/-1;
            padding: 20px 20px 8px 20px;
            display: flex;
            justify-content: space-between;
            border: 1px solid var(--color-light-grey);
            border-bottom: 0;
            border-radius: 8px 8px 0 0;
            gap: 4px;
            margin-top: 16px;
        }

        .sku-line__vendor-code {
            grid-row: 3;
            grid-column: 1/-1;
            padding: 8px 20px 20px;
            display: flex;
            justify-content: space-between;
            border: 1px solid var(--color-light-grey);
            border-top: 0;
            border-radius: 0 0 8px 8px;
            gap: 4px;
        }

        .sku-line__item {
            .dashed {
                display: inline;
                flex-grow: 1;
                height: 17px;
                border-bottom: 1px dashed #ccc;
            }
        }

    }

    section#projects {
        margin-right: -16px;
    }

    .product-see-also {
        gap: 24px;
        margin-top: calc(100px - 24px);
        margin-right: -16px;
        ol {
            padding-right: 16px;
        }
    }
}

.toast-copy {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateY(-6px);
    z-index: 9999;
}
/* End */


/* Start:/local/components/oka/product.badges/templates/oka/style.css?1788445424582*/
.product-badges {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.product-badge {
    padding: 7px 12px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--color-dark-grey);
    background-color: var(--color-white);
    color: var(--color-dark-grey);
}

.product-badge.red {
    border: 1px solid var(--color-red);
    background-color: var(--color-red);
    color: var(--color-white);
}
/* End */


/* Start:/local/components/oka/product.images/templates/oka/style.css?17884454243187*/
.product-images {
    /* размер области для изображения товара: родитель, минус вертикальный скролл слайдера, если есть */
    /* нужно, чтобы потом задавать максимальную высоту карусели, иначе она растянется на весь viewport */
    --product-image-size: unset;
}

/* большая картинка */
.product-images__image {
    width: var(--product-image-size);
    img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }
}

/* враппер карусели для особых случаев на 375px */
.product-images__carousel-wrapper {
    display: contents;

    .product-card__compare-xs {
        display: none;
        color: var(--color-grey);
    }
}

/* сама карусель */
.product-images__carousel {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }

    display: flex;
    gap: 12px;
    flex-wrap: nowrap !important; /* @todo: убрать, когда удалим у слишком самонадеянного ul:not(.disc) */
    /*padding: 4px 0;*/
    /*min-width: 0;*/

    li {
        border-radius: 8px;
        width: 80px;
        height: 80px;
        border: 1px solid var(--color-light-grey);
        flex-shrink: 0;
        transition: border-color 0.15s ease;
    }

    li[aria-current="true"] {
        border-color: var(--color-black);
    }

    a {
        display: block;
        padding: 4px;
    }

    img {
        pointer-events: none;
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: contain;
        display: block;
    }
}

/* на таких экранах Миша снёс слайдер направо от изображения */
@media (width < 1024px) and (width >= 768px) {
    .product-images {
        --product-image-size: calc(100% - 80px - 16px);
    }
    .product-images {
        flex-direction: row;
    }
    .product-images__carousel {
        overflow-y: auto;
        flex-direction: column;
    }
}

@media (width < 768px) {
    /* а тут хоба - в карусели появляется кнопка "сравнить", ох Миша, Миша, что ты блядь такое */
    .product-images__carousel-wrapper {
        display: grid;
        grid-template-columns: 1fr 52px;
        gap: 8px;
        overflow-y: hidden;

        .product-card__compare-xs {
            display: grid;
            place-items: center;
            background-color: var(--color-very-light-grey);
            border-radius: 8px;
            cursor: pointer;
            &.active {
                color: var(--color-blue);
            }
        }
    }

    .sku-line__item.compare {
        display: none;
    }

    /* ну и сама карусель становится поменьше, чтобы сложнее попасть было */
    .product-images__carousel {
        gap: 8px;
        li {
            width: 40px;
            height: 40px;
        }
    }
}

/* End */


/* Start:/local/components/oka/basket/templates/product/style.css?17884454231031*/
/*
 * кнопки "положить в корзину" и "быстрый заказ
 * отображается, если товара нет в корзине.
 */
.cart-control {
    padding-top: 20px;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    row-gap: 14px;

    .cart-control__content {
        display: contents;
    }

    .cart-control__content.empty {
        display: none;
    }
}

.cart-control[data-basket-count="0"] {
    padding-top: 20px;
    display:flex;
    flex-direction: column;
    gap: 14px;

    .cart-control__content {
        display: none;
    }

    .cart-control__content.empty {
        display: contents;
    }
}

#in-basket-count-value {
    width: 100%;
    background-color: var(--color-very-light-grey);
    border-color: var(--color-very-light-grey);
    padding: 8px 16px;
    text-align: center;
}

.button-secondary.minus {
    border-radius: 8px 0 0 8px;
}


.button-secondary.plus {
    border-radius: 0 8px 8px 0;
}

.cart-control__link {
    grid-column: 1/-1;
}
/* End */


/* Start:/local/components/oka/category.managers/templates/product/style.css?1788445423590*/
.product-card__aside-manager {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;

    & > .overlay {
        position: absolute;
        inset: auto 0 0 0;
        border-radius: 8px 8px 0 0;
        background-color: var(--color-very-light-grey);
        padding: 24px;
    }

    & > img {
        position: relative; /* просто чтобы быть гарантированно выше .overlay на стекируемом контексте */
        pointer-events: none;
        max-height: 160px;
        /*aspect-ratio: 1/1;*/
    }
}

/* End */


/* Start:/local/components/oka/product.projects/templates/oka/style.css?17885648483775*/
.product-projects {
    max-width: 100%;
    display: flex;
    gap: 20px;
    grid-column: 1/-1;
    flex-wrap: nowrap !important; /* @todo: убрать после удаления ul:not(.disc) */

    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }

    li {
        border: 1px solid var(--color-light-grey);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.product-project__content {
    padding: 24px 24px 16px;

    display: flex;
    gap: 16px;
    flex-direction: column;
    width: 335px;

    & > img {
        width: 287px;
        height: 240px;
        object-fit: contain;
    }

    .title {
        height: 72px;
        /*max-lines: 3;*/
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        line-height: 24px;

        /* hover (синий + пунктир) даёт класс .dotted-hover на самой ссылке
           (styles.css). Не просто a { color }, иначе специфичность
           (.product-project__content .title a = 2 класса + a) выше, чем у
           .dotted-hover:hover (2 класса), и ссылка никогда не посинеет -
           :not(:hover) вместо борьбы за специфичность просто перестаёт
           действовать на время hover */
        a:not(:hover) {
            color: var(--color-text-regular);
        }
    }

    .props {
        display: grid;
        grid-template-columns: 108px 1fr;
        row-gap: 16px;
        column-gap: 4px;
        align-self: stretch;

        span:nth-child(odd) {
            color: var(--color-grey);
            font-size: 14px;
            font-weight: 500;
            line-height: 17px;
            display: flex;
            gap: 4px;
            &::after {
                width: 100%;
                content: " ";
                height: 14px;
                border-bottom: 1px dashed var(--color-grey);
            }
        }

        span:nth-child(even) {
            color: var(--color-dark-grey);
            font-size: 14px;
            font-weight: 500;
            line-height: 17px;
        }
    }
}

 .product-project__items {
     background-color: var(--color-very-very-light-grey);
     padding: 16px 24px 24px;
     display: flex;
     flex-direction: column;
     gap: 12px;

     border-radius: 0 0 8px 8px;
     width: 335px;

     ul {
         display: flex;
         flex-wrap: nowrap !important; /* как же она заебала {@see ul:not(.disc)} */
         overflow: hidden;
         gap: 4px;
     }

    /*display: grid;*/
    li {
        width: 54px;
        min-width: 54px;
        height: 54px;
        border: 1px solid var(--color-very-light-grey);
        border-radius: 4px;
        background-color: var(--color-white);

        a {
            padding: 3px;
        }

        img {
            display: block;
        }
    }

     .more {
         display: flex;
         align-items: center;
         justify-content: center;
     }
}

 @media (width < 1400px) {
     .product-projects {
         padding-right: 16px;
     }
 }

@media (width < 768px) {
    .product-projects {
        padding-right: 16px;
    }
    .product-project__content {
        width: 260px;
        padding: 16px;

        & > img {
            width: 227px;
            height: 190px;
        }
    }

    .product-project__items {
        padding: 16px;
        width: 260px;
    }
}
/* End */


/* Start:/local/templates/owenkomplekt/ui/dotted-list/style.css?17884454242816*/
.oka-dotted-list {
    --oka-dotted-list-gap: 12px;
    --oka-dotted-list-value-color: var(--color-text-regular);
    --oka-dotted-list-leader-color: var(--color-grey);
    --oka-dotted-list-leader-style: dashed;
    --oka-dotted-list-leader-width: 1px;
    --oka-dotted-list-leader-gap: 8px;
    --oka-dotted-list-leader-offset: 0.2em;
    --oka-dotted-list-leader-min: 16px;

    /* это для oka:product.projects, если где-то будет другой список,
       то следует эту раскладку перенести в projects, а сюда - обычный flex */
    display: grid;
    grid-template-columns: 108px 1fr;
    flex-direction: column;
    gap: var(--oka-dotted-list-gap);
    margin: 0;
}

.oka-dotted-list--dense {
    --oka-dotted-list-gap: 6px;
}

.oka-dotted-list--leader-solid {
    --oka-dotted-list-leader-style: solid;
}

.oka-dotted-list--leader-dotted {
    --oka-dotted-list-leader-style: dotted;
}

.oka-dotted-list__row {
    display: contents;
}

/* noinspection CssUnresolvedCustomProperty */
.oka-dotted-list__row > dt {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--oka-dotted-list-term-color, var(--color-grey));
    font-size: var(--oka-dotted-list-term-font-size, 14px);
    font-weight: var(--oka-dotted-list-term-font-weight, 400);
    line-height: var(--oka-dotted-list-term-line-height, 1.2);
}

.oka-dotted-list__term {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Пустой flex-элемент с align-self: baseline ставит свою базовую линию
   по нижнему краю - линия отбивки сама садится на базовую линию текста
   и не зависит от кегля. transform сдвигает её чуть ниже, под выносные.
   В прошлых коммитах я старался строить от верха оборачиваясь на кегль.
   Если будут проблемы - придётся вернуться к такому решению.*/
.oka-dotted-list__row > dt::after {
    content: "";
    flex: 1 1 auto;
    align-self: baseline;
    margin-left: var(--oka-dotted-list-leader-gap);
    border-bottom:
            var(--oka-dotted-list-leader-width)
            var(--oka-dotted-list-leader-style)
            var(--oka-dotted-list-leader-color);
    transform: translateY(var(--oka-dotted-list-leader-offset));
}

.oka-dotted-list__row > dd {
    flex: 0 0 auto;
    margin: 0;
    color: var(--oka-dotted-list-value-color);
    font-size: var(--oka-dotted-list-def-font-size, 14px);
    font-weight: var(--oka-dotted-list-def-font-weight, 500);
    line-height: var(--oka-dotted-list-def-line-height, 1.2);
}

/* End */


/* Start:/local/components/oka/product.reviews/templates/product/style.css?17885664969598*/
.product-reviews {
    display: flex;
    gap: 20px;
}


/* левая (нижняя на узких экранах) часть отзывов: сортировка и контент */
.product-reviews__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;

    nav {
        display: flex;
        gap: 32px;
    }
}

.product-review__stars {
    display: flex;
    align-items: center;
    color: var(--color-light-grey);
    gap: 3px;

    svg.a {
        color: var(--color-red);
    }
}


/* выпадашка с сортировкой */
.product-reviews__dropdown {
    position: relative;
    color: var(--color-dark-grey);
    width: 160px;
    display: flex;
    gap: 8px;

    button {
        display: flex;
        align-items: center;
        gap: 4px;

        span {
            color: var(--color-black);
            border-bottom: 1px dotted var(--color-black);
        }
    }

    svg {
        color: var(--color-grey);
        transform: rotate(90deg);
        transition: all .3s ease-in-out;
    }

    ul {
        display: none;
        position: absolute;
        border: 1px solid var(--color-light-grey);
        border-radius: 8px;
        padding: 16px;
        gap: 8px;
        width: 100%;
        flex-direction: column;
        background-color: var(--color-very-very-light-grey);
        z-index: 1;
        inset: 100% 0 auto 0;

        li {
            cursor: pointer;
        }

        li.active {
            font-weight: 700;
        }
    }
}

.product-reviews__dropdown.expanded {
    svg {
        transform: rotate(270deg);
    }

    ul {
        display: flex;
    }
}

/* саммари - общая оценка и звёзды */
.product-reviews__summary {
    display: flex;
    gap: 24px;
    flex-direction: column;
    width: 335px;
    max-width: 335px;

    flex: 1 0 auto;

    .stars-wrapper {
        position: relative;
    }

    .stars-filled {
        position: absolute;
        display: flex;
        gap: 4px;
        flex-wrap: nowrap;
        inset: 0;
        width: calc(var(--rating) * 24px + var(--rating) * 4px);
        overflow: hidden;
        color: var(--color-red);

        svg {
            flex-shrink: 0;
        }
    }

    .total {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        position: relative;

        .rating {
            grid-column: 1/-1;
        }

        .product-review__stars {
            gap: 4px;
        }
    }
}

/* данные о распределении оценок: в блоке aside, под totals */
.product-reviews__spreading {
    display: grid;
    grid-template-columns: 92px 1fr;
    grid-template-rows: repeat(5, 17px);
    column-gap: 4px;
    row-gap: 16px;
    align-items: center;
    align-self: stretch;

    span {
        display: flex;
        gap: 4px;
        white-space: nowrap;
    }

    span::before {
        width: 100%;
        content: " ";
        height: 17px;
        border-bottom: 1px dashed var(--color-grey);
    }
}

/* конкретный отзыв */
.product-review {
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--color-light-grey);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-review__header {
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 12px;
    row-gap: 4px;

    p {
        grid-column: 1/-1;
    }
}

.product-review__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-review__photos {
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    width: 100%;
    gap: 12px;

    li {
        width: 80px;
        height: 80px;
        padding: 6px;
        border-radius: 8px;
        border: 1px solid var(--color-light-grey);
    }

    img {
        display: block;
        border-radius: 4px;
    }
}

.review-dialog {
    textarea {
        /*resize: none;*/
        height: 24px;
        overflow-y: auto;
    }
}

.review-dialog__header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
}

.review-dialog__image {
    width: 80px;
    height: 80px;
    padding: 6px;
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
}

.review-dialog__part {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-dialog__rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    outline: 1px solid var(--color-grey);
    border-radius: 8px;

    input {
        position: absolute;
        opacity: 0;
    }

    label {
        cursor: pointer;
        display: inline-flex;
    }

    svg {
        color: var(--color-light-grey);
        transition: fill .15s;
        margin: 14px 8px;
    }

    label:first-of-type svg {
        margin-right: 0;
    }

    label:last-of-type svg {
        margin-left: 0;
    }

    label:hover svg,
    label:hover ~ label svg {
        color: var(--color-red);
    }

    /* Фокус для клавиатуры */

    input:focus-visible + label svg {
        outline: 2px solid #0078d4;
        outline-offset: 4px;
        border-radius: 4px;
    }
}

.review-dialog__rating:not(:hover) {
    outline: 1px solid var(--color-light-grey);

    input:checked ~ label svg {
        color: var(--color-red);;
    }

    input:focus-visible + label svg {
        outline: 2px solid var(--color-blue);
        outline-offset: 4px;
        border-radius: 4px;
    }
}

.review-dialog__photo-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    scrollbar-color: var(--color-blue) transparent;
    margin-top: -6px;
    padding-top: 6px;

    user-select: none;
    -webkit-user-select: none;

    scroll-behavior: auto; /* не auto-smooth, чтобы не конфликтовало с драгом */
    contain: layout paint; /* изолирует reflow от остальной страницы */
    -webkit-overflow-scrolling: touch;

    cursor: grab;
}

.review-dialog__photo-slider.dragging {
    cursor: grabbing;
}

.review-dialog__photo-slider::-webkit-scrollbar {
    width: 6px;
}

.review-dialog__photo-slider::-webkit-scrollbar-track {
    background: transparent;
}

.review-dialog__photo-slider::-webkit-scrollbar-thumb {
    background: var(--color-blue);
    border-radius: 4px;
}
.review-dialog__photo-slider::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

.review-dialog__photo-slider > * {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-light-grey);
    padding: 5px;
    position: relative;

    img {
        max-height: 100%;
        object-fit: contain;
        -webkit-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }

    &:has(input:focus-visible) {
        outline: 2px solid var(--color-blue);
        outline-offset: -2px;
        color: var(--color-blue);
    }
}

.review-dialog__add-img-btn {
    background-color: var(--color-very-light-grey);
    cursor: pointer;
    svg {
        color: var(--color-dark-grey);
        display: block;
    }
    &.dropzone--hover {
        border-color: var(--color-blue);
        color: var(--color-blue);
    }
}

.review-photo__drop-btn {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--color-dark-grey);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.review-photo__drop-btn:focus-visible {
    background-color: var(--color-blue);
    transform: rotate(90deg);
}

.review-photo__drop-btn::before,
.review-photo__drop-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transform-origin: center;
}

.review-photo__drop-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.review-photo__drop-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.product-reviews__cta {
    display: contents;
}

.product-reviews__thanks {
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--color-very-light-grey);
    color: var(--color-dark-grey);
    text-align: center;
}

.product-reviews__list {
    display: contents;
}

@media (width < 1400px) and (width >= 768px) {
    .product-reviews__summary {
        .total {
            .count-suffix {
                display: none;
            }
        }
    }
}

@media (width < 1400px) {
    .product-reviews__summary {
        width: 229px;
        max-width: 229px;
    }
}

@media (width < 1024px) {
    .product-reviews {
        flex-direction: column-reverse;
        gap: 48px;
    }

    .product-reviews__summary {
        /* max-width не сбрасывался тут - тянулся из блока <1400 (229px) и
           резал колонку независимо от width: 100%, из-за чего не растягивались
           ни кнопка, ни грид звёзд внутри (у них самих ширина не задана,
           растягивает их align-items: stretch родителя-флекса) */
        width: 100%;
        max-width: 100%;
    }
}

@media (width < 768px) {
    .product-reviews {
        gap: 24px;
    }

    .product-reviews__content nav {
        justify-content: space-between;
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

/* End */


/* Start:/local/components/oka/products.carousel/templates/.default/style.css?17884454242037*/
.oka-product-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
}

.oka-product-carousel__item {
    border: 1px solid var(--color-light-grey);
    border-radius: 8px;
    padding: 24px;
    width: 335px;
    height: 584px;
    flex-shrink: 0;
    display: flex;
    gap: 24px;
    flex-direction: column;
}

.oka-product-carousel__item-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    align-items: center;
}

.oka-product-carousel__item-image {
    grid-column: 1/-1;
    img {
        width: 287px;
        height: 287px;
        object-fit: contain;
    }
}

.oka-product-carousel__item-rating {
    display: flex;
    gap: 4px;
    align-items: center;
    color: var(--color-red);
}

.oka-product-carousel__item-stocks {
    justify-self: flex-end;
}

.oka-product-carousel__item-name {
    grid-column: 1/-1;
    height: 66;
    max-height: 66px;
    min-height: 66px;
    overflow-y: hidden;
}

.oka-product-carousel__item-controls {
    display: grid;
    grid-template-columns: 1fr 68px;
    row-gap: 16px;
    column-gap: 8px;

    .prices {
        grid-column: 1/-1;
        display: flex;
        gap: 12px;
        justify-content: flex-start;
    }
}

.oka-product-carousel__cart-control {
    display: contents;

    & > .in-cart { display: none;}
    & > .not-in-cart { display: flex;}

    &[data-basket-count]:not([data-basket-count="0"]) {
        & > .in-cart { display: flex; }
        & > .not-in-cart { display: none; }
    }

    input[type="text"] {
        width: 100%;
        background-color: var(--color-very-light-grey);
        /* p2-medium */
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }
}

@media screen and (width < 768px) {
    .oka-product-carousel__item {
        padding: 16px;
        width: 259px;
        height: 508px;
    }

    .oka-product-carousel__item-image {
        img {
            width: 227px;
            height: 227px;
        }
    }
}

/* End */
/* /local/templates/owenkomplekt/components/bitrix/catalog/catalogMain/style.min.css?1686844932959 */
/* /local/templates/owenkomplekt/components/bitrix/catalog/catalogMain/bitrix/catalog.element/oka/style.css?178857070929254 */
/* /local/components/oka/product.badges/templates/oka/style.css?1788445424582 */
/* /local/components/oka/product.images/templates/oka/style.css?17884454243187 */
/* /local/components/oka/basket/templates/product/style.css?17884454231031 */
/* /local/components/oka/category.managers/templates/product/style.css?1788445423590 */
/* /local/components/oka/product.projects/templates/oka/style.css?17885648483775 */
/* /local/templates/owenkomplekt/ui/dotted-list/style.css?17884454242816 */
/* /local/components/oka/product.reviews/templates/product/style.css?17885664969598 */
/* /local/components/oka/products.carousel/templates/.default/style.css?17884454242037 */