/* ############################################################################
   ##
   ##  Shop Module - Inline Styles
   ##
   ##  Shop module elements that are displayed within regular page templates.
   ##
   ######################################################################### */

/* ####################################
   Shipping Cart Table(s)
   ################################## */

table.shoppingCart {
}

    table.shoppingCart thead th {
    }

    table.shoppingCart td {
    }

    table.shoppingCart #BookingsHeaderRow {
    }

    table.shoppingCart #ProductsHeaderRow {
    }

    table.shoppingCart tr.itemsCategory {
        background: var(--site-color-1-lighter);
    }

        table.shoppingCart tr.itemsCategory th.itemsCategoryLabel {
        }

            table.shoppingCart tr.itemsCategory td.itemsCategoryLabel .itemsCategoryName {
            }

            table.shoppingCart tr.itemsCategory td.itemsCategoryLabel .itemsCategoryProductAddLink {
            }

                table.shoppingCart tr.itemsCategory td.itemsCategoryLabel .itemsCategoryProductAddLink a {
                }

    table.shoppingCart .productRow {
    }

        table.shoppingCart .productRow:nth-child(2n+1) {
        }

        table.shoppingCart .productRow td {
            vertical-align: middle;
        }

            table.shoppingCart .productRow td.itemInfo {
                width: 60%;
            }

                table.shoppingCart .productRow td.itemInfo .productImage {
                    display: inline-block;
                    vertical-align: middle;
                    width: var(--site-thumbnail-micro-width);
                    height: var(--site-thumbnail-micro-width);
                    margin-right: var(--site-margin-thinner);
                    text-align: center;
                }

                    table.shoppingCart .productRow td.itemInfo .productImage img {
                        display: inline-block;
                        width: auto;
                        height: auto;
                        max-width: 100%;
                        max-height: 100%;
                    }

                table.shoppingCart .productRow td.itemInfo .productInfo {
                    display: inline-block;
                    vertical-align: middle;
                }

                    table.shoppingCart .productRow td.itemInfo .productInfo .productLabel {
                        margin-bottom: var(--site-margin-thinnest);
                    }

                        table.shoppingCart .productRow td.itemInfo .productInfo .productLabel .productCode {
                            display: inline-block;
                        }

                            table.shoppingCart .productRow td.itemInfo .productInfo .productLabel .productCode::after {
                                text-transform: uppercase;
                                content: " - ";
                            }

                        table.shoppingCart .productRow td.itemInfo .productInfo.productLabel .productName {
                        }

                    table.shoppingCart .productRow td.itemInfo .productInfo .productNote {
                    }

                        table.shoppingCart .productRow td.itemInfo .productInfo .productNote .helpText {
                        }

                    table.shoppingCart .productRow td.itemInfo .productInfo .deliveryType {
                    }

            table.shoppingCart .productRow td.itemCode {
                width: 10%;
                white-space: nowrap;
            }

            table.shoppingCart .productRow td.itemPrice {
                width: 10%;
                white-space: nowrap;
            }

            table.shoppingCart .productRow td.itemQuantity {
                width: 10%;
            }

                table.shoppingCart .productRow td.itemQuantity .quantitySelector {
                    display: inline-block;
                    vertical-align: middle;
                    width: 75px;
                    padding: var(--site-forms-field-padding);
                    font-size: 100%;
                    border-color: var(--site-forms-field-border-color);
                    border-width: var(--site-forms-field-border-width);
                    border-style: solid;
                    border-radius: var(--site-forms-field-border-radius);
                    outline: 0; /* Don't worry, we DO care about accessibility - We have :focus rules below. */
                }

            table.shoppingCart .productRow td.itemTotal {
                width: 10%;
                white-space: nowrap;
            }

            table.shoppingCart .productRow td.itemOptions {
                width: 10%;
                white-space: nowrap;
            }

                table.shoppingCart .productRow td.itemOptions .removeProductButton {
                }
    
    table.shoppingCart .productRow.noProduct {
    }

    table.shoppingCart tr.cartUpdateTotals {
    }
    
        table.shoppingCart tr.cartUpdateTotals td.rowLabel {
            text-indent: -10000em;
        }

        table.shoppingCart tr.cartUpdateTotals td.rowValue {
            padding-bottom: 2em;
        }

    table.shoppingCart tr.cartRow {
    }

        table.shoppingCart tr.cartRow .rowLabel {
            border: 0;
        }

        table.shoppingCart tr.cartRow .rowValue {
            border: 0;
        }

    table.shoppingCart tr.cartSubTotal {
    }

        table.shoppingCart tr.cartSubTotal th.rowLabel {
            border-top-color: var(--site-table-border-color);
            border-top-width: var(--site-border-width);
            border-top-style: solid;
        }

        table.shoppingCart tr.cartSubTotal td.rowValue {
            border-top-color: var(--site-table-border-color);
            border-top-width: var(--site-border-width);
            border-top-style: solid;
        }

    table.shoppingCart tr.cartSalesTax {
    }

        table.shoppingCart tr.cartSalesTax td.rowLabel {
        }

        table.shoppingCart tr.cartSalesTax td.rowValue {
        }

    table.shoppingCart tr.cartShipping {
    }
    
        table.shoppingCart tr.cartShipping th.rowLabel {
            padding-bottom: var(--site-padding);
        }

            table.shoppingCart tr.cartShipping th.rowLabel .cartShippingMethod {
            }

                table.shoppingCart tr.cartShipping th.rowLabel .cartShippingMethod .shippingMethodLabel {
                }

                    table.shoppingCart tr.cartShipping th.rowLabel .cartShippingMethod .shippingMethodLabel::after {
                        content: ":";
                    }

                table.shoppingCart tr.cartShipping th.rowLabel .cartShippingMethod .shippingMethodValue {
                    font-weight: normal;
                }

            table.shoppingCart tr.cartShipping th.rowLabel .cartShippingSelect {
                margin: var(--site-margin-thinnest) 0;
                font-weight: normal;
            }

                table.shoppingCart tr.cartShipping th.rowLabel .cartShippingSelect a,
                #payway-cc-submit {
                    display: inline-block;
                    vertical-align: middle;
                    box-sizing: border-box;
                    padding: var(--site-button-primary-padding);
                    margin: 2px var(--site-padding-thin) 2px 0; /* When buttons wrap around lines we want some space between them, so add some vertical margin. Also put some space between side by side buttons using margin-right which is reset for the last child below. */
                    max-width: 100%;
                    line-height: 1;
                    font-family: "Saira Condensed", Arial, sans-serif;
                    font-size: var(--site-button-primary-font-size);
                    font-weight: var(--site-button-primary-font-weight);
                    text-decoration: none !important;
                    text-align: center;
                    white-space: normal;
                    color: var(--site-button-primary-text-color) !important;
                    background: var(--site-button-primary-bg) !important;
                    background-repeat: no-repeat;
                    border-color: var(--site-button-primary-border-color) !important;
                    border-width: var(--site-button-primary-border-width);
                    border-style: solid;
                    border-radius: var(--site-button-primary-border-radius);
                    cursor: pointer; /* Make sure all buttons show the same pointer, regardless of what HTML tag the button uses. */
                }

                #payway-cc-submit[disabled] {
                    opacity: 0.4;
                    pointer-events: none;
                }

                    table.shoppingCart tr.cartShipping th.rowLabel .cartShippingSelect a:hover,
                    table.shoppingCart tr.cartShipping th.rowLabel .cartShippingSelect a:focus,
                    #payway-cc-submit:hover,
                    #payway-cc-submit:focus {
                        color: var(--site-button-primary-hover-text-color) !important;
                        text-decoration: none !important;
                        background: var(--site-button-primary-hover-bg) !important;
                        border-color: var(--site-button-primary-hover-border-color) !important;
                    }

        table.shoppingCart tr.cartShipping td.rowValue {
        }

    table.shoppingCart tr.cartPostCodeMessage {
    }

    table.shoppingCart tr.cartTotal {
    }

        table.shoppingCart tr.cartTotal th.rowLabel {
            border-top-color: var(--site-table-border-color);
            border-top-width: var(--site-border-width);
            border-top-style: solid;
        }

        table.shoppingCart tr.cartTotal td.rowValue {
            border-top-color: var(--site-table-border-color);
            border-top-width: var(--site-border-width);
            border-top-style: solid;
        }

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

    table.shoppingCart {
        /* To do: A nice responsive design for the shopping cart table. */
    }

        table.shoppingCart .productRow td.itemInfo {
            flex-wrap: wrap;
        }

            table.shoppingCart .productRow td.itemInfo *:first-child {
                width: 49%;
            }

            table.shoppingCart .productRow td.itemInfo .productNote {
                width: 100%;
                margin-top: var(--site-margin-thinner);
            }

}

