<!-- start Simple Custom CSS and JS -->
<style type="text/css">
.ribbon--nove 		  { --ribbon-text: 'NOVÉ'; --ribbon-bg: #FFD700; }
.ribbon--srozumitelne { --ribbon-text: 'SROZUMITELNÉ'; --ribbon-bg: #FFD700; }
.ribbon--ekonomicke   { --ribbon-text: 'EKONOMICKÉ'; --ribbon-bg: #7cda24; }
.ribbon--oficialni    { --ribbon-text: 'OFICIÁLNÍ'; --ribbon-bg: #2EA3F2; }
.ribbon--bezpecne     { --ribbon-text: 'BEZPEČNÉ'; --ribbon-bg: #4B0082; }
.ribbon--rychle       { --ribbon-text: 'RYCHLÉ'; --ribbon-bg: #f25c05; }
.ribbon--rychly       { --ribbon-text: 'RYCHLÝ'; --ribbon-bg: #f25c05; }
.ribbon--moderni      { --ribbon-text: 'MODERNÍ'; --ribbon-bg: #00BFFF; }

[class*="ribbon--"]::before {
  content: var(--ribbon-text);
  background: var(--ribbon-bg);
  position: absolute;
  top: 30px;
  right: -70px;
  width: 240px;
  height: 38px;
  line-height: 38px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
</style>
<!-- end Simple Custom CSS and JS -->
