CSS for the demo ["create your maki or donburi"](https://demos.mklacroix.com/shop/create-your-maki-or-donburi/)

donburi-builder.css

/* CREATE YOUR MAKI OR DONBURI */
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_viewer {
    display: none;
}

.donburi-builder .mkl_pc {
    --toolbar_width: 100%;
    --mkl_pc_color-toolbar_bg: #fafbfc;
    --mkl_pc_color-primary: rgb(175 78 43);
    --mkl_pc_color-primary_rgb: 175, 78, 43;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > .layers {
    width: 100%;
    display: flex;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices {
    display: block !important;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li {
    width: calc(100% / 3);
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li.choice {
    width: 100%;
    /* text-align: left; */
}

.mkl_pc.wsb .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li.has-text-field {
    display: flex;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li > button.choice-item {
    text-align: left;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li span.text.choice-name {
    text-align: left;
}

.donburi-builder .mkl_pc .mkl_pc_container {
    position: relative;
    height: auto;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar {
    position: relative;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers button.layer-item {
    padding: 0;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.layers-list-item.type-group > button{
    margin-bottom: 10px;
}
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.layers-list-item.type-group > button::after {
    display: none;
}
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.layers-list-item.type-group > button .layer-name {
    color: rgb(175 78 43);
    font-size: 1.3em;
    text-align: center;
    font-weight: 600;
    display: block;
    
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices.group > li.choices-list {
    padding: 0;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list ul li.layers-list-item .layer_choices > li {
    padding-left: 0;
}


.donburi-builder .mkl_pc .mkl_pc_container footer .footer__section-center {
    display: none;
}

.donburi-builder .mkl_pc .mkl_pc_container footer .form.form-cart {
    display: flex;
    width: 100%;
}

.donburi-builder .mkl_pc .mkl_pc_container footer {
    position: fixed;
    bottom: 0;
    top: auto;
    /* height: auto; */
    z-index: 11;
    width: 100vw;
    background: #d5d5d5;
}

.donburi-builder .footer__section-right {
    width: 100%;
}

.donburi-builder .mkl_pc .mkl_pc_container footer .form.form-cart {
    width: auto;
    align-items: center;
    justify-content: center;
}

.donburi-builder .mkl_pc .mkl_pc_container .form.form-cart p {width: auto;display: none !important;}

.donburi-builder .mkl_pc .mkl_pc_container .form.form-cart .pc-total-price {
    width: auto;
    margin-bottom: 0;
    margin-right: 10px;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices + .form {
    display: none;
}

body.configurator_is_inline .donburi-builder .mkl_pc {
    height: auto;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.has-text-field label {
    position: absolute;
    top: 0px;
    font-size: 10px;
    text-transform: uppercase;
    right: 5px;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.has-text-field input[type="text"], .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.has-text-field input[type="number"] {border-color: #bbb;}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul li.has-text-field.active .text-field {
    padding: 5px;
    width: 70px;
    padding-top: 16px;
}

.donburi-builder .mkl_pc.wsb .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li.has-text-field.active > button {
    padding-bottom: .5em;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.col-1-forth {
    width: calc(100%/4);
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.col-2-forths {
    width: calc(100% / 2);
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices ul.layer_choices.group.col-2-forths > .choices-list > ul {
    flex-direction: row;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices ul.layer_choices.group.col-2-forths > .choices-list > ul > li {
    width: calc(100%/2);
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li {
    margin-left: 0;
    margin-right: 0;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices {
    overflow: initial;
}


.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.layers-list-item.type-group > button .selected-choice {
    display: none;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.layers-list-item.type-group > button {
    margin-bottom: 30px;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.layers-list-item li.layers-list-item > button {
    font-weight: bold;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li.ingredients {
    padding-left: 10px;
    padding-right: 10px;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.ingredients > button.layer-item::after {
    display: none;
}
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.ingredients > button.layer-item {
    border-bottom: 1px dashed #b7b7b7;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.ingredients > button.layer-item .layer-name {
    text-align: center;
    display: block;
}
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.ingredients > button.layer-item .selected-choice {
    display: none;
}
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layers li.ingredients > button.layer-item i {
    position: relative;
    opacity: 1;
    width: 50px;
    left:auto; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    top: auto;
    bottom: auto;
    transform: none;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li {
    box-shadow: none;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li:not(.active) > button.choice-item::before {
    content: '+';
    position: absolute;
    right: 4px;
    color: #74d504;
    font-size: 25px;
    font-weight: bold;
    top: 0;
    transition: .4s all;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li:not(.active) > button.choice-item:hover,
.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li:not(.active) > button.choice-item:focus {
    box-shadow: 0 0 16px -4px #0000001f;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li:not(.active) > button.choice-item:hover::before {
    transform: rotate(90deg);
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.choices-list li.choice.active {
    box-shadow: 0 0 0 2px #88ac79;
}

.donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices .type-multiple li.choices-list li.active > button.choice-item::before {
    content: '+';
    position: absolute;
    right: 4px;
    color: #d56904;
    font-size: 25px;
    font-weight: normal;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    transition: .4s all;
}

@media(max-width: 1080px) {
    .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices ul.layer_choices.group.col-2-forths > .choices-list > ul > li {
        width: 100%;
    }
    .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices ul.layer_choices.group.col-2-forths {
        width: 100%;
    }
    .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.col-2-forths,
    .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.col-1-forth {
        width: calc(100%/3);
    }
}

@media(max-width: 860px) {

    .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul {
        flex-direction: column;
    }
    
    .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.col-2-forths,
    .donburi-builder .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.col-1-forth {
        width: 100%;
    }

}

@media(min-width: 860px) {
    .donburi-builder .mkl_pc .mkl_pc_container .form.form-cart .pc_configurator_form > button.primary.button.btn.btn-primary.configurator-add-to-cart {
        padding: 18px 70px;
    }
}

/* END CREATE YOUR MAKI OR DONBURI */

• use the configurator theme "WSB"
• Add the CSS above to your site (e.g. using Customize > Additional CSS)
• insert the configurator in the page, in a container with the class donburi-builder (or modify the above CSS)
• The layout depends on using groups to define the columns, and adding CSS classes to those layers. Namely col-2-forths and col-1-forth
• The demo data is in this gist, and can be used as a starting point.