.subcategories {
  width: 100%;

  .subcategory-tabs {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow: hidden;

    .subcategory-tab {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      place-content: start;
      gap: 2rem;
      grid-row: 1;
      grid-column: 1;
      translate: 100% 0;
      opacity: 0;
      height: 0;
      transition: translate 0.5s, opacity 0.5s;

      &.active {
        translate: 0 0;
        opacity: 1;
        height: 100%;
      }

      .subcategory-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        gap: 1.5rem 0;
        place-items: center;
        /* border-radius: 1rem; */

        padding: 0.5rem 0.5rem 1.5rem;

        background: transparent url(autoptimize_single_696e90a5400924b1a63244da6cfa4109.css.pagespeed.ce.mW-Dx7IK9o.css) left bottom no-repeat;
        background-size: auto;
        background-size: contain;
        transition: background .5s;

        &:hover {
          background: #ed1c24 url(/images/xprodukt-gr.png.pagespeed.ic.2mWqDk_QwU.png) left bottom no-repeat;

          .price {
            color: #fff;
          }

          .img {
            scale: 1.15;
          }

          .buy {
            border-color: #000;
          }
        }

        .img {
          width: 100%;
          aspect-ratio: 1;
          /* background: #111; */
          /* border-radius: 1rem; */
          padding: 1rem;
          overflow: hidden;
          cursor: pointer;
          transition: scale .5s;

          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
          }
        }

        .name {
          position: relative;
          font: bold 20px/24px Roboto;
          text-transform: uppercase;
          text-align: center;
          text-wrap: balance;
          user-select: all;
          cursor: pointer;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: transparent;
            transition: background .2s;
          }

          &:hover {
            color: currentColor;

            &::before {
              background: #fff;
            }
          }
        }

        .price {
          font-size: 24px;
          font-weight: 600;
          color: #ed1c24;
          transition: color .5s;

          span:nth-child(1) {
            color: white;
            font-weight: 500;
          }

          span:nth-child(2) {
            user-select: all;
          }
        }

        .buy {
          padding: 12px 24px 12px 48px;
          background: url(/wp-content/themes/candyweb/images/icon-cart.svg) no-repeat 8px center rgba(0, 0, 0, 0) !important;
          text-transform: uppercase;
          color: #fff;
          border: 2px solid #fff;
          height: 44px;
          border-radius: 3px;
          font-weight: 700;
          line-height: 1;
          transition: border-color .5s, scale .2s;

          &:hover {
            scale: 1.05;
          }
        }
      }
    }
  }
}