@import "variables";
@import "mixins";

.archive {
  nav.breadcrumbs .container {
    max-width: var(--fluid-container-width);
  }
  .woocommerce-hero {
    .woocommerce-products-header {
      padding: $space-md 0;
    }
  }
  .sticky-side-menu {
    .products-filter-init {
      background-color: $white;
      font-family: $font-family;
      font-size: 2.4rem;
      font-weight: 100;
      color: $col-sec-d;
      border-top: 0.2px solid $gray200;
      border-bottom: 0.2px solid $gray200;
    }
  }

  .products {
    display: grid;
    grid-template-columns: grid-auto-template();
    grid-template-rows: auto;
    row-gap: 2rem;
    margin-bottom: $space-md * 2;
    @include bp("lg") {
      margin-bottom: $space-md;
    }
    @include bp("sm") {
      margin-bottom: $space-sm;
    }
    &.full-width {
      grid-template-columns: 1fr !important;
      @include bp(xl) {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)) !important;
      }
    }
    > li.product {
      list-style: none;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      justify-content: center;
      margin-bottom: $space-sm;
      .attachment-woocommerce_thumbnail {
        display: block;
        margin: 0 auto;
      }
      h2.woocommerce-loop-product__title {
        margin: $space-xs 0;
        text-align: center;
      }
      .price {
        display: block;
        width: 100%;
        text-align: center;
      }
      .add_to_cart_button {
        margin: $space-xs 0;
        @include button;
      }
    }
    & > .pagination-wrap {
      grid-column: 1 / calc(1 / -1);
      #pagination {
        display: flex;
        justify-content: center;
        a {
          &.next,
          &.prev {
            @include button;
          }
        }
      }
    }
  }

  .products-wrp {
    .row {
      display: flex;
      flex-flow: row nowrap;
      @include bp("md") {
        flex-direction: column;
      }
      #products-sidebar {
        flex-grow: 2;
        min-width: $grid-card-min-width;
        @include bp("md-up") {
          max-width: $grid-card-min-width * 1.5;
        }
      }
      #products-main {
        flex-grow: 8;
      }
    }
    .cats-wrp {
      padding-bottom: $space-md * 2;
      display: grid;
      grid-template-columns: grid-auto-template();
      column-gap: 2rem;
      row-gap: 2rem;
      > .category-item {
        background-color: transparent;
        flex: 1 1 33.3%;
        max-width: 33.3%;
        @include bp("md") {
          flex: 1 1 100%;
          max-width: 100%;
        }
        > a {
          display: flex;
          align-items: center;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          color: $col-text;
          &:hover {
            text-decoration: none;
            color: $col-prm;
          }
          .img-wrp {
            img {
              max-height: 10rem;
              width: auto;
            }
          }
          .name {
            padding: 2rem 3rem;
            /////
            font-family: $font-family;
            font-size: 2.4rem;
            font-weight: 400;
            color: $col-sec-d;
          }
        }
      }
    }
    .order-by-wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: $space-sm;
      align-items: flex-end;
      p {
        margin: 0;
      }
    }
  }
}
