/**
 * Карточка товара — вёрстка по прототипу tovarCard/proto18.html
 *
 * Все классы имеют префикс pdp- (product detail page). Это не косметика:
 * на странице подключён bootstrap.css, и имена из прототипа (.row, .card,
 * .badge, .price, .arrow, .info, .old) пересекаются с ним и со старым
 * style.css сотни раз. Префикс делает новую вёрстку невосприимчивой к старым
 * правилам без единого !important.
 *
 * Значения (размеры, отступы, брейкпоинты) сняты с живого прототипа
 * измерением в браузере, а не переписаны на глаз.
 * Соответствие имён прототипу — в tovarCard/klassy-pdp.md.
 */

.pdp,
.pdp *,
.pdp *:before,
.pdp *:after {
    box-sizing: border-box;
}

/* Любой pdp-компонент считает размеры по border-box независимо от того,
   лежит он внутри корневого .pdp или ещё в старой обёртке. */
[class^="pdp-"],
[class*=" pdp-"] {
    box-sizing: border-box;
}

/* Токены объявлены и на корне блока, и на контейнере раскладки. Второе нужно
   на время перехода: корневой .pdp на страницу пока не навешен (он задал бы
   кегль и box-sizing всему старому содержимому), а компоненты внутри сетки
   токены уже используют. */
.pdp,
.pdp-layout {
    --c-rating: #4A4438;
    --c-ink: #2B2721;
    --c-ink-soft: #6E6558;
    --c-ink-faint: #8C8375;
    --c-surface-alt: #F1ECE3;
    --c-surface-soft: #FAF7F2;
    --c-border: #E4DACB;
    --c-border-control: #8C8375;
    --c-accent: #7C8163;
    --c-accent-dark: #5F6449;
    --c-sale: #A8402F;
    --c-danger: #A8402F;
    --c-success: #4C7A5B;
    --c-warning: #AE7A26;
    --c-scrim: rgba(43, 39, 33, .45);

    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
}

/* Типографика — только на корневом .pdp. На .pdp-layout её вешать нельзя:
   пока разметка переходная, она сменила бы кегль всему старому содержимому
   карточки разом. */
.pdp {
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Сбросы завёрнуты в :where() намеренно: так их специфичность равна нулю и
   любое правило ниже, заданное одним классом, их перебивает. Без :where()
   селектор «.pdp button» (0,1,1) оказывается сильнее, чем «.pdp-btn» (0,1,0),
   и молча возвращает кнопкам inherit-размер шрифта и нулевые отступы. */
:where(.pdp) :where(h1, h2, h3, p) {
    margin: 0;
}

:where(.pdp) :where(b, strong) {
    font-weight: 600;
}

:where(.pdp) :where(button) {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-variant-numeric: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}

:where(.pdp) :where(input, select, textarea) {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-variant-numeric: inherit;
}

.pdp button:focus-visible,
.pdp a:focus-visible,
.pdp input:focus-visible,
.pdp select:focus-visible,
.pdp textarea:focus-visible {
    outline: 2px solid var(--c-accent-dark);
    outline-offset: 2px;
}

/* ============================================================
   РАСКЛАДКА
   ============================================================
   В прототипе раскладка считается в JS:
     LCOL = vw>=1760 ? 520 : vw>=1440 ? 460 : vw>=1280 ? 420 : 380
     LGAP = vw>=1440 ? 48  : vw>=1280 ? 40  : 32
     LP   = vw>=1440 ? 48  : 32          CMAX = 1760
     галерея на 5 % уже доступного места, освободившееся уходит в правое поле
   Здесь это выражено на чистом CSS теми же числами. */

.pdp-layout {
    --pdp-col: 380px;
    --pdp-gap: 32px;
    --pdp-pad: 32px;

    /* 5 % от ширины галереи. Проценты считаются от ширины родителя
       (.pdp-container), поэтому вычисление не циклическое. */
    --pdp-shrink: calc(5% - (2 * var(--pdp-pad) + var(--pdp-col) + var(--pdp-gap)) * .05);

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pdp-col);
    gap: var(--pdp-gap);
    align-items: start;
    padding-left: var(--pdp-pad);
    padding-right: calc(var(--pdp-pad) + var(--pdp-shrink));
}

.pdp-container {
    max-width: 1760px; /* CMAX */
    margin: 0 auto;
}

@media (min-width: 1280px) {
    .pdp-layout {
        --pdp-col: 420px;
        --pdp-gap: 40px;
    }
}

@media (min-width: 1440px) {
    .pdp-layout {
        --pdp-col: 460px;
        --pdp-gap: 48px;
        --pdp-pad: 48px;
    }
}

@media (min-width: 1760px) {
    .pdp-layout {
        --pdp-col: 520px;
    }
}

/* Мобильная и планшетная раскладка: одна колонка, галерея во всю ширину,
   блок покупки под ней с полем 16px. В прототипе это ветка oneCol/isMob. */
@media (max-width: 991px) {
    .pdp-layout {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    /* :not(.product-info) — пока разметка переходная, поля на мобиле задаёт
       старый блок. Правило включится само, когда старый класс уйдёт. */
    .pdp-buy:not(.product-info) {
        padding: 16px;
    }
}

/* Колонка покупки залипает при скролле (прототип: position:sticky; top:72px) */
@media (min-width: 992px) {
    .pdp-buy {
        position: sticky;
        top: 72px;
    }
}

/* ============================================================
   ИКОНКИ (спрайт Lucide)
   ============================================================ */

.pdp-icon {
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pdp-icon--filled {
    fill: currentColor;
}

.pdp-icon--16 {
    width: 16px;
    height: 16px;
}

.pdp-icon--20 {
    width: 20px;
    height: 20px;
}

.pdp-icon--24 {
    width: 24px;
    height: 24px;
}

/* ============================================================
   ОБЩИЕ ЭЛЕМЕНТЫ
   ============================================================ */

.pdp-muted {
    color: var(--c-ink-soft);
}

.pdp-subtle {
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ink-soft);
}

.pdp-eyebrow {
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ink-soft);
    min-height: 18px;
}

.pdp-fine {
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ink-soft);
}

.pdp-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--c-accent-dark);
    font-size: 15px;
    line-height: 22px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.pdp-link-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--c-accent-dark);
}

/* Невидимая зона нажатия: визуально текст в строку, но палец попадает в 44px.
   Прототип: .tap/.tap32/.morel/.ratelink/.crumb:before */
.pdp-tap,
.pdp-tap-muted {
    position: relative;
    min-height: 22px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    text-align: left;
}

.pdp-tap-muted {
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ink-soft);
}

.pdp-tap:before,
.pdp-tap-muted:before,
.pdp-rating:before,
.pdp-description__toggle:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    bottom: -12px;
}

.pdp-icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    position: relative;
    flex-shrink: 0;
}

