/* main collection */

collection-banner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding-top: var(--gap);
  padding-bottom: var(--gap-l);

  .collection-banner__title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-xs);
    background-color: var(--smoke);
    border-bottom: solid .125rem var(--gold);
    color: var(--carbon);

    .h3 {
      text-transform: uppercase;
      border: var(--border);
      padding: var(--gap-xxs) var(--gap-xs);
      background-color: var(--gold);
      color: var(--espresso);
    }
  }
}

collection-products {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: var(--gap);

  .collection-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    .collection-grid__sort {
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
      gap: var(--gap-s);

      & > span {
        align-self: center;
        flex-shrink: 0;
      }
      
      details {
        position: relative;
        display: flex;
        align-items: stretch;
        min-width: min(16rem, 100%);
        border: var(--border);
        transition: var(--transition-all);

        &:hover,
        &:focus {
          border-color: var(--espresso);
          background-color: var(--gold);
        }
        
        form {
          position: absolute;
          width: 100%;
          left: 0;
          top: 100%;
          z-index: 1;
          border: var(--border);
          
          input {
            display: none;
          }
        }
        
        summary,
        summary > div,
        label {
          width: 100%;
          display: flex;
          align-items: center;
          gap: var(--gap-s);
        }
  
        summary {
          padding: var(--gap-xs);
          padding-right: var(--gap-s);
          justify-content: space-between;
        }
      }
  
      .arrow {
        width: 1rem;
        transform: rotate(90deg);
        transition: var(--transition-transform);
      }
  
      details[open] {
        border: var(--border);
  
        summary::before {
          content: '';
          position: fixed;
          width: 100vw;
          height: 100vw;
          left: 0;
          top: 0;
          cursor: auto;
        }
  
        .arrow {
          transform: rotate(-90deg);
        }
      }
      
      label {
        padding: var(--gap-xs) var(--gap-s);
        background-color: var(--white);
        transition: var(--transition-all);
  
        &:hover,
        &:focus {
          background-color: var(--gold);
          color: var(--carbon);
        }
      }
  
      svg:not(.arrow) {
        width: 1.75rem;
        height: 1.75rem;
      }
    }

    .collection-grid__products {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
      align-items: stretch;
    }
  }
}

@media only screen and (max-width: 989px) {
  collection-products {
    grid-template-columns: 1fr;

    .collection-sidebar {
      display: none;
    }

    .collection-grid {
      .collection-grid__sort {
        justify-content: center;
      }

      .collection-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }
}

/* collection sidebar */

collection-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--gap));
  height: calc(100vh - var(--header-height) - var(--gap) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow-y: auto;

  a {
    transition: var(--transition-color);

    &:hover,
    &.active {
      color: var(--jungle)!important;
    }
  }
  
  div {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xxs);
  }

  .sidebar__first {
    & > a {
      display: flex;
      align-items: baseline;
      gap: var(--gap-xs);
      padding-bottom: var(--gap-xs);

      &::after {
        content: '';
        display: block;
        flex-grow: 1;
        height: .0625rem;
        background-color: var(--slate);
      }
    }
  }

  .sidebar__second {
    & > a {
      color: var(--carbon);
    }
  }

  .sidebar__third {
    border-left: var(--border);
    padding-left: var(--gap-s);
    margin-bottom: var(--gap-xs);
  }
}