#pk_flex_content{
    font-size: var(--body-regular);
    color: var(--mahogany);
}
#pk_flex_content .flex_layout_wrapper{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    padding-inline: 3rem;
    padding-block: 6rem;
}


/* Breadcrumbs */
body .fl-page #pk_flex_content .rank-math-breadcrumb{
    padding: 8px 12px 8px 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    max-width: 100vw;
    padding-right: 20px;
    color: #3C1518;
    grid-column: 1 / -1;
    width: fit-content;
}

body .fl-page #pk_flex_content .rank-math-breadcrumb *{
    font-weight: 400;
    color: #3C1518;
}

#pk_flex_content .rank-math-breadcrumb p > a:nth-child(1){
    font-size: 0px;
    opacity: 1;
    flex-shrink: 0;
}

#pk_flex_content .rank-math-breadcrumb p > a:nth-child(1){
    content: '';
    height: 15px;
    width: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.80113 3.49647C3.8706 3.47672 3.95 3.45697 4.03932 3.45697C4.78367 3.34833 5.07148 3.34833 5.30967 3.41746C5.81583 3.54585 6.12349 4.09891 5.94485 4.59271C5.87538 4.74085 5.79598 4.89886 5.65704 5.0075C5.41884 5.27415 5.06156 5.40254 4.73405 5.38279V8.10856C4.91269 8.10856 5.06156 8.12831 5.2402 8.14807C7.19535 8.38509 7.91985 8.88877 8.15804 9.82698C8.59472 11.575 7.61219 12.6021 5.19058 12.6416C5.04171 12.6614 4.88291 12.6416 4.73405 12.6416V15.7526C5.58756 16.0587 6.51055 16.0982 7.85038 15.7723C10.0239 15.2687 11.4729 13.8268 11.8897 11.7726C12.3065 9.57021 11.5126 7.62464 10.004 6.63704C9.58719 6.37039 9.1505 6.18274 8.6642 6.07411C9.17035 5.55068 9.45817 4.91861 9.56734 4.23717C9.96432 1.40276 7.79083 -0.483554 2.78882 0.109006C1.82613 0.217642 0.92299 0.434914 0 0.79045V15.9501H3.80113V3.49647Z' fill='%23F13030'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
}

#pk_flex_content .rank-math-breadcrumb p > a:nth-child(3){
    flex-shrink: 0;
} 

#pk_flex_content .rank-math-breadcrumb .separator{
    font-size: 0;
    flex-shrink: 0;
}

#pk_flex_content .rank-math-breadcrumb .separator{
    height: .5rem;
    width: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.4' d='M4.93333 4L0.933333 8L-4.07973e-08 7.06667L3.06667 4L-3.08894e-07 0.933333L0.933333 -4.07973e-08L4.93333 4Z' fill='%233C1518'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    display: inline-block;
}

#pk_flex_content .rank-math-breadcrumb p{
    margin-bottom: 0px;
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
}

#pk_flex_content .rank-math-breadcrumb a,
#pk_flex_content .rank-math-breadcrumb span:not(.separator){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;     /* Add the '...' */
}

#pk_flex_content .rank-math-breadcrumb span:not(.separator){
    opacity: 0.5;
}

#pk_flex_content .rank-math-breadcrumb a:hover,
#pk_flex_content .rank-math-breadcrumb a:focus{
    opacity: 1;
}


/* SEARCH SHOP */
#pk_flex_content .dgwt-wcas-search-wrapp{
    margin: 0px auto 0px 0px;
}

#pk_flex_content .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp{
    padding: 0px;
    background: transparent;
}

#pk_flex_content .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{
    border-radius: 0.5rem;
    background-color: #F5F0EB;
    height: 4rem;
}

#pk_flex_content .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit{
    top: 50%;
    left: 1rem;
    transform: translate(0, -50%);
    border: 0px;
    background-color: transparent;
}

#pk_flex_content .dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit{
    left: unset;
    right: 1rem;
}



/* BUG: Waarom staat hier een random grid-systeem? Dit soort dingen moeten echt globaal hetzelfde gaan. */

/* GRID SETUP */
#pk_flex_content .grid {
    display: grid;
    gap: 1.5rem;
}

#pk_flex_content .grid.grid_5 {
    grid-template-columns: repeat(1, 1fr);
}

#pk_flex_content .grid.grid_4 {
    grid-template-columns: repeat(1, 1fr);
}

#pk_flex_content .grid.grid_3 {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    #pk_flex_content .grid.grid_4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #pk_flex_content .grid.grid_5 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    #pk_flex_content .grid.grid_4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    #pk_flex_content .grid.grid_3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    #pk_flex_content .grid.grid_5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    #pk_flex_content .grid.grid_4 {
        grid-template-columns: repeat(4, 1fr);
    }

    #pk_flex_content .grid.grid_3 {
        grid-template-columns: repeat(3, 1fr);
    }
}



@media only screen and (max-width: 992px){

    #pk_flex_content .flex_layout_wrapper{
        grid-template-columns: repeat(8, minmax(0, 1fr));
        padding-inline: 1.5rem;
        column-gap: 1rem;
        padding-block: 4rem;
    }
}

@media only screen and (max-width: 767px){


    #pk_flex_content .flex_layout_wrapper{
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-inline: 1.25rem;
        padding-block: 3rem;
    }
    
    /* BUG: Dit levert alleen maar issues op*/
    /* #pk_flex_content .flex_content > div:nth-child(1){
        padding-top: 6rem;
    } */
}