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

/* ####################################
   Shopping 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 {
            padding: var(--site-table-cell-padding);
        }

            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 {
            padding-left: var(--site-table-cell-padding);
            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 {
                }

        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. */
        border: 0px;
    }

        table.shoppingCart,
        table.shoppingCart thead,
        table.shoppingCart tbody,
        table.shoppingCart tfoot,
        table.shoppingCart tr {
            width: 100% !important
        }

        table.shoppingCart .productRow {
            margin-bottom: var(--site-margin-thin);
            border: var(--site-border-color) var(--site-border-width) solid;
            border-radius: var(--site-forms-fieldset-border-radius);
        }

            table.shoppingCart .productRow td {
                font-weight: inherit !important;
                border: 0px;
                padding-top: var(--site-datagrid-cell-padding-compact);
                padding-bottom: var(--site-datagrid-cell-padding-compact);
            }

                table.shoppingCart .productRow td.itemInfo {
                    display: block !important;
                    background: var(--site-forms-fieldset-legend-bg);
                }

            table.shoppingCart .productRow td.itemInfo::before {
                display: none !important;
            }

            table.shoppingCart .productRow td.itemInfo .productDetails {
                margin-bottom: 5px;
                font-weight: bold;
            }

        table.shoppingCart.responsive td.itemPrice::before {
            content: "Unit Price" !important;
        }

        table.shoppingCart.responsive td.itemQuantity::before {
            content: "Qty" !important;
            margin-top: 15px;
        }

        table.shoppingCart.responsive td.itemTotal::before {
            content: "Price" !important;
        }

        table.shoppingCart.responsive td.itemOptions::before {
            content: "" !important;
        }

        table.shoppingCart .cartRow {
            display: flex !important;
        }

            table.shoppingCart .cartRow th.rowLabel {
                padding: var(--site-table-cell-padding-compact) var(--site-table-cell-padding);
                width: calc(100% - 100px) !important;
                border: 0px;
            }

            table.shoppingCart .cartRow td.rowValue {
                padding: var(--site-table-cell-padding-compact) var(--site-table-cell-padding);
                width: 100px !important;
            }

            table.shoppingCart .cartRow td::before {
                display: none !important;
            }

        table.shoppingCart tr.cartUpdateTotals {
        }

            table.shoppingCart tr.cartUpdateTotals td.rowLabel {
                width: auto !important;
                padding: 0px;
            }

            table.shoppingCart tr.cartUpdateTotals td.rowValue {
                width: 100% !important;
                padding: 0px;
            }

                table.shoppingCart tr.cartUpdateTotals td.rowValue .button {
                    margin-bottom: var(--site-box-margin-bottom) !important;
                }

        table.shoppingCart tr.cartSubTotal {
        }

            table.shoppingCart tr.cartSubTotal th.rowLabel {
                border: 0px;
            }

            table.shoppingCart tr.cartSubTotal td.rowValue {
                border: 0px;
            }

        table.shoppingCart tr.cartShipping {
        }

            table.shoppingCart tr.cartShipping th.rowLabel {
            }

        table.shoppingCart tr.cartTotal {
        }

            table.shoppingCart tr.cartTotal th.rowLabel {
            }

            table.shoppingCart tr.cartTotal td.rowValue {
            }

}

/* ####################################
   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 {
}

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

        .prices ul li {
            margin: var(--site-margin-thinner) 0;
        }
            
    .prices .priceLabel {
        display: inline-block;
        width: 100px;
        font-weight: bold;
    }
            
    .prices .priceValue {
        display: inline;
        color: #317ea5;
    }

        .prices .priceValue .fullPrice {
            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";*/ /* Note: The CMS can display a sales tax label with a standard configuration. So only do this if you want to *disable* that feature and then force the display on all items. */
                }

    .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 .fullPrice {
            margin-right: 10px;
            text-decoration: line-through;
        }
                
        .prices ul.onSpecial .specialPrice {
        }

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

/*
    Products in all content collections
*/

