/* Serikov Coffee 2026 — шкалы вкуса и подпись веса у цены.
   Правки по замечаниям заказчика от 11.09.2026:
     • шкал стало четыре вместо трёх (Крепость, Кислинка, Сладость, Тело) —
       15.09.2026 «Тело» снято со всего проекта, шкал снова три (§1);
     • у цены появилась приписка «за 200 г», чтобы пересчёт при смене
       фасовки был виден.
   Разметку рисуют newdesign/product-card.php и шаблон страницы товара,
   значения — newdesign/taste-scales.php.

   КУДА ПОДКЛЮЧАТЬ: в header.php ПОСЛЕ site.css (там лежат исходные правила
   .scales4, .pflip и .pprice) и ДО мобильного слоя — мобильные файлы должны
   оставаться последними. Соседнее место: сразу после card-actions.css.
   Если файл подключить раньше site.css, ничего не сломается: четыре шкалы
   просто встанут с прежним промежутком и карточка подрастёт сильнее.

   Переменные --cp (пиксель макета карточки), --mp (пиксель макета страницы
   товара) и цвета приходят из site-hf.css и site.css. */

/* ==========================================================================
   1. ШКАЛЫ В КАРТОЧКЕ КАТАЛОГА — СНОВА ТРИ

   Здесь стояли два правила под четвёртую шкалу «Тело»: промежуток между
   строками ужимали с 9 до 6, а коробку «шкалы / оценка CVA» растили с 88
   до 96 единиц (4 × 19,5 + 3 × 6). 15.09.2026 заказчик снял «Тело» со всего
   проекта, строк снова не больше трёх — и работают исходные размеры макета
   из site.css: .scales4{gap:9 · --cp} и .pcard .pflip.has-flip{min-height:
   88 · --cp}. Три строки занимают 3 × 19,5 + 2 × 9 = 76,5, оборот с оценкой
   и букетом — 45 + 6 + 36,4 ≈ 87,4, в 88 входят оба. Карточка стала ниже
   на 8 · --cp, одинаково у всех карточек ряда.
   Правила удалены, а не оставлены «на всякий случай»: с ними карточка
   держала бы пустую полосу под несуществующую строку.
   ========================================================================== */

/* ==========================================================================
   2. ПОЛОВИНКА ДЕЛЕНИЯ НА СТРАНИЦЕ ТОВАРА

   Каталог рисует «среднюю» как 3,5 деления из шести, и теперь так же
   считает страница товара — счёт у них общий. Но правило половинки в
   site.css (.pdp-scales i.half) слабее того, что задаёт вид кружкам в
   макете Frame 467 (.pdp-scales .bars i — вес выше), и половинка выходила
   пустым кружком. Повторяем правило с тем же весом.

   Направление заливки — слева направо, как в карточке каталога.
   ========================================================================== */
.pdp-scales .bars i.half{
  background:linear-gradient(90deg,var(--green-deep-2) 0 50%,transparent 50% 100%);
  border-color:var(--green-deep-2)}

/* ==========================================================================
   3. «ЗА 200 Г» РЯДОМ С ЦЕНОЙ

   Заказчик: «непонятно, что цена меняется, когда меняешь вес». Приписка
   стоит вплотную к числу и меняется вместе с ним — переключение фасовки
   перестаёт быть беззвучным. Новых фигур не рисуем: это строка текста
   внутри существующего блока цены. Текст подставляет pack-choice.js.
   ========================================================================== */

/* ---- карточка каталога: цена и приписка в одну строку ----
   Второй строкой приписка не помещается: под ценой уже стоит прежняя цена
   со скидкой, а справа — круглые кнопки высотой 52, и колонка цены выше
   них растянула бы всю карточку. В строку места хватает: цена «12 600 ₸»
   занимает около 100 единиц, приписка — около 45, а до кнопок 161. */
.pcard .pprice-line{display:flex;align-items:baseline;flex-wrap:wrap;
  gap:calc(6 * var(--cp)) calc(7 * var(--cp))}
.pcard .pprice-per{font-family:var(--font-ui);font-weight:400;
  /* Нижний порог кегля: --cp падает вместе с шириной экрана, и на живых
     320-х приписка ушла бы ниже 11 px. Порог ставим здесь, а не режем
     пропорцию целиком — на широком экране max() вернёт те же 12 · --cp.
     Тот же приём, что у мелкого текста в mobile/products.css. */
  font-size:max(11px, calc(12 * var(--cp)));
  line-height:1.2;color:var(--ink-soft);white-space:nowrap}

/* ---- страница товара: приписка под большой ценой ----
   Здесь она именно под ценой: колонка цены узкая (рядом стоит плашка
   скидки), а по высоте место есть — .buy-top держит 100 единиц (site.css).
   Цвет — белый вполсилы: карточка покупки тёмно-зелёная.
   Кегль был 14 · --mp (не меньше 12px), с 15.09.2026 — 16 · --mp, не меньше
   14px: заказчик просил сделать крупнее всё мелкое на странице товара
   (таблица «было / стало» — у .pdp-sub в site.css). С тремя строками у
   килограмма столбик перестал входить в прежние 96 единиц шапки — поэтому
   шапка там же поднята до 100, иначе при выборе «1 кг» она бы вырастала. */
.pdp .buy-per{font-family:var(--font-ui);font-weight:400;
  font-size:max(14px, calc(16 * var(--mp)));line-height:1.2;
  /* Не .78, а .85: буквы мелкие, а фон тёмно-зелёный — при .78 контраст
     падает до предела нормы. */
  color:rgba(255,255,255,.85);margin-top:calc(3 * var(--mp));white-space:nowrap}

/* ---- телефон ----
   Правила ниже — дословный мобильный запрос шаблона (портрет и альбом).
   В карточке на телефоне цена крупнее относительно ширины, и приписка в
   строку с ней иногда не встаёт — разрешаем перенос на свою строку без
   лишнего отступа. Прятать её нельзя: на телефоне фасовки переключают
   пальцем чаще, чем мышью. */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){
  .pcard .pprice-line{row-gap:2px}
  .pcard .pprice-per{white-space:normal}
}