/**
 * Стили страницы разноширокой пары (.page-product-pair).
 *
 * Переиспользует grid `.product-info` из product.css — здесь только
 * размещение pair-вариантов и специфичные правила для stepper'ов/лейблов.
 *
 * @see .agents/60-multiwidth-page/task.md
 */

/* Табличная раскладка stepper-блоков: каждая колонка (label / stepper / price)
   выровнена по обеим строкам (перед/зад). Alert-строка идёт под своим рядом
   и растягивается на всю ширину. Итого/кнопка тоже спан на всю строку. */
.page-product-pair .product-details {
    display: grid;
    grid-template-columns: max-content max-content auto;
    gap: 6px 24px;
    align-items: center;
}

.page-product-pair .product-order-units {
    display: contents;
}

.page-product-pair .pair-size-label {
    font-weight: 500;
}

.page-product-pair .product-order-alert {
    grid-column: 1 / -1;
    font-size: 13px;
    line-height: 1.4;
    color: var(--clr-grey, #888);
    min-height: 1.4em;
}

.page-product-pair .product-order-alert.is-error {
    color: var(--clr-dark-red, #d32f2f);
    font-weight: 500;
}

/* Размер без наличия (#164): пометка вместо степпера/цены, как на одиночной странице. */
.page-product-pair .product-order-alert--out {
    color: var(--clr-dark-red, #d32f2f);
    font-weight: 500;
}

.page-product-pair .product-total {
    grid-column: 1 / -1;
    margin-top: 18px;
}

.page-product-pair .product-actions {
    grid-column: 1 / -1;
}

/* Визуальный cue: при достижении max кнопка `+` гаснет и показывает not-allowed. */
.page-product-pair .input-stepper.is-max .plus {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Блок характеристик (перед / зад) в правой колонке, над складами. */
.page-product-pair .pair-variants {
    grid-column: 2;
    grid-row: 1;
    border: 3px solid #fabe28;
    pointer-events: none;
    cursor: default;
}

/* Два независимых блока складов (перед / зад), стекаются в колонке 2
   под блоком характеристик. grid-row авто — размещаются автоматически
   под .pair-variants (row 1). */
.page-product-pair .pair-stocks {
    grid-column: 2;
}

.page-product-pair .pair-stocks__label {
    font-weight: 500;
    margin: 8px 0 4px;
    font-size: 14px;
}

.page-product-pair .product-details {
    grid-column: 1;
    grid-row: 1 / 4;
}

/* === Mobile / tablet adaptation === */

/* Tablet: одна колонка layout'а (layout.css:332) — сбрасываем grid-позиции
   pair-блоков, чтобы они не оставались прибитыми к колонке 2. */
@media (max-width: 1023px) {
    .page-product-pair .pair-variants,
    .page-product-pair .pair-stocks {
        grid-column: auto;
        grid-row: auto;
    }

    .page-product-pair .product-details {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Mobile ≤767px: stepper'ы складываются в column, каждая строка
   «label → stepper → price → alert» — вертикальный стек. */
@media (max-width: 767px) {
    .page-product-pair .product-details {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .page-product-pair .product-order-units {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eee;
    }

    .page-product-pair .product-order-units:last-of-type {
        border-bottom: none;
    }

    .page-product-pair .pair-size-label {
        font-size: 16px;
    }

    .page-product-pair .product-order-units .input-stepper {
        align-self: flex-start;
    }

    .page-product-pair .product-order-units .product-price {
        font-size: 15px;
    }

    .page-product-pair .product-order-alert {
        grid-column: auto;
        width: 100%;
    }

    .page-product-pair .product-total,
    .page-product-pair .product-actions {
        grid-column: auto;
        width: 100%;
        margin-top: 0;
    }

    .page-product-pair .product-actions .btn {
        width: 100%;
    }

    /* Два независимых блока складов — стекуются друг под другом,
       на полную ширину контейнера. */
    .page-product-pair .pair-stocks {
        width: 100%;
    }

    .page-product-pair .pair-variants {
        width: 100%;
    }
}