h1 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    color: #575857;
    font-size: clamp(32px, 2vw + 1rem, 56px);
}

h2 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    color: #575857;
    font-size: clamp(24px, 2vw + 1rem, 38px);
    margin: 0 0 1em 0;
}

h3 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    color: #575857;
    font-size: clamp(18px, 2vw + 1rem, 28px);
    margin: 0 0 1em 0;
}

.font-titillium {
    font-family: 'Titillium Web', sans-serif;
}

.auto-grid {
    --min-width: 300px;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
}

.grid-gap {
    gap: var(--tile-gap);
}

.mt-spacing {
    margin-block-start: var(--content-block-spacing);
}

.mb-spacing {
    margin-block-end: var(--content-block-spacing);
}

.container {
    .breadcrumbs {
        padding: 0;
        margin-top: 2em;
    }
}

.cms-index-index {
    p {
        margin: 0 !important;
    }
}

.page-layout-container {
    .columns {
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;

        .column.main {
            flex: 1;

            .product-item {
                line-height: unset;

                .price-box {
                    margin: 0;
                }

                .tocompare::before {
                    content: "";
                }
            }
        }

        .sidebar.sidebar-main {
            flex-grow: 0;
            flex-basis: unset;
            width: 300px;
        }
    }
}

.filter-options {
    --padding__x: 1.5em;
    --padding__y: 1em;

    background-color: var(--bonenkamp__color--6);

    .filter-options-item {
        padding: 0;
        border-bottom: 1px solid var(--bonenkamp__color--5);
        margin-bottom: 5px;

        .filter-options-title {
            padding: var(--padding__y) calc(var(--padding__x) * 2) var(--padding__y) var(--padding__x);
            text-transform: none;
            text-wrap: nowrap;
            background: white;
            color: var(--bonenkamp__color--2);
            font-weight: 700;

            &:after {
                top: 50%;
                right: 1em;
                translate: -50% -50%;
                font-size: 16px;
                font-weight: 700;
            }
        }

        .filter-options-content {
            padding: var(--padding__y) var(--padding__x);

            .items {
                margin: 0 !important;
            }

            .item {
                font-weight: normal;
            }

            a {
                display: block;
                color: var(--bonenkamp__color--2);
                transition: all 200ms ease-out;
                font-weight: 400 !important;

                &:hover {
                    color: var(--bonenkamp__color--1);
                    background-color: transparent;
                }

                .count {
                    color: unset;
                    display: none;
                }
            }

            .amshopby-slider-wrapper {
                margin: 0;
            }

            a.amshopby-link-selected {
                color: var(--bonenkamp__color--1);
                font-weight: 600 !important;
            }

            .amshopby-slider-display {
                font-weight: 400;
            }

            .amshopby-input-wrapper {
                .am-filter-price:focus {
                    box-shadow: var(--tile-box-shadow);
                }

                .amshopby-currency {
                    display: none;
                }
            }

            .am-filter-go {
                background: var(--bonenkamp__color--1);
                border-color: var(--bonenkamp__color--1);
            }

            .am-filter-go:hover {
                background: var(--bonenkamp__color--1);
                border-color: var(--bonenkamp__color--1);
            }

            .am-filter-go:focus {
                background: var(--bonenkamp__color--1);
                border-color: var(--bonenkamp__color--1);
            }
        }
    }

    & .filter-options-item:last-of-type {
        & .filter-options-title {
            color: white !important;;
            background-color: var(--bonenkamp__color--2);;
        }
    }

    & .filter-options-item:nth-last-of-type(2) {
        & .filter-options-title {
            color: white !important;
            background-color: var(--bonenkamp__color--1) !important;
        }
    }
}

.filter-actions {
    & .filter-clear {
        color: var(--bonenkamp__color--1);
        font-weight: 600;
    }

    & .filter-clear:hover {
        color: var(--bonenkamp__color--2);
    }
}

.toolbar-products {
    display: flex;
    justify-content: space-between;
    color: var(--bonenkamp__color--2);

    &::before, &::after {
        display: none;
    }

    & .modes {
        display: none;
    }

    & select {
        border-radius: 0;
        font-weight: 600;
        color: var(--bonenkamp__color--2);
        background-color: white;
        border: none;
        height: 50px;
        box-shadow: var(--tile-box-shadow);
        text-indent: 0;
    }

    & select:focus {
        box-shadow: var(--tile-box-shadow);
    }

    & .toolbar-amount {
        padding: 15px 0;
    }

    & .pages {
        display: flex;
        justify-content: center;

        & .items {
            display: flex;
            gap: 1rem;
            max-width: 100%;
            padding: 0;

            & .item {
                width: 4.5rem;
                aspect-ratio: 1 / 1;
                display: flex;
                align-items: center;
                justify-content: center;

                margin: 0;

                background-color: #fff;
                border: 1px solid var(--bonenkamp__color--4);

                font-size: 1.4rem;
                font-weight: bold;

                transition: background-color 150ms ease-out;

                &:hover {
                    background-color: var(--bonenkamp__color--4);
                }

                &.current {
                    background-color: var(--bonenkamp__color--4)
                }

                & .page, .action {
                    width: 100%;
                    aspect-ratio: 1 / 1;
                    align-content: center;
                    margin: 0;
                    padding: 0;
                    color: var(--bonenkamp__color--2);
                }

                & strong.page {
                    padding: 0;
                    background-color: unset;
                    font-size: unset;
                    font-weight: unset;
                    line-height: unset;
                }

                & .action {
                    border: none;
                    border-radius: 0;
                    box-shadow: none;
                    background: unset;
                }
            }
        }
    }

    & .limiter {
        display: block !important;
        font-weight: 600;

        .limiter-text {
            display: none;
        }
    }

    & .sorter-label {
        font-weight: 600;
    }

    & .sorter-action::before {
        color: var(--bonenkamp__color--1);
        content: '\f062';
        font-family: 'fontAwesome';
    }

    .sorter-action.sort-desc::before {
        content: '\f063';
    }
}

