@layer pages {
/* [GRP: UI] */
/* tap-highlight, focus reset → common.css */
/* [SEC: Breadcrumbs] — перенесён в common.css (.bc) */

/* [SEC: Typo & Tags] */
.p-tags {
    margin-bottom: 12px;
    margin-top: 6px;
    display: flex;
    gap: 8px;
}

.p-tag {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    /* AUDIT CTA-2: transparent border = box model совпадает с .p-tag-share (border 1px solid).
       Без этого share-кнопка на 2px выше остальных тегов, контент смещён. */
    border: 1px solid transparent;
}

.p-tag-brand {
    background: var(--text);    /* UX-2.4: #000→var(--text) — dark mode: белый на тёмном */
    color: var(--card);         /* UX-2.4: #fff→var(--card) */
    text-transform: uppercase;
}

.p-tag-blue {
    background: var(--tag-blue-bg);   /* M-7: #e0f0ff → переменная */
    color: var(--tag-blue-text);       /* M-7: #0066cc → переменная */
}

/* Артикул/desc_id — для отладки группировки карточек */
.p-tag-gray {
    background: var(--bg);            /* M-7: #f0f0f0 → var(--bg) */
    color: var(--text-muted);          /* M-7: #888 → var(--text-muted) */
    font-weight: 400;
}

/* Кнопка «Поделиться» — стилизована как тег */
/* UX-AUDIT FIX-3: Кнопка "Поделиться" — одинаковый размер с другими тегами.
   padding увеличен чтобы кнопка не выглядела квадратной.
   z-index при hover чтобы не обрезалась соседями. */
.p-tag-share {
    background: none;
    /* AUDIT CTA-2: цвет border (размер 1px уже в базовом .p-tag) */
    border-color: var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    transition: color .15s, border-color .15s, transform .15s;
    position: relative; /* для z-index при hover */
}

.p-tag-share .material-symbols-rounded { font-size: 16px; }
.p-tag-share:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px); /* ВАЖНО: transform создаёт stacking context — поднимает над соседями без z-index */
}

.p-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 10px;    /* UX-1.3: 24→10px — tight coupling заголовок→цена, каждый px задержки = bounce */
    word-break: break-word;
}

/* [SEC: Options] */
/* Фикс: обёртка группы опций (CPU, RAM, цвет и т.д.) — spacing между группами */
.option-group {
    margin-bottom: 6px;
}

.p-option-label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* [SEC: Geek Mode toggle] */
/* Строка: лейбл + toggle рядом, gap 8px — НЕ space-between (toggle прилипает к тексту) */
.p-option-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.p-option-label-row .p-option-label {
    margin-bottom: 0;
}

/* iOS-style toggle switch */
.p-geek-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.p-geek-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.p-geek-track {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--border); /* UX-A:5.7 — было: #ccc */
    transition: background .2s;
}

.p-geek-track::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--card); /* UX-A:5.7 — было: #fff */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s;
}

.p-geek-toggle input:checked + .p-geek-track {
    background: var(--accent, #007aff);
}

.p-geek-toggle input:checked + .p-geek-track::before {
    transform: translateX(16px);
}

/* [SEC: CPU Geek Layout] */
/* Page-load flash: inline script ставит data-geek-pending если режим включён.
   CSS скрывает кнопки до применения geek layout — нет мигания при загрузке. */
html[data-geek-pending] #cpu-option-group .p-option-btns {
    visibility: hidden;
}

/* Geek-legend: лёгкая подсказка с расшифровкой чипсов (ядра/потоки, частота, кэш, нм).
   Появляется при включении geek-режима, исчезает через 3с. */
.p-cpu-legend {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translate(-50%, 8px);
    background: var(--card);    /* UX-2.4: #fff→var(--card) */
    color: var(--text-muted);   /* UX-2.4: #888→var(--text-muted) */
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    /* E-17: .p-cpu-legend — floating geek-tooltip, выше sticky footer (1100), ниже cart-toast (1300) */
    z-index: var(--z-sticky-footer);
    white-space: nowrap;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    border: 1px solid var(--border); /* UX-2.4: #f0f0f5→var(--border) */
}
.p-cpu-legend b { color: var(--text); font-weight: 600; } /* UX-2.4: #555→var(--text) */
.p-cpu-legend.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Вертикальный список: каждый CPU — кнопка + чипсы характеристик справа */
.p-option-btns.geek-layout {
    flex-direction: column;
    gap: 6px;
}

.p-cpu-geek-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* ВАЖНО: анимация ТОЛЬКО при ручном включении (.geek-animate).
       Без этого: ребилд DOM при смене RAM/GPU вызывал дёргание всего блока. */
}

