.card-wrapper {
  color: inherit;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.card {
  text-align: var(--card-text-alignment);
  text-decoration: none;
}

.card:not(.ratio) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card--card {
  height: 100%;
}

.card--card,
.card--standard .card__inner {
  border-radius: var(--card-corner-radius);
  border: var(--card-border-width) solid rgba(var(--color-foreground), var(--card-border-opacity));
  position: relative;
  box-sizing: border-box;
}

.card--card:after,
.card--standard .card__inner:after {
  content: '';
  position: absolute;
  width: calc(var(--card-border-width) * 2 + 100%);
  height: calc(var(--card-border-width) * 2 + 100%);
  top: calc(var(--card-border-width) * -1);
  left: calc(var(--card-border-width) * -1);
  z-index: -1;
  border-radius: var(--card-corner-radius);
  box-shadow: var(--card-shadow-horizontal-offset) var(--card-shadow-vertical-offset) var(--card-shadow-blur-radius) rgba(var(--color-shadow), var(--card-shadow-opacity));
}

.card .card__inner .card__media {
  overflow: hidden;
  /* Fix for Safari border bug on hover */
  z-index: 0;
  border-radius: calc(var(--card-corner-radius) - var(--card-border-width) - var(--card-image-padding));
}

.card--card .card__inner .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card--standard.card--text {
  background-color: transparent;
}

.card-information {
  text-align: var(--card-text-alignment);
}

.card__media,
.card .media {
  bottom: 0;
  position: absolute;
  top: 0;
}

.card .media {
  width: 100%;
}

.card__media {
  margin: var(--card-image-padding);
  width: calc(100% - 2 * var(--card-image-padding));
}

.card--standard .card__media {
  margin: var(--card-image-padding);
}

.card__inner {
  width: 100%;
}

.card--media .card__inner .card__content {
  padding: calc(var(--card-image-padding) + 1rem);
  position: relative;
}

.card__content {
  display: grid;
  grid-template-rows: minmax(0,1fr) max-content minmax(0,1fr);
  padding: 1rem;
  width: 100%;
  flex-grow: 1;
}

.card__content--auto-margins {
  grid-template-rows: minmax(0,auto) max-content minmax(0,auto);
}

.card__information {
  grid-row-start: 2;
  padding: 1.3rem 1rem;
}

.card:not(.ratio) > .card__content {
  grid-template-rows: max-content minmax(0,1fr) max-content auto;
}

@media screen and (min-width: 750px) {
  .card__information {
    padding-bottom: 1.7rem;
    padding-top: 1.7rem;
  }
}

.card__badge {
  align-self: flex-end;
  grid-row-start: 3;
  justify-self: flex-start;
}

.card__badge.top {
  align-self: flex-start;
  grid-row-start: 1;
}

.card__badge.right {
  justify-self: flex-end;
}

.card > .card__content > .card__badge {
  margin: 1.3rem;
}

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

.card__inner:not(.ratio) > .card__content {
  height: 100%;
}

.card__heading {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--rel-orange-100);
}

.card__heading:last-child {
  margin-bottom: 0;
}

.card--card.card--media > .card__content {
  margin-top: calc(0rem - var(--card-image-padding));
}

.card--standard.card--text a::after,
.card--card .card__heading a::after {
  bottom: calc(var(--card-border-width) * -1);
  left: calc(var(--card-border-width) * -1);
  right: calc(var(--card-border-width) * -1);
  top: calc(var(--card-border-width) * -1);
}

.card__heading a::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.card__heading a:after {
  outline-offset: 0.3rem;
}

.card__heading a:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}

.card__heading a:focus {
  box-shadow: none;
  outline: 0;
}

@media screen and (min-width: 990px) {
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--duration-long) ease;
  }

  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.03);
  }

  .card-wrapper:hover
    .media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
  }

  .underline-links-hover:hover a {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
}

.card--standard.card--media .card__inner .card__information,
.card--standard.card--text > .card__content .card__heading,
.card--standard > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
  display: none;
}