/* ####################################
   Past Orders
   ################################## */

/*
    Past Orders List
*/

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

    .pastOrders .sectionTitle {
    }

    .pastOrders table.pastOrdersSummary {
}

        .pastOrders table.pastOrdersSummary thead th {
        }

        .pastOrders table.pastOrdersSummary td {
        }

        .pastOrders table.pastOrdersSummary tr.savedCart {
        }

            .pastOrders table.pastOrdersSummary tr.savedCart td.orderNumber {
            }

            .pastOrders table.pastOrdersSummary tr.savedCart td.orderDate {
            }

            .pastOrders table.pastOrdersSummary tr.savedCart td.orderStatus {
            }

            .pastOrders table.pastOrdersSummary tr.savedCart td.orderPaymentStatus {
            }

            .pastOrders table.pastOrdersSummary tr.savedCart td.orderPaymentType {
            }

            .pastOrders table.pastOrdersSummary tr.savedCart td.orderTotal {
            }

/*
    Past Order Detail View
*/

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

    .pastOrder .sectionTitle {
    }

    .pastOrder .pastOrderDetailsTitle {
    }

    .pastOrder #ReceiptOrderInfo {
        /* Same as the cart receipt page. */
    }

/* ####################################
   Saved Carts
   ################################## */

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

    .savedCarts .sectionTitle {
    }

    .savedCarts table.savedCartsSummary {
        width: 100%;
    }

        .savedCarts table.savedCartsSummary thead th {
        }

        .savedCarts table.savedCartsSummary td {
        }

        .savedCarts table.savedCartsSummary tr.savedCart {
        }

            .savedCarts table.savedCartsSummary tr.savedCart td.savedCartDate {
            }

            .savedCarts table.savedCartsSummary tr.savedCart td.savedCartTotal {
            }

            .savedCarts table.savedCartsSummary tr.savedCart td.savedCartActions {
            }

                .savedCarts table.savedCartsSummary tr.savedCart td.savedCartActions a {
                }
                
                    .savedCarts table.savedCartsSummary tr.savedCart td.savedCartActions a:hover {
                    }

                .savedCarts table.savedCartsSummary tr.savedCart td.savedCartActions a.cartDetails {
                }

                    .savedCarts table.savedCartsSummary tr.savedCart td.savedCartActions a.cartDetails::before {
                    }

                .savedCarts table.savedCartsSummary tr.savedCart td.savedCartActions a.deleteCart::before {
                }

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

    .savedCartFull .sectionTitle {
    }

    .savedCartFull .savedCartTitle {
    }

        .savedCartFull .savedCartTitle .savedCartLabel {
        }

        .savedCartFull .savedCartTitle .savedCartLabelSeparator {
        }

        .savedCartFull .savedCartTitle .savedCartLabelDate {
        }

    .savedCartFull .shoppingCart,
    .savedCartFull .shoppingCartProductCategories {
    }

        .savedCartFull table.cart {
        }
        
            .savedCartFull table.cart .cartCategoryProductAddLink {
                display: none !important;
            }

            .savedCartFull table.cart .cartShippingSelect {
                display: none !important;
            }

    .savedCartFull .savedCartActions {
    }

        .savedCartFull .savedCartActions a {
        }

        .savedCartFull .savedCartActions a.deleteCart {
        }

        .savedCartFull .savedCartActions a.restoreCart {
        }
            
    .savedCartFull #ReceiptOrderInfo {
        /* Same as the cart receipt page. */
    }

