/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2021 Adobe
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*
 * - To prefix the css classes with .cif-demo use: ^([ ]*)\. $1\.cif-demo \.
 * - Also remove all body, html stylings and prefix any other element style with .cif-demo as well
 * - move the :root {} variable definitions to the top
 */
@import url(https://fonts.googleapis.com/css?family=Muli);



:root {
    --venia-anim-bounce                : cubic-bezier(0.5, 1.8, 0.9, 0.8);
    --venia-anim-in                    : cubic-bezier(0, 0, 0.2, 1);
    --venia-anim-out                   : cubic-bezier(0.4, 0, 1, 1);
    --venia-anim-standard              : cubic-bezier(0.4, 0, 0.2, 1);
    --venia-border                     : 224, 224, 224;
    --venia-error                      : 192, 18, 63;
    --venia-error-alt                  : 255, 226, 234;
    --venia-font                       : Muli, -apple-system, BlinkMacSystemFont, sans-serif;
    --venia-grey                       : 246, 246, 246;
    --venia-grey-dark                  : 209, 209, 209;
    --venia-orange                     : 241, 99, 33;
    --venia-teal                       : 0, 115, 120;
    --venia-teal-alt                   : 224, 240, 241;
    --venia-teal-dark                  : 0, 104, 108;
    --venia-teal-light                 : 212, 243, 238;
    --venia-text                       : 33, 33, 33;
    --venia-text-alt                   : 112, 112, 112;
    --venia-text-hint                  : 158, 158, 158;
    --venia-text-spot                  : 255, 99, 51;
    --venia-warning-dark               : 249, 93, 94;
    --venia-warning-light              : 254, 229, 232;
    --venia-global-anim-bounce         : cubic-bezier(0.5, 1.8, 0.9, 0.8);
    --venia-global-anim-in             : cubic-bezier(0, 0, 0.2, 1);
    --venia-global-anim-out            : cubic-bezier(0.4, 0, 1, 1);
    --venia-global-anim-standard       : cubic-bezier(0.4, 0, 0.2, 1);
    --venia-global-color-blue-100      : 194 200 255;
    --venia-global-color-blue-400      : 61 132 255;
    --venia-global-color-blue-500      : 51 109 255;
    --venia-global-color-blue-600      : 41 84 255;
    --venia-global-color-blue-700      : 31 57 255;
    --venia-global-color-blue-800      : 23 43 196;
    --venia-global-color-gray-50       : 255 255 255;
    --venia-global-color-gray-75       : 250 250 250;
    --venia-global-color-gray-100      : 244 245 245;
    --venia-global-color-gray-200      : 234 235 235;
    --venia-global-color-gray-300      : 223 225 226;
    --venia-global-color-gray-400      : 181 184 186;
    --venia-global-color-gray-500      : 149 154 157;
    --venia-global-color-gray-600      : 118 123 127;
    --venia-global-color-gray-700      : 84 93 99;
    --venia-global-color-gray-800      : 51 63 71;
    --venia-global-color-gray-900      : 23 32 38;
    --venia-global-color-gray          : var(--venia-global-color-gray-100);
    --venia-global-color-gray-dark     : var(--venia-global-color-gray-300);
    --venia-global-color-gray-darker   : var(--venia-global-color-gray-600);
    --venia-global-color-green-400     : 51 171 132;
    --venia-global-color-green-500     : 45 157 120;
    --venia-global-color-green-600     : 38 142 108;
    --venia-global-color-green-700     : 18 128 92;
    --venia-global-color-orange        : 241 99 33;
    --venia-global-color-red-400       : 236 91 98;
    --venia-global-color-red-500       : 227 72 80;
    --venia-global-color-red-600       : 215 55 63;
    --venia-global-color-red-700       : 201 37 45;
    --venia-global-color-red-800       : 161 30 36;
    --venia-global-color-teal          : var(--venia-global-color-blue-400);
    --venia-global-color-teal-dark     : var(--venia-global-color-blue-600);
    --venia-global-color-teal-light    : var(--venia-global-color-gray-100);
    --venia-global-color-background    : var(--venia-global-color-gray-50);
    --venia-global-color-border        : var(--venia-global-color-gray-300);
    --venia-global-color-error         : var(--venia-global-color-red-700);
    --venia-global-color-text          : var(--venia-global-color-gray-900);
    --venia-global-color-text-alt      : var(--venia-global-color-gray-darker);
    --venia-global-color-text-hint     : var(--venia-global-color-gray-500);
    --venia-global-color-warning-dark  : var(--venia-global-color-red-700);
    --venia-global-color-warning-light : var(--venia-global-color-gray-100);
    --venia-global-fontFamily-sansSerif: "Muli", sans-serif;
    --venia-global-fontFamily-serif    : "Source Serif Pro", serif;
    --venia-global-fontSize-50         : 0.6875rem;
    --venia-global-fontSize-75         : 0.75rem;
    --venia-global-fontSize-100        : 0.875rem;
    --venia-global-fontSize-200        : 1rem;
    --venia-global-fontSize-300        : 1.125rem;
    --venia-global-fontSize-400        : 1.25rem;
    --venia-global-fontSize-500        : 1.375rem;
    --venia-global-fontSize-600        : 1.5rem;
    --venia-global-fontSize-700        : 1.75rem;
    --venia-global-fontSize-800        : 2rem;
    --venia-global-fontSize-900        : 2.25rem;
    --venia-global-fontSize-1000       : 2.5rem;
    --venia-global-fontSize-1100       : 3rem;
    --venia-global-fontSize-1200       : 3.5rem;
    --venia-global-fontWeight-normal   : 400;
    --venia-global-fontWeight-semibold : 600;
    --venia-global-fontWeight-bold     : 700;
    --venia-global-lineHeight-100      : 1;
    --venia-global-lineHeight-200      : 1.25;
    --venia-global-lineHeight-300      : 1.5;
    --venia-global-lineHeight-400      : 1.75;
    --venia-global-lineHeight-500      : 2;
    --venia-global-maxWidth            : 1440px
}

.cif-demo .cmp-Mask__mask__root {
    background-color          : #000;
    cursor                    : pointer;
    display                   : block;
    height                    : 100%;
    left                      : 0;
    opacity                   : 0;
    position                  : fixed;
    top                       : 0;
    transition-duration       : 192ms;
    transition-property       : opacity, visibility;
    transition-timing-function: linear;
    visibility                : hidden;
    width                     : 100%;
    z-index                   : 2;
    -webkit-appearance        : none
}

.cif-demo .cmp-Mask__mask__root_active {
    opacity            : .5;
    transition-duration: 224ms;
    visibility         : visible
}

.cif-demo .cmp-Minicart__header__root {
    align-content        : center;
    align-items          : center;
    background-color     : rgb(var(--venia-grey));
    box-shadow           : 0 1px rgb(var(--venia-border));
    display              : grid;
    grid-auto-columns    : auto;
    grid-auto-flow       : column;
    grid-auto-rows       : 3rem;
    grid-template-columns: 1fr;
    height               : var(--minicart-header-height);
    justify-content      : end;
    padding              : 0 1rem;
    position             : relative;
    z-index              : 1
}

.cif-demo .cmp-Minicart__header__title {
    align-items   : center;
    display       : inline-flex;
    font-size     : 1rem;
    font-weight   : 400;
    margin-right  : auto;
    padding       : 0;
    text-transform: uppercase
}

.cif-demo .cmp-LoadingIndicator__indicator__root {
    align-content  : center;
    align-items    : center;
    display        : grid;
    gap            : 3rem;
    height         : calc(100% - 6rem);
    justify-content: center;
    justify-items  : center;
    margin         : 3rem 0;
    width          : 100%
}

.cif-demo .cmp-LoadingIndicator__indicator__global {
    position: fixed;
    top     : 0;
    left    : 0;
    margin  : 0;
    height  : 100%;
    width   : 100%
}

.cif-demo .cmp-LoadingIndicator__indicator__message {
    color         : rgb(var(--venia-text-alt));
    font-size     : 1rem;
    letter-spacing: .25rem;
    text-transform: uppercase
}

.cif-demo .cmp-LoadingIndicator__indicator__indicator {
    animation-direction      : alternate;
    animation-duration       : 1.5s;
    animation-iteration-count: infinite;
    animation-name           : cmp-LoadingIndicator__indicator__pulse;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1)
}

@keyframes cmp-LoadingIndicator__indicator__pulse {
    0% {
        filter   : grayscale(1);
        transform: scale(.75) rotate(-540deg)
    }

    to {
        filter   : grayscale(0);
        transform: scale(1) rotate(0deg)
    }
}

.cif-demo .cmp-components__clickable__root {
    align-items    : center;
    cursor         : pointer;
    display        : inline-flex;
    justify-content: center;
    line-height    : 1;
    pointer-events : auto;
    text-align     : center;
    white-space    : nowrap
}

.cif-demo .cmp-Minicart__emptyMiniCartBody__root {
    align-items    : center;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    padding        : 1rem;
    text-align     : center
}

.cif-demo .cmp-Minicart__emptyMiniCartBody__continue {
    align-items               : center;
    cursor                    : pointer;
    display                   : inline-flex;
    justify-content           : center;
    line-height               : 1;
    pointer-events            : auto;
    text-align                : center;
    white-space               : nowrap;
    background                : none;
    border                    : 1px solid rgb(var(--color));
    border-radius             : 1.5rem;
    font-size                 : .75rem;
    font-weight               : 600;
    height                    : 2rem;
    min-width                 : 7.5rem;
    padding                   : 0 1rem;
    transition-duration       : 384ms;
    transition-property       : background-color, color;
    transition-timing-function: var(--venia-anim-standard);
    --color                   : var(--venia-text);
    color                     : #fff;
    background-color          : rgb(var(--color))
}

.cif-demo .cmp-Minicart__emptyMiniCartBody__continue:hover {
    color           : #fff;
    background-color: rgb(var(--venia-teal))
}

.cif-demo .cmp-Minicart__body__root {
    display           : grid;
    grid-template-rows: min-content min-content min-content 1fr;
    overflow          : auto
}

.cif-demo .cmp-Minicart__product__root {
    position             : relative;
    align-content        : start;
    display              : grid;
    grid-gap             : 0 1rem;
    grid-template-areas  : "image name""image options""image quantity";
    grid-template-columns: 5pc 1fr;
    grid-template-rows   : min-content minmax(54px, 1fr) min-content
}

.cif-demo .cmp-Minicart__product__image {
    background-color: rgb(var(--venia-grey));
    border          : 1px solid rgb(var(--venia-border));
    border-radius   : 2px;
    grid-area       : image;
    max-width       : 5pc;
    min-height      : 75pt
}

.cif-demo .cmp-Minicart__product__name {
    font-size  : .875rem;
    font-weight: 600;
    grid-area  : name;
    padding-top: .125rem
}

.cif-demo .cmp-Minicart__product__quantityRow {
    align-items: center;
    width      : 100%
}

.cif-demo .cmp-Minicart__product__quantity {
    align-items: flex-start;
    display    : flex;
    grid-column: 2/span 1;
    font-size  : 13px;
    align-self : end
}

.cif-demo .cmp-Minicart__product__quantityOperator {
    align-items: center;
    color      : rgb(var(--venia-text-alt));
    display    : inline-flex;
    margin     : 0 .375rem
}

.cif-demo .cmp-Minicart__product__price {
    align-items: center;
    display    : inline-flex
}

.cif-demo .cmp-Minicart__product__rowTotalRow {
    align-items: center;
    width      : 100%;
    text-align : right
}

.cif-demo .cmp-Minicart__product__rowTotal {
    align-items: center;
    display    : inline-flex;
    float      : right
}

.cif-demo .cmp-Minicart__product__bundleOptions {
    padding: 3px 0 7px
}

.cif-demo .cmp-Minicart__product__bundleOptionTitle {
    font-weight: 600;
    font-size  : .9rem;
    margin     : 7px 0 3px
}

.cif-demo .cmp-Minicart__product__bundleOptionValue {
    font-size    : .8rem;
    margin-bottom: 2px
}

.cif-demo .cmp-Minicart__product__mask {
    position        : absolute;
    left            : -24px;
    right           : -24px;
    top             : -7px;
    bottom          : -7px;
    background-color: rgb(var(--venia-grey));
    opacity         : .5;
    z-index         : 2
}

.cif-demo .cmp-Minicart__kebab__root {
    display          : inline-block;
    grid-row-start   : 1;
    grid-row-end     : 4;
    grid-column-start: 3;
    grid-column-end  : 4;
    margin-top       : 2px;
    position         : relative
}

.cif-demo .cmp-Minicart__kebab__dropdown {
    align-items     : center;
    box-shadow      : 0 0 1px rgba(0, 0, 0, .2);
    display         : grid;
    position        : absolute;
    right           : 2px;
    top             : 0;
    transition      : 256ms ease-out;
    transform       : scale(0);
    transform-origin: 100% 0;
    z-index         : 3
}

.cif-demo .cmp-Minicart__kebab__dropdown_active {
    position  : absolute;
    transform : scale(1);
    transition: .25s var(--venia-anim-bounce)
}

.cif-demo .cmp-Minicart__kebab__dropdown li {
    display         : block;
    width           : 100%;
    background-color: #fff;
    border-bottom   : 1px solid rgb(var(--venia-border))
}

.cif-demo .cmp-Minicart__kebab__dropdown li:hover {
    background-color: #eee
}

.cif-demo .cmp-Minicart__kebab__kebab {
    outline         : 0;
    border          : none;
    background-color: #fff
}

.cif-demo .cmp-Icon__icon__root {
    align-items    : center;
    display        : inline-flex;
    justify-content: center;
    touch-action   : manipulation
}

.cif-demo .cmp-Minicart__section__menuItem button {
    width        : 100%;
    padding      : .6rem 1.6rem .72rem .6rem;
    display      : flex;
    white-space  : pre;
    box-sizing   : border-box;
    text-align   : left;
    align-items  : center;
    justify-items: start;
    column-gap   : .7rem
}

.cif-demo .cmp-Minicart__section__text {
    padding-top : 1px;
    padding-left: .4rem;
    font-size   : 11px
}

