/* CSS for Onwise pseudo builder */
[class*="onw-col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.onw-col-1 {
    width: calc((100% / 12) * 1);
}

.onw-col-2 {
    width: calc((100% / 12) * 2);
}

.onw-col-3 {
    width: calc((100% / 12) * 3);
}

.onw-col-4 {
    width: calc((100% / 12) * 4);
}

.onw-col-5 {
    width: calc((100% / 12) * 5);
}

.onw-col-6 {
    width: calc((100% / 12) * 6);
}

.onw-col-7 {
    width: calc((100% / 12) * 7);
}

.onw-col-8 {
    width: calc((100% / 12) * 8);
}

.onw-col-9 {
    width: calc((100% / 12) * 9);
}

.onw-col-10 {
    width: calc((100% / 12) * 10);
}

.onw-col-11 {
    width: calc((100% / 12) * 11);
}

.onw-col-12 {
    width: calc((100% / 12) * 12);
}

@media (max-width: 767px) {
    [class*="onw-col-"] {
        width: calc((100% / 12) * 12);
    }
}

.onw-content {
    padding: 75px 0;
    position: relative;
}

.onw-content *:not(input):not(textarea):not(select):not(option):not(a) {
    color: inherit;
}

[class*=onw-h-align-] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.onw-h-align-center {
    justify-content: center;
}

.onw-h-align-left {
    justify-content: flex-start;
}

.onw-h-align-right {
    justify-content: flex-end;
}

.onw-v-align-center {
    align-self: center;
}

.onw-v-align-top {
    align-self: flex-start;
}

.onw-v-align-bottom {
    align-self: flex-end;
}

.onw-column>div> :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.onw-column>div> :first-child {
    margin-top: 0;
    padding-top: 0;
}

.onw-container {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}

.onw-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.onw-content.onw-colour-white {
    background-color: #ffffff;
}

.onw-content.onw-colour-grey {
    background-color: #f2f2f2;
}

.onw-background-img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.75;
}

.onw-background-img~.onw-container {
    z-index: 1;
    position: relative;
}

[class*="onw-colour-"].onw-column:not(.onw-colour-none) {
    padding: 25px;
}

.onw-column.onw-colour-white {
    background-color: var(--jacob-white);
}

.onw-column.onw-colour-grey {
    background-color: var(--jacob-grey);
}

.onw-full-width .onw-container {
    max-width: none;
}

.onw-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .onw-content {
        padding: 0;
    }

    .onw-text {
        padding: 50px 0;
    }

    .onw-image {
        margin: 0 -15px;
    }

    [class*="onw-colour-"].onw-column:not(.onw-colour-none) {
        padding: 0 15px;
    }

    .onw-content [style*="column-count"] {
        column-count: 1 !important;
    }
}

@media (min-width: 768px) {
    .onw-content.onw-full-width {
        padding: 0;
    }

    .onw-full-width .onw-container {
        max-width: none;
    }

    .onw-full-width .onw-column {
        padding: 0;
    }

    .onw-full-width .onw-column> :not(.onw-image):first-child {
        padding-top: 75px;
    }

    .onw-full-width .onw-column> :not(.onw-image):last-child {
        padding-bottom: 75px;
    }

    .onw-full-width .onw-column> :not(.onw-image) {
        padding-left: 50px;
        padding-right: 50px;
    }

    .onw-full-width .onw-image {
        height: 100%;
    }

    .onw-full-width .onw-image img {
        height: 100%;
    }
}

/* Home redesign rows */
@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Oblique.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-ThinOblique.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-BoldOblique.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-MediumOblique.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-LightOblique.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-HeavyOblique.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-BlackOblique.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fivo Sans';
    src: url('../fonts/FivoSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --jacob-font: 'Fivo Sans', sans-serif;
    --jacob-white: #ffffff;
    --jacob-black: #000000;
    --jacob-orange: #fa8531;
    --jacob-red: #ff0000;
    --jacob-pink: #fc8279;
    --jacob-yellow: #ffcc00;
    --jacob-teal: #029a83;
    --jacob-grey: #f0f0f0;
    --jacob-dark-grey: #89cec1;

    --jacob-shape-mask: url('https://jacobsslapen.nl/wp-content/uploads/2025/09/shape-mask.svg') no-repeat center / 100% 100%;

    --jacob-h1-size: clamp(42px, calc(34.110454px + 1.972387vw), 72px);
    --jacob-h2-size: clamp(24px, calc(19.266272px + 1.183432vw), 42px);
}

