.product-stock {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    justify-content: center;

    font-size: 13px;
    line-height: 1.35;
}

.product-stock__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.product-stock__label {
    font-weight: 500;
}

.product-stock__quantity {
    font-weight: 600;
}

.product-stock--available {
    color: #27813b;
}

.product-stock--available .product-stock__dot {
    background: #2f9e44;
}

.product-stock--clarify {
    color: #9a6800;
}

.product-stock--clarify .product-stock__dot {
    background: #e2a100;
}

.product-stock--unknown {
    color: #777;
}

.product-stock--unknown .product-stock__dot {
    background: #a2a2a2;
}

.product-stock--order {
    color: #b26a00;
}

.product-stock--clarify {
    color: #777;
}

.product-stock__label--order {
    color: #b26a00;
}

.product-stock__label--clarify {
    color: #777;
}


.product-stock {
    cursor: help;
}

.product-availability,
.ppa-mobile-product-actions__availability {
    cursor: help;
}

.product-availability__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.product-availability__main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.product-availability__updated {
    color: #929292;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

.product-availability,
.product-stock {
    position: relative;
    overflow: visible;
}



/*
 * =========================================================
 * Расширенная информация об остатках.
 * =========================================================
 */

.product-stock-wrapper,
.product-availability-wrapper {
    width: 100%;
}


.stock-details-panel {
    width: 100%;

    margin-top: 8px;

    border: 1px solid #e1e1e1;
    border-radius: 10px;

    background: #fff;

    overflow: hidden;
}


.stock-details-panel__summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;

    padding: 11px 14px;

    box-sizing: border-box;

    cursor: pointer;

    font-size: 13px;
    font-weight: 600;

    color: #333;

    background: #f7f7f7;

    user-select: none;
}


.stock-details-panel__summary::-webkit-details-marker {
    display: none;
}


.stock-details-panel__summary::marker {
    content: "";
}


.stock-details-panel__arrow {
    flex-shrink: 0;

    font-size: 14px;

    transition:
        transform 0.2s ease;
}


.stock-details-panel[open]
.stock-details-panel__arrow {
    transform: rotate(180deg);
}


.stock-details-panel__content {
    width: 100%;

    padding: 15px;

    box-sizing: border-box;
}


.stock-details-panel__section
+ .stock-details-panel__section {
    margin-top: 18px;

    padding-top: 15px;

    border-top: 1px solid #e7e7e7;
}


.stock-details-panel__title {
    margin-bottom: 10px;

    font-size: 14px;
    font-weight: 700;

    color: #222;
}


/*
 * Верхняя информация.
 */




/*
 * Карточки физических остатков.
 */
.stock-details-panel__stats {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;
}


/*
 * Таблица размеров.
 */
.stock-details-panel__table-wrap {
    width: 100%;

    overflow-x: auto;
}


.stock-details-panel__table {
    width: 100%;

    border-collapse: collapse;

    font-size: 13px;
}


.stock-details-panel__table th,
.stock-details-panel__table td {
    padding: 8px 10px;

    border-bottom: 1px solid #ececec;

    text-align: right;

    vertical-align: middle;

    white-space: nowrap;
}


.stock-details-panel__table th:first-child,
.stock-details-panel__table td:first-child {
    text-align: left;
}


.stock-details-panel__table th {
    font-size: 12px;
    font-weight: 600;

    color: #666;

    background: #f8f8f8;
}


.stock-details-panel__table tbody tr:last-child td {
    border-bottom: 0;
}


/*
 * Небольшой hover только у строки таблицы.
 * Никаких всплывающих элементов.
 */
.stock-details-panel__table tbody tr:hover {
    background: #fafafa;
}


/*
 * =========================================================
 * Адаптив.
 * =========================================================
 */



@media (max-width: 700px) {
    .stock-details-panel__content {
        padding: 12px;
    }


    .stock-details-panel__summary {
        padding: 10px 12px;
    }
}


/*
 * Компактные строки информации.
 */
.stock-details-panel__compact {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 6px 24px;
}


.stock-details-panel__compact-item {
    display: flex;

    align-items: baseline;

    gap: 6px;

    min-width: 0;

    font-size: 13px;
    line-height: 1.35;
}


.stock-details-panel__compact-item span {
    color: #666;
}


.stock-details-panel__compact-item strong {
    color: #222;

    font-weight: 600;

    white-space: nowrap;
}


