/*
A mixin for the alphabet filter/slider seen on the Tartan Finder page and on the pop-up tartan picker used on the
product page.  These are constructed from two separate datasets across two different plugins, but should look
as unified as possible.

Tartan Finder: Amasty ShopbyBrand
Product Picker: Aitoc OptionsManagement

*/
.am-widget-brandlist .brands-filters .letters {
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid black; }
  @media screen and (min-width: 900px) {
    .am-widget-brandlist .brands-filters .letters {
      border-top: 1px solid black; } }

#tf-letters {
  /* Main styling */
  margin: 0;
  /* Carousel styling */ }
  #tf-letters a.letter {
    float: none;
    margin: 0;
    padding: 0 8.5px;
    background: none;
    border: none;
    border-radius: 0 !important;
    font-size: 22px;
    line-height: 1.45455; }
    #tf-letters a.letter:hover {
      text-decoration: none; }
    #tf-letters a.letter.-letter-all {
      display: none; }
    #tf-letters a.letter.-disabled {
      color: #979797;
      cursor: default;
      pointer-events: none; }
  #tf-letters.owl-carousel:not(.owl-loaded) {
    opacity: 0 !important; }
  @media (min-width: 1024px) {
    #tf-letters.owl-carousel .owl-stage {
      width: 100% !important;
      display: flex;
      justify-content: space-between; } }
  #tf-letters.owl-carousel .owl-nav:not(.disabled) {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    height: 0;
    top: 0; }
    #tf-letters.owl-carousel .owl-nav:not(.disabled) button {
      width: 32px;
      height: 32px;
      padding: 0 !important;
      border-radius: 0;
      color: white;
      background-color: black !important;
      background-image: url("../../images/icons/chevron-right.svg") !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      background-size: auto 16px !important; }
      #tf-letters.owl-carousel .owl-nav:not(.disabled) button.owl-prev {
        transform: rotate(180deg); }
      #tf-letters.owl-carousel .owl-nav:not(.disabled) button span {
        display: none; }
      #tf-letters.owl-carousel .owl-nav:not(.disabled) button.disabled {
        opacity: 0;
        width: 0;
        pointer-events: none; }
      #tf-letters.owl-carousel .owl-nav:not(.disabled) button:hover, #tf-letters.owl-carousel .owl-nav:not(.disabled) button:focus {
        opacity: 1; }

.am-widget-brandlist .brand-images .brands-letter ul.bare-list {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 15px;
       column-gap: 15px; }
  @media screen and (max-width: 320px) {
    .am-widget-brandlist .brand-images .brands-letter ul.bare-list {
      -moz-column-gap: 13px;
           column-gap: 13px; } }
  @media screen and (min-width: 1200px) {
    .am-widget-brandlist .brand-images .brands-letter ul.bare-list {
      -moz-column-gap: 30px;
           column-gap: 30px; } }
  .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item {
    max-width: unset;
    max-height: unset;
    min-width: unset;
    min-height: unset;
    width: 100%;
    height: auto;
    flex-basis: 90px; }
    @media screen and (min-width: 428px) {
      .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item {
        flex-basis: 124px; } }
    @media screen and (min-width: 900px) {
      .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item {
        flex-basis: 130px; } }
    @media screen and (min-width: 1200px) {
      .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item {
        flex-basis: 178px; } }
    .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item .label {
      font-size: 12px;
      line-height: 1.33333;
      letter-spacing: 0.75px;
      margin: 15px 0 0;
      padding: 0;
      text-align: left; }
      .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item .label:before {
        display: none; }
      @media screen and (min-width: 768px) {
        .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item .label {
          font-size: 14px;
          line-height: 1.28571; } }
      @media screen and (min-width: 900px) {
        .am-widget-brandlist .brand-images .brands-letter ul.bare-list .brand-item .label {
          font-size: 16px;
          line-height: 1.25; } }
  .am-widget-brandlist .brand-images .brands-letter ul.bare-list .item .am-image-wrapper {
    width: 100%;
    height: auto;
    max-width: unset; }
    .am-widget-brandlist .brand-images .brands-letter ul.bare-list .item .am-image-wrapper img.ambrands-image {
      max-width: unset;
      max-height: unset;
      width: 100%; }
    .am-widget-brandlist .brand-images .brands-letter ul.bare-list .item .am-image-wrapper p.no-img {
      width: 100%;
      padding-top: 100%;
      position: relative;
      border-radius: 50%;
      background: #f0f0f0; }
      .am-widget-brandlist .brand-images .brands-letter ul.bare-list .item .am-image-wrapper p.no-img span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 50px; }

