/* =============================================
   STICKY BAR — страница товара (десктоп)
   ============================================= */
.product-sticky-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Было 190 (< .site-header'а 200) — пока position:sticky у .site-header
       был фактически сломан (см. base.css, overflow-x/sticky фикс
       2026-08-01), оба элемента никогда не занимали top:0 ОДНОВРЕМЕННО и
       конфликт был не виден. После починки sticky шапка снова реально
       "прилипает" к top:0 при скролле по странице товара и перекрывала бы
       эту панель (кнопки "В корзину"/"Заказать в 1 клик" становились
       недоступны) — поднимаем выше шапки, с запасом до следующего яруса
       z-index (300, мобильная панель фильтров каталога), чтобы не
       столкнуться и с ним.
    */
    z-index: 210;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.product-sticky-bar.visible { transform: translateY(0); }
.product-sticky-bar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    height: 60px;
}
.product-sticky-bar__name {
    flex: 1;
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dark);
}
.product-sticky-bar__price {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.product-sticky-bar__btn {
    padding: 9px 22px;
    font-size: 0.875rem;
    flex-shrink: 0;
    gap: 7px;
    /* На мобильном (204×38 и 43×37) обе кнопки были ниже стандартных
       44px, которые сайт соблюдает везде ещё — например, у карточек
       каталога (44×44). */
    min-height: 44px;
}
/* В общем блоке товара .prd-btn-cart-secondary — блочная кнопка на всю
   ширину с отдельным hint-текстом под ней; здесь она встроена в узкую
   строку бара. Специфичность через .product-sticky-bar__inner нарочно
   выше одного класса .prd-btn-cart-secondary — иначе порядок объявления
   в файле решает, чьё правило "width" победит. */
.product-sticky-bar__inner .product-sticky-bar__cart {
    width: auto;
    margin-bottom: 0;
    padding: 9px 18px;
}

@media (max-width: 768px) {
    .product-sticky-bar__name { display: none; }
    .product-sticky-bar__inner { gap: 10px; height: auto; padding: 10px 0; }
    .product-sticky-bar__price { flex-direction: column; align-items: flex-start; gap: 0; }
    .product-sticky-bar__price .price-old { font-size: var(--fs-xs); }
    /* Замер 02.09.2026 на 390x844: «Перезвоните мне» — 208x44, кнопка покупки
       — 44x44. Главное действие было в 4,7 раза уже второстепенного и БЕЗ
       подписи: её скрывало правило .product-sticky-bar__cart span
       { display: none } ниже в этом же блоке. Имя оставалось только в
       атрибуте title=, а он на тач-экране не показывается никогда — то есть
       на самом ходовом мобильном разрешении покупательница видела рядом с
       понятной кнопкой «Перезвоните мне» безымянный квадратик.

       Теперь обе кнопки делят строку, обе подписаны, а покупка получает
       больший базис — она и остаётся единственной с заливкой primary.
       min-height из базового правила .product-sticky-bar__btn соблюдается. */
    .product-sticky-bar__quick { flex: 1 1 0; min-width: 0; }
    .product-sticky-bar__quick span { display: inline; }
    .product-sticky-bar__inner .product-sticky-bar__quick { padding: 9px 8px; }
    .product-sticky-bar__inner .product-sticky-bar__cart { flex: 1.25 1 0; min-width: 0; padding: 9px 8px; }
    .product-sticky-bar__cart span { display: inline; }
}
/* =============================================
   БЛОК 3.5 — ТАБЫ ТОВАРА
   ============================================= */
.product-tabs { margin: 40px 0; }
.product-tabs__nav {
    display: flex;
    border-bottom: 2px solid var(--border);
    gap: 0;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}
.product-tabs__nav::-webkit-scrollbar { display: none; }
.product-tab-btn {
    padding: 12px 24px;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .2s;
    white-space: nowrap;
}
.product-tab-btn:hover { color: var(--primary-h); }
.product-tab-btn.active { color: var(--primary-h); border-bottom-color: var(--primary); }
.product-tab-panel { display: none; }
.product-tab-panel.active { display: block; }

.delivery-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}
.delivery-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius);
}
.delivery-info-item svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.delivery-info-item div { display: flex; flex-direction: column; gap: 2px; }
.delivery-info-item strong { font-size: 0.875rem; color: var(--dark); }
.delivery-info-item span { font-size: var(--fs-xs); color: var(--text-light); }

.chars-table { width: 100%; border-collapse: collapse; }
.chars-table tr { border-bottom: 1px solid var(--border); }
.chars-table td { padding: 10px 12px; font-size: 0.875rem; }
.chars-table td:first-child { color: var(--text-light); width: 45%; }
/* =============================================
   ДОСТАВКА ТАБ — АДАПТИВ
   ============================================= */
