/* /local/css/s1/igrostore-product.css
 * Статичные стили карточки товара igrostore (общие на ВСЕХ страницах товара).
 * Подключается через $APPLICATION->SetAdditionalCSS в init.php.
 *
 * Динамическая часть (URL фоновой картинки) приклеивается inline на .product-info.igr-has-bg
 * через OnEndBufferContent (css_optimizer.php) — у каждого товара свой URL.
 */

/* === BACKGROUND подложка на product-info (когда у товара заполнен PROP[2889]) === */
.product-info.igr-has-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
}
.product-info.igr-has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.85) 100%);
    z-index: 0;
    pointer-events: none;
}
.product-info.igr-has-bg > * {
    position: relative;
    z-index: 1;
}

/* === Скругление обложки в галерее (синхронно с подложкой) === */
.product-detail-gallery__picture,
.product-detail-gallery__link {
    border-radius: 12px;
}
.product-detail-gallery__link {
    display: block;
    overflow: hidden;
}

/* === Mobile fix: aspect-ratio обложки. Vendor задаёт height:450px фиксом
 * и width:auto!important на picture, при сжатии контейнера до 300px высота
 * остаётся 450 → картинка растягивается до 2:3. На мобиле даём height:auto. */
@media (max-width: 991px) {
    .product-detail-gallery__item--big {
        height: auto !important;
        line-height: 0 !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .product-detail-gallery__item--big .product-detail-gallery__picture {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* === Перенос хлебных крошек вниз на мобиле (под .ordered-block.reviews) ===
 * #navigation скрыт `display:none` сразу при рендере — браузер не выделяет место,
 * нет CLS-сдвига. JS на DOMContentLoaded перемещает узел и добавляет класс
 * `m-bcrumb-moved` — становится видимым уже в новой позиции, без второго layout shift.
 * DOM-порядок для Googlebot не меняется (он видит исходный HTML).
 */
@media (max-width: 991px) {
    html:not(.no-m-bcrumb) #navigation { display: none; }
    html #navigation.m-bcrumb-moved { display: block; margin-top: 16px; }
}