/* Строки переключения памяти и SIM/связи + подсветка кружков цвета
   (фича за флагом cv_test, 2026-08-26).
   ⚠ Файл подключает САМ сниппет msProductVariants, а не шаблон: он знает про
   флаг, а шаблон карточки кэшируется. Иначе подсветка цветов досталась бы и
   покупателям без флага. */

.cvg-variants > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cvg-variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 12px;
    border: 1px solid #E4E6E9;
    border-radius: 8px;
    background: #fff;
    color: #3B3D40;
    font-size: 14px;
    line-height: 1.1;
    text-decoration: none;
    transition: border-color .15s ease;
}
/* Тема подчёркивает любую ссылку при наведении (a:hover) — у кнопок это
   лишнее, оставляем только подсветку рамки. */
.cvg-variant:hover,
.cvg-variant:focus,
.cvg-variant.active {
    text-decoration: none;
}
.cvg-variant:hover {
    border-color: #FF0000;
    color: #3B3D40;
}
.cvg-variant.active {
    border-color: #FF0000;
    cursor: default;
}
/* Такого варианта нет в текущем цвете: кнопка живая, но приглушена —
   по клику откроется тот же объём в другом цвете. */
/* «Такого сочетания у выбранного цвета нет»: кнопка живая и ведёт к
   ближайшему варианту, поэтому гасим её мягко — рамкой и цветом цены, а
   само значение остаётся читаемым (раньше opacity гасил и его). */
.cvg-variant.cvg-dim {
    border-color: #F1F2F3;
    color: #6B6F76;
}
/* Цена у приглушённой кнопки читаемая: с 29.08.2026 там стоит настоящая
   цена соседнего цвета — та, которую покупатель получит по нажатию, и по
   ней же он сравнивает объёмы. Совсем бледной (#A8ACB2) она была, пока на
   её месте стоял прочерк. */
