/**
 * Акції та знижки — стилі
 *
 * Блоки:
 * - .wst-sale-badge — бейдж акції в картці каталогу
 * - .wst-price-old / .wst-price-new — закреслена і акційна ціна (колір — лише поза каталогом)
 *
 * Залежності: —
 * Використовується в: templates/gridbox/index.php (каталог app 12 і 16)
 *
 * Історія змін:
 * - 2026-08-31: Акційна ціна — колір бейджа й жирний нарис; бейдж --flush на калькуляторі
 * - 2026-08-30: Бейдж у стилі "new", акційна ціна без кольору
 * - 2026-08-29: Створено
 */

/* Бейдж акції.
   Габарити, відступи й типографіка — один в один з .product-new-badge
   (store-category.css / calculator-category.css), відрізняється лише колір.
   Ширина не фіксована: текст бейджа задається в адмінці й буває довшим за "SALE". */
.wst-sale-badge {
    position: absolute;
    z-index: 9;
    border-radius: 3px;
    background: #E8441F;
    min-width: 60px;
    height: 30px;
    top: 10px;
    left: 10px;
}

/* Сторінка калькулятора: бейдж у самий кут без відступів.
   Мітка --flush ставиться в wst-discount.js карткам без блока ціни:
   ні body, ні класи картки на /calculator і в каталозі не відрізняються. */
.wst-sale-badge--flush {
    top: 0;
    left: 0;
}

.wst-sale-badge span {
    font-family: Neris;
    font-weight: 300;
    font-size: 22px;
    text-transform: lowercase;
    color: #FFFFFF;
    position: absolute;
    left: 10px;
    top: -3px;
    white-space: nowrap;
}

/* Якщо в картці є обидва бейджі — акційний лишається на місці "new",
   а "new" зсувається під нього. Висота 30px + 10px відступу. */
.ba-blog-post-image .wst-sale-badge ~ .product-new-badge {
    top: 50px;
}

/* Ціни. Стара і нова лежать в одному вузлі, який Gridbox уже спозиціонував,
   тому тут лише типографіка. */
.wst-price-old {
    text-decoration: line-through;
    opacity: .45;
    margin-right: .4em;
    font-weight: 400;
}

.wst-price-new {
    white-space: nowrap;
}

/* Акційна ціна кольором бейджа — тільки там, де користувач бачить підсумок
   конфігурації: картка товару (.ba-add-to-cart-price-value), калькулятор
   (.final-price-place) і попап замовлення (.final-price-p2, звідти ж іде друк
   у JPG). У КАТАЛОЗІ ціна лишається без кольору — там поруч уже є бейдж,
   і фарбувати клас глобально не можна. */
.ba-add-to-cart-price-value .wst-price-new,
.final-price-place .wst-price-new,
.final-price-p2 .price-value .wst-price-new {
    color: #E8441F;
    /* 600 — той самий жирний нарис Neris, що в кнопках і заголовках.
       700 у проєкті не використовується — браузер малював би синтетичний. */
    font-weight: 600;
}