/* add media tag for mobile only */
@media (max-width: 500px) {
  header.show-collection-header {
    &::before {
      background-color: #fff;
      box-shadow: 0px 12px 24px 0px #0000000f;
    }

    .left-arrow-btn {
      display: flex;
      border: unset;
      padding: 0 1rem;
      height: auto;
    }

    .header__logo,
    .menu-drawer-button {
      display: none;
    }

    #search-mobile path,
    .cart-drawer-button path {
      stroke: #000;
    }

    .header__title {
      display: block;
    }

    .header__title-text {
      color: #1c1c15;
      font-weight: 600;
      font-size: 1.4rem;
      text-transform: capitalize;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .header__subtitle-text {
      font-size: 1.2rem;
      color: #7f7f7f;
    }
  }
}