.cif-demo .cmp-Minicart__productList__root {
    display : grid;
    grid-gap: 1rem;
    margin  : 0 1.5rem;
    padding : 1.5rem 0
}

.cif-demo .cmp-Button__button__root {
    background                : none;
    border                    : 1px solid rgb(var(--color));
    border-radius             : 1.5rem;
    color                     : rgb(var(--color));
    font-size                 : .75rem;
    font-weight               : 600;
    height                    : 2rem;
    min-width                 : 7.5rem;
    padding                   : 0 1rem;
    transition-duration       : 384ms;
    transition-property       : background-color, color;
    transition-timing-function: var(--venia-anim-standard);
    --color                   : var(--venia-text)
}

.cif-demo .cmp-Button__button__filled {
    background-color: rgb(var(--color));
    color           : #fff
}

.cif-demo .cmp-Button__button__root:hover {
    --color: var(--venia-teal)
}

.cif-demo .cmp-Button__button__root:focus {
    box-shadow         : 0 0 0 2px rgb(var(--venia-teal-light)), 0 0 .5rem 2px rgba(var(--venia-teal), .2);
    outline            : none;
    transition-duration: 128ms;
    --color            : var(--venia-teal)
}

.cif-demo .cmp-Button__button__root:active {
    transition-duration: 128ms;
    --color            : var(--venia-teal-dark)
}

.cif-demo .cmp-Button__button__root:disabled {
    pointer-events: none;
    --color       : var(--venia-grey-dark)
}

.cif-demo .cmp-Button__button__content {
    align-items    : center;
    display        : inline-grid;
    gap            : .5rem;
    grid-auto-flow : column;
    justify-content: center;
    justify-items  : center
}

.cif-demo .cmp-Field__field__root {
    color  : rgb(var(--venia-text));
    display: grid
}

.cif-demo .cmp-Field__field__label {
    align-items: center;
    display    : flex;
    font-size  : .875rem;
    line-height: 1rem;
    padding    : .375rem .125rem
}

.cif-demo .cmp-Field__field__input {
    background        : #fff;
    border            : 1px solid rgb(var(--venia-text-alt));
    border-radius     : 2px;
    color             : rgb(var(--venia-text));
    display           : inline-flex;
    flex              : 0 0 100%;
    font-size         : 1rem;
    height            : 2.25rem;
    margin            : 0;
    padding           : calc(.375rem - 1px) calc(.625rem - 1px);
    width             : 100%;
    -webkit-appearance: none
}

.cif-demo .cmp-Field__field__input:focus {
    border-color: rgb(var(--venia-teal));
    box-shadow  : 0 0 0 2px rgb(var(--venia-teal-light)), 0 0 .5rem 2px rgba(var(--venia-teal), .2);
    outline     : none
}

.cif-demo .cmp-Field__field__requiredSymbol {
    background-color: #000;
    width           : .4rem;
    height          : .4rem;
    border-radius   : 50%;
    margin-right    : .4rem
}

.cif-demo .cmp-Field__fieldIcons__root {
    display              : inline-grid;
    grid-auto-flow       : column;
    grid-template-areas  : "before input after";
    grid-template-columns: auto 1fr auto;
    height               : 2.25rem
}

.cif-demo .cmp-Field__fieldIcons__input {
    align-items: center;
    display    : flex;
    grid-column: before-start/after-end;
    grid-row   : input-start/input-end
}

.cif-demo .cmp-Field__fieldIcons__input>input {
    padding-left : calc(1.875rem*var(--iconsBefore) + .375rem - 1px);
    padding-right: calc(1.875rem*var(--iconsAfter) + .375rem - 1px)
}

.cif-demo .cmp-Field__fieldIcons__after,
.cif-demo .cmp-Field__fieldIcons__before {
    align-items    : center;
    display        : flex;
    justify-content: center;
    pointer-events : none;
    width          : 2.25rem
}

.cif-demo .cmp-Field__fieldIcons__after:empty,
.cif-demo .cmp-Field__fieldIcons__before:empty {
    display: none
}

.cif-demo .cmp-Field__fieldIcons__before {
    grid-area: before
}

.cif-demo .cmp-Field__fieldIcons__after {
    grid-area: after
}

.cif-demo .cmp-Field__message__root {
    color      : rgb(var(--venia-text));
    font-size  : .875rem;
    font-weight: 400;
    line-height: 1rem;
    padding    : .375rem .125rem .125rem
}

.cif-demo .cmp-Field__message__root:empty {
    display: none
}

.cif-demo .cmp-Field__message__root_error {
    color: rgb(var(--venia-error))
}

.cif-demo .cmp-Select__select__wrapper {
    display              : inline-grid;
    grid-auto-flow       : column;
    grid-template-areas  : "input icon";
    grid-template-columns: auto 2.25rem;
    height               : 2.25rem
}

.cif-demo .cmp-Select__select__input {
    grid-area    : input-start/input-start/input-end/icon-end;
    padding-right: calc(2.25rem - 1px)
}

.cif-demo .cmp-Minicart__cartOptions__root {
    display           : grid;
    grid-template-rows: min-content 1fr;
    height            : calc(100% - var(--minicart-header-height));
    left              : 0;
    position          : absolute;
    top               : 3.5rem;
    width             : 100%
}

.cif-demo .cmp-Minicart__cartOptions__focusItem {
    box-shadow           : 0 1px rgb(var(--venia-border));
    display              : grid;
    gap                  : 2rem;
    grid-auto-flow       : column;
    grid-template-columns: 1fr;
    padding              : 1rem
}

.cif-demo .cmp-Minicart__cartOptions__name {
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap
}

.cif-demo .cmp-Minicart__cartOptions__form {
    overflow: auto
}

.cif-demo .cmp-Minicart__cartOptions__modal {
    visibility      : hidden;
    height          : 100%;
    width           : 100%;
    background-color: rgb(var(--venia-grey));
    text-align      : center;
    position        : absolute;
    bottom          : 0
}

.cif-demo .cmp-Minicart__cartOptions__modal_active {
    visibility: visible;
    opacity   : .9
}

.cif-demo .cmp-Minicart__cartOptions__options {
    font-weight: 700
}

.cif-demo .cmp-Minicart__cartOptions__quantity {
    border        : solid rgb(var(--venia-border));
    border-width  : 0 0 1px;
    margin        : 0 1.5rem;
    padding-top   : 1rem;
    padding-bottom: 1rem
}

.cif-demo .cmp-Minicart__cartOptions__quantityTitle {
    font-size    : 1rem;
    font-weight  : 600;
    line-height  : 1.5;
    margin-bottom: 1.5rem
}

.cif-demo .cmp-Minicart__cartOptions__save {
    align-items      : center;
    background-color : #fff;
    display          : grid;
    grid-auto-columns: min-content;
    grid-auto-flow   : column;
    grid-gap         : .75rem;
    height           : 5rem;
    justify-content  : center;
    justify-items    : center;
    position         : relative
}

.cif-demo .cmp-Minicart__error__root {
    background-color: rgb(var(--venia-warning-light));
    box-shadow      : 0 1px rgb(var(--venia-border));
    margin          : 10px;
    padding         : 10px
}

.cif-demo .cmp-Minicart__error__root h2 {
    color         : rgb(var(--venia-warning-dark));
    padding-bottom: .83rem
}

.cif-demo .cmp-Minicart__error__root .cmp-Minicart__error__action {
    padding   : 10px 0;
    text-align: center
}

.cif-demo .cmp-Minicart__couponForm__root {
    display              : grid;
    grid-template-columns: auto 8rem;
    grid-gap             : 1rem;
    margin               : 0 1.5rem
}

.cif-demo .cmp-Minicart__couponForm__root input {
    max-height: 2pc
}

.cif-demo .cmp-Minicart__couponForm__error {
    grid-column     : 1/3;
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    color           : rgb(var(--venia-error));
    font-size       : .875rem;
    line-height     : 1.25rem;
    padding         : 1rem
}

.cif-demo .cmp-Minicart__couponForm__error:empty {
    display: none
}

.cif-demo .cmp-Minicart__couponItem__root {
    display              : grid;
    grid-gap             : 0 1rem;
    grid-template-columns: 1fr min-content;
    margin               : 0 1.5rem
}

.cif-demo .cmp-Minicart__couponItem__couponName {
    line-height: 1.5rem
}

.cif-demo .cmp-Minicart__discountList__root {
    display       : grid;
    grid-gap      : 1rem;
    margin        : 0 1.5rem;
    font-size     : 14px;
    padding-bottom: 1.5rem
}

.cif-demo .cmp-Minicart__discountList__item {
    display              : grid;
    grid-template-columns: 75% auto
}

.cif-demo .cmp-Minicart__discountList__price {
    text-align: right
}

.cif-demo .cmp-Checkout__flow__root {
    position: relative
}

.cif-demo .cmp-Checkout__flow__heading {
    background-color: #fff;
    font-size       : .875rem;
    font-weight     : 600;
    grid-column-end : span 2;
    line-height     : 1rem;
    padding         : 1.5rem 0 1.25rem;
    text-align      : center;
    text-transform  : uppercase;
    top             : 0;
    z-index         : 1
}

.cif-demo .cmp-Checkout__flow__body {
    align-content            : start;
    animation-duration       : 224ms;
    animation-iteration-count: 1;
    animation-name           : cmp-Checkout__flow__enter;
    background-color         : #fff;
    bottom                   : 5rem;
    box-shadow               : 0 -1px rgb(var(--venia-border));
    display                  : grid;
    grid-gap                 : .5rem;
    left                     : 0;
    max-height               : calc(100vh - 8.5rem);
    overflow                 : auto;
    padding                  : 0 1.5rem;
    position                 : absolute;
    right                    : 0
}

.cif-demo .cmp-Checkout__flow__footer {
    align-items      : center;
    background-color : #fff;
    display          : grid;
    grid-auto-columns: min-content;
    grid-auto-flow   : column;
    grid-gap         : .75rem;
    height           : 5rem;
    justify-content  : center;
    justify-items    : center;
    position         : relative
}

@keyframes cmp-Checkout__flow__enter {
    0% {
        opacity  : 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity  : 1;
        transform: translateZ(0)
    }
}

.cif-demo .cmp-Checkout__section__root {
    display         : block;
    width           : 100%;
    background-color: #fff;
    border          : none
}