.item.product {
}

    .item.product .thumbnail {
    }

    .item.product .text {
        padding: var(--site-padding-thinner);
    }

        .item.product .text .title {
        }

            .item.product .text .title .productCode {
                display: inline-block;
                text-transform: uppercase;
            }
    
                .item.product .text .title .productCode::after {
                    content: " - ";
                }

        .item.product .text .productNote {
            margin: 0 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%;
                }
         
            .item.product .text .cartOptions .addToCartButton.productAdded {
            }

                .item.product .text .cartOptions .addToCartButton.productAdded::after {
                    content: "\2714\ Product\ Added";
                    position: absolute;
                    right: calc(var(--site-box-padding) * 0.5);
                    top: calc(var(--site-box-padding) * 0.5);
                    z-index: 5;
                    display: inline-block;
                    box-sizing: border-box;
                    padding: 10px 5px 0;
                    width: 100px;
                    height: 100px;
                    font-weight: bold;
                    font-size: 100%;
                    color: #fff;
                    background: #339900;
                    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 {
    }

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

            .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 {
                text-align: start;
            }

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

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

    .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
*/

.collection: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-ui);
    border-width: var(--site-border-width);
    border-style: solid;
    border-radius: var(--site-box-border-radius);
}

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

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

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

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

        .collection: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 {
    }

        .productDetails #PageTitle .productCode {
            text-transform: uppercase;
            display: inline-block;
        }

            .productDetails #PageTitle .productCode::after {
                content: " - ";
            }

    .productDetails #ProductInfo {
        padding-bottom: var(--site-padding);
        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 15px;
        }

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

            .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 #ProductImages {
        position: relative;
        z-index: 1;
        float: right;
        margin: 0 0 30px 30px;
        width: calc(50% - 30px);
    }

        .productDetails #ProductImages #MainImage {
        }

            .productDetails #ProductImages #MainImage #MainImageGraphic {
            }

            .productDetails #ProductImages #MainImage #MainImageCaption {
            }

        .productDetails #ProductImages .attachments .gallery {
        }

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

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

    .productDetails #ProductDescription {
    }

        .productDetails #ProductDescription .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);
            }

    /* Shopping Cart Product Functions */

    .productDetails .cartFunctions {
        border-color: var(--site-color-1-light);
        border-width: var(--site-border-width);
        border-style: solid;
    }

        .productDetails .cartFunctions > h2.title {
            margin: 0;
            padding: var(--site-padding-thinner);
            font-size: 100%;
            background: var(--site-color-1-light);
        }

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

            .productDetails .cartFunctions table.addProductsTable tr {
            }

                .productDetails .cartFunctions table.addProductsTable tr th {
                    padding: 10px 15px;
                    background: #fff;
                }

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

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

        .productDetails .cartFunctions .prices {
        }

        .productDetails .cartFunctions #CrossSells {
        }

            .productDetails .cartFunctions #CrossSells .title {
            }

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

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

    /* Up Sell */

    .productDetails #UpSell {
    }

    /* Cross Sells */

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

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

        .productDetails #OnSells .onSell {
        }

            .productDetails #OnSells .onSell .title {
            }

            .productDetails #OnSells .onSell .summary {
            }

            .productDetails #OnSells .onSell .prices {
            }

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

#ShoppingCartSummaryShort {
    display: inline-block;
    line-height: 36px;
    position: relative;
}

    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo {
        position: absolute;
        z-index: 1;
        right: -10px;
        top: -10px;
        color: var(--site-color-white);
        height: 24px;
        width: 24px;
        line-height: 25px;
        font-size: var(--site-font-size-small);
        font-weight: bold;
        text-align: center;
        padding: 0;
        margin: 0;
        background-color: var(--site-color-3-mid-dark);
        border-radius: var(--site-border-radius-ellipse);
    }

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

        #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProducts {
            display: inline-block;
            margin-bottom: 5px;
        }

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

        #ShoppingCartSummaryShort .cartTotalPrice {
            display: inline-block;
            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 li {
            display: inline-block;
            margin: 0;
            padding: 0;
            list-style: none;
            width: 36px;
            height: 36px;
            background-color: var(--site-color-white);
            border-radius: var(--site-border-radius-small);
        }

            #ShoppingCartSummaryShort ul.cartLinks a {
                width: 100%;
                text-align: center;
            }

                #ShoppingCartSummaryShort ul.cartLinks a:hover,
                #ShoppingCartSummaryShort ul.cartLinks a:focus {
                    background-color: transparent;
                }

        #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProductsLabel, 
        #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartPriceLabel, 
        #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProductsText, 
        #ShoppingCartSummaryShort #ShoppingCartSummaryInfo::before, 
        #ShoppingCartSummaryShort #ShoppingCartSummaryInfo .cartProducts::after, 
        #ShoppingCartSummaryShort .cartTotalPrice, 
        #ShoppingCartSummaryShort ul.cartLinks li.checkoutLink {
            display: none;
        }

            #ShoppingCartSummaryShort ul.cartLinks li a {
                display: inline-block;
            }

        #ShoppingCartSummaryShort ul.cartLinks a::before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            font-family: var(--site-icon-font-family);
            font-weight: 600;
            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
	
	    #CheckoutConfirmPageContent
	
	    #CheckoutConfirmOrder
	
		    form#ConfirmOrder
		
			    #ConfirmOrderShoppingCart
			
			    #ConfirmOrderDetails
			
				    fieldset#OrderInformation
				
				    fieldset#CustomerDetails
				
					    #CustomerIdCode
					    or
					    #CustomerInfo
					
				    fieldset#AdditionalInfo
				
				    fieldset#ShippingInfo
				
				    fieldset#PaymentInfo
				
			    #SubmitOrder
			
				    #AccountWarning
				
				    #ConfirmMessage
				
				    #CommitOrder
				
					    #Captcha
					
					    #PaypalPersonalCheckoutPayment
					    or
					    #StripePayment
					    or
					    #SubmitOrderButton
					
    #DevCart

    ################################## */

