.product-category-card_cel {
  --category-border-size: 2px;

  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-category-card_cel__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
  height: 100%;
  padding-block-start: var(--spacer-10);
   @media screen and (width <= 700px) {
            gap: var(--gap-6);
      }

  & .tags {
    display: flex;
    gap: var(--gap-5);
    
  }

  & .category {
    border: var(--category-border-size) solid var(--color-indigo);
    color: var(--color-indigo);
    display: inline-block;
    line-height: 1;
    padding: var(--spacer-4);
    width: fit-content;
  }

  & .sticker {
    background-color: var(--color-grey);
    border: var(--category-border-size) solid var(--color-grey);
    color: var(--color-indigo);
    display: inline-block;
    line-height: 1;
    padding: var(--spacer-4);
    width: fit-content;
  }
  & .sticker.sold-out{
    font-size: 12px;
  }

  & .heading {
    font-weight: var(--font-weight-700);
  }

  & .add-to-cart {
    margin-top: auto;
  }

  & .button_cel {
    background-color: var(--color-white);
    color: var(--color-indigo);
    font-size: var(--font-size-14);
    width: 100%;

    &:hover {
      background-color: var(--color-seafoam);
      color: var(--color-indigo);
    }

    &:disabled {
      background-color: var(--color-grey-light);
      border-color: var(--color-grey-light);
      opacity: 0.8;
      pointer-events: none;
    }
  }
}

/* Featured  Card */
.product-category-card_cel--featured {
  & .button_cel.button--solid {
    border: var(--border-size) solid var(--color-indigo);

    @media screen and (width >= 1280px) {
      border: 0 none;
    }
  }

  @media screen and (width >= 1280px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  & .product-category-card_cel__content {
    @media screen and (width >= 1280px) {
      align-items: center;
      background: linear-gradient(
        180deg,
        #fff 0%,
        var(--product-category-card-featured-bg-color, #fff) 100%
      );
      gap: var(--gap-24);
      height: auto;
      justify-content: center;
    }

    & .category {
      @media screen and (width >= 1280px) {
        background-color: var(--color-indigo);
        color: var(--color-white);
      }
    }

    & .heading {
      @media screen and (width >= 1280px) {
        font-size: var(--font-size-24);
      }
    }

    & .add-to-cart {
      @media screen and (width >= 1280px) {
        margin-top: inherit;
      }
    }

    & .button_cel {
      @media screen and (width >= 1280px) {
        width: auto;
      }

      &.button--outline {
        @media screen and (width >= 1280px) {
          border-color: var(--color-white);
        }
      }

      &:hover {
        @media screen and (width >= 1280px) {
          border-color: var(--color-indigo);
        }
      }
    }
  }

  & .product-category-card_cel__image {
    @media screen and (width >= 1280px) {
      aspect-ratio: 16/12;
      order: 2;
    }

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


.media-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
}

.media-wrapper .media-primary {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.media-wrapper .media-secondary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.media-wrapper:hover .media-primary {
  opacity: 0;
}

.media-wrapper:hover .media-secondary {
          transform: scale(1);
        opacity: 1;
        visibility: visible;
        transition-property: transform, opacity;
        pointer-events: all;
}