.cif-demo .cmp-Checkout__section__root:focus {
    background-image: radial-gradient(circle, rgb(var(--venia-grey)), #fff);
    outline         : 0 none
}

.cif-demo .cmp-Checkout__section__content {
    align-items          : center;
    border-bottom        : 1px solid rgb(var(--venia-border));
    display              : grid;
    gap                  : 1rem;
    grid-auto-flow       : column;
    grid-template-columns: 5rem 1fr 2rem;
    justify-items        : start;
    margin               : 0 1.5rem;
    min-height           : 4.5rem;
    padding              : 1rem 0;
    text-align           : left
}

.cif-demo .cmp-Checkout__section__label {
    color      : rgb(var(--venia-teal));
    font-size  : 14px;
    font-weight: 600
}

.cif-demo .cmp-Checkout__section__summary {
    font-size    : 13px;
    justify-self : stretch;
    line-height  : 1.5;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap
}

.cif-demo .cmp-Checkout__section__icon {
    justify-self: center
}

.cif-demo .cmp-Checkout__form__root {
    bottom  : 0;
    left    : 0;
    position: absolute;
    right   : 0
}

.cif-demo .cmp-Checkout__form__body {
    grid-gap: 0;
    padding : 0
}

.cif-demo .cmp-Checkout__form__informationPrompt {
    color         : rgb(var(--venia-error));
    text-transform: capitalize
}

.cif-demo .cmp-Checkout__form__paymentDisplayPrimary {
    text-transform: capitalize
}

.cif-demo .cmp-Checkout__form__paymentDisplaySecondary {
    display       : block;
    text-transform: lowercase
}

.cif-demo .cmp-Checkout__form__paymentDisplaySecondary:first-letter {
    text-transform: uppercase
}

@keyframes cmp-Checkout__form__enter {
    0% {
        opacity  : 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity  : 1;
        transform: translateZ(0)
    }
}

.cif-demo .cmp-AddressForm__addressForm__heading {
    background-color: #fff;
    font-size       : .875rem;
    font-weight     : 600;
    grid-column-end : span 2;
    line-height     : 1rem;
    padding         : 1.5rem 0 1.25rem;
    text-align      : center;
    text-transform  : uppercase;
    top             : 0;
    z-index         : 1
}

.cif-demo .cmp-AddressForm__addressForm__body {
    align-content            : start;
    animation-duration       : 224ms;
    animation-iteration-count: 1;
    animation-name           : cmp-AddressForm__addressForm__enter;
    background-color         : #fff;
    bottom                   : 5rem;
    box-shadow               : 0 -1px rgb(var(--venia-border));
    display                  : grid;
    grid-gap                 : .5rem;
    left                     : 0;
    max-height               : calc(100vh - 8.5rem);
    overflow                 : auto;
    padding                  : 0 1.5rem;
    right                    : 0
}

.cif-demo .cmp-AddressForm__addressForm__footer {
    align-items      : center;
    background-color : #fff;
    display          : grid;
    grid-auto-columns: min-content;
    grid-auto-flow   : column;
    grid-gap         : .75rem;
    height           : 5rem;
    justify-content  : center;
    justify-items    : center;
    position         : relative
}

@keyframes cmp-AddressForm__addressForm__enter {
    0% {
        opacity  : 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity  : 1;
        transform: translateZ(0)
    }
}

.cif-demo .cmp-AddressForm__addressForm__button {
    text-transform: capitalize
}

.cif-demo .cmp-AddressForm__addressForm__textInput {
    background   : #fff;
    border       : 1px solid rgb(var(--venia-text-alt));
    border-radius: 2px;
    color        : rgb(var(--venia-text));
    display      : inline-flex;
    flex         : 0 0 100%;
    font-size    : .9375rem;
    height       : 2.25rem;
    padding      : calc(.375rem - 1px) calc(.625rem - 1px);
    width        : 100%
}

.cif-demo .cmp-AddressForm__addressForm__textInput:focus {
    border-color: rgb(var(--venia-text));
    outline     : 0 none
}

.cif-demo .cmp-AddressForm__addressForm__city,
.cif-demo .cmp-AddressForm__addressForm__firstname,
.cif-demo .cmp-AddressForm__addressForm__lastname,
.cif-demo .cmp-AddressForm__addressForm__postcode,
.cif-demo .cmp-AddressForm__addressForm__region_code,
.cif-demo .cmp-AddressForm__addressForm__telephone {
    grid-column-end: span 1
}

.cif-demo .cmp-AddressForm__addressForm__address_select,
.cif-demo .cmp-AddressForm__addressForm__email,
.cif-demo .cmp-AddressForm__addressForm__street0 {
    grid-column-end: span 2
}

.cif-demo .cmp-AddressForm__addressForm__default_shipping,
.cif-demo .cmp-AddressForm__addressForm__save_in_address_book {
    grid-column-end: span 2;
    text-align     : left
}

.cif-demo .cmp-AddressForm__addressForm__error,
.cif-demo .cmp-AddressForm__addressForm__validation {
    grid-column-end: span 2;
    line-height    : normal
}

.cif-demo .cmp-AddressForm__addressForm__error {
    color: rgb(var(--venia-error))
}

.cif-demo .cmp-AddressForm__addressSelect__root {
    grid-column-end: span 2
}

.cif-demo .cmp-Checkbox__checkbox__root {
    align-items          : center;
    color                : rgb(var(--venia-text));
    display              : inline-grid;
    font-size            : 1rem;
    font-weight          : 400;
    gap                  : .5rem;
    grid-auto-flow       : column;
    grid-template-columns: auto;
    justify-items        : center;
    margin               : .5rem;
    vertical-align       : top
}

.cif-demo .cmp-Checkbox__checkbox__icon {
    align-items    : center;
    justify-content: center;
    z-index        : var(--base-z-index + 1, 1)
}

.cif-demo .cmp-Checkbox__checkbox__icon,
.cif-demo .cmp-Checkbox__checkbox__input {
    display    : inline-flex;
    grid-column: 1/span 1;
    grid-row   : 1/span 1;
    height     : 1.25rem;
    width      : 1.25rem
}

.cif-demo .cmp-Checkbox__checkbox__input {
    background        : none;
    border            : 1px solid rgb(var(--venia-text));
    border-radius     : 2px;
    margin            : 0;
    -webkit-appearance: none
}

.cif-demo .cmp-Checkbox__checkbox__input:focus {
    border-color: rgb(var(--venia-teal));
    box-shadow  : 0 0 0 2px rgb(var(--venia-teal-light)), 0 0 .5rem 2px rgba(var(--venia-teal), .2);
    outline     : none
}

.cif-demo .cmp-Checkbox__checkbox__label {
    font-size  : 1rem;
    grid-column: 2/span 1;
    grid-row   : 1/span 1
}

.cif-demo .cmp-Checkout__paymentsForm__body {
    min-height: 21rem
}

.cif-demo .cmp-Checkout__paymentsForm__button {
    text-transform: capitalize
}

.cif-demo .cmp-Checkout__paymentsForm__textInput {
    background   : #fff;
    border       : 1px solid rgb(var(--venia-text-alt));
    border-radius: 2px;
    color        : rgb(var(--venia-text));
    display      : inline-flex;
    flex         : 0 0 100%;
    font-size    : .9375rem;
    height       : 2.25rem;
    padding      : calc(.375rem - 1px) calc(.625rem - 1px);
    width        : 100%
}

.cif-demo .cmp-Checkout__paymentsForm__textInput:focus {
    border-color: rgb(var(--venia-text));
    outline     : 0 none
}

.cif-demo .cmp-Checkout__paymentsForm__city,
.cif-demo .cmp-Checkout__paymentsForm__postcode,
.cif-demo .cmp-Checkout__paymentsForm__region_code {
    grid-column-end: span 1
}

.cif-demo .cmp-Checkout__paymentsForm__address_check,
.cif-demo .cmp-Checkout__paymentsForm__address_select,
.cif-demo .cmp-Checkout__paymentsForm__braintree,
.cif-demo .cmp-Checkout__paymentsForm__email,
.cif-demo .cmp-Checkout__paymentsForm__save_in_address_book,
.cif-demo .cmp-Checkout__paymentsForm__street0 {
    grid-column-end: span 2
}

.cif-demo .cmp-Checkout__paymentsForm__validation {
    color          : rgb(var(--venia-error));
    font-size      : .8125rem;
    grid-column-end: span 2
}

[data-braintree-id=upper-container] {
    z-index: unset
}

.cif-demo .braintree-placeholder {
    display: none
}

.cif-demo .cmp-Checkout__shippingForm__button {
    text-transform: capitalize
}

.cif-demo .cmp-Checkout__shippingForm__shippingMethod {
    grid-column-end: span 1
}

.cif-demo .cmp-Checkout__receipt__root {
    background-color  : #fff;
    display           : grid;
    grid-template-rows: 1fr auto;
    height            : 100vh;
    left              : 0;
    padding-top       : 3.5rem;
    position          : absolute;
    right             : 0;
    bottom            : 0
}

.cif-demo .cmp-Checkout__receipt__body {
    padding: 1.5rem 1rem 1rem
}

.cif-demo .cmp-Checkout__receipt__footer {
    align-items    : center;
    display        : flex;
    justify-content: center;
    margin         : 0 1.5rem;
    padding        : 1rem 0
}

.cif-demo .cmp-Checkout__receipt__textBlock {
    margin     : 1.5rem 0;
    line-height: 1.875rem;
    font-size  : .875rem
}

.cif-demo .cmp-Checkout__receipt__orderId {
    color          : #22a1a8;
    text-decoration: underline
}

.cif-demo .cmp-Checkout__receipt__header {
    font-size  : 1.25rem;
    font-weight: 300;
    line-height: 1.25rem
}

.cif-demo .cmp-Checkout__receipt__continue {
    align-items               : center;
    cursor                    : pointer;
    display                   : inline-flex;
    justify-content           : center;
    line-height               : 1;
    pointer-events            : auto;
    text-align                : center;
    white-space               : nowrap;
    background                : none;
    border                    : 1px solid rgb(var(--color));
    border-radius             : 1.5rem;
    font-size                 : .75rem;
    font-weight               : 600;
    height                    : 2rem;
    min-width                 : 7.5rem;
    padding                   : 0 1rem;
    transition-duration       : 384ms;
    transition-property       : background-color, color;
    transition-timing-function: var(--venia-anim-standard);
    --color                   : var(--venia-text);
    color                     : #fff;
    background-color          : rgb(var(--color))
}

.cif-demo .cmp-Checkout__receipt__continue:hover {
    color           : #fff;
    background-color: rgb(var(--venia-teal))
}

.cif-demo .cmp-Minicart__footer__root {
    background-color: #fff;
    padding         : 0
}

.cif-demo .cmp-Minicart__footer__root_open {
    z-index: 3
}

.cif-demo .cmp-Minicart__footer__placeholderButton {
    text-align: center;
    margin    : 1.5rem 0 1rem
}

.cif-demo .cmp-Minicart__totalsSummary__root {
    box-shadow : 0 -1px rgb(var(--venia-border));
    line-height: 2rem;
    margin     : 0 1.5rem;
    padding-top: 1.5rem
}

.cif-demo .cmp-Minicart__totalsSummary__subtotalLabel {
    color: rgb(var(--venia-text-alt))
}

.cif-demo .cmp-Minicart__totalsSummary__subtotalValue {
    font-weight: 600;
    margin-left: .5rem
}

.cif-demo .cmp-Minicart__totalsSummary__totals {
    align-items    : center;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center
}

.cif-demo .cmp-Minicart__totalsSummary__discounted {
    text-decoration: line-through
}

.cif-demo .cmp-Minicart__totalsSummary__totalsDiscount {
    align-items    : center;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center
}

.cif-demo .cmp-Minicart__minicart__root {
    --base-z-index            : 4;
    --minicart-header-height  : 3.5rem;
    align-content             : start;
    background-color          : #fff;
    bottom                    : 0;
    box-shadow                : -1px 0 rgb(var(--venia-border));
    display                   : grid;
    grid-template-rows        : min-content 1fr;
    height                    : 100%;
    opacity                   : 0;
    overflow                  : hidden;
    position                  : fixed;
    right                     : 0;
    top                       : 0;
    transform                 : translate3d(100%, 0, 0);
    transition-duration       : 192ms;
    transition-property       : opacity, transform, visibility;
    transition-timing-function: cubic-bezier(.4, 0, 1, 1);
    visibility                : hidden;
    width                     : 100%;
    max-width                 : 360px;
    z-index                   : var(--base-z-index)
}

.cif-demo .cmp-Minicart__minicart__root_open {
    opacity                   : 1;
    transform                 : translateZ(0);
    transition-duration       : 224ms;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    visibility                : visible
}

.cif-demo .cmp-AuthBar__authBar__root {
    align-items     : center;
    background-color: #fff;
    display         : grid;
    gap             : .75rem;
    grid-auto-flow  : column;
    height          : 5.5rem;
    justify-items   : center
}

.cif-demo .cmp-AuthBar__userChip__root {
    width: 100%
}

.cif-demo .cmp-AuthBar__userChip__content {
    align-items          : center;
    display              : grid;
    font-size            : .875rem;
    height               : 5.5rem;
    gap                  : .5rem;
    grid-auto-flow       : column;
    grid-template-columns: 3rem 1fr 3rem;
    line-height          : 1rem;
    padding              : 0 .5rem;
    text-align           : center
}

.cif-demo .cmp-AuthBar__userChip__user {
    display       : grid;
    gap           : .25rem;
    grid-auto-flow: row;
    text-align    : left
}

.cif-demo .cmp-AuthBar__userChip__email {
    color: rgb(var(--venia-text-alt))
}

.cif-demo .cmp-SignIn__signIn__root {
    display      : grid;
    gap          : 1.5rem;
    justify-items: stretch;
    padding      : 1rem 1.5rem
}

.cif-demo .cmp-SignIn__signIn__forgotPassword {
    display        : block;
    text-decoration: underline;
    color          : rgb(var(--venia-error));
    font-size      : .8rem
}

.cif-demo .cmp-SignIn__signIn__form {
    display: grid;
    row-gap: 1rem
}

.cif-demo .cmp-SignIn__signIn__formTitle {
    padding: 1rem 0 .5rem
}

.cif-demo .cmp-SignIn__signIn__modal {
    visibility      : hidden;
    height          : 100%;
    width           : 100%;
    background-color: rgb(var(--venia-grey));
    text-align      : center;
    position        : absolute;
    bottom          : 0
}

.cif-demo .cmp-SignIn__signIn__modal_active {
    visibility: visible;
    opacity   : .9
}

.cif-demo .cmp-SignIn__signIn__createAccountButton,
.cif-demo .cmp-SignIn__signIn__forgotPasswordButton,
.cif-demo .cmp-SignIn__signIn__signInButton {
    align-items: center;
    display    : flex;
    text-align : center
}

.cif-demo .cmp-SignIn__signIn__createAccountButton,
.cif-demo .cmp-SignIn__signIn__signInButton {
    justify-content: center
}

.cif-demo .cmp-SignIn__signIn__createAccountButton button,
.cif-demo .cmp-SignIn__signIn__signInButton button {
    min-width: 10rem
}

.cif-demo .cmp-SignIn__signIn__forgotPasswordButton {
    justify-content: flex-start
}

.cif-demo .cmp-SignIn__signIn__signInButton {
    margin-top: 1rem
}

.cif-demo .cmp-SignIn__signIn__signInError {
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    color           : rgb(var(--venia-error));
    font-size       : .875rem;
    line-height     : 1.25rem;
    padding         : 1rem
}

.cif-demo .cmp-SignIn__signIn__signInError:empty {
    display: none
}

.cif-demo .cmp-MyAccount__myAccount__root {
    display: grid;
    gap    : 1rem;
    padding: 1.5rem
}

.cif-demo .cmp-MyAccount__myAccount__user {
    display       : grid;
    gap           : .5rem;
    grid-auto-flow: row
}

.cif-demo .cmp-MyAccount__myAccount__subtitle {
    color: rgb(var(--venia-text-alt))
}

.cif-demo .cmp-MyAccount__accountLink__root {
    border-bottom: 1px solid rgb(var(--venia-border));
    width        : 100%
}

.cif-demo .cmp-MyAccount__accountLink__content {
    align-items          : center;
    display              : grid;
    gap                  : .5rem;
    grid-auto-flow       : column;
    grid-template-columns: 2rem 1fr;
    height               : 3rem;
    justify-items        : start
}

.cif-demo .cmp-MyAccount__accountLink__icon {
    align-items    : center;
    color          : rgb(var(--venia-teal));
    display        : flex;
    justify-content: center;
    justify-self   : center
}

.cif-demo .cmp-MyAccount__accountLink__text {
    font-size  : .875rem;
    line-height: 1rem
}

.cif-demo .cmp-ForgotPassword__forgotPasswordForm__root {
    display      : grid;
    gap          : 1rem;
    justify-items: stretch
}

.cif-demo .cmp-ForgotPassword__forgotPasswordForm__buttonContainer {
    align-items    : center;
    display        : flex;
    justify-content: space-around;
    margin-top     : 1rem;
    text-align     : center
}

.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__root {
    display: grid;
    gap    : 1rem
}

.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__text {
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    font-size       : .875rem;
    font-weight     : 300;
    line-height     : 1.25rem;
    padding         : 1rem
}

.cif-demo .cmp-ForgotPassword__formSubmissionSuccessful__buttonContainer {
    align-items    : center;
    display        : flex;
    justify-content: center;
    margin-top     : 1rem;
    text-align     : center
}

.cif-demo .cmp-ForgotPassword__forgotPassword__root {
    display      : grid;
    gap          : 1.5rem;
    justify-items: stretch;
    padding      : 1rem 1.5rem
}

.cif-demo .cmp-ForgotPassword__forgotPassword__instructions {
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    font-size       : .875rem;
    font-weight     : 300;
    line-height     : 1.25rem;
    padding         : 1rem
}

.cif-demo .cmp-CreateAccount__createAccount__root {
    display      : grid;
    gap          : 1rem;
    justify-items: stretch;
    padding      : 1rem 1.5rem
}

.cif-demo .cmp-CreateAccount__createAccount__message {
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    font-size       : .875rem;
    line-height     : 1.25rem;
    padding         : 1rem
}

.cif-demo .cmp-CreateAccount__createAccount__message:empty {
    display: none
}

.cif-demo .cmp-CreateAccount__createAccount__actions {
    display        : flex;
    justify-content: space-around;
    margin-top     : 1rem
}

.cif-demo .cmp-CreateAccount__createAccount__error {
    color: rgb(var(--venia-error))
}

.cif-demo .cmp-CreateAccount__createAccount__subscribe {
    margin-left: -.5rem
}

.cif-demo .cmp-CreateAccount__createAccountSuccess__root {
    padding-top: 1.5rem
}

.cif-demo .cmp-CreateAccount__createAccountSuccess__body {
    padding: 1.5rem 1rem 1rem
}

.cif-demo .cmp-CreateAccount__createAccountSuccess__header {
    font-size  : 1.25rem;
    font-weight: 300;
    line-height: 1.25rem
}

.cif-demo .cmp-CreateAccount__createAccountSuccess__textBlock {
    margin     : 1.5rem 0;
    line-height: 1.875rem;
    font-size  : .875rem
}

.cif-demo .cmp-CreateAccount__createAccountSuccess__signin {
    align-items               : center;
    cursor                    : pointer;
    display                   : inline-flex;
    justify-content           : center;
    line-height               : 1;
    pointer-events            : auto;
    text-align                : center;
    white-space               : nowrap;
    background                : none;
    border                    : 1px solid rgb(var(--color));
    border-radius             : 1.5rem;
    font-size                 : .75rem;
    font-weight               : 600;
    height                    : 2rem;
    min-width                 : 7.5rem;
    padding                   : 0 1rem;
    transition-duration       : 384ms;
    transition-property       : background-color, color;
    transition-timing-function: var(--venia-anim-standard);
    --color                   : var(--venia-text);
    color                     : #fff;
    background-color          : rgb(var(--color))
}

.cif-demo .cmp-CreateAccount__createAccountSuccess__signin:hover {
    color           : #fff;
    background-color: rgb(var(--venia-teal))
}

.cif-demo .cmp-CreateAccount__createAccountSuccess__actions {
    display      : grid;
    justify-items: center;
    margin-top   : 1rem
}

.cif-demo .cmp-ChangePassword__changePassword__root {
    display: grid;
    gap    : 1rem;
    padding: 1.5rem
}

.cif-demo .cmp-ChangePassword__changePassword__message {
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    font-size       : .875rem;
    line-height     : 1.25rem;
    padding         : 1rem
}

.cif-demo .cmp-ChangePassword__changePassword__message:empty {
    display: none
}

.cif-demo .cmp-ChangePassword__changePassword__actions {
    display        : flex;
    justify-content: space-around;
    margin-top     : 1rem
}

.cif-demo .cmp-ChangePassword__changePassword__error {
    color: rgb(var(--venia-error))
}

.cif-demo .cmp-AuthBar__myAccountPanel__root {
    display: block
}

.cif-demo .cmp-AuthBar__container__enter {
    transition-duration       : 384ms;
    transition-timing-function: var(--venia-anim-in)
}

.cif-demo .cmp-AuthBar__container__exit {
    transition-duration       : 192ms;
    transition-timing-function: var(--venia-anim-out)
}

.cif-demo .cmp-AuthBar__container__hidden {
    opacity   : 0;
    visibility: hidden
}

.cif-demo .cmp-AuthBar__container__visible {
    opacity   : 1;
    visibility: visible
}

.cif-demo .cmp-AuthBar__container__modal {
    background-color   : #fff;
    bottom             : 0;
    left               : 0;
    overflow           : auto;
    position           : absolute;
    right              : 0;
    top                : 3.5rem;
    transform          : translate3d(-100%, 0, 0);
    transition-property: opacity, transform, visibility
}

.cif-demo .cmp-AuthBar__container__modal_open {
    transform: translateZ(0)
}

.cif-demo .cmp-CartTrigger__cartCounter__root {
    font-weight: 600;
    margin-left: .3rem
}

.cif-demo .cmp-AccountContainer__accountTrigger__root,
.cif-demo .cmp-CartTrigger__cartTrigger__root {
    height   : 3rem;
    min-width: 3rem
}

.cif-demo .cmp-AccountContainer__accountTrigger__label {
    padding: 0 .5rem
}

.cif-demo .cmp-AccountContainer__accountDropdown__root {
    background-color          : rgb(var(--venia-grey));
    display                   : grid;
    gap                       : 1rem;
    min-width                 : 22rem;
    left                      : 50%;
    opacity                   : 0;
    position                  : absolute;
    top                       : 3.3rem;
    transform                 : translate3d(-50%, 0, 0);
    transition-duration       : 192ms;
    transition-property       : opacity, transform, visibility;
    transition-timing-function: cubic-bezier(.4, 0, 1, 1);
    visibility                : hidden;
    z-index                   : 4
}

.cif-demo .cmp-AccountContainer__accountDropdown__root_open {
    opacity                   : 1;
    transition-duration       : 224ms;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    visibility                : visible
}

.cif-demo .cmp-AccountContainer__accountDropdown__mask_active {
    opacity: 0
}

.cif-demo .cmp-AddressBook__addressDeleteModal__root {
    align-items     : center;
    background-color: rgba(var(--venia-grey), .8);
    bottom          : 0;
    display         : inline-flex;
    justify-content : space-around;
    left            : 0;
    position        : absolute;
    right           : 0;
    top             : 0;
    z-index         : 2
}

.cif-demo .cmp-AddressBook__addressItem__root {
    border         : 1px solid rgb(var(--venia-text));
    border-radius  : 5px;
    display        : inline-flex;
    justify-content: space-between;
    min-height     : 8rem;
    padding        : 1.5rem;
    position       : relative;
    width          : 100%
}

.cif-demo .cmp-AddressBook__addressItem__defaultTag {
    border       : 1px solid rgb(var(--venia-teal));
    border-radius: 5px;
    color        : rgb(var(--venia-teal));
    max-width    : 4.5rem;
    padding      : .5rem;
    text-align   : left;
    margin-top   : .5rem
}

.cif-demo .cmp-AddressBook__addressItem__cityRegion,
.cif-demo .cmp-AddressBook__addressItem__country,
.cif-demo .cmp-AddressBook__addressItem__name,
.cif-demo .cmp-AddressBook__addressItem__street {
    text-align: left
}

.cif-demo .cmp-AddressBook__addressItem__actions {
    display       : flex;
    flex-direction: column;
    align-items   : flex-start
}

.cif-demo .cmp-AddressBook__addressItem__deleteButton,
.cif-demo .cmp-AddressBook__addressItem__editButton,
.cif-demo .cmp-AddressBook__addressItem__icon {
    display    : inline-flex;
    align-items: center
}

.cif-demo .cmp-AddressBook__addressItem__icon {
    color          : rgb(var(--venia-teal));
    justify-content: center;
    touch-action   : manipulation
}

.cif-demo .cmp-AddressBook__addressItem__label {
    padding-left: .5rem
}

.cif-demo .cmp-AddressBook__addAddressButton__root {
    align-items    : center;
    border         : 1px dotted rgb(var(--venia-text));
    border-radius  : 5px;
    display        : inline-flex;
    justify-content: center;
    min-height     : 8rem;
    padding        : 1.5rem;
    width          : 100%
}

.cif-demo .cmp-AddressBook__addAddressButton__icon {
    color          : rgb(var(--venia-teal));
    align-items    : center;
    display        : inline-flex;
    justify-content: center;
    touch-action   : manipulation
}

.cif-demo .cmp-AddressBook__addAddressButton__label {
    padding-left: .5rem
}

.cif-demo .cmp-AddressBook__addressItemsContainer__root {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(20pc, 1fr));
    grid-gap             : 1rem
}

