/* =============================================================
   PAGE / PRODUCT
   
   Страница отдельного товара: галерея + описание + характеристики.
   Блок «под заказ», сопутствующие товары, юниты в списке.
   ============================================================= */

/* ---------------------------------------------------------
   ОСНОВНАЯ РАСКЛАДКА
   Десктоп: галерея (40%) + описание/спеки (60%)
   Мобилка: одна колонка
   --------------------------------------------------------- */

div.product {
    position: relative;
    display: grid;
    grid-template-columns: .4fr .6fr;
    grid-column-gap: var(--space-7);
    overflow: visible;
    padding-bottom: var(--space-5);
}

@media (min-width: 1024px) {
    div.product {
        grid-template-areas:
            "gallery description"
            "gallery specifications";
    }
}

@media (max-width: 1023px) {
    div.product {
        grid-template-columns: 1fr;
        grid-template-areas:
            "gallery"
            "specifications"
            "description";
    }
}

/* ---------------------------------------------------------
   ГАЛЕРЕЯ
   --------------------------------------------------------- */

div.product-gallery-wrapper {
    grid-area: gallery;
}

figure.product-gallery {
    display: grid;
    position: sticky;
    top: var(--space-5);
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--space-3);
    margin: 0;
}

figure.product-gallery a {
    place-content: center;
    cursor: zoom-in;
    background-color: var(--bg-page);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    margin: 0;
}

figure.product-gallery a:first-child {
    grid-area: 1 / 1 / 2 / -1;
}

figure.product-gallery img {
    display: block;
    width: 100%;
}

/* Кроме лейбла гарантии — все картинки через blend */
figure.product-gallery img:not(.warranty-label) {
    mix-blend-mode: darken;
}

figure.product-gallery img.warranty-label {
    z-index: var(--z-raised);
}

/* ---------------------------------------------------------
   ОПИСАНИЕ
   --------------------------------------------------------- */

section.product-description {
    grid-area: description;
}

div.full-description ul {
    padding: 0;
}

div.full-description ul li {
    list-style-type: square;
    line-height: var(--lh-normal);
}

/* ---------------------------------------------------------
   ХАРАКТЕРИСТИКИ
   --------------------------------------------------------- */

section.product-specifications {
    grid-area: specifications;
}

/* ---------------------------------------------------------
   СОПУТСТВУЮЩИЕ ТОВАРЫ
   --------------------------------------------------------- */

section.offered {
    margin-top: var(--space-10);
}

/* ---------------------------------------------------------
   ЮНИТЫ В СПИСКЕ (внутри страницы товара)
   --------------------------------------------------------- */

div.unit-list {
    padding: 0;
    margin-top: var(--space-7);
}

div.unit-item {
    display: grid;
    grid-template-columns: min-content 1fr auto;
    grid-column-gap: var(--space-5);
    align-items: center;
    background-color: var(--bg-page);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-1);
}

img.unit-thumbnail {
    width: 100px;
    aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------
   БЛОК «ПОД ЗАКАЗ»
   Показывается, когда товара нет в наличии — можно оформить
   предзаказ.
   --------------------------------------------------------- */

.product-order-back {
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background-color: var(--bg-surface);
    border-radius: 0 var(--radius-3xl) var(--radius-3xl);
}

.product-order-back h2 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 1.1em;
}

.product-order-back .order-back-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4) var(--space-6);
}

.product-order-back .order-back-price .label {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.product-order-back .order-back-price .value {
    font-size: 1.2em;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

@media (max-width: 767px) {
    .product-order-back .order-back-form {
        flex-direction: column;
        align-items: stretch;
    }

    .product-order-back .add-product-btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   БОКОВАЯ ПАНЕЛЬ КОРЗИНЫ (в контексте продукта)
   --------------------------------------------------------- */

.cart-sidebar {
    display: grid;
    align-self: start;
    position: relative;
    background-color: var(--bg-surface);
}

@media (min-width: 768px) {
    .cart-sidebar {
        position: sticky;
        top: var(--space-4);
        border-left: 1px solid var(--border-default);
        padding-left: var(--space-6);
    }
}

.cart-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: var(--space-6) 0;
}

.cart-heading h2 {
    font-size: 1.25rem;
    margin: 0;
}

/* ---------------------------------------------------------
   РАСЧЁТЫ КОРЗИНЫ (используется в product + cart)
   --------------------------------------------------------- */

.cart-calculations {
    margin: var(--space-4) 0;
}

.calculation-row {
    display: flex;
    justify-content: space-between;
    margin: var(--space-2) 0;
}

.calculation-row.discount dd {
    color: var(--red-700);
}

.cart-total hr {
    margin: var(--space-4) 0;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

/* ---------------------------------------------------------
   STICKY-ПАНЕЛЬ С ЦЕНОЙ (внутри сайдбара товара)
   --------------------------------------------------------- */

.sticky-bar .product-price {
    background-color: var(--bg-page);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.sticky-bar-wrapper .product-discount {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1) 2px;
    opacity: .6;
}

.sticky-bar-wrapper .price-current {
    margin-right: var(--space-2);
}

/* ---------------------------------------------------------
   РАСЧЁТЫ ЗАКАЗА (используется в product + cart)
   --------------------------------------------------------- */

.justified {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.justified :is(h2, h3) {
    color: var(--text-primary);
    font-size: 1.125rem;
    margin: 0;
}

.order-details div {
    margin-bottom: var(--space-2);
}

.order-details dd {
    font-weight: var(--fw-medium);
    margin: 0;
}

.discount-info dd {
    color: var(--red-700);
}

.order-total {
    margin-top: var(--space-2);
}

.order-total dt {
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
}

.order-total dd {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------
   ФОРМА "В КОРЗИНУ" НА СТРАНИЦЕ ТОВАРА
   --------------------------------------------------------- */

form.add-to-cart.single-product {
    display: flex;
}

.cart-submit {
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

div.submit-wrapper small,
section.recipient small {
    display: block;
    margin-top: var(--space-2);
}