:root {
    --welli-blue: #0012be;
    --welli-green: #008000;
}
.navbar-brand { color: var(--welli-blue); }
.product-card { height: 100%; }
.product-image {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
}
.price { font-size: 1.35rem; font-weight: 700; color: var(--welli-green); }

.product-main-image {
    width: 100%;
    height: 520px;
    object-fit: contain;
    cursor: zoom-in;
}

.product-thumbnails {
    margin-top: 10px;
}

.product-thumbnail {
    width: 90px;
    height: 90px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-thumbnail:hover {
    border-color: #0012be !important;
}

.product-thumbnail.active {
    border: 2px solid #0012be !important;
}

#product-modal-image {
    max-height: 80vh;
    object-fit: contain;
}

@media (max-width: 767.98px) {

    .product-main-image {
        height: 350px;
    }

    .product-thumbnail {
        width: 70px;
        height: 70px;
    }
}

/* --------------------------------------------------
   Produktgruppen Startseite
   -------------------------------------------------- */

.category-card {
    transition:
            transform .2s ease,
            box-shadow .2s ease;
    overflow: hidden;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12) !important;
}

.category-image-wrapper {
    height: 280px;
    overflow: hidden;
    background: #fff;
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
}

.category-image-placeholder {
    height: 280px;
}


/* --------------------------------------------------
   Produktkarten Startseite
   -------------------------------------------------- */

.product-card {
    transition:
            transform .2s ease,
            box-shadow .2s ease;
}

.product-card:hover {
    transform: translateY(-3px);
}

.product-card-image-wrapper {
    height: 280px;
    overflow: hidden;
    background: #fff;
}

.product-card-image-wrapper .product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
}


/* --------------------------------------------------
   Mobile
   -------------------------------------------------- */

@media (max-width: 767.98px) {

    .category-image-wrapper,
    .category-image-placeholder,
    .product-card-image-wrapper {
        height: 240px;
    }
}