:root {
    /* #fd6506 */
    --bulma-primary-h: 23.08deg;
    --bulma-primary-s: 98.41%;
    --bulma-primary-l: 50.78%;

    /* #1071ff */
    --bulma-info-h: 216deg;
    --bulma-info-s: 100%;
    --bulma-info-l: 53%;

    --bulma-family-primary: Lato, Helvetica, Arial, sans-serif;
}

body {
    min-height: 100vh;
    background: var(--bulma-info);
    display: flex;
    flex-direction: column;
}
    body > *:not(.footer) {
        background: var(--bulma-white);
    }

.layout {
    flex-grow: 1;
}

.button.is-primary {
    color: #fff;
}

.navbar > .container .navbar-brand {
    margin-inline-start: 0;
}

.navbar-brand .button.is-info {
    color: #fff;
}
.navbar-brand .button.is-info,
.footer .button.is-brand {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    margin-right: 20px;
}
    .navbar-brand .button.is-info::after,
    .footer .button.is-brand::after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        transform: translatex(100%);
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;

        border-left: 20px solid var(--bulma-info);
        transition-duration: var(--bulma-duration);
        transition-property: background-color, border-color, box-shadow, color;
    }
    .footer .button.is-brand::after {
        border-left: 20px solid var(--bulma-white);
    }
    .navbar-brand .button.is-info:hover::after,
    .footer .button.is-brand:hover::after {
        border-left-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta)));
    }

.navbar.is-info .navbar-link,
.navbar.is-info .navbar-item,
.navbar.is-info .navbar-burger {
    color: #fff;
}

.navbar.is-info .navbar-start > .navbar-divider {
    background-color: #fff4;
}
.navbar.is-info .navbar-start > .navbar-caret {
    color: #fff4;
}

.navbar-start > .navbar-divider {
    display: block;
    height: initial;
    width: 1px;
    margin: .2rem .5rem;
}

.price {
    font-variant-numeric: tabular-nums;
}

.product-card {
    padding: 0;
    display: flex;
    align-items: stretch;
}
    .product-card > * {
        padding: var(--bulma-box-padding);
    }
    .product-card .product-media {
        flex-shrink: 0;
        padding-right: 0;
    }
        .product-card .product-media img {
            object-fit: contain;
            height: 128px;
            width: 128px;
        }
    .product-card .product-content {
        margin-bottom: 0;
        flex-grow: 1;
    }
    .product-card .product-pricing {
        background: var(--bulma-white-ter);
        border-top-right-radius: var(--bulma-box-radius);
        border-bottom-right-radius: var(--bulma-box-radius);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-shrink: 0;
        min-width: 15rem;
    }
        .product-card .product-pricing .price {
            font-weight: var(--bulma-weight-semibold);
            text-align: center;
        }


.product-box {
    margin-top: 5rem;

    display: flex;
    align-items: stretch;
    gap: var(--bulma-block-spacing);
}
    .product-box .product-images {
    }
        .product-box .product-images .image {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .8;
        }
            .product-box .product-images .image img {
                max-height: 100%;
                width: auto;
            }
            .product-box .product-images .image + .image {
                margin-top: 1rem;
            }

    .product-box .product-images .image.active {
        opacity: 1;
    }
    .product-box .product-image {
        border: 1px solid var(--bulma-border);
        aspect-ratio: 1;
        max-width: 33vw;
        display: flex;
    }
        .product-box .product-image img {
            object-fit: contain;
            position: relative;
            aspect-ratio: 1;
        }

        .product-box .product-image,
        .product-box .product-image img {
            border-radius: var(--bulma-radius);
        }
        .product-box .product-image img::before {
            content: "";
            display: block;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            position: absolute;
            background: var(--product-image);

        }

    .product-box .product-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        flex-grow: 1;
    }

    .product-box .product-pricing {
        background: hsl(var(--bulma-info-h), var(--bulma-info-s), 95%);
        padding: var(--bulma-block-spacing);
        display: flex;
        justify-content: space-between;
        border-radius: var(--bulma-radius);
    }

.sources {
    margin-top: 5rem;
}

.source-card {
    display: flex;
    gap: var(--bulma-box-padding);
    padding: 0;
    border: 1px solid var(--bulma-border);
}
    .source-card .source-media,
    .source-card .source-links {
        padding-left: var(--bulma-box-padding);
        padding-right: var(--bulma-box-padding);
    }
    .source-card .source-content {
        padding-top: var(--bulma-box-padding);
        padding-bottom: var(--bulma-box-padding);
    }

    .source-card .source-media {
        border-right: 1px solid var(--bulma-border);
        max-width: 128px;
        max-height: 128px;
        display: flex;
    }
        .source-card .source-media .image {
            display: flex;
            align-items: center;
        }
    .source-card .source-content {
        flex-grow: 1;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }
    .source-card .source-pricing {
        display: flex;
        align-items: center;
        font-weight: var(--bulma-weight-semibold);
    }
    .source-card .source-links {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: center;
        border-left: 1px solid var(--bulma-border);
    }

.footer .brand-ns {
    height: 60px;
    display: inline-flex;
    align-items: center;
    flex-grow: 0;
    padding: 0 1rem;
    vertical-align: top;
    background-color: #fff;
}