.main-content {
  padding: 30px 0;
}

.main-content hr {
  border: 1.5px solid #ddd;
  margin: 30px -30px;
}

/******** LIST PRODUCTS *****/
.product-card-list { --gap: 2rem; display: flex; gap: var(--gap); flex-wrap: wrap; margin-top: 30px }
.product-card-list > * { width: calc(33.33% - var(--gap)) }
.product-alphabetic-group { position: relative }
.letter-alphabetic-icon { display: flex; justify-content: center; align-items: center; height: 50px; width: 65px; background-color: #6a4c72; color: #fff; font-size: 24px; font-weight: 600 }
.letter-alphabetic-icon:hover { transform: scale(1.1) }
.product-alphabetic-group h2 { cursor: pointer }


/********  FILTER AREA ********/
/******/
.filter-area .divider { color: var(--pink-500); transform: skewX(2deg); display: inline-block; font-weight: 500; font-size: 20px; letter-spacing: -2px }
.filter-area { display: flex; justify-content: space-between; margin: 0 }
.filter-area .field-area { margin-right: 30px }
.filter-area h4 { font-size: 20px; margin-bottom: 30px; }
.filter-area label { font-size: 14px; opacity: 0.8 }
.filter-area .category-search a {display: flex; align-items: center; gap: 10px; color: var(--pink-500); line-height: 42px; cursor: pointer; font-weight: 600 }
.filter-area .category-search a .close-icon { display: flex; justify-content: center; align-items: center; background-color: var(--pink-500); font-size: 15px; width: 23px; height: 23px; line-height: 23px; border-radius: 50%; color: #fff; cursor: pointer }
.filter-area .category-search form { display: flex; align-items: end }
.filter-area form .field-area { display: flex; flex-direction: column; justify-content: end; height: 80px; gap: 5px }
.select-container, .input-container { position: relative; display: inline-block; width:300px }
.input-container svg { position: absolute; width: 22px; height: 22px; top: calc(50% - 11px); right: 7px; color: white; pointer-events: none; z-index: 2 }

.input-container input { appearance: none!important; -webkit-appearance: none!important; -moz-appearance: none!important; width: 100%; border: 1px solid #000; padding: 10px; height: 50px }


.select-container select {
    background-color: #6a4c72;
    border: 1px solid #834283;    
    padding: 10px;
    width: 100% !important;
    color: #fff;
    height: 50px;
}

.select-container select option {
    background-color: #fff;
    color: #000;
}
.select-container option::selection { background-color: #6a4c72!important }


.select-container::after, .input-search::after {
    color: #fff;
    content: "\f107";    
    font-family: FontAwesome;    
    font-size: 22px;
    z-index: 1;
    border: solid;
    border-color: transparent transparent #443247;
    border-width: 0 0 49px 12px;
    content: "";
    display: block;
    left: calc(100% - 54px);
    position: absolute;
    right: 0;
    top: 0;
    width: 55px;
    pointer-events: none;
}


.select-container::before  {
    color: #fff;
    content: "\f107";
    display: block;
    font-family: FontAwesome;
    font-size: 18px;
    position: absolute;
    right: 15px;
    top: 8px;
    z-index: 10;
    font-style: normal;
    font-weight:100;
    letter-spacing: .5px;
    line-height: 1.75 !important;
    pointer-events: none;
}



/********  Alphabetic Overlay modal ********/
.alphabet-overlay { position: fixed; top:0; max-width: 1240px; display: flex; align-items: center; height: 100%; z-index: 3 }
.alphabet-overlay .alphabet-list li.notActive { opacity: 0.3; pointer-events: none }
.alphabet-overlay .letter-alphabetic-icon { width: 120px; height: 100px }
.alphabet-overlay .alphabet-list {display: flex; flex-wrap: wrap; gap: 30px; list-style: none;  padding: 0;  margin: 0 }
.alphabet-overlay .alphabet-list li { display: inline-block }
.alphabet-overlay .alphabet-list a { font-size: 26px; }

#bgContentPage { position: fixed; width: 100%; height: 100%; top:0; left: 0; background-color: lightgrey; opacity: 0.9; z-index: 2 }

@media screen and (max-width: 991.98px) {
  .banner { display: none }
  .filter-area .category-search a { display: none }
  .filter-area { flex-direction: column; justify-content: start }
  .filter-area .category-search form { align-items: start; flex-direction: column }
  .filter-area form .field-area { height: auto; margin: 15px 0; width: 100% }
  .filter-area .input-container, .filter-area .select-container { width: 100% }
  
}

@media (max-width: 992px) {
  .main-content .product-card-list > * {
    width: calc(50% - var(--gap));
  }
  .alphabet-overlay .letter-alphabetic-icon { width: 90px; height: 90px }
}

@media (max-width: 670px) {
  .alphabet-overlay .alphabet-list { gap:25px }
  .main-content .product-card-list > * {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
  }
  .alphabet-overlay .letter-alphabetic-icon { width: 60px; height: 60px }
}