/* ####################################
   Prices 
   - These appear on Product Summary and on the product detail pages under .cartFunctions
   ################################## */

.prices {
    color: var(--site-color-2);
}

    .prices ul {
        list-style: none;
        margin: 0 0 var(--site-margin-thinner);
        padding: 0;
    }

        .prices ul li {
            margin: var(--site-margin-thinner) 0;
        }

        .prices ul.noPrices {
        }

            .prices ul.noPrices .priceLabel {
                display: none;
            }

    .prices .priceLabel {
        display: inline-block;
        width: 90px;
        font-weight: bold;
    }
            
    .prices .priceValue {
        display: inline;
    }

        .prices .priceValue .fullPrice {
            display: inline-block;
        }

        .prices .priceValue .actualPrice {
            display: inline-block;
        }

        .prices .priceValue .specialPrice {
            display: inline-block;
        }

            .prices .priceValue .exTax {
            }

            .prices .priceValue .incTax {
                display: table; /* Trick to put it on the next line but not block width */
                font-size: 10px;
            }

                .prices .priceValue .incTax::after {
                    content: " inc. GST";
                    display: none;
                }

    .prices .priceValue.tax_priceplustax {
        display: inline-block;
        vertical-align: middle;
    }

        .prices .priceValue.tax_priceplustax .incTax {
            font-size: inherit;
        }

    .prices .pricePublic {
    }

    .prices .priceMembers {
    }
        
    .prices ul.onSpecial {
    }

        .prices ul.onSpecial .priceLabel {
        }

        .prices ul.onSpecial .priceValue {
        }

            .prices ul.onSpecial .priceValue .fullPrice {
                margin-right: 10px;
                text-decoration: line-through;
            }

            .prices ul.onSpecial .priceValue .specialPrice {
            }

        .prices ul.onSpecial .publicPrice .priceLabel,
        .prices ul.onSpecial .memberPrice .priceLabel {
            width: 100%;
            margin-bottom: 5px;
        }

        .prices ul.onSpecial .userPrice .priceLabel {
            /* There's only one user price, no need to wrap the text. */
        }

/* ####################################
   Product Summary
   ################################## */

/*
    Products in all content collections
*/