@media (max-width:424px) {
    .cif-demo .cmp-AddressBook__addressItemsContainer__root {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
    }
}

.cif-demo .cmp-AddressBook__addressFormContainer__mask {
    cursor : auto;
    z-index: 10
}

.cif-demo .cmp-AddressBook__addressFormContainer__container {
    background-color: #fff;
    left            : 50%;
    max-width       : 360px;
    position        : absolute;
    top             : 5rem;
    transform       : translate(-50%);
    width           : 100%;
    z-index         : 11
}

.cif-demo .cmp-AddressBook__addressBook__root {
    width     : 100%;
    text-align: center;
    padding   : 1rem
}

.cif-demo .cmp-AddressBook__addressBook__title {
    margin-bottom: 1.5rem
}

.cif-demo .cmp-ResetPassword__ResetPassword__root {
    padding: 1rem
}

.cif-demo .cmp-ResetPassword__ResetPassword__fields {
    max-width: 300px
}

.cif-demo .cmp-ResetPassword__ResetPassword__lead {
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    font-size       : .875rem;
    font-weight     : 300;
    line-height     : 1.25rem;
    padding         : 1rem;
    margin          : 1rem 0
}

.cif-demo .cmp-ResetPassword__ResetPassword__submit {
    padding-top: 1rem
}

.cif-demo .cmp-ResetPassword__ResetPassword__error {
    color           : rgb(var(--venia-error));
    background-color: rgb(var(--venia-grey));
    border-radius   : 4px;
    font-size       : .875rem;
    font-weight     : 300;
    line-height     : 1.25rem;
    padding         : 1rem;
    margin          : 1rem 0
}

.cif-demo .cmp-AccountDetails__accountDetails__root {
    display   : grid;
    row-gap   : 2rem;
    width     : 100%;
    text-align: center;
    padding   : 1rem;
    margin-top: 3rem
}

.cif-demo .cmp-AccountDetails__accountDetails__lineItems {
    display              : grid;
    grid-gap             : .75rem;
    grid-template-columns: 1fr auto;
    line-height          : 1.5rem
}

.cif-demo .cmp-AccountDetails__accountDetails__lineItemLabel {
    font-weight: var(--venia-global-fontWeight-bold)
}

.cif-demo .cmp-AccountDetails__accountDetails__editInformationButton {
    margin: auto
}

.cif-demo .cmp-AccountDetails__accountDetails__messageText {
    text-align: center;
    margin    : auto
}

@media (min-width:961px) {
    .cif-demo .cmp-AccountDetails__accountDetails__accountDetails {
        display              : grid;
        gap                  : 1rem;
        grid-template-columns: 1fr 1fr 1fr;
        margin               : 3rem 1rem
    }
}

@media (max-width:960px) {
    .cif-demo .cmp-AccountDetails__accountDetails__lineItems {
        grid-template-columns: 1fr
    }

    .cif-demo .cmp-AccountDetails__accountDetails__lineItemButton {
        text-align: center
    }
}

.cif-demo .cmp-Dialog__dialog__root {
    position                  : fixed;
    left                      : 0;
    top                       : 0;
    height                    : 100%;
    width                     : 100%;
    opacity                   : 0;
    visibility                : hidden;
    transition-duration       : 192ms;
    transition-timing-function: var(--venia-global-anim-out);
    transition-property       : opacity, visibility;
    z-index                   : 3
}

.cif-demo .cmp-Dialog__dialog__root_open {
    opacity                   : 1;
    visibility                : visible;
    transition-duration       : 224ms;
    transition-timing-function: var(--venia-global-anim-in)
}

.cif-demo .cmp-Dialog__dialog__form {
    height         : 100%;
    width          : 100%;
    display        : grid;
    justify-content: center;
    align-content  : center
}

.cif-demo .cmp-Dialog__dialog__mask {
    position        : absolute;
    left            : 0;
    top             : 0;
    height          : 100%;
    width           : 100%;
    background-color: rgb(var(--venia-global-color-gray-darker));
    opacity         : .5
}

.cif-demo .cmp-Dialog__dialog__dialog {
    background-color  : rgb(var(--venia-global-color-background));
    border-radius     : 5px;
    box-shadow        : 1px 1px 5px rgb(var(--venia-global-color-gray-darker));
    height            : 100%;
    max-height        : 90vh;
    min-height        : 360px;
    width             : 40pc;
    overflow          : hidden;
    display           : grid;
    grid-template-rows: auto 1fr;
    pointer-events    : auto;
    z-index           : 4
}

.cif-demo .cmp-Dialog__dialog__header {
    border-bottom        : 1px solid rgb(var(--venia-global-color-border));
    height               : 3.5rem;
    padding              : 0 .75rem 0 1rem;
    display              : grid;
    grid-auto-flow       : column;
    grid-template-columns: 1fr auto;
    column-gap           : 1rem;
    align-items          : center
}

.cif-demo .cmp-Dialog__dialog__headerText {
    color         : rgb(var(--venia-global-color-text-alt));
    text-transform: capitalize;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    line-height   : 1.25rem
}

.cif-demo .cmp-Dialog__dialog__headerButton {
    justify-self: right
}

.cif-demo .cmp-Dialog__dialog__body {
    overflow          : auto;
    display           : grid;
    grid-template-rows: 1fr auto
}

.cif-demo .cmp-Dialog__dialog__contents {
    padding: 1rem
}

.cif-demo .cmp-Dialog__dialog__buttons {
    padding        : 2.5rem;
    display        : grid;
    grid-auto-flow : column;
    gap            : 1rem;
    justify-content: center
}

@media (max-width:960px) {
    .cif-demo .cmp-Dialog__dialog__root {
        left               : auto;
        right              : 0;
        transform          : translate3d(100%, 0, 0);
        transition-property: opacity, transform, visibility
    }

    .cif-demo .cmp-Dialog__dialog__root_open {
        transform: translateZ(0)
    }

    .cif-demo .cmp-Dialog__dialog__form {
        align-content  : stretch;
        justify-content: end
    }

    .cif-demo .cmp-Dialog__dialog__dialog {
        max-height: 100%;
        max-width : 360px
    }

    .cif-demo .cmp-Dialog__dialog__buttons {
        grid-auto-flow: row
    }

    .cif-demo .cmp-Dialog__dialog__confirmButton {
        order: -1
    }
}

