/* Шрифт и фон задаёт brand.css — здесь только страница товара */
.container { max-width: 1200px; margin: auto; padding: 20px; }

/* Основной товар.
   Здесь именно обтекание (float), а не flex: во flex-колонке текст упирается
   в нижний край картинки и дальше идёт узкой лентой. С float описание сначала
   идёт справа от фото, а когда фото закончилось — продолжается под ним во всю
   ширину карточки. */
.product-main {
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: var(--radius, 16px);
    padding: 20px;
}

/* Разворачиваем контейнер, иначе он схлопнется вокруг плавающей картинки */
.product-main::after {
    content: '';
    display: block;
    clear: both;
}

.product-image {
    float: left;
    width: 420px;
    max-width: 45%;
    margin: 0 24px 20px 0;
    text-align: center;
}

.product-image img { max-width: 100%; height: auto; border-radius: var(--radius, 16px); }

/* Без ширины и без overflow — только так содержимое обтекает картинку */
.product-info { display: block; }
.product-info h1 { margin: 0 0 10px; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--ink, #0f172a); }
.product-prices { margin-bottom: 10px; }

.product-price { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink, #0f172a); }

.btn { display: inline-block; padding: 13px 20px; border-radius: var(--radius-sm, 10px); font-weight: 600; text-decoration: none; color: #fff; text-align: center; margin-top: 10px; }
.btn-buy-main { background-color: var(--brand, #2563eb); }
.btn-buy-main:hover { background-color: var(--brand-dark, #1d4ed8); color: #fff; }

/* Плавающая кнопка «Подробнее» внизу экрана телефона.
   На десктопе её нет: там кнопка в карточке и так на виду. */
.product-buy-float { display: none; }

@media (max-width: 640px) {
    .product-buy-float {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        color: #fff;
        background: var(--brand, #2563eb);
        border-radius: var(--radius-sm, 10px);
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
    }

    .product-buy-float::before { content: "↗"; font-size: 15px; }
    .product-buy-float:active { background: var(--brand-dark, #1d4ed8); }

    /* Кнопка в карточке не нужна: то же действие уже внизу экрана */
    .btn-buy-main { display: none; }

    /* Чтобы кнопка не закрывала конец страницы */
    body { padding-bottom: 76px; }
}
.btn-details-main { background-color: #334155; }
.btn-details-main:hover { background-color: #1e293b; color: #fff; }

.product-description { margin-top: 18px; font-size: 1rem; color: #334155; line-height: 1.6; }
.product-description p { margin: 0 0 14px; }
.product-description p:last-child { margin-bottom: 0; }
.product-description h2 {
    margin: 22px 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #0f172a);
}
.product-description strong { color: var(--ink, #0f172a); }

/* Другие товары */
.other-products { margin-top: 40px; }
.other-products h2 { text-align: center; margin-bottom: 20px; }
/* Похожие товары — та же сетка «8 в ряд», что и в каталоге */
.other-products-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1600px) { .other-products-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .other-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .other-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .other-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.other-products-grid .card {
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: var(--radius, 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.other-products-grid .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.1); }

.card img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; background: #f1f5f9; }

.card h4 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    margin: 10px 12px 0;
    /* Две строки — иначе карточки в ряду разной высоты */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Ссылка на поиск по товару под заголовком: «тв-тумба монсон» */
.product-info .product-search-link {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--brand, #2563eb);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    background: #eef3fe;
    border-radius: 999px;
}
.product-info .product-search-link::before { content: "🔍 "; font-size: 11px; }
.product-info .product-search-link:hover { background: var(--brand, #2563eb); color: #fff; text-decoration: none; }
.card .price-new { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 12px 10px; color: var(--ink, #0f172a); }

.card .card-buttons { margin-top: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.card .btn-buy-other,
.card .btn-details-other {
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm, 10px);
    text-decoration: none;
    color: #fff;
}
.card .btn-buy-other { background-color: var(--brand, #2563eb); }
.card .btn-buy-other:hover { background-color: var(--brand-dark, #1d4ed8); color: #fff; }
.card .btn-details-other { background-color: #f1f5f9; color: var(--ink, #0f172a); }
.card .btn-details-other:hover { background-color: #e2e8f0; color: var(--ink, #0f172a); }

@media (max-width: 768px) {
    .product-image { float: none; width: 100%; max-width: none; margin: 0 0 16px; }
}