.pdp-icon-btn:hover {
    background: var(--c-surface-soft);
}

.pdp-placeholder {
    background: var(--c-surface-alt);
    position: relative;
    overflow: hidden;
}

.pdp-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: pdp-spin .7s linear infinite;
    display: inline-block;
}

.pdp-spinner--dark {
    border: 2px solid rgba(0, 0, 0, .2);
    border-top-color: var(--c-ink);
}

/* display: inline-block выше перебивает атрибут hidden (спиннер нижней панели) */
.pdp-spinner[hidden] {
    display: none;
}

/* Кнопка «в корзину»: как у .btn-main прототипа — во время добавления спиннер
   стоит слева от «Добавляем…» с отступом 8px (script.js, changeButton BEFORE_ADD). */
.pdp-actions__row .product-item-buy-btn {
    gap: 8px;
}

/* ============================================================
   ТОСТ (proto18 .toast / .ta) — ответы на «в корзину» вместо окна Битрикса
   ============================================================
   script.js, showToast. Лежит в body, вне .pdp-layout, где объявлены токены, —
   поэтому цвета с запасными значениями. Слой выше кружка чата (2147483640),
   ниже шторок (2147483645+). */
.pdp-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2147483644;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    align-items: center;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 16px;
    border-radius: 10px;
    background: var(--c-ink, #2B2721);
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    animation: pdp-toast-in .2s ease-out;
}

.pdp-toast[hidden],
.pdp-toast__action[hidden] {
    display: none;
}

@keyframes pdp-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.pdp-toast__action {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* bootstrap «button:focus» рисует рамку и после клика мышью — оставляем её только клавиатуре */
.pdp-toast__action:focus:not(:focus-visible) {
    outline: none;
}

/* Как в прототипе: при нижней панели (до 991px) тост встаёт над ней — bottom 80. */
@media (max-width: 991px) {
    .pdp-toast {
        bottom: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-toast {
        animation: none;
    }
}

/* Во время добавления кнопка выключена, но, как в прототипе (.btn-main[disabled]),
   не сереет — серый фон «button:disabled» из style.css остаётся только у «Нет в наличии». */
.pdp-actions__row .product-item-buy-btn[aria-busy="true"]:disabled {
    background-color: #000;
}

@keyframes pdp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   ГАЛЕРЕЯ
   ============================================================
   Десктоп — сетка 2 колонки, без слайдера и без Slick.
   Мобайл — горизонтальный нативный scroll-snap, тоже без библиотеки. */

.pdp-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pdp-gallery__slide {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--c-surface-alt);
}

.pdp-photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    color: transparent;
    z-index: 1;
    pointer-events: none;
}

img.pdp-photo:not([src]),
img.pdp-photo.is-broken {
    visibility: hidden;
}

/* Кнопка на всю площадь слайда — открывает просмотрщик */
.pdp-gallery__zoom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    display: block;
    z-index: 2;
}

.pdp-gallery__zoom:hover:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .04);
    z-index: 1;
}

.pdp-gallery__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.pdp-gallery__duration {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 40px 0 0;
    transform: translateX(-50%);
    font-size: 13px;
    line-height: 18px;
    z-index: 2;
    color: var(--c-ink-soft);
    background: #fff;
    border-radius: 10px;
    padding: 0 8px;
}

.pdp-gallery__look-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    z-index: 3;
}

.pdp-gallery__look-btn:before {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px;
}

@media (hover: hover) {
    .pdp-gallery__look-btn:hover:after,
    .pdp-gallery__look-btn:focus-visible:after {
        content: attr(data-tip);
        position: absolute;
        right: 36px;
        top: 3px;
        background: var(--c-ink);
        color: #fff;
        font-size: 13px;
        line-height: 18px;
        padding: 4px 8px;
        border-radius: var(--r-md);
        white-space: nowrap;
    }
}

/* --- мобильная карусель --- */

.pdp-gallery__carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pdp-gallery__carousel::-webkit-scrollbar {
    display: none;
}

.pdp-gallery__carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--c-surface-alt);
}

.pdp-gallery__carousel-slide .pdp-gallery__look-btn {
    bottom: 24px;
}

/* Индикатор-полоски вместо точек: видно и сколько всего фото, и где ты */
.pdp-gallery__segments {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    gap: 4px;
    z-index: 4;
    pointer-events: none;
}

.pdp-gallery__segments i {
    flex: 1 1 0;
    min-width: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--c-border-control);
    transition: background-color .15s ease-out;
}

.pdp-gallery__segments i.is-active {
    background: var(--c-ink);
}

/* ============================================================
   БЛОК ПОКУПКИ
   ============================================================ */

/* --- бейджи --- */

.pdp-badges {
    display: flex;
    gap: 8px;
    min-height: 28px;
    flex-wrap: wrap;
}

.pdp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 4px 8px;
    border-radius: var(--r-lg);
    /* Умолчание для стикеров, у которых в справочнике не заданы цвета: без
       фона бейдж выглядит просто текстом. Инлайновый стиль из админки
       перебивает это правило. */
    background: var(--c-ink);
    color: #fff;
}

.pdp-badge--new {
    background: var(--c-ink);
    color: #fff;
}

.pdp-badge--sale {
    background: var(--c-sale);
    color: #fff;
}

.pdp-badge--preorder {
    background: #fff;
    color: var(--c-ink-soft);
    border: 1px solid var(--c-border-control);
}

.pdp-badge--best {
    background: var(--c-accent-dark);
    color: #fff;
}

/* --- заголовок --- */

.pdp-title-row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: flex-start;
}

.pdp-title {
    margin-top: 4px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: var(--c-ink);
}

/* --- рейтинг --- */

.pdp-rating-wrap {
    margin-top: 8px;
}

.pdp-rating {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink);
    font-size: 15px;
    line-height: 22px;
    white-space: nowrap;
    /* Старый style.css сбрасывает border на .product-item-rating-row, но не
       outline — по клику по кнопке браузер показывает стандартный контур
       фокуса вокруг звёзд. В прототипе такого нет. */
    outline: none;
}

/* Две наложенные строки звёзд: нижняя — контуры, верхняя — заливка,
   обрезанная по проценту. Даёт дробный рейтинг вроде 4,8 честно. */
.pdp-stars {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    color: var(--c-rating);
    flex-shrink: 0;
}

.pdp-stars__empty {
    display: flex;
    gap: 2px;
}

.pdp-stars__filled {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    gap: 2px;
    overflow: hidden;
    white-space: nowrap;
}

/* --- цена --- */

.pdp-price-wrap {
    margin-top: 16px;
}

.pdp-price-row {
    display: flex;
    align-items: baseline;
    gap: 0 8px;
    flex-wrap: wrap;
}

.pdp-price {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--c-ink);
}

.pdp-price--sale {
    color: var(--c-sale);
}