/* Анимация только при явном включении пользователем */
.p-cpu-geek-row.geek-animate {
    animation: geek-row-in .2s ease both;
}

@keyframes geek-row-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Кнопка в geek-режиме: фикс. ширина — чипсы выравниваются в колонку */
.p-cpu-geek-row .p-btn-option {
    min-width: 160px;
    flex-shrink: 0;
    text-align: left;
}

/* Чипсы характеристик */
.p-cpu-spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.p-cpu-spec-chips span {
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--bg);      /* UX-2.4: var(--bg-secondary, #ebebed)→var(--bg) — алиас не определён */
    color: var(--text-muted);
    white-space: nowrap;
    /* ВАЖНО: cursor:pointer обязателен — iOS/Android не генерирует click
       на non-interactive элементах без этого свойства. */
    cursor: pointer;
}

/* Активная строка: чипсы подсвечиваются акцентом */
.p-cpu-geek-row.is-active .p-cpu-spec-chips span {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

/* Mobile: кнопка и чипсы по центру, не на всю ширину */
@media (max-width: 520px) {
    .p-option-btns.geek-layout {
        align-items: center;
    }

    .p-cpu-geek-row {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: auto;
    }

    .p-cpu-geek-row .p-btn-option {
        min-width: unset;
    }

    .p-cpu-spec-chips {
        justify-content: center;
    }
}

/* [SEC: Geek Toast] */
/* Переиспользуем cart-toast (common.css — L-7 унифицировано) — своей CSS нет.
   <b> внутри тоста нужно покрасить акцентом сайта. */
#cpu-geek-toast b {
    color: var(--accent);
    font-weight: 600;
}

