/* /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; }
}


/* === 2026-10-02: блок «Характеристики» после описания (.igr-chars) — плитки + чипы ===
 * Цвета через переключатели Aspro --light/--dark (body.theme-light/-dark/-default + prefers-color-scheme),
 * поэтому светлая, тёмная и «как в системе» работают сами. Разметка — catalog.element/main/template.php (SITE_ID s1).
 */
.char_block.igr-chars {
    --igr-tile:    var(--light, #f6f7f9) var(--dark, #262626);
    --igr-tile-bd: var(--light, #eceef1) var(--dark, #313131);
    --igr-tile-hv: var(--light, #f1f3f6) var(--dark, #2b2b2b);
    --igr-label:   var(--light, #80868f) var(--dark, #8f8f8f);
    --igr-text:    var(--light, #1f2328) var(--dark, #f1f1f1);
    --igr-chip:    var(--light, #ffffff) var(--dark, #333333);
    --igr-chip-bd: var(--light, #e2e5e9) var(--dark, #3e3e3e);
    --igr-ru-bg:   var(--light, #e9f8ef) var(--dark, rgba(52, 199, 89, .14));
    --igr-ru-bd:   var(--light, #b9e6c9) var(--dark, rgba(74, 222, 128, .35));
    --igr-ru-fg:   var(--light, #15803d) var(--dark, #4ade80);
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
}
.igr-chars__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.igr-chars__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--igr-tile);
    border: 1px solid var(--igr-tile-bd);
    border-radius: 14px;
    transition: background-color .15s ease;
}
.igr-chars__item:hover { background: var(--igr-tile-hv); }
.igr-chars__item--wide { flex-basis: 100%; }
.igr-chars__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--igr-label);
}
.igr-chars__name .hint { margin: 0; }
.igr-chars__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
    color: var(--igr-text);
    overflow-wrap: anywhere;
}
.igr-chars__value a { color: inherit; text-decoration: underline; text-decoration-color: var(--igr-chip-bd); text-underline-offset: 3px; }
.igr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--igr-text);
    background: var(--igr-chip);
    border: 1px solid var(--igr-chip-bd);
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
}
.igr-chip--ru {
    order: -1;
    font-weight: 700;
    color: var(--igr-ru-fg);
    background: var(--igr-ru-bg);
    border-color: var(--igr-ru-bd);
}
.igr-chip__ico { flex: none; }
@media (max-width: 767px) {
    .igr-chars__grid { gap: 8px; }
    .igr-chars__item { flex-basis: calc(50% - 4px); padding: 12px; border-radius: 12px; gap: 5px; }
    .igr-chars__name { font-size: 11px; letter-spacing: .03em; }
    .igr-chars__value { font-size: 14px; line-height: 19px; gap: 5px; }
    .igr-chip { padding: 3px 9px; font-size: 12.5px; }
    .igr-chars__item--wide { flex-basis: 100%; }
}
@media (max-width: 359px) {
    .igr-chars__item { flex-basis: 100%; }
}

.ordered-block.desc .detail-text-wrap {
    padding: 16px 18px;
    background: var(--light, #f6f7f9) var(--dark, #262626);
    border: 1px solid var(--light, #eceef1) var(--dark, #313131);
    border-radius: 14px;
    color: var(--light, #1f2328) var(--dark, #f1f1f1);
    font-size: 15px;
    line-height: 22px;
    overflow-wrap: anywhere;
}
.ordered-block.desc .detail-text-wrap b,
.ordered-block.desc .detail-text-wrap strong,
.ordered-block.desc .detail-text-wrap h2,
.ordered-block.desc .detail-text-wrap h3,
.ordered-block.desc .detail-text-wrap h4 { color: var(--light, #1f2328) var(--dark, #ffffff); }
.ordered-block.desc .detail-text-wrap a { color: inherit; text-decoration: underline; text-decoration-color: var(--light, #e2e5e9) var(--dark, #3e3e3e); text-underline-offset: 3px; }
@media (max-width: 767px) {
    .ordered-block.desc .detail-text-wrap { padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font-size: inherit; line-height: inherit; }
}

.assoc-block .owl-carousel .owl-item { padding: 0 8px; }
.assoc-block .owl-carousel .owl-stage-outer { margin: 0 -8px; }
.assoc-block .catalog_block.items:not(.owl-carousel) { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 767px) {
    .assoc-block .owl-carousel .owl-item { padding: 0 5px; }
    .assoc-block .owl-carousel .owl-stage-outer { margin: 0 -5px; }
}

body .char-side {
    padding: 14px 16px;
    background: var(--light, #f6f7f9) var(--dark, #262626);
    border: 1px solid var(--light, #eceef1) var(--dark, #313131);
    border-radius: 14px;
}
body .char-side__title { color: var(--light, #1f2328) var(--dark, #f1f1f1) !important; margin-bottom: 8px; }
body .char-side .properties__title.muted,
body .char-side .properties__hr.muted { color: var(--light, #80868f) var(--dark, #b4b8c2) !important; }
body .char-side .properties__value { color: var(--light, #1f2328) var(--dark, #f1f1f1) !important; }

body .igr-chars__item,
body .ordered-block.desc .detail-text-wrap,
body .char-side,
body .igr-c .igr-wk-hint,
body .igr-c-all,
body .igr-c-how__l li,
body .igr-rc-how .igr-c-how__l li,
body .igr-c .offers .table-view__item,
body .product-info.bordered,
body .product-info.igr-has-bg,
body .igr-rc,
body .igr-rc [class*="igr-rc__"]:not(.is-active),
body .igr-rc [class*="igrp"]:not(.is-active),
body .assoc-block .item_block,
body .assoc-block .catalog_item { border-color: transparent !important; }