.action.tocart {
    position: relative;

    & > span {
        &::before {

            position: absolute;
            inset: 0;
            content: "";
            background-repeat: no-repeat;
            background-position: center;
            font-weight: 900;
            font-size: 1.6em;
            line-height: 1;

            display: flex;
            justify-content: center;
            align-items: center;

            color: #fff;
            background-color: var(--bonenkamp__color--1);

            opacity: 0;

            transition: opacity 150ms ease-out;
        }
    }

    &:hover > span {
        &::before {
            opacity: 1;
        }
    }
}

.action.towishlist {
    &::before {
        content: unset !important;
    }
}

.product-wrapper {
    position: relative;
    display: flex;

    & > .product.media {
        flex: 1;
    }

    & > .product-info-main {
        flex: 1;
    }

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.product-addto-links {
    display: block;
    text-align: left;
}

.product-page__sale-sticker-wrapper {
    position: absolute;
    top: 40px;
    left: 40px;
}

.catalog-product-view {
    & .sidebar-additional {
        padding: 0;
    }
}

/* Input */
input[type="text"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--bonenkamp__color--3);
}

input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    -webkit-appearance: auto;
}

.search.results {
    .products-grid-wrapper {
        --min-width: 250px;
    }
}

.checkout-index-index .am-checkout:not(.-modern) {
    background: unset;
}

/* Fotorama override */
.fotorama--fullscreen {
    z-index: 1080 !important; /* Making sure the fotorama overlay has a higher z-index than the header */
}

/*
We basically have to implement the Bootstrap container behaviour, specifically for the header.
Since Magento thought it would be cool to add a max-width property on the .header.content element...
*/
.header.content {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .header.content {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .header.content {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .header.content {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .header.content {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .header.content {
        max-width: 1320px;
    }
}


/* Custom search block */
.product-search-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 20;
    margin-block: var(--content-block-spacing);
}

.product-search-block {
    max-width: 1000px;

    margin-inline: 1em;
    padding: 30px;

    border-radius: 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

    background-color: white;
    font-size: 18px;

    .search-block-options-wrapper {
        display: grid;
        gap: 1em;
    }

    .dropdown-wrapper {
        flex: 1;
    }

    .dropdown {
        height: 50px;
        border: none;
        background-color: #e6e6e6;
        padding-left: 20px;
        color: #575957;
    }

    button {
        flex: 1;
        background-color: #e56919;
        color: white;
        height: 50px;
    }
}

@media (min-width: 1600px) {
    .product-search-wrapper {
        margin-block-start: 0;
        margin-block-end: calc(2 * var(--content-block-spacing));
    }

    .product-search-block {
        position: absolute;
        transform: translateY(-60%);
    }
}

@media (min-width: 600px) {
    .search-block-options-wrapper {
        grid-template-columns: 4fr 4fr 1fr 3fr;
    }
}

.products-grid.wishlist {
    .product-items {
        --min-width: 200px;

        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
        gap: 3rem;
        margin-block-end: 3rem;
    }

    .product-item {
        display: block;
        width: auto;
        margin: 0;
    }

    .product-item-inner {
        position: absolute;
        border: unset;
        background: lightgray;
        height: 100%;
        margin-top: 0;
        padding-top: 40px;
        top: 0;
    }

    .product-item-info:hover {
        padding: 2em;
    }

    .product-item-actions {
        display: flex;
        justify-content: end;
        margin-top: -60px;
    }

    .fieldset .product-item-actions {
        display: flex;
        justify-content: center;
    }

    .product-item-comment {
        height: 100px;
    }
}

.fotorama__thumb {
    background-color: unset;
}

.compare.wrapper {
    & .action.compare {
        position: relative;
        width: 35px;
        line-height: unset;
        margin-inline-start: 8px;

        &:not(.no-display) {
            display: block;
        }

        & .counter.qty {
            display: none;
        }
    }

    @media (max-width: 768px) {
        display: block !important;
        padding-left: 5px;

        & .item.link.compare::marker {
            content: none;
        }
    }
}

.modal-popup {
    font-size: 16px;
}

.mage-tabs-disabled {
    display: none;
}

.bonenkamp-banner {
    aspect-ratio: 3.6 / 1;
}

.swatch-option {
    width: 50px;
    height: unset;
    aspect-ratio: 1.5 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    &.text {
        margin-right: 10px;
    }
}