/**
 * WebClick — Стікери товарів.
 *
 * Основну стилізацію вже робить тема mdf: під стікери в ній є готова
 * (порожня) верстка від донора і повний набір правил —
 *   .catalog-right .product-wobler-bottom__item   (сітка товарів)
 *   .product_wobbler .tag                          (сторінка товару, каруселі)
 *
 * Тут тільки те, чого в темі не вистачає. Кольори приходять інлайном
 * з налаштувань стікера, тому їх тут немає.
 */

/* ------------------------------------------------------------------
   Порожні плашки-плейсхолдери від донора.

   У featured.twig у нижньому слоті лежить
   <div class="tag" style="background: transparent;"><span></span></div>.
   Оскільки слот прибитий до bottom: 8px, а .tag має float: left + clear: both,
   цей невидимий блок висотою 24px сидів би під нашими стікерами й підіймав
   їх на 24px. Прибираємо його з потоку.

   (У каруселі related такий самий плейсхолдер стоїть у ВЕРХНЬОМУ слоті —
   там CSS не допоміг би, бо тема ховає весь слот через :has(), який дивиться
   на DOM. Тому там плейсхолдер замінюється патчем ocmod.)
   ------------------------------------------------------------------ */
.product_wobbler .tag:has(> span:empty) {
    display: none;
}

/* ------------------------------------------------------------------
   Верхній слот у сітці товарів. У темі для .product-wobler__item задані
   лише розміри й шрифт — без display і фону, бо донор ставив туди іконки.
   ------------------------------------------------------------------ */
.catalog-right .product-wobler__item.wcs-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 0 8px;
    margin-bottom: 2px;
    border-radius: 0 3px 3px 0;
    letter-spacing: .05em;
}

/*
 * Правила на самі контейнери (.product-wobler / -bottom) тут свідомо немає.
 * По-перше, вони не потрібні: плашки мають width: max-content, тому в
 * блоковому потоці теми й так стають одна під одну зліва.
 * По-друге, addStyle цього файла відбувається в патчі ocmod — тобто ДО того,
 * як common/header додасть stylesheet.css теми. При однаковій специфічності
 * перемагала б тема, і правило все одно було б мертвим.
 * Тому все своє — або з вищою специфічністю (.wcs-item), або на своїх класах.
 */

/* ------------------------------------------------------------------
   Сторінка акцій: у темі лишилась дефолтна bootstrap-верстка, контейнера
   з position: relative немає — ocmod додає свій блок .wcs-fallback.
   ------------------------------------------------------------------ */
.product-thumb .image {
    position: relative;
}

.product_wobbler.wcs-fallback {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.product_wobbler.wcs-fallback .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 39px;
    height: 24px;
    margin-bottom: 2px;
    padding: 0 8px;
    border-radius: 0 3px 3px 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .05em;
}

/* ------------------------------------------------------------------
   Запобіжники
   ------------------------------------------------------------------ */

/* Порожній стікер (стерли текст у всіх мовах) не має лишати білу пляму.
   У темі таке правило є лише для частини випадків. */
.wcs-item:has(span:empty) {
    display: none;
}

/* Стікери не мають перехоплювати клік по картці. */
.product-wobler .wcs-item,
.product-wobler-bottom .wcs-item,
.product_wobbler .wcs-item {
    pointer-events: none;
}