.onw-redesign {
    padding: 50px 0;
    color: var(--jacob-black);

    * {
        font-family: var(--jacob-font) !important;
        letter-spacing: 0.5px !important;
    }

    .button {
        padding: 10px 15px !important;
        text-align: center;
        margin: 0 !important;
        box-sizing: border-box;
    }

    p {
        line-height: 1.2;

        &:has(.button) {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
    }

    h2 {
        font-size: var(--jacob-h2-size);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 300;
        line-height: 1.2;

        strong {
            font-weight: 700;
        }
    }

    .onw-container {
        max-width: 100%;
        padding-left: calc((100vw - 1200px) / 2);
        padding-right: calc((100vw - 1200px) / 2);
    }
}

.onw-colour-transparent {
    background-color: transparent;
    color: var(--jacob-black) !important;

    +.onw-colour-transparent {
        padding-top: 0;
    }
}

.onw-colour-black {
    background-color: var(--jacob-black);
    color: var(--jacob-white) !important;

    +.onw-colour-black {
        padding-top: 0;
    }
}

.onw-colour-orange {
    background-color: var(--jacob-orange);
    color: var(--jacob-white) !important;

    +.onw-colour-orange {
        padding-top: 0;
    }
}

.onw-colour-red {
    background-color: var(--jacob-red);
    color: var(--jacob-white) !important;

    +.onw-colour-red {
        padding-top: 0;
    }
}

.onw-colour-pink {
    background-color: var(--jacob-pink);
    color: var(--jacob-white) !important;

    +.onw-colour-pink {
        padding-top: 0;
    }
}

.onw-colour-yellow {
    background-color: var(--jacob-yellow);
    color: var(--jacob-black) !important;

    +.onw-colour-yellow {
        padding-top: 0;
    }
}

.onw-colour-teal {
    background-color: var(--jacob-teal);
    color: var(--jacob-white) !important;

    +.onw-colour-teal {
        padding-top: 0;
    }
}

.onw-colour-dark-grey {
    background-color: var(--jacob-dark-grey);
    color: var(--jacob-black) !important;

    +.onw-colour-dark-grey {
        padding-top: 0;
    }
}

.onw-colour-white+.onw-colour-white,
.onw-colour-grey+.onw-colour-grey {
    padding-top: 0;
}

.onw-container-inner {
    &:has(.onw-background-img) {
        position: relative;
    }
}

.onw-container-left {
    padding-right: 0 !important;
    padding-left: calc((100vw - 1200px) / 2) !important;
}

.onw-container-right {
    padding-left: 0 !important;
    padding-right: calc((100vw - 1200px) / 2) !important;
}

@media (max-width: 767px) {
    .onw-redesign {
        .button {
            width: 100%;
        }
    }
}

/* Hero */
.onw-redesign-hero {
    background-color: var(--jacob-orange);
    padding: 75px 0;

    .onw-background-img {
        opacity: 0.5;
        filter: brightness(0.5);
    }

    .onw-container {
        align-items: center;
    }

    .onw-hero-content {
        * {
            color: var(--jacob-white);
        }

        h1 {
            color: var(--jacob-yellow);
            font-weight: 700;
            text-transform: uppercase;
            font-size: var(--jacob-h1-size);
            margin-bottom: 10px;
        }

        h2 {
            margin-bottom: 50px;
        }

        .button {
            background-color: var(--jacob-white);
            color: var(--jacob-black);
        }
    }

    .onw-hero-side-image {
        display: flex;
        justify-content: flex-end;

        img {
            object-fit: contain;
            max-height: 350px;
        }
    }
}

/* END Hero */
/* Product categories */
.onw-redesign-product-categories {
    .onw-product-category {
        text-align: center;

        &:hover {
            .onw-product-category-image {
                &:before {
                    transform: translate(-50%, -50%) scale(1.05);
                }
            }
        }

        .onw-product-category-image {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            position: relative;
            aspect-ratio: 1 / 1;

            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                background-color: var(--jacob-orange);
                transform: translate(-50%, -50%);
                mask: var(--jacob-shape-mask);
                transition: transform 200ms ease-in-out;
            }

            &.onw-has-border,
            &:not(:has(img)) {
                img {
                    width: calc(100% - 8px);
                    height: calc(100% - 8px);
                }
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                mask: var(--jacob-shape-mask);
            }
        }

        h4 {
            font-weight: 600;
            margin-bottom: 0;
            color: var(--jacob-black);
        }
    }
}