.card--standard > .card__content {
  padding: 0;
}

.card--standard > .card__content .card__information {
  padding-left: 0;
  padding-right: 0;
}

.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media > .card__content .card__badge {
  display: none;
}

.card--extend-height {
  height: 100%;
}

.card--extend-height.card--standard.card--text,
.card--extend-height.card--media {
  display: flex;
  flex-direction: column;
}

.card--extend-height.card--standard.card--text .card__inner,
.card--extend-height.card--media .card__inner {
  flex-grow: 1;
}

.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
  transition: transform var(--duration-short) ease;
  overflow: hidden;
}

.card-information > * + * {
  margin-top: 0.5rem;
}

.card-information {
  width: 100%;
}

.card-information > * {
  line-height: calc(1 + 0.4 / var(--font-body-scale));
  color: rgb(var(--color-foreground));
}

.card-information > .price {
  color: rgb(var(--color-foreground));
}

.card-information > .rating {
  margin-top: 0.4rem;
}

.card-information
  > *:not(.visually-hidden:first-child)
  + *:not(.rating) {
  margin-top: 0.7rem;
}

.card-information .caption {
  letter-spacing: 0.07rem;
}

.card-article-info {
  margin-top: 1rem;
}

/* Kernix overrides */
.card-wrapper {
  .card {
    border: none; background: transparent;

    /* image on hover */
    .hover-picture { opacity: 0; pointer-events: none; overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: .3s opacity ease;
      >img {
        object-fit: cover; object-position: center center;
        display: block; max-width: 100%; position: absolute; top: 0; left: 0; height: 100%; width: 100%;
        transition: transform var(--duration-long) ease;
      }
      .hover-picture-link { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; display: block!important; }
    }
    &:hover {
      .hover-picture { opacity: 1; pointer-events: auto; z-index: 2;
        >img { transform: scale(1.03); }
      }
      /*.card__media { opacity: 0; }*/
      >.card__content .card__information { opacity: 0!important; }
      >.card__content .quick-add { display: block!important; }
    }

    /* image */
    .card__inner {
      .card__media { border-radius: none;
        img { transform: none!important;}
      }

      /* useless content to remove, just save .card__badge */
      .card__content {
        .card__heading {
            color: var(--rel-body-color);
            font-family: "Playfair Display"; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;
            > a, > a:hover { color: var(--rel-body-color); }
        }
        .card__badge { z-index: 3; }
      }
    }
    /* content */
    >.card__content {
      display: flex; flex-direction: column; justify-content: center;

      .card__information {
        padding: 19px 0; text-align: center;

        .card__heading {
          color: var(--rel-body-color);
          font-family: "Playfair Display"; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;

          > a, > a:hover { color: var(--rel-body-color); }
        }
        .card-information {
          margin-top: 4px;
          * { font-size: 14px; font-style: normal; font-weight: 400!important; line-height: normal; }
        }
      }
      .quick-add {
        position: absolute; bottom: 16px; left: 20px; right: 20px; margin: 0; z-index: 3;

        .quick-add__submit {
          .loading-overlay__spinner { display: none; }
        }
      }
      .card__badge { display: none; }
    }
  }
}

/* article card for search page */

