/* ==========================================================================
   Страница «Карточка товара»
   Слева фотография, описание, характеристики, документы и текстовые блоки;
   справа — карточка заявки (side-cta.css) с примечанием под ней.

   Figma: 125:2295 — десктоп 1440 × 2288
          278:6296 — мобильный 375 × 3243
          278:6848 — мобильный, кнопка закреплена внизу экрана
          278:7089 — мобильный, открытая нижняя шторка с формой

   Комментарий дизайнера (278:7571): «При скролле фиксировать кнопку
   внизу экрана» — сделано на ширинах до 1024px.

   WP: template-parts/blocks/product.php
   ========================================================================== */

.product {
    /* 22px сверху: строка «Поделиться» на 20px выше крошек, и в макете
       крошки при этом стоят ровно на 128px от верха страницы */
    padding: 22px 0 96px;
}

/* Строка с хлебными крошками и ссылкой «Поделиться» */
.product__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* --------------------------------------------------------------------------
   Две колонки: 872 + 88 + 360 = 1320
   -------------------------------------------------------------------------- */

.product__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 88px;
    align-items: start;
    margin-top: 14px;
}

.product__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

/* --------------------------------------------------------------------------
   Фотография и описание
   -------------------------------------------------------------------------- */

.product__head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Плашка квадратная, снимок внутри стоит с полями — так он выгружен из макета */
.product__photo {
    position: relative;
    flex-shrink: 0;
    width: 312px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--c-grey-200);
}

.product__photo img {
    position: absolute;
    top: 16.39%;
    left: 10.62%;
    width: 79.01%;
    height: 79.01%;
    max-width: none;
    object-fit: contain;
}

.product__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
}

.product__title-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product__title {
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    overflow-wrap: break-word;
    color: var(--c-grey-800);
}

.product__desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

.product__desc p + p {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Характеристики — строка с отточием между названием и значением
   В макете точки набраны прямо в тексте и обрезаются рамкой; здесь они
   рисуются из CSS, чтобы в разметке остались только название и значение
   -------------------------------------------------------------------------- */

.product__specs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 312px;
}

.product__specs-title {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.product__specs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.product__spec {
    display: flex;
    align-items: center;
}

.product__spec dt {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--c-grey-500);
}

.product__spec dt::after {
    content: "................................................................................................................";
}

.product__spec dd {
    flex-shrink: 0;
    margin: 0;
    white-space: nowrap;
    color: var(--c-grey-800);
}

/* --------------------------------------------------------------------------
   Документы и сертификаты
   -------------------------------------------------------------------------- */

.product__docs {
    margin-top: 24px;
}

.docs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--c-grey-300);
}

.docs__title {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.docs__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.docs__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.docs__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: var(--c-red-500);
}

.docs__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.docs__name {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-dark-blue-800);
}

.docs__note {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
}

/* Документ, которого пока нет: в макете он приглушён прозрачностью */
.docs__item--soon .docs__icon {
    opacity: 0.7;
}

.docs__item--soon .docs__icon img {
    opacity: 0.6;
}

.docs__item--soon .docs__name {
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Текстовые разделы
   -------------------------------------------------------------------------- */

.product__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 56px;
}

.product__text-title {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.product__text p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

/* В макете абзацы разделены пустой строкой */
.product__text p + p {
    margin-top: 1.4em;
}

/* Таблица характеристик товара: любое число столбцов. table-layout: fixed —
   чтобы столбцы делили ширину поровну и последний столбец не зажимался.
   Первый столбец (показатель) шире остальных. */
.product__table {
    width: 100%;
    table-layout: fixed;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-grey-800);
}

.product__table th,
.product__table td {
    padding: 10px 16px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--c-grey-300);
    overflow-wrap: break-word;
}

.product__table th {
    font-weight: 500;
    background-color: var(--c-grey-200);
}

/* Первый столбец — показатель: шире, остальные (значения) делят ширину
   поровну благодаря table-layout: fixed. */
.product__table tr > :first-child {
    width: 42%;
}

/* --------------------------------------------------------------------------
   Похожие товары
   -------------------------------------------------------------------------- */

.product-similar {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--c-grey-300);
}

