:root {
    --card-border: #dadada;
    --text: #000000;
    --sale: #e94b4b;
}

/* General */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--text) !important;
    font-weight: 600;
}

.btn {
    border-radius: 50px !important;
}

input {
    border-radius: 50px !important;
}

textarea {
    border-radius: 16px !important;
}

.flag {
    border-radius: 6px;
}

.homepage-group-title {
    margin-top: 48px !important;
}

#products-1,
#products-2 {
    margin-bottom: 48px;
}

#productsTop>.product>.p {
    width: 100%;
    height: 100%;
}

.benefits::before,
.benefits::after,
.recipesSection::before,
.recipesSection::after,
.referencesSection::before,
.referencesSection::after {
    content: none
}

/* Navigation */
@media only screen and (min-width: 768px) {
    #navigation {
        height: 54px;
    }
}

[data-testid="headerMenuItem"],
[data-testid="brandsText"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.navigation-in.menu {
    border-radius: 12px;
}

@media only screen and (min-width: 768px) {
    .menu-level-2 {
        border-radius: 12px;
        box-shadow: 0px 0px 20px #00000033;
        top: auto;
        background-color: #ffffff;
    }
}

/* Product card */
.product {
    border: none !important;
}

.product>div {
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    justify-content: space-between;
}

.products:not(.products-inline) .product>div {
    padding: 16px;
}

.product .p-code {
    right: 16px;
    top: 16px;
}

.products-block .p-bottom>div {
    gap: 16px;
}

.product .prices,
.product .p-tools {
    flex-basis: auto !important;
}

.product .p-desc {
    margin: 0px !important;
}

.product .price-final {
    color: var(--color-secondary);
}

.products:not(.products-inline) .product .name {
    height: auto;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text);
}

/* Benefits */
.benefits {
    display: grid;
    align-items: flex-start;
    gap: 48px;
    padding: 48px 0px;
}

@media only screen and (min-width: 992px) {
    .benefits {
        grid-template-columns: repeat(3, 1fr);
    }
}

.benefits__card {
    display: grid;
    grid-template-areas:
        "icon headline"
        "text text"
        "button button";
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
}

@media only screen and (min-width: 992px) {
    .benefits__card {
        grid-template-areas:
            "icon"
            "headline"
            "text"
            "button";
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

.benefits__icon {
    grid-area: icon;
    width: 64px;
    height: 64px;
}

@media only screen and (min-width: 992px) {
    .benefits__icon {
        width: 80px;
        height: 80px;
    }
}

.benefits__headline {
    grid-area: headline;
    margin: 0px;
    color: var(--text);
    font-weight: 600;
}

@media only screen and (min-width: 992px) {
    .benefits__headline {
        text-align: center;
    }
}

.benefits__text {
    grid-area: text;
    margin: 0px;
}

@media only screen and (min-width: 992px) {
    .benefits__text {
        max-width: 360px;
        text-align: center;
    }
}

.benefits__button {
    grid-area: button;
    justify-self: flex-start;
}

@media only screen and (min-width: 992px) {
    .benefits__button {
        justify-self: center;
    }
}

/* Recipes */
.recipesSection {
    display: grid;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 48px;
}

.recipesSection__headline {
    margin: 0px;
    text-align: center;
}

.recipes {
    display: grid;
    gap: 36px;
}

@media only screen and (min-width: 480px) {
    .recipes {
        grid-template-areas:
            "recipe-1 recipe-1"
            "recipe-2 recipe-3";
        grid-template-columns: repeat(2, 1fr);
    }

    .recipes__card:nth-of-type(1) {
        grid-area: recipe-1;
    }

    .recipes__card:nth-of-type(2) {
        grid-area: recipe-2;
    }

    .recipes__card:nth-of-type(3) {
        grid-area: recipe-3;
    }
}

@media only screen and (min-width: 992px) {
    .recipes {
        grid-template-areas: "recipe-1 recipe-2 recipe-3";
        grid-template-columns: repeat(3, 1fr);
        align-items: flex-start;
        gap: 24px;
    }
}

.recipes__card {
    display: grid;
    gap: 16px;
}

.recipes__thumbnail {
    height: 200px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

@media only screen and (min-width: 480px) {
    .recipes__card:nth-of-type(1) .recipes__thumbnail {
        height: 400px;
    }
}

@media only screen and (min-width: 992px) {
    .recipes__card:nth-of-type(1) .recipes__thumbnail {
        height: 200px;
    }
}

.recipes__headline {
    color: var(--text);
    font-weight: 600;
    margin: 0px;
    text-align: center;
}

.recipes__button {
    justify-self: center;
}

/* References */
.referencesSection {
    display: grid;
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 48px;
}

.referencesSection__headline {
    margin: 0px;
    text-align: center;
}

.references {
    width: 100%;
}

.references__card {
    display: grid;
    align-content: flex-start;
    gap: 24px;
}

.references__logo {
    height: 32px;
}

.references__title {
    color: var(--text);
    text-transform: uppercase;
    margin: 0px;
}

.references__text {
    margin: 0px;
}

.referencesSection__navigation {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.referencesSection__button {
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0px;
    inset: auto;
}

.referencesSection__button::after {
    font-size: 16px;
}

/* Product detail */
.row.product-top {
    margin-top: 24px;
}

.p-detail-inner .row.product-top>div:first-child .p-detail-info {
    margin: 8px 0px;
}

.flag.flag-discount {
    background-color: var(--sale);
}

.productDetail__badges {
    padding: 0px;
}

.productDetail__badges>div {
    margin: 0px;
}

.p-detail-inner-header h1 {
    font-size: 3rem;
}

.p-short-description p {
    margin-bottom: 8px;
}

.add-to-cart {
    gap: 16px;
}

.availability-value {
    font-size: 1.5rem;
}

.p-detail-tabs-wrapper .shp-tabs-holder {
    border-radius: 12px;
    padding: 0px 16px;
}

.p-detail-tabs-wrapper .shp-tab-link {
    background-color: transparent;
}

.p-detail-tabs-wrapper .shp-tab.active {
    border-bottom: 2px solid var(--color-primary);
}

.productDetail {
    width: 100%;
    display: grid;
    grid-template-areas:
        "original"
        "pobo"
        "data";
    row-gap: 36px;
}

@media only screen and (min-width: 992px) {
    .productDetail {
        grid-template-areas:
            "original data"
            "pobo pobo";
        grid-template-columns: 1fr auto;
    }
}

.productDetail__content {
    grid-area: original;
}

.productDetail__data {
    grid-area: data;
}

.productDetail__pobo {
    grid-area: pobo;
}

@media only screen and (min-width: 992px) {
    .p-detail #description .extended-description {
        margin-left: 36px;
    }
}

/* Footer badges */
.footer-badges, .footer-badges--mobile {
    display: none;
    gap: 8px;
    margin-top: 8px;
}

.footer-badges-wrapper--mobile {
    padding: 0px;
    border: none;
}

.footer-badges--mobile {
    display: flex;
}

@media only screen and (min-width: 1200px) {
    .footer-badges {
        display: flex;
    }

    .footer-badges--mobile {
        display: none;
    }
}