/*
 * Физический остаток чуть отделяем,
 * но без карточек.
 */
.stock-details-panel__compact--stock {
    gap: 6px 28px;
}


/*
 * Сам блок становится компактнее.
 */
.stock-details-panel__content {
    padding: 12px 14px;
}


.stock-details-panel__section
+ .stock-details-panel__section {
    margin-top: 12px;

    padding-top: 10px;

    border-top: 1px solid #e7e7e7;
}


.stock-details-panel__title {
    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 700;
}


/*
 * На узком экране строки аккуратно
 * переносятся друг под друга.
 */
@media (max-width: 600px) {
    .stock-details-panel__compact {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 7px 14px;
    }


    .stock-details-panel__compact-item {
        display: block;
    }


    .stock-details-panel__compact-item span,
    .stock-details-panel__compact-item strong {
        display: block;
    }


    .stock-details-panel__compact-item strong {
        margin-top: 2px;

        white-space: normal;
    }
}




/*
 * =========================================================
 * Раскрытие остатков прямо из блока "Наличие".
 * =========================================================
 */

.product-stock-details {
    width: 100%;
    margin: 0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

/*
 * Сам summary выглядит как обычный
 * существующий блок наличия.
 */
.product-stock-details__summary {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    cursor: pointer;

    list-style: none;

    padding-right: 42px;
}


.product-stock-details__summary::-webkit-details-marker {
    display: none;
}


.product-stock-details__summary::marker {
    content: "";
}


/*
 * Стрелка.
 */
.product-stock-details__arrow {
    position: absolute;

    top: 50%;
    right: 16px;

    width: 8px;
    height: 8px;

    border-right: 2px solid #555;
    border-bottom: 2px solid #555;

    transform:
        translateY(-65%)
        rotate(45deg);

    transition:
        transform 0.18s ease;
}


/*
 * При раскрытии стрелка вверх.
 */
.product-stock-details[open]
.product-stock-details__arrow {
    transform:
        translateY(-25%)
        rotate(225deg);
}


/*
 * Небольшой hover только сотруднику,
 * чтобы было понятно, что блок кликабельный.
 */
.product-stock-details__summary:hover {
    background: #fafafa;
}


/*
 * Раскрытая информация.
 */
.product-stock-details
.stock-details-panel__content {
    border-top: 1px solid #e7e7e7;
}


/*
 * Если существующий .product-availability
 * уже имеет собственную рамку/радиус,
 * внутри details её убираем,
 * чтобы не было двойной рамки.
 */
.product-stock-details
.product-availability {
    border: 0;
    border-radius: 0;

    margin: 0;
}

































/*
 * =========================================================
 * Каталог — hover с подробным остатком.
 * =========================================================
 */

.product-stock-wrapper {
    position: relative;
}


.product-stock {
    position: relative;
}


.product-stock--has-tooltip {
    cursor: help;
}


.product-stock-tooltip {
    position: absolute;

    z-index: 5000;

    left: 0;
    bottom: calc(100% + 8px);

    width: 330px;
    max-width: calc(100vw - 30px);
    max-height: 420px;

    padding: 13px;

    box-sizing: border-box;

    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.16);

    color: #222;

    font-size: 12px;
    line-height: 1.35;

    opacity: 0;
    visibility: hidden;

    transform: translateY(4px);

    pointer-events: none;

    overflow-y: auto;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
}


.product-stock:hover
.product-stock-tooltip,

.product-stock:focus
.product-stock-tooltip,

