:root {
    /*
        Global
    */
    --font-primary: 'Open Sans', 'Arial', 'Helvetica', 'sans-serif';
    --font-secondary: var(--font-primary);

    --color-1: #e6a338;
    --color-1-hi: #f5b652;
    --color-2: #1e1e1e;
    --color-2-hi: #727272;
    --color-3: #ffffff;
    --color-3-lo: #fafafa;
    --color-4: #dedede;
    --color-5: #e8e8e8;
    --color-6: #17865e;
    --color-7: #d3003e;
    --color-8: #adadad;
    --color-9: #000000;
    --color-10: #c9ad70;
    --color-11: #e6f2ef;
    --color-12: #ffffff;
    --color-13: #f5f5f5;

    --color-added: var(--color-6);
    --color-brand-accent: var(--color-1);
    --color-brand-accent-highlight: var(--color-1-hi);
    --color-brand-accent-secondary: var(--color-1-hi);
    --color-hero-ui: var(--color-3);
    --color-restriction-limit: var(--color-12);
    --color-light-grey: var(--color-4);
    --color-low-emphisis-text: var(--color-2-hi);
    --color-main-brand-color: var(--color-2);
    --color-success: var(--color-6);
    --color-success-dimmed: #ebfcf6;
    --color-error: var(--color-7);
    --color-error-dimmed: #ffecf2;
    --color-danger: var(--color-7);
    --color-danger-dimmed: var(--color-error-dimmed);
    --color-warning: #e6a338;
    --color-border: var(--color-4);
    --color-light-hilight: #f1f1f1;
    --color-gold: var(--color-10);
    --color-minimum-alert: var(--color-11);
    --color-resctriction: #e5f2ef;

    --size: 36px;
    --size-xxxlg: 60px;
    --size-xxlg: 50px;
    --size-xlg: 46px;
    --size-lg: 40px;
    --size-md: 30px;
    --size-sm: 26px;
    --size-xs: 18px;
    --size-xxs: 14px;

    --radius: 20px;

    /*
        Grid
    */
    --wrapper-max-width: 1236px;
    --grid-gutter-width: 40px;

    /*
        Global
    */
    --body-bg-color: var(--color-main-brand-color);
    --footer-bg-color: var(--color-main-brand-color);
    --footer-font-size: 14px;
    --footer-font-weight: 400;
    --footer-font: var(--footer-primary);
    --footer-color: var(--color-hero-ui);
    --footer-link-color: var(--color-hero-ui);
    --footer-link-color-hover: var(--color-brand-accent-highlight);

    /*
        Forms
    */
    --input-field-font-family: var(--font-primary);
    --input-field-font-size: 16px;
    --input-field-color: var(--color-main-brand-color);
    --input-field-color-disabled: var(--color-8);
    --input-field-font-weight: 400;
    --input-field-size: var(--size-xxlg, 50px);
    --input-field-padding: calc(var(--grid-gutter-width) / 2);
    --input-field-padding-indicator-exist: calc(var(--grid-gutter-width) + var(--indicator-size-sm));
    --input-field-margin: var(--input-field-padding);
    --input-field-radius: calc(var(--size-xxlg, 50px) / 4);
    --input-field-bg: var(--color-hero-ui);
    --input-field-border-width: 1px;
    --input-field-border-style: solid;
    --input-field-border-color: var(--color-border);
    --input-field-border-width-focusing: 1px;
    --input-field-border-style-focusing: solid;
    --input-field-border-color-focusing: var(--color-brand-accent);
    --input-field-border-width-error: 1px;
    --input-field-border-style-error: solid;
    --input-field-border-color-error: var(--color-danger);

    --input-field-placeholder-opacity: 0.4;
    --input-field-font-family-placeholder: var(--input-field-font-family);
    --input-field-font-size-placeholder: var(--input-field-font-size);
    --input-field-color-placeholder: var(--input-field-color);
    --input-field-font-weight-placeholder: var(--input-field-font-weight);

    --input-field-font-family-label: var(--font-primary);
    --input-field-font-size-label: 13px;
    --input-field-color-label: var(--color-main-brand-color);
    --input-field-color-label-focusing: var(--color-main-brand-color);
    --input-field-font-weight-label: 400;
    --input-field-font-weight-label-focusing: 700;

    --input-field-font-family-label-check: var(--input-field-font-family-label);
    --input-field-font-size-label-check: var(--input-field-font-size-label);
    --input-field-color-label-check: var(--input-field-color-label);
    --input-field-font-weight-label-check: var(--input-field-font-weight-label);

    --input-field-checkmark-size: var(--size-sm);
    --input-field-checkmark-bg: transparent;
    --input-field-checkmark-inner-size: var(--size-xs);
    --input-field-checkmark-inner-bg: var(--color-border);
    --input-field-checkmark-inner-bg-checked: var(--color-brand-accent);
    --input-field-checkmark-inner-color: var(--color-hero-ui);
    --input-field-checkmark-inner-font-size: 11px;
    --input-field-checkmark-outline-color: var(--color-border);
    --input-field-checkmark-outline-style: solid;
    --input-field-checkmark-outline-width: 1px;
    --input-field-checkmark-radius: 100%;
    --input-field-checkmark-margin-left: 0px;
    --input-field-checkmark-margin-right: calc(var(--grid-gutter-width) / 4);

    --input-field-status-indicator-right-offset: var(--input-field-padding, 20px);
    --input-field-image-area-height: 200px;
    --input-field-image-area-border-size: 1px;
    --input-field-image-area-border-color: var(--input-field-border-color);
    --input-field-image-area-border-style: dashed;
    --input-field-image-label-size: 18px;
    --input-field-image-label-color: var(--input-field-color);
    --input-field-image-label-weight: var(--input-field-font-weigh);
    --input-field-image-label-font-family: var(--input-field-font-family);

    --input-field-image-label-or-size: 12px;
    --input-field-image-label-or-color: var(--color-low-emphisis-text);
    --input-field-image-label-or-weight: var(--input-field-font-weigh);
    --input-field-image-label-or-font-family: var(--input-field-font-family);

    --input-field-image-file-size-size: 10px;
    --input-field-image-file-size-color: var(--color-low-emphisis-text);
    --input-field-image-file-size-weight: var(--input-field-font-weigh);
    --input-field-image-file-size-font-family: var(--input-field-font-family);
    --input-field-image-file-size-opacity: var(--input-field-placeholder-opacity);

    --input-field-image-controls-font-size: var(--link-font-size);

    --input-field-image-preview-description-size: 14px;
    --input-field-image-preview-description-color: var(--input-field-color);
    --input-field-image-preview-description-weight: var(--input-field-font-weigh);
    --input-field-image-preview-description-font-family: var(--input-field-font-family);

    /*
        Form hints
    */
    --hints-floating-side-offset: var(--input-field-padding, 20px);
    --hints-floating-arrow-width: 20px;
    --hints-floating-arrow-height: 8px;
    --hints-floating-arrow-width-sm: 10px;
    --hints-floating-arrow-height-sm: 6px;
    --hints-floating-height: 36px;
    --hints-floating-height-sm: 30px;
    --hints-floating-width-min: 270px;
    --hints-floating-width-min-sm: 190px;
    --hints-floating-color: var(--color-hero-ui);
    --hints-floating-font-family: var(--font-primary);
    --hints-floating-font-weight: 700;
    --hints-floating-font-size: 12px;
    --hints-floating-font-size-sm: 12px;
    --hints-floating-bg-danger: var(--color-danger);
    --hints-floating-bg-warning: var(--color-warning);

    --hints-simple-bg-danger: var(--hints-floating-bg-danger);
    --hints-simple-font-family: var(--hints-floating-font-family);
    --hints-simple-font-weight: var(--hints-floating-font-weight);
    --hints-simple-font-size: var(--hints-floating-font-size);
    --hints-simple-color: var(--hints-floating-color);

    --hints-simple-bg-disabled: var(--color-5);
    --hints-simple-color-disabled: var(--color-low-emphisis-text);

    --hints-popup-bg-primary: var(--color-hero-ui);
    --hints-popup-bg-success: var(--color-6);
    --hints-popup-color-primary: var(--color-low-emphisis-text);
    --hints-popup-color-success: var(--color-3);
    --hints-popup-font-family: var(--font-primary);
    --hints-popup-font-weight-regular: 400;
    --hints-popup-font-weight-bold: var(--hints-floating-font-weight);
    --hints-popup-font-size: 12px;
    --hints-popup-radius: 10px;
    --hints-popup-size: 150px;

    /*
        Form terms
    */
    --forms-terms-font-size: 12px;
    --forms-terms-font-family: var(--font-primary);
    --forms-terms-font-weight: 400;
    --forms-terms-color: var(--color-low-emphisis-text);
    --forms-terms-link-color: var(--color-brand-accent);

    /*
        Order summary
    */
    --order-summary-line-height: 33px;
    --order-summary-border-color: var(--color-border);
    --order-summary-border-style: solid;
    --order-summary-border-width: 1px;
    --order-summary-font-family: var(--font-primary);
    --order-summary-font-weight: 400;
    --order-summary-font-size: 14px;
    --order-summary-color: var(--color-low-emphisis-text);

    --order-summary-subtotal-line-height: var(--order-summary-line-height);
    --order-summary-subtotal-font-weight: var(--order-summary-font-weight);
    --order-summary-subtotal-font-size: var(--order-summary-font-size);
    --order-summary-subtotal-color: var(--color-low-emphisis-text);

    --order-summary-tax-line-height: var(--order-summary-line-height);
    --order-summary-tax-font-weight: var(--order-summary-font-weight);
    --order-summary-tax-font-size: var(--order-summary-font-size);
    --order-summary-tax-color: var(--color-low-emphisis-text);

    --order-summary-voucher-line-height: var(--order-summary-line-height);
    --order-summary-voucher-font-weight: var(--order-summary-font-weight);
    --order-summary-voucher-font-size: var(--order-summary-font-size);
    --order-summary-voucher-color: var(--color-success);
    --order-summary-voucher-bg: transparent;

    --order-summary-total-line-height: calc(var(--order-summary-line-height) + 6px);
    --order-summary-total-font-weight: var(--order-summary-font-weight);
    --order-summary-total-font-size: var(--order-summary-font-size);
    --order-summary-total-color: var(--color-main-brand-color);

    --order-summary-member-points-font-weight: 700;
    --order-summary-member-points-font-size: var(--order-summary-font-size);
    --order-summary-member-points-color: var(--color-main-brand-color);

    --order-summary-email-verify-line-height: var(--order-summary-line-height);
    --order-summary-email-verify-font-weight: 200;
    --order-summary-email-verify-font-size: 16px;
    --order-summary-email-verify-color: var(--color-low-emphisis-text);

    /*
        Box
    */
    --box-bg: var(--color-hero-ui);
    --box-bg-inactive: transparent;
    --box-radius: var(--radius, 20px);
    --box-font-family: var(--font-primary);
    --box-color: var(--color-main-brand-color);
    --box-font-size: 16px;
    --box-font-weight: 400;
    --box-border-width: 1px;
    --box-border-style: solid;
    --box-border-color: var(--color-border);
    --box-border-inactive-width: 1px;
    --box-border-inactive-style: solid;
    --box-border-inactive-color: var(--color-border);
    --box-paddings-header-horizontal: var(--grid-gutter-width);
    --box-paddings-header-vertical: var(--box-paddings-header-horizontal);
    --box-paddings-content-horizontal: var(--box-paddings-header-horizontal);
    --box-paddings-content-vertical: var(--box-paddings-content-horizontal);
    --box-paddings-footer-horizontal: calc(var(--box-paddings-header-horizontal) / 2);
    --box-paddings-footer-vertical: var(--box-paddings-footer-horizontal);

    --box-feel-gold-color: var(--color-hero-ui);
    --box-feel-gold-bg: var(--color-gold);
    --box-feel-gold-border-color: var(--color-gold);
    --box-feel-gold-border-inactive-color: var(--color-gold);

    /*
        Common item
    */
    --common-item-bg: transparent;
    --common-item-border-width: 1px;
    --common-item-border-style: solid;
    --common-item-border-color: var(--color-border);
    --common-item-space: 10px;
    --common-item-header-weight: 600;
    --common-item-header-size: 15px;
    --common-item-header-font-family: var(--font-primary);
    --common-item-header-color: var(--color-main-brand-color);
    --common-item-total-weight: var(--common-item-header-weight);
    --common-item-total-size: var(--common-item-header-size);
    --common-item-total-font-family: var(--common-item-header-font-family);
    --common-item-total-color: var(--common-item-header-color);
    --common-item-body-weight: 300;
    --common-item-body-size: 14px;
    --common-item-body-font-family: var(--font-primary);
    --common-item-body-color: var(--color-low-emphisis-text);
    --common-item-disabled-opacity: 0.4;

    /*
        Checkout box
    */
    --checkout-box-over-limit-weight: 600;
    --checkout-box-over-limit-size: 15px;
    --checkout-box-over-limit-font-family: var(--font-primary);
    --checkout-box-over-limit-color: var(--color-main-brand-color);
    --checkout-box-over-limit-border-width: 1px;
    --checkout-box-over-limit-border-style: solid;
    --checkout-box-over-limit-border-color: var(--color-border);

    /*
        Call to action
    */
    --checkout-call-to-action-padding: 16px;
    --checkout-call-to-action-host-margin: 30px;
    --checkout-call-to-action-border-width: 1px;
    --checkout-call-to-action-border-style: dashed;
    --checkout-call-to-action-border-color: var(--color-8, #727272);
    --checkout-call-to-action-border-radius: 10px;

    /*
        Cart
    */
    --cart-popup-padding: calc(var(--grid-gutter-width) / 2);
    --cart-popup-bg: var(--color-hero-ui);
    --cart-popup-radius: var(--radius, 20px);

    --cart-popup-header-bg: var(--color-9);
    --cart-popup-header-radius: var(--cart-popup-radius);
    --cart-popup-header-padding: var(--cart-popup-padding);
    --cart-popup-header-buttons-space: calc(var(--cart-popup-header-padding) / 2);

    --cart-popup-footer-padding: var(--cart-popup-padding);

    --cart-popup-size: 420px;
    --cart-popup-indicator-color: var(--cart-popup-header-bg, --color-9);
    --cart-popup-indicator-color-empty: var(--color-hero-ui);
    --cart-popup-indicator-width: 40px;
    --cart-popup-indicator-height: 20px;
    --cart-popup-indicator-offset: calc(var(--cart-popup-indicator-width) * -1.25);
    --cart-popup-animation-popup-in-time: 0.3s;
    --cart-popup-animation-popup-in-timing: ease;
    --cart-popup-animation-popup-in-delay: 0.1s;
    --cart-popup-animation-popup-out-time: 0.3s;
    --cart-popup-animation-popup-out-timing: ease;
    --cart-popup-animation-popup-out-delay: 0s;
    --cart-popup-animation-slide-in-time: 0.3s;
    --cart-popup-animation-slide-in-timing: ease;
    --cart-popup-animation-slide-in-delay: 0s;
    --cart-popup-animation-slide-out-time: 0.3s;
    --cart-popup-animation-slide-out-timing: ease;
    --cart-popup-animation-slide-out-delay: 0s;

    /*
        Modals
    */
    --modal-backdrop-color: var(--color-light-grey);
    --modal-backdrop-opacity: 0.8;
    --modal-border-radius: var(--radius, 20px);
    --modal-bg-color: var(--color-hero-ui);
    --modal-bg-color-dimmed: var(--color-3-lo);
    --modal-size: 600px;
    --modal-size-xs: 380px;
    --modal-size-xsm: 420px;
    --modal-size-sm: 500px;
    --modal-size-md: 700px;
    --modal-size-lg: 810px;
    --modal-padding: calc(var(--grid-gutter-width) / 2);
    --modal-padding-header: calc(var(--grid-gutter-width));
    --modal-padding-sub-header: calc(var(--grid-gutter-width));
    --modal-header-border: var(--color-border);
    --modal-sub-header-border: var(--color-border);
    --modal-color: var(--color-low-emphisis-text);
    --modal-font-weight: 300;
    --modal-font-family: var(--font-primary);
    --modal-font-size: 14px;
    --modal-actions-height: 70px;
    --modal-scroll-y-right: calc(var(--modal-padding) / 2);
    --modal-scroll-y-top: var(--modal-padding);
    --modal-scroll-y-bottom: var(--modal-padding);
    --modal-scroll-y-size: 6px;
    --modal-scroll-color: var(--color-low-emphisis-text);
    --modal-animation-popup-in-time: 0.3s;
    --modal-animation-popup-in-timing: ease;
    --modal-animation-popup-in-delay: 0.1s;
    --modal-animation-popup-out-time: 0.3s;
    --modal-animation-popup-out-timing: ease;
    --modal-animation-popup-out-delay: 0s;
    --modal-animation-slide-in-time: 0.3s;
    --modal-animation-slide-in-timing: ease;
    --modal-animation-slide-in-delay: 0s;
    --modal-animation-slide-out-time: 0.3s;
    --modal-animation-slide-out-timing: ease;
    --modal-animation-slide-out-delay: 0s;
    --modal-animation-backdrop-in-time: 0.2s;
    --modal-animation-backdrop-in-timing: ease;
    --modal-animation-backdrop-in-delay: 0s;
    --modal-animation-backdrop-out-time: 0.2s;
    --modal-animation-backdrop-out-timing: ease;
    --modal-animation-backdrop-out-delay: 0s;

    --modal-brand-accent-bg-color: var(--color-brand-accent);
    --modal-brand-accent-color: var(--color-hero-ui);

    --modal-size-location-open-hours: 416px;
    /*
        Wizzard
    */
    --wizzard-grid: var(--modal-padding, 20px);

    --wizzard-page-border-color: var(--color-border);
    --wizzard-page-border-style: solid;
    --wizzard-page-border-width: 1px;
    --wizzard-page-grid: calc(var(--modal-padding) * 2);

    --wizzard-header-grid: var(--wizzard-page-grid);

    --wizzard-subnav-grid: var(--wizzard-page-grid);
    --wizzard-subnav-height: 50px;
    --wizzard-subnav-font-family: var(--font-primary);
    --wizzard-subnav-font-size: 14px;
    --wizzard-subnav-font-weight: 400;
    --wizzard-subnav-font-weight-active: 600;
    --wizzard-subnav-color: var(--color-main-brand-color);
    --wizzard-subnav-color-active: var(--color-main-brand-color);
    --wizzard-subnav-indicator-height: var(--subnav-indicator-height, 3px);
    --wizzard-subnav-indicator-color: var(--subnav-indicator-color, --color-brand-accent);

    --wizzard-item-bg: transparent;
    --wizzard-item-bg-active: var(--color-hero-ui);
    --wizzard-item-border-width: 1px;
    --wizzard-item-border-style: dashed;
    --wizzard-item-border-style-active: solid;
    --wizzard-item-border-color: var(--color-8);
    --wizzard-item-border-color-active: var(--color-success);
    --wizzard-item-radius: 30px;
    --wizzard-item-padding: 10px;
    --wizzard-item-thumb-fallback-default-bg: var(--color-5);
    --wizzard-item-thumb-fallback-color: var(--color-hero-ui);
    --wizzard-item-thumb-fallback-font-weight: 500;
    --wizzard-item-thumb-fallback-font-size: 20px;
    --wizzard-item-extra-price-font-size: 12px;
    --wizzard-item-extra-price-font-weight: 400;
    --wizzard-item-extra-price-color: var(--color-main-brand-color);

    /* Mess due to designs */
    --wizard-items-grid: 12px;
    --wizzard-item-title-size: 33px;
    --wizzard-item-title-font-size: 14px;
    --wizzard-item-title-font-weight: 300;
    --wizzard-item-title-color: var(--color-low-emphisis-text);
    --wizzard-item-disabled-opacity: 0.5;

    --wizzard-item-hint-font-size: 14px;
    --wizzard-item-hint-size: var(--size, 36px);
    --wizzard-item-hint-label-font-weight: 500;
    --wizzard-item-hint-label-color: var(--color-main-brand-color);
    --wizzard-item-hint-value-font-weight: 300;
    --wizzard-item-hint-value-color: var(--color-low-emphisis-text);

    --wizzard-hint-font-family: var(--font-primary);
    --wizzard-hint-font-size: 13px;
    --wizzard-hint-font-weight: 400;
    --wizzard-hint-color: var(--color-low-emphisis-text);
    --wizzard-hint-color-error: var(--color-danger);
    --wizzard-hint-label-font-weight: 400;
    --wizzard-hint-label-error-font-weight: 400;
    --wizzard-hint-label-color: var(--color-low-emphisis-text);
    --wizzard-hint-label-error-color: var(--wizzard-hint-color-error);
    --wizzard-hint-value-font-weight: 400;
    --wizzard-hint-value-error-font-weight: 400;
    --wizzard-hint-value-color: var(--color-low-emphisis-text);
    --wizzard-hint-value-error-color: var(--wizzard-hint-color-error);
    --wizzard-hint-sep-font-weight: 400;
    --wizzard-hint-sep-color: var(--color-low-emphisis-text);

    --wizzard-error-bg: var(--color-danger);
    --wizzard-error-color: var(--color-hero-ui);
    --wizzard-error-font-size: 11px;
    --wizzard-error-font-weight: 400;
    --wizzard-error-font-family: var(--font-primary);
    --wizzard-error-padding: 6px;

    /*
        Hero background component
    */
    --hero-background-bg-color: var(--color-main-brand-color);

    /*
        Bg gradient
    */
    --bg-gradient-height: 153px;
    --bg-gradient-color-top: rgba(0, 0, 0, 0.9);
    --bg-gradient-color-bottom: rgba(0, 0, 0, 0);

    /*
        Bg overlay
    */
    --bg-overlay-color: #f7d1d8;
    --bg-overlay-opacity: 0.6;
    --bg-overlay-angle: 20deg;

    /*
        Nav bar
    */
    --nav-bar-height: 75px;
    --nav-bar-height-mobile: 60px;
    --nav-bar-bg-color: var(--body-bg-color);
    --nav-bar-border-width: 1px;
    --nav-bar-border-color: var(--color-hero-ui);
    --nav-bar-border-opacity: 0.25;
    --nav-bar-logo-width: 103px;
    --nav-bar-logo-height: 32px;

    /*
        Main draw
    */
    --main-draw-min-top-offset-height: var(--nav-bar-height);
    --main-draw-bg-color: var(--color-3-lo);

    /*
        Filters draw
    */
    --filters-draw-bg-color: var(--color-hero-ui);
    --filters-draw-height: var(--nav-bar-height, 75px);
    --filters-draw-height-mobile: 55px;
    --filters-draw-border-radius: calc(var(--filters-draw-height) / 3);

    /*
        Sub nav
    */
    --subnav-height: var(--filters-draw-height, 75px);
    --subnav-height-mobile: var(--filters-draw-height-mobile, 55px);
    --subnav-label-color: var(--color-main-brand-color);
    --subnav-label-font-size: 14px;
    --subnav-label-font-weight: 600;
    --subnav-label-font-family: var(--font-primary);
    --subnav-item-font-size: 14px;
    --subnav-item-font-weight: 400;
    --subnav-item-color: var(--color-main-brand-color);
    --subnav-item-more-color: var(--color-brand-accent);
    --subnav-item-font-weight-active: 600;
    --subnav-item-color-active: var(--color-main-brand-color);
    --subnav-items-bg-color: var(--color-hero-ui);
    --subnav-indicator-height: 3px;
    --subnav-indicator-color: var(--color-brand-accent);

    /*
        Pickup
    */
    --pickup-filter-height: var(--filters-draw-height, 75px);
    --pickup-filter-height-mobile: var(--filters-draw-height-mobile, 55px);
    --pickup-filter-label-color: var(--color-brand-accent);
    --pickup-filter-label-color-hover: var(--color-brand-accent-highlight);
    --pickup-filter-label-weight: 700;
    --pickup-filter-label-font-size: 14px;
    --pickup-filter-label-font-family: var(--font-primary);
    --pickup-filter-btn-border-color: var(--color-brand-accent);
    --pickup-filter-btn-border-width: 1px;
    --pickup-filter-btn-border-style: dashed;
    --pickup-filter-btn-color: var(--color-main-brand-color);
    --pickup-filter-btn-color-hover: var(--color-main-brand-color);
    --pickup-filter-btn-weight: 400;
    --pickup-filter-btn-font-size: 14px;
    --pickup-filter-btn-font-family: var(--font-primary);
    --pickup-filter-separator-color: var(--color-brand-accent);
    --pickup-filter-separator-weight: 700;
    --pickup-filter-separator-font-size: var(--pickup-filter-btn-font-size, 14px);
    --pickup-filter-separator-font-family: var(--font-primary);

    --pickup-hero-height: 40px;
    --pickup-hero-btn-border-color: var(--color-brand-accent);
    --pickup-hero-btn-border-width: 2px;
    --pickup-hero-btn-border-style: dotted;
    --pickup-hero-btn-color: var(--color-hero-ui);
    --pickup-hero-btn-color-hover: var(--color-hero-ui);
    --pickup-hero-btn-weight: 700;
    --pickup-hero-btn-font-size: 36px;
    --pickup-hero-btn-font-family: var(--font-primary);
    --pickup-hero-btn-opacity-inactive: 0.28;
    --pickup-hero-separator-color: var(--color-brand-accent);
    --pickup-hero-separator-weight: 400;
    --pickup-hero-separator-font-size: var(--pickup-hero-btn-font-size, 36px);
    --pickup-hero-separator-font-family: var(--font-primary);

    /*
        Search
    */
    --search-filter-height: var(--filters-draw-height, 75px);
    --search-filter-height-mobile: var(--filters-draw-height-mobile, 55px);
    --search-filter-font-family: var(--font-primary);
    --search-filter-font-size: 18px;
    --search-filter-font-weight: 400;
    --search-filter-color: var(--color-main-brand-color);
    --search-filter-icon-color: var(--color-brand-accent);
    --search-filter-icon-size: 22px;
    --search-filter-placeholder-color: var(--color-main-brand-color);
    --search-filter-placeholder-font-weight: 400;

    --search-hero-height: 60px;
    --search-hero-border-color: var(--color-brand-accent);
    --search-hero-border-width: 2px;
    --search-hero-font-family: var(--font-primary);
    --search-hero-font-size: 36px;
    --search-hero-font-weight: 700;
    --search-hero-color: var(--color-hero-ui);
    --search-hero-icon-color: var(--color-hero-ui);
    --search-hero-icon-size: 28px;
    --search-hero-placeholder-color: var(--color-hero-ui);
    --search-hero-placeholder-font-weight: 700;

    /*
        Buttons
    */
    --btn-font: var(--font-primary);
    --btn-font-weight: 500;
    --btn-size: var(--size, 36px);
    --btn-size-xlg: var(--size-xlg, 46px);
    --btn-size-lg: var(--size-lg, 40px);
    --btn-size-md: var(--size-md, 30px);
    --btn-size-sm: var(--size-sm, 26px);
    --btn-size-xs: var(--size-xs, 18px);
    --btn-size-xxs: var(--size-xxs, 16px);

    --btn-primary-color: var(--color-main-brand-color);
    --btn-primary-color-hover: var(--color-main-brand-color);
    --btn-primary-bg: var(--color-brand-accent);
    --btn-primary-bg-hover: var(--color-brand-accent-highlight);
    --btn-primary-bg-loading-success: var(--color-success);
    --btn-primary-bg-loading-error: var(--color-error);
    --btn-primary-border-color: var(--color-brand-accent);
    --btn-primary-border-color-hover: var(--color-brand-accent-highlight);
    --btn-primary-border-loading-success: var(--color-success);
    --btn-primary-border-loading-error: var(--color-error);
    --btn-primary-border-width: 0;
    --btn-primary-opacity-disabled: 0.25;

    --btn-secondary-color: var(--color-main-brand-color);
    --btn-secondary-color-hover: var(--color-hero-ui);
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--color-brand-accent-highlight);
    --btn-secondary-bg-loading-success: transparent;
    --btn-secondary-bg-loading-error: transparent;
    --btn-secondary-border-color: var(--color-brand-accent);
    --btn-secondary-border-color-hover: var(--color-brand-accent-highlight);
    --btn-secondary-border-loading-success: var(--color-success);
    --btn-secondary-border-loading-error: var(--color-error);
    --btn-secondary-border-width: 2px;
    --btn-secondary-opacity-disabled: 0.25;

    --btn-secondary-color-inverted: var(--color-hero-ui);
    --btn-secondary-color-hover-inverted: var(--color-main-brand-color);
    --btn-secondary-bg-inverted: transparent;
    --btn-secondary-bg-hover-inverted: var(--color-hero-ui);
    --btn-secondary-bg-loading-success-inverted: transparent;
    --btn-secondary-bg-loading-error-inverted: transparent;
    --btn-secondary-border-color-inverted: var(--color-hero-ui);
    --btn-secondary-border-color-hover-inverted: var(--color-hero-ui);
    --btn-secondary-border-loading-success-inverted: var(--color-hero-ui);
    --btn-secondary-border-loading-error-inverted: var(--color-hero-ui);

    --btn-plain-color: var(--color-main-brand-color);
    --btn-plain-color-hover: var(--color-brand-accent-highlight);
    --btn-plain-bg: transparent;
    --btn-plain-bg-hover: transparent;
    --btn-plain-bg-loading-success: transparent;
    --btn-plain-bg-loading-error: transparent;
    --btn-plain-border-color: transparent;
    --btn-plain-border-color-hover: transparent;
    --btn-plain-border-loading-success: transparent;
    --btn-plain-border-loading-error: transparent;
    --btn-plain-border-width: 0px;
    --btn-plain-opacity-disabled: 0.25;

    --btn-plain-color-inverted: var(--color-hero-ui);
    --btn-plain-color-hover-inverted: var(--color-brand-accent-highlight);
    --btn-plain-bg-inverted: transparent;
    --btn-plain-bg-hover-inverted: transparent;
    --btn-plain-bg-loading-success-inverted: transparent;
    --btn-plain-bg-loading-error-inverted: transparent;
    --btn-plain-border-color-inverted: transparent;
    --btn-plain-border-color-hover-inverted: transparent;
    --btn-plain-border-loading-success-inverted: transparent;
    --btn-plain-border-loading-error-inverted: transparent;

    /*
        Circle btns
    */
    --circle-btn-font: var(--font-primary);
    --circle-btn-font-size: 14px;
    --circle-btn-size: var(--size, 36px);
    --circle-btn-size-lg: var(--size-xlg, 46px);
    --circle-btn-size-lg: var(--size-lg, 40px);
    --circle-btn-size-md: var(--size-md, 30px);
    --circle-btn-size-sm: var(--size-sm, 26px);
    --circle-btn-size-xs: var(--size-xs, 18px);
    --circle-btn-size-xxs: var(--size-xxs, 16px);
    --circle-btn-opacity-disabled: 0.25;
    --circle-btn-border-width: 0px;
    --circle-btn-border-style: none;
    --circle-btn-border-color: transparent;
    --circle-btn-border-color-disabled: transparent;

    --circle-btn-dark-color: var(--color-hero-ui);
    --circle-btn-dark-color-xs: var(--color-hero-ui);
    --circle-btn-dark-color-xs-hover: var(--color-hero-ui);
    --circle-btn-dark-color-hover: var(--color-hero-ui);
    --circle-btn-dark-bg: var(--color-main-brand-color);
    --circle-btn-dark-bg-xs: var(--color-low-emphisis-text);
    --circle-btn-dark-bg-xs-hover: var(--color-low-emphisis-text);
    --circle-btn-dark-bg-hover: var(--color-low-emphisis-text);
    --circle-btn-dark-border-width: 0px;
    --circle-btn-dark-border-style: none;
    --circle-btn-dark-border-color: transparent;
    --circle-btn-dark-border-color-hover: transparent;
    --circle-btn-dark-border-color-disabled: transparent;

    --circle-btn-light-color: var(--color-main-brand-color);
    --circle-btn-light-color-xs: var(--color-main-brand-color);
    --circle-btn-light-color-xs-hover: var(--color-main-brand-color);
    --circle-btn-light-color-hover: var(--color-main-brand-color);
    --circle-btn-light-bg: var(--color-hero-ui);
    --circle-btn-light-bg-xs: var(--color-hero-ui);
    --circle-btn-light-bg-xs-hover: var(--color-hero-ui);
    --circle-btn-light-bg-hover: var(--color-hero-ui);
    --circle-btn-light-border-width: 0px;
    --circle-btn-light-border-style: none;
    --circle-btn-light-border-color: transparent;
    --circle-btn-light-border-color-hover: transparent;
    --circle-btn-light-border-color-disabled: transparent;

    --circle-btn-light-accent-color: var(--color-brand-accent);
    --circle-btn-light-accent-color-xs: var(--color-brand-accent);
    --circle-btn-light-accent-color-xs-hover: var(--color-brand-accent-highlight);
    --circle-btn-light-accent-color-hover: var(--color-brand-accent-highlight);
    --circle-btn-light-accent-bg: var(--color-hero-ui);
    --circle-btn-light-accent-bg-xs: var(--color-hero-ui);
    --circle-btn-light-accent-bg-xs-hover: var(--color-hero-ui);
    --circle-btn-light-accent-bg-hover: var(--color-hero-ui);
    --circle-btn-light-accent-border-width: 0px;
    --circle-btn-light-accent-border-style: none;
    --circle-btn-light-accent-border-color: transparent;
    --circle-btn-light-accent-border-color-hover: transparent;
    --circle-btn-light-accent-border-color-disabled: transparent;

    --circle-btn-transparent-color: var(--color-brand-accent);
    --circle-btn-transparent-color-xs: var(--color-brand-accent);
    --circle-btn-transparent-color-xs-hover: var(--color-brand-accent-highlight);
    --circle-btn-transparent-color-hover: var(--color-brand-accent-highlight);
    --circle-btn-transparent-bg: transparent;
    --circle-btn-transparent-bg-xs: transparent;
    --circle-btn-transparent-bg-xs-hover: transparent;
    --circle-btn-transparent-bg-hover: transparent;
    --circle-btn-transparent-border-width: 0px;
    --circle-btn-transparent-border-style: none;
    --circle-btn-transparent-border-color: transparent;
    --circle-btn-transparent-border-color-hover: transparent;
    --circle-btn-transparent-border-color-disabled: transparent;

    --circle-btn-brand-accent-color: var(--color-hero-ui);
    --circle-btn-brand-accent-color-xs: var(--color-hero-ui);
    --circle-btn-brand-accent-color-xs-hover: var(--color-hero-ui);
    --circle-btn-brand-accent-color-hover: var(--color-hero-ui);
    --circle-btn-brand-accent-bg: var(--color-brand-accent);
    --circle-btn-brand-accent-bg-xs: var(--color-brand-accent);
    --circle-btn-brand-accent-bg-xs-hover: var(--color-brand-accent-highlight);
    --circle-btn-brand-accent-bg-hover: var(--color-brand-accent-highlight);
    --circle-btn-brand-accent-border-width: 0px;
    --circle-btn-brand-accent-border-style: none;
    --circle-btn-brand-accent-border-color: transparent;
    --circle-btn-brand-accent-border-color-hover: transparent;
    --circle-btn-brand-accent-border-color-disabled: transparent;

    --circle-btn-positive-color: var(--color-success);
    --circle-btn-positive-color-xs: var(--color-success);
    --circle-btn-positive-color-xs-hover: var(--color-hero-ui);
    --circle-btn-positive-color-hover: var(--color-hero-ui);
    --circle-btn-positive-bg: transparent;
    --circle-btn-positive-bg-xs: transparent;
    --circle-btn-positive-bg-xs-hover: var(--color-success);
    --circle-btn-positive-bg-hover: var(--color-success);
    --circle-btn-positive-border-width: 0px;
    --circle-btn-positive-border-style: none;
    --circle-btn-positive-border-color: transparent;
    --circle-btn-positive-border-color-hover: transparent;
    --circle-btn-positive-border-color-disabled: transparent;

    --circle-btn-positive-secondary-color: var(--color-success);
    --circle-btn-positive-secondary-color-xs: var(--color-success);
    --circle-btn-positive-secondary-color-xs-hover: var(--color-hero-ui);
    --circle-btn-positive-secondary-color-hover: var(--color-hero-ui);
    --circle-btn-positive-secondary-bg: var(--color-success-dimmed);
    --circle-btn-positive-secondary-bg-xs: var(--color-success-dimmed);
    --circle-btn-positive-secondary-bg-xs-hover: var(--color-success);
    --circle-btn-positive-secondary-bg-hover: var(--color-success);
    --circle-btn-positive-secondary-border-width: 0px;
    --circle-btn-positive-secondary-border-style: none;
    --circle-btn-positive-secondary-border-color: transparent;
    --circle-btn-positive-secondary-border-color-hover: transparent;
    --circle-btn-positive-secondary-border-color-disabled: transparent;

    --circle-btn-positive-tiertary-color: var(--color-success);
    --circle-btn-positive-tiertary-color-xs: var(--color-success);
    --circle-btn-positive-tiertary-color-xs-hover: var(--color-hero-ui);
    --circle-btn-positive-tiertary-color-hover: var(--color-hero-ui);
    --circle-btn-positive-tiertary-bg: var(--color-hero-ui);
    --circle-btn-positive-tiertary-bg-xs: var(--color-hero-ui);
    --circle-btn-positive-tiertary-bg-xs-hover: var(--color-success);
    --circle-btn-positive-tiertary-bg-hover: var(--color-success);
    --circle-btn-positive-tiertary-border-width: 0px;
    --circle-btn-positive-tiertary-border-style: none;
    --circle-btn-positive-tiertary-border-color: transparent;
    --circle-btn-positive-tiertary-border-color-hover: transparent;
    --circle-btn-positive-tiertary-border-color-disabled: transparent;

    --circle-btn-positive-outlined-color: var(--color-success);
    --circle-btn-positive-outlined-color-xs: var(--color-success);
    --circle-btn-positive-outlined-color-xs-hover: var(--color-hero-ui);
    --circle-btn-positive-outlined-color-hover: var(--color-hero-ui);
    --circle-btn-positive-outlined-bg: transparent;
    --circle-btn-positive-outlined-bg-xs: transparent;
    --circle-btn-positive-outlined-bg-xs-hover: var(--color-success);
    --circle-btn-positive-outlined-bg-hover: var(--color-success);
    --circle-btn-positive-outlined-border-width: 1px;
    --circle-btn-positive-outlined-border-style: solid;
    --circle-btn-positive-outlined-border-color: var(--color-success);
    --circle-btn-positive-outlined-border-color-hover: var(--color-success);
    --circle-btn-positive-outlined-border-color-disabled: var(--color-success);

    --circle-btn-positive-full-color: var(--color-hero-ui);
    --circle-btn-positive-full-color-xs: var(--color-hero-ui);
    --circle-btn-positive-full-color-xs-hover: var(--color-hero-ui);
    --circle-btn-positive-full-color-hover: var(--color-hero-ui);
    --circle-btn-positive-full-bg: var(--color-success);
    --circle-btn-positive-full-bg-xs: var(--color-success);
    --circle-btn-positive-full-bg-xs-hover: var(--color-success);
    --circle-btn-positive-full-bg-hover: var(--color-success);
    --circle-btn-positive-full-border-width: 1px;
    --circle-btn-positive-full-border-style: solid;
    --circle-btn-positive-full-border-color: var(--color-success);
    --circle-btn-positive-full-border-color-hover: var(--color-success);
    --circle-btn-positive-full-border-color-disabled: var(--color-success);

    --circle-btn-negative-color: var(--color-danger);
    --circle-btn-negative-color-xs: var(--color-danger);
    --circle-btn-negative-color-xs-hover: var(--color-hero-ui);
    --circle-btn-negative-color-hover: var(--color-hero-ui);
    --circle-btn-negative-bg: var(--color-hero-ui);
    --circle-btn-negative-bg-xs: var(--color-hero-ui);
    --circle-btn-negative-bg-xs-hover: var(--color-danger);
    --circle-btn-negative-bg-hover: var(--color-danger);
    --circle-btn-negative-border-width: 0px;
    --circle-btn-negative-border-style: none;
    --circle-btn-negative-border-color: transparent;
    --circle-btn-negative-border-color-hover: transparent;
    --circle-btn-negative-border-color-disabled: transparent;

    --circle-btn-negative-secondary-color: var(--color-danger);
    --circle-btn-negative-secondary-color-xs: var(--color-danger);
    --circle-btn-negative-secondary-color-xs-hover: var(--color-hero-ui);
    --circle-btn-negative-secondary-color-hover: var(--color-hero-ui);
    --circle-btn-negative-secondary-bg: var(--color-danger-dimmed);
    --circle-btn-negative-secondary-bg-xs: var(--color-danger-dimmed);
    --circle-btn-negative-secondary-bg-xs-hover: var(--color-danger);
    --circle-btn-negative-secondary-bg-hover: var(--color-danger);
    --circle-btn-negative-secondary-border-width: 0px;
    --circle-btn-negative-secondary-border-style: none;
    --circle-btn-negative-secondary-border-color: transparent;
    --circle-btn-negative-secondary-border-color-hover: transparent;
    --circle-btn-negative-secondary-border-color-disabled: transparent;

    --circle-btn-negative-tiertary-color: var(--color-danger);
    --circle-btn-negative-tiertary-color-xs: var(--color-danger);
    --circle-btn-negative-tiertary-color-xs-hover: var(--color-hero-ui);
    --circle-btn-negative-tiertary-color-hover: var(--color-hero-ui);
    --circle-btn-negative-tiertary-bg: var(--color-hero-ui);
    --circle-btn-negative-tiertary-bg-xs: var(--color-hero-ui);
    --circle-btn-negative-tiertary-bg-xs-hover: var(--color-danger);
    --circle-btn-negative-tiertary-bg-hover: var(--color-danger);
    --circle-btn-negative-tiertary-border-width: 0px;
    --circle-btn-negative-tiertary-border-style: none;
    --circle-btn-negative-tiertary-border-color: transparent;
    --circle-btn-negative-tiertary-border-color-hover: transparent;
    --circle-btn-negative-tiertary-border-color-disabled: transparent;

    --circle-btn-negative-outlined-color: var(--color-danger);
    --circle-btn-negative-outlined-color-xs: var(--color-danger);
    --circle-btn-negative-outlined-color-xs-hover: var(--color-hero-ui);
    --circle-btn-negative-outlined-color-hover: var(--color-hero-ui);
    --circle-btn-negative-outlined-bg: var(--color-hero-ui);
    --circle-btn-negative-outlined-bg-xs: var(--color-hero-ui);
    --circle-btn-negative-outlined-bg-xs-hover: var(--color-danger);
    --circle-btn-negative-outlined-bg-hover: var(--color-danger);
    --circle-btn-negative-outlined-border-width: 1px;
    --circle-btn-negative-outlined-border-style: solid;
    --circle-btn-negative-outlined-border-color: var(--color-danger);
    --circle-btn-negative-outlined-border-color-hover: var(--color-danger);
    --circle-btn-negative-outlined-border-color-disabled: var(--color-danger);

    --circle-btn-negative-full-color: var(--color-hero-ui);
    --circle-btn-negative-full-color-xs: var(--color-hero-ui);
    --circle-btn-negative-full-color-xs-hover: var(--color-hero-ui);
    --circle-btn-negative-full-color-hover: var(--color-hero-ui);
    --circle-btn-negative-full-bg: var(--color-danger);
    --circle-btn-negative-full-bg-xs: var(--color-danger);
    --circle-btn-negative-full-bg-xs-hover: var(--color-danger);
    --circle-btn-negative-full-bg-hover: var(--color-danger);
    --circle-btn-negative-full-border-width: 1px;
    --circle-btn-negative-full-border-style: solid;
    --circle-btn-negative-full-border-color: var(--color-danger);
    --circle-btn-negative-full-border-color-hover: var(--color-danger);
    --circle-btn-negative-full-border-color-disabled: var(--color-danger);

    /*
        Icon buttons
    */
    --icon-btn-color: var(--color-brand-accent);
    --icon-btn-color-hover: var(--color-brand-accent-highlight);
    --icon-btn-color-inverted: var(--color-hero-ui);
    --icon-btn-color-inverted-hover: var(--color-hero-ui);
    --icon-btn-label-font-size: 14px;
    --icon-btn-label-font-weight: 700;
    --icon-btn-label-color: var(--color-main-brand-color);
    --icon-btn-label-color-inverted: var(--color-hero-ui);
    --icon-btn-label-color-emphasis: var(--color-brand-accent);
    --icon-btn-size: var(--size, 36px);
    --icon-btn-size-xlg: var(--size-xlg, 46px);
    --icon-btn-size-lg: var(--size-lg, 40px);
    --icon-btn-size-md: var(--size-md, 30px);
    --icon-btn-size-sm: var(--size-sm, 26px);
    --icon-btn-size-xs: var(--size-xs, 18px);
    --icon-btn-size-xxs: var(--size-xxs, 16px);
    --icon-btn-opacity-disabled: 0.25;

    /*
        Dashed button
    */
    --dashed-btn-color: var(--color-main-brand-color);
    --dashed-btn-background: transparent;
    --dashed-btn-background-hover: rgba(0, 0, 0, 0.01);
    --dashed-btn-font-size: 14px;
    --dashed-btn-font-family: var(--font-primary);
    --dashed-btn-font-weight: 400;
    --dashed-btn-padding: calc(var(--grid-gutter-width) / 2);
    --dashed-btn-border-width: 1px;
    --dashed-btn-border-style: dashed;
    --dashed-btn-border-color: var(--color-4);
    --dashed-btn-border-color-hover: var(--color-8);
    --dashed-btn-border-radius: calc(var(--grid-gutter-width) / 4);
    --dashed-btn-icon-success: var(--color-success);
    --dashed-btn-icon-danger: var(--color-danger);
    --dashed-btn-icon-warning: var(--color-warning);
    --dashed-btn-icon: var(--color-main-brand-color);

    /*
        Clear cart btn
    */
    --clear-cart-btn-color: var(--color-main-brand-color);
    --clear-cart-btn-font-size: 14px;
    --clear-cart-btn-font-family: var(--font-primary);
    --clear-cart-btn-font-weight: 400;
    --clear-cart-btn-icon-color: var(--color-danger);

    /*
        Dropdown
    */
    --dropdown-option-color: var(--color-main-brand-color);
    --dropdown-option-color-hover: var(--color-main-brand-color);
    --dropdown-option-color-selected: var(--color-main-brand-color);
    --dropdown-option-bg-color: transparent;
    --dropdown-option-bg-color-hover: var(--color-brand-accent-highlight);
    --dropdown-option-bg-color-selected: var(--color-brand-accent-highlight);
    --dropdown-option-font: var(--font-primary);
    --dropdown-option-font-size: 16px;
    --dropdown-option-font-weight: 400;
    --dropdown-option-border-width: 1px;
    --dropdown-option-border-color: var(--color-hero-ui);
    --dropdown-option-border-opacity: 0.25;
    --dropdown-box-bg-color: var(--color-brand-accent);
    --dropdown-rail-color: var(--color-hero-ui);
    --dropdown-rail-opacity: 0.25;

    --dropdown-light-box-bg-color: var(--color-5);
    --dropdown-light-option-color: var(--color-main-brand-color);
    --dropdown-light-option-color-hover: var(--color-main-brand-color);
    --dropdown-light-option-color-selected: var(--color-main-brand-color);
    --dropdown-light-option-font-weight: 400;
    --dropdown-light-option-bg-color: transparent;
    --dropdown-light-option-bg-color-hover: var(--color-3-lo);
    --dropdown-light-option-bg-color-selected: var(--color-3-lo);
    --dropdown-light-option-border-color: var(--color-8);
    --dropdown-light-option-border-opacity: 0.25;
    --dropdown-light-option-border-width: 1px;
    --dropdown-light-rail-color: var(--color-8);
    --dropdown-light-rail-opacity: 0.5;

    --dropdown-light-2-box-bg-color: var(--color-hero-ui);
    --dropdown-light-2-option-color: var(--color-main-brand-color);
    --dropdown-light-2-option-color-hover: var(--color-main-brand-color);
    --dropdown-light-2-option-color-selected: var(--color-main-brand-color);
    --dropdown-light-2-option-font-weight: 400;
    --dropdown-light-2-option-bg-color: transparent;
    --dropdown-light-2-option-bg-color-hover: var(--color-light-hilight);
    --dropdown-light-2-option-bg-color-selected: var(--color-light-hilight);
    --dropdown-light-2-option-border-color: var(--color-8);
    --dropdown-light-2-option-border-opacity: 0.25;
    --dropdown-light-2-option-border-width: 1px;
    --dropdown-light-2-rail-color: var(--color-2-hi);
    --dropdown-light-2-rail-opacity: 0.5;

    --dropdown-wrapper-border-radius: 20px;

    /*
        Headers
    */

    --header-font-weight: 700;
    --header-font-weight-pre-content: 300;
    --header-font-weight-post-content: 300;
    --header-color: var(--color-main-brand-color);
    --header-color-inverted: var(--color-hero-ui);
    --header-color-brand-accent: var(--color-brand-accent);
    --header-color-brand-accent-inverted: var(--color-brand-accent);
    --header-color-counter: var(--color-brand-accent);
    --header-color-counter-inverted: var(--color-hero-ui);
    --header-font: var(--font-primary);
    --header-default-font-size: 14px;
    --header-h0-size: 52px;
    --header-h0-line-height: 43px;
    --header-h1-size: 36px;
    --header-h1-line-height: 43px;
    --header-h2-size: 32px;
    --header-h2-line-height: 38px;
    --header-h3-size: 24px;
    --header-h3-line-height: 28px;
    --header-h4-size: 18px;
    --header-h4-line-height: 1.3em;
    --header-h5-size: 16px;
    --header-h5-line-height: 1.3em;
    --header-h6-size: 14px;
    --header-h6-line-height: 1.3em;
    --header-space-xs: 6px;
    --header-space-sm: 12px;
    --header-space-md: 18px;
    --header-space-lg: 24px;
    --header-space-xlg: 42px;

    /*
        Badges
    */
    --badge-font: var(--font-primary);
    --badge-bg-color: var(--color-brand-accent);
    --badge-font-color: var(--color-hero-ui);
    --badge-font-size: 12px;
    --badge-font-weight: 700;
    --badge-disabled-opacity: 0.25;
    --badge-size: var(--size, 36px);
    --badge-size-xlg: var(--size-xlg, 46px);
    --badge-size-lg: var(--size-lg, 40px);
    --badge-size-sm: var(--size-sm, 26px);
    --badge-size-xs: var(--size-xs, 18px);
    --badge-size-xxs: var(--size-xxs, 16px);

    --badge-secondary-bg-color: var(--color-main-brand-color);
    --badge-secondary-font-color: var(--color-hero-ui);

    --badge-tertiary-bg-color: var(--color-success);
    --badge-tertiary-font-color: var(--color-hero-ui);

    --badge-inverted-bg-color: var(--color-hero-ui);
    --badge-inverted-font-color: var(--color-main-brand-color);

    /*
        Links
    */
    --link-color: var(--color-main-brand-color);
    --link-color-icon: var(--color-brand-accent);
    --link-color-hover: var(--color-brand-accent);
    --link-color-icon-hover: var(--link-color-icon);
    --link-color-inverted: var(--color-hero-ui);
    --link-color-icon-inverted: var(--link-color-inverted);
    --link-color-hover-inverted: var(--color-hero-ui);
    --link-color-icon-hover-inverted: var(--link-color-icon-inverted);
    --link-font: var(--font-primary);
    --link-font-size: 14px;
    --link-emphasis-weight: 700;
    --link-disable-opacity: 0.25;
    --link-label-color: var(--color-brand-accent);
    --link-underline-color: var(--color-brand-accent);
    --link-underline-color-hover: var(--color-brand-accent);
    --link-underline-color-inverted: var(--color-hero-ui);
    --link-underline-color-hover-inverted: var(--color-hero-ui);

    /*
        Powered by
    */
    --powered-by-color: var(--color-hero-ui);
    --powered-by-font: var(--font-primary);
    --powered-by-font-size: 14px;
    --powered-by-font-weight: 400;

    /*
        Loaders
    */
    --loaders-spinner-thickness: 7;
    --loaders-spinner-size: 50px;
    --loaders-spinner-color: var(--color-low-emphisis-text);
    --loaders-spinner-color-inverted: var(--color-hero-ui);
    --loaders-spinner-color-brand-accent: var(--color-brand-accent);

    --loaders-placeholder-radius: 15px;
    --loaders-placeholder-bg-color: var(--color-5, #e8e8e8);
    --loaders-placeholder-height: 30px;

    --loaders-checkmark-thickness: 14;
    --loaders-checkmark-size: var(--loaders-spinner-size, 50px);
    --loaders-checkmark-color: var(--color-success);
    --loaders-checkmark-color-inverted: var(--loaders-spinner-color-inverted, --color-hero-ui);

    --loaders-error-thickness: var(--loaders-checkmark-thickness, 14);
    --loaders-error-size: var(--loaders-checkmark-size, 50px);
    --loaders-error-color: var(--color-error);
    --loaders-error-color-inverted: var(--loaders-spinner-color-inverted, --color-hero-ui);

    --loaders-spinner-size-xxxlg: 130px;
    --loaders-spinner-size-xxlg: 90px;
    --loaders-spinner-size-xlg: var(--size-xlg, 46px);
    --loaders-spinner-size-lg: var(--size-lg, 40px);
    --loaders-spinner-size-md: var(--size-md, 30px);
    --loaders-spinner-size-sm: var(--size-sm, 26px);
    --loaders-spinner-size-xs: var(--size-xs, 18px);
    --loaders-spinner-size-xxs: var(--size-xxs, 16px);

    /*
        Tiles
    */
    --tile-location-thumb-height: 49.33%;
    --tile-location-thumb-radius: var(--loaders-placeholder-radius, 15px);
    --tile-location-description-font-size: 14px;
    --tile-location-description-color: var(--color-low-emphisis-text);
    --tile-location-description-font-weight: 300;
    --tile-location-ordering-size: 32px;
    --tile-location-ordering-radius: calc(var(--tile-location-ordering-size) / 2);
    --tile-location-ordering-color: var(--color-main-brand-color);
    --tile-location-ordering-bg-color: var(--color-hero-ui);
    --tile-location-ordering-font-size: 14px;
    --tile-location-ordering-font-weight: 400;

    --tile-product-bg-color: var(--color-hero-ui);
    --tile-product-thumb-height: 100%;
    --tile-product-thumb-radius: var(--loaders-placeholder-radius, 15px);
    --tile-product-desc-max-height: 34px;
    --tile-product-actions-bg-color: var(--color-hero-ui);
    --tile-product-actions-bg-opacity: 0.9;
    --tile-product-unavailable-opacity: 0.25;
    --tile-product-unavailable-bg-color: transparent;
    --tile-product-border-color: #f0eded;
    --tile-product-border-radius: 24px;
    --tile-product-thumb-selected-size: 50px;
    --tile-product-thumb-selected-bg: var(--color-hero-ui);
    --tile-product-thumb-selected-bg-opacity: 0.8;
    --tile-product-thumb-selected-color: var(--color-success);
    --tile-product-desc-font-size: 14px;
    --tile-product-desc-color: var(--color-low-emphisis-text);
    --tile-product-desc-font-weight: 300;
    --tile-product-desc-font-family: var(--font-primary);

    --tile-history-order-thumb-height: 100%;
    --tile-history-order-thumb-radius: var(--loaders-placeholder-radius, 15px);
    --tile-history-order-desc-max-height: 34px;
    --tile-history-order-thumb-selected-size: 50px;
    --tile-history-order-thumb-selected-bg: var(--color-hero-ui);
    --tile-history-order-thumb-selected-bg-opacity: 0.8;
    --tile-history-order-thumb-selected-color: var(--color-success);
    --tile-history-order-desc-font-size: 14px;
    --tile-history-order-desc-color: var(--color-low-emphisis-text);
    --tile-history-order-desc-font-weight: 300;
    --tile-history-order-desc-font-family: var(--font-primary);

    --tile-transaction-thumb-height: 100%;
    --tile-transaction-thumb-radius: var(--loaders-placeholder-radius, 15px);
    --tile-transaction-desc-max-height: 34px;
    --tile-transaction-thumb-selected-size: 50px;
    --tile-transaction-thumb-selected-bg: var(--color-hero-ui);
    --tile-transaction-thumb-selected-bg-opacity: 0.8;
    --tile-transaction-thumb-selected-color: var(--color-success);
    --tile-transaction-desc-font-size: 14px;
    --tile-transaction-desc-color: var(--color-low-emphisis-text);
    --tile-transaction-desc-font-weight: 300;
    --tile-transaction-desc-font-family: var(--font-primary);

    --tile-loyalty-product-program-desc-font-family: var(--font-primary);
    --tile-loyalty-product-program-desc-font-fsize: 16px;
    --tile-loyalty-product-program-desc-font-weight: 300;
    --tile-loyalty-product-program-desc-color: var(--color-main-brand-color);

    --tile-loyalty-product-program-counter-font-size: 14px;
    --tile-loyalty-product-program-counter-font-weight: 400;
    --tile-loyalty-product-program-counter-color: var(--color-9);
    --tile-loyalty-points-counter-font-size: 24px;
    --tile-loyalty-points-counter-font-weight: 600;
    --tile-loyalty-points-counter-color: var(--color-1);

    --tile-reward-font-size: 14px;
    --tile-reward-color: var(--color-low-emphisis-text);
    --tile-reward-font-weight: 300;

    --tile-loyalty-product-program-gold-desc-color: var(--color-hero-ui);

    /*
        Tile for online menu page
    */
    --tile-online-menu-page-header-color-no-img: var(--color-main-brand-color);
    --tile-online-menu-page-desc-font-family: var(--font-primary);
    --tile-online-menu-page-desc-font-weight: 300;
    --tile-online-menu-page-desc-font-size: 16px;
    --tile-online-menu-page-desc-color: var(--color-low-emphisis-text);
    --tile-online-menu-page-desc-color-image: var(--color-hero-ui);
    --tile-online-menu-page-desc-color-no-img: var(--color-main-brand-color);
    --tile-online-menu-page-vertical-paddings: var(--grid-gutter-width);

    /*
        Tile for loyalty message
    */
    --tile-loyalty-message-font-family: var(--font-primary);
    --tile-loyalty-message-font-size: 16px;
    --tile-loyalty-message-font-weight: 400;
    --tile-loyalty-message-font-color: var(--color-main-brand-color);
    --tile-loyalty-message-font-color-inverted: var(--color-hero-ui);
    --tile-loyalty-message-title-font-family: var(--tile-loyalty-message-font-family);
    --tile-loyalty-message-title-font-size: var(--tile-loyalty-message-font-size);
    --tile-loyalty-message-title-font-weight: 700;
    --tile-loyalty-message-title-font-color: var(--tile-loyalty-message-font-color);
    --tile-loyalty-message-title-font-color-inverted: var(--tile-loyalty-message-font-color-inverted);

    /*
        Pickup status
    */
    --pickup-status-icon-color: var(--color-brand-accent);
    --pickup-status-icon-size: 11px;
    --pickup-status-color: var(--color-main-brand-color);
    --pickup-status-font-weight: 400;
    --pickup-status-font-size: 14px;

    /*
        Distance status
    */
    --distance-status-icon-color: var(--color-brand-accent);
    --distance-status-icon-size: 11px;
    --distance-status-color: var(--color-main-brand-color);
    --distance-status-font-weight: 400;
    --distance-status-font-size: 14px;

    /*
        Open status
    */
    --status-open: var(--color-success);
    --status-close-soon: var(--color-warning);
    --status-open-soon: var(--color-warning);
    --status-closed: var(--color-danger);
    --status-font-size: 14px;
    --status-color: var(--color-main-brand-color);
    --status-color-inverted: var(--color-hero-ui);
    --status-font-weight: 400;
    --status-icon-size: 11px;

    /*
        Stats
    */
    --stats-font-size: 14px;
    --stats-font-weight: 300;
    --stats-font-family: var(--font-primary);
    --stats-color: var(--color-main-brand-color);
    --stats-sep-color: var(--color-brand-accent);
    --stats-color-label: var(--stats-color);
    --stats-color-price: var(--stats-color);
    --stats-color-cals: var(--color-low-emphisis-text);

    /*
        Tag images
    */
    --tagimg-size: 20px;
    --tagimg-border-width: 0px;
    --tagimg-border-style: solid;
    --tagimg-border-color: transparent;
    --tagimg-border-radius: 0%;

    /*
        Emphasis text
    */
    --emphasis-text-font-family: var(--font-primary);
    --emphasis-text-color: var(--color-hero-ui);
    --emphasis-text-size: 16px;
    --emphasis-text-weight: 400;
    --emphasis-text-border-color: var(--color-brand-accent);
    --emphasis-text-border-style: dashed;
    --emphasis-text-border-width: 1px;

    /*
        Two columns
    */
    --two-columns-grid: calc(var(--grid-gutter-width) / 2);

    /*
        Quantity
    */
    --quantity-grid-gutter: 5px;
    --quantity-label-width: 60px;
    --quantity-label-padding: 0.875rem;
    --quantity-label-font-family: var(--font-primary);
    --quantity-label-font-size: 16px;
    --quantity-label-font-size-lg: 20px;
    --quantity-label-font-weight: 700;
    --quantity-label-border-color: var(--color-border);
    --quantity-label-border-radius: 10px;

    /*
        Vcard
    */
    --vcard-wizzard-grid: calc(var(--grid-gutter-width) / 2);
    --vcard-wizzard-column-left-width: 120px;
    --vcard-wizzard-column-left-width-xs: 90px;
    --vcard-wizzard-desc-font-family: var(--font-primary);
    --vcard-wizzard-desc-font-size: 14px;
    --vcard-wizzard-desc-color: var(--color-low-emphisis-text);

    --vcard-order-grid: var(--vcard-wizzard-grid);
    --vcard-order-column-left-width: 130px;
    --vcard-order-desc-font-family: var(--font-primary);
    --vcard-order-desc-font-size: 14px;
    --vcard-order-desc-color: var(--color-low-emphisis-text);

    /*
        Square image thumb
    */
    --square-img-bg-color: var(--color-light-grey);
    --square-img-icon-bg-color: #000000;
    --square-img-size: 110%;
    --square-img-icon-size: 50%;

    /*
        Open hours
    */
    --open-hours-item-padding: 14px;
    --open-hours-font: var(--font-primary);
    --open-hours-size: 14px;
    --open-hours-font-weight: 400;
    --open-hours-font-weight-active: 700;
    --open-hours-color: var(--color-main-brand-color);
    --open-hours-color-active: var(--color-brand-accent);
    --open-hours-border-style: solid;
    --open-hours-border-width: 1px;
    --open-hours-border-color: var(--color-border);

    /*
        Quick selector
    */
    --quick-selector-size: 58px;
    --quick-selector-radius: 100%;
    --quick-selector-bg: var(--color-success);
    --quick-selector-color: var(--color-hero-ui);
    --quick-selector-font: var(--font-primary);
    --quick-selector-font-size: 12px;
    --quick-selector-font-weight: 400;
    --quick-selector-label-max-height: 26px;
    --quick-selector-padding: 5px;
    --quick-selector-icon-size: 11px;

    /*
        Indicators
    */
    --indicator-radius: 100%;
    --indicator-bg: transparent;
    --indicator-border-width: 2px;
    --indicator-border-style: solid;
    --indicator-border-color: var(--color-brand-accent);
    --indicator-color: var(--color-main-brand-color);
    --indicator-font-family: var(--font-primary);
    --indicator-font-size: 20px;
    --indicator-font-weight: 400;
    --indicator-size: var(--size-xlg, 36px);
    --indicator-size-xxxlg: 130px;
    --indicator-size-font-xxxlg: 60px;
    --indicator-size-xxlg: 90px;
    --indicator-size-font-xxlg: 46px;
    --indicator-size-xlg: var(--size-xlg, 46px);
    --indicator-size-font-xlg: 26px;
    --indicator-size-lg: var(--size-lg, 40px);
    --indicator-size-font-lg: 24px;
    --indicator-size-md: var(--size-md, 30px);
    --indicator-size-font-md: 18px;
    --indicator-size-sm: var(--size-sm, 26px);
    --indicator-size-font-sm: 18px;
    --indicator-size-xs: var(--size-xs, 18px);
    --indicator-size-font-xs: 13px;
    --indicator-size-xxs: var(--size-xxs, 16px);
    --indicator-size-font-xxs: 11px;

    --indicator-color-inverted: var(--color-hero-ui);
    --indicator-bg-inverted: var(--color-brand-accent);
    --indicator-border-width-inverted: 0;
    --indicator-border-style-inverted: solid;
    --indicator-border-color-inverted: var(--color-brand-accent);

    --indicator-positive-color: var(--color-success);
    --indicator-positive-color-inverted: var(--color-hero-ui);
    --indicator-positive-bg: transparent;
    --indicator-positive-bg-inverted: transparent;
    --indicator-positive-border-width: 2px;
    --indicator-positive-border-width-inverted: 2px;
    --indicator-positive-border-style: solid;
    --indicator-positive-border-style-inverted: solid;
    --indicator-positive-border-color: var(--color-success);
    --indicator-positive-border-color-inverted: var(--color-hero-ui);

    --indicator-positive-full-color: var(--color-hero-ui);
    --indicator-positive-full-color-inverted: var(--color-success);
    --indicator-positive-full-bg: var(--color-success);
    --indicator-positive-full-bg-inverted: var(--color-hero-ui);
    --indicator-positive-full-border-width: 2px;
    --indicator-positive-full-border-width-inverted: 2px;
    --indicator-positive-full-border-style: solid;
    --indicator-positive-full-border-style-inverted: solid;
    --indicator-positive-full-border-color: var(--color-success);
    --indicator-positive-full-border-color-inverted: var(--color-hero-ui);

    --indicator-negative-color: var(--color-danger);
    --indicator-negative-color-inverted: var(--color-hero-ui);
    --indicator-negative-bg: transparent;
    --indicator-negative-bg-inverted: transparent;
    --indicator-negative-border-width: 2px;
    --indicator-negative-border-width-inverted: 2px;
    --indicator-negative-border-style: solid;
    --indicator-negative-border-style-inverted: solid;
    --indicator-negative-border-color: var(--color-danger);
    --indicator-negative-border-color-inverted: var(--color-hero-ui);

    --indicator-negative-full-color: var(--color-hero-ui);
    --indicator-negative-full-color-inverted: var(--color-hero-ui);
    --indicator-negative-full-bg: var(--color-danger);
    --indicator-negative-full-bg-inverted: var(--color-hero-ui);
    --indicator-negative-full-border-width: 2px;
    --indicator-negative-full-border-width-inverted: 2px;
    --indicator-negative-full-border-style: solid;
    --indicator-negative-full-border-style-inverted: solid;
    --indicator-negative-full-border-color: var(--color-danger);
    --indicator-negative-full-border-color-inverted: var(--color-hero-ui);

    --indicator-neutral-color: var(--color-main-brand-color);
    --indicator-neutral-color-inverted: var(--color-hero-ui);
    --indicator-neutral-bg: transparent;
    --indicator-neutral-bg-inverted: transparent;
    --indicator-neutral-border-width: 2px;
    --indicator-neutral-border-width-inverted: 2px;
    --indicator-neutral-border-style: solid;
    --indicator-neutral-border-style-inverted: solid;
    --indicator-neutral-border-color: var(--color-low-emphisis-text);
    --indicator-neutral-border-color-inverted: var(--color-hero-ui);

    --indicator-neutral-full-color: var(--color-hero-ui);
    --indicator-neutral-full-color-inverted: var(--color-hero-ui);
    --indicator-neutral-full-bg: var(--color-low-emphisis-text);
    --indicator-neutral-full-bg-inverted: var(--color-hero-ui);
    --indicator-neutral-full-border-width: 2px;
    --indicator-neutral-full-border-width-inverted: 2px;
    --indicator-neutral-full-border-style: solid;
    --indicator-neutral-full-border-style-inverted: solid;
    --indicator-neutral-full-border-color: var(--color-low-emphisis-text);
    --indicator-neutral-full-border-color-inverted: var(--color-hero-ui);

    --indicator-disabled-color: var(--color-8);
    --indicator-disabled-color-inverted: var(--color-hero-ui);
    --indicator-disabled-bg: transparent;
    --indicator-disabled-bg-inverted: transparent;
    --indicator-disabled-border-width: 2px;
    --indicator-disabled-border-width-inverted: 2px;
    --indicator-disabled-border-style: solid;
    --indicator-disabled-border-style-inverted: solid;
    --indicator-disabled-border-color: var(--color-8);
    --indicator-disabled-border-color-inverted: var(--color-hero-ui);

    --indicator-disabled-full-color: var(--color-hero-ui);
    --indicator-disabled-full-color-inverted: var(--color-hero-ui);
    --indicator-disabled-full-bg: var(--color-8);
    --indicator-disabled-full-bg-inverted: var(--color-hero-ui);
    --indicator-disabled-full-border-width: 2px;
    --indicator-disabled-full-border-width-inverted: 2px;
    --indicator-disabled-full-border-style: solid;
    --indicator-disabled-full-border-style-inverted: solid;
    --indicator-disabled-full-border-color: var(--color-8);
    --indicator-disabled-full-border-color-inverted: var(--color-hero-ui);

    --indicator-warning-color: var(--color-3);
    --indicator-warning-color-inverted: var(--color-hero-ui);
    --indicator-warning-bg: transparent;
    --indicator-warning-bg-inverted: transparent;
    --indicator-warning-border-width: 2px;
    --indicator-warning-border-width-inverted: 2px;
    --indicator-warning-border-style: solid;
    --indicator-warning-border-style-inverted: solid;
    --indicator-warning-border-color: var(--color-warning);
    --indicator-warning-border-color-inverted: var(--color-hero-ui);

    --indicator-warning-full-color: var(--color-3);
    --indicator-warning-full-color-inverted: var(--color-hero-ui);
    --indicator-warning-full-bg: var(--color-warning);
    --indicator-warning-full-bg-inverted: var(--color-hero-ui);
    --indicator-warning-full-border-width: 2px;
    --indicator-warning-full-border-width-inverted: 2px;
    --indicator-warning-full-border-style: solid;
    --indicator-warning-full-border-style-inverted: solid;
    --indicator-warning-full-border-color: var(--color-warning);
    --indicator-warning-full-border-color-inverted: var(--color-hero-ui);
    /*
        Special instructions
    */
    --special-instructions-grid: var(--wizzard-header-grid, 20px);
    --special-instructions-border-width: 1px;
    --special-instructions-border-style: dashed;
    --special-instructions-border-color: var(--color-border);
    --special-instructions-padding: var(--color-border);

    /*
        View columns
    */
    --view-columns-grid: var(--grid-gutter-width, 40px);
    --view-columns-left: 60%;
    --view-columns-right: 40%;

    /*
        Collapse section
    */
    --collapse-section-border-width: 1px;
    --collapse-section-border-style: solid;
    --collapse-section-border-color: var(--color-border);
    --collapse-section-opacity-disabled: 0.3;
    --collapse-section-description-font-family: var(--font-primary);
    --collapse-section-description-font-size: 14px;
    --collapse-section-description-font-weight: 300;
    --collapse-section-description-color: var(--color-low-emphisis-text);
    --collapse-section-content-space: 30px;
    --collapse-section-bottom-space: calc(var(--grid-gutter-width, 40px) / 2);

    /*
        Cell verify
    */
    --cell-verify-height: 90px;
    --cell-verify-width: 60px;
    --cell-verify-radius: 15px;
    --cell-verify-grid: var(--grid-gutter-width);

    --cell-verify-height-xs: 50px;
    --cell-verify-width-xs: 36px;
    --cell-verify-radius-xs: 10px;
    --cell-verify-grid-xs: cacl(var(--grid-gutter-width) / 2);

    --cell-verify-bg: transparent;

    --cell-verify-font-family: var(--font-primary);
    --cell-verify-font-size: 32px;
    --cell-verify-font-size-xs: 18px;
    --cell-verify-font-weight: 700;
    --cell-verify-color: black;

    --cell-verify-border-width: 1px;
    --cell-verify-border-style: solid;
    --cell-verify-border-color: var(--color-border);

    --cell-verify-border-width-focused: 2px;
    --cell-verify-border-style-focused: solid;
    --cell-verify-border-color-focused: black;

    --cell-verify-border-width-complete: 0px;
    --cell-verify-border-style-complete: solid;
    --cell-verify-border-color-complete: transparent;

    --cell-verify-border-width-error: 2px;
    --cell-verify-border-style-error: solid;
    --cell-verify-border-color-error: var(--color-danger);

    /*
        Member card
    */
    --member-card-vertical-paddings: 30px;
    --member-card-horizontal-paddings: 20px;
    --member-card-name-font-family: var(--font-primary);
    --member-card-name-font-weight: 400;
    --member-card-name-font-size: 21px;
    --member-card-name-color: var(--color-main-brand-color);
    --member-card-label-font-family: var(--font-primary);
    --member-card-label-font-weight: 400;
    --member-card-label-font-size: 14px;
    --member-card-label-color: var(--color-brand-accent);
    --member-card-value-font-family: var(--member-card-label-font-family);
    --member-card-value-font-weight: var(--member-card-label-font-weight);
    --member-card-value-font-size: var(--member-card-label-font-size);
    --member-card-value-color: var(--color-low-emphisis-text);

    /*
        Order type card
    */
    --order-type-card-vertical-paddings: var(--member-card-vertical-paddings);
    --order-type-card-horizontal-paddings: var(--member-card-horizontal-paddings);
    --order-type-card-name-font-family: var(--member-card-name-font-family);
    --order-type-card-name-font-weight: var(--member-card-name-font-weight);
    --order-type-card-name-font-size: var(--member-card-name-font-size);
    --order-type-card-name-color: var(--member-card-name-color);
    --order-type-card-label-font-family: var(--member-card-label-font-family);
    --order-type-card-label-font-weight: var(--member-card-label-font-weight);
    --order-type-card-label-font-size: var(--member-card-label-font-size);
    --order-type-card-label-color: var(--member-card-label-color);
    --order-type-card-value-font-family: var(--order-type-card-label-font-family);
    --order-type-card-value-font-weight: var(--order-type-card-label-font-weight);
    --order-type-card-value-font-size: var(--order-type-card-label-font-size);
    --order-type-card-value-color: var(--member-card-value-color);

    /*
        Credit card
    */
    --credit-card-vertical-paddings: 20px;
    --credit-card-horizontal-paddings: 20px;
    --credit-card-title-font-family: var(--font-primary);
    --credit-card-title-font-weight: 400;
    --credit-card-title-font-size: 14px;
    --credit-card-title-color: var(--color-main-brand-color);
    --credit-card-title-color-active: var(--color-brand-accent);
    --credit-card-exp-font-family: var(--font-primary);
    --credit-card-exp-font-weight: 400;
    --credit-card-exp-label-font-weight: 500;
    --credit-card-exp-font-size: 14px;
    --credit-card-exp-color: var(--color-main-brand-color);

    /*
        Account charge
    */
    --account-charge-vertical-paddings: var(--credit-card-vertical-paddings);
    --account-charge-horizontal-paddings: var(--credit-card-horizontal-paddings);
    --account-charge-title-font-family: var(--credit-card-title-font-family);
    --account-charge-title-font-weight: var(--credit-card-title-font-weight);
    --account-charge-title-font-size: var(--credit-card-title-font-size);
    --account-charge-title-color: var(--credit-card-title-color);
    --account-charge-title-color-active: var(--credit-card-title-color-active);
    --account-charge-funds-error-font-family: var(--credit-card-exp-font-family);
    --account-charge-funds-error-font-weight: 700;
    --account-charge-funds-error-label-font-weight: var(--credit-card-exp-label-font-weight);
    --account-charge-funds-error-font-size: var(--credit-card-exp-font-size);
    --account-charge-funds-error-color: var(--credit-card-exp-color);

    /*
        Order confirmation mark
    */
    --order-confirmation-mark-radius: 100%;
    --order-confirmation-mark-bg-positive: var(--color-success);
    --order-confirmation-mark-bg-error: var(--color-error);
    --order-confirmation-mark-border-width: 1px;
    --order-confirmation-mark-border-style: solid;
    --order-confirmation-mark-border-color: var(--order-confirmation-mark-bg-inner);
    --order-confirmation-mark-opacity-outer: 0.25;
    --order-confirmation-mark-color: var(--color-hero-ui);
    --order-confirmation-mark-font-size: 30px;
    --order-confirmation-mark-size: 300px;
    --order-confirmation-mark-size-2: 50%;
    --order-confirmation-mark-size-3: 33%;
    --hero-header-indicator-background-warning: var(--color-warning);

    /*
        Disabled text
    */
    --disabled-text-color: var(--color-4);

    /*
        Order id
    */
    --order-id-title-font-family: var(--font-primary);
    --order-id-title-font-size: 14px;
    --order-id-title-font-weight: 700;
    --order-id-number-font-family: var(--font-primary);
    --order-id-number-font-size: 24px;
    --order-id-number-font-weight: 700;

    /*
        Promo items
    */
    --promo-description-font-family: var(--font-primary);
    --promo-description-font-size: 14px;
    --promo-description-font-weight: 300;
    --promo-description-color: var(--color-low-emphisis-text);

    --promo-thumb-radius: 15px;
    --promo-thumb-row-width: 230px;
    --promo-thumb-row-height: 200px;
    --promo-thumb-column-width: 475px;
    --promo-thumb-column-height: 270px;

    /*
        Expanded section
    */
    --expanded-section-font-family: var(--font-primary);
    --expanded-section-font-size: 14px;
    --expanded-section-font-weight: 300;
    --expanded-section-space: calc(var(--grid-gutter-width, 40px) * 3);
    --expanded-section-primary-bg: var(--color-1);
    --expanded-section-primary-color: var(--color-3);
    --expanded-section-secondary-bg: var(--color-hero-ui);
    --expanded-section-secondary-color: var(--color-main-brand-color);

    /*
        X of Y counter
    */
    --x-of-counter-font-family: var(--font-primary);
    --x-of-counter-font-size: 14px;
    --x-of-counter-font-weight: 600;
    --x-of-counter-color: var(--color-brand-accent);
    --x-of-counter-total-color: var(--color-9);
    --x-of-counter-sep-color: var(--color-9);

    /*
        Icons counter
    */
    --icons-counter-icon-size: 20px;

    /*
        Circle counter
    */
    --counter-circle-color: var(--color-brand-accent);
    --counter-circle-color-bg: var(--color-5);
    --counter-circle-font-size: 14px;
    --counter-circle-font-weight: 400;

    /*
        HR Sep
    */
    --hr-sep-color: var(--color-light-grey);

    /*
        Card visualizer
    */
    --card-visualizer-bg: var(--color-brand-accent);
    --card-visualizer-label-font-family: var(--font-primary);
    --card-visualizer-label-font-size: 11px;
    --card-visualizer-label-font-weight: 500;
    --card-visualizer-label-color: var(--color-hero-ui);
    --card-visualizer-no-font-family: var(--font-primary);
    --card-visualizer-no-font-size: 31px;
    --card-visualizer-no-font-weight: 500;
    --card-visualizer-no-color: var(--color-hero-ui);

    /*
        Barcode
    */
    --barcode-max-width: 255px;
    --barcode-radius: calc(var(--grid-gutter-width, 40px) / 2);
    --barcode-font-family: var(--font-primary);
    --barcode-font-size: 14px;
    --barcode-font-weight: 400;
    --barcode-color: var(--color-hero-ui);

    /*
        Slider
    */
    --slider-dot-size: 5px;
    --slider-dot-radius: 100%;
    --slider-dot-bg-color: var(--color-light-grey);
    --slider-dot-bg-color-active: var(--color-brand-accent);

    /*
        Option tabs
    */
    --option-tabs-font-family: var(--font-primary);
    --option-tabs-font-size: 14px;
    --option-tabs-font-weight: 400;
    --option-tabs-font-weight-hover: 400;
    --option-tabs-font-weight-active: 700;
    --option-tabs-color: var(--color-main-brand-color);
    --option-tabs-color-hover: var(--color-brand-accent);
    --option-tabs-color-active: var(--color-main-brand-color);
    --option-tabs-radius: 15px;
    --option-tabs-border-width: 1px;
    --option-tabs-border-style: solid;
    --option-tabs-border-style-hover: solid;
    --option-tabs-border-style-active: solid;
    --option-tabs-border-color: var(--color-5);
    --option-tabs-border-color-hover: var(--color-5);
    --option-tabs-border-color-active: var(--color-hero-ui);
    --option-tabs-bg: transparent;
    --option-tabs-bg-hover: transparent;
    --option-tabs-bg-active: var(--color-hero-ui);

    /*
        Sep bar
    */
    --sep-bar-height: 3px;
    --sep-bar-width: 125px;
    --sep-bar-color: var(--color-brand-accent);

    /*
        Disclaimer
    */
    --disclaimer-font-family: var(--font-primary);
    --disclaimer-font-size: 14px;
    --disclaimer-font-weight: 300;
    --disclaimer-color: var(--color-8);

    /*
        Loyalty messages
    */
    --loyalty-messages-bg: var(--color-brand-accent);
    --loyalty-messages-color: var(--color-hero-ui);
    --loyalty-link-color: var(--loyalty-messages-color);
    --loyalty-link-color-hover: var(--loyalty-messages-color);

    /*
        Specific views
    */
    --view-order-confirmation-bg-color: var(--body-bg-color);

    /*
        Places suggestion
    */
    --places-icon-color: var(--color-brand-accent);
    --places-icon-size: 22px;

    --places-title-font-family: var(--font-primary);
    --places-title-font-weight: 400;
    --places-title-font-size: 16px;
    --places-title-color: var(--color-main-brand-color);

    --places-description-font-family: var(--font-primary);
    --places-description-font-weight: 400;
    --places-description-font-size: 14px;
    --places-description-color: var(--color-low-emphisis-text);

    /*
        Labels
    */
    --labels-item-font-size: 12px;
    --labels-item-font-weight: 400;
    --labels-item-font-family: var(--font-primary);
    --labels-item-color: var(--color-main-brand-color);
    --labels-item-radius: 3px;
    --labels-item-bg-color: #f1f1f1;
    --labels-item-icon-color-positive: var(--color-success);
    --labels-item-icon-color-negative: var(--color-error);
    --labels-item-img-bg-color: var(--color-brand-accent-secondary);

    /*
        Restrictions
    */
    --restrictions-bg-color: var(--color-minimum-alert);
    --restrictions-radius: var(--box-radius);
    --restrictions-font-weight: bold;
    --restrictions-font-color: var(--color-main-brand-color);
    --restrictions-font-family: var(--font-primary);
    --restrictions-font-size: 16px;
    --restrictions-counter-bg: transparent;
    --restrictions-counter-border-width: 3px;
    --restrictions-counter-border-style: solid;
    --restrictions-counter-border-color: var(--color-hero-ui);
    --restrictions-counter-font-weight: bold;
    --restrictions-counter-font-color: var(--restrictions-counter-border-color);
    --restrictions-counter-font-family: var(--font-primary);
    --restrictions-counter-font-size: 18px;
    --restrictions-counter-size: 40px;
    --restrictions-cart-bg-color: var(--color-minimum-alert);
    --restrictions-cart-radius: 10px;
    --restrictions-cart-font-weight: bold;
    --restrictions-cart-font-color: var(--color-low-emphisis-text);
    --restrictions-cart-font-family: var(--font-primary);
    --restrictions-cart-font-size: 12px;

    /*
    * Spinner for receipt email
    */
    --spinner-dark-gray: #626262;
    --spinner-light-gray: #828282;

    /*
    * Notes
    */
    --note-margins: 10px;
    --note-font-family: var(--font-primary);
    --note-font-weight: 400;
    --note-font-size: 11px;
    --note-label-color: var(--color-main-brand-color);
    --note-text-color: var(--color-low-emphisis-text);

    /*
    * Forms hint popup
    */
    --forms-hint-popup-font-family: var(--font-primary);
    --forms-hint-popup-font-weight: 400;
    --forms-hint-popup-font-size: 12px;
    --forms-hint-popup-color: var(--color-low-emphisis-text);
    --forms-hint-popup-padding: 20px;
    --forms-hint-popup-radius: 10px;
    --forms-hint-popup-bg: var(--color-hero-ui);
    --forms-hint-popup-indicator-color: var(--forms-hint-popup-bg, --color-3);
    --forms-hint-popup-indicator-width: 16px;
    --forms-hint-popup-indicator-offset: calc((var(--input-field-padding) + var(--indicator-size-sm)) / 2);

    /**
    * Path
    */
    --path-outline-color: var(--color-13);
    --path-font-color: var(--color-hero-ui);
    --path-font-weight: 700;
    --path-font-size: 18px;
    --path-common-color: var(--color-brand-accent);
    --path-success-color: var(--color-success);
    --path-error-color: var(--color-error);
    --path-disabled-color: var(--color-5);

    /**
    * Avatar
    */
    --avatar-size-xxlg: 80px;
    --avatar-size-xlg: 60px;
    --avatar-size-lg: var(--size-lg, 40px);
    --avatar-size-sm: var(--size-sm, 26px);
    --avatar-size-xs: var(--size-xs, 18px);
}