.item.product {
}

    .item.product .thumbnail {
    }

    .item.product .text {
    }

        .item.product .text .title {
            font-family: "Saira Extra Condensed", Arial, sans-serif;
            color: var(--site-color-1);
            /*text-transform: uppercase;*/
            font-size: var(--site-font-size-huge);
            font-weight: 900;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
                    line-clamp: 3; 
            -webkit-box-orient: vertical;
            min-height: min-content;
        }

            .item.product .text .title .productCode {
                display: block;
                text-transform: uppercase;
                font-weight: 500;
                font-size: 85%;
                line-height: 110%;
            }
    
                .item.product .text .title .productCode::after {
                    /*content: " - ";*/
                }

        .item.product .text .productNote {
            margin: -0.75em 0 var(--site-margin-thinner);
            color: var(--site-color-grey-mid-dark);
        }

        .item.product .text .summary {
            margin: 0 0 1em;
        }

            .item.product .text .summary p {
                margin: 0 0 var(--site-margin-thinner);
            }

            .item.product .text .summary .span-read-more {
            }

                .item.product .text .summary .span-read-more a {
                    font-weight: bold;
                }

                    .item.product .text .summary .span-read-more a::after {
                    }

        .item.product .text .stockInfo {
            margin: 0 0 var(--site-margin-thinner);
        }

            .item.product .text .stockInfo .stockLabel {
                display: inline;
                font-weight: bold;
            }

            .item.product .text .stockInfo .stockMessage {
                display: inline;
            }

                .item.product .text .stockInfo .stockMessage .inStock {
                }

        .item.product .text .prices {
            margin-bottom: var(--site-gutters-thinnest);
        }

            .item.product .text .prices .noPrices {
            }

        .item.product .text .membersOnly {
            margin: 0 0 var(--site-margin-thinner);
        }

        .item.product .text .cartOptions {
        }

            .item.product .text .cartOptions .variations
            .addProductsTable .product .variations {
            }

                .item.product .text .cartOptions .variations.radio,
                .addProductsTable .product .variations[class*=radio] { /* The class might be "radio" or "dropdownradio" */
                }

                    .item.product .text .cartOptions .variations.radio label.productionVariation,
                    .addProductsTable .product .variations[class*=radio] label.productionVariation {
                        display: flex;
                        flex-direction: row;
                        align-items: flex-start;
                        gap: var(--site-gutters-thinnest);
                        margin: var(--site-margin-thin) 0;
                    }

                        .item.product .text .cartOptions .variations.radio label.productionVariation .control,
                        .addProductsTable .product .variations[class*=radio] label.productionVariation .control {
                        }

                        .item.product .text .cartOptions .variations.radio label.productionVariation .text,
                        .addProductsTable .product .variations[class*=radio] label.productionVariation .text {
                            padding: 0;
                        }

                            .item.product .text .cartOptions .variations.radio label.productionVariation .text .title,
                            .addProductsTable .product .variations[class*=radio] label.productionVariation .text .title {
                                padding: 0;
                                background: none;
                            }

                            .item.product .text .cartOptions .variations.radio label.productionVariation .text .productNote,
                            .addProductsTable .product .variations[class*=radio] label.productionVariation .text .productNote {
                                color: var(--site-color-grey-mid-dark);
                            }

                .item.product .text .cartOptions .variations[class*=dropdown] { /* The class could be "dropdown" or "dropdownradio" */
                    position: relative;
                    float: left;
                    width: 100%;
                    max-width: 300px;
                    margin-right: 5px;
                }

                    .addProductsTable .product .variations[class*=dropdown] {
                        max-width: 100%;
                    }

                        .item.product .text .cartOptions .variations[class*=dropdown] select,
                        .addProductsTable .product .variations.dropdown select {
                            width: 100%;
                            max-width: 100%;
                            padding: var(--site-forms-field-padding);
                            font-size: var(--site-forms-field-font-size);
                            border: var(--site-forms-field-border);
                            border-radius: var(--site-forms-field-border-radius);
                        }
                
                .item.product .text .cartOptions .variations[class*=radio] { 
                    margin-right: 0;
                    margin-bottom: var(--site-gutters-thinnest);
                }

            .item.product .text .cartOptions .addToCartButton {
            }

                .item.product .text .cartOptions .addToCartButton .quantitySelector {
                    display: inline-block;
                    vertical-align: middle;
                    width: 60px;
                    padding: var(--site-forms-field-padding);
                    font-size: 100%;
                    border: var(--site-forms-field-border);
                    border-radius: var(--site-forms-field-border-radius);
                }

                .item.product .text .cartOptions .addToCartButton .button {
                    margin: 0;
                    font-size: 100%;
                }
         
            .productDetails .cartFunctions .addToCartButton.productAdded,
            .item.product .text .cartOptions .addToCartButton.productAdded {
            }

                .productDetails .cartFunctions .addToCartButton.productAdded::after,
                .item.product .text .cartOptions .addToCartButton.productAdded::after {
                    content: "\2714";
                    position: absolute;
                    margin-left: -16px;
                    top: -16px;
                    z-index: 5;
                    display: inline-block;
                    box-sizing: border-box;
                    padding: 0;
                    width: 32px;
                    height: 32px;
                    line-height: 28px;
                    font-weight: bold;
                    font-size: 75%;
                    color: #fff;
                    background: #339900;
                    border: #fff 2px solid;
                    border-radius: 100%;
                    text-align: center;
                }
       
            .item.product .text .moreInfoLink {
                clear: both;
                margin-top: var(--site-margin-thin);
            }

                .item.product .text .moreInfoLink a {
                    /* Copy of .link-cta */
                    font-size: 110.53%;
                    font-weight: 700 !important;
                }

                    .item.product .text .moreInfoLink a::before {
                        content: "\f35a";
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: 5px;
                        font-family: var(--site-icon-font-family);
                        font-weight: var(--site-icon-font-weight);
                    }

/*
    Products in cards
*/

.cards .item.product {
}

    .cards .item.product .thumbnail {
        background: var(--site-card-product-image-bg);
    }

    .cards .item.product:hover {
    }

        .cards .item.product:hover .thumbnail {
            background: var(--site-card-product-hover-image-bg);
        }

    .cards .item.product .text {
    }

        .item.product .text .title a {
        }

        .cards .item.product .text .cartOptions {
            position: relative;
            z-index: 2 !important; /* Make sure it's above .link-cover. */
            margin-top: auto;
        }

            .cards .item.product .text .cartOptions .variations[class*=dropdown] {
                float: none;
                margin-right: 0;
                margin-bottom: 3px;
                max-width: 100%;
            }

            .cards .item.product .text .cartOptions .addToCartButton {
            }

                .cards .item.product .text .cartOptions .addToCartButton .quantitySelector {
                    margin-bottom: 3px;
                }

                .cards .item.product .text .cartOptions .addToCartButton .button {
                    margin-top: 0;
                    margin-bottom: 3px !important;
                }

                    /* Can't do this, the button is an input tag...
                    .cards .item.product .text .cartOptions .addToCartButton .button::before {
                        content: "+";
                        display: inline-block;
                        width: 16px;
                        height: 15px;
                        color: var(--site-button-primary-bg) !important;
                        background-color: #fff;
                        border-radius: 100%;
                    }*/

    .cards-smaller .item.product .text .cartOptions .addToCartButton {
    }

        .cards-smaller .item.product .text .cartOptions .addToCartButton .quantitySelector {
            width: 50px;
        }

        .cards-smaller .item.product .text .cartOptions .addToCartButton .button {
            padding-left: var(--site-padding-thinner);
            padding-right: var(--site-padding-thinner);
        }

    .cards .item.product .text .moreInfoLink {
        text-align: center;
    }

/*
    Products not in cards or tiles
*/

