/**
 * HECmania — [HEC]KLUB tier v hlavičce (hlavicka-klub-badge.js).
 *
 * Oranžové pole s černým tučným textem (Lucky 2026-09-07). Oranžová #fd7e14
 * je tatáž jako `--hec-orange` ve widget.css, takže hlavička, katalog i
 * detail produktu drží jeden vizuální systém.
 *
 * Hlavička hecmanie je černá — oranžová na ní drží kontrast a černý text
 * na oranžové splňuje WCAG AA (kontrastní poměr ~8:1).
 */
.hec-klub-badge {
  display: inline-flex;
  align-items: center;
  /* Badge patří POD "MŮJ ÚČET" (Lucky 2026-09-07). Hlavička je flex řádek,
     takže `flex-basis: 100%` ho zalomí na vlastní řádek pod odkaz účtu.
     `margin-left: auto` ho zarovná doprava pod účet, ne k levému okraji. */
  /* Vedle ikony účtu, na stejném řádku (okfish vzor). */
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
  /* Tvar tlačítka "Do košíku" (pill, plně zaoblené), jen menší —
     Lucky 2026-09-07. Poloměr přes 999px drží pill i při změně výšky. */
  padding: 6px 16px;
  border-radius: 999px;
  background: #fd7e14;
  color: #000;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
  /* Číslice stejné šířky — badge neposkakuje mezi 5 % a 20 %. */
  font-variant-numeric: tabular-nums;
}



/**
 * Pod 768px se badge V HORNÍ LIŠTĚ skrývá (okfish `goldfish-discount-badge.js`
 * to dělá stejně — na mobilu je tam moc velký a lišta je těsná). Zůstává
 * v burger menu, kam ho skript vkládá zvlášť.
 */
@media (max-width: 767px) {
  .hec-klub-badge--ikona {
    display: none !important;
  }
  .hec-klub-badge--menu {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .hec-klub-badge {
    padding: 4px 10px;
    font-size: 10px;
  }
}