#CheckoutConfirmPage {
}

    #CheckoutConfirmPage #CheckoutConfirmPageContent {
    }

    #CheckoutConfirmPage #CheckoutConfirmOrder {
    }

        #CheckoutConfirmPage #CheckoutConfirmOrder form#ConfirmOrder {
        }

            #CheckoutConfirmPage #CheckoutConfirmOrder form#ConfirmOrder .fieldset {
            }

                #CheckoutConfirmPage #CheckoutConfirmOrder form#ConfirmOrder .fieldset .legend {
                }

            #CheckoutConfirmPage #CheckoutConfirmOrder form#ConfirmOrder .fieldContainer {
            }

                #CheckoutConfirmPage #CheckoutConfirmOrder form#ConfirmOrder .fieldContainer .fieldTitle {
                    padding-top: 0px;
                    padding-bottom: 0px;
                }

                #CheckoutConfirmPage #CheckoutConfirmOrder form#ConfirmOrder .fieldContainer .fieldText.fieldText1 {
                    padding-top: 0px;
                    padding-bottom: 0px;
                }

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

            #CheckoutConfirmPage #CheckoutConfirmOrder #ConfirmOrderShoppingCart .cart-title {
                display: none;
            }

        #CheckoutConfirmPage #CheckoutConfirmOrder #ConfirmOrderDetails {
        }

            #CheckoutConfirmPage #CheckoutConfirmOrder #ConfirmOrderDetails #OrderInformation {
            }

            #CheckoutConfirmPage #CheckoutConfirmOrder #ConfirmOrderDetails #CustomerDetails {
            }

            #CheckoutConfirmPage #CheckoutConfirmOrder #ConfirmOrderDetails #AdditionalInfo {
            }

            #CheckoutConfirmPage #CheckoutConfirmOrder #ConfirmOrderDetails #ShippingInfo {
            }

            #CheckoutConfirmPage #CheckoutConfirmOrder #ConfirmOrderDetails #PaymentInfo {
            }

    #CheckoutConfirmPage #CheckoutConfirmOrder #SubmitOrder {
    }

        #CheckoutConfirmPage #CheckoutConfirmOrder #SubmitOrder #AccountWarning {
        }

        #CheckoutConfirmPage #CheckoutConfirmOrder #SubmitOrder #ConfirmMessage {
        }

        #CheckoutConfirmPage #CheckoutConfirmOrder #SubmitOrder #CommitOrder {
        }

            #CheckoutConfirmPage #CheckoutConfirmOrder #SubmitOrder #CommitOrder #PaypalPersonalCheckoutPayment {
            }

            #CheckoutConfirmPage #CheckoutConfirmOrder #SubmitOrder #CommitOrder #StripePayment {
            }

            #CheckoutConfirmPage #CheckoutConfirmOrder #SubmitOrder #CommitOrder #SubmitOrderButton {
            }

    #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;
            margin: 0px;
        }

            .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-darker);
                background: var(--site-color-1-light);
            }

                .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);
            }

            .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-darker);
        }

@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 .dataFields {
        /* All dataFields blocks in the receipt. */
    }

        #ReceiptOrderInfo .dataFields .fieldContainer {
            margin: 0px 0px var(--site-margin-thin);
        }

            #ReceiptOrderInfo .dataFields .fieldContainer:last-child {
                margin: 0px;
            }

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

            #ReceiptOrderInfo .dataFields .fieldContainer .fieldText {
                width: calc(100% - 9em);
                padding: 0px;
            }

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

        #ReceiptOrderInfo #OrderIncomplete .dataFields li.orderType {
        }

        #ReceiptOrderInfo #OrderIncomplete .dataFields li.orderStatus {
        }

        #ReceiptOrderInfo #OrderIncomplete .dataFields li.paymentStatus {
        }

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

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

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

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

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

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

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

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

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

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

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

    #ReceiptOrderInfo #OrderConfirmation {
        margin-bottom: var(--site-box-margin-bottom);
        font-size: var(--site-font-size-big);
        background: transparent;
        border: var(--site-border-color) var(--site-border-width) solid;
    }

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

        #ReceiptOrderInfo #OrderConfirmation .dataFields {
        }

            #ReceiptOrderInfo #OrderConfirmation .dataFields .fieldContainer {
            }

                #ReceiptOrderInfo #OrderConfirmation .dataFields .fieldContainer .fieldTitle {
                }

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

                #ReceiptOrderInfo #OrderConfirmation .dataFields .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;
        }