/* ============================================================
   GRID
============================================================ */

#shop-all-grid {
     padding-top: var(--g36);
     overflow: visible;
     position: relative;
     padding-bottom: var(--cv);

     .shop-all-grid {
          gap: var(--g20);
          display: grid;
          z-index: 1;
          margin-top: var(--g36);
          grid-template-columns: repeat(3, 1fr);

          .product.card {
               width: 100% !important;
               max-width: 100% !important;
               min-width: 100%;
          }
     }

     .sticky-wrap {
          top: 0;
          background-color: #FAFAFA;
          z-index: 2;

          .content {
               padding: var(--g14) 0;
               border-bottom: 1px solid hsl(0, 0%, 0%, .05);

               .ammount {
                    font-size: 12px;
                    font-weight: 400;
                    color: var(--subheading);
               }
          }

          .filter-display {
               font-size: 12px;
               color: var(--subtext);
               font-weight: 400;
               padding: 6px 10px;
               background-color: white;
               border: 1px solid hsl(0, 0%, 0%, .06);
               border-radius: 1px;

               svg {
                    fill: currentColor;
                    height: 8px;
                    transform: rotate(45deg);
               }

               &:hover {
                    color: var(--subheading);
                    box-shadow: 1px solid hsl(0, 0%, 0%, .09);
               }
          }
     }
}

/* ============================================================
   FILTER
============================================================ */

.filter-wrap {
     background-color: white;
     width: 390px;
     position: fixed;
     left: 0;
     top: 0;
     height: 100svh;
     gap: var(--g36);
     padding: var(--g40) var(--g32);
     z-index: 106;
     display: grid;
     grid-template-rows: min-content 1fr min-content;
     transform: translateX(-105%);
     visibility: hidden;
     transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s;

     &.active {
          transform: translateX(0);
          visibility: visible;
          transition-delay: 0s;
     }

     .top {
          .heading {
               font-size: 15px;
               font-weight: 470;
               color: var(--heading);
          }

          .icon {
               height: 23px;
               aspect-ratio: 1;
               border-radius: 50px;
               background-color: #F2F2F2;
               color: var(--heading);
               transform: rotate(45deg);
               svg {
                    height: 11px;
               }

               &:hover {
                    filter: brightness(90%);
               }
          }
     }

     .button {
          width: 100%;
          
     }

     .main-wrap {
          max-height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
     }

     .filters-wrap {
          * {
               transition: inherit;
          }
          padding: var(--g18) 0;
          border-top: 1px solid hsl(0, 0%, 0%, .05);
          .spacer {
               height: calc(var(--g20) - var(--g12));
          }
          .filt-cat {
               font-size: 12px;
               font-weight: 400;
               color: var(--subheading);
          }
          
          .svg {
               color: var(--subheading);
               width: 8px;
               rotate: 45deg;
          }

          .wrap {
               overflow: hidden;
               max-height: 1000px;
               opacity: 1;
               transition: max-height .32s ease, opacity .22s ease;
          }

          .fil {
               font-size: 11.5px;
               font-weight: 400;
               margin: 1px 0;
               color: var(--subtext);

               .checkbox {
                    opacity: .6;
                    height: 14px;
                    justify-content: center;
                    aspect-ratio: 1;
                    border-radius: 2px;
                    box-shadow: inset 0 0 0 .8px currentColor;

                    svg {
                         fill: currentColor;
                         width: 7px;
                         transition: inherit;
                         opacity: 0;
                    }
               }

               &:hover, &.active {
                    color: var(--heading);
               }

               &.active {
                    .checkbox {
                         svg {
                              opacity: 1;
                         }
                    }
               }
          }
     }

     .filters-wrap.close {
          .svg {
               rotate: 0deg;
          }
          .wrap {
               max-height: 0 !important;
               opacity: 0;
          }
     }
}

body.filters-open {
     overflow: hidden;
}


.g32 {
     gap: var(--g32);
}

@media (max-width: 1580px) {
     /* ============================================================
     GRID
     ============================================================ */

     #shop-all-grid {
          .shop-all-grid {
               grid-template-columns: repeat(2, 1fr);
          }

          .sticky-wrap {
          .content {
               .ammount {
                    font-size: 11px;
               }
          }

          .filter-display {
               font-size: 11px;
               padding: 6px 10px;

               svg {
                    height: 7px;
               }
          }
     }

     

}

@media (max-width: 1200px) {

}

@media (max-width: 1080px) {
     /* ============================================================
     GRID
     ============================================================ */

     #shop-all-grid {
          .shop-all-grid {
               grid-template-columns: repeat(2, 1fr);
          }
     }

     

}

@media (max-width: 770px) {
     /* ============================================================
     GRID
     ============================================================ */

     #shop-all-grid {
          .shop-all-grid {
               gap: var(--g28);
               grid-template-columns: repeat(1, 1fr);
          }

          .sticky-wrap {
          .content {
               .ammount {
                    font-size: 10.5px;
               }
          }

          .filter-display {
               font-size: 10.5px;
               display: none;

                    height: 7px;
               }
          }
     }
     }
}

@media (max-width: 540px) {
     .filter-wrap {
          width: 80svw;
     }
   
}