/* END Product categories */
/* Tiles */
.onw-redesign-tiles {
    .onw-container {
        gap: 30px;
    }

    .onw-tile {
        position: relative;
        display: flex;
        flex: 1 1 400px;
        overflow: hidden;
        background-color: var(--jacob-teal);
        border-radius: 20px;
        padding: 50px;

        * {
            color: var(--jacob-white);
        }

        .onw-tile-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            mask: linear-gradient(to right, transparent 10%, black 100%);
        }

        .onw-tile-content {
            position: relative;
            display: flex;
            flex-direction: column;

            a[href*="tel:"] {
                &:before {
                    content: '';
                    display: inline-block;
                    position: relative;
                    top: 4px;
                    margin-right: 5px;
                    width: 20px;
                    height: 20px;
                    background-image: url('https://jacobsslapen.nl/wp-content/uploads/2025/09/jacobs-phone.svg');
                    background-size: contain;
                    background-repeat: no-repeat;
                    transition: all 200ms ease-in-out;
                }

                &:hover:before {
                    transform: translateY(-2px);
                }
            }

            .button {
                margin-top: 15px;
                background-color: var(--jacob-orange);
                color: var(--jacob-white);
            }

            > :last-child:has(.button) {
                margin-top: auto;
            }
        }
    }
}

/* END Tiles */
/* Side image */
.onw-redesign-side-image {

    &.onw-has-gradient {
        .onw-container-inner {
            background: linear-gradient(to right, var(--jacob-orange), var(--jacob-teal));
        }

        .onw-background-img {
            opacity: 0.5!important;
            filter: brightness(0.5);
        }

        .onw-column {
            padding: 75px 75px 75px 0!important;
        }
    }

    .onw-container-inner {
        overflow: hidden;
        border-radius: 0 20px 20px 0;
        min-height: 600px;
        display: flex;
        align-items: center;
        width: 100%;

        * {
            color: var(--jacob-white);
        }

        .onw-background-img {
            opacity: 1;
        }

        .onw-column {
            padding: 400px 75px 75px 0;
            position: relative;
            z-index: 1;

            p:has(.button) {
                margin-top: 25px;
            }
        }
    }

}