.articles:not(.cards):not(.tiles) .item.product {
    position: relative;
    float: left;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 var(--site-box-margin-bottom);
    padding: var(--site-padding);
    border-color: var(--site-color-1-light);
    border-width: var(--site-border-width);
    border-style: solid;
    border-radius: var(--site-box-border-radius);
}

    .articles:not(.cards):not(.tiles) .item.product:nth-child(2n+1) {
    }

    .articles:not(.cards):not(.tiles) .item.product .thumbnail {
    }

        .articles:not(.cards):not(.tiles) .item.product .thumbnail img {
        }

    .articles:not(.cards):not(.tiles) .item.product .text {
    }

        .articles:not(.cards):not(.tiles) .item.product .text .title {
            margin-top: 0px;
        }

/* ####################################
   Product Details
   - This is the full product details page; styles for all product details pages
   - Find more layout options on the individual product page template, e.g. Product1.css
   ################################## */

.productDetails {
}

    .productDetails #PageTitle {
    }

        body.page-ct-shopct_product #PageTitle .productCode {
            display: block;
            text-transform: uppercase;
            font-weight: 400;
            font-size: 50%;
            line-height: 100%;
        }

            body.page-ct-shopct_product #PageTitle .productCode::after {
                content: "";
            }

    .productDetails #ProductInfo {
        padding-top: var(--site-padding-thinnest);
        margin-bottom: var(--site-box-margin-bottom);
        border-bottom-color: var(--site-color-1-light);
        border-bottom-width: var(--site-border-width);
        border-bottom-style: solid;
    }

        .productDetails #ProductInfo .productNote {
            margin: 0 0 10px;
        }

        .productDetails #ProductInfo .infoField {
            margin: 10px 0;
        }

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

            .productDetails #ProductInfo .infoField .infoMessage {
                display: inline;
            }

                .productDetails #ProductInfo .infoField .infoMessage .noStock {
                }

                .productDetails #ProductInfo .infoField .infoMessage .lowStock {
                }

                .productDetails #ProductInfo .infoField .infoMessage .inStock {
                }

            .productDetails #ProductInfo #StockInfo {
            }

            .productDetails #ProductInfo #Availability {
            }

            .productDetails #ProductInfo:empty {
                display: none;
            }

    .productDetails #ProductOverview {
        position: relative;
        display: flex;
        gap: 30px;
        align-items: flex-start;;
        /*flex-direction: row-reverse;*/
    }

    .productDetails #ProductImages {
        position: relative;
        z-index: 1;
    }

        .productDetails #ProductImages #MainImage {
            width: 100%;
            margin-bottom: 0px;
        }

            .productDetails #ProductImages #MainImage img {
                width: 100%;
            }

            .productDetails #ProductImages #MainImage #MainImageGraphic {
            }

            .productDetails #ProductImages #MainImage #MainImageCaption {
            }

        .productDetails #ProductImages .attachments {
            margin: 0px;
            padding: var(--site-padding-thin);
            background-color: var(--site-color-ui-lightest);
        }

            .productDetails #ProductImages #MainImage + .attachments {
                /* Note: It's possible for the gallery to be shown when no image image exists. */
            }

            .productDetails #ProductImages #MainImage.has-caption + .attachments {
                padding-top: 0px;
            }

            .productDetails #ProductImages .attachments .gallery {
            }

                .productDetails #ProductImages .attachments .gallery .attachment {
                }

                    .productDetails #ProductImages .attachments .gallery .attachment .thumbnail a {
                        border-radius: var(--site-figure-image-border-radius);
                    }

                        .productDetails #ProductImages .attachments .gallery .attachment .thumbnail a img {
                        }

                        .productDetails #ProductImages .attachments .gallery .attachment .thumbnail a i {
                            font-size: 1.5em;
                        }

    .productDetails #ProductDescription {
    }

        .productDetails #ProductDescription .section-title {
        }

        .productDetails #ProductDescription .details {
        }

            .productDetails #ProductDescription .details > :first-child {
                margin-top: 0 !important;
            }

            .productDetails #ProductDescription .details.summary-field {
                /* The summary field is displayed in place of product details if there are no details. */
                margin: 0 0 var(--site-box-margin-bottom);
            }

    .productDetails .product-variations,
    .productDetails .related-products {
        margin-bottom: var(--site-padding-thin);
    }

    /* Shopping Cart Product Functions */

    .productDetails .cartFunctions {
        background: var(--site-color-white);
        border-color: var(--site-color-black);
        border-width: var(--site-border-width);
        border-radius: var(--site-box-border-radius);
        border-style: solid;
    }

        .productDetails .cartFunctions > h2.section-title {
            margin: 0;
            padding: var(--site-padding-thinner);
            text-align: center; 
            font-size: 100%;
            color: var(--site-color-white);
            background: var(--site-color-black);
        }

            .productDetails .cartFunctions > h2.section-title .cta {
            }

            .productDetails .cartFunctions > h2.section-title .productName {
                display: none;
            }

        .productDetails .cartFunctions table.addProductsTable {
            margin-bottom: 0;
        }

            .productDetails .cartFunctions table.addProductsTable tr {
            }

                .productDetails .cartFunctions table.addProductsTable tr th {
                    display: none; 

                    padding: 10px 15px;
                    background: #fff;
                }

                    .productDetails .cartFunctions table.addProductsTable tr th.qty {
                    }

                    .productDetails .cartFunctions table.addProductsTable tr th.product {
                        padding-left: 0px;
                        width: 100%;
                    }

                .productDetails .cartFunctions table.addProductsTable tr td {
                    vertical-align: top;
                    padding: 10px 15px;
                    background: #fff;
                }

                    .productDetails .cartFunctions table.addProductsTable tr td.qty {
                    }

                        .productDetails .cartFunctions table.addProductsTable tr td.qty .quantitySelector {
                            width: 60px;
                            padding: 11px 5px;
                        }

                    .productDetails .cartFunctions table.addProductsTable tr td.product {
                        padding-left: 0px;
                        width: 100%;
                    }

        .productDetails .cartFunctions .prices {
        }

        .productDetails .cartFunctions #CrossSells {
        }

            .productDetails .cartFunctions #CrossSells .section-title {
            }

        .productDetails .cartFunctions .addToCartButton {
            padding: var(--site-padding-thinner);
        }

            .productDetails .cartFunctions .addToCartButton .button-cart-add {
                box-sizing: border-box;
                width: 100%;
            }

            .productDetails .cartFunctions .addToCartButton.productAdded {
                position: relative;
            }

                .productDetails .cartFunctions .addToCartButton.productAdded::after {
                    /* See .item.product .text .cartOptions .addToCartButton.productAdded::after */
                    top: 5px;
                    margin-left: -20px;
                }

        .productDetails .cartFunctions .contactForPrice {
            padding: var(--site-padding-thinner);
        }

            .productDetails .cartFunctions .contactForPrice .button {
                box-sizing: border-box;
                width: 100%;
            }

    /* Up Sell */

    .productDetails #UpSell {
    }

    /* Cross Sells */

    .productDetails #OnSells {
        padding: 0 15px;
    }

        .productDetails #OnSells .section-title {
            margin-top: 0;
        }

        .productDetails #OnSells .onSell {
        }

            .productDetails #OnSells .onSell .title {
            }

            .productDetails #OnSells .onSell .summary {
            }

            .productDetails #OnSells .onSell .prices {
            }

    /* Members Only */

    .productDetails .cartFunctions .membersOnly,
    .productDetails .cartFunctions .loginToOrderButton {
        padding: var(--site-padding-thinner);
        text-align: center;
    }

