{% set color = channel.ecomColor %}
{% set colorText = channel.ecomColorForText %}
{% set colorBg = channel.ecomColorBackground %}
{% set colorBoxes = channel.ecomColorBoxes %}
{% set colorBgText = channel.ecomColorBackgroundText %}
{% set footerBg = channel.ecomFooterBackgroundColor %}

<style>
    body {
        {% if colorBg is not empty %}
        background: {{ colorBg }};
        {% endif %}
    }

    .scroll-down-button {
        {% if colorText is not empty %}
        background-color: {{ colorText }};
        color: {{ channel.contrastColor(colorText) }};
        {% endif %}
    }

    .footer {
        {% if footerBg is not empty %}
        background: {{ footerBg }};
        {% elseif color is not empty %}
        background: {{ color }};
        {% endif %}
        {% if color is not empty %}
        color: {{ colorText ? colorText : '#000' }};
        {% endif %}
    }

    .back-button {
        {% if color is not empty %}
        border: 1px solid #000;
        border-radius: 4px;
        padding: 5px 10px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-color: {{ color }};
        {% endif %}
    }

    .card,
    .filter-block .ecom__categories-link {
        {% if color is not empty %}
        border-color: {{ color }};
        {% endif %}
    }

    .ecom .category-page__products-item .thumbnail .sale-tag,
    .ecom .category-page__products-item .when-hover a,
    .filter-block .ecom__categories-link.active,
    .ecom .btn-cart .ecom-quantity-header {
        {% if color is not empty %}
        background: {{ color }};
        color: {{ colorText ? colorText : '#000' }};
        {% endif %}
    }

    .ecom .product-page .info--price .price-text--discount {
        {% if color is not empty %}
        color: {{ color }};
        {% endif %}
    }

    .ecom .btn-more-menu .dropdown-menu {
        {% if color is not empty %}
        background: {{ color }};
        color: {{ colorText ? colorText : '#000' }};
        border-color: {{ color }};
        {% endif %}
    }

    .header-category-menu ul ul {
        {% if color is not empty %}
        background: {{ color }};
        border-color: {{ color }};
        {% endif %}
    }

    .btn-warning {
        {% if color is not empty %}
        background: {{ color }};
        color: {{ colorText ? colorText : '#000' }};
        border-color: {{ color }};
        box-shadow: none;
        {% endif %}
    }

    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning:visited,
    .btn-warning:hover {
        {% if color is not empty %}
        background: {{ color }} !important;
        color: {{ colorText ? colorText : '#000' }} !important;
        border-color: {{ color }} !important;
        {% endif %}
    }

    .ecom_checkout .card,
    .ecom_checkout .table > :not(caption) > * > *,
    .ecom__categories,
    .ecom .category-page__products-item {
        {% if colorBoxes is not empty %}
        background: {{ colorBoxes }};
        {% endif %}
    }

    .checkout-page-done {
        {% if colorBoxes is not empty %}
        background: {{ colorBoxes }};
        padding: 30px;
        {% endif %}
    }

    .ecom_checkout .ecom-modal-cart .table > :not(caption) > * > * {
        {% if colorBoxes is not empty %}
        background: transparent;
        {% endif %}
    }

    .ecom .category-page .page__title span {
        {% if colorBg is not empty %}
        background: {{ colorBg }};
        {% endif %}
        {% if colorBgText is not empty %}
        color: {{ colorBgText }} !important;
        {% endif %}
    }

    .ecom .ecom_checkout .page__title--h1,
    .ecom .ecom_checkout .form-check-text,
    .header-category-menu ul.menu-top > li > a,
    .ecom .pagination-wrapper {
        {% if colorBgText is not empty %}
        color: {{ colorBgText }} !important;
        {% endif %}
    }

    .ecom .btn-more-menu .btn span {
        {% if colorBgText is not empty %}
        background: {{ colorBgText }} !important;
        {% endif %}
    }
</style>