.product-stock:focus-within
.product-stock-tooltip {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


.product-stock-tooltip__title {
    margin-bottom: 9px;

    font-size: 13px;
    font-weight: 700;
}


.product-stock-tooltip__subtitle {
    margin-bottom: 6px;

    font-weight: 700;
}


.product-stock-tooltip__row {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    gap: 14px;

    margin-top: 4px;
}


.product-stock-tooltip__row span {
    color: #666;
}


.product-stock-tooltip__row strong {
    text-align: right;

    white-space: nowrap;
}


.product-stock-tooltip__divider {
    height: 1px;

    margin: 9px 0;

    background: #e8e8e8;
}


.product-stock-tooltip__compact {
    display: flex;
    flex-wrap: wrap;

    gap: 5px 14px;
}


.product-stock-tooltip__compact span {
    color: #666;
}


.product-stock-tooltip__compact strong {
    color: #222;
}


.product-stock-tooltip__sizes {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.product-stock-tooltip__size {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    gap: 12px;
}


.product-stock-tooltip__size span {
    white-space: nowrap;
}


.product-stock-tooltip__size strong {
    text-align: right;

    white-space: nowrap;
}


.product-stock-tooltip__more {
    margin-top: 6px;

    color: #777;
}


.product-stock-tooltip__hint {
    margin-top: 10px;
    padding-top: 8px;

    border-top: 1px solid #eee;

    color: #999;

    font-size: 11px;
}


/* =========================================================
   MOBILE STOCK DETAILS
   ========================================================= */

@media (max-width: 700px) {

    /*
     * Оригинальный desktop tooltip
     * на мобильном вообще не показываем.
     */
    .product-stock-tooltip {
        display: none !important;
    }

    .product-stock--has-tooltip {
        cursor: pointer;
    }

    body.stock-sheet-open {
        overflow: hidden;
    }
}


/*
 * Затемнение страницы.
 */
.stock-mobile-backdrop {
    position: fixed;
    inset: 0;

    z-index: 19998;

    background: rgba(0, 0, 0, 0.38);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


/*
 * Нижняя панель.
 */
.stock-mobile-sheet {
    position: fixed;

    z-index: 19999;

    left: 8px;
    right: 8px;
    bottom: 8px;

    max-height: min(70vh, 520px);

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 -4px 30px
        rgba(0, 0, 0, 0.18);

    transform: translateY(
        calc(100% + 20px)
    );

    visibility: hidden;

    transition:
        transform 0.22s ease,
        visibility 0.22s ease;

    overflow: hidden;
}


/*
 * Открытое состояние.
 */
.stock-mobile-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.stock-mobile-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
}


/*
 * Верх панели.
 */
.stock-mobile-sheet__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 14px 16px;

    border-bottom: 1px solid #eee;
}


.stock-mobile-sheet__title {
    font-size: 16px;
    font-weight: 700;
}


.stock-mobile-sheet__close {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f3f3f3;

    color: #333;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;
}


/*
 * Контент.
 */
.stock-mobile-sheet__content {
    max-height: calc(70vh - 64px);

    padding: 12px 16px 18px;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}


/*
 * Немного адаптируем существующий
 * tooltip-контент внутри mobile sheet.
 */
.stock-mobile-sheet
.product-stock-tooltip__title {
    margin-bottom: 10px;

    font-size: 14px;
}


.stock-mobile-sheet
.product-stock-tooltip__supplier-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 3px 12px;

    padding: 7px 0;
}


.stock-mobile-sheet
.product-stock-tooltip__warehouses {
    margin:
        6px
        0
        10px
        0;

    padding-left: 0;

    border-left: 0;
}


.stock-mobile-sheet
.product-stock-tooltip__warehouse-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding: 6px 0;

    border-bottom: 1px solid #f0f0f0;

    font-size: 12px;
}


.stock-mobile-sheet
.product-stock-tooltip__warehouse-row:last-child {
    border-bottom: 0;
}


.stock-mobile-sheet
.product-stock-tooltip__warehouse-quantity {
    text-align: right;

    white-space: nowrap;
}




.stock-suppliers-list {
    display: flex;
    flex-direction: column;
}


.stock-suppliers-list__row {
    display: grid;

    grid-template-columns:
        minmax(130px, 1fr)
        auto
        auto;

    align-items: center;

    gap: 12px;

    padding: 6px 0;

    border-bottom: 1px solid #eeeeee;

    font-size: 13px;
}


.stock-suppliers-list__row:last-child {
    border-bottom: 0;
}


.stock-suppliers-list__supplier {
    min-width: 0;

    font-weight: 500;
}


.stock-suppliers-list__quantity {
    white-space: nowrap;

    text-align: right;
}


.stock-suppliers-list__updated {
    white-space: nowrap;

    color: #888;

    font-size: 11px;

    text-align: right;
}


.stock-suppliers-list__empty {
    color: #888;

    font-size: 12px;
}


@media (max-width: 600px) {
    .stock-suppliers-list__row {
        grid-template-columns:
            1fr
            auto;
    }


    .stock-suppliers-list__updated {
        grid-column: 1 / -1;

        text-align: left;
    }
}




.product-stock-tooltip__supplier-row {
    display: grid;

    grid-template-columns:
        minmax(120px, 1fr)
        auto;

    gap: 2px 12px;

    align-items: center;

    padding: 5px 0;

    border-bottom: 1px solid #eeeeee;
}