.cif-demo .cmp-FormError__formError__errorMessage {
    color      : rgb(var(--venia-global-color-error));
    font-size  : var(--venia-typography-body-S-fontSize);
    font-weight: var(--venia-global-fontWeight-semibold);
    line-height: var(--venia-global-lineHeight-300)
}

.cif-demo .cmp-LinkButton__linkButton__root {
    color          : rgb(var(--venia-brand-color-1-700));
    font-size      : var(--venia-global-fontSize-200);
    font-weight    : var(--venia-global-fontWeight-semibold);
    text-decoration: underline;
    line-height    : 1.25rem;
    max-width      : 100%
}

.cif-demo .cmp-LinkButton__linkButton__root:hover {
    color: rgb(var(--venia-global-color-gray-900))
}

.cif-demo .cmp-Password__password__passwordButton {
    --stroke     : var(--venia-global-color-gray-500);
    background   : none;
    border-radius: 0;
    border-style : none;
    border-width : 0;
    padding      : 0;
    min-width    : 0
}

.cif-demo .cmp-Password__password__passwordButton:hover {
    --stroke: var(--venia-global-color-gray-700)
}

.cif-demo .cmp-Password__password__passwordButton:focus {
    box-shadow: none;
    --stroke  : var(--venia-global-color-gray-700)
}

.cif-demo .cmp-Password__password__root:active {
    --stroke: var(--venia-global-color-gray-700)
}

.cif-demo .cmp-AccountDetails__editForm__root {
    display              : grid;
    gap                  : .5rem 1.5rem;
    grid-template-columns: 1fr 1fr;
    width                : 100%
}

.cif-demo .cmp-AccountDetails__editForm__field {
    grid-column-end: span 2
}

.cif-demo .cmp-AccountDetails__editForm__buttons {
    display       : grid;
    gap           : 1rem;
    grid-auto-flow: column;
    justify-self  : center;
    padding       : 1rem
}

.cif-demo .cmp-AccountDetails__editForm__changePasswordButton,
.cif-demo .cmp-AccountDetails__editForm__changePasswordButtonContainer {
    padding-top: 1rem
}

@media (max-width:960px) {

    .cif-demo .cmp-AccountDetails__editForm__firstname,
    .cif-demo .cmp-AccountDetails__editForm__lastname,
    .cif-demo .cmp-AccountDetails__editForm__newPassword,
    .cif-demo .cmp-AccountDetails__editForm__password {
        grid-column: 1/span 2
    }
}

.cif-demo * {
    -webkit-box-sizing: border-box;
    box-sizing        : border-box
}

.cif-demo div.header+div.responsivegrid {
    margin   : 0 auto;
    max-width: 1500px !important;
    float    : none !important
}

.cif-demo input,
.cif-demo select,
.cif-demo textarea {
    font-family: Muli, -apple-system, BlinkMacSystemFont, sans-serif
}

.cif-demo h1,
.cif-demo h2,
.cif-demo h3,
.cif-demo h4,
.cif-demo h5,
.cif-demo h6 {
    font-size  : 1rem;
    font-weight: 400;
    margin     : 0
}

.cif-demo h1 {
    font-size: 1.5rem
}

.cif-demo h2 {
    font-size: 1.25rem
}

.cif-demo a {
    color          : currentColor;
    text-decoration: none
}

.cif-demo p {
    margin: 0
}

.cif-demo dl,
.cif-demo ol,
.cif-demo ul {
    list-style-type: none;
    margin         : 0;
    padding        : 0
}

.cif-demo dd,
.cif-demo dt {
    margin: 0
}

.cif-demo button {
    background         : none;
    border             : 0;
    cursor             : pointer;
    font-family        : Muli, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size          : 100%;
    padding            : 0;
    -ms-touch-action   : manipulation;
    touch-action       : manipulation;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    -webkit-appearance : none
}

.cif-demo button:disabled {
    cursor          : default;
    -ms-touch-action: none;
    touch-action    : none
}

.cif-demo .cmp-breadcrumb__list {
    margin-bottom: 5px
}

.cif-demo .cmp-breadcrumb__item:before {
    content: "> "
}

.cif-demo .cmp-breadcrumb__item--active {
    color: #707070
}

.cif-demo .cmp-contentfragment__element-title {
    font-weight: 700
}

.cif-demo .cmp-contentfragment__element-value p {
    margin-top: 2px
}

.cif-demo .cmp-contentfragment__element-value ol,
.cif-demo .cmp-contentfragment__element-value ul {
    margin: 5px 0 0 20px
}

.cif-demo .cmp-contentfragment__element-value ul {
    list-style: disc
}

.cif-demo .cmp-contentfragment__element-value ol {
    list-style: decimal
}

.cif-demo .cf-style-hide-fieldnames .cmp-contentfragment__element-title,
.cif-demo .cf-style-hide-title .cmp-contentfragment__title {
    display: none
}

.cif-demo .cf-style-1 .cmp-contentfragment__elements {
    display          : grid;
    grid-auto-columns: 1fr;
    grid-auto-flow   : row
}

.cif-demo .cf-style-1 .cmp-contentfragment__element-title {
    grid-row        : 1;
    background-color: #f6f6f6
}

.cif-demo .cf-style-1 .cmp-contentfragment__element-title,
.cif-demo .cf-style-1 .cmp-contentfragment__element-value {
    border : 1px solid #d1d1d1;
    margin : 0;
    padding: 10px
}

.cif-demo .cf-style-2 .cmp-contentfragment__elements {
    border               : 1px solid #d1d1d1;
    display              : grid;
    grid-template-columns: 1fr 1fr
}

.cif-demo .cf-style-2 .cmp-contentfragment__element-title {
    background-color: #f6f6f6
}

.cif-demo .cf-style-2 .cmp-contentfragment__element-title,
.cif-demo .cf-style-2 .cmp-contentfragment__element-value {
    border : 1px solid #d1d1d1;
    margin : 0;
    padding: 10px
}

.cif-demo .venia-HeroImage {
    min-height     : 460px;
    padding        : 20px 0;
    margin-bottom  : 40px;
    background     : #555 50% no-repeat;
    background-size: cover;
    position       : relative;
    text-align     : center
}

.cif-demo .venia-HeroImage .navbar {
    margin-top: 20px
}

.cif-demo .venia-HeroImage-title {
    display       : block;
    margin        : 0 auto 20px;
    text-transform: uppercase
}

.cif-demo .venia-HeroImage p {
    margin: 0 auto
}

.cif-demo .venia-HeroImage p.h3 {
    font-weight: 400;
    line-height: 2.58333333
}

.cif-demo .venia-HeroImage-title,
.cif-demo .venia-HeroImage p {
    text-shadow: 2px 4px 3px rgba(0, 0, 0, .5)
}

.cif-demo .venia-HeroImage-title .btn,
.cif-demo .venia-HeroImage p .btn {
    text-shadow: none
}

.cif-demo .header~.heroimage,
.cif-demo .header~.target .heroimage {
    position     : relative;
    top          : -130px;
    margin-bottom: -130px;
    overflow     : visible
}

@media (max-width:1199px) {

    .cif-demo .header~.heroimage,
    .cif-demo .header~.target .heroimage {
        margin-top: -40px
    }
}

@media (min-width:992px) {
    .cif-demo .venia-HeroImage {
        text-align: left
    }

    .cif-demo .venia-HeroImage .container {
        -webkit-transform: translateX(-50%);
        transform        : translateX(-50%);
        position         : absolute;
        top              : 0;
        bottom           : 0;
        left             : 50%
    }

    .cif-demo .venia-HeroImage-wrapper {
        -webkit-transform: translateY(-50%);
        transform        : translateY(-50%);
        position         : absolute;
        top              : 50%;
        left             : 0
    }
}

@media (min-width:992px) and (min-width:992px) {
    .cif-demo .venia-HeroImage-wrapper {
        margin-left: 16.66667%
    }
}

@media (max-width:991px) {
    .cif-demo .venia-HeroImage.width-full {
        padding: 180px 0 70px
    }
}

.cif-demo .jumbotron {
    padding-top     : 20px;
    padding-bottom  : 20px;
    margin-bottom   : 20px;
    color           : #fff;
    background-color: #eee
}

.cif-demo .jumbotron .h1,
.cif-demo .jumbotron h1 {
    color: inherit
}

.cif-demo .jumbotron p {
    margin-bottom: 10px;
    font-size    : 24px;
    font-weight  : 200
}

.cif-demo .jumbotron>hr {
    border-top-color: #d5d5d5
}

.cif-demo .container-fluid .jumbotron,
.cif-demo .container .jumbotron {
    border-radius: 0
}

.cif-demo .jumbotron .container {
    max-width: 100%
}

@media screen and (min-width:768px) {
    .cif-demo .jumbotron {
        padding-top   : 2pc;
        padding-bottom: 2pc
    }

    .cif-demo .container-fluid .jumbotron,
    .cif-demo .container .jumbotron {
        padding-left : 40px;
        padding-right: 40px
    }

    .cif-demo .jumbotron .h1,
    .cif-demo .jumbotron h1 {
        font-size: 3pc
    }
}

.cif-demo .container-fluid {
    margin-right : auto;
    margin-left  : auto;
    padding-left : 9pt;
    padding-right: 9pt
}

.cif-demo .cmp-teaser__title {
    font-size     : 40px !important;
    font-weight   : 600 !important;
    max-width     : 25pc;
    margin-bottom : 10px;
    text-align    : left;
    line-height   : 1.25em;
    letter-spacing: .32px;
    opacity       : 1
}

.cif-demo .cmp-teaser__description {
    margin-bottom: 1rem;
    line-height  : 1.5em;
    font-size    : 14px
}

.cif-demo .cmp-teaser__action-link {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    border-radius    : 1.25rem;
    display          : -webkit-inline-box;
    display          : -ms-inline-flexbox;
    display          : inline-flex;
    font-size        : 14px !important;
    font-weight      : 700 !important;
    height           : 2.5rem;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    letter-spacing   : .25px;
    margin-right     : .75rem;
    margin-top       : .75rem;
    min-width        : 12rem;
    text-decoration  : none !important;
    text-transform   : uppercase
}

.cif-demo .carousel__cardsroot {
    overflow: hidden
}

.cif-demo .carousel__cardsroot .price {
    font-size  : .875rem;
    line-height: 1rem;
    margin     : .5rem 0;
    min-height : 1rem
}

.cif-demo .carousel__cardsroot .price .regularPrice {
    text-decoration: line-through;
    font-size      : .8rem
}

.cif-demo .carousel__cardsroot .price .discountedPrice {
    font-weight: 700;
    color      : #007378;
    font-size  : 1.2rem
}

.cif-demo .carousel__cardsroot :after,
.cif-demo .carousel__cardsroot :before {
    content: "";
    display: table
}

.cif-demo .carousel__cardsroot :after {
    clear: both
}

.cif-demo .carousel__title {
    text-align   : center;
    margin-bottom: 10px;
    color        : #333
}

.cif-demo .carousel__container {
    position: relative;
    margin  : 25px auto;
    width   : 15pc
}

@media screen and (min-width:790px) {
    .cif-demo .carousel__container {
        width: 45pc
    }
}

@media screen and (min-width:1090px) {
    .cif-demo .carousel__container {
        width: 60pc
    }
}

@media screen and (min-width:1380px) {
    .cif-demo .carousel__container {
        width: 75pc
    }
}

@media screen and (min-width:1650px) {
    .cif-demo .carousel__container {
        width: 90pc
    }
}

.cif-demo .carousel__cardscontainer {
    margin: auto
}

.cif-demo .carousel__cardscontainer :after,
.cif-demo .carousel__cardscontainer :before {
    content: "";
    display: table
}

.cif-demo .carousel__cardscontainer :after {
    clear: both
}

.cif-demo .carousel__btn {
    background        : transparent;
    border            : 0;
    -webkit-box-shadow: none;
    box-shadow        : none;
    outline           : none;
    cursor            : pointer;
    height            : 20px;
    margin-top        : -25px;
    position          : absolute;
    top               : 50%;
    width             : 20px
}

.cif-demo .carousel__btn--next {
    border-bottom    : 8px solid #888;
    border-right     : 8px solid #888;
    right            : 0;
    -webkit-transform: rotate(315deg);
    transform        : rotate(315deg)
}

.cif-demo .carousel__btn--prev {
    border-bottom    : 8px solid #888;
    border-left      : 8px solid #888;
    left             : 0;
    -webkit-transform: rotate(45deg);
    transform        : rotate(45deg)
}

@media screen and (max-width:769px) {
    .cif-demo .carousel__btn--next {
        right: 8%
    }

    .cif-demo .carousel__btn--prev {
        left: 8%
    }
}

.cif-demo .categorycarousel__anchor {
    display    : inline-block;
    line-height: 1rem;
    text-align : center
}

.cif-demo .categorycarousel__imagewrapper {
    background-position: 50% 50%;
    background-size    : cover;
    border-radius      : 50%;
    -webkit-box-shadow : 0 0 0 1px;
    box-shadow         : 0 0 0 1px;
    display            : block;
    height             : 7rem;
    margin             : 0 auto 1rem;
    width              : 7rem
}

.cif-demo .categorycarousel__image {
    height : 100%;
    opacity: 0;
    width  : 100%
}

.cif-demo .cmp-categorylist {
    padding: 1rem
}

.cif-demo .cmp-categorylist__content {
    display              : grid;
    grid-gap             : 3rem 1rem;
    grid-template-columns: repeat(auto-fit, 6rem);
    -webkit-box-pack     : center;
    -ms-flex-pack        : center;
    justify-content      : center
}

.cif-demo .cmp-categorylist__anchor {
    display    : block;
    line-height: 1rem;
    text-align : center;
    width      : 6rem
}

.cif-demo .cmp-categorylist__imagewrapper {
    background-position: 50% 50%;
    background-size    : cover;
    border-radius      : 50%;
    -webkit-box-shadow : 0 0 0 1px;
    box-shadow         : 0 0 0 1px;
    display            : block;
    height             : 5rem;
    margin             : 0 auto 1rem;
    width              : 5rem
}

