@import url('../../TwoCols1/Css/TwoCols1.css');

#PrimaryContent {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

    #PrimaryContent #PageTitle {
        width: 100%;
    }

    #PrimaryContent #PageBody {
        width: calc(100% - var(--site-page-secondary-col-width) - 30px);
    }

    #PrimaryContent #PageSecondary {
        position: relative;
        box-sizing: border-box;
        width: var(--site-page-secondary-col-width);
    }

        #PrimaryContent #PageSecondary.fixed-position {
            position: fixed;
            z-index: 1; /* Make sure it's above anything without an explicit layer. */
            top: 130px;
            margin-left: calc(var(--content-area-width) - var(--site-page-tertiary-col-width) - var(--site-page-secondary-col-width) - 36px); /* To do: Why do we need the extra 6px on the gutter adjustment? */
            background: var(--site-color-white);
        }

/* Product Details */

#ProductInfo {
}

    #ProductInfo .productNote {
        margin: 0 0 1.5em;
    }

#ProductInfo .infoField {
    margin: 0 0 1.5em;
}

        #ProductInfo .infoField .infoLabel {
            display: inline-block;
            width: 150px;
            font-weight: bold;
        }

        #ProductInfo .infoField .infoMessage {
            display: inline;
        }
    
    #ProductInfo #StockInfo {
    }
    
        #ProductInfo .infoField .infoMessage .noStock {
        }
    
        #ProductInfo .infoField .infoMessage .lowStock {
        }
    
        #ProductInfo .infoField .infoMessage .inStock {
        }
    
    #ProductInfo #Availability {
    }

body[class*=shopct_product] #PageMedia {
    position: relative;
    z-index: 1;
    float: right;
    padding: 30px 30px 45px;
    margin: 0px 0px 30px 30px;
    width: calc(50% - 90px);
    border: var(--site-border-color) var(--site-border-width) solid;
}

    body[class*=shopct_product] #PageMedia figure {
        margin: 0px;
    }

    body[class*=shopct_product] #PageMedia:after {
        content: 'Click to Enlarge';
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: auto;
        font-size: 75%;
        text-align: center;
        padding: 15px 5px;
        background: rgba(0,0,0,0.75);
        color: white;
        box-sizing: border-box;
    }

    body[class*=shopct_product] #PageMedia:before {
        content: '\f00e';
        position: absolute;
        width: 100%;
        bottom: 0;
        height: auto;
        font-family: 'Font Awesome 5 Pro';
        font-size: 75%;
        text-align: center;
        padding: 15px 5px;
        padding-left: 140px;
        color: white;
        box-sizing: border-box;
        z-index: 2;
        right: 0;
    }

        body[class*=shopct_product] #PageMedia:hover {
            border: #ff8e31 1px solid;
            cursor: pointer;
        }

.extraInfo {
    margin-bottom: var(--site-box-margin-bottom);
}

    .extraInfo > div {
        box-sizing: border-box;
        float: left;
        clear: left;
        width: 49%;
        padding: 0 15px 15px;
        margin-bottom: 15px;
        /*border: #e8e4e0 1px solid;*/
    }

    .extraInfo > div > :last-child {
        margin-bottom: 0;
    }

        .extraInfo > div.features {
            float: right;
            clear: none;
            width: 49%;
        }

        .extraInfo > div h2:first-child {
            width: 100%;
            margin: 0 -15px 15px;
            padding: 10px 15px 8px;
            font-size: 100%;
            background: #f8f6f4;
            border-bottom: #e8e4e0 1px solid;
        }

        .extraInfo > div ul,
        .extraInfo > div ol {
            margin: 0 0 0.5em;
            padding-left: 0.75em;
        }

            .extraInfo > div ul li:not(:last-child),
            .extraInfo > div ol li:not(:last-child) {
                margin: 0 0 0.5em;
            }
    
/* Shopping Cart Product Functions */

.cart-functions {
}

/* Up Sell */

#UpSell {
}
        
/* Cross Sells */

#OnSells {
}

    #OnSells .title {
    }
    
    #OnSells .onSell {
    }
    
        #OnSells .onSell .title {
            padding: 0;
            font-size: 91.7%;
            background: transparent;
        }
    
        #OnSells .onSell .summary {
            font-size: 91.7%;
        }
        
        #OnSells .onSell .prices {
        }

    .productDataSheet {
        margin: var(--site-paragraph-margin);
    }

        .productDataSheet h2 {
            /* .hide-from-sight */
        }

        .productDataSheet .download {
            width: 100%;
            font-size: var(--site-font-size-smaller);
            text-align: center;
            text-transform: none;
        }

            .productDataSheet .download .button {
                width: 100%;
            }

                .productDataSheet .download .button span {
                    display: block;
                    font-weight: normal;
                    font-size: 80%;
                    line-height: 125%;
                }

    .productVideo {
        margin: var(--site-paragraph-margin);
    }

        .productVideo h2 {
            margin-top: 0;
            font-size: 100%;
        }

@media screen and (max-width: 1680px) {

    #PrimaryContent #PageSecondary.fixed-position {
        margin-left: 0px;
        right: var(--content-area-padding);
    }
}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 900px) {

    #PrimaryContent {
        gap: 0px 30px;
    }

    body[class*=shopct_product] #PageMedia {
        float: none;
        padding: 0px;
        margin: 0px 0px 30px;
        width: 100%;
    }

}

@media screen and (max-width: 600px) {

    #PrimaryContent #PageTitle {
        order: 1;
    }

    #PrimaryContent #PageBody {
        order: 3;
        width: 100%;
    }

    #PrimaryContent #PageSecondary {
        order: 2;
        width: 100%;
    }

        #PrimaryContent #PageSecondary #CartFunctions {
            position: fixed;
            bottom: 0px;
            left: 0px;
            z-index: 100;
            background: var(--site-color-white);
        }

    body[class*=shopct_product] .cart-functions > h2.title {
        margin: 0px;
        padding: 0.5em 0px;
        color: #fff;
        background-color: var(--site-color-ui-darkest);
        border: 0px;
    }

    body[class*=shopct_product] .cart-functions table.addProductsTable tr .qty {
        padding-top: var(--site-padding-thinnest);
        padding-bottom: 5px;
    }

    body[class*=shopct_product] .cart-functions table.addProductsTable tr td {
        padding-top: var(--site-padding-thinnest);
        padding-bottom: 5px;
    }

    body[class*=shopct_product] .cart-functions .addToCartButton {
        padding-bottom: var(--site-padding-thinnest);
    }

        body[class*=shopct_product] .cart-functions .addToCartButton .button-cart-add {
            --button-primary-padding-vertical: var(--site-padding-thinnest);
        }

    .extraInfo > div,
    .extraInfo > div.features {
        width: 100%;
        margin-bottom: 0px;
    }

}