@media (max-width: 640px) {
    .delivery-info-grid { grid-template-columns: 1fr; }
    .product-tab-btn { padding: 10px 16px; font-size: 0.8125rem; }
}
/* =============================================
   СТРАНИЦА ТОВАРА — ПОЛНАЯ ПЕРЕРАБОТКА
   ============================================= */
.section--product { padding-top: 24px; }

/* ─── LAYOUT ─── */
.prd-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 48px;
}

/* ─── ГАЛЕРЕЯ ─── */
.prd-gallery { position: sticky; top: 90px; }

.prd-gallery__main {
    position: relative;
    background: linear-gradient(135deg, #f5f0eb 0%, #ede6dd 100%);
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 12px;
}
.prd-gallery__main img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.prd-gallery__empty {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; color: var(--primary);
}
.prd-gallery__empty svg { opacity: .5; }
.prd-gallery__empty span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: .55;
}

.prd-badge {
    position: absolute;
    top: 16px; left: 16px;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 20px; color: #fff;
}
/* P7 -- своим токеном (--discount, base.css), не общим var(--primary) --
   тот же терракот, но скидка и промо-плашка/активный фильтр/язык (см.
   base.css/catalog.css после той же правки) больше не делят одну
   переменную, которая раньше молча означала 5 разных вещей сайта. */
.prd-badge--sale { background: var(--discount); }
/* var(--gold) с белым текстом даёт 3.09:1 — ниже WCAG AA (Lighthouse,
   2026-08-03). Токен не трогаю (у него есть контексты, где он используется
   как цвет иконки на тёмном фоне и там всё в порядке) — только эта плашка. */
.prd-badge--hit  { background: #816439; }
/* 'out_of_stock' (m_0016) -- страница товара остаётся доступной вместо
   404 (#multipage-oos-hard-404, High); занимает тот же слот, что --sale/
   --hit (взаимоисключающие, см. product.php). */
.prd-badge--oos  { background: var(--dark); }

.prd-gallery__thumbs {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.prd-gallery__thumb {
    width: 72px; height: 72px;
    border-radius: 10px; overflow: hidden;
    border: 2px solid transparent;
    background: none; padding: 0; cursor: pointer;
    transition: border-color .2s;
    flex-shrink: 0;
}
.prd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prd-gallery__thumb:hover,
.prd-gallery__thumb.active { border-color: var(--primary); }

/* ─── ИНФО ─── */
.prd-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Грид-элемент .prd-layout по умолчанию min-width:auto — при масштабе
       текста 300% кнопки внутри (quick-order, "Добавить в корзину")
       "требовали" себе ширину больше вьюпорта и раздвигали всю колонку за
       экран (та же ловушка, что была у .hero__content на главной). */
    min-width: 0;
}

.prd-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-light);
    text-decoration: none;
    margin-bottom: 12px;
}
.prd-cat a { color: inherit; }
.prd-cat a:hover { color: var(--primary); }

.prd-name {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 24px;
}

/* Цена */
.prd-price-block {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.prd-price-main {
    display: block;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}
.prd-price-old-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.prd-price-old {
    font-size: 1rem;
    color: var(--text-light);
    text-decoration: line-through;
}
.prd-price-save {
    font-size: var(--fs-xs);
    font-weight: 700;
    background: #fee2d5;
    color: var(--primary-h); /* var(--primary) даёт 4.45:1 на этом фоне — чуть ниже WCAG AA */
    padding: 3px 8px;
    border-radius: 6px;
}

/* Состав + уход за тканью -- обе строки в одной всегда видимой зоне (задача
   "уход на видном месте": раньше был виден только во вкладке
   «Характеристики»). .prd-fabric-block несёт общий отступ/разделитель,
   который раньше был на самом .prd-fabric -- так оба ряда (состав и уход)
   остаются визуально одной группой с одним разделителем под ней, а не
   двумя отдельными блоками с двойной границей. */
.prd-fabric-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.prd-fabric,
.prd-fabric-care {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-light);
}
.prd-fabric svg,
.prd-fabric-care svg { color: var(--text-light); flex-shrink: 0; }

/* Варианты / размеры */
.prd-variants {
    margin-bottom: 24px;
}
.prd-variants__color-label {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 10px;
}
.prd-variants__color-label strong { color: var(--dark); }
.prd-variants__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.prd-variants__label svg { color: var(--text-light); }

.prd-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* UX-аудит 2026-08-29, P0-4. Кнопка «В корзину» больше не гаснет до выбора
   размера -- вместо предварительного гейта блок размеров подсвечивается
   В МОМЕНТ КЛИКА (main.js, ветка 'activeSizesBox && !size'). Класс живёт
   1,8 с и снимается таймером.

   Цвета -- из токенов темы, а не хардкод: раньше подсветка задавалась инлайн
   стилем с #e74c3c, единственным красным на всей странице товара. Красный
   читается как ошибка пользователя, хотя это подсказка «здесь ещё нужен
   выбор», поэтому берём акцентный цвет бренда.

   prefers-reduced-motion: пульсация выключается, статичная рамка остаётся --
   сообщение не должно теряться у тех, кто отключил анимацию. */