.cif-demo .cmp-categorylist__image {
    height : 100%;
    opacity: 0;
    width  : 100%
}

.cif-demo .cmp-categorylist__name {
    display: block
}

.cif-demo .cmp-categorylist__title {
    text-align: center;
    padding   : 2rem
}

.cif-demo .loader-img {
    height    : 4pc;
    width     : 4pc;
    background: url(../resources/images/logo.svg)
}

.cif-demo .flow__root {
    --flow-footer-height: 5.5rem;
    position            : relative
}

.cif-demo .flow__body {
    -webkit-animation-duration       : 224ms;
    animation-duration               : 224ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count        : 1;
    -webkit-animation-name           : enter;
    animation-name                   : enter;
    bottom                           : var(--flow-footer-height);
    -webkit-box-shadow               : 0 -1px #e0e0e0;
    box-shadow                       : 0 -1px #e0e0e0;
    left                             : 0;
    position                         : absolute;
    right                            : 0
}

.cif-demo .flow__body,
.cif-demo .flow__footer {
    background-color: #fff;
    display         : grid
}

.cif-demo .flow__footer {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    grid-auto-columns: -webkit-min-content;
    grid-auto-columns: min-content;
    grid-auto-flow   : column;
    grid-gap         : .75rem;
    height           : var(--flow-footer-height);
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    justify-items    : center;
    margin           : 0 1.5rem;
    padding          : 1.5rem 0 1rem;
    position         : relative
}

@-webkit-keyframes enter {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform        : translate3d(0, 100%, 0)
    }

    to {
        opacity          : 1;
        -webkit-transform: translateZ(0);
        transform        : translateZ(0)
    }
}

@keyframes enter {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform        : translate3d(0, 100%, 0)
    }

    to {
        opacity          : 1;
        -webkit-transform: translateZ(0);
        transform        : translateZ(0)
    }
}

.cif-demo .icon__root {
    height: 25px;
    width : 25px
}

.cif-demo .icon__root.icon__root-close {
    background: url(src/main/resourcesces/images/close.svg)
}

.cif-demo .icon__root.icon__root-kebab {
    background: url(src/main/resourcesces/images/kebab.svg)
}

.cif-demo .icon__root.icon__root_heart {
    background: no-repeat 50% url(src/main/resourcesces/images/heart.svg)
}

.cif-demo .icon__root.icon__root_pencil {
    background: no-repeat 50% url(src/main/resourcesces/images/pencil.svg)
}

.cif-demo .icon__root.icon__root_trash {
    background: no-repeat 50% url(src/main/resourcesces/images/trash.svg)
}

.cif-demo .icon__root.icon__root_lock {
    background: no-repeat 50% url(src/main/resourcesces/images/lock.svg)
}

.cif-demo .cmp-Minicart__emptyMiniCartBody__emptyTitle {
    font-size    : 1.5rem;
    line-height  : 1.25;
    font-style   : italic;
    margin-bottom: 1.5rem
}

.cif-demo ul.cmp-navigation__group {
    list-style-type: revert;
    margin: revert;
    padding: revert;
}

.cif-demo ul.cmp-navigation__group a {
    color: #1473e6;
}

.cif-demo .thumbnail__root {
    border            : 1px solid #212121;
    border-radius     : 50%;
    height            : .875rem;
    width             : .875rem;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow        : 0 0 0 1px #fff;
    outline           : none
}

.cif-demo .thumbnail__rootSelected {
    background-color: #212121
}

.cif-demo .thumbnail__image {
    display: none
}

@media (min-width:1024px) {
    .cif-demo .thumbnail__root {
        border       : 0;
        border-radius: 0;
        height       : auto;
        width        : auto
    }

    .cif-demo .thumbnail__rootSelected {
        -webkit-box-shadow: 0 0 10px 0 #007378;
        box-shadow        : 0 0 10px 0 #007378;
        background-color  : #212121
    }

    .cif-demo .thumbnail__image {
        background-color  : #f6f6f6;
        border-radius     : 2px;
        -webkit-box-shadow: 0 0 0 1px #fff;
        box-shadow        : 0 0 0 1px #fff;
        display           : block;
        height            : auto;
        width             : 100%
    }
}

.cif-demo .thumbnailList__root {
    -ms-flex-line-pack   : stretch;
    align-content        : stretch;
    display              : grid;
    grid-auto-flow       : column;
    grid-gap             : 1rem;
    grid-template-columns: repeat(auto-fit, 1rem);
    -webkit-box-pack     : center;
    -ms-flex-pack        : center;
    justify-content      : center;
    margin-top           : 1rem;
    z-index              : 1
}

@media (min-width:1024px) {
    .cif-demo .thumbnailList__root {
        -ms-flex-line-pack   : start;
        align-content        : start;
        grid-auto-flow       : row;
        grid-gap             : 1.5rem;
        grid-template-columns: 1fr;
        margin-top           : 0
    }
}

.cif-demo .carousel__root {
    display              : grid;
    grid-template-areas  : "main""thumbs";
    grid-template-columns: auto;
    grid-template-rows   : auto
}

@media (min-width:1024px) {
    .cif-demo .carousel__root {
        grid-gap             : 1.5rem;
        grid-template-areas  : "thumbs main";
        grid-template-columns: 17fr 80fr
    }
}

.cif-demo .carousel__imageContainer {
    display              : grid;
    grid-area            : main;
    grid-template-columns: repeat(3, 1fr)
}

.cif-demo .carousel__currentImage {
    background-color: #f6f6f6;
    border-radius   : 2px;
    width           : 100%;
    grid-area       : 1/1/2/4
}

.cif-demo .carousel__chevron-left,
.cif-demo .carousel__chevron-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    outline: none;
    z-index: 1
}

.cif-demo .carousel__chevron-left {
    -webkit-box-pack: start;
    -ms-flex-pack   : start;
    justify-content : flex-start;
    grid-area       : 1/1/2/2;
    margin-left     : 1.625rem
}

.cif-demo .carousel__chevron-right {
    -webkit-box-pack: end;
    -ms-flex-pack   : end;
    justify-content : flex-end;
    grid-area       : 1/3/2/4;
    margin-right    : 1.625rem
}

@media (min-width:1024px) {

    .cif-demo .carousel__chevron-left,
    .cif-demo .carousel__chevron-right {
        display: none
    }
}

.cif-demo .select__wrapper {
    display              : inline-grid;
    grid-auto-flow       : column;
    grid-template-areas  : "input icon";
    grid-template-columns: auto 2.25rem;
    height               : 2.25rem
}

.cif-demo .select__input {
    grid-area    : input-start/input-start/input-end/icon-end;
    padding-right: calc(2.25rem - 1px)
}

.cif-demo .quantity__root {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column
}

.cif-demo .richText__root {
    font-size  : .875rem;
    line-height: 1.25rem;
    padding    : 0 .5rem
}

.cif-demo .richText__root p {
    margin: 0 0 1rem
}

.cif-demo .richText__root ul {
    list-style-type: disc;
    margin         : 0 0 1rem;
    padding-left   : 2.5rem
}

.cif-demo .option__root {
    border-bottom: 1px solid #e0e0e0;
    margin       : 0 1.5rem;
    padding      : 1.75rem 0
}

.cif-demo .option__title {
    font-size    : 1rem;
    font-weight  : 600;
    line-height  : 1.5;
    margin-bottom: 1.5rem
}

.cif-demo .productFullDetail__root {
    display: block
}

@media (min-width:1024px) {
    .cif-demo .productFullDetail__root {
        -webkit-box-align    : start;
        -ms-flex-align       : start;
        align-items          : start;
        display              : grid;
        grid-auto-flow       : row;
        grid-template-areas  :
            "images title"
            "images price"
            "images options"
            "images quantity"
            "images actions"
            "images .";
        grid-template-columns: 1.5625fr 1fr;
        grid-template-rows   : repeat(5, -webkit-min-content) 1fr [fold];
        grid-template-rows   : repeat(5, min-content) 1fr [fold];
        padding              : 2.5rem 4rem
    }
}

.cif-demo .productFullDetail__section {
    border      : solid #e0e0e0;
    border-width: 0 0 1px;
    margin      : 0 1.5rem;
    padding     : 1.5rem 0
}

.cif-demo .productFullDetail__section .required {
    color: #c0123f
}

.cif-demo .productFullDetail__sectionTitle {
    font-size    : 1rem;
    font-weight  : 600;
    line-height  : 1.5;
    margin-bottom: 1.5rem;
    text-align   : center
}

.cif-demo .productFullDetail__customizeBundle,
.cif-demo .productFullDetail__sectionTitle {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center
}

.cif-demo .productFullDetail__customizeBundle {
    grid-area: actions
}

.cif-demo .productFullDetail__sku {
    grid-column: 2 / span 1;
    grid-row: fold / span 1;
}