.pdp-price-old {
    color: var(--c-ink-soft);
    font-size: 15px;
    line-height: 20px;
    text-decoration: line-through;
    font-weight: 400;
}

.pdp-price-discount {
    font-size: 13px;
    line-height: 20px;
    color: var(--c-ink-soft);
    font-weight: 400;
    border: 1px solid var(--c-ink-soft);
    border-radius: var(--r-sm);
    padding: 0 8px;
}

/* Рассрочка / «под заказ» — строкой под ценой */
.pdp-installment {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
}

.pdp-tag {
    background: var(--c-surface-alt);
    color: var(--c-ink-soft);
    font-size: 13px;
    line-height: 18px;
    border-radius: var(--r-sm);
    padding: 4px 8px;
}

.pdp-tip {
    position: absolute;
    left: 0;
    top: 44px;
    background: var(--c-ink);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    padding: 8px 16px;
    border-radius: var(--r-lg);
    z-index: 6;
    width: 270px;
}

/* --- цвет --- */

.pdp-color-wrap {
    margin-top: 16px;
}

.pdp-label {
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
}

.pdp-colors {
    display: flex;
    gap: 4px;
}

.pdp-color {
    width: 44px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    position: relative;
}

.pdp-color__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.pdp-color[aria-checked="true"] .pdp-color__dot {
    outline: 2px solid var(--c-ink);
    outline-offset: 3px;
}

.pdp-color__tip {
    display: none;
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-ink);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    padding: 4px 8px;
    border-radius: var(--r-md);
    white-space: nowrap;
    z-index: 5;
}

.pdp-color:hover .pdp-color__tip {
    display: block;
}

/* --- размер --- */

.pdp-size-wrap {
    margin-top: 16px;
}

.pdp-size-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    height: 22px;
}

.pdp-size-label {
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ink-soft);
}

.pdp-size-label--hint {
    color: var(--c-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ссылка «Таблица размеров и обмеры» справа от подписи «Размер» */
.pdp-size-table-link {
    color: var(--c-ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pdp-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.pdp-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.pdp-size__btn {
    color: var(--c-ink);
    position: relative;
    height: 44px;
    border: 1px solid var(--c-border-control);
    border-radius: var(--r-md);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 16px;
    overflow: hidden;
    text-align: center;
}

.pdp-size__btn:hover {
    border-color: var(--c-ink);
}

.pdp-size__value {
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
}

/* Подпись внутри чипа — «мало» и т. п. */
.pdp-size__note {
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ink-soft);
}

.pdp-size__btn.is-selected {
    background: var(--c-ink);
    color: #fff;
    border: 2px solid var(--c-ink);
}

.pdp-size__btn.is-selected .pdp-size__note {
    color: #fff;
}

.pdp-size__btn.is-out {
    background: var(--c-surface-alt);
    color: var(--c-ink-soft);
    border: 1px dashed var(--c-border-control);
}

.pdp-size__btn.is-out .pdp-size__note {
    color: var(--c-ink-soft);
}

.pdp-size__btn.is-out.is-selected {
    background: var(--c-surface-alt);
    color: var(--c-ink);
    border: 2px solid var(--c-ink);
}

.pdp-size__btn.is-out.is-selected .pdp-size__note {
    color: var(--c-ink-soft);
}

/* Подсветка чипов, когда нажали «в корзину» без выбранного размера */
.pdp-size__btn.is-pulsing {
    animation: pdp-pulse .6s ease-out;
}

@keyframes pdp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(95, 100, 73, .55);
        border-color: var(--c-accent-dark);
    }
    25% {
        box-shadow: 0 0 0 6px rgba(95, 100, 73, 0);
        border-color: var(--c-accent-dark);
    }
    30% {
        box-shadow: 0 0 0 0 rgba(95, 100, 73, .55);
        border-color: var(--c-accent-dark);
    }
    55% {
        box-shadow: 0 0 0 6px rgba(95, 100, 73, 0);
        border-color: var(--c-accent-dark);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(95, 100, 73, 0);
    }
}

.pdp-caption {
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ink-soft);
    min-height: 16px;
    text-align: center;
}

.pdp-caption-slot {
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-few-left {
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ink-soft);
    display: inline-flex;
    align-items: center;
}

.pdp-warn-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-warning);
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Мобильный размер — одна строка-кнопка, открывает шит с размерами */
.pdp-size-row-wrap {
    margin-top: 24px;
}

.pdp-size-row {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--c-border-control);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-weight: 400;
}

/* --- кнопки --- */

.pdp-actions {
    margin-top: 16px;
}

.pdp-actions__row {
    display: flex;
    gap: 8px;
}

.pdp-btn {
    font-size: 16px;
    line-height: 24px;
    height: 52px;
    width: 100%;
    border-radius: var(--r-lg);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.pdp-btn[disabled] {
    cursor: default;
}

.pdp-btn--primary {
    background: var(--c-ink);
    color: #fff;
    border: 2px solid var(--c-ink);
}

.pdp-btn--primary:hover {
    filter: brightness(1.3);
}

/* Состояние «уже в корзине»: та же кнопка, вывернутая наизнанку */
.pdp-btn--primary.is-added {
    background: #fff;
    color: var(--c-ink);
}

.pdp-btn--primary.is-added:hover {
    background: var(--c-surface-soft);
    filter: none;
}

.pdp-btn--secondary {
    background: #fff;
    color: var(--c-ink);
    border: 1px solid var(--c-ink);
}

.pdp-btn--secondary:hover {
    background: var(--c-surface-soft);
}

.pdp-btn--small {
    height: 36px;
}

/* В основном ряду кнопка тянется, а сердце фиксированное 48×48 */
.pdp-actions__row .pdp-btn {
    height: 48px;
    width: auto;
    flex: 1 1 0;
}

.pdp-wishlist {
    width: 48px;
    height: 48px;
    border: 1px solid var(--c-border-control);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdp-wishlist:hover {
    background: var(--c-surface-soft);
}

.pdp-stylist-wrap {
    margin-top: 8px;
}

.pdp-btn--stylist {
    font-size: 16px;
    line-height: 24px;
    height: 44px;
    width: 100%;
    background: #fff;
    color: var(--c-ink);
    border: 1px solid var(--c-border-control);
    border-radius: var(--r-lg);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pdp-btn--stylist:hover {
    background: var(--c-surface-soft);
}

/* Анимация «стукнуть» иконку при переключении избранного */
.pdp [aria-pressed="true"] > svg.pdp-icon {
    animation: pdp-heart-pop .2s ease-out;
}

@keyframes pdp-heart-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

/* --- факты: артикул, параметры модели --- */

.pdp-facts {
    margin-top: 16px;
}

.pdp-facts__line {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pdp-facts__model {
    margin-top: 8px;
}

/* Кнопка «скопировать артикул» — визуально в строку текста */
.pdp-copy {
    width: 22px;
    height: 18px;
    min-height: 18px;
    justify-content: center;
}

@media (max-width: 991px) {
    .pdp-facts {
        margin-top: 32px;
        padding-top: 16px;
        border-top: 1px solid var(--c-border);
    }
}

/* --- описание --- */

.pdp-description {
    position: relative;
    margin-top: 8px;
}

.pdp-description__text {
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ink);
}

.pdp-description__text--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Firefox прибавляет к высоте обрезанного блока нижний margin вложенного <p> (16px),
   и из-под многоточия выглядывал верх 4-й строки; Chrome так не делает. Без отступов
   высота везде ровно 3 × 22px, и «Ещё» не появляется у текста ровно в 3 строки. */
.pdp-description__text--clamped > * {
    margin-top: 0;
    margin-bottom: 0;
}

.pdp-description__toggle {
    position: relative;
    font-size: 15px;
    line-height: 22px;
    color: var(--c-accent-dark);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* В proto18 кнопка стоит «прилипшей» к последнему слову зажатого текста —
       для реального текста произвольной длины это ненадёжно (не любой текст
       кончается ровно на удобном месте третьей строки), поэтому кнопка здесь
       отдельной строкой под текстом. */
    margin-top: 4px;
}

.pdp-description__toggle > span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pdp-description__toggle .pdp-icon {
    transition: transform .15s ease-out;
}

.pdp-description__toggle.is-expanded .pdp-icon {
    transform: rotate(180deg);
}

/* --- ряды: обмеры, состав, доставка, отзывы, наличие --- */

.pdp-rows {
    margin-top: 8px;
    border-top: 1px solid var(--c-border);
}

@media (max-width: 991px) {
    .pdp-rows {
        margin-top: 32px;
    }
}

.pdp-rows__item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--c-border);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: var(--c-ink);
}

.pdp-rows__item:hover {
    background: var(--c-surface-soft);
}

.pdp-rows__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdp-rows__right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink-soft);
    font-size: 15px;
    line-height: 22px;
}