.product-stock-tooltip__supplier-row:last-child {
    border-bottom: 0;
}


.product-stock-tooltip__supplier-name {
    min-width: 0;
}


.product-stock-tooltip__supplier-quantity {
    white-space: nowrap;

    text-align: right;
}


.product-stock-tooltip__supplier-date {
    grid-column: 1 / -1;

    color: #999;

    font-size: 10px;
}



.stock-suppliers-list__item {
    padding: 0;
}


.stock-suppliers-list__item + .stock-suppliers-list__item {
    margin-top: 10px;
}


.supplier-warehouses {
    margin-top: 6px;
    margin-left: 10px;

    padding: 8px 10px;

    background: #f8f8f8;

    border-radius: 6px;
}


.supplier-warehouses__title {
    margin-bottom: 5px;

    color: #777;

    font-size: 11px;
    font-weight: 600;
}


.supplier-warehouses__row {
    display: grid;

    grid-template-columns:
        minmax(120px, 1fr)
        auto;

    gap: 2px 12px;

    align-items: center;

    padding: 4px 0;

    border-bottom: 1px solid #e9e9e9;

    font-size: 12px;
}


.supplier-warehouses__row:last-child {
    border-bottom: 0;
}


.supplier-warehouses__row--current {
    font-weight: 500;
}


.supplier-warehouses__name {
    min-width: 0;
}


.supplier-warehouses__quantity {
    white-space: nowrap;

    text-align: right;
}


.supplier-warehouses__updated {
    grid-column: 1 / -1;

    color: #999;

    font-size: 10px;
}









.stock-suppliers-list__item + .stock-suppliers-list__item {
    margin-top: 10px;
}


.supplier-warehouses {
    margin-top: 6px;
    margin-left: 10px;
    padding: 8px 10px;

    background: #f8f8f8;
    border-radius: 6px;
}


.supplier-warehouses__title {
    margin-bottom: 5px;

    color: #777;

    font-size: 11px;
    font-weight: 600;
}


.supplier-warehouses__row {
    display: grid;

    grid-template-columns:
        minmax(120px, 1fr)
        auto;

    gap: 2px 12px;

    align-items: center;

    padding: 4px 0;

    border-bottom: 1px solid #e9e9e9;

    font-size: 12px;
}


.supplier-warehouses__row:last-child {
    border-bottom: 0;
}


.supplier-warehouses__row--current {
    /*font-weight: 600;*/
    color: #228726;
}


.supplier-warehouses__quantity {
    white-space: nowrap;
    text-align: right;
}


.supplier-warehouses__updated {
    grid-column: 1 / -1;

    color: #999;

    font-size: 10px;
}


.supplier-warehouses__current {
    margin-left: 5px;
    color: #777;
    font-size: 10px;
    font-weight: 400;
}





.product-stock-tooltip__warehouses {
    margin: 4px 0 7px 10px;
    padding-left: 8px;

    border-left: 2px solid #e8e8e8;
}


.product-stock-tooltip__warehouse-row {
    display: grid;

    grid-template-columns:
        minmax(90px, 1fr)
        auto;

    gap: 8px;

    align-items: center;

    padding: 2px 0;

    font-size: 11px;
}


.product-stock-tooltip__warehouse-name {
    min-width: 0;
}


.product-stock-tooltip__warehouse-name small {
    margin-left: 3px;

    font-size: 9px;
    font-weight: 400;

    opacity: .65;
}


.product-stock-tooltip__warehouse-quantity {
    white-space: nowrap;

    text-align: right;
}


.product-stock-tooltip__warehouse-row--current {
    /*font-weight: 600;*/
    color: #228726;
}

.supplier-warehouses__reserve {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 400;
    opacity: .7;
}


.product-stock-tooltip__reserve {
    margin-left: 3px;
    font-size: 11px;
    font-weight: 400;
    opacity: .65;
}

.product-stock-tooltip__updated {
    margin-top: -4px;
    margin-bottom: 8px;

    color: #999;
    font-size: 10px;
    font-weight: 400;
}


.stock-suppliers-list__public-updated {
    margin: 3px 0 7px;
    color: #999;
    font-size: 10px;
    font-weight: 400;
}

.status-order {
    color: #b26a00;
}

.ppa-status-order {
    color: #b26a00;
}