/* ####################################
   Shopping Cart Summary
   ################################## */

#ShoppingCartSummaryShort {
    position: relative;
}

    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo {
        position: absolute;
        top: -14px;
        left: 14px;
        z-index: 1;
    }

    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo::before {
        content: 'Cart:';
        display: none;
        margin-right: 3px;
    }

        #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProducts {
            display: inline-block;
        }

            #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProducts .cartProductsCount {
                font-size: var(--site-font-size-tiny);
                background-color: var(--site-spot-color-1);
                color: var(--site-color-black);
                border-radius: 50%;
                width: 18px;
                height: 18px;
                display: block;
                text-align: center;
                line-height: 18px;
            }

            #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProducts .cartProductsText,
            #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProducts .cartPrice {
                display: none;
            }

            #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProducts::after {
                content: ", ";
                display: none;
                margin-left: -3px;
            }

        #ShoppingCartSummaryShort .cartTotalPrice {
            display: none;
            margin-right: 10px;
        }

    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProductsLabel,
    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartPriceLabel {
        display: none !important;
    }

    #ShoppingCartSummaryShort ul.cartLinks {
        display: inline-block;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #ShoppingCartSummaryShort ul.cartLinks .checkoutLink {
        display: none;
    }

        #ShoppingCartSummaryShort ul.cartLinks li {
            display: inline-block;
            margin-right: 10px;
            padding: 0;
            list-style: none;
        }

            #ShoppingCartSummaryShort ul.cartLinks li a {
            }

        #ShoppingCartSummaryShort ul.cartLinks a::before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            margin-right: 5px;
            font-style: normal;
            font-variant: normal;
            font-family: var(--site-icon-font-family);
            font-weight: 400;
            text-rendering: auto;
            line-height: 1;
        }

                #ShoppingCartSummaryShort ul.cartLinks li.viewCartLink a::before {
                    content: "\f07a";
                }

                #ShoppingCartSummaryShort ul.cartLinks li.checkoutLink a::before {
                    content: "\f09d";
                }

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

    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo {
        display: block;
    }

    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo,
    #ShoppingCartSummaryShort .cartTotalPrice {
        margin-right: 0;
    }

}

#ShoppingCartSummary {
}

    #ShoppingCartSummary .cartDetails {
        border-color: var(--site-color-1-light);
        border-width: var(--site-border-width);
        border-style: solid;
        padding: var(--site-padding-thinner);
    }

    #ShoppingCartSummary .cartProducts {
    }

    #ShoppingCartSummary .cartTotalPrice {
    }

    #ShoppingCartSummary ul.cartLinks {
        list-style: none;
    }

        #ShoppingCartSummary .cartLinks li.viewCartLink {
            display: inline-block;
        }

        #ShoppingCartSummary .cartLinks li.checkoutLink {
            display: inline-block;
        }

/* ############################################################################
   ##
   ##  Fixed Shop Module Pages
   ##  - To do: Move these to ./pages
   ##
   ######################################################################### */

/* ####################################
   Cart Page
   ################################## */

.cartButtons {
    display: flex;
    justify-content: space-between;
    margin: var(--site-margin) 0 var(--site-box-margin-bottom);
}

    .cartButtons .button {
        /* Standard layout defined in Buttons.css. */
    }

    .cartButtons .button-cart-empty {
    }

    .cartButtons .button-checkout {
    }

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

    .cartButtons {
        display: block;
        text-align: center;
    }

}

/* ####################################
   Checkout Form
   + Payment & shipping options lists that appear in various places
   ################################## */

