@layer pages {
/* [GRP: BASE] */
/* [SEC: Vars/Reset] — токены, алиасы, box-sizing, body font → common.css */

/* C-4/E-19: body.padding-bottom → var(--body-pb). Переменная в :root — safe override без "порядка файлов".
   ВАЖНО: cart-bar.css (@media max-width:768px) переопределяет на 160px для мобильного sticky footer. */
:root { --body-pb: 80px; }

/* [SEC: Layout Grid] */
.p-layout {
    max-width: var(--container-content);   /* H-1: 1200px → переменная */
    margin: 0 auto;
    background: transparent;   /* C-3/E-18: --card-bg был алиасом transparent, удалён */
    min-height: 100vh;
    overflow: hidden;
}

/* C-2: инфо-колонке нужно больше места — в ней h1, теги, цена, опции, описание, кнопки.
   Стандарт e-commerce 2026: фото 40-45%, инфо 55-60%.
   ВАЖНО: fr вместо %. Проценты считаются от content box ДО вычета gap →
   45%+55%+24px(gap) = 100%+24px = overflow 24px. fr делит ПОСЛЕ gap → точно. */
.p-grid {
    display: grid;
    grid-template-columns: 9fr 11fr;      /* 9:11 = 45:55, gap-safe */
    gap: 0 24px;                          /* C-2: gap между колонками */
    padding: 0 20px 40px;
    max-width: 100%;
}

.p-gallery-col,
.p-info-col {
    min-width: 0;
}

/* Фикс: отключаем browser scroll anchoring на динамических кусках карточки.
ВАЖНО: иначе браузер сам двигает viewport при смене цены/заголовка/офферов. */
.p-layout,
.p-grid,
.p-gallery-col,
.p-info-col,
.p-options,
.p-offers,
.p-footer {
    overflow-anchor: none;
}

/* [SEC: Desktop Grid: offers под галереей, кнопки справа под характеристиками]
   ВАЖНО: .p-info-col спанит обе строки справа (grid-row: 1/3), иначе row-1 = высота .p-info-col
   и .p-offers "съезжает" вниз к кнопкам, а не ложится под миниатюры. */
@media (min-width: 769px) {
    .p-gallery-col { grid-column: 1; grid-row: 1; }
    .p-info-col    { grid-column: 2; grid-row: 1 / 3; }
    .p-grid > .p-offers {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        padding-right: 40px; /* выравниваем по правому краю галереи */
        padding-bottom: 24px;
    }
}

/* [SEC: Base Mobile] */
@media (max-width: 768px) {
    .p-layout {
        border-radius: 0;
        min-height: auto;
    }

    .p-grid {
        grid-template-columns: 1fr;
        padding: 0;
        gap: 16px;
    }

    .p-info-col {
        padding: 0 16px 24px 16px;
    }

    .p-gallery-col {
        padding: 0;
        margin: 0;
    }

    /* Мобайл: .p-offers вне .p-info-col — восстанавливаем боковые отступы */
    .p-grid > .p-offers {
        padding: 0 16px 24px;
    }
}

/* BASE>[SEC: Prevent Body Scroll in Lightbox] »»» */
body.prevent-scroll {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
    height: 100vh;
}

/* BASE>[SEC: Prevent Body Scroll in Lightbox] ««« */
} /* @layer pages */