.product-card__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DIFFERENT COLOURED BUTTONS */
/* =========================
   Green variant
   ========================= */
.button--green,
button.button--green,
input[type=button].button--green,
input[type=submit].button--green {
    border-color: #28a745;     /* green stroke            */
    color:        #28a745;     /* green text              */
}
.button--green::before,
button.button--green::before,
input[type=button].button--green::before,
input[type=submit].button--green::before {
    background:   #28a745;     /* green slide-in fill     */
}
/* hover / focus  */
.button--green:hover,
.button--green:focus,
button.button--green:hover,
button.button--green:focus,
input[type=button].button--green:hover,
input[type=button].button--green:focus,
input[type=submit].button--green:hover,
input[type=submit].button--green:focus {
    color: #ffffff;
}

/* =========================
   Grey variant
   ========================= */
.button--grey,
button.button--grey,
input[type=button].button--grey,
input[type=submit].button--grey {
    border-color: #6c757d;     /* grey stroke             */
    color:        #6c757d;     /* grey text               */
}
.button--grey::before,
button.button--grey::before,
input[type=button].button--grey::before,
input[type=submit].button--grey::before {
    background:   #6c757d;     /* grey slide-in fill      */
}
.button--grey:hover,
.button--grey:focus,
button.button--grey:hover,
button.button--grey:focus,
input[type=button].button--grey:hover,
input[type=button].button--grey:focus,
input[type=submit].button--grey:hover,
input[type=submit].button--grey:focus {
    color: #ffffff;
}

/* =========================
   Black variant
   ========================= */
.button--black,
button.button--black,
input[type=button].button--black,
input[type=submit].button--black {
    border-color: #000000;     /* black stroke            */
    color:        #000000;     /* black text              */
}
.button--black::before,
button.button--black::before,
input[type=button].button--black::before,
input[type=submit].button--black::before {
    background:   #000000;     /* black slide-in fill     */
}
.button--black:hover,
.button--black:focus,
button.button--black:hover,
button.button--black:focus,
input[type=button].button--black:hover,
input[type=button].button--black:focus,
input[type=submit].button--black:hover,
input[type=submit].button--black:focus {
    color: #ffffff;
}

/* ============================
   Green variant reverse color
   ========================== */
.button--green-reverse,
button.button--green-reverse,
input[type=button].button--green-reverse,
input[type=submit].button--green-reverse {
    border-color: #28a745;     /* green stroke            */
    color:        #ffffff;     /* white text              */
    background:   #28a745;
}
.button--green-reverse::before,
button.button--green-reverse::before,
input[type=button].button--green-reverse::before,
input[type=submit].button--green-reverse::before {
    background: rgba(255, 255, 255, 0.15);     /* green slide-in fill     */
}
.button--green-reverse:hover,
.button--green-reverse:focus,
button.button--green-reverse:hover,
button.button--green-reverse:focus,
input[type=button].button--green-reverse:hover,
input[type=button].button--green-reverse:focus,
input[type=submit].button--green-reverse:hover,
input[type=submit].button--green-reverse:focus {
    color: #ffffff;
}
/* ============================
   Grey variant reverse color
   ========================== */
.button--grey-reverse,
button.button--grey-reverse,
input[type=button].button--grey-reverse,
input[type=submit].button--grey-reverse {
    border-color: #6c757d;     /* grey stroke             */
    color:        #ffffff;     /* white text              */
    background:   #6c757d;
}
.button--grey-reverse::before,
button.button--grey-reverse::before,
input[type=button].button--grey-reverse::before,
input[type=submit].button--grey-reverse::before {
    background: rgba(255, 255, 255, 0.15);
}
.button--grey-reverse:hover,
.button--grey-reverse:focus,
button.button--grey-reverse:hover,
button.button--grey-reverse:focus,
input[type=button].button--grey-reverse:hover,
input[type=button].button--grey-reverse:focus,
input[type=submit].button--grey-reverse:hover,
input[type=submit].button--grey-reverse:focus {
    color: #ffffff;
}
/* ============================
   Black variant reverse color
   ========================== */
.button--black-reverse,
button.button--black-reverse,
input[type=button].button--black-reverse,
input[type=submit].button--black-reverse {
    border-color: #000000;     /* black stroke            */
    color:        #ffffff;     /* white text              */
    background:   #000000;     /* black background        */
}
.button--black-reverse::before,
button.button--black-reverse::before,
input[type=button].button--black-reverse::before,
input[type=submit].button--black-reverse::before {
    background: rgba(255, 255, 255, 0.15);
}
.button--black-reverse:hover,
.button--black-reverse:focus,
button.button--black-reverse:hover,
button.button--black-reverse:focus,
input[type=button].button--black-reverse:hover,
input[type=button].button--black-reverse:focus,
input[type=submit].button--black-reverse:hover,
input[type=submit].button--black-reverse:focus {
    color: #ffffff;
}

.icon-list__tag
{
    position: absolute;
    top: -18px;
    right: 0;
    width: fit-content;
    white-space: nowrap;
}