#CheckoutForm {
}

    #CheckoutForm #ContactDetails {
    }

    #CheckoutForm #ContactAddress {
    }

    #CheckoutForm #ShippingAddress {
    }

    #CheckoutForm #AdditionalOrderInfo {
    }

    #CheckoutMethodForm,
    #CheckoutForm #ShippingOptions,
    #ShippingOptions,
    #CheckoutForm #PaymentDetails {
    }

        #CheckoutMethodForm #CheckoutMethodContainer .checkoutType, 
        #CheckoutForm #ShippingOptions .shippingType, 
        #ShippingOptions .shippingType, 
        #CheckoutForm #PaymentDetails .paymentType {
            position: relative;
            display: inline-block;
            width: 100%;
            margin-bottom: var(--site-margin-thin);
        }

        #CheckoutMethodForm #CheckoutMethodContainer .checkoutType:last-child,
        #CheckoutForm #ShippingOptions .shippingType:last-child,
        #ShippingOptions .shippingType:last-child,
        #CheckoutForm #PaymentDetails .paymentType:last-child {
            margin-bottom: 0;
        }

            #CheckoutMethodForm #CheckoutMethodContainer .checkoutType label,
            #CheckoutForm #ShippingOptions .shippingType label,
            #ShippingOptions .shippingType label,
            #CheckoutForm #PaymentDetails .paymentType label {
                margin-bottom: 0;
            }

                #CheckoutMethodForm #CheckoutMethodContainer .checkoutType label input,
                #CheckoutForm #ShippingOptions .shippingType label input,
                #ShippingOptions .shippingType label input,
                #CheckoutForm #PaymentDetails .paymentType label input {
                }

                #CheckoutMethodForm #CheckoutMethodContainer .checkoutType label span.title,
                #CheckoutForm #ShippingOptions .shippingType label span.title,
                #ShippingOptions .shippingType label span.title,
                #CheckoutForm #PaymentDetails .paymentType label span.title {
                    display: block;
                    margin: 0 0 var(--site-margin-thinner);
                }

                #CheckoutMethodForm #CheckoutMethodContainer .checkoutType label span.summary,
                #CheckoutForm #ShippingOptions .shippingType label span.summary,
                #ShippingOptions .shippingType label span.summary,
                #CheckoutForm #PaymentDetails .paymentType label span.summary {
                    display: block;
                    color: var(--site-color-grey-mid-dark);
                }

        #CheckoutMethodForm #CheckoutMethodContainer .checkoutType div.helpText,
        #CheckoutForm #ShippingOptions .shippingType div.helpText,
        #ShippingOptions .shippingType div.helpText,
        #CheckoutForm #PaymentDetails .paymentType div.helpText {
            margin-top: -5px;
            margin-left: calc(var(--site-forms-checkbox-radio-input-zoom) * 20px) !important;
        }

    #CheckoutForm .button {
    }

/* ####################################
   Checkout Confirm Page
   ################################## */

#CheckoutConfirmPage {
}

    #CheckoutConfirmPage #CheckoutConfirmPageContent {
    }

        #CheckoutConfirmPage #CheckoutConfirmPageContent #CheckoutConfirmOrderDetails {
        }

            #CheckoutConfirmPage #CheckoutConfirmPageContent #CheckoutConfirmOrderDetails #ConfirmOrderShoppingCart {
                border: 0;
                padding: 0;
                border-radius: 0;
            }

                #CheckoutConfirmPage #CheckoutConfirmPageContent #CheckoutConfirmOrderDetails #ConfirmOrderShoppingCart .legend {
                    display: none;
                }
            
            #CheckoutConfirmPage #CheckoutConfirmPageContent #CheckoutConfirmOrderDetails #CustomerDetails {
            }
            
            #CheckoutConfirmPage #CheckoutConfirmPageContent #CheckoutConfirmOrderDetails #AdditionalInfo {
            }
            
            #CheckoutConfirmPage #CheckoutConfirmPageContent #CheckoutConfirmOrderDetails #PaymentInfo {
            }

    #CheckoutConfirmPage table.shoppingCart {
    }

        #CheckoutConfirmPage table.shoppingCart tr.cartRow {
        }

            #CheckoutConfirmPage table.shoppingCart tr.cartRow td.rowLabel {
                text-align: right;
            }

/* ####################################
   Checkout Payment Form
   ################################## */

#CheckoutPaymentPage {
}

    #CheckoutPaymentPage #CheckoutPaymentPageContent {
    }

#CreditCardForm {
}

    fieldset#CreditCardDetails {
    }

        fieldset#CreditCardDetails select {
            width: auto !important;
        }

/* ####################################
   Shopping Cart Progress Bar
   ################################## */

.progressMeter {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 var(--site-box-margin-bottom);
}

    .progressMeter ol {
        display: flex;
        justify-content: space-between;
        gap: 2px;
        padding: 0;
        margin: 0;
        list-style: none;
        border-radius: var(--site-box-border-radius);
        overflow: hidden;
    }

        .progressMeter ol li {
            flex-grow: 1;
        }

            .progressMeter ol li a,
            .progressMeter ol li span {
                position: relative;
                display: inline-block;
                width: 100%;
                box-sizing: border-box;
                padding: var(--site-padding-thinner) var(--site-padding);
                font-weight: bold;
                font-size: var(--site-font-size-small);
                color: var(--site-color-1);
                background: var(--site-color-grey-lighter);
            }

                .progressMeter ol li a::after,
                .progressMeter ol li span::after {
                    content: "\f105";
                    position: absolute;
                    right: var(--site-padding);
                    font-family: var(--site-icon-font-family);
                    font-weight: var(--site-icon-font-weight);
                }

            .progressMeter ol li a {
                /*color: var(--site-color-white);
                background: var(--site-color-1-mid);*/
                text-decoration: none;
            }

            .progressMeter ol li a:hover {
                color: var(--site-color-white);
                background: var(--site-link-color);
            }

    .progressMeter ol li.currentStep {
    }

        .progressMeter ol li.currentStep a, .progressMeter ol li.currentStep span {
            color: var(--site-color-white);
            background: var(--site-color-1);
        }

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

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

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

    .progressMeter {
        font-size: 0.75rem;
        font-weight: normal;
    }

        .progressMeter ol li a, .progressMeter ol li span {
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            background-image: none;
        }

}

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

    .progressMeter {
        display: none;
    }

}