.product-similar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.product-similar__title {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

/* Подпись ссылки на широких экранах длиннее, на мобильном — короткая */
.product-similar__link-short {
    display: none;
}

.product-similar__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Планшет
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .product__grid {
        gap: 40px;
    }

    .product__photo {
        width: 260px;
    }

    .product-similar__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Ниже 1024px всё встаёт в одну колонку. Порядок блоков при этом другой:
   в макете примечание стоит внутри описания — между характеристиками
   и документами. Чтобы не дублировать разметку, обёртки колонок
   растворяются (display: contents), а порядок задаётся order */
@media (max-width: 1023px) {
    /* без хлебных крошек строка выше, и отбивки в макете другие */
    .product {
        padding-top: 14px;
    }

    .product__grid {
        display: flex;
        flex-direction: column;
        /* align-items: start из десктопной сетки в колонке сжал бы блоки
           по содержимому */
        align-items: stretch;
        gap: 0;
        margin-top: 8px;
    }

    .product__main,
    .product__side {
        display: contents;
    }

    .product__head {
        order: 1;
    }

    .side-note {
        order: 2;
        margin-top: 24px;
    }

    .product__docs {
        order: 3;
        margin-top: 24px;
    }

    .product__text {
        order: 4;
    }

    /* сама форма на узких экранах живёт в нижней шторке */
    .side-cta {
        display: none;
    }

    .product-similar__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .product {
        padding-bottom: 56px;
    }

    /* «Назад» вместо хлебных крошек — так в мобильном макете */
    .product__top {
        align-items: flex-start;
    }

    /* align-items: flex-start из десктопа в колонке сжал бы блоки
       по содержимому, поэтому здесь тянем их на всю ширину */
    .product__head {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .product__photo {
        width: 100%;
    }

    .product__title {
        font-size: 24px;
    }

    .product__specs {
        width: 100%;
    }

    .docs__list {
        flex-direction: column;
        gap: 12px;
    }

    .product__text {
        margin-top: 56px;
    }

    .product__text-title {
        font-size: 20px;
    }

    .product-similar__head {
        gap: 16px;
    }

    .product-similar__title {
        font-size: 20px;
        white-space: nowrap;
    }

    /* на мобильном ссылка короче и мельче — так в макете */
    .product-similar__head .link-arrow {
        font-size: 14px;
    }

    .product-similar__head .link-arrow img {
        width: 20px;
        height: 20px;
    }

    .product-similar__link-full {
        display: none;
    }

    .product-similar__link-short {
        display: inline;
    }

    /* лента с горизонтальной прокруткой: карточки уходят за правый край */
    .product-similar__list {
        display: flex;
        gap: 8px;
        margin-right: calc(-1 * var(--container-pad));
        padding-right: var(--container-pad);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .product-similar__list::-webkit-scrollbar {
        display: none;
    }

    .product-similar__list > * {
        flex: 0 0 168px;
    }
}

/* --------------------------------------------------------------------------
   Закреплённая внизу кнопка и нижняя шторка с формой
   Figma: 278:7084 и 278:7376
   -------------------------------------------------------------------------- */

.product-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    /* Заказчик попросил уменьшить отступ снизу до края экрана (было 40px) */
    padding: 12px 16px 16px;
    background-color: #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
}

.sheet[hidden] {
    display: none;
}

.sheet__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.sheet__box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-height: 92vh;
    padding: 32px 16px 40px;
    overflow-y: auto;
    border-radius: 32px 32px 0 0;
    background-color: #ffffff;
}

/* Полоска-«ручка» сверху и крестик — из макета */
.sheet__handle {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 40px;
    height: 4px;
    border-radius: 100px;
    background-color: #adb5bd;
    transform: translateX(-50%);
}

.sheet__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
}

.sheet__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sheet__title {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.sheet__desc {
    max-width: 258px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
}

.sheet__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sheet__fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* На широких экранах ни закреплённой кнопки, ни шторки нет:
   форма стоит в боковой колонке */
@media (min-width: 1024px) {
    .product-bar,
    .sheet {
        display: none;
    }
}

/* Кнопка перекрывает низ подвала, поэтому под ним добавлено поле */
@media (max-width: 1023px) {
    body.has-product-bar .footer {
        padding-bottom: 80px;
    }
}