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

        .pastOrders table.pastOrdersSummary thead tr {
        }

            .pastOrders table.pastOrdersSummary thead tr th.orderNumber {
            }

            .pastOrders table.pastOrdersSummary thead tr th.orderDate {
            }

            .pastOrders table.pastOrdersSummary thead tr th.orderShopCategory {
            }

            .pastOrders table.pastOrdersSummary thead tr th.orderReference {
            }

            .pastOrders table.pastOrdersSummary thead tr th.orderStatus {
            }

            .pastOrders table.pastOrdersSummary thead tr th.orderPaymentStatus {
            }

            .pastOrders table.pastOrdersSummary thead tr th.orderPaymentType {
            }

            .pastOrders table.pastOrdersSummary thead tr th.orderTotal {
            }

        .pastOrders table.pastOrdersSummary td {
        }

            .pastOrders table.pastOrdersSummary td.orderNumber .viewOrderLink {
                white-space: nowrap;
            }

                .pastOrders table.pastOrdersSummary td.orderNumber .viewOrderLink::after {
                    display: none !important;
                }

        .pastOrders table.pastOrdersSummary tr.pastOrder {
        }

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

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

            .pastOrders table.pastOrdersSummary tr.pastOrder td.orderShopCategory {
            }

            .pastOrders table.pastOrdersSummary tr.pastOrder td.orderReference {
            }

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

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

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

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

/*
    Past Order Detail View
*/

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

    .pastOrder .toolbar {
    }

        .pastOrder .toolbar #AllOrdersButton {
        }

        .pastOrder .toolbar #TaxInvoiceDownloadButton {
        }

    .pastOrder h1#PageTitle {
        display: none !important;
    }

    .pastOrder .pastOrderDetailsTitle {
    }

    .pastOrder #PageBody {
    }

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

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

        .item.product .text .title {
        }

            .item.product .text .title .productCode {
                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-green-mid-dark);
        }

        .item.product .text .summary {
        }

        .item.product .text .read-more {
            justify-content: flex-start; /* Opinion: Although the link is pushed to the end by cards layouts because designers and marketing leaders most commonly want to see the link at the bottom of the box, that effect is a bit weird for products because the price+cart options are usually at the end instead.. This can be overridden with a utility class, e.g. 'read-more-justify-end' at the collection level. See ContentCollectionsCards.css. */
        }

            .item.product .text .read-more a {
            }

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

            .item.product .text .product-info .info-field .label {
                display: inline-block;
                width: 100px;
                font-weight: bold;
            }

            .item.product .text .product-info .info-field .value {
                display: inline;
            }

            .item.product .text .product-info .info-field.productCodeField {
            }

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

                .item.product .text .product-info .info-field.stockInfo .noStock {
                }

                .item.product .text .product-info .info-field.stockInfo .lowStock {
                }

                .item.product .text .product-info .info-field.stockInfo .inStock {
                }

            .item.product .text .product-info .info-field.membersOnly {
            }

        .item.product .text .product-info:empty {
            display: none !important;
        }

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

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

        .item.product .text .cartOptions {
            /* See Abstracts/Mixins.css */
        }

            .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.dropdown,
                .item.product .text .cartOptions .variations.dropdownradio { 
                    /* Note: It's not a typo. The class could be "dropdown" or "dropdownradio". */
                    position: relative;
                    float: left;
                    width: 100%;
                    max-width: 300px;
                    margin-right: 5px;
                }

                    .addProductsTable .product .variations.dropdown,
                    .addProductsTable .product .variations.dropdownradio {
                        max-width: 100%;
                    }

                        .item.product .text .cartOptions .variations.dropdown select,
                        .item.product .text .cartOptions .variations.dropdownradio 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.dropdownradio {
                }

            .item.product .text .cartOptions .addToCartButton {
                position: relative;
                display: flex;
                align-items: stretch;
            }

                .item.product .text .cartOptions .addToCartButton .quantitySelectorLabel {
                    /* See Abstracts/Mixins.css */
                }

                .item.product .text .cartOptions .addToCartButton .quantitySelector {
                    display: inline-block;
                    vertical-align: middle;
                    width: 60px;
                    margin-right: 5px;
                    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: 0px;
                    font-size: var(--site-forms-field-font-size);
                }
         
            .item.product .text .cartOptions .addToCartButton.productAdded {
            }

                .item.product .text .cartOptions .addToCartButton.productAdded::after {
                    content: "\2714\ Added";
                    position: absolute;
                    right: -25px;
                    top: -25px;
                    z-index: 5;
                    display: inline-block;
                    box-sizing: border-box;
                    padding: 11px 5px;
                    width: 50px;
                    height: 50px;
                    font-weight: bold;
                    font-size: 12px;
                    color: #fff;
                    background: #2c8500; /* 4.7:1 contrast with #fff. AA but not AAA compliant for normal text. Use #000 / #3aad00 for AAA compliance with 7.15:1 contrast. */
                    border-radius: 100%;
                    text-align: center;
                }

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

