.modal {
   display: none;
}

.d-none {
   display: none;
}

.aside-bar {
   background-color: #fff;
   border-radius: 7px;
}

.main-content-products {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-top: 15px;
   width: 95%;
   /* border: 1px green solid; */
   min-height: 100vh;
}

.filter-refine {
   border-radius: 7px;
}

.sort-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 90%;
   justify-items: center;
   /* border: 1px blue solid; */
   padding-left: 5px;
   min-height: 100vh;
}

.products-filter {
   display: flex;
   flex-direction: row;
   /* justify-content: center; */
   /* width: 100%; */
   padding: 10px;
   min-height: 100vh;
   border-radius: 7px;
   gap: 10px;
   flex-wrap: wrap;
   /* border: 1px green solid; */
   background: #fff;
}

.refine-search-header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   border-radius: 7px;
   background: var(--white);
   margin-bottom: 5px;
   padding: 10px 15px !important;
   width: 100%;
}

.products-found {
   display: flex;
   flex-direction: row;
   align-items: center;
   font-size: 14px;
   /* border: 1px red solid; */
}

.products-found span {
   margin-left: 10px;
   font-weight: bold;
}

.user-filter .chip-wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 5px 0 8px 0;
}

.chip-menu {
   display: flex;
   flex-direction: row;
   border: 1px red solid;
   background: #fcfcfc;
   border: 1px solid #e4e7ea;
   padding: 6px 10px;
   border-radius: 5px;
}

.user-filter .chip {
   display: flex;
   gap: 3px;
   margin-right: 15px;
   font-size: 14px;
   flex-direction: column;
}

.chip-k {
   color: #556;
   /* opacity: 0.9; */
   font-weight: bold !important;
}
.user-filter .chip-v {
   color: #223;
}
.chip-x {
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
   color: red;
   font-weight: bold;
}
.user-filter .chips-clear {
   /* margin-left: 8px; */
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 6px 12px;
   cursor: pointer;
   margin-bottom: 10px;
   font-size: 13px;
   font-weight: bold;
}

/* layout base */
.sort-by {
   position: relative;
   display: inline-flex;
   align-items: center;
   /* gap: 0.5rem; */
   width: 270px;
}

.filter-by {
   display: none;
}

/* desktop: UI normal */
.sort-label {
   display: inline-block;
   width: 80%;
   font-size: 14px;
   color: var(--primary-gray);
}
.sort-trigger {
   display: none;
}

.filter-trigger {
   display: none;
}

.sort-by select {
   margin-left: 5px;
   font-size: 14px;
   padding: 5px 10px 5px 5px;
   border: 1px solid #e3e3e3;
   border-radius: 5px;
   color: var(--primary-gray);
   width: 100%;
}

/* Paginação */

.pager {
   display: flex;
   justify-content: center;
   margin-top: 20px;
   background-color: #fff;
   height: 35px;
}

.pager a {
   font-size: 14px;
   border: 1px solid #e3e3e3;
}

.pager a:not(:first-child):not(:last-child) {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 35px;
}

.pager a:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 15px;
   border-radius: 5px 0 0 5px;
}

.pager a:last-child {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 15px;
   border-radius: 0 5px 5px 0;
}

.pagination .page-ellipsis {
   padding: 0 0.5rem;
   opacity: 0.7;
   border: 1px solid #e3e3e3;
   padding: 8px 12px;
   font-weight: 700;
}

.pagination .page-link.active {
   font-weight: 700;
   background-color: var(--secondary-blue);
   color: #fff;
}

/* MOBILE: troca a apresentação */
@media (max-width: 768px) {
   .sort-by {
      width: 130px !important;
      position: relative;
      justify-content: right;
   }

   /* esconde o label de texto no mobile (fica só o “Ordenar”) */
   .sort-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      clip-path: inset(50%);
      border: 0;
      padding: 0;
      margin: -1px;
   }

   /* botão visual “ícone + Ordenar + valor atual” */

   .filter-by {
      display: block;
   }

   .sort-trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: #fff;
      font-size: 14px;
      line-height: 1;
   }

   .filter-trigger {
      display: inline-flex;
      gap: 0.5rem;
      font-size: 14px;
      margin-right: 5px;
      line-height: 1;
      padding: 0.5rem 0.75rem;
   }

   .sort-trigger .value {
      display: none;
      opacity: 0.7;
      /* margin-left: 0.25rem; */
   }

   /* .sort-by select {
      position: absolute;
   } */

   /* truque: o select fica por cima, invisível, capturando o toque */
   #sort-by {
      position: absolute;
      inset: 0; /* cobre toda a área do container */
      width: 100%;
      height: 100%;
      opacity: 0; /* invisível */
      appearance: none;
      -webkit-appearance: none;
      z-index: 2; /* acima do botão visual */
      /* font-size: 14px !important; */
   }

   #sort-by {
      font-size: 13px !important;
      line-height: 1;
   }

   #sort-by option {
      font-size: inherit; /* garante herança do select */
      padding: 0 10px !important;
      width: 100% !important;
      /* background-color: #556 !important;
      color: #fff !important; */
   }
}

@media screen and (max-width: 576px) {
   .pagination {
      padding: 10px;
   }

   .refine-search-header {
      border-radius: 5px;
      padding: 10px 8px !important;
      width: 100%;
      /* border: 1px blue solid; */
   }

   /* .sort-by {
      display: inline-flex;
      border: 1px blue solid;
   } */

   .container {
      padding: 0 10px;
      /* border: 1px blue solid; */
   }

   .main-content-products {
      width: 100%;
      /* border: 1px green solid; */
      min-height: 100vh;
   }
   .sort-container {
      width: 100%;
      /* border: 1px blue solid; */
      padding: 0;
   }
}