/* ═══════════════════════════════════════════════════════════════════════════
   БЕЙДЖИ КАРТОЧКИ ТОВАРА — не наезжают друг на друга НИКОГДА.

   Владелец 2026-08-30: «на некоторых товарах бейджи наезжают друг на друга.
   Тебе надо сделать так, чтобы между бейджами всегда было расстояние. Ну,
   наверное, это надо регулировать размером шрифта. […] Что внизу, что сверху».

   ЗАМЕР ДО (зазор между парой бейджей на одной стороне; минус — наезд):

       ширина   /d9-smashers      /all          /delta-9-gummies
       320 px   верх −17 низ −24  −17 / −24     верх −30 низ −36
       360 px   верх   3 низ  −9    3 /  −9     верх −10 низ −16
       390 px   верх  18 низ   6   18 /   6     верх   5 низ  −1

   ★ ПОЧЕМУ ЭТО ВООБЩЕ СЛУЧИЛОСЬ. В теме заплатка на этот же наезд УЖЕ БЫЛА, но
   прибитая к имени одного товара:

       .updated-product-card[href*="d9-smasher"] .upc__badge--bl{ max-width:44% }
       .updated-product-card[href*="d9-smasher"] … .upc__badge-lg{ font-size:13px }

   Она чинила ровно D9 Smashers и молчала про всех остальных — поэтому владелец
   и увидел наезд «на некоторых товарах». Список товаров в CSS всегда отстаёт
   от каталога: «6,250mg pack» из delta-9-gummies под него не попал.

   ЛЕЧЕНИЕ — правило, а не список. Бейдж не шире половины плитки минус половина
   зазора, значит два бейджа на одной стороне не могут встретиться АРИФМЕТИЧЕСКИ,
   какой бы длины ни был текст.

   ★ Подключается глобально (modules/theme/theme-global.tsx) после зеркала темы:
   карточка одна и та же на коллекциях, главной и в подборках карточки товара.
   Своё живёт в public/dozo — зеркало темы перезаливают целиком.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ★ Класс удвоен НАРОЧНО. Без этого правило перебивалось фиксированной
   шириной промо-бейджа из темы (`.upc__badge--promo { max-width: 78px }`):
   замер на 320 px показал у него maxW 80 px при плитке 154 — то есть больше
   половины, и он въезжал в левый бейдж на 11 px. Ограничение обязано быть
   сильнее любого частного значения, иначе «никогда» превращается в «почти
   всегда». */
.upc__badge.upc__badge {
  /* Половина плитки минус 16 px. ★ Первая формула была `50% - 8px` и дала
     зазор РОВНО НОЛЬ: половину запаса съедали отступы бейджей от края плитки
     (`--upc-inset` с каждой стороны). Наезда уже не было, но и «расстояния»,
     которое просил владелец, тоже. При `50% - 16px` между парой остаётся
     16 px минус два отступа, то есть заметный зазор при любой длине текста.
     ★ !important здесь — не лень, а СМЫСЛ правила. Ширину промо-бейджа тема
     задаёт через идентификатор:
         #product-grid .updated-product-card .upc__badge--promo{ max-width:80px }
     а идентификатор перебивает любую разумную комбинацию классов. Замер после
     удвоения класса: тот же наезд −11 px, потому что 80 > половины плитки в
     154 px. Ограничение «не шире половины» обязано быть сильнее ЛЮБОГО
     частного значения, иначе «никогда не наезжают» превращается в «почти
     никогда» — и мы возвращаемся к заплаткам по имени товара. */
  max-width: calc(50% - 16px) !important;
  box-sizing: border-box;
}

/* Нижний правый умел ТОЛЬКО одну строку (`white-space: nowrap`, поставленный
   2026-07-03 против «огромного» бейджа) — с ограничением ширины он бы обрезал
   «20 cubes». Разрешаем перенос: бейдж растёт вверх, в картинку, а не вбок в
   соседа. Высоту он и так держит min-height 46. */
.upc__badge--br {
  white-space: normal;
}

/* Длинные числа («10,000mg», «6,250mg») переносить некуда — их уменьшаем.
   Это и есть то, что предложил владелец: «наверное, это надо регулировать
   размером шрифта». Но НЕ по имени товара, а по факту длины: длинное значение
   само не помещается, короткое остаётся крупным. */
@media screen and (max-width: 749px) {
  .upc__badge-lg {
    font-size: 16px;
  }
  .upc__badge-sm {
    font-size: 13px;
  }
  .upc__badge--br .upc__badge-sm {
    font-size: 13px;
  }
}