/* Filtro de audifonos */

.et_pb_row:has(.filtro-de-audifonos) {
  width: 100% !important;
  max-width: calc(20rem + 22rem * 3 + 2rem * 2) !important; /* 20rem sidebar + 22rem per centro + 2rem of padding on both sides */
  padding-inline: 2rem !important; /* Mayor especificidad que páginas de archivos */

  & .et_pb_column:has(.filtro-de-audifonos) {
    width: 20rem !important;
    margin-right: 3rem !important;

    & + .et_pb_column {
      width: calc(100% - 20rem - 3rem) !important;
    }
  }

  & .filtro-de-audifonos {
    background-color: #ffffff;
    border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
    overflow: hidden;
    border-width: 0.1rem;
    border-color: #dfdfdf;
    box-shadow: 0px 4px 35px 10px rgba(0, 0, 0, 0.12);
    margin-top: 0 !important;

    & h3 {
      padding: 0.88rem 1.5rem;
      color: #4a5056 !important;
      font-size: clamp(1rem, 0.868rem + 0.5634vw, 1.375rem) !important;
      font-family: 'Poppins' !important;
      font-weight: 700;
      border-bottom: 1px solid #dfdfdf;
      margin-top: 0 !important;
    }

    & p {
      margin-top: 0 !important;
    }

    & .mas-marcas {
      height: 3.75rem !important; /* espacio inexplicable es agregado si oculto los labels */

      & span {
        padding: 0.88rem 1.5rem;
        font-size: 15px;
        color: #1e59bc;
        border-bottom: 1px solid #dfdfdf;
        display: inline-block;
        width: 100%;
        text-decoration: underline;
        cursor: pointer;
      }

      & label {
        display: none;
      }

      &.visible {
        height: unset !important;
        position: relative;

        & label {
          display: inline-block;
        }

        & span:before {
          content: 'Menos';
          position: absolute;
          background: #fff;
          text-decoration: underline;
        }
      }
    }

    & label {
      padding: 0.88rem 1.5rem;
      font-size: 15px;
      color: #4a5056 !important;
      font-weight: 500;
      display: inline-block;
      width: 100%;
      margin-bottom: 0 !important;
      margin-top: 0 !important;
      border-bottom: 1px solid #dfdfdf;
      cursor: pointer;
    }
  }
}

@media (width < 980px) {
  .et_pb_row:has(.filtro-de-audifonos) {
    max-width: 20rem !important;
    padding: 0 !important;
    margin-top: 0 !important;

    & .et_pb_column:has(.filtro-de-audifonos) {
      padding-bottom: 1rem;
      border-bottom: 1px solid hsl(0, 0%, 75%);
      float: unset !important;

      & + .et_pb_column {
        width: 100% !important;

        & ul.products {
          margin-top: 1rem !important;
        }
      }
    }

    & .filtro-de-audifonos {
      background-color: unset;
      width: 100vw;
      margin-top: 0 !important;
      margin-left: calc((100% - 100vw) / 2); /* Compensate for the centered row */
      margin-right: calc((100% - 100vw) / 2); /* Compensate for the centered row */
      box-shadow: none;

      & label {
        display: none !important;

        &.visible {
          display: inline-block !important;
        }
      }

      & p:has(label) {
        display: none !important;

        &:has(.visible) {
          display: block !important;
        }
      }

      & div.mas-marcas {
        display: none !important;
      }

      & h3 {
        position: relative;

        &:after {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
          position: absolute;
          right: 1.5rem;
        }
      }

      &:has(ul.visible) h3:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E");
      }
    }
  }
}

/* Estilos para pantallas especificas  */

@media (1100px < width < 1425px) {
  .et_pb_row:has(.filtro-de-audifonos) {
    max-width: calc(20rem + 22rem * 2 + 2rem * 2) !important; /* 20rem sidebar + 22rem per centro + 2rem of padding on both sides */
  }
}

@media (980px < width < 1101px) {
  .et_pb_row:has(.filtro-de-audifonos) {
    max-width: calc(20rem + 22rem * 1 + 2rem * 2) !important; /* 20rem sidebar + 22rem per centro + 2rem of padding on both sides */
  }
}

/* Mostrar y ocultar filtro de audifonos en moviles  */

.barra-de-filtro {
  display: none !important;
}