.pdp-pill {
    background: var(--c-surface-alt);
    border-radius: var(--r-sm);
    padding: 4px 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ink-soft);
}

/* --- строка магазина --- */

.pdp-store-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    line-height: 22px;
    width: 100%;
    text-align: left;
}

/* ============================================================
   НИЖНЯЯ ПАНЕЛЬ (мобайл)
   ============================================================
   Кнопка покупки и сердце всегда под большим пальцем. */

.pdp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
    z-index: 999;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    align-items: center;
    height: 64px;
}

.pdp-bar__wishlist {
    width: 52px;
    height: 52px;
    border: 1px solid var(--c-border-control);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Чтобы панель не накрывала конец страницы */
.pdp-bar-spacer {
    height: 64px;
}

@media (min-width: 992px) {
    .pdp-bar,
    .pdp-bar-spacer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdp *,
    .pdp *:before,
    .pdp *:after {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   ПЕРЕХОДНЫЙ СЛОЙ
   ============================================================
   Действует, пока разметка карточки переведена на pdp-классы не
   целиком. Здесь сетка включается поверх старых блоков: на элементах
   одновременно висят и старый класс, и новый.

   Специфичности хватает без !important: «.pdp-layout > .pdp-buy» — это
   0,2,0, а старые «.product-info» — 0,1,0, в том числе внутри
   медиазапросов. Каждое правило снимается вместе со старым классом.
   Когда переход закончится, весь блок можно удалить целиком. */

/* Старые колонки задавали ширину процентами и flex'ом — в сетке это
   лишнее и ломает треки. Плюс у галереи был хак min-height:200vh. */
.pdp-layout > .pdp-gallery,
.pdp-layout > .pdp-buy {
    width: auto;
    flex: none;
    min-height: 0;
}

/* Залипанием пока занимается внутренний .sticky-container со своим
   отступом сверху. Не включаем вторую липкость поверх первой —
   sticky у самой колонки заработает, когда уйдёт старый класс. */
.pdp-buy.product-info {
    position: static;
}

/* БАГ (найден после заливки): при align-items:start колонка покупки
   сжимается до высоты своего контента (~1150px) вместо высоты галереи
   (~2000px+). До сетки колонка была flex-элементом и по умолчанию
   растягивалась на высоту соседа — там было где «путешествовать» вложенному
   .sticky-container, пока он залипал. Как только колонка стала короче
   галереи, места для путешествия почти не осталось, и sticky начинал
   отлипать через 100–150px скролла вместо того, чтобы держаться до конца.
   В прототипе sticky висит прямо на колонке (грид даёт такому элементу
   всю высоту строки как границу, а не высоту его же контента) — у нас он
   на вложенном div, для которого действует именно высота родителя, поэтому
   растягиваем колонку вручную тем же способом, что раньше делал flex. */
.pdp-layout > .pdp-buy {
    align-self: stretch;
}

@media (min-width: 992px) {
    /* Третий ребёнок контейнера — мобильный слайдер. На десктопе скрыт
       только его внутренний блок, а сама обёртка осталась бы пустой
       ячейкой сетки высотой 60svh. */
    .pdp-layout > .mobile-product-slider-parent {
        display: none;
    }

    /* Страничный .container добавляет по 20px с боков, из-за чего боковое
       поле выходило 68px вместо прототипных 48. Гасим их, чтобы поле
       задавал только padding сетки — один источник правды, как в макете.
       Только на десктопе: ниже 992px сетка выключена и вылезли бы поля.
       Шире 1800px сдвиг сменяется центрированием: голые -20px перебивали
       margin:0 auto у .product-container (max-width 1760), и на больших
       мониторах карточка прилипала к левому краю. */
    .pdp-layout {
        margin-left: max(-20px, (100% - 1760px) / 2);
        margin-right: max(-20px, (100% - 1760px) / 2);
    }

    /* Левое поле у колонки задавал старый блок (20px). В сетке расстояние
       между колонками — это gap, поэтому поле убираем. Только на десктопе:
       на мобиле у колонки свои поля по 16px, и их трогать нельзя. */
    .pdp-layout > .pdp-buy {
        padding-left: 0;
    }
}

/* Кнопки: в прототипе «в корзину» и сердце стоят одной строкой, под ними
   «Обратиться к стилисту» во всю ширину. Старый контейнер был
   flex + wrap + space-between с gap 20px, а у кнопок внутри —
   «flex:1 1 calc(50% - 10px) !important» и «height:52px !important».
   Перебить их можно только тоже через !important, но с большей
   специфичностью (0,2,0 против 0,1,1). Уйдёт вместе со старыми классами. */
.pdp-actions {
    display: block;
}

.pdp-actions .pdp-actions__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdp-actions .pdp-actions__row > button {
    flex: 1 1 auto !important;
    height: 48px !important;
}

.pdp-actions .pdp-stylist-wrap {
    margin-top: 8px;
}

.pdp-actions .pdp-stylist-wrap > button {
    width: 100%;
    height: 44px !important;
}

/* Шапка колонки: бейджи, заголовок, рейтинг.
   Отступы в прототипе идут сверху вниз одной лесенкой (h1 +4, рейтинг +8),
   а в старой вёрстке они были размазаны по margin-bottom у блоков. */

/* Был margin-bottom:15px, из-за чего зазор до заголовка выходил ~16px
   вместо прототипных 4px. */
.pdp-badges.labels {
    margin-bottom: 0;
}

/* Был margin-bottom:16px; в прототипе своего отступа у заголовка нет —
   расстояние до рейтинга задаёт обёртка рейтинга (margin-top:8px). */
.pdp-buy .product-item-info__head {
    margin-bottom: 0;
}

/* Отступ сверху переехал на обёртку .pdp-rating-wrap, у самой кнопки его
   быть не должно — иначе сложится вдвое. Высота: в прототипе это строка
   22px, а не блок 32px. */
.pdp-rating-wrap .pdp-rating {
    margin: 0;
    min-height: 0;
}

/* Подчёркивание теперь на вложенном .pdp-link-underline, на самой кнопке
   оно лишнее. */
.pdp-rating.product-item-rating-row--empty {
    text-decoration: none;
    color: var(--c-ink);
}

/* Цена. Старые правила заданы как «span.product-item-price» (0,1,1), поэтому
   перебиваем их селекторами из двух классов (0,2,0), без !important. */

/* Был display:flex + align-items:center. Внутри должна быть колонка:
   строка цены, под ней рассрочка. */
.pdp-buy .pdp-price-wrap {
    display: block;
}

/* Отступ между ценой и старой ценой задаёт gap строки. Старый margin-right
   у цены складывался с ним и давал 16px вместо 8px. */
.pdp-price-row .pdp-price {
    margin-right: 0;
}

/* При скидке цена красная (proto18: .price.sale). Старое правило задаёт
   цвет через span.product-item-price и само по себе сильнее. */
.pdp-price-row .pdp-price--sale {
    color: var(--c-sale);
}

/* Рассрочка: в прототипе это строка 13/18 приглушённым, с отступом 4px от
   цены. Раскладку блока не трогаем — внутри него живёт виджет «Долями». */
.pdp-buy .product-item-podeli1 {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--c-ink-soft);
}

/* Цвет и размеры.
   Старые блоки были горизонтальными flex-рядами: подпись, чипы и ссылка на
   таблицу стояли в одну строку и переносились по мере нехватки места.
   В прототипе это две строки: шапка (подпись слева, ссылка справа) и чипы. */

/* Был display:flex + margin-top:25px от .product-item-scu-list */
.pdp-buy .pdp-color-wrap {
    margin-top: 16px;
    margin-bottom: 0;
}

.pdp-buy .pdp-color-wrap .product-item-scu-list {
    margin-top: 0;
}

.pdp-buy .pdp-size-wrap {
    display: block;
    margin-top: 16px;
    margin-bottom: 0;
}

/* Был gap:15px и margin-right:auto (ссылка на таблицу отжималась вправо
   внутри того же ряда). Теперь это отдельный ряд чипов. */
.pdp-buy .pdp-sizes {
    margin: 8px 0 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

.pdp-size-head .pdp-size-label {
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    text-transform: none;
    color: var(--c-ink-soft);
    margin: 0;
}

/* Ссылка на таблицу размеров: была 10px весом 200 — на грани читаемости.
   В прототипе это обычная строка 15/22 с иконкой-линейкой. */
.pdp-size-head .pdp-size-table-link {
    margin: 0;
    cursor: pointer;
}

.pdp-size-head .table-sizes__name {
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: var(--c-ink);
    text-transform: none;
}

/* Чип: скругление 4 → 6, как в макете. Остальное (44px, рамка, состояние
   selected) уже совпадает после ранних правок. */
.pdp-sizes .pdp-size {
    border-radius: var(--r-md);
}

/* Зазор «размеры → кнопки» был 31px вместо 16. Лишние 15px давало не поле
   секции, а схлопывание полей: у последнего блока внутри
   .product-item-detail-info-section стоял margin-bottom:15px, и он протекал
   наружу через границу секции (у неё нет ни padding, ни border снизу).
   Отступ между блоками задаёт сама секция, у её содержимого его быть не должно. */
.pdp-buy .product-item-detail-info-section > *:last-child {
    margin-bottom: 0;
}

/* Контраст текста на выбранном чипе.
   Цвет «белый» был задан контейнеру <li>, но сам текст лежит внутри
   <a class="select-size__link"> со своим цветом #333 — ссылка не наследует
   цвет родителя и перебивала его. На тёмном фоне выбранного чипа получалось
   1,17:1 при норме 4,5:1, то есть текст практически не виден.
   Видно это было не всегда: у текущего размера Битрикс отдаёт <div> вместо
   <a> (ссылка на саму себя не нужна), а div цвет наследует. Ломалось там,
   где «выбранным» оказывался чип-ссылка.
   Цветом теперь владеет чип, ссылка его наследует. */
.pdp-sizes .pdp-size {
    color: var(--c-ink);
}

.pdp-sizes .pdp-size.selected {
    color: #fff;
}

/* Ссылка растянута на весь чип: было 35×38 внутри 44×44 — палец попадал
   мимо нормы 44px, хотя сам чип выглядел правильного размера. */
.pdp-sizes .pdp-size > .select-size__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 12px;
}

/* Размера нет в наличии: как .chip.out в прототипе — пунктирная рамка и
   приглушённый фон. Раньше поверх чипа рисовалась диагональ из style.css
   (li.option-missing::after, длина = ширине чипа, поворот -45°). Ширина чипов
   разная — «XS-S», «M», «XXL» — и линия длиной в ширину при повороте выходила
   за рамку (у чипа 61×44 — примерно на 20px выше верхней грани), а overflow у
   <li> не скрыт. Пунктир от ширины не зависит, поэтому диагональ снимаем. */
.pdp-buy .pdp-sizes li.pdp-size.option-missing {
    background: var(--c-surface-alt);
    color: var(--c-ink-soft);
    border: 1px dashed var(--c-border-control);
}

.pdp-buy .pdp-sizes li.pdp-size.option-missing::after {
    content: none;
}

/* Текст внутри ссылки красился отдельным правилом style.css в ink-faint */
.pdp-buy .pdp-sizes li.pdp-size.option-missing > .select-size__link {
    color: inherit;
}

/* Недоступный, но выбранный (чтобы подписаться на поступление): в прототипе
   рамка 2px чёрная на светлом фоне. Реальную 2px-рамку не берём — чип с auto-
   шириной стал бы на 2px шире и сдвинул соседей, поэтому вторая пара
   пикселей рисуется внутренней тенью. */
.pdp-buy .pdp-sizes li.pdp-size.option-missing.selected {
    background: var(--c-surface-alt);
    color: var(--c-ink);
    border: 1px solid var(--c-ink);
    box-shadow: inset 0 0 0 1px var(--c-ink);
}

/* Селектор цвета.
   Было: квадрат 26×26 в контейнере 30×30. В прототипе — круг 32×32 внутри
   кнопки 44×36, у выбранного обводка 2px с отступом 3px. */
.pdp-color-wrap .product-item-scu-item-list {
    display: flex;
    gap: 4px;
    padding: 0;
    list-style: none;
    /* Кнопка 44px шире кружка 40px, поэтому кружок утоплен внутрь неё на 2px
       и первый цвет не попадал на одну вертикаль с заголовком, ценой и
       остальной колонкой. Отрицательное поле компенсирует ровно этот
       внутренний отступ — кружок встаёт заподлицо, а зона нажатия остаётся
       полными 44×44. В прототипе, к слову, такой компенсации нет и кружок
       смещён на 6px: выравниваем осознанно лучше прототипа.
       Правое поле — зазор до названия цвета: 12px + 2px внутреннего отступа
       последней кнопки = 14px, ровно как в прототипе (там 8px gap + 6px
       отступа). Поля живут на самом списке, поэтому при одном цвете, когда
       список скрыт, они исчезают вместе с ним и не разносят строку
       «Цвет: Название». */
    margin: 0 12px 0 -2px;
}

/* min-height/max-height здесь обязательны: у .t-product-color__item стоял
   max-height:30px, который зажимал высоту, и одного height:36px не хватало. */
/* Селектор цвета — точно по proto18.html (.sws/.sw/.dot, строки 166-169):
   .sw{width:44px;height:36px;border-radius:22px;position:relative}
   .dot{width:32px;height:32px;border-radius:50%}
   .sw[aria-checked="true"] .dot{outline:2px solid var(--c-ink);outline-offset:3px}
   Никаких своих отклонений (ни 12storeez-ring, ни утончённый outline) —
   ровно эти три правила. Из проверенного набора не переношу только
   .sw-tip (подсказку по наведению): пользователь явно попросил «без всяких
   ховер эффектов», это единственное сознательное расхождение с прототипом. */
/* Размер кнопки. В прототипе это 44×36 при кружке 32px, но там кольцо выбора
   рисуется СНАРУЖИ кружка (outline) — выбранный цвет занимает 42px, и зазор
   до соседа сжимается до 11px. Мы кольцо убрали внутрь, чтобы ничего не
   «плясало», и при кружке 32px выбранный стал выглядеть мельче прототипа
   (32px вместо 42px), а зазор — шире (16px вместо 11px).
   Поэтому увеличиваем постоянный размер: кружок 40px, кнопка 44×44 (заодно
   полная норма нажатия 44×44 вместо прежних 44×36). Видимый зазор между
   кружками получается 2+2+4 = 8px — плотнее, чем в прототипе, а выбранный
   кружок по массе совпадает с прототипным (40px против 42px). */
.pdp-color-wrap .js-color-container {
    width: 44px;
    height: 44px;
    min-height: 0;
    max-height: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    position: relative;
}

.pdp-color-wrap .select-color__link {
    /* Базовое (безусловное) правило старого сайта — «.product-item-scu-item
       -color-block{position:absolute;top:0;right:0;width:100%;height:100%}» —
       действует на ЛЮБУЮ ссылку-кружок независимо от того, выбран цвет или
       нет. Сброс ширины/высоты его не отменяет: элемент остаётся вынутым из
       потока и не центрируется через flex у родителя, поэтому у невыбранных
       цветов кружок съезжал в угол вместо центра. */
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    /* !important здесь обязателен: старое правило
       «.t-product-color__item.selected .product-item-scu-item-color-block
       { width:calc(100% - 4px); height:calc(100% - 4px) }» — это три класса
       (0-3-0), оно сильнее нашего (0-2-0) и ТОЛЬКО для выбранного цвета
       растягивало ссылку до 40×32 вместо 32×32. Кружок внутри вставал не по
       центру (смещение 2px вместо 6px) и уезжал на 4px влево — отсюда и
       разные визуальные зазоры слева и справа при переключении цвета. */
    width: 40px !important;
    height: 40px !important;
    box-sizing: border-box;
    border: 0;
    padding: 0;
    border-radius: 50%;
}

/* Кружок всегда заполняет ссылку целиком. Его итоговый размер задаётся
   только рамкой и внутренним отступом ссылки — один рычаг вместо двух. */
.pdp-color-wrap .product-item-scu-item-color {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    /* Внутренняя рамка, чтобы светлые цвета не сливались с белым фоном */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Кольцо выбора — по механике 12storeez, а не через outline.
   Ключевая разница: outline рисуется СНАРУЖИ кружка, поэтому видимая масса
   выбранного цвета была 42px против 32px у невыбранного. Расстояние до
   соседа менялось на 10px в зависимости от того, какой цвет выбран, — это
   и было видно глазом как «пляшет».
   Теперь внешняя коробка ссылки всегда ровно 32px (border-box), а рамка и
   отступ растут ВНУТРЬ, ужимая сам кружок 32 → 24px:
   24 (кружок) + 2*2 (отступ) + 2*2 (рамка) = 32. Видимая масса одинакова в
   обоих состояниях, значит зазоры между кружками не меняются в принципе. */
.pdp-color-wrap .js-color-container.selected .select-color__link {
    border: 2px solid var(--c-ink);
    padding: 3px;
}

.pdp-color-wrap .js-color-container.selected .product-item-scu-item-color {
    outline: none;
}

/* Строка «Цвет: Название» (когда цвет один).
   Разгадка сразу трёх жалоб — мелкий шрифт, капс и пустое место — в одном
   общем правиле style.css: `.product-item-scu-list span` ловит ЛЮБОЙ span
   внутри блока и даёт вес 200, 12px, uppercase, ПЛЮС width:100%;
   max-width:68px; margin-right:20px — это и есть жёсткая коробка вокруг
   подписи, которая отодвигает значение вправо и выглядит пустым местом.
   У значения сверху ещё font-size:10px — оно мельче самой подписи.
   В прототипе это простая строка 15/22 обычным начертанием, без коробок. */
.pdp-buy .pdp-color-wrap .pdp-color-label,
.pdp-buy .pdp-color-wrap .pdp-color-value {
    display: inline;
    width: auto;
    max-width: none;
    margin-right: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ink-soft);
    text-transform: none;
    text-wrap: wrap;
}

.pdp-buy .pdp-color-wrap .pdp-color-label {
    margin-right: 4px;
}

/* Двойной контур на выбранном цвете (найдено на мультицветном товаре).
   Старый дизайн свотчей был квадратным: «.t-product-color__item.selected
   { outline:2px solid #000 }» рисовал квадратную рамку вокруг ВСЕЙ кнопки
   44×36 — в квадратном дизайне это и была рамка выбора, но круглый кружок
   внутри уже рисует свою рамку сам, и оба контура накладываются друг на
   друга. Позиционирование самой ссылки (top/right/bottom/left/width/height)
   для выбранного состояния сброшено выше, в общем правиле для
   .select-color__link — оно одинаково нужно и выбранному, и невыбранному
   цвету, поэтому больше не завязано на .selected отдельно. */
.pdp-color-wrap .js-color-container.selected {
    outline: none;
}

/* «_white» без выбора получал тот же квадратный контур (защита от слияния
   с белым фоном страницы) — у круглого кружка эту роль уже играет
   внутренняя тень (inset box-shadow), поэтому и здесь контур лишний. */
.pdp-color-wrap .js-color-container._white {
    outline: none;
}

/* Кнопка копирования артикула и «Ещё» у описания превратились в кнопки
   размером с «Добавить в корзину» (найдено на мультицветном товаре).
   Причина — в самой структуре исходного (не тронутого этим переносом)
   шаблона: «.product-item-info__buttons» физически оборачивает не только
   кнопки, а вообще весь блок покупки до конца — факты, описание, ряды,
   старый аккордеон — и закрывается только перед quick_order.php. Раньше
   там не было ни одной настоящей <button>, поэтому давняя широкая заливка
   «.product-item-info__buttons button {...} !important» и заодно
   «.t-product__buy.t-product-buy button { background:#000 }» (плюс своя
   версия в теме, template_styles.css) не имели видимой цели. Как только
   в этой зоне появились обычные кнопки — они выросли на весь блок.
   Перестраивать разметку сейчас рискованно (можно задеть quick_order.php
   и другие блоки, которые полагаются на текущую вложенность) — глушим
   точечно, только на двух новых кнопках, с той же силой (!important
   против !important, где он есть). */
.pdp-facts .pdp-copy,
.pdp-description .pdp-description__toggle {
    display: inline-flex !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    background: none !important;
    /* Рамка браузера по умолчанию (border:2px outset) — обе кнопки обычные
       <button>, и никакой старый класс сайта её не сбрасывает (общий сброс
       браузерных стилей для кнопок висит на корневом .pdp, а он на страницу
       пока не навешен). Отсюда и был виден серый прямоугольный контур
       вокруг иконки копирования и вокруг «Ещё». */
    border: 0 !important;
}

.pdp-facts .pdp-copy {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px;
    padding: 0 !important;
}

.pdp-facts .pdp-copy .pdp-icon {
    width: 14px;
    height: 14px;
}

/* Старое правило сайта для .t-product__code даёт строке 30px и отступ снизу 6px —
   текст уезжал вверх относительно иконки копирования. Выравниваем по строке .pdp-fine. */
.pdp-facts .t-product__code {
    line-height: 18px;
    margin: 0;
}

.pdp-description .pdp-description__toggle {
    padding: 0 !important;
    margin-top: 4px !important;
}

/* Рамка и белый текст при наведении на «Ещё»/«Скрыть» и иконку копирования
   артикула — этого нет в прототипе (там у этих элементов вообще нет
   hover-состояния). Причина та же, что и с их размером/рамкой раньше: обе
   кнопки живут в «отравленной» зоне «.t-product__buy.t-product-buy», а её
   :hover-вариант («color:#fff;background:#676767;outline:1px solid #000»)
   я тогда нашёл только в style.css и в его же теме (template_styles.css),
   но не проверил :hover-варианты в файле темы отдельно — он и красит текст
   в белый, добавляет серый фон и чёрную рамку при наведении на ЛЮБУЮ
   кнопку внутри. Глушим точно так же, как базовое состояние. */
.pdp-facts .pdp-copy:hover,
.pdp-description .pdp-description__toggle:hover {
    color: inherit !important;
    background: none !important;
    outline: none !important;
}

/* Микроанимация на кружках цвета — в прототипе её нет вообще (там мгновенный
   показ/скрытие подсказки без transition). У нас на кружок наведён старый
   tooltip «.product-item-scu-item-color-container:hover:after», дублирующий
   уже видимую подпись цвета рядом («Цвет: Серый»), плюс general
   «transition:all .2s» на весь элемент, из-за которого любое изменение
   состояния (в том числе клик) плавно анимируется. Убираем оба. */
.pdp-color-wrap .t-product-color__item {
    transition: none;
}

.pdp-color-wrap .product-item-scu-item-color-container:hover:after {
    content: none;
}

/* Увеличение кружка при наведении — этого нет в прототипе (там только
   тоoltip .sw-tip, без трансформаций, и мы её сознательно не переносим).
   Источник — общесайтовый main.min.css, правило
   «.t-product-color__item:not(._active):hover{transform:scale(1.1)}»,
   спрятанное внутри @media(min-width:770px) — предыдущая проверка через
   element.matches() его не находила именно поэтому: правила внутри @media
   лежат на уровень глубже, и плоский перебор document.styleSheets их не
   видит без рекурсии в CSSMediaRule.cssRules. «._active» — не наш класс
   (JS ставит .selected), поэтому условие ":not(._active)" почти всегда
   истинно и увеличение срабатывает и на выбранном, и на невыбранном
   кружке. */
.pdp-color-wrap .t-product-color__item:hover {
    transform: none !important;
}

/* --- переходный слой: ряды (наличие, состав, уход, доставка, отзывы, обмеры) --- */

/* Верхняя граница группы и отступ от описания. В прототипе они на контейнере
   .rows, у нас общего контейнера нет: «Наличие» — статическая разметка, всё
   остальное скрипт вставляет в <dl id="..._sku_prop">. Поэтому границу рисует
   первый ряд группы, какой бы из двух это ни оказался. */
.pdp-actions .product-item-shops,
.pdp-actions .product-item-detail-properties > *:first-child {
    margin-top: 8px;
    border-top: 1px solid var(--c-border);
}

/* Если «Наличие» есть, оно и есть первый ряд — у первого вставленного границу
   снимаем, иначе на стыке получится двойная линия. */
.pdp-actions .product-item-shops ~ .t-accordion .product-item-detail-properties > *:first-child {
    margin-top: 0;
    border-top: 0;
}

/* Собственный нижний отступ списка свойств (10px от bootstrap) разрывал бы
   группу перед «Читать обзор». */
.pdp-actions .product-item-detail-properties {
    margin-bottom: 0;
}

/* Правый паддинг 40px держал прежний шеврон в absolute. В прототипе шеврон
   лежит в потоке внутри ряда. У аккордеона паддинг оставляем: там маркер
   «плюс/минус» по-прежнему absolute, он уйдёт вместе с переездом на панели. */
.pdp-rows__item.product-item-shops,
.pdp-rows__item.product-item-measuring {
    padding-right: 0;
}

/* В прототипе подпись ряда — обычного начертания, у старых имён было 500. */
.pdp-rows__left .product-item-shops__name,
.pdp-rows__left .product-item-measuring__name,
.t-accordionItem .t-accordionItem__title .pdp-rows__left {
    font-weight: 400;
}

.t-accordionItem .t-accordionItem__title .pdp-rows__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdp-rows__right .pdp-icon {
    color: var(--c-ink-soft);
}

/* «Обмеры изделия»: в прототипе это ряд только на мобильной. На десктопе те же
   обмеры открываются ссылкой «Таблица размеров и обмеры» в шапке размеров —
   модалка одна, вкладки внутри. */
@media (min-width: 992px) {
    .pdp-rows__item--mobile {
        display: none;
    }
}

/* «Читать обзор» — ссылка, а не кнопка: гасим подчёркивание и прежние поля,
   чтобы ряд встал вплотную к соседям. */
.pdp-rows__item.pdp-rows__review {
    margin: 0;
    color: var(--c-ink);
    text-decoration: none;
}

/* --- нижняя панель: дополнение к разделу «НИЖНЯЯ ПАНЕЛЬ» выше --- */

/* Геометрия панели и её сокрытие на десктопе уже описаны там, при переносе
   прототипа. Здесь только то, чего в переносе не было: кнопка покупки,
   состояние сердца и соседи, которых панель перекрывает. */

/* Скрипт снимает hidden после того, как подставит подпись, иначе в первый кадр
   видно пустую кнопку. (0,2,0) против (0,1,0) — перебивает display:flex. */
.pdp-bar[hidden] {
    display: none;
}

/* Сердце — настоящая <button>, а сбросы браузерных стилей висят на корневом
   .pdp, которого на странице пока нет. */
.pdp-bar__wishlist {
    padding: 0;
    margin: 0;
    background: none;
    color: var(--c-ink);
    /* --r-lg объявлен на .pdp-layout, а панель лежит выше него — запасной 8px */
    border-radius: var(--r-lg, 8px);
}

.pdp-bar__wishlist[aria-pressed="true"] .pdp-icon {
    fill: currentColor;
}

.pdp-bar__buy {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--c-ink);
    color: #fff;
    border: 2px solid var(--c-ink);
    border-radius: var(--r-lg, 8px);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

/* Прототип: у выключенной кнопки меняется только курсор, вид прежний. */
.pdp-bar__buy[disabled] {
    cursor: default;
}

@media (max-width: 991px) {
    /* Кнопка «в корзину» и сердце на мобильной живут в нижней панели, поэтому
       ряд в блоке покупки скрыт. Из DOM он не убран: настоящая кнопка остаётся
       носителем состояния (текст, disabled) и приёмником клика от панели.
       Селектор с .pdp-actions — чтобы совпасть по специфичности (0,2,0) с
       правилом переходного слоя выше, иначе оно оставляет ряду display:flex. */
    .pdp-actions .pdp-actions__row {
        display: none;
    }

    /* Панель накрывает конец страницы. Спейсер .pdp-bar-spacer из переноса тут
       не годится: он встал бы внутри карточки, а перекрывается низ всей
       страницы — рекомендации и подвал. */
    body {
        padding-bottom: 64px;
    }

    /* Кружок чата садится ровно на панель. Перекрыть его слоем нельзя — z-index
       у виджета максимальный, можно только подвинуть. В прототипе он поднимается
       на ту же высоту. */
    fstrk-widget {
        bottom: 80px !important;
    }
}

/* --- мобильная шторка выбора размера (прототип: .dlg.sheet + .sr) --- */

/* Открывается кнопкой нижней панели. Сама ничего не решает: тап по размеру
   пересылает клик на настоящий чип в блоке покупки, а потом на настоящую
   кнопку «в корзину». Поэтому у строк здесь свои классы, а не .select-size —
   скрипт карточки ищет чипы по «.sizes__items-sizes > li.select-size» и не
   должен видеть копии. */
.pdp-sheet[hidden] {
    display: none;
}

.pdp-sheet__scrim {
    position: fixed;
    inset: 0;
    /* Шторка обязана перекрывать всё, включая кружок чата: у виджета
       z-index 2147483640, поэтому слои шторки заданы выше него. Это правило
       для всех шторок карточки, а не только для этой. */
    z-index: 2147483645;
    /* --c-scrim объявлен на .pdp-layout, шторка лежит выше него */
    background: var(--c-scrim, rgba(43, 39, 33, .45));
    animation: pdp-sheet-fade .2s ease-out;
}

.pdp-sheet__window {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483646;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
    animation: pdp-sheet-in .22s ease-out;
}

@keyframes pdp-sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pdp-sheet-in {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* touch-action: none — иначе жест закрытия соревнуется с прокруткой страницы */
.pdp-sheet__head {
    flex-shrink: 0;
    padding: 4px 8px 4px 24px;
    touch-action: none;
}

.pdp-sheet__grabber {
    width: 40px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 2px;
    background: var(--c-border-control);
}

.pdp-sheet__row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
}

.pdp-sheet__title {
    flex: 1;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: var(--c-ink);
}

.pdp-sheet__close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    color: var(--c-ink);
}

.pdp-sheet__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 24px 24px;
}

