<style>
  /* Announcement bar – Shoptet kompatibilní */
  .shoptet-announcement-bar{
    /* DESIGN (pozadí) – vánoční červená + zelená */
    background: repeating-linear-gradient(
      to right,
      #C4161C,
      #C4161C 24px,
      #1F7A3A 24px,
      #1F7A3A 48px
    ) !important;
    color: #ffffff;
    width: 100%;
  }

  @media screen and (max-width: 749px){
    .shoptet-announcement-bar{
      background: repeating-linear-gradient(
        to right,
        #C4161C,
        #C4161C 15px,
        #1F7A3A 15px,
        #1F7A3A 30px
      ) !important;
    }
  }
  }

  .shoptet-announcement-bar__inner{
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 12px;
    line-height: 17px;
    padding: 10px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (max-width: 989px){
    /* Mobil: bar musí být NAD top-navigation-bar */
    .shoptet-announcement-bar{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20000; /* nad .top-navigation-bar */
    }

    /* posun stránky o výšku baru, aby nic nebylo schované */
    body{
      padding-top: var(--ann-bar-h);
    }

    /* posun sticky/fixed navigace pod bar (Shoptet to používá často) */
    .top-navigation-bar{
      top: var(--ann-bar-h) !important;
    }
  }
  }


  /* 
    MOBIL: aby bar nebyl schovaný pod .top-navigation-bar (který bývá fixed/sticky a překrývá obsah)
    1) bar dáme nahoře se silným z-index
    2) posuneme .top-navigation-bar o výšku baru (přes CSS proměnnou)
  */
  :root{ --ann-bar-h: 0px; }

  .shoptet-announcement-bar{
    position: sticky;
    top: 0;
    z-index: 10050;
  }

  @media screen and (max-width: 989px){
    .top-navigation-bar{
      top: var(--ann-bar-h) !important;
    }
  }