/* END Side image */
/* Products */
.onw-redesign-products {
    .onw-container {
        gap: 30px 60px;
    }

    h2.onw-title {
        color: var(--jacob-black);
        margin: 0;
        width: 100%;
    }

    .onw-product {
        position: relative;
        background: linear-gradient(to bottom, #00D7B6, var(--jacob-teal));
        color: var(--jacob-white);
        border-radius: 20px;
        padding: 25px;
        flex: 1 1 350px;
        display: flex;
        flex-direction: column;

        .onw-product-price {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
            right: -30px;
            top: -5px;
            width: 125px;
            aspect-ratio: 1 / 1;
            background-color: var(--jacob-red);
            color: var(--jacob-white);
            border-radius: 100%;
            font-weight: 600;
            z-index: 1;
        }

        .onw-product-image {
            border-radius: 20px;
            display: block;
            width: 100%;
            aspect-ratio: 5 / 4;
            object-fit: cover;
            margin-bottom: 15px;
        }

        .onw-product-title {
            font-weight: 600;
            font-size: clamp(20px, calc(18.421053px + 0.394737vw), 26px);
        }

        .onw-product-usps {
            margin-bottom: 15px;

            li {
                &:before {
                    content: '';
                    display: inline-block;
                    position: relative;
                    width: 20px;
                    aspect-ratio: 1 / 1;
                    margin-right: 15px;
                    background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 23"><path d="m1.56 12.6 8.75 8.74L23.44 1.66" stroke="%23fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
        }

        .button {
            width: 100%;
            padding: 16px 32px !important;
            background-color: var(--jacob-orange) !important;
            margin-top: auto !important;
        }
    }
}

/* END Products */
/* USPs */
.onw-redesign-usps {
    background: linear-gradient(to right, var(--jacob-grey), var(--jacob-dark-grey));

    .onw-usps {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 30px;
        width: 100%;

        li {
            flex: 1 1 150px;
            display: flex;
            align-items: center;
            flex-direction: column;

            .onw-usp-icon {
                object-fit: contain;
                width: 100%;
                max-width: 75px;
                max-height: 75px;
            }

            .onw-usp-content {
                margin-top: 10px;
                font-weight: 600;
                text-align: center;
                color: var(--jacob-black);
            }
        }
    }
}

/* END USPs */
/* CTA Cards */
.onw-redesign-cta-cards {
    position: relative;
    padding: 150px 0;
    overflow: hidden;

    &:before {
        content: '';
        position: absolute;
        top: -20%;
        left: -30%;
        width: 60%;
        height: 80%;
        transform: rotate(190deg);
        background-color: var(--jacob-teal);
        mask: var(--jacob-shape-mask);
        z-index: 0;
        pointer-events: none;
    }

    .onw-container {
        position: relative;
        z-index: 1;
        gap: 30px;
    }

    .onw-col-6 {
        flex: 1 1 500px;
        border-radius: 20px;
    }

    .onw-card-reviews {
        border-radius: 100px 20px 20px 20px;
        padding: 50px 75px !important;

        h2 {
            font-weight: 600;
        }

        .ti-widget.ti-goog {
            display: flex;
            justify-content: flex-start;

            .ti-widget-container {
                margin: 0 !important;

                .ti-header .ti-fade-container {
                    flex-direction: column !important;
                    gap: 15px !important;

                    span {
                        height: auto !important;
                    }

                    .ti-stars {
                        display: flex;
                        gap: 5px !important;

                        img.ti-star {
                            width: 40px !important;
                            height: 40px !important;
                            object-fit: contain;
                        }
                    }

                    .ti-small-logo {
                        display: none;
                    }

                    strong {
                        font-size: 18px !important;
                        color: var(--jacob-white) !important;
                        font-weight: 600 !important;

                        &:before {
                            content: 'Gebaseerd op ';
                        }
                    }
                }

            }
        }
    }

    .onw-card-folder {
        display: flex;
        flex-direction: column;
        padding-bottom: 0 !important;

        > :last-child {
            margin-top: auto;
        }
    }

    .onw-card-content {
        display: flex;

        .onw-text {
            display: flex;
            flex-direction: column;

            p:has(.button) {
                margin-top: auto;
            }
        }
    }
}

/* END CTA Cards */
/* Logos */
.onw-redesign-logos {
    .onw-column {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
}
/* END Logos */
/* Content */
.onw-redesign-content {
    position: relative;
    padding: 75px 0 150px;
    overflow: hidden;

    &:before {
        content: '';
        position: absolute;
        bottom: -20%;
        right: -20%;
        width: 60%;
        height: 80%;
        transform: rotate(190deg);
        background-color: var(--jacob-orange);
        mask: var(--jacob-shape-mask);
        z-index: 0;
        pointer-events: none;
    }

    .onw-container {
        position: relative;
        z-index: 1;
        row-gap: 30px;
    }

    h2 {
        color: var(--jacob-teal)!important;
    }

    .onw-text:has(.button) {
        display: flex;
        flex-direction: column;
    }

    p:has(.button) {
        margin-top: auto;
    }

    .button {
        margin-top: 75px!important;
        background-color: var(--jacob-orange)!important;
    }

    .onw-column:has(.onw-image) {
        display: flex;

        img {
            border-radius: 20px;
        }
    }
}
/* END Content */