/* =========================================================
   PRODUCT PAGE LAYOUT
========================================================= */

.product-page {
    display: grid; /* две колонки: контент + сайдбар */
    grid-template-columns: 1fr 280px; /* основная зона + правая панель */
    gap: 25px; /* расстояние между колонками */
    margin-top: 20px; /* отступ от шапки */
    align-items: start;



}


/* =========================================================
   LEFT COLUMN (MAIN CONTENT)
========================================================= */

.product-main {
    display: flex;
    flex-direction: column;
    gap: 15px; /* расстояние между блоками */
    background: transparent; /* убираем “сплошной белый блок” */
    box-shadow: none;
}


/* =========================================================
   PRODUCT BLOCK (визуальное разделение секций)
========================================================= */

.product-main > div {
    background: #fff; /* белый фон блока */
    padding: 20px; /* внутренний отступ */
    border-radius: 10px; /* скругление */
    box-shadow: 0 3px 10px rgba(0,0,0,0.04); /* лёгкая глубина */
}


/* =========================================================
   GALLERY
========================================================= */

.product-gallery {
    display: grid; /* главное изображение + миниатюры */
    grid-template-columns: 1fr 90px; /* большая зона + thumbs */
    gap: 12px; /* расстояние между зонами */
    align-items: start;
}

/* главное изображение */
.main-image {
    width: 100%;
    height: 380px;
    touch-action: pan-y; /* чтобы не ломать вертикальный скролл */
    cursor: grab;
}

/* картинка внутри */
.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* без обрезки */
    background: #fff;
    border: 1px solid #eee;
}


/* миниатюры */
.thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;

    max-height: 380px;
    overflow-y: auto;
}

/* миниатюра */
.thumb {
    width: 100%;
    height: 70px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 6px;
}

/* активная миниатюра */
.thumb.active {
    border: 2px solid #007BFF;
}


/* =========================================================
   TITLE + PRICE
========================================================= */
.product-title {
    display: flex;              /* вертикальная структура */
    flex-direction: column;     /* имя сверху, цена снизу */
    gap: 6px;                   /* расстояние между элементами */

    margin-bottom: 15px;        /* отделяем от контента */
    padding-bottom: 10px;              /* отделение от контента */
    border-bottom: 1px solid #eee;     /* лёгкое разделение */
}

.product-title h2 {
    font-size: 22px;            /* чуть компактнее */
    font-weight: 600;           /* не перегружаем жирностью */
    line-height: 1.3;           /* читаемость */
    margin: 0;
}


/* цена под заголовком */
.product-price {
    font-size: 22px;            /* как у заголовка, но другой цвет */
    font-weight: 700;           /* акцент */
    color: #28a745;             /* маркетплейс-ассоциация: "покупка" */

    display: inline-block;      /* чтобы не растягивалась странно */
}


/* =========================================================
   DESCRIPTION
========================================================= */

.product-description {
    line-height: 1.5;
    color: #444;
}


/* =========================================================
   SPECS (характеристики)
========================================================= */

.product-specs ul {
    padding-left: 18px;
}

.product-specs li {
    margin-bottom: 6px;
    color: #555;
}