.p-option-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.p-btn-option {
    background: transparent;
    border: 1px solid var(--border);
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: transform .12s ease, border-color .2s, background-color .2s, color .2s, opacity .2s;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.p-btn-option:hover {
    transform: translateY(-2px);
}

/* UX-AUDIT PROD-8: focus-visible — keyboard navigation outline */
.p-btn-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.p-btn-option:disabled {
    opacity: 0.3;
    background: var(--bg);      /* UX-2.5: #f9f9f9→var(--bg) — dark mode */
    cursor: not-allowed;
}

/* H-6: визуальное разграничение "условно доступна" от "полностью недоступна" (:disabled).
   dashed border = "можно, но не оптимально" vs solid/faded = "недоступно".
   4.2 Фикс: opacity 0.45 → 0.5 + grayscale(0.3) — мягче, но разграничение сохраняется */
.p-btn-option.dimmed {
    opacity: 0.5;
    border-style: dashed;
    border-color: var(--border);
    color: var(--text-muted);
    filter: grayscale(0.3);
}

.p-btn-option.dimmed:hover {
    opacity: 0.8;
    border-style: solid;
    border-color: var(--accent);
    user-select: none;
}

.p-btn-option.active {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
    padding: 9px 17px;
    font-weight: 500;
    user-select: none;
}

/* 4.1 Pop-анимация при выборе опции — навешивается JS, снимается по animationend */
@keyframes option-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.p-btn-option--pop {
    animation: option-pop .2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* [SEC: UI Mobile] — breadcrumb padding теперь в common.css (.bc) */

/* UI>[SEC: Summary & Price 2026] >>> */
/* ВАЖНО: summary держим одинаковой высоты в свернутом состоянии.
Иначе при смене оффера страница получает reflow и визуально "подпрыгивает". */
.p-summary {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);       /* M-7: #555 → var(--text) для dark mode совместимости */
    /* UX-AUDIT FIX-2: Убираем min-height — при 1-2 строках блок не раздувается.
       max-height + line-clamp ограничивают длинный текст (4 строки макс).
       Reflow при смене оффера минимален (разница 1-3 строки ≈ 20-60px). */
    max-height: calc(1.55em * 4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.p-summary.is-expanded {
    display: block;
    min-height: 0;
    max-height: none;
}

.p-summary-toggle {
    background: none;
    border: 0;
    /* AUDIT-2.5: padding + underline offset — увеличивает target area,
       текст выглядит как интерактивный элемент, а не как label */
    padding: 4px 0;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 18px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(var(--accent-rgb), .35);
    transition: text-decoration-color .15s;
}
.p-summary-toggle:hover {
    text-decoration-color: var(--accent);
}

.p-summary-toggle.hidden {
    visibility: hidden;
    pointer-events: none;
}

/* UX-AUDIT PROD-2.2: базовая "от X" = 22px (было 28px).
   Это ориентир, а не финальная цена. Не должна доминировать над ценой оффера */
.p-base-price {
    /* AUDIT-2.2: 16→10px — тайтер связь "цена→CTA", одна визуальная группа */
    margin: 0 0 10px 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--price-color);
    background: color-mix(in srgb, var(--price-color) 6%, var(--bg)); /* UX-1.4: #f4f5f7→color-mix — тёплый tint, автоадаптация к dark mode */
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 6px 14px;
    border-radius: 12px;
    letter-spacing: -0.5px;
    overflow-anchor: none;
}

/* UI>[SEC: Summary & Price 2026] <<< */

/* UI>[SEC: Friendly Summary Block] >>> */
.p-friendly-summary {
    background: var(--accent-surface);  /* M-7: #faf8ff → var(--accent-surface) */
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px 0 16px;
    display: grid;
    /* UX-AUDIT FIX-2b: 1fr → auto — содержимое определяет высоту, не grid */
    grid-template-rows: auto auto auto;
    row-gap: 8px;
    overflow-anchor: none;
}

.p-friendly-summary h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    /* AUDIT-2.3: accent вместо --text — привлекает взгляд к блоку,
       сигнализирует "это полезная инфа", увеличивает engagement с summary */
    color: var(--accent);
}

/* UI>[SEC: Friendly Summary Block] <<< */

/* UI>[SEC: Cross-card navigation feedback] >>> */
/* Фикс: мгновенный отклик при переходе на другую карточку модели/цвета. */
body[data-card-nav="1"] .p-gallery-col,
body[data-card-nav="1"] .p-title,
body[data-card-nav="1"] .p-friendly-summary,
body[data-card-nav="1"] .p-base-price,
body[data-card-nav="1"] .p-options,
body[data-card-nav="1"] .p-offers,
body[data-card-nav="1"] .p-desktop-actions,
body[data-card-nav="1"] .p-footer {
    opacity: .58;
    pointer-events: none;
    transition: opacity .12s ease;
}

/* UI>[SEC: Cross-card navigation feedback] <<< */

/* Chat FAB, Catalog Drawer, nav-icon-wrap, nav-badge → common.css */

/* ── C-1: Desktop Typography Scale ─────────────────────────── */
/* Только десктоп: мобильные размеры оставляем — на небольшом экране они адекватны.
   На 1920×1080 при 60-70см 13px = "мелкий шрифт договора". */
@media (min-width: 769px) {
    /* AUDIT-2.6: теги 13px на десктопе — 12px неразборчив на 1920×1080 */
    .p-tag { font-size: 13px; }

    /* UX-AUDIT PROD-1: H1 товара 26px на десктопе.
       24px сливался с 22px ценой оффера — нет чёткой иерархии */
    .p-title {
        font-size: 26px;
        line-height: 1.35;
        letter-spacing: -0.3px;
        margin-bottom: 12px;    /* UX-1.3: desktop 12px — чуть больше мобильного 10px */
    }

    .p-option-label { font-size: 14px; }

    /* 48px touch target — палец попадает даже при неточном тапе */
    .p-btn-option {
        font-size: 15px;
        padding: 12px 20px;
        min-height: 44px;
    }

    .p-summary {
        font-size: 15px;
        line-height: 1.6;
        /* UX-AUDIT FIX-2: Убираем min-height */
        max-height: calc(1.6em * 4);
    }

    /* UX-AUDIT PROD-2.2: desktop 24px (было 32px) */
    .p-base-price {
        font-size: 24px;
        letter-spacing: -0.8px;
    }
}
/* [SEC: Specs] — блок характеристик ключ:значение (Monitor, Printer и т.д.)
   ВАЖНО: ноутбуки НЕ используют (у них матрица кнопок .p-btn-option). */
.prod-specs { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin-bottom: 1rem; }
.prod-specs dt { color: var(--text-muted); white-space: nowrap; }
.prod-specs dd { font-weight: 500; }

/* Cross-sell блок: совместимые картриджи (принтеры) или совместимые принтеры (картриджи) */
.prod-carts { display: grid; gap: .5rem; margin-top: 1.5rem; }
.prod-carts > b { display: block; font-size: .875rem; color: var(--text-muted); font-weight: 500; margin-bottom: .25rem; }
.prod-carts a { display: flex; align-items: center; justify-content: space-between;
                padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .5rem;
                text-decoration: none; color: var(--text); gap: .5rem; }
.prod-carts a:hover { border-color: var(--accent); }
.prod-carts .crt-name { font-size: .875rem; min-width: 0; flex: 1; }
.prod-carts .crt-price { font-weight: 500; white-space: nowrap; color: var(--accent); }

} /* @layer pages */