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

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

}

/* ####################################
   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: 90px;
        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";
                }

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

        .item.product .text .title {
        }

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

        .item.product .text .productNote {
            margin: 0 0 var(--site-margin-thinner);
            color: var(--site-color-gray-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-gray-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: center;
            }

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

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

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

    #ShoppingCartSummaryShort #ShoppingCartSummaryInfo {
        display: inline-block; 
        margin-right: 10px;
    }

    #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-right: 10px;
            padding: 0;
            list-style: 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;
                    margin-right: 5px;
                    font-style: normal;
                    font-variant: normal;
                    font-family: var(--site-icon-font-family);
                    font-weight: var(--site-icon-font-weight);
                    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-gray-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: 20px;
        }

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

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