@media (min-width: 1024px) {
    .cif-demo .productFullDetail__sku {
        align-self: stretch;
        border-top-width: 1px;
        margin: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.cif-demo .productFullDetail__title {
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    display              : grid;
    grid-area            : title;
    grid-gap             : 1rem;
    grid-template-columns: 1fr -webkit-max-content;
    grid-template-columns: 1fr max-content;
    line-height          : 1.5;
    padding              : 1rem 1.5rem
}

@media (min-width:1024px) {
    .cif-demo .productFullDetail__title {
        padding: 1.5rem
    }
}

.cif-demo .productFullDetail__productName {
    font-size  : 1rem;
    font-weight: 600
}

@media (min-width:1024px) {
    .cif-demo .productFullDetail__productName {
        font-size  : 1.3125rem;
        font-weight: 400
    }
}

.cif-demo .productFullDetail__price {
    grid-area: price;
    padding: 0 1.5rem;
}

.cif-demo .productFullDetail__root .productFullDetail__price .regularPrice {
    text-decoration: line-through;
    font-size      : .8rem
}

.cif-demo .productFullDetail__root .productFullDetail__price .discountedPrice {
    font-weight: 700;
    color      : #007378;
    font-size  : 1.2rem
}

.cif-demo .productFullDetail__root .productFullDetail__price .you-save {
    font-size: .9rem;
    color    : #707070
}

.cif-demo .productFullDetail__root .productFullDetail__price .you-save:before {
    display: block;
    content: " "
}

.cif-demo .productFullDetail__imageCarousel {
    grid-area  : images;
    grid-column: 1/2;
    grid-row   : 1/fold;
    margin     : 0 auto;
    max-width  : 40pc
}

@media (min-width:1024px) {
    .cif-demo .productFullDetail__imageCarousel {
        margin   : 0;
        max-width: 50pc;
        padding  : 1.5rem 0
    }
}

.cif-demo .productFullDetail__options {
    grid-area: options
}

.cif-demo .productFullDetail__quantity {
    grid-area: quantity
}

.cif-demo .productFullDetail__groupedProducts table {
    width: 100%
}

.cif-demo .productFullDetail__groupedProducts th,
td {
    padding: 15px
}

.cif-demo .productFullDetail__groupedProducts th,
tr:nth-child(2n) {
    background-color: #f2f2f2
}

.cif-demo .productFullDetail__groupedProducts .price {
    margin-top : 5px;
    font-weight: 700
}

.cif-demo .productFullDetail__bundleProduct .priceInfo {
    float: right
}

.cif-demo .productFullDetail__bundleProduct .bundlePrice {
    font-weight: 700
}

.cif-demo .bundleProduct__quantityTitle {
    font-size  : 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin     : 1.5rem 0 .5rem
}

.cif-demo .productFullDetail__bundleProduct select[multiple] {
    width : 75%;
    height: unset
}

.cif-demo .productFullDetail__bundleProduct .bundleOptionSelect__root {
    width                : 75%;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column
}

.cif-demo .productFullDetail__bundleProduct .option__quantity {
    -moz-appearance: textfield;
    margin         : 0;
    height         : 34px;
    text-align     : center;
    width          : 54px;
    padding        : 1px 9px
}

.cif-demo .productFullDetail__bundleProduct .option__quantity::-webkit-inner-spin-button,
.cif-demo .productFullDetail__bundleProduct .option__quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin            : 0
}

.cif-demo .productFullDetail__actions {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    grid-area        : actions;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center
}

@media (min-width:1024px) {
    .cif-demo .productFullDetail__actions {
        border-bottom-width: 0
    }
}

.cif-demo .productFullDetail__description {
    grid-column: 1/span 1;
    grid-row   : fold/span 1
}

@media (min-width:1024px) {
    .cif-demo .productFullDetail__description {
        -ms-flex-item-align: stretch;
        align-self         : stretch;
        border-top-width   : 1px;
        margin             : 0;
        padding-left       : 1.5rem;
        padding-right      : 1.5rem
    }
}

.cif-demo .productFullDetail__details {
    grid-column: 1/span 2;
    grid-row   : end/span 1;
    border: none;
}

@media (min-width:1024px) {
    .cif-demo .productFullDetail__details {
        -ms-flex-item-align: stretch;
        align-self         : stretch;
        border-top-width   : 1px;
        margin             : 0;
        padding-left       : 1.5rem;
        padding-right      : 1.5rem
    }
}

.cif-demo .productFullDetail__related {
    border-bottom-width: 0;
    grid-column        : 1/span 2
}

.cif-demo .productFullDetail__staged {
    grid-column     : span 2;
    background-color: #f9aa80;
    padding         : 2px 5px
}

.cif-demo .tile__root {
    border       : 1px solid #212121;
    border-radius: 2px;
    height       : 3rem;
    margin-left  : 1rem;
    margin-top   : 1rem;
    min-width    : 3rem;
    padding      : 0 .75rem
}

@media (min-width:1024px) {
    .cif-demo .tile__root {
        height   : 2rem;
        min-width: 2rem;
        padding  : 0 .5rem
    }
}

.cif-demo .tile__root_selected {
    background-color: #212121;
    color           : #fff
}

.cif-demo .swatch__root {
    background-color: #f6f6f6;
    border-color    : rgba(0, 0, 0, .1);
    color           : #fff;
    padding         : 0
}

.cif-demo .swatch__root_selected {
    background-image: linear-gradient(-45deg, rgba(0, 0, 0, .2), transparent)
}

.cif-demo .tileList__root {
    display      : -webkit-box;
    display      : -ms-flexbox;
    display      : flex;
    -ms-flex-wrap: wrap;
    flex-wrap    : wrap;
    margin-left  : -1rem;
    margin-top   : -1rem
}

.cif-demo .productcarousel__root {
    overflow: hidden
}

.cif-demo .productcarousel__root .price {
    font-size  : .875rem;
    line-height: 1rem;
    margin     : .5rem 0;
    min-height : 1rem
}

.cif-demo .productcarousel__root .price .regularPrice {
    text-decoration: line-through;
    font-size      : .8rem
}

.cif-demo .productcarousel__root .price .discountedPrice {
    font-weight: 700;
    color      : #007378;
    font-size  : 1.2rem
}

.cif-demo .productcarousel__root :after,
.cif-demo .productcarousel__root :before {
    content: "";
    display: table
}

.cif-demo .productcarousel__root :after {
    clear: both
}

.cif-demo .productcarousel__title {
    text-align   : center;
    margin-bottom: 10px;
    color        : #333
}

.cif-demo .product__image {
    max-width : 15pc;
    max-height: 15pc
}

.cif-demo .productcarousel__container {
    position: relative;
    margin  : 25px auto;
    width   : 15pc
}

@media screen and (min-width:790px) {
    .cif-demo .productcarousel__container {
        width: 45pc
    }
}

@media screen and (min-width:1090px) {
    .cif-demo .productcarousel__container {
        width: 60pc
    }
}

@media screen and (min-width:1380px) {
    .cif-demo .productcarousel__container {
        width: 75pc
    }
}

@media screen and (min-width:1650px) {
    .cif-demo .productcarousel__container {
        width: 90pc
    }
}

.cif-demo .card {
    border    : 10px solid #fff;
    float     : left;
    font-size : 20px;
    text-align: center;
    width     : 15pc
}

.cif-demo .productcarousel__cardscontainer {
    margin: auto
}

.cif-demo .productcarousel__cardscontainer :after,
.cif-demo .productcarousel__cardscontainer :before {
    content: "";
    display: table
}

.cif-demo .productcarousel__cardscontainer :after {
    clear: both
}

.cif-demo .product__card {
    float: left
}

.cif-demo .product__card__image {
    height: 243px
}

.cif-demo .productcarousel__btn {
    background        : transparent;
    border            : 0;
    -webkit-box-shadow: none;
    box-shadow        : none;
    outline           : none;
    cursor            : pointer;
    height            : 20px;
    margin-top        : -25px;
    position          : absolute;
    top               : 50%;
    width             : 20px
}

.cif-demo .productcarousel__btn--next {
    border-bottom    : 8px solid #888;
    border-right     : 8px solid #888;
    right            : 0;
    -webkit-transform: rotate(315deg);
    transform        : rotate(315deg)
}

.cif-demo .productcarousel__btn--prev {
    border-bottom    : 8px solid #888;
    border-left      : 8px solid #888;
    left             : 0;
    -webkit-transform: rotate(45deg);
    transform        : rotate(45deg)
}

@media screen and (max-width:769px) {
    .cif-demo .productcarousel__btn--next {
        right: 8%
    }

    .cif-demo .productcarousel__btn--prev {
        left: 8%
    }
}

.cif-demo .item__root .item__name,
.cif-demo .item__root .price {
    font-size  : .875rem;
    line-height: 1rem;
    margin     : .5rem 0;
    min-height : 1rem
}

.cif-demo .item__root .price .regularPrice {
    text-decoration: line-through;
    font-size      : .8rem
}

.cif-demo .item__root .price .discountedPrice {
    font-weight: 700;
    color      : #007378;
    font-size  : 1.2rem
}

.cif-demo .item__images {
    display            : grid;
    grid-template-areas: "main"
}

.cif-demo .item__image {
    display                           : block;
    grid-area                         : main;
    height                            : auto;
    opacity                           : 1;
    -webkit-transition-duration       : 512ms;
    transition-duration               : 512ms;
    -webkit-transition-property       : opacity, visibility;
    transition-property               : opacity, visibility;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function        : ease-out;
    visibility                        : visible;
    width                             : 100%
}

.cif-demo .item__imagePlaceholder {
    background-color: #f6f6f6
}

.cif-demo .item__image_pending {
    opacity   : 0;
    visibility: hidden
}

.cif-demo .item__name_pending,
.cif-demo .item__price_pending {
    background-color: #f6f6f6
}

.cif-demo .item__price_pending {
    width: 3rem
}

.cif-demo .gallery__root {
    display              : grid;
    grid-template-areas  : "actions""items";
    grid-template-columns: 1fr;
    line-height          : 1
}

.cif-demo .category__style_grid .gallery__items {
    -ms-flex-line-pack   : start;
    align-content        : start;
    display              : grid;
    grid-gap             : 1rem;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom        : 10px
}

.cif-demo .category__style_list .gallery__items {
    display      : block;
    margin-bottom: 10px
}

@media (max-width:640px) {
    div .gallery__items {
        grid-template-columns: repeat(2, 1fr)
    }
}

.cif-demo .category__root {
    padding: 1rem
}

.cif-demo .category__root-message {
    text-align: center
}

.cif-demo .category__title {
    font-size  : 1.5rem;
    font-weight: 400;
    margin     : 0 0 1rem;
    padding    : 0 .5rem .5rem
}

.cif-demo .category__staged,
.cif-demo .item__staged {
    background-color: #f9aa80;
    padding         : 5px;
    margin          : 0 auto 5px;
    text-align      : center;
    width           : 150px
}

.cif-demo .category__pagination {
    position: -webkit-sticky;
    position: sticky;
    bottom  : 0
}

.cif-demo .category__categoryTitle {
    color      : #212121;
    font-size  : 1.375rem;
    font-weight: 300;
    line-height: 1.375rem;
    text-align : center
}

.cif-demo .category__pagination_root {
    display           : grid;
    grid-template-rows: 1fr;
    grid-column-gap   : .7rem;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    padding-top       : 1rem;
    padding-bottom    : 1rem;
    background-color  : #fff;
    border-top        : 1px solid #ccc;
    text-align        : center
}

.cif-demo .category__pagination_navbutton-inactive {
    color: #999
}

.cif-demo .category__pagination_navbutton-arrow {
    display       : grid;
    padding-bottom: 1px
}

.cif-demo .category__pagination_tilebutton {
    grid-row-start: 1;
    outline       : none
}

.cif-demo .category__pagination_tilebutton-text {
    border : 0;
    padding: .1rem .2rem
}

.cif-demo .category__pagination_icon-root {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : -webkit-inline-box;
    display          : -ms-inline-flexbox;
    display          : inline-flex;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    -ms-touch-action : manipulation;
    touch-action     : manipulation
}

.cif-demo .category__pagination_tilebutton-marker {
    border       : 1px solid;
    border-radius: 2px
}

.cif-demo .category__pagination_button {
    background         : none;
    border             : 0;
    cursor             : pointer;
    font-family        : Muli, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size          : 100%;
    padding            : 0;
    -ms-touch-action   : manipulation;
    touch-action       : manipulation;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    -webkit-appearance : none
}

.cif-demo .category__pagination_button :disabled {
    cursor          : default;
    -ms-touch-action: none;
    touch-action    : none
}

.cif-demo .category__image {
    min-height     : 460px;
    padding        : 20px 0;
    margin-bottom  : 40px;
    background     : #f6f6f6 50% no-repeat;
    background-size: cover;
    position       : relative;
    text-align     : center
}

.cif-demo .results__count {
    color        : #212121;
    font-size    : 1rem;
    text-align   : center;
    line-height  : 1rem;
    margin-bottom: 1.5rem;
    font-weight  : 200
}

.cif-demo .loadmore__button {
    display         : block;
    margin          : 5px auto;
    background-color: #000;
    color           : #fff;
    padding         : 5px 10px;
    border-radius   : 10px
}

.cif-demo .loadmore__spinner {
    display: none;
    width  : 40px;
    height : 40px;
    margin : 0 auto
}

.cif-demo .loadmore__spinner:after {
    content          : " ";
    display          : block;
    width            : 2pc;
    height           : 2pc;
    border-radius    : 50%;
    border-color     : #d1d1d1 transparent;
    border-style     : solid;
    border-width     : 6px;
    -webkit-animation: loadmore__spinner 1.2s linear infinite;
    animation        : loadmore__spinner 1.2s linear infinite
}

@-webkit-keyframes loadmore__spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform        : rotate(1turn)
    }
}

@keyframes loadmore__spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform        : rotate(1turn)
    }
}

.cif-demo .productteaser .item__root {
    position: relative
}

.cif-demo .productteaser .item__images {
    display            : grid;
    grid-template-areas: "main"
}

.cif-demo .productteaser .item__image {
    display                           : block;
    grid-area                         : main;
    height                            : auto;
    opacity                           : 1;
    -webkit-transition-duration       : 512ms;
    transition-duration               : 512ms;
    -webkit-transition-property       : opacity, visibility;
    transition-property               : opacity, visibility;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function        : ease-out;
    visibility                        : visible;
    width                             : 100%
}

.cif-demo .productteaser .item__name {
    top           : 40%;
    text-transform: uppercase;
    font-size     : 22px
}

.cif-demo .productteaser .item__name,
.cif-demo .productteaser .price {
    position        : absolute;
    display         : block;
    left            : 20%;
    color           : #fff;
    font-weight     : 900;
    background-color: rgba(0,0,0,0.6);
    padding         : 0.5rem;
}

.cif-demo .productteaser .price {
    top      : 45%;
    font-size: 18px
}

.cif-demo .productteaser .price .regularPrice {
    text-decoration: line-through;
    font-size      : .8rem
}

.cif-demo .productteaser .price .discountedPrice {
    font-weight: 700;
    color      : #007378;
    font-size  : 1.2rem
}

.cif-demo .productteaser .item__badge {
    width   : 150px;
    height  : 150px;
    right   : 0;
    overflow: hidden;
    position: absolute
}

.cif-demo .productteaser .item__badge :after,
.cif-demo .productteaser .item__badge :before {
    position    : absolute;
    z-index     : -1;
    content     : "";
    display     : block;
    border-color: transparent transparent #2980b9 #2980b9;
    border-style: solid;
    border-width: 5px
}

.cif-demo .productteaser .item__badge :before {
    top : 0;
    left: 0
}

.cif-demo .productteaser .item__badge :after {
    bottom: 0;
    right : 0
}

.cif-demo .productteaser .item__badge span {
    position          : absolute;
    display           : block;
    width             : 225px;
    padding           : 15px 0;
    background-color  : #3498db;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    box-shadow        : 0 5px 10px rgba(0, 0, 0, .1);
    color             : #fff;
    font              : 700 18px/1 Lato, sans-serif;
    text-shadow       : 0 1px 1px rgba(0, 0, 0, .2);
    text-transform    : uppercase;
    text-align        : center;
    left              : -25px;
    top               : 30px;
    -webkit-transform : rotate(45deg);
    transform         : rotate(45deg)
}

.cif-demo .productteaser .productteaser__cta {
    position  : relative;
    text-align: center;
    padding   : 10px 0
}

@media (max-width:768px) {
    .cif-demo .productteaser .item__name {
        font-size: 15px
    }

    .cif-demo .productteaser .item__price {
        top      : 60%;
        font-size: 10px
    }
}

@media (max-width:992px) {
    .cif-demo .productteaser .item__name {
        font-size: 18px
    }

    .cif-demo .productteaser .item__price {
        top      : 60%;
        font-size: 14px
    }
}

.cif-demo .search__root {
    display              : grid;
    grid-template-columns: minmax(15pc, 1fr) auto;
    grid-column-gap      : 2rem;
    grid-row-gap         : 1rem
}

.cif-demo .filterSection-header {
    padding: 1.5rem 0
}

.cif-demo .filterSection-title {
    font-size  : 14px;
    font-weight: 800;
    line-height: 14px
}

.cif-demo .filterBlock__root {
    display     : grid;
    border      : solid #e0e0e0;
    border-width: 1px 0 0
}

.cif-demo .filterBlock__toggler {
    opacity: 0
}

.cif-demo .filterBlock__header {
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    display              : grid;
    grid-auto-flow       : column;
    grid-template-columns: 1fr auto;
    min-height           : 3rem;
    cursor               : pointer
}

.cif-demo .filterBlock-name {
    height     : 1.5rem;
    line-height: 1.5rem;
    text-align : left;
    font-weight: 600
}

label {
    cursor: pointer
}

.cif-demo .filterBlock__toggler:checked~.filterList-items {
    display: grid
}

.cif-demo .filterBlock__toggler:checked+.filterBlock__header>.icon-closed {
    display: none
}

.cif-demo .filterBlock__toggler:checked+.filterBlock__header>.icon-open {
    display: block
}

.cif-demo .filterList-items {
    display              : none;
    gap                  : 1rem;
    grid-template-columns: 100%;
    padding              : .5rem 0
}

.cif-demo .filterDefault-icon {
    background-color: #fff;
    border          : 1px solid #212121;
    width           : 1rem;
    height          : 1rem;
    display         : -webkit-inline-box;
    display         : -ms-inline-flexbox;
    display         : inline-flex;
    border-radius   : 3px;
    margin-right    : 1rem
}

.cif-demo .currentFilters__root {
    display       : grid;
    gap           : .5rem;
    grid-auto-flow: row;
    padding       : .5rem 0
}

.cif-demo .currentFilter__root {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    border           : 1px solid #e0e0e0;
    border-radius    : 4px;
    display          : inline-grid;
    gap              : .5rem;
    grid-auto-flow   : column;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    padding          : .2rem .5rem;
    white-space      : nowrap
}

.cif-demo .icon-closed {
    display: block
}

.cif-demo .icon-open {
    display: none
}

.cif-demo .search__filters {
    grid-row-start: 1;
    grid-row-end  : 2 span
}

.cif-demo .sort__fields {
    float: right
}

.cif-demo .sort__fields label {
    font-size  : .8rem;
    font-weight: 700
}

.cif-demo .sort__fields select {
    font-size: 1rem
}

