/* ITEM CATEGORY taxonomy-itemCat.php
------------------------------------------------------------*/
#item-cat {
  #page-wrapper {
    border-bottom: 0;
  }
  #results .list-card .card {
    grid-row: span 2;
  }
  .product-labels-wrap,
  .product-labels-empty {
    display: none;
    min-height: initial;
  }
  #cat-recommend {
    padding-block: 3rem 8rem !important;
    @media screen and (max-width: 1023px) {
      padding-block: 2rem !important;
    }
    header > div {
      gap: 6rem;
    }
  }
  #cat-banner {
    margin-block: 4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    li {
      width: 18.5rem;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      &:has(a.is-active) {
        box-shadow: 0 0 0 2px var(--blue);
      }
      a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1rem;
        gap: 1rem;
        font-size: 1.25rem;
        line-height: 1.2;
        border-radius: 10px;
        figure {
          flex-shrink: 0;
          width: 140px;
          aspect-ratio: 4 / 3;
          overflow: hidden;
          margin: 0;
          border-radius: 0 10px 10px 0;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    @media screen and (max-width: 1023px) {
      display: none;
    }
  }
  main,
  aside {
    padding-top: 3rem;
  }
  @media screen and (max-width: 1023px) {
    aside {
      padding-top: 0;
    }
  }
  aside {
    h3 {
      padding-bottom: 1rem;
      font-size: 1.25rem;
      border-bottom: 1px solid var(--lightgray);
    }
    .link-arrow {
      padding: 1rem;
      border-bottom: 1px solid var(--lightgray);
      justify-content: space-between;
      &:after {
        border-color: #000;
      }
      &:hover,
      &.is-active {
        padding-right: 0.5rem;
        background: #fff;
        font-weight: 700;
      }
    }
  }
  #results {
    .current-term {
      font-size: 2rem;
    }
    .list-card {
      grid-template-columns: repeat(3, 1fr);
      @media screen and (max-width: 840px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media screen and (max-width: 640px) {
        grid-template-columns: repeat(1, 1fr);
        .card {
          width: 100% !important;
        }
      }
      margin-top: 3rem;
    }
    &.child-cat .list-card {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .banner-contact {
    background: var(--yellow);
  }
}