/**
 * HECmania — katalogová dekorace ceny (catalog-badge.js).
 *
 * Vzhled podle okfish.sk (screenshot 2026-09-07):
 *
 *     1,27 €  [-15%]     ← cena + malá pilulka VEDLE ní
 *     1,50 €             ← přeškrtnuté POD tím, šedé, menší
 *
 * Skript NIC neschovává ani nepřepisuje — cena od Shoptetu zůstává, jen
 * k ní přibude pilulka a pod ni původní cena.
 *
 * Barvy: oranžová #fd7e14 s černým tučným textem (Lucky 2026-09-07),
 * tatáž jako v hlavičce a ve widgetu — jeden vizuální systém.
 */

/**
 * Vlastní cenový blok — nahrazuje skrytou Shoptet cenu. Struktura podle
 * okfish `vip_catalog.js` (produkce): cena a badge na jednom řádku,
 * přeškrtnutá původní cena pod nimi.
 */
/**
 * `!important` je nutné: Shoptet šablona má pravidlo na potomky `.prices`,
 * které blok skrylo (`display:none`) — diagnostika 2026-09-07 to ukázala
 * jako "boxViditelny: none/visible". Bez toho se vloží správný obsah,
 * ale zůstane neviditelný.
 */
.hec-catalog-price-box {
  display: block !important;
  visibility: visible !important;
  margin: 0;
}

.hec-catalog-price-row {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Cena — velikostí a vahou odpovídá původní Shoptet ceně, kterou nahrazuje. */
.hec-catalog-price-final {
  display: inline !important;
  color: #16171a;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Přeškrtnutá původní cena — POD cenou, potlačená, aby s ní nesoupeřila. */
.hec-catalog-price-original {
  display: block;
  margin: 2px 0 0;
  /* Pevné px podle okfish `vip_prices.css` (produkce) — `em` se na kartách
     s jinou velikostí písma rozjíždí. */
  font-size: 14px;
  font-weight: 500;
  color: #8b8f94;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  line-height: 1.2;
  white-space: nowrap;
}

/**
 * MALÁ pilulka vedle ceny. `inline-flex` v blokovém kontejneru by se
 * roztáhl přes celou šířku karty, proto `width: auto` a `max-width:
 * max-content`. Shoptet šablona některým potomkům nastavuje
 * `display: block; width: 100%`, odtud `!important`.
 */
.hec-catalog-savings-badge {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content;
  flex: 0 0 auto;
  margin-left: 0;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fd7e14 !important;
  color: #000 !important;
  font-size: 12px;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
  /* Číslice stejné šířky — pilulka neposkakuje mezi -5% a -20%. */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .hec-catalog-price-original {
    font-size: 13px;
  }
  .hec-catalog-savings-badge {
    padding: 2px 7px;
  }
  .hec-catalog-price-final {
    font-size: 1.2em;
  }
}

/* Tmavý režim — oranžová s černým textem drží kontrast, mění se jen šedá. */
@media (prefers-color-scheme: dark) {
  .hec-catalog-price-original {
    color: #9aa0a6;
  }
}