Easy to Adjust CSS Variables

These CSS variables are a quick way to change the look & feel of some Product Fruits elements. They can be redefined with the .productfruits--container-root selector.

/* Tours and Hints cards */
--card-border-radius: 5px;
--card-header-padding: 26px;
--card-footer-padding: 24px 24px 22px 24px;
--card-body-text-padding: 12px 26px;
--card-body-button-padding: 15px;

/* Buttons in general (cards [next, back, custom buttons], feedback and some others) */
--btn-border-radius: 5px;
--btn-padding: 13px 27px;
--btn-font-size: 1em;

Example

.productfruits--container-root {
    --card-border-radius: 15px;
}

This will make the corners of your cards more rounded.