.grid__item {
    /* card-wrapper */
    .card-wrapper {
        position: relative;

        .card.article-card {
            position: static; height: auto;

            &:hover>.card__content .card__information { opacity: 1!important; }

            /* image wrapper */
            .card__inner {
                position: relative; padding-bottom: 63%;
                @media (max-width: 767px){ padding-bottom: 55%; }

                &::before, &::after { display: none;}

                .article-card__image-wrapper.card__media { position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: 0;
                    .article-card__image { position: absolute; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden;
                        > img { position: absolute; left: 0; top: 0; bottom: 0; right: 0; object-fit: cover; height: 100%; width: 100%; }
                    }
                }

                /* Tags */
                .tags-wrapper {
                     position: absolute; left: 16px; top: 16px;
                    .article-tag { display: inline-block; padding:4px 8px; color: white; font-size: 12px; font-style: normal; font-weight: 500; line-height: 14px; letter-spacing: 0.36px; text-transform: uppercase; margin-right: 10px; background-color: var(--rel-orange-80); }
                }

                /* in case of useless duplicate content */
                .card__content { display: none; }
            }
            /* Article card content */
            .card__content {
                background: var(--rel-orange-10); padding: 32px 0; width: 100%; text-align: left;
                @media (max-width: 767px){ margin-left: 0; padding: 20px 0; transform: none; }


                .card__information {
                    text-align: left; padding: 0; display: block; opacity: 1!important;
                    /* title */
                    .card__heading {
                        display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
                        .full-unstyled-link {
                            font-family: "Playfair Display"; color: var(--rel-green); font-size: 24px; font-style: normal; font-weight: 400; line-height: normal; text-decoration: none; letter-spacing: 0;
                            @media (max-width:767px){ font-size: 20px; }
                            /* overlay to make all the block clickable */
                            &::after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }

                            &:hover { text-decoration: none; }
                        }
                    }
                    /* date */
                    .article-card__info {
                        .circle-divider {
                            > time { display: inline-block; margin-bottom: 4px; color: var(--rel-orange-80); font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 500; line-height: 25px; /* 178.571% */ letter-spacing: 0.84px; text-transform: uppercase; }
                        }
                    }
                    /* excerpt */
                    .article-card__excerpt { display: none; }

                    /* footer (comments)*/
                    .article-card__footer { display: none; }

                    /* actions (see article) */
                    .actions {
                        text-align: left; margin-top: 20px;

                        .btn-link { color: var(--rel-green); font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.42px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
                    }
                }
            }
        }
    }
}

/* Kernix product card v2 */
.card-product-wrapper-v2 {
  position: relative; 

  .card-product-image:hover  {
    .hover-picture { opacity: 1;
      + img { opacity: 0; }
    }
  }
  
  .card-product-image { position: relative; padding-bottom: 100%; overflow: hidden; margin-bottom: 16px; background: var(--rel-bg-light);
    img { position: absolute; max-width: 100%; max-height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); }

    .hover-picture { opacity: 0; }
    .hover-picture-link { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; display: block!important;}
  }
  .card-wrapper-inner {
    .card-product-title {
      font-family: "Playfair Display"; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; color: var(--rel-orange-100);
      margin-bottom: 4px;
      display: block; display: -webkit-box; max-width: 100%; height: 48px; max-height: 48px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
      @media (max-width: 767px){ font-size: 15px; height: 40px; }
      
      a { text-align: left; text-decoration: none; font-family: "Playfair Display"; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; color: var(--rel-orange-100); 
         @media (max-width: 767px){ font-size: 15px; }
      }
    }
    .card-product-price {
      min-height: 32px; padding-top: 4px; padding-right: 30px;
      span.from-price { display: inline-block; font-family: Montserrat; font-size: 12px; font-style: normal; font-weight: 500; line-height: 21px; color: var(--rel-orange-100); }
      div { display: inline-block; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 500; line-height: 25px;
        @media (max-width: 767px){ font-size: 14px; letter-spacing: 0.42px; line-height: 21px; }
      }
    }
    .card-product-actions-btn {
      .sr-only { position: absolute; opacity: 0; font-size: 0; height: 1px; width: 1px; overflow: hidden; visibility: hidden; }
      /* simple add product btn */
      .card-action-product-add, .quick-add__submit { 
        position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; padding: 5px 6px; color: var(--rel-green); line-height: 20px; border: none; background-color: transparent; width: auto!important; visibility: visible;
        border-radius: 0; margin: 0 !important;
        
        svg { width: 20px; height: 20px; }
        svg path { fill: var(--rel-green); }
        &:hover, &:focus-visible { background: var(--rel-green); color: white; 
          svg path { fill: white; }
        }
      }

      /* quick add */
      .quick-add { display: block !important; }
      
    }
  }
}