.prd-sizes--needs-size {
    outline: 2px solid var(--primary, #b8502a);
    outline-offset: 4px;
    border-radius: 8px;
    animation: prd-sizes-pulse .9s ease-in-out 2;
}
@keyframes prd-sizes-pulse {
    0%, 100% { outline-color: var(--primary, #b8502a); }
    50%      { outline-color: color-mix(in srgb, var(--primary, #b8502a) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .prd-sizes--needs-size { animation: none; }
}
.prd-size-btn {
    min-width: 52px;
    height: 44px;
    padding: 0 14px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all .18s;
}
.prd-size-btn:hover  { border-color: var(--primary); color: var(--primary); }
.prd-size-btn.active { border-color: var(--primary); background: var(--primary); color: #fff; }

/* FAQ по размерам — нативный <details>, без JS */
.prd-size-faq { margin-bottom: 18px; }
/* Находка #5 (Фаза 2 аудит) -- <summary> теперь несёт классы .btn.btn-
   outline.btn-sm в разметке (тот же паттерн, что и #prdSizeCalcBtn рядом) --
   пилюля с рамкой/заливкой вместо невзрачной строки текста. Это правило
   НАМЕРЕННО больше не задаёт padding/border/background/цвет текста -- те
   свойства теперь приходят от .btn* классов; .prd-size-faq summary имеет
   более высокую специфичность (элемент+класс), чем одноклассовые .btn-*, и
   продолжала бы их перебивать, если бы что-то из этого здесь осталось. Тут
   остаются только layout-детали, которых нет в .btn* и которые специфичны
   именно для этого summary (шеврон, зазор с иконкой, тач-таргет). */
.prd-size-faq summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    list-style: none;
    /* Тач-таргет был ~28px высотой против стандартных 44px у соседних
       кнопок размера — min-height поверх паддингов .btn-sm, а не замена
       паддинга, чтобы пилюля не раздувалась крупнее остальных .btn-sm. */
    min-height: 44px;
}
.prd-size-faq summary::-webkit-details-marker { display: none; }
.prd-size-faq summary svg { flex-shrink: 0; }
.prd-size-faq summary::after {
    content: '';
    width: 8px; height: 8px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
    flex-shrink: 0;
}
.prd-size-faq[open] summary::after { transform: rotate(-135deg); }
.prd-size-faq__body {
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--primary-light);
    border: 1.5px solid rgba(184,80,42,0.15);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prd-size-faq__body p { font-size: 0.8125rem; line-height: 1.5; color: var(--text); margin: 0; }
.prd-size-faq__body strong { color: var(--dark); }

/* Находка #6 (Фаза 2 аудит) -- полная таблица размеров (реальные см),
   раньше видимая только в #tab-sizes (3-5 экранов скролла ниже),
   продублирована сюда из того же $size_tables. #tab-sizes использует
   голый класс .table без выделенных CSS-правил вообще (унаследовано,
   не трогаем — вне рамок этой находки); здесь своя компактная разметка
   под цвет плашки FAQ, а не переиспользование того же нестилизованного
   класса. */
.prd-size-faq__table { margin: 2px 0 0; }
.prd-size-faq__table-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dark);
    margin: 6px 0 4px;
}
.prd-size-faq__table-title:first-child { margin-top: 0; }

/* Пояснение над таблицей во вкладке «Размеры» (04.09.2026).
   Раньше вкладка вела к голым заголовкам «Обхват груди / талии / бёдер», и
   женщина искала там своё число — а это замеры изделия, больше мерок тела на
   прибавку. Занижение на две строки таблицы, при оплате при получении —
   возврат за счёт магазина. 15px, а не мельче: по этой подписи принимают
   решение, а аудитории сайта 35+. Цвет --ink-soft на светлом фоне даёт 5.7:1,
   выше требуемых 4.5:1. */
.prd-size-tab__note {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ink-soft);
    background: var(--stone);
    border-left: 3px solid var(--stone-line);
    padding: 10px 12px;
    margin: 0 0 14px;
    border-radius: 0 6px 6px 0;
}
/* Таблица размеров шире экрана — и об этом ничто не сообщало.
   Замер 02.09.2026 на 390px: из 304 видимых товаров с таблицей у 301 четыре и
   более столбца, и они не помещаются; помещаются только три 3-столбцовых.
   Скроллбар на телефоне скрыт, край обрывается ровно по границе — женщина
   видит четыре столбца и решает, что это вся таблица. А это для магазина без
   примерки самые важные цифры на странице: по ним она решает, подойдёт ли вещь.

   Тень у правого края появляется САМА, когда есть куда прокручивать, и
   пропадает, когда докрутили до конца. Приём чисто на CSS: две «маскирующие»
   заливки прибиты к содержимому (background-attachment: local) и закрывают
   тени у краёв, пока прокрутка в этом направлении невозможна. JS не нужен,
   пересчитывать при повороте экрана нечего. */
.prd-size-faq__table-scroll {
    overflow-x: auto;
    background-image:
        linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left,  var(--white) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(43, 30, 39, .18), rgba(43, 30, 39, 0)),
        linear-gradient(to left,  rgba(43, 30, 39, .18), rgba(43, 30, 39, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
.prd-size-faq__table-scroll table { width: 100%; border-collapse: collapse; }
.prd-size-faq__table-scroll th,
.prd-size-faq__table-scroll td {
    padding: 6px 8px;
    /* Таблица размеров -- самые важные цифры на странице для этого магазина
       (P1-8): по ним покупательница решает, подойдёт ли вещь без примерки.
       12px тут были наименее уместны из всех. */
    font-size: var(--fs-xs);
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(184,80,42,0.15);
}
.prd-size-faq__table-scroll th { color: var(--dark); font-weight: 700; }
.prd-size-faq__table-scroll td { color: var(--text); }
/* tbody явно (не голый tr:last-child) -- thead тоже содержит ровно один
   <tr>, который иначе тоже совпал бы как ":last-child" СВОЕГО родителя
   (thead) и потерял бы разделительную линию под заголовком. */
.prd-size-faq__table-scroll tbody tr:last-child th,
.prd-size-faq__table-scroll tbody tr:last-child td { border-bottom: none; }

/* Калькулятор размера -- клиентский JS (main.js, initSizeCalculator()),
   данные уже в data-size-tables на #prdSizeCalc, без похода на сервер. */
.prd-size-calc {
    margin: 4px 0 2px;
    padding-top: 10px;
    border-top: 1px dashed rgba(184,80,42,0.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prd-size-calc__intro { display: flex; align-items: flex-start; gap: 6px; }
.prd-size-calc__intro svg { flex-shrink: 0; margin-top: 1px; }
.prd-size-calc__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Слито из двух наборов правил (2026-09-01). Раньше их было два на один и
   тот же селектор -- этот и второй, ниже по файлу, написанный при переделке
   виджета. Второй молча выигрывал по порядку, из-за чего flex-direction и gap
   здесь ничего не делали, а понять это можно было только сопоставив два
   удалённых друг от друга места. Значения ниже -- те, что реально
   применялись. */
.prd-size-calc__field {
    display: block;
    margin-bottom: 12px;
    font-size: var(--fs-xs);
    color: var(--text-light);
    /* Работает как flex-элемент внутри .prd-size-calc__fields: display: block
       касается ПОТОМКОВ поля, а не его собственного поведения в родителе. */
    flex: 1 1 120px;
}
.prd-size-calc__field > span { display: block; margin-bottom: 4px; font-size: var(--fs-xs); font-weight: 600; }
.prd-size-calc__field > span em { font-weight: 400; font-style: normal; color: var(--text-light); }
.prd-size-calc__field input {
    width: 100%;
    /* 44px -- минимальный тач-таргет; прежние 9px паддинга давали ~36px. */
    min-height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    font-family: var(--font-body);
    background: var(--white);
    color: var(--text);
    transition: border-color .2s;
}
.prd-size-calc__field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(184,80,42,0.08);
}
.prd-size-calc__btn { align-self: flex-start; }
.prd-size-calc__note {
    font-size: var(--fs-xs);
    color: var(--text-light);
    font-style: italic;
}
.prd-size-calc__result:empty { display: none; }
.prd-size-calc__result p { font-size: 0.8125rem; line-height: 1.5; margin: 0; }
.prd-size-calc__result strong { color: var(--dark); }
/* Специфичность выше, чем у унаследованного ".prd-size-faq__body p" (два
   класса вместо класс+тег) -- иначе цвет статуса перебивался бы общим
   цветом текста FAQ-блока, в котором физически лежит калькулятор. */
/* Контраст строк результата на фоне .prd-size-faq__body (var(--primary-light)
   = #FBE4D6), внутри которого физически лежит #prdSizeCalc. Посчитано по
   формуле WCAG 2.x (relative luminance), кегль строк -- 13px, порог AA 4.5:1:
     БЫЛО  ok   #2e7d32 -> 4.19:1  (сама рекомендация "Ваш размер: X")
     БЫЛО  warn #b8860b -> 2.66:1  ("ни один размер не подходит")
     БЫЛО  ссылка var(--primary) #B8502A -> 4.07:1
   СТАЛО:
     ok   #256428 -> 5.86:1
     warn #7a5906 -> 5.27:1
   ВНИМАНИЕ: предложенный аудитом warn #8a6508 даёт 4.35:1 -- он ВСЁ ЕЩЁ
   ниже порога, пересчёт это поймал, поэтому взят темнее.
   .prd-size-calc-error #c62828 = 4.60:1 -- проходит, оставлен как был. */
.prd-size-calc__result .prd-size-calc-ok    { color: #256428; }
.prd-size-calc__result .prd-size-calc-warn  { color: #7a5906; }
.prd-size-calc__result .prd-size-calc-error { color: #c62828; }
.prd-size-calc__result .prd-size-calc-cta   { margin-top: 4px; color: var(--text); }
/* Ссылка ветки no_fit (main.js: <p>...<a>посмотреть размер X</a></p>) НЕ несёт
   класса .prd-size-calc-cta -- она берёт глобальный a { color: var(--primary) }
   из base.css, то есть те самые 4.07:1. Поэтому селектор по ЛЮБОЙ ссылке
   внутри результата, а не по .cta: var(--coral-deep) #9A3F1E -> 5.53:1. */
.prd-size-calc__result a { color: var(--coral-deep); }
.prd-size-calc__result .prd-size-calc-cta a { font-weight: 600; }

/* Гарантии */
.prd-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.prd-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--fs-xs);
}
/* Находка #12 (Фаза 2 аудит) -- было var(--primary) (терракот), тот же цвет,
   что уже несёт CTA/скидка на этой же странице (перегруженный --primary,
   см. докблок P7 в base.css) -- на PDP гарантии рядом с ярким терракотовым
   CTA читались как ещё один призыв к действию, а не нейтральные факты.
   .order-summary-trust на checkout уже правильно решает ту же задачу через
   --sage — приводим к единому токену. */
.prd-trust-item svg { color: var(--sage); flex-shrink: 0; margin-top: 2px; }
.prd-trust-item div { display: flex; flex-direction: column; gap: 2px; }
.prd-trust-item strong { font-size: 0.8125rem; color: var(--dark); font-weight: 600; }
.prd-trust-item span  { color: var(--text-light); line-height: 1.3; }

.prd-similar { margin-bottom: 16px; }

/* ─── АДАПТИВ ─── */
@media (max-width: 640px) {
    .prd-trust-grid { grid-template-columns: 1fr; }
    .prd-price-main { font-size: 1.75rem; }
}

/* =============================================
   СЕЛЕКТОР ЦВЕТА НА СТРАНИЦЕ ТОВАРА
   ============================================= */
.product-color-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/* touch-target-size P1 (round-5 #5, 2026-08-10) -- хит-зона была 28×28 на
   десктопе / 36×36 на мобильном (@media max-width:768px ниже), а активная
   кнопка сверху ещё и раздувалась transform:scale(1.15) до 41×41 -- три
   разных размера у одной и той же логической кнопки, все ниже 44×44
   (Apple HIG / WCAG 2.5.8) и ниже .pc-swatch (components.css, карточки
   товара), который уже 44×44 единообразно.
   .pc-swatch решает это через ::after с CSS custom property --sw-color,
   потому что цвет туда приходит именно так (product_card.php). Здесь цвет
   приходит иначе -- инлайн style="background:..." ПРЯМО на .product-color-btn
   (product.php, единственный файл этой находки -- CSS), поэтому custom-
   property-приём не подходит без правки шаблона. Тот же результат другим
   путём: сама кнопка растёт до 44×44 (box-sizing:border-box), но
   background-clip:content-box + padding:8px оставляют РЕАЛЬНЫЙ (инлайновый
   или CSS) background покрашенным только в центральных 28×28 -- хит-зона
   прозрачна и полностью кликабельна/тач-абельна. Кольцо/бордер и hover/
   active-подсветка -- на ::after (декоративный, pointer-events:none), он же
   единственное, что масштабируется -- сам бокс кнопки больше не меняет
   размер ни на hover, ни на active. */
.product-color-btn {
    width: 44px;
    height: 44px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    background: #ccc;
    background-clip: content-box !important;
}
.product-color-btn.is-print {
    /* !important на background сбрасывает background-clip обратно на
       border-box (initial value для незаданных подсвойств шортката) --
       поэтому content-box здесь продублирован явно, иначе паттерн
       растечётся на все 44px хит-зоны вместо центральных 28px. */
    background: repeating-linear-gradient(
        45deg,
        #e8a0c0 0px, #e8a0c0 5px,
        #a0b8e8 5px, #a0b8e8 10px
    ) !important;
    background-clip: content-box !important;
}
.product-color-btn::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    pointer-events: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.product-color-btn:hover::after {
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.product-color-btn.active::after {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(184,80,42,0.2);
    transform: scale(1.15);
}

.product-color-name {
    font-size: 0.8125rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.product-color-name svg { color: var(--primary); }

.variant-color-group { display: none; }
.variant-color-group.active { display: block; }

/* Страница товара: кнопки
   touch-target-size P1 (round-5 #5, 2026-08-10) -- каждый !important
   background ниже -- шорткат, а значит без явного background-clip он же
   сбрасывает background-clip назад на border-box (initial value для
   неупомянутых подсвойств шортката), причём с более высокой специфичностью
   ([data-print="..."] бьёт голый .product-color-btn), так что базового
   background-clip:content-box (выше) недостаточно -- дублируем в каждом
   правиле, иначе паттерн заливает всю 44px хит-зону, а не центральные 28px. */
.product-color-btn[data-print="stripes"] {
    background: repeating-linear-gradient(45deg, #e8a0c0 0 5px, #a0b8e8 5px 10px) !important;
    background-clip: content-box !important;
}
.product-color-btn[data-print="dots"] {
    background:
        radial-gradient(circle, #2c2c2c 28%, transparent 28%) 0 0 / 7px 7px,
        #f0f0f0 !important;
    background-clip: content-box !important;
}
.product-color-btn[data-print="plaid"] {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(180,30,30,0.35) 3px, rgba(180,30,30,0.35) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(30,50,180,0.35) 3px, rgba(30,50,180,0.35) 4px),
        #e8e0d0 !important;
    background-clip: content-box !important;
}
.product-color-btn[data-print="floral"] {
    background:
        radial-gradient(circle at 30% 30%, #e8a0c0 18%, transparent 18%),
        radial-gradient(circle at 70% 65%, #c0a0e8 14%, transparent 14%),
        radial-gradient(circle at 50% 80%, #a0c8e8 11%, transparent 11%),
        #f9f0f5 !important;
    background-clip: content-box !important;
}
.product-color-btn[data-print="leopard"] {
    background:
        radial-gradient(ellipse 40% 28% at 28% 38%, #3d2000 0%, transparent 100%),
        radial-gradient(ellipse 35% 24% at 68% 68%, #3d2000 0%, transparent 100%),
        #c9a020 !important;
    background-clip: content-box !important;
}
.product-color-btn[data-print="abstract"] {
    background: conic-gradient(
        #e8a0c0 0deg 90deg,
        #a0c8e8 90deg 180deg,
        #c0e8a0 180deg 270deg,
        #e8c0a0 270deg 360deg
    ) !important;
    background-clip: content-box !important;
}
/* =============================================
   БЫСТРЫЙ ЗАКАЗ — ВСЕГДА ВИДИМЫЙ (ПРИОРИТЕТ)
   ============================================= */
.prd-quick-order {
    background: var(--primary-light);
    border: 1.5px solid rgba(184,80,42,0.2);
    border-radius: var(--radius);
    padding: 18px 20px 16px;
    margin-bottom: 12px;
}

.prd-quick-order__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary-h);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.prd-quick-order__label svg { flex-shrink: 0; }

/* 'out_of_stock' (m_0016) -- заменяет форму быстрого заказа целиком внутри
   того же #prdActions/.prd-quick-order контейнера (унаследует его фон/
   рамку/padding выше), а не отдельный блок -- #multipage-oos-hard-404, High. */
.prd-out-of-stock-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--dark);
    font-size: 0.875rem;
    line-height: 1.5;
}
.prd-out-of-stock-notice svg { flex-shrink: 0; margin-top: 2px; }

.prd-quick-order__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.prd-quick-order__row input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(184,80,42,0.2);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    background: var(--white);
    color: var(--text);
    transition: border-color .2s;
}
.prd-quick-order__row input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(184,80,42,0.1);
}
.prd-quick-order__row input::placeholder { color: var(--text-light); }

.prd-quick-order__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--text-light);
    margin-top: 10px;
}
.prd-quick-order__note svg { flex-shrink: 0; }

/* Разделитель между двумя путями покупки */
.prd-or-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 0; color: var(--text-light); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: .06em;
}
.prd-or-divider::before, .prd-or-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* Вторичная кнопка корзины -- #9 (round-3 аудит, cta-cart-secondary-to-
   callback): владелец сознательно делает «Добавить в корзину» ВТОРОСТЕПЕННОЙ
   относительно формы обратного звонка (см. .prd-or-divider выше и
   product.php) -- эта иерархия не меняется здесь. Баг был в другом: прежние
   var(--text-light)/var(--border) (бледно-серый текст на едва заметной
   светлой обводке) визуально неотличимы от ЗАБЛОКИРОВАННОГО состояния до
   выбора размера -- живо подтверждено на 2 разных товарах. var(--dark) для
   ОБОИХ текста и обводки при ПОЛНОЙ непрозрачности -- кнопка читается как
   рабочая, кликабельная опция, при этом остаётся без заливки/оранжевого
   цвета primary-кнопки (иерархия звонок > корзина сохраняется через цвет и
   отсутствие заливки, не через "полу-невидимость"). Тот же класс делит и
   .product-sticky-bar__cart (product.php) -- один фикс закрывает оба места.
*/
/* UX-аудит 2026-08-29, P0-4. Правила .prd-btn-cart-secondary (кнопка «В корзину»
   как вторичная, за разделителем «ИЛИ») удалены вместе с самим решением: кнопка
   покупки стала основным CTA страницы (.btn-primary), а обратный звонок --
   вторичным (.btn-outline). Прошлый раунд аудита (2026-08-10, #9) пытался лечить
   тот же симптом иначе -- затемнял серую кнопку до var(--dark), чтобы она
   «читалась как рабочая»; причина при этом оставалась: рабочая кнопка стояла
   ПОСЛЕ формы обратного звонка и выглядела альтернативой, а не основным путём.
   Класс .prd-btn-cart-secondary__hint ниже СОХРАНЁН -- это подпись под кнопкой,
   к её оформлению отношения не имеет. */
.prd-btn-cart-secondary__hint {
    font-size: var(--fs-xs); color: var(--text-light);
    text-align: center; margin-bottom: 20px;
}

@media (max-width: 480px) {
    .prd-quick-order__row { grid-template-columns: 1fr; }
}
/* =============================================
   БЕЙДЖ АКТИВНОСТИ НА СТРАНИЦЕ ТОВАРА
   ============================================= */
.prd-activity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.prd-activity-badge--hit    { background: #fff8e1; color: #7a5b07; border: 1px solid #ffe082; }
.prd-activity-badge--active { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.prd-activity-badge--low    { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
.prd-activity-badge--oos    { background: #f1eeee; color: var(--dark); border: 1px solid #ddd6d6; }
/* Плашки, добавленные 2026-09-01 (mp_card_badge(), helpers.php). Тона
   намеренно спокойнее «горячих» hit/active/low: те сообщают о спросе и
   должны выделяться, эти -- справочные свойства товара. */
.prd-activity-badge--new     { background: #ede7f6; color: #4527a0; border: 1px solid #b39ddb; }
.prd-activity-badge--size    { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }
.prd-activity-badge--ship    { background: #e0f2f1; color: #00695c; border: 1px solid #80cbc4; }
/* =============================================
   ВЫ СМОТРЕЛИ (RECENTLY VIEWED)
   ============================================= */
.prd-recently { margin-top: 16px; }
.prd-recently__divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 40px;
}
.prd-recently__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.rv-card {
    display: block;
    text-decoration: none;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all .25s;
}
.rv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.1);
    border-color: transparent;
    text-decoration: none;
    color: var(--text);
}
.rv-card__img {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bg);
}
.rv-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.rv-card:hover .rv-card__img img { transform: scale(1.05); }
.rv-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6875rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px;
}
.rv-card__body { padding: 12px; }
.rv-card__cat {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    margin-bottom: 4px;
}
.rv-card__name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
    color: var(--text);
}
.rv-card__price { font-size: 0.875rem; font-weight: 700; color: var(--primary); }

@media (max-width: 900px) {
    .prd-recently__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   МОБИЛЬНЫЕ СОСТОЯНИЯ КНОПОК (товар)
   ============================================= */
.product-tab-btn:active {
    filter: brightness(0.9);
    transform: scale(0.96);
}

@media (max-width: 900px) {
    .prd-layout   { grid-template-columns: 1fr; gap: 28px; }
    .prd-gallery  { position: static; }
    .prd-trust-grid { grid-template-columns: 1fr 1fr; }
    .prd-name { font-size: 1.5rem; }
}

/* ЗАДАЧА 2 — touch-таргеты (страница товара) */
@media (max-width: 768px) {
    .prd-size-btn      { min-height: 44px; min-width: 44px; font-size: 0.9375rem; }
    /* .product-color-btn { width: 36px; height: 36px; } -- УДАЛЕНО
       touch-target-size P1 (round-5 #5, 2026-08-10): этот override уменьшал
       кнопку с 44×44 (десктопный размер до фикса был ещё меньше, 28×28) до
       36×36 именно на мобильном -- том самом вьюпорте, где тач-таргет важнее
       всего. Базовое правило .product-color-btn теперь 44×44 единообразно
       на всех breakpoint'ах (тот же принцип, что и у .pc-swatch в
       components.css), отдельный мобильный override больше не нужен. */
}

/* ── ПОДБОР РАЗМЕРА: интерфейс (docs/SIZE_CALCULATOR_SPEC.md §7) ──────────
   Оформление намеренно не заводит собственного визуального языка: кнопки --
   те же .btn/.btn-primary/.btn-sm, что и везде, карточные радиусы и цвета --
   из общих токенов. Требование спеки: инструмент должен выглядеть частью
   магазина, а не вставленным сторонним виджетом. */

/* Подсказка по сохранённым меркам -- появляется сразу под чипами размеров на
   КАЖДОЙ карточке, если покупательница один раз ввела мерки. Это главная
   ценность калькулятора, поэтому подсказка выделена фоном, а не набрана
   мелким серым: её должно быть видно, не выискивая. */
.prd-size-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-h);
    font-size: var(--fs-xs);
    line-height: 1.4;
}
/* Тач-таргет (WCAG 2.5.8). БЫЛО padding: 0 при font: inherit от
   .prd-size-hint (var(--fs-xs) = 13px, line-height 1.4) -> высота
   13 * 1.4 = 18.2px. Это единственный способ поправить сохранённые мерки
   прямо у кнопки "Добавить в корзину".
   СТАЛО 13 + 18.2 + 13 = 44.2px. Приём -- ровно тот же, что уже применён
   в проекте к ссылке в баннере cookie (layout.php, .cookie-consent__text a):
   padding расширяет реальную кликабельную область, отрицательный margin той
   же величины гасит прирост визуально, поэтому строка подсказки
   (.prd-size-hint -- flex, align-items:center) не становится выше. */
.prd-size-hint__edit {
    background: none;
    border: none;
    padding: 13px 2px;
    margin: -13px -2px;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Точка входа. Раньше подпись называла сомнение («Не уверены с размером?»),
   теперь -- действие, поэтому и вид у неё как у обычной вторичной кнопки. */
.prd-size-faq__trigger { width: 100%; justify-content: center; }

/* Поле мерки: подпись, ввод и однострочная инструкция «как измерить» --
   спека §5 требует, чтобы подсказка была рядом с полем, а не в отдельном
   разделе, до которого никто не долистает. Сами правила поля слиты выше,
   к первому объявлению селектора. */
.prd-size-calc__how { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-light); line-height: 1.4; }

/* Индикатор точности -- единственный честный способ попросить больше мерок:
   показывает, что покупательница получает взамен, вместо того чтобы делать
   все поля обязательными (спека §5 это прямо запрещает). */
.prd-size-calc__accuracy { margin: 4px 0 12px; font-size: var(--fs-xs); color: var(--primary-h); font-weight: 600; }
.prd-size-calc__privacy { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--text-light); }

.prd-size-calc-alt { margin: 6px 0 0; font-size: var(--fs-xs); }
/* Пометки модели (сядет плотно / подходят оба / мерка оценена) -- не
   украшение: они говорят то, чего процент сам по себе не сообщает. */
.prd-size-calc-note {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 3px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-light);
    line-height: 1.45;
}
.prd-size-calc__apply { margin-top: 12px; }

/* ── «Как садятся наши вещи» ──────────────────────────────────────────────
   Сводка по посадке из отзывов, страница товара (находка P1-10). Стоит перед
   раскрывающимся блоком про размер: покупательница, у которой возник вопрос
   о посадке, должна увидеть ответ до того, как решит что-то раскрывать. */
.prd-fit {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.prd-fit__title { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: var(--fs-sm); }
.prd-fit__title svg { flex-shrink: 0; color: var(--primary); }

/* Полоса из трёх сегментов вместо трёх отдельных цифр: доля «точно в размер»
   читается мгновенно, до чтения процентов. */
.prd-fit__bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--border);
}
.prd-fit__seg { display: block; height: 100%; }
.prd-fit__seg--true  { background: #2e7d32; }
.prd-fit__seg--small { background: #d98324; }
.prd-fit__seg--large { background: #7a6ff0; }

.prd-fit__legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.prd-fit__legend li { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text); }
.prd-fit__legend b { font-weight: 700; color: var(--dark); }
.prd-fit__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.prd-fit__dot--true  { background: #2e7d32; }
.prd-fit__dot--small { background: #d98324; }
.prd-fit__dot--large { background: #7a6ff0; }

/* Источник данных подписан обязательно: отзывы не привязаны к товарам, и
   выдавать статистику по магазину за отзывы об этой модели нельзя. */
.prd-fit__source { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-light); line-height: 1.45; }

.prd-fit__quote {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--white);
    border-left: 3px solid var(--primary-light, var(--border));
    border-radius: 0 8px 8px 0;
}
.prd-fit__quote-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.prd-fit__stars { display: inline-flex; }
.prd-fit__who { font-size: var(--fs-xs); font-weight: 600; color: var(--text-light); }
.prd-fit__quote p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }

/* Тач-таргет (WCAG 2.5.8) + контраст (1.4.3). БЫЛО: 14px * line-height 1.7
   (наследуется от body, собственного line-height у ссылки нет) = 23.8px
   высоты, и var(--primary) #B8502A на фоне .prd-fit (var(--bg) = #F6EFE6)
   = 4.36:1 -- ниже порога AA 4.5:1.
   СТАЛО: var(--coral-deep) #9A3F1E = 5.93:1; padding 11px сверху и снизу
   даёт 11 + 23.8 + 11 = 45.8px реальной высоты тач-таргета.
   Компенсация -- тот же приём, что у ссылки в баннере cookie
   (layout.php, .cookie-consent__text a): margin-top 12px -> 1px (1 + 11 =
   те же 12px визуального отступа сверху), отрицательные боковой и нижний
   margin гасят прирост padding, чтобы блок .prd-fit не стал выше. */
.prd-fit__all {
    display: inline-block;
    margin: 1px -4px -11px;
    padding: 11px 4px;
    font-size: var(--fs-sm);
    color: var(--coral-deep);
}