/* Строка размера — прототип: .sr */
.pdp-sheet__item {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px;
    margin: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--c-border);
    font-family: inherit;
    font-size: 15px;
    line-height: 22px;
    color: var(--c-ink);
    text-align: left;
}

.pdp-sheet__item--selected {
    background: var(--c-surface-alt);
}

.pdp-sheet__item--disabled {
    color: var(--c-ink-soft);
}

.pdp-sheet__size {
    font-weight: 500;
}

.pdp-sheet__status {
    font-size: 15px;
    line-height: 22px;
}

.pdp-sheet__item--disabled .pdp-sheet__status {
    color: var(--c-ink-soft);
}

.pdp-sheet__link {
    margin: 4px 0 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    line-height: 22px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--c-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Полоса-баннер над шапкой (header.banner). Раньше её скрипт после загрузки прибавлял
   высоту полосы к margin-top карточки — вся страница съезжала вниз, CLS ~0,2 на мобильной.
   Высота полосы фиксирована (header.banner/style.css: 34px, до 769px — 48px), поэтому
   место резервируем сразу стилями. Закрыли полосу — banner.remove(), отступ уходит сам. */
body:has(header .banner) .product-section {
    padding-top: 34px;
}

@media (max-width: 769px) {
    body:has(header .banner) .product-section {
        padding-top: 48px;
    }
}