.cms-tartan-finder .breadcrumbs {
  visibility: hidden;
  display: none; }

.cms-tartan-finder .page-main .page-title-wrapper {
  text-align: center; }
  @media screen and (min-width: 768px) {
    .cms-tartan-finder .page-main .page-title-wrapper h1.page-title {
      font-size: 32px;
      margin: 36px auto 0; } }

.cms-tartan-finder .column.main > p {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.6px; }
  @media screen and (min-width: 768px) {
    .cms-tartan-finder .column.main > p {
      width: 60%;
      margin: 50px auto;
      text-align: center;
      font-size: 18px;
      line-height: 1.44444; } }

.am-widget-brandlist .brands-filters .ambrands-search-wrapper {
  float: none;
  width: auto;
  max-width: 470px;
  margin: auto;
  border-bottom: 1px solid #979797; }
  @media screen and (min-width: 900px) {
    .am-widget-brandlist .brands-filters .ambrands-search-wrapper {
      margin-bottom: 44px; } }
  @media screen and (min-width: 1200px) {
    .am-widget-brandlist .brands-filters .ambrands-search-wrapper {
      margin-bottom: 66px; } }
  .am-widget-brandlist .brands-filters .ambrands-search-wrapper .ambrands-clear {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjIzIDQuMjNhLjc4My43ODMgMCAwMTEuMTA2IDBMMTAgOC44OTJsNC42NjQtNC42NjRhLjc4My43ODMgMCAwMTEuMTA3IDEuMTA3TDExLjEwNyAxMGw0LjY2NCA0LjY2NGEuNzgzLjc4MyAwIDAxLTEuMTA3IDEuMTA3TDEwIDExLjEwNyA1LjMzNiAxNS43N2EuNzgzLjc4MyAwIDAxLTEuMTA3LTEuMTA3TDguODkzIDEwIDQuMjMgNS4zMzZhLjc4My43ODMgMCAwMTAtMS4xMDd6IiBmaWxsPSIjMzMzIi8+PC9zdmc+) center no-repeat !important;
    background-color: white !important; }
  .am-widget-brandlist .brands-filters .ambrands-search-wrapper .ambrands-search-block:before {
    left: auto;
    right: 15px;
    filter: brightness(0); }
  .am-widget-brandlist .brands-filters .ambrands-search-wrapper input {
    border: none !important;
    margin: 0; }
    .am-widget-brandlist .brands-filters .ambrands-search-wrapper input::-moz-placeholder {
      color: #808080;
      font-size: 16px;
      line-height: 1.375;
      letter-spacing: 1px; }
    .am-widget-brandlist .brands-filters .ambrands-search-wrapper input:-ms-input-placeholder {
      color: #808080;
      font-size: 16px;
      line-height: 1.375;
      letter-spacing: 1px; }
    .am-widget-brandlist .brands-filters .ambrands-search-wrapper input::placeholder {
      color: #808080;
      font-size: 16px;
      line-height: 1.375;
      letter-spacing: 1px; }
      @media screen and (min-width: 768px) {
        .am-widget-brandlist .brands-filters .ambrands-search-wrapper input::-moz-placeholder {
          font-size: 19px;
          line-height: 1.31579; }
        .am-widget-brandlist .brands-filters .ambrands-search-wrapper input:-ms-input-placeholder {
          font-size: 19px;
          line-height: 1.31579; }
        .am-widget-brandlist .brands-filters .ambrands-search-wrapper input::placeholder {
          font-size: 19px;
          line-height: 1.31579; } }
      @media screen and (min-width: 900px) {
        .am-widget-brandlist .brands-filters .ambrands-search-wrapper input::-moz-placeholder {
          font-size: 21px;
          line-height: 1.2381; }
        .am-widget-brandlist .brands-filters .ambrands-search-wrapper input:-ms-input-placeholder {
          font-size: 21px;
          line-height: 1.2381; }
        .am-widget-brandlist .brands-filters .ambrands-search-wrapper input::placeholder {
          font-size: 21px;
          line-height: 1.2381; } }

.am-widget-brandlist .brand-images {
  flex-direction: column; }
  .am-widget-brandlist .brand-images .brands-letter {
    margin-bottom: 40px;
    width: 100%; }
    .am-widget-brandlist .brand-images .brands-letter > dd {
      margin: 0; }
    .am-widget-brandlist .brand-images .brands-letter .letter {
      border: none;
      font-size: 20px;
      line-height: 27px;
      margin-bottom: 20px; }
      .am-widget-brandlist .brand-images .brands-letter .letter .title {
        background: transparent; }
    .am-widget-brandlist .brand-images .brands-letter .brand-item {
      margin: 0 0 20px; }