/*--------------------------------------------------------------
>>> TABLE OF CONTENTS: Product CSS for Mobile ATF
----------------------------------------------------------------
# Header
# Update Info
# Desktop
## Header
## Update Info
--------------------------------------------------------------*/

.site-element {
    max-width: 58rem;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.product-header-video,
.product-header-image {
    background-color: #fafafa;
    border: 1px solid #d3d3d3;
    margin: 1rem 0;
}

.product-header-video iframe,
.product-header-image img {
    display: inherit;
    padding: .5rem .5rem 0;
}

.product-call-to-actions {
    text-align: center;
    margin: 1rem 0;
}

/*--------------------------------------------------------------
# Update Info
--------------------------------------------------------------*/

.wpbprod-update-info {
    border: 1px solid #d3d3d3;
    color: #808080;
    font-size: .8rem;
}

.wpbprod-update-info tbody > tr:nth-child(odd) td {
    background-color: #f5f2f0;
}

.wpbprod-update-info td {
    padding: .5rem;
}

.wpbprod-rating svg {
    fill: #f1c40f;
    width: 15px;
    height: 15px;
}

.wpbprod-rating .star-empty {
    fill: #d3d3d3;
}

.wpbprod-update-info ul {
    margin: 0 0 0 1.5em;
    padding: 0;
}


@media (min-width: 46rem) {

    /*--------------------------------------------------------------
    ## Header
    --------------------------------------------------------------*/
    .product-header {
        display: flex;
        align-items: flex-start;
    }

    .product-header-video,
    .product-header-image {
        max-width: 590px;
    }

    .product-header-info {
        max-width: 320px;
        display: inline-block;
        vertical-align: top;
        margin: 1rem 0 0 1rem;
    }

    .product-header-info .wpbprod-update-info {
        width: 100%;
        max-width: 100%;
    }

    /*--------------------------------------------------------------
    ## Update Info
    --------------------------------------------------------------*/
    .wpbprod-update-info {
        max-width: 40%;
    }
}