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

/* Product Details */


/* 
   Page Layout
   - This is last to assure it overrides other rules if necessary
*/

#Page #PageContent #Primary {
    margin-bottom: 0;
}

#PageBody {
    --content-cols-gap: 30px;
    --cart-functions-width: 320px;
    position: relative;
    display: flex;
    gap: var(--content-cols-gap);
    align-items: flex-start;
    justify-content: space-between;
}

    #ProductContent {
        position: relative;
        width: calc(100% - var(--cart-functions-width) - var(--content-cols-gap));
    }

        #ProductContent #ProductShopInfo {
            display: flex;
            flex-direction: column;
            gap: var(--site-padding-thinner);
            margin-bottom: var(--site-box-margin-bottom);
            padding-bottom: var(--site-padding);
            border-bottom: var(--site-border-color-bright) 1px solid;
        }

            #ProductContent #ProductShopInfo .infoField {
                display: flex;
                justify-content: flex-start;
            }

                #ProductContent #ProductShopInfo .infoField .label {
                    width: 130px;
                    font-weight: bold;
                }

                #ProductContent #ProductShopInfo .infoField .value {
                }

                #ProductContent #ProductShopInfo #ProductNote {
                }

                    #ProductContent #ProductShopInfo #ProductNote .label {
                        display: none;
                    }

                #ProductContent #ProductShopInfo #ProductCode {
                    display: none;
                }

                #ProductContent #ProductShopInfo #Availability {
                }

                #ProductContent #ProductShopInfo #StockInfo {
                }

                    #ProductContent #ProductShopInfo #StockInfo .label {
                        display: none;
                    }

                    #ProductContent #ProductShopInfo #StockInfo .value {
                    }

                        #ProductContent #ProductShopInfo #StockInfo .value .stock {
                            padding: 7px 10px;
                            font-size: var(--site-font-size-small);
                            font-weight: bold;
                            color: #fff;
                            background: #477e27;
                            border-radius: var(--site-box-border-radius);
                        }

                            #ProductContent #ProductShopInfo #StockInfo .value .stock.low {
                                background: #c44601;
                            }

                            #ProductContent #ProductShopInfo #StockInfo .value .stock.none {
                                background: #9a0003;
                            }

        #ProductContent #ProductOverview {
            margin-bottom: var(--site-padding-thick);
        }

            #ProductContent #ProductOverview #ProductDescription {
                /* Don't give the description a width, it should expand to fill the screen if there are no images. */
                padding-top: var(--site-padding-thin);
            }

            #ProductContent #ProductOverview #ProductImages {
                /* Constrain the width of the images block. Don't use "width:" because we're working with flex box. Note: This approach could expand the size of smaller image file so we're relying on decent resolution images. */
                min-width: 45%;
                max-width: 45%;
                margin: 0 auto; /* Center the images if they're the only thing on the page (i.e. no #ProductDescription) */
                border: var(--site-border-color-bright) 1px solid;
                border-radius: var(--site-box-border-radius);
            }

            #ProductContent #ProductOverview #ProductDescription + #ProductImages {
                /* When images appear after the product description and not on their own, we might want to treat them differently. */
            }

            #ProductContent #ProductOverview #ProductImages:empty {
                display: none;
            }

        #ProductContent #ProductVariations {
            margin-bottom: var(--site-box-margin-bottom);
        }

            #ProductContent #ProductVariations .section-title {
                margin-top: 0px;
            }

            #ProductContent #ProductVariations #ProductVariationLinks {
                max-height: 210px;
                overflow-y: auto;
                padding: var(--site-padding-thin);
                padding-left: 0px;
                border: var(--site-border-color-bright) 1px solid;
                border-left: 0px;
                border-right: 0px;
            }

                #ProductContent #ProductVariations #ProductVariationLinks a {
                    padding-left: 1.25em;
                }

                #ProductContent #ProductVariations #ProductVariationLinks a::before {
                    content: "\f054";
                    position: absolute;
                    left: 0px;
                    -moz-osx-font-smoothing: greyscale;
                    -webkit-font-smoothing: antialiased;
                    text-align: center;
                    color: var(--site-link-color);
                    font-family: var(--site-icon-font-family);
                    font-weight: var(--site-icon-font-weight);
                    font-style: normal;
                    font-variant: normal;
                    text-rendering: auto;
                }

                    #ProductContent #ProductVariations #ProductVariationLinks a .productCode {
                        text-transform: uppercase;
                    }

                    #ProductContent #ProductVariations #ProductVariationLinks a .productCode::after {
                        content: " - ";
                    }

        #ProductContent #ProductDetails {
            margin-bottom: var(--site-box-margin-bottom);
        }

            #ProductContent #ProductDetails > :first-child {
                margin-top: 0px !important;
            }

            #ProductContent #ProductDetails > :last-child {
                margin-bottom: 0px !important;
            }

        #ProductContent #ProductLinks {
        }

            #ProductContent #ProductLinks #UpSell {
                border-top: var(--site-border-color-bright) 1px solid;
                margin-top: var(--site-padding-thick);
                margin-left: -10000em;
                margin-right: -10000em;
                padding-top: var(--site-padding);
                padding-left: 10000em;
                padding-right: 10000em;
            }

                #ProductContent #ProductLinks #UpSell .section-title {
                    margin-top: 0px !important;
                }

            #ProductContent #ProductLinks #RelatedProducts {
                border-top: var(--site-border-color-bright) 1px solid;
                margin-top: var(--site-padding-thick);
                margin-left: -10000em;
                margin-right: -10000em;
                padding-top: var(--site-padding-thick);
                padding-left: 10000em;
                padding-right: 10000em;
                background: var(--site-color-ui-lighter);
            }

                #ProductContent #ProductLinks #RelatedProducts .section-title {
                    margin-top: 0px !important;
                }

            #ProductContent #ProductLinks .cards-smaller .item.product .text {
            }

                #ProductContent #ProductLinks .cards-smaller .item.product .text .title {
                    -webkit-line-clamp: 4;
                }

                #ProductContent #ProductLinks .cards-smaller .item.product .text .stockInfo {
                    display: none;
                }

                #ProductContent #ProductLinks .cards-smaller .item.product .text .cartOptions .addToCartButton .quantitySelector {
                    padding: 7px;
                    width: 50px;
                }

                #ProductContent #ProductLinks .cards-smaller .item.product .text .cartOptions .addToCartButton .button {
                    padding: 8px;
                }

    #BuyProduct {
        position: relative;
        position: sticky;
        top: var(--site-padding-thinner);
        width: var(--cart-functions-width);
    }

        .productDetails .cartFunctions table.addProductsTable {
        }

            .productDetails .cartFunctions table.addProductsTable td.product {
            }

                .productDetails .cartFunctions table.addProductsTable td.product .productTitle {
                }

                    .productDetails .cartFunctions table.addProductsTable td.product .productTitle .productCode {
                        display: block;
                        text-transform: uppercase;
                        font-size: 85%;
                        margin-bottom: 3px;
                        font-weight: 900;
                    }

/* ############################################################################
   ## 
   ##  Layout for Different Screen Sizes
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in all templates in the site, or you'll run into trouble.
   ##
   ######################################################################### */

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

    #Page {
        width: 100%;
    }

    #Tertiary {
        display: none;
    }


}

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

    #PageBody {
        --content-cols-gap: 20px;
        --cart-functions-width: 250px;
    }

    .productDetails .cartFunctions table.addProductsTable tr td.qty,
    .productDetails .cartFunctions table.addProductsTable tr td.product {
        box-sizing: border-box;
        display: block;
        padding: var(--site-padding-thinner) var(--site-padding-thinner) 0px;
    }

}

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

    #PageBody {
        flex-direction: column-reverse;
    }

    #ProductContent {
        width: 100%;
    }

        #ProductContent #ProductOverview {
            flex-direction: column;
        }

            #ProductContent #ProductOverview #ProductDescription {
                width: 100%;
            }

            #ProductContent #ProductOverview #ProductImages {
                width: 100%;
                max-width: 100%;
            }

    #BuyProduct {
        position: relative;
        width: 100%;
    }

        .productDetails .cartFunctions table.addProductsTable tr td.qty,
        .productDetails .cartFunctions table.addProductsTable tr td.product {
            width: auto;
        }

}