﻿.catalog-products-container .products-wrapper {
  display: grid;
  justify-items: flex-start;
  justify-content: flex-start;
  row-gap: 48px;
  column-gap: 36px;
  grid-template-columns: 1fr;
  overflow-x: auto;
}

@media only screen and (min-width:400px) {
  .catalog-products-container .products-wrapper {
    justify-items: center;
    justify-content: center;
  }
}

@media only screen and (min-width:790px) {
  .catalog-products-container .products-wrapper {
    grid-template-columns: 350px 350px;
  }
}


@media only screen and (min-width:1000px) {
  .catalog-products-container .products-wrapper {
    grid-template-columns: 350px;
  }
}

@media only screen and (min-width:1050px) {
  .catalog-products-container .products-wrapper {
    grid-template-columns: 350px 350px;
    justify-content: flex-start;
  }
}

@media only screen and (min-width:1500px) {
  .catalog-products-container .products-wrapper {
    grid-template-columns: 350px 350px 350px;
  }
}

.products-pager {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
  max-width: 100%;
}

  .products-pager .page-selector {
    font-weight: 400;
    text-transform: uppercase;
    color: #000000;
    background: #FFFFFF;
    height: 36px;
    width: 36px;
    border: 1px solid #E6E6E6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-decoration: none;
    transition: 0.2s all ease-in;
    cursor: pointer;
    stroke: #000000;
    stroke-width: 1.25px;
  }

    .products-pager .page-selector.active, .products-pager .page-selector:hover:not(.disabled-page) {
      font-weight: 700;
      color: white;
      border: 1px solid #E90C00;
      background: #E90C00;
      stroke: white;
      stroke-width: 1.5px;
    }

    .products-pager .page-selector.page-first {
      transform: rotate(180deg);
    }

    .products-pager .page-selector.disabled-page {
      color: #E6E6E6;
      stroke: #E6E6E6;
      pointer-events: none;
    }


    .products-pager .page-selector.page-first, .products-pager .page-selector.page-last {
      display: none;
    }


@media only screen and (min-width:600px) {

  .products-pager {
    gap: 18px;
    margin-top: 48px;
  }

    .products-pager .page-selector.page-first, .products-pager .page-selector.page-last {
      display: flex;
    }
}