.product-specs h3 {
    margin-bottom: 12px; /* воздух под заголовком */
    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   EXTENDED SPECS (группы характеристик)
========================================================= */

.specs {
    display: grid; /* две колонки групп */
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* каждая группа */
.spec-group {
    background: #fafafa;
    padding: 12px;
    border-radius: 8px;
}

/* заголовок группы */
.spec-group h4 {
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* список характеристик */
.spec-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* строка характеристик */
.spec-group li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
    font-size: 13px;
}

/* ключ */
.spec-key {
    color: #777;
}

/* значение */
.spec-value {
    color: #111;
    font-weight: 500;
    word-break: break-word;
}


/* =========================================================
   SIDEBAR
========================================================= */

.product-sidebar {
    position: sticky;
    top: 10px;

    align-self: start; /* 👈 чтобы не растягивался странно */


}

/* блок покупки */
.buy-box {
    position: sticky;
    top: 20px;

    border: 1px solid #eee; /* вместо тяжёлой тени */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center; /* центрируем всё */

}


/* =========================================================
   PRICE BIG (sidebar)
========================================================= */

.price-big {
    font-size: 24px;
    font-weight: bold;
    color: #28a745;
    margin-bottom: 15px;
    width: 100%;
    text-align: center; /* цена по центру */
}


/* =========================================================
   BUY BUTTON
========================================================= */

.btn-buy {
    width: 100%;
    padding: 10px;

    background: #28a745;
    border: none;
    border-radius: 6px;

    color: white;
    font-weight: 500;

    cursor: pointer;
    transition: 0.2s;

    margin-top: 10px; /* дыхание */
}

/* hover эффект */
.btn-buy:hover {
    background: #218838;
}


/* =========================================================
   META INFO
========================================================= */

.meta {
    margin-top: 15px;
    font-size: 13px;
    color: #666;
}


/* =========================================================
   REVIEWS
========================================================= */

.reviews {
    margin-top: 20px;
}

/* общий фон блока отзывов */
.reviews {
    background: #f6f7f9;
    padding: 20px;
    border-radius: 10px;
}
.reviews h3{
    margin-bottom: 10px;
}


/* карточка отзыва */
.review-card {
    background: #fff;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: none;
}

/* верх отзыва */
.review-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.review-head strong {
    font-size: 14px;
}

/* текст */
.review-card p {
    margin: 0;
    color: #444;
}

/* дата */
.review-card small {
    font-size: 12px;
    color: #999;
}

/* =========================
   CONTENT SECTIONS (карточки смысла)
========================= */

.product-description,
.product-specs,
.specs,
.reviews {
    background: #fff; /* каждая секция = отдельный блок */
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 15px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}




/* =========================================================
   SIMILAR PRODUCTS
========================================================= */

.similar-block {
    margin-top: 20px;
}

/* один похожий товар */
.similar-item {
    display: flex;
    gap: 10px;

    padding: 8px;
    margin-bottom: 8px;

    background: #fafafa;
    border-radius: 8px;

    text-decoration: none;
    transition: 0.2s;
}

/* hover */
.similar-item:hover {
    background: #f0f0f0;
}

/* картинка */
.similar-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* название */
.similar-item .name {
    font-size: 13px;
    color: #222;
}

/* цена */
.similar-item .price {
    font-size: 12px;
    color: #007BFF;
}


/* =========================================================
   MOBILE BUY BAR
========================================================= */

.mobile-buy-bar {
    display: none;
    justify-content: space-between;
    align-items: center;

    padding: 12px 16px;
    background: #fff;

    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* 👇 ВАЖНО: цена не переносится */
.mobile-buy-bar > div {
    white-space: nowrap;   /* запрещаем перенос */
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
}

/* 👇 кнопка может ужиматься */
.mobile-buy-bar button {
    background: #28a745;
    border: none;
    color: white;

    padding: 10px 12px;
    border-radius: 8px;

    flex-shrink: 1;        /* можно сжиматься */
    white-space: nowrap;   /* текст тоже не ломаем */
}

/* мобильная панель покупки */
@media (max-width: 768px) {

 .specs {
        grid-template-columns: 1fr;
    }

    .spec-group li {
        grid-template-columns: 1fr;
    }

    .mobile-buy-bar {
        display: flex;
        position: fixed;

        bottom: 0;
        left: 0;
        right: 0;

        z-index: 9999;
    }

    /* перенос галереи */
    .product-gallery {
        grid-template-columns: 1fr;
    }

    /* горизонтальные миниатюры */
    .thumbs {
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
    }

    .thumb {
        flex: 0 0 70px;
    }

    /* колонка в одну линию */
    .product-page {
        grid-template-columns: 1fr;
    }

    .product-sidebar {
        position: static;
    }

    body {
        padding-bottom: 70px;
    }
}
/* =========================
   MOBILE CLEAN UX
========================= */

@media (max-width: 768px) {

    .product-description,
    .product-specs,
    .specs,
    .reviews {
        padding: 14px;
    }

    .price-big {
        font-size: 20px;
    }
}