.cif-demo .cmp-teaser-banner-dark .cmp-teaser__content {
    margin-top : -500px;
    height     : 300px;
    min-height : 300px;
    float      : left;
    position   : relative;
    width      : 574px;
    margin-left: 133px
}

.cif-demo .cmp-teaser-banner-dark .cmp-teaser__title {
    text-align: left
}

.cif-demo .cmp-teaser-banner-dark .cmp-teaser__action-link {
    border          : 2px solid #00f;
    background-color: #00f;
    color           : #fff
}

.cif-demo .cmp-teaser-banner-light .cmp-teaser__content {
    margin-top : -500px;
    height     : 300px;
    min-height : 300px;
    float      : left;
    position   : relative;
    width      : 574px;
    margin-left: 133px
}

.cif-demo .cmp-teaser-banner-light .cmp-teaser__title {
    text-align: left;
    color     : #fff
}

.cif-demo .cmp-teaser-banner-light .cmp-teaser__description {
    color: #fff
}

.cif-demo .cmp-teaser-banner-light .cmp-teaser__action-link {
    border          : 2px solid #00f;
    background-color: #00f;
    color           : #fff
}

.cif-demo .cmp-teaser-feature-left {
    padding-top   : 10px;
    padding-bottom: 10px
}

.cif-demo .cmp-teaser-feature-left .cmp-teaser {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction   : row-reverse;
    flex-direction       : row-reverse;
    overflow             : hidden
}

.cif-demo .cmp-teaser-feature-left .cmp-teaser__image {
    -o-object-fit: contain;
    object-fit   : contain
}

.cif-demo .cmp-teaser-feature-left .cmp-teaser__content {
    padding: 5rem 2rem !important
}

.cif-demo .cmp-teaser-feature-left .cmp-teaser__title {
    color: #212121
}

.cif-demo .cmp-teaser-feature-left .cmp-teaser__action-link {
    border          : 2px solid #00f;
    background-color: #fff;
    color           : #00f
}

.cif-demo .cmp-teaser-feature-right {
    padding-top   : 10px;
    padding-bottom: 10px
}

.cif-demo .cmp-teaser-feature-right .cmp-teaser {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction   : row;
    flex-direction       : row;
    overflow             : hidden
}

.cif-demo .cmp-teaser-feature-right .cmp-teaser__image {
    -o-object-fit: contain;
    object-fit   : contain
}

.cif-demo .cmp-teaser-feature-right .cmp-teaser__content {
    padding: 5rem 2rem !important
}

.cif-demo .cmp-teaser-feature-right .cmp-teaser__title {
    text-align: left;
    color     : #212121
}

.cif-demo .cmp-teaser-feature-right .cmp-teaser__action-link {
    border          : 2px solid #00f;
    background-color: #fff;
    color           : #00f
}

.cif-demo .button__root {
    background                        : none;
    border                            : 1px solid rgba(var(--color), 1);
    border-radius                     : 1.5rem;
    color                             : rgba(var(--color), 1);
    font-size                         : .75rem;
    font-weight                       : 600;
    height                            : 2rem;
    min-width                         : 7.5rem;
    padding                           : 0 1rem;
    -webkit-transition-duration       : 384ms;
    transition-duration               : 384ms;
    -webkit-transition-property       : background-color, color;
    transition-property               : background-color, color;
    -webkit-transition-timing-function: var(--venia-anim-standard);
    transition-timing-function        : var(--venia-anim-standard);
    --color                           : var(--venia-text)
}

.cif-demo .button__root :hover {
    --color: var(--venia-teal)
}

.cif-demo .button__root :focus {
    -webkit-box-shadow: 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2);
    box-shadow        : 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2);
    outline           : none;
    --color           : var(--venia-teal)
}

.cif-demo .button__root :active,
.cif-demo .button__root :focus {
    -webkit-transition-duration: 128ms;
    transition-duration        : 128ms
}

.cif-demo .button__root :active {
    --color: var(--venia-teal-dark)
}

.cif-demo .button__root :disabled {
    pointer-events: none;
    --color       : var(--venia-grey-dark)
}

.cif-demo .button__filled {
    background-color: rgba(var(--color), 1);
    color           : #fff
}

.cif-demo .button__content {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : inline-grid;
    gap              : .5rem;
    grid-auto-flow   : column;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    justify-items    : center
}

.cif-demo .field__root {
    color  : #212121;
    display: grid
}

.cif-demo .field__label {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    font-size        : .875rem;
    font-weight      : 600;
    line-height      : 1rem;
    padding          : .375rem .125rem
}

.cif-demo .field__input {
    background        : #fff;
    border            : 1px solid #707070;
    border-radius     : 2px;
    color             : #212121;
    display           : -webkit-inline-box;
    display           : -ms-inline-flexbox;
    display           : inline-flex;
    -webkit-box-flex  : 0;
    -ms-flex          : 0 0 100%;
    flex              : 0 0 100%;
    font-size         : 1rem;
    height            : 2.25rem;
    margin            : 0;
    padding           : calc(.375rem - 1px) calc(.625rem - 1px);
    width             : 100%;
    -webkit-appearance: none
}

.cif-demo .field__input :focus {
    border-color      : #007378;
    -webkit-box-shadow: 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2);
    box-shadow        : 0 0 0 2px #d4f3ee, 0 0 .5rem 2px rgba(0, 115, 120, .2);
    outline           : none
}

.cif-demo .fieldIcons__root {
    display              : inline-grid;
    grid-auto-flow       : column;
    grid-template-areas  : "before input after";
    grid-template-columns: auto 1fr auto;
    height               : 2.25rem
}

.cif-demo .fieldIcons__input {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    grid-column      : before-start/after-end;
    grid-row         : input-start/input-end
}

.cif-demo .fieldIcons__input>input {
    padding-left : calc(1.875rem*var(--iconsBefore) - -.375rem - 1px);
    padding-right: calc(1.875rem*var(--iconsAfter) - -.375rem - 1px)
}

.cif-demo .fieldIcons__after,
.cif-demo .fieldIcons__before {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    pointer-events   : none;
    width            : 2.25rem
}

.cif-demo .fieldIcons__after:empty,
.cif-demo .fieldIcons__before:empty {
    display: none
}

.cif-demo .fieldIcons__before {
    grid-area: before
}

.cif-demo .fieldIcons__after {
    grid-area: after
}

.cif-demo .message__root {
    color      : #212121;
    font-size  : .875rem;
    font-weight: 400;
    line-height: 1rem;
    padding    : .375rem .125rem .125rem
}

.cif-demo .message__root:empty {
    display: none
}

.cif-demo .message__root_error {
    color: #c0123f
}

main.container {
    padding: .5em 1em
}

.cif-demo .cmp-experiencefragment--footer {
    background-color: #f6f6f6;
    border-top      : 1px solid #e0e0e0;
    color           : #202020;
    margin-top      : 1rem;
    padding         : 0 1rem
}

#footerCopyright {
    display    : block;
    color      : #707070;
    font-size  : .75rem;
    padding    : .5rem 2rem 1rem;
    line-height: normal;
    text-align : center
}

.cif-demo .header {
    position: -webkit-sticky;
    position: sticky;
    top     : 0;
    z-index : 10
}

.cif-demo .icon__root {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : -webkit-inline-box;
    display          : -ms-inline-flexbox;
    display          : inline-flex;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    -ms-touch-action : manipulation;
    touch-action     : manipulation
}

.cif-demo .cartCounter__root {
    font-weight: 600;
    margin-left: .3rem
}

.cif-demo .cartTrigger__root {
    height   : 3rem;
    min-width: 3rem
}

.cif-demo .navTrigger__root,
.cif-demo .searchTrigger__root {
    height: 3rem;
    width : 3rem
}

.cif-demo .searchTrigger__root {
    -webkit-transition-property       : color;
    transition-property               : color;
    -webkit-transition-duration       : 224ms;
    transition-duration               : 224ms;
    -webkit-transition-timing-function: cubic-bezier(0, 0, .2, 1);
    transition-timing-function        : cubic-bezier(0, 0, .2, 1)
}

.cif-demo .searchTrigger__open {
    color: #007378
}

.cif-demo .header__root {
    background-color  : #f6f6f6;
    -webkit-box-shadow: 0 1px #e0e0e0;
    box-shadow        : 0 1px #e0e0e0;
    display           : grid;
    grid-auto-columns : 100%;
    grid-auto-flow    : row;
    grid-auto-rows    : auto;
    grid-row-gap      : .5rem;
    position          : -webkit-sticky;
    position          : sticky;
    top               : 0;
    z-index           : 10
}

.cif-demo .header__toolbar {
    -ms-flex-line-pack   : center;
    align-content        : center;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    display              : grid;
    grid-template-areas  : "primary title secondary";
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows   : 3rem;
    justify-items        : center;
    min-height           : 3.5rem;
    padding              : 0 1rem
}

.cif-demo .header__toolbar>a {
    justify-self: start
}

.cif-demo .header__accountTrigger,
.cif-demo .header__cartTrigger,
.cif-demo .header__navTrigger {
    height: 3rem;
    width : 3rem
}

.cif-demo .header__accountTrigger {
    position: relative;
    display : inline-block
}

.cif-demo .header__logo {
    grid-area: title
}

.cif-demo .header__secondaryActions {
    grid-area            : secondary;
    width                : 100%;
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items        : end
}

@media (max-width:1023px) {
    .cif-demo .header__secondaryActions {
        grid-template-columns: 1fr 1fr
    }
}

.cif-demo .indicator__root {
    -ms-flex-line-pack: center;
    align-content     : center;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    display           : grid;
    gap               : 3rem;
    height            : calc(100% - 6rem);
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    justify-items     : center;
    margin            : 3rem 0;
    width             : 100%
}

.cif-demo .indicator__message {
    color         : #707070;
    font-size     : 1rem;
    letter-spacing: .25rem;
    text-transform: uppercase
}

.cif-demo .indicator__indicator {
    -webkit-animation-direction      : alternate;
    animation-direction              : alternate;
    -webkit-animation-duration       : 1.5s;
    animation-duration               : 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count        : infinite;
    -webkit-animation-name           : indicator__pulse;
    animation-name                   : indicator__pulse;
    -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-timing-function        : cubic-bezier(.4, 0, .2, 1)
}

@-webkit-keyframes indicator__pulse {
    0% {
        -webkit-filter   : grayscale(1);
        filter           : grayscale(1);
        -webkit-transform: scale(.75) rotate(-540deg);
        transform        : scale(.75) rotate(-540deg)
    }

    to {
        -webkit-filter   : grayscale(0);
        filter           : grayscale(0);
        -webkit-transform: scale(1) rotate(0deg);
        transform        : scale(1) rotate(0deg)
    }
}

@keyframes indicator__pulse {
    0% {
        -webkit-filter   : grayscale(1);
        filter           : grayscale(1);
        -webkit-transform: scale(.75) rotate(-540deg);
        transform        : scale(.75) rotate(-540deg)
    }

    to {
        -webkit-filter   : grayscale(0);
        filter           : grayscale(0);
        -webkit-transform: scale(1) rotate(0deg);
        transform        : scale(1) rotate(0deg)
    }
}

.cif-demo .suggestedCategories__root {
    padding: 0 1.5rem 1rem
}

.cif-demo .suggestedCategories__item {
    padding-bottom: .72rem
}

.cif-demo .suggestedCategories__item:last-child {
    padding-bottom: 0
}

.cif-demo .suggestedProduct__root {
    -ms-flex-line-pack   : start;
    align-content        : start;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    display              : grid;
    grid-gap             : .375rem 1rem;
    grid-template-areas  : "image name price";
    grid-template-columns: 60px 1fr;
    grid-template-rows   : -webkit-min-content;
    grid-template-rows   : min-content;
    padding-bottom       : 1rem
}

.cif-demo .suggestedProduct__root:last-child {
    padding-bottom: 0
}

.cif-demo .suggestedProduct__productImage {
    display: block;
    height : auto;
    width  : 100%
}

.cif-demo .suggestedProduct__productName {
    padding-right: 50%;
    word-break   : break-word
}

.cif-demo .suggestedProducts__items {
    padding: 0 1.5rem
}

.cif-demo .suggestedProducts__title {
    padding-bottom: 1rem;
    text-transform: uppercase
}

.cif-demo .suggestedProducts__titleText {
    display      : block;
    border-bottom: 2px solid #e0e0e0;
    padding      : .5rem 1.5rem
}

.cif-demo .autocomplete__root {
    border            : 1px solid #e0e0e0;
    font-size         : .8125rem;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    box-shadow        : 0 3px 10px rgba(0, 0, 0, .2);
    background-color  : #fff;
    z-index           : 2;
    padding           : 1rem 0
}

.cif-demo .autocomplete__statusContent {
    padding: .5rem 1.5rem
}

.cif-demo .searchBar__root {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : none;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    padding          : 0 1rem
}

.cif-demo .searchBar__root_open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.cif-demo .searchBar__form {
    display      : grid;
    justify-items: stretch;
    margin-bottom: .5rem
}

.cif-demo .searchBar__form,
.cif-demo .searchBar__searchInner {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    width            : 100%
}

.cif-demo .searchBar__searchInner {
    position        : relative;
    display         : -webkit-inline-box;
    display         : -ms-inline-flexbox;
    display         : inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
    max-width       : 24rem
}

.cif-demo .searchBar__SearchAutocompleteWrapper {
    text-align: left;
    margin    : -.5rem 0 .5rem;
    position  : absolute;
    top       : 100%;
    left      : 0;
    right     : 0
}

.cif-demo .product__card-actions {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.5rem;
}

.cif-demo .product__card-button {
    background: none;
    border: 1px solid rgba(var(--color),1);
    border-radius: 1.5rem;
    color: rgba(var(--color),1);
    font-size: 0.75rem;
    font-weight: 600;
    height: 2rem;
    min-width: 7.7rem;
    padding: 0 0.2rem;
    transition-duration: 384ms;
    transition-property: background-color, color;
    transition-timing-function: var(--venia-anim-standard);
    --color: var(--venia-text);
}

.cif-demo .product__card-button--add-to-cart {
    background-color: rgba(var(--color),1);
    min-width: 6.3rem;
    color: white;
}
