cg-products {
    display: grid;
    gap: 5px;
    width: 100%;
    max-height: 80vh;
    overflow: scroll;
}

cg-products.medium-up_col-1 {
    grid-template-columns: repeat(1, 1fr);
}

cg-products.medium-up_col-2 {
    grid-template-columns: repeat(2, 1fr);
}

cg-products.medium-up_col-3 {
    grid-template-columns: repeat(3, 1fr);
}

cg-products.medium-up_col-4 {
    grid-template-columns: repeat(4, 1fr);
}

cg-products.medium-up_col-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media screen and (max-width: 768px) {
    cg-products.small_col-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    cg-products.small_col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    cg-products.small_col-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    cg-products.small_col-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    cg-products.small_col-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

cg-product {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
}

cg-product img {
    width: 100%;
    object-fit: cover;
}

cg-product cg-atc {
    padding: 10px;
    text-align: center;
    background-color: black;
    color: white;
    cursor: pointer;
    z-index: 1000;
}

cg-product .image-wrapper {
    flex: 1 1 100%;
    display: flex; 
    flex-direction: column;
    justify-content: center;
}

cg-product.active cg-atc,
.add-gift-button.gift-in-cart {
    background-color: grey;
}

cg-product .product-title {
    text-align: center;
    margin-bottom: 10px;
}

cg-product cg-atc .add,
.add-gift-button .add {
    display: block;
}

cg-product cg-atc .added,
.add-gift-button .added {
    display: none;

}

cg-product.active cg-atc .add,
.add-gift-button.gift-in-cart .add {
    display: none;
}

cg-product.active cg-atc .added,
.gift-in-cart.gift-in-cart .added {
    display: block;

}

clever-gift {
    position: fixed;
    display: none;
    z-index: 10000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

clever-gift.active,
clever-gift.loading {
    display: flex;
}

clever-gift .gift-wrapper {
    display: none;
    width: fit-content;
    position: relative;
    max-width: 80%;
    background-color: #fff;
    margin: 0 20px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

clever-gift.active .gift-wrapper {
    display: flex;
}

@media screen and (max-width: 768px) {
    clever-gift .gift-wrapper {
        max-width: 90%;
        margin: 0 10px;
        padding: 10px;
    }
}

clever-gift .gift-wrapper .header {
    display: block;
    text-align: center;
}

clever-gift .close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    clever-gift .close-button {
        top: 10px;
        right: 10px;
    }
}

clever-gift .close-button svg {
    stroke: black;
}

.open-button,
.add-gift-button {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    display: none;
}

.open-button.active,
.add-gift-button.active {
    display: flex;
}

cg-progress-bar.loading .loader,
mso-progress-bar.loading .loader,
clever-gift.loading .loader {
    display: block;;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #333;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation:
        spin 2s linear infinite;
}

cg-progress-bar.loading .loader,
mso-progress-bar.loading .loader {
    position: absolute;
    left: calc(50% - 25px);
    top: 0; 
    transform: translate(-50%, 0);
    bottom: 0;
    margin: auto;
    height: 50px;
    width: 50px;
}

@keyframes spin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform:
            rotate(360deg);
    }
}
cg-progress-bar:not(.loading) .loader,
clever-gift:not(.loading) .loader,
mso-progress-bar:not(.loading) .loader {
    display: none;
}
cg-progress-bar.loading .gamification-wrapper,
mso-progress-bar.loading .gamification-wrapper  {
    visibility: hidden;
}
cg-progress-bar.active .gamification-wrapper,
mso-progress-bar.active .gamification-wrapper  {
    visibility: visible;
}

/* progress bar */
mso-progress-bar, 
cg-progress-bar {
    display: none;
}
mso-progress-bar.loading, 
cg-progress-bar.loading,
mso-progress-bar.active, 
cg-progress-bar.active {
    display: block;
    position: relative;
}

cg-progress-bar .gamification-wrapper,
mso-progress-bar .gamification-wrapper {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
}

cg-progress-bar .gamification-grid,
mso-progress-bar .gamification-grid {
    display: grid;
    gap: 20px;
    align-items: center;
    grid-template-columns: auto 20px;
}

cg-progress-bar .gamification,
mso-progress-bar .gamification  {
    margin-bottom: 10px;
    margin-top: 30px;
    height: 4px;
    position: relative;
    width: 100%;
    background-color: #f2f2f2;
}

cg-progress-bar .gamification-inner,
mso-progress-bar .gamification-inner {
    height: 100%;
    background-color: #000;
    width: 0%;
    display: block;
}

cg-progress-bar .gamification-wrapper>.gamification-icon>svg,
mso-progress-bar .gamification-wrapper>.gamification-icon>svg {
    width: 100%;
}

cg-progess-bar .hidden, 
mso-progess-bar .hidden{
    display: none;
}

cg-progress-bar [gamification-stage-marker],
mso-progress-bar [gamification-stage-marker]  {
    display: none;
}

cg-progress-bar .gift-icon-container,
mso-progress-bar .discount-icon-container  {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

cg-progress-bar .gift-icon-container .gift-icon,
mso-progress-bar .discount-icon-container .discount-icon {
    width: 15px;
}

cg-progress-bar .gamification-stage-marker,
mso-progress-bar .gamification-stage-marker {
    top: -25px;
}

cg-progress-bar .gamification-stage-marker:after,
mso-progress-bar .gamification-stage-marker:after {
    content: '';
    position: absolute;
    top: 19px;
    left: 50%;
    width: 1px;
    height: 10px;
    background-color: #000;
}

cg-progress-bar [gamification-stage-marker],
mso-progress-bar [gamification-stage-marker]  {
    display: none;
}
/* end progress bar */