.cvg-variant.cvg-dim .cvg-variant-price { color: #6B6F76; }
/* А вот прочерк — по-прежнему бледный: обещать нечего. */
.cvg-variant.cvg-dim .cvg-variant-price.cvg-no-price { color: #A8ACB2; }
.cvg-variant.cvg-dim:hover {
    border-color: #FF0000;
    color: #3B3D40;
}

/* Кружки цвета: та же подсветка рамки при наведении, что у кнопок. */
.product-colors a.color:hover {
    border-color: #FF0000;
    text-decoration: none;
}
/* Цвет не продаётся (нет предложения и остатка) — бледный и в конце строки
   (порядок задаёт сниппет msProductColorsOrder). */
.product-colors a.color.cvg-color-off {
    opacity: .4;
}
.product-colors a.color.cvg-color-off:hover {
    opacity: .7;
}

@media (max-width: 576px) {
    .cvg-variant {
        min-width: 52px;
        padding: 6px 10px;
        font-size: 13px;
    }
    .cvg-variants > div { gap: 6px; }
}

/* Цена под кнопкой памяти и связи (просьба Михаила 26.08.2026): про объём
   спрашивают чаще всего, и так цена видна без нажатий — попадает в скриншот
   вместе с товаром. */
.cvg-variants .cvg-variant {
    flex-direction: column;
    line-height: 1.2;
    padding-top: 5px;
    padding-bottom: 5px;
}
.cvg-variants .cvg-variant-label {
    display: block;
    font-weight: 500;
    color: #1F2124;
}
.cvg-variants .cvg-variant-price {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #6B6F76;
    white-space: nowrap;
}
.cvg-variants .cvg-variant.active .cvg-variant-price { color: #3B3D40; }
.cvg-variants .cvg-variant-price.cvg-no-price { color: #A8ACB2; }

/* Список цен по цветам на карточке — тот же вид, что в каталоге */
.product-page .cvg-prices { margin-top: 10px; max-width: 340px; }
.product-page .cvg-price-current { background: #FAFAFA; border-radius: 6px; }

/* Цена под каждым цветом на карточке (просьба Михаила 26.08.2026) — вместо
   прежней кнопки-палитры. Ссылка цвета становится колонкой: картинка сверху,
   цена под ней. */
.product-colors.cvg-colors-priced a.color {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding-bottom: 4px;
}
.cvg-color-price {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.2;
    color: #6B6F76;
    white-space: nowrap;
}
.product-colors.cvg-colors-priced a.color.active .cvg-color-price { color: #3B3D40; }
.cvg-color-price.cvg-color-off { color: #A8ACB2; }

/* ⚠ ГЛАВНАЯ ГРАБЛЯ ЧИТАЕМОСТИ (нашёл Михаил 27.08.2026 в панели браузера).
   Тема гасит ВСЕ подписи внутри строки цвета:

       .product-colors span { opacity: .5 }

   Наши значения и цены — тоже span, поэтому они наследовали полупрозрачность,
   и никакой цвет её не перебивал: #1F2124 при opacity .5 на белом выглядит
   как светло-серый #8F9092. Отсюда «чётче не стало» после правки цвета.

   Прозрачность лечится только прозрачностью — снимаем её явно. Подпись самой
   строки («Цвет», «Память», «SIM») остаётся приглушённой, как задумано темой:
   так подпись отличается от значений. */
.cvg-variants .cvg-variant-label,
.cvg-variants .cvg-variant-price,
.product-colors a.color .cvg-color-price {
    opacity: 1;
}

/* ⚠ ВТОРАЯ ПОЛОВИНА ТОЙ ЖЕ ГРАБЛИ (нашёл Михаил 07.09.2026 на строке «Вилка»).
   Правило темы `.product-colors span` задаёт ДВЕ вещи:

       .product-colors span { opacity: .5; margin-right: 5px }

   Прозрачность сняли выше ещё 27.08, а правое поле 5 px осталось — и оно
   невидимо сдвигало содержимое плитки. Кнопка центрует содержимое по флексу,
   а флекс считает поле частью коробки: подпись, цена под ней и цена под
   цветом вставали на 2,5 px левее середины (замер на живой странице:
   середина кнопки 77, середина текста 74,5).

   Второе, заметное глазом: у подписи не было выравнивания вовсе. Пока она в
   одну строку, её центрует сам флекс; но «Вилка с переходником» на телефоне
   переносится в две — и тогда строки прижимаются ВЛЕВО по умолчанию
   документа. Короткая строка «Вилка с» уезжала от середины на 26 px, из-за
   чего плитка и выглядела кривой.

   Лечим обе причины разом: центрируем текст и снимаем поле темы там, где
   содержимое обязано стоять по центру. */
.cvg-variants .cvg-variant {
    text-align: center;
}
.cvg-variants .cvg-variant-label,
.cvg-variants .cvg-variant-price,
.product-colors a.color .cvg-color-price,
/* заодно выбранное значение в шапке строки: оно прижато вправо, и поле темы
   не давало ему встать вровень с правым краем блока */
.product-page-inner .cvg-choice .product-colors > span .cvg-sel {
    margin-right: 0;
}

/* Просьба Михаила 27.08.2026: между строками «Цвет», «Память» и «SIM» было
   слишком просторно. Колонка карточки — flex с промежутком 20 px между
   ВСЕМИ блоками; уменьшаем только промежуток между соседними строками
   вариантов (20 → 12 px), а расстояния до текста сверху и до характеристик
   снизу остаются прежними — они Михаила устраивают.
   Внутри строки между подписью и кнопками 6 px, поэтому 12 px снаружи
   по-прежнему читаются как граница между строками. */
.product-page-inner .product-colors + .product-colors {
    margin-top: -8px;
}


/* ============================================================================
   Оформление блока выбора (27.08.2026, вариант А по разбору Михаила)
   ----------------------------------------------------------------------------
   Замер показал три настоящие причины, почему блок выглядел бедно:
     • фото товара в кружке цвета — 30×17 px, то есть цвет по нему не читался
       (пять расцветок выглядели пятью белыми квадратиками);
     • подписи строк 12 px с прозрачностью 50 % — контраст 2,6 : 1 при норме
       4,5, поэтому блок терял структуру;
     • нигде не написано, что именно выбрано.
   Лечим всё три, структуру карточки не трогаем.
   ========================================================================= */

/* --- 1. Кружок цвета: фото вдвое крупнее ---------------------------------
   Белые поля кадра срезаются рамкой с `object-fit: cover` — тот же приём,
   что в плитках каталога (там по 219 фото из 12 категорий обрезанных
   товаров не нашлось: соотношение окна 1,46 против кадра 1,74).
   Ширина 66 px подобрана так, чтобы пять цветов по-прежнему вставали в один
   ряд в колонке 360 px. */
.product-colors.cvg-colors-priced a.color {
    width: 66px;
    padding: 6px 5px 5px;
    overflow: hidden;
    border-width: 1.5px;
    border-radius: 10px;
}
.product-colors.cvg-colors-priced a.color img {
    width: 54px;
    height: 37px;
    /* тема держит миниатюру цвета ограничением max-width: 30px — без его
       снятия ширина не меняется вовсе (проверено замером) */
    max-width: none;
    object-fit: cover;
}
.product-colors > div { gap: 7px; }

/* --- 2. Подпись строки: читаемая, и рядом — что выбрано ------------------
   ⚠ Тема гасит все подписи строки (`.product-colors span { opacity: .5 }`),
   поэтому и заголовок, и значение снимают прозрачность явно. */
.product-page-inner .product-colors > span {
    opacity: 1;
    font-size: 13px;
    font-weight: 600;
    color: #6B6F76;
}
.product-page-inner .product-colors > span .cvg-sel {
    opacity: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1F2124;
}
/* двоеточие рисуем стилями, чтобы в разметке подпись осталась чистой */
.product-page-inner .product-colors > span .cvg-sel::before {
    content: ':';
    margin-right: 5px;
    color: #6B6F76;
    font-weight: 600;
}

/* --- 3. Выбранный вариант заметен ---------------------------------------- */
.cvg-variants .cvg-variant {
    border-width: 1.5px;
    border-radius: 10px;
    padding: 8px 14px;
}
/* Выбранный вариант отмечается ТОЛЬКО красной рамкой: розовую заливку
   Михаил попросил убрать 27.08.2026 — фон остаётся белым. */
.cvg-variants .cvg-variant.active,
.product-colors.cvg-colors-priced a.color.active {
    border-width: 2px;
    background: #fff;
}
.product-colors.cvg-colors-priced a.color.active { padding: 5.5px 4.5px 4.5px; }
.cvg-variants .cvg-variant.active { padding: 7.5px 13.5px; }

/* --- 4. Текст крупнее ----------------------------------------------------- */
.cvg-variants .cvg-variant-label { font-size: 15px; font-weight: 600; }
.cvg-variants .cvg-variant-price { font-size: 13px; color: #4E5257; }
.cvg-color-price { font-size: 13px; color: #4E5257; }


/* ============================================================================
   Вариант Б (27.08.2026, решение Михаила): строки выбора — один блок
   ----------------------------------------------------------------------------
   Общая рамка с подложкой, разделители между строками, подпись капителью с
   выбранным значением справа и кнопки во всю ширину — чтобы справа не
   оставалось пустоты (в строке «Память» её было 194 px из 360).
   Обёртку `.cvg-choice` создаёт cvg-ui.js: в шаблоне карточки её нет.
   ========================================================================= */
.cvg-choice {
    /* без border-box рамка и поля прибавляются к ширине колонки, и страница
       получает горизонтальную прокрутку — проверено замером */
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #EDEFF1;
    border-radius: 12px;
    background: #FCFCFD;
    padding: 14px 14px 2px;
}
.product-page-inner .cvg-choice .product-colors {
    border-bottom: 1px solid #EFF1F3;
    padding-bottom: 12px;
    margin: 0 0 12px;
}
.product-page-inner .cvg-choice .product-colors:last-child {
    border-bottom: 0;
}
/* подпись строки: слева капитель, справа — что выбрано */
.product-page-inner .cvg-choice .product-colors > span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8A8F96;
}
.product-page-inner .cvg-choice .product-colors > span .cvg-sel {
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
}
.product-page-inner .cvg-choice .product-colors > span .cvg-sel::before {
    content: none;
}
/* кнопки памяти, SIM и вилки — во всю ширину блока */
/* кнопки делят ширину поровну и НЕ переносятся: у Pro Max четыре объёма
   упирались в границу блока и последний срывался на второй ряд */
/* align-items: stretch — иначе кнопка с длинной подписью («Вилка с
   переходником» переносится в две строки) выше соседней, и ряд выглядит
   кривым */
.cvg-choice .cvg-variants > div {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: stretch;
}
.cvg-choice .cvg-variants .cvg-variant {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
}
/* Мягкий розовый ореол вокруг выбранного — Михаил попросил вернуть его
   27.08.2026, чтобы посмотреть отдельно от заливки: сам фон кнопки остаётся
   БЕЛЫМ, подсвечивается только контур. */
.cvg-choice .cvg-variants .cvg-variant.active,
.cvg-choice .product-colors.cvg-colors-priced a.color.active {
    box-shadow: 0 0 0 3px rgba(255, 0, 0, .08);
}


/* --- цвета во всю ширину блока (27.08.2026, просьба Михаила) --------------
   Кнопки памяти, SIM и вилки делят ширину поровну, а кружки цвета оставались
   фиксированными — строка выглядела недоделанной. Раскладываем их сеткой:
   колонки одинаковой ширины, сколько поместится, и они заполняют строку
   целиком. При переносе (у Dyson цветов семь) второй ряд идёт колонками той
   же ширины, а не растягивается. */
.cvg-choice .product-colors.cvg-colors-priced > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 6px;
}
/* поля внутри плитки поджаты: ширину ячейки теперь делит сетка, и лишний
   отступ съедал бы размер самого кадра */
.cvg-choice .product-colors.cvg-colors-priced a.color {
    width: auto;
    /* поля по бокам минимальные, чтобы кадр 54 px помещался целиком и в
       узкой ячейке (когда цветов пять и больше) */
    padding: 5px 2px 4px;
}
.cvg-choice .product-colors.cvg-colors-priced a.color.active {
    /* у выбранной рамка толще на 0,5 px — поля уменьшаем на столько же,
       иначе её кадр оказывается уже соседних */
    padding: 4.5px 1.5px 3.5px;
}
/* Кадр остаётся прежнего размера (54×37), а лишняя ширина ячейки уходит в
   белые поля по бокам — просьба Михаила 27.08.2026: строка должна занимать
   всю ширину, но фото при этом не раздуваться. На узких ячейках (когда
   цветов пять и больше) кадр сжимается ровно до доступной ширины. */
.cvg-choice .product-colors.cvg-colors-priced a.color {
    align-items: center;
}
.cvg-choice .product-colors.cvg-colors-priced a.color img {
    width: 54px;
    height: 37px;
    max-width: 100%;
    aspect-ratio: auto;
}