.commerce-wishlist-container {
  margin: var(--sizing-xl) 0 0;

  @media (width >= 1024px) {
    margin: var(--spacing-big) 0 0;
  }

  .commerce-wishlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-small);

    @media (width > 768px) {
      margin-bottom: var(--spacing-medium);
    }

    .commerce-wishlist-page-title {
      font-size: var(--fs-medium);
      font-weight: var(--fw-700);
      line-height: var(--lh-20);
      color: var(--ui-text-icon-high);

      @media (width > 768px) {
        color: var(--neutrals-headings);
        font-size: var(--fs-xlarge);
        line-height: var(--lh-xxlarge);
      }
    }

    .commerce-wishlist-add {
      padding: 0 var(--sizing-s);
      height: 40px;

      @media (width >= 1024px) {
        padding: 0 var(--sizing-m);
        gap: var(--spacing-xsmall);
      }

      &:focus,
      &:hover:not(:disabled, .disabled) {
        background-color: transparent;
        color: var(--primary-variations-primary);
      }

      &::before {
        content: '';
        background: url('/genuine-parts/icons/accordion-expand.svg') no-repeat center center;
        width: 20px;
        height: 20px;

        @media (width >= 1024px) {
          width: 24px;
          height: 24px;
        }
      }
    }
  }

  .commerce-wishlist-all-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-small);
    margin-bottom: var(--sizing-xl);

    @media (width > 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (width > 1024px) {
      margin-bottom: var(--spacing-big);
      gap: var(--spacing-medium);
      grid-template-columns: repeat(4, 1fr);
    }

    .commerce-wishlist-item {
      display: flex;
      flex-direction: row;
      padding: var(--spacing-small);
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      background-color: var(--bg-grey-light);
      cursor: pointer;

      &:hover {
        text-decoration: none;
      }

      .commerce-wishlist-details {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .commerce-wishlist-item-name {
          font-size: var(--fs-small);
          font-weight: var(--fw-500);
          line-height: var(--lh-20);
          margin-bottom: var(--sizing-2xs);

          @media (width > 768px) {
            font-weight: var(--fw-600);
          }
        }

        .commerce-wishlist-item-count {
          color: var(--ui-text-icon-medium);
          font-size: var(--fs-xsmall);
          font-weight: var(--fw-400);
          line-height: var(--line-height-body-low);
        }
      }

      .commerce-wishlist-actions {
        display: flex;
        flex-direction: row;
        position: relative;

        & > button {
          background-color: transparent;
          width: var(--sizing-xl);
          height: var(--sizing-xl);
          padding: 0;

          &.disabled {
            cursor: not-allowed;
          }
        }

        .more-options-popup {
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: var(--spacing-xxxsmall);
          background-color: var(--color-neutral-50);
          box-shadow: 1px 1px 6px 0 rgba(0 0 0/ 8%);
          z-index: 2;
          min-width: 170px;
          display: flex;
          flex-direction: column;

          button {
            background-color: transparent;
            display: block;
            font-size: var(--fs-small);
            font-weight: var(--fw-400);
            line-height: normal;
            padding: var(--spacing-12);
          }
        }
      }
    }
  }

  .shimmer {
    .shimmer-card {
      width: 100%;

      shimmer-title {
        height: 24px;
      }
    }
  }
}