/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ 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.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.cif-demo .productteaser {
    max-width: 360px;
    margin: 0 auto;
}

.cif-demo .productteaser .item__image {
    border: none !important;
}

.cif-demo .productcarousel__container,
.cif-demo .carousel__container {
    /* 3x the item width, 4 items */
    max-width: 720px;
    width: 100%;
}

/*
 * there is a layout gap for 32px left and right of the container
 * and for a viewport >= 1024px there is the navigation of 280px width
 */

/* 720 + 64 + 280 */
@media screen and (max-width:1064px) {
    .cif-demo .productcarousel__container {
        max-width: 480px;
    }
}

/* 480 + 64 */
@media screen and (max-width:544px) {
    .cif-demo .productcarousel__container {
        max-width: 240px;
    }
}

/* undo the styles from the core components */

@media screen and (min-width:790px) {
    .cif-demo .productcarousel__container {
        width: 100%;
    }
}

.cif-demo .searchBar__root {
    display: block !important;
}

.cif-demo .navigation__root {
    position: absolute;
    min-height: 450px;
    z-index: 1500;
}

.cif-demo .navigation__mask {
    z-index: 1400;
}

.cif-demo .cmp-breadcrumb__item::before {
	content: "" !important;
}

.cif-demo .productcollection__item-xf.test-class {
    grid-row: 1;
    background-color: #f5f5f5;
    border: solid #e0e0e0;
    padding: 1rem;
}