/* Hide by default using the ID (Specificity: 1,0,0) */
  #top-banner { 
    display: none; 
  }

  /* Override when JS adds the class (Specificity: 1,1,0) */
  #top-banner.show-top-banner { 
    display: flex; 
  }

  .hk-info-item.hk-rating img.hk-icon{
    width:56px;
    height:auto;
  }

  .hk-info-bar{
    background:#f3f0e5;
    border:1px solid rgba(0,0,0,.06);
    border-left:0;border-right:0;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:6px 12px;
    font:13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:#1f1f1f;
    position:relative;
    overflow:hidden;
    gap:0;
  }

  .hk-info-item{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 0;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    min-width:0;
  }

  .hk-divider{
    width:1px;
    height:18px;
    background:rgba(0,0,0,.15);
    flex:0 0 auto;
  }

  .hk-icon{
    width:16px;
    height:16px;
    object-fit:contain;
    flex:0 0 auto;
  }

  .hk-muted{ opacity:.7; }

  .hk-close{
    flex:0 0 auto;
    margin-left:0;
    margin-right: 17px;
    border:0;
    background:transparent;
    color:#1f1f1f;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    padding:6px 8px;
    border-radius:8px;
    opacity:.8;
  }

  /* MOBILE: show 1 item at a time + slide IN from LEFT / OUT to RIGHT */
  @media (max-width: 720px){
    .hk-info-bar{
      flex-wrap: nowrap;
      justify-content:center;
      width: unset;
      position:relative;
      min-height:36px;
    }

    .hk-close{
      position:absolute;
      top:10px;
      right:22px;
      margin-right:0;
      z-index:30;
    }

    .hk-info-item{
      position:absolute;
      left:0;
      right:40px; 
      top:50%;
      transform: translateX(-100%) translateY(-50%);
      opacity:0;
      pointer-events:none;
      justify-content:center;
      text-align:center;
      transition: transform .45s ease, opacity .30s ease;
      will-change: transform, opacity;
      z-index:1;
      flex: 0 0 auto;
      padding: 0 12px;
    }

    .hk-info-item.is-active{
      transform: translateX(0) translateY(-50%);
      opacity:1;
      pointer-events:auto;
      z-index:2;
    }

    .hk-info-item.is-exit-right{
      transform: translateX(calc(100% - 40px)) translateY(-50%);
      opacity:0;
      z-index:1;
      transition: transform .45s ease, opacity .15s ease;
    }

    .hk-info-item.is-reset{
      transition:none;
      transform: translateX(-100%) translateY(-50%);
      opacity:0;
      pointer-events:none;
      z-index:1;
    }

    .hk-divider{ display:none; }
  }

  .hk-close:hover,
  .hk-close:active,
  .hk-close:focus,
  .hk-close:focus-visible{
    border:none;
    background:transparent;
    color:#1f1f1f;
    opacity:.8;
    box-shadow:none;
    outline:none;
  }
  
  @media (max-width: 720px){
    #top-banner:not(.slider-ready) .hk-info-item:first-child {
      transform: translateX(0) translateY(-50%);
      opacity: 1;
      pointer-events: auto;
    }
  }