.collection:not(.cards):not(.tiles) .item.product {
    margin: 0px 0px var(--site-box-margin-bottom);
    padding: var(--site-padding);
    border-color: var(--site-color-ui-light);
    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 #ProductNote {
        margin: 0 0 15px;
    }

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

        .productDetails #ProductInfo .info-field {
            margin: 0 0 15px;
        }

            .productDetails #ProductInfo .info-field .label {
                display: inline-block;
                width: 150px;
                font-weight: bold;
            }

            .productDetails #ProductInfo .info-field .value {
                display: inline;
            }

            .productDetails #ProductInfo .info-field.productCodeField {
            }

            .productDetails #ProductInfo .info-field.stockInfo {
            }

                .productDetails #ProductInfo .info-field.stockInfo .noStock {
                }

                .productDetails #ProductInfo .info-field.stockInfo .lowStock {
                }

                .productDetails #ProductInfo .info-field.stockInfo .inStock {
                }

            .productDetails #ProductInfo .info-field.membersOnly {
            }

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

    .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-ui-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.help-text,
            #CheckoutForm #ShippingOptions .shippingType div.help-text,
            #ShippingOptions .shippingType div.help-text,
            #CheckoutForm #PaymentDetails .paymentType div.help-text {
                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 {
        position: fixed;
        left: 0px;
        bottom: 0px;
        box-sizing: border-box;
        width: 100%;
        padding: var(--site-padding-thinner);
        text-align: center;
        background: var(--site-color-ui-lighter);
        border-top: var(--site-border-color) var(--site-border-width) solid;
        z-index: 1;
    }

        #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,
#Primary #PageBody > .progressMeter:first-child {
    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
   ################################## */

body[id*=shop_order_complete_success] {
    /* This catches all order complete pages including success and failure conditions. */
}

    body[id*=shop_order_complete_success] #PageTop {
    }

    body[id*=shop_order_complete_success] #Primary {
    }

        body[id*=shop_order_complete_success] #Primary #PageTitle {
            /*margin: var(--site-h2-margin) !important;
            font-size: var(--site-h2-font-size);
            text-align: center;*/
        }

body[id*=shop_order_complete_success] {
}

body[id*=shop_order_complete_failed] {
}

body[id*=shop_order_complete_failed_nostock] {
}

#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: 11em;
                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
   ################################## */

body.path---shop--help {
}

    body.path---shop--help #Header {
    }

        body.path---shop--help #Header .site-header #Logo {
        }

    body.path---shop--help #SubHeader {
    }

#ShopHelpMessage {
}

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

    #ShopHelpMessage .helpSummary {
    }

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

body[id*="_shop_shipping_calculator"] {
}

    body[id*="_shop_shipping_calculator"] #Header,
    body[id*="_shop_shipping_calculator"] #SubHeader,
    body[id*="_shop_shipping_calculator"] #PageTitle {
        display: none;
    }

    body[id*="_shop_shipping_calculator"] #CurrentShippingPrice {
    }

        body[id*="_shop_shipping_calculator"] #CurrentShippingPrice .fieldTitle {
            padding: 0px;
        }

    body[id*="_shop_shipping_calculator"] #ShippingMethodContainer {
    }

        body[id*="_shop_shipping_calculator"] #ShippingMethodContainer .fieldTitle {
            display: none;
        }

        body[id*="_shop_shipping_calculator"] #ShippingMethodContainer .fieldContent {
            width: 100%;
            max-width: 100%;
        }

    body[id*="_shop_shipping_calculator"] #ShippingLocation.fieldGroupContainer {
        margin-bottom: var(--site-forms-field-gap) !important;
        padding: 0px;
        border: 0px;
    }

        body[id*="_shop_shipping_calculator"] #ShippingLocation.fieldGroupContainer legend {
            display: none;
        }