/* ####################################
   Receipt
   ################################## */

#ReceiptOrderInfo {
}

    #ReceiptOrderInfo ul.dataFields {
    }

        #ReceiptOrderInfo ul.dataFields li.fieldContainer {
            display: inline-block;
            float: none;
            margin: var(--site-margin-thinnest) 0;
        }

            #ReceiptOrderInfo ul.dataFields li.fieldContainer .fieldTitle {
                width: 9em;
                padding: 0;
            }

            #ReceiptOrderInfo ul.dataFields li.fieldContainer .fieldText {
                padding: 0;
                background: transparent;
            }

    #ReceiptOrderInfo #OrderIncomplete {
        /* Only displayed in certain cirumstances */
    }

        #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.orderType {
        }

        #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.orderStatus {
        }

        #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus {
        }

            #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText {
            }

                #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusSummary {
                }

                #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse {
                }

                    #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse::before {
                        content: " / ";
                    }

                    #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse .responseCode {
                    }

                        #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse .responseCode::before {
                            content: "Code: ";
                        }

                    #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse .summaryCode {
                    }

                        #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse .summaryCode::before {
                            content: " / ";
                        }

                    #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse .responseText {
                    }

                        #ReceiptOrderInfo #OrderIncomplete ul.dataFields li.paymentStatus .fieldText .paymentStatusResponse .responseText::before {
                            content: " / ";
                        }

    #ReceiptOrderInfo #OrderComplete {
        /* Only displayed in certain cirumstances */
    }

    #ReceiptOrderInfo #OrderConfirmation {
        margin: 0;
        padding: 0;
        font-size: var(--site-font-size-big);
        background: transparent;
        border: 0;
    }

        #ReceiptOrderInfo #OrderConfirmation .legend {
            display: none;
        }

        #ReceiptOrderInfo #OrderConfirmation ul.dataFields {
        }

            #ReceiptOrderInfo #OrderConfirmation ul.dataFields li.fieldContainer {
            }

                #ReceiptOrderInfo #OrderConfirmation ul.dataFields li.fieldContainer .fieldTitle {
                    width: 9em;
                }

                #ReceiptOrderInfo #OrderConfirmation ul.dataFields li.fieldContainer .fieldText {
                }

                #ReceiptOrderInfo #OrderConfirmation ul.dataFields li.fieldContainer.orderNumber .fieldText {
                    text-transform: uppercase;
                }

    #ReceiptOrderInfo #OrderIncomplete .payment-options {
        margin-bottom: var(--site-box-margin-bottom);
        display: flex;
        gap: var(--site-padding-thinner);
        padding: var(--site-padding-thinner);
        background-color: var(--site-color-white);
        border-radius: var(--site-box-border-radius);
    }

        #ReceiptOrderInfo #OrderIncomplete .payment-options .payment-eft,
        #ReceiptOrderInfo #OrderIncomplete .payment-options .payment-invoice,
        #ReceiptOrderInfo #OrderIncomplete .payment-options .payment-other {
            flex: 1 1 0;
        }

            #ReceiptOrderInfo #OrderIncomplete .payment-options .payment-eft .eft-payment-details a {
                display: block;
            }

    #ReceiptOrderInfo #OrderInformation {
        padding: 0;
        background: transparent;
        border: 0;
    }

        #ReceiptOrderInfo #OrderInformation .legend {
            display: none;
        }

        #ReceiptOrderInfo #OrderInformation table.shoppingCart {
        }

            #ReceiptOrderInfo #OrderInformation table.shoppingCart th {
            }

            #ReceiptOrderInfo #OrderInformation table.shoppingCart td {
            }

            #ReceiptOrderInfo #OrderInformation table.shoppingCart tr.cartRow {
            }

                #ReceiptOrderInfo #OrderInformation table.shoppingCart tr.cartRow td.rowLabel {
                    text-align: right;
                }

    #ReceiptOrderInfo #MembershipActivated {
    }

@media screen and (max-width: 1200px) {
    #ReceiptOrderInfo #OrderIncomplete .payment-options {
        display: block;
    }
}

/* ####################################
   Shop Help Popup Window
   ################################## */

#ShopHelpMessage {
}

    #ShopHelpMessage #PageTitle {
    }
    
    #ShopHelpMessage .helpTitle {
    }

    #ShopHelpMessage .helpSummary {
    }

/* ####################################
   Shipping Charges Popup Window
   ################################## */

body#Article_newcollege_shop_shipping_calculator {
}

    body#Article_newcollege_shop_shipping_calculator #PageTitle {
        display: none;
    }

    #ShippingMethodContainer {
    }

        #ShippingMethodContainer .fieldTitle {
            display: none;
        }

        #ShippingMethodContainer .fieldContent {
            width: 100%;
            max-width: 100%;
        }

    #CurrentShippingPrice {
    }

        #CurrentShippingPrice .fieldTitle {
            padding: 0;
        }