/* override bootstrap variables*/
:root {
    --bs-primary: #e8590c;
    --bs-primary-rgb: 232, 89, 12;
    --bs-link-color: #c2410c;
}

.pagination {
    --bs-pagination-active-bg: #e8590c;
    --bs-pagination-active-border-color: #e8590c;
}



body {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    color: #212529;
    position: relative;
    left: 0;
    transition: all 0.3s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    color: #444;
}

h1 {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 20px;
}

h2 {
    font-size: 28px;
    margin-bottom: 15px;
}

    h2 a {
        color: #444;
    }

        h2 a:hover {
            color: #c2410c;
        }

h3 {
    font-size: 24px;
}

h4 {
    font-size: 21px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 14px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}



a {
    color: #c2410c;
}

    a, a:hover, a.active {
        text-decoration: none;
        outline: none;
    }

        a, a:focus, a:hover {
            outline: none;
            text-decoration: none;
        }

            a:hover {
                color: #333;
                text-decoration: underline;
            }

/* Loading spinner */
#loading {
    z-index: 5000;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/Images/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
}

/* Bootstrap changes */

/* Bootstrap wraps a breadcrumb onto a second line when it will not fit, which on a phone spends a
   whole line on a trail nobody reads closely. It stays on one line now and scrolls sideways
   instead, so a swipe brings the truncated end into view. This only engages when the trail is too
   long for its container, so at desktop widths nothing changes. */
.breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* The trail running off the edge is hint enough that there is more; a scrollbar sitting under
       it is just noise. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* Each crumb keeps its own width instead of being squeezed thin to make the row fit. */
    .breadcrumb .breadcrumb-item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Set by drag-scroll.js for the length of a mouse drag. Without the selection guard the drag
       paints a text selection across the crumbs as it sweeps over them. */
    .breadcrumb.is-dragging {
        cursor: grabbing;
        user-select: none;
        -webkit-user-select: none;
    }

        .breadcrumb.is-dragging a {
            cursor: grabbing;
        }



/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*ul.nested-list {
    list-style: none;
    padding-left: 0px;
}
*/



    /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*ul.nested-list > li {
        margin-left: 0px;
    }
*/


    /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*ul.nested-list ul {
        list-style-type: circle;
        margin-left: 10px;
        padding-left: 30px;
    }
*/


.btn-primary {
    background-color: #e8590c;
    border: none;
    color: #fff;
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus {
        background-color: #e8590c;
        border: none;
        outline: 0;
    }

    .btn-primary[disabled], .btn-primary[disabled]:hover {
        background-color: #eabf70;
    }

    /* Delete after bootstrap 5 migration */
/*.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}*/

.form-label {
    margin-bottom: .5rem;
}

.form-control {
    box-shadow: none;
}

.form-text {
    margin-top: .25rem;
    font-size: .875em;
    color: #6c757d;
}

/* Account pages (login/register) */
.account-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
}

.account-card-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #777;
    font-size: .875em;
}

    .account-card-divider::before,
    .account-card-divider::after {
        content: "";
        flex: 1 1 auto;
        border-bottom: 1px solid #ddd;
    }

    .account-card-divider::before {
        margin-right: 10px;
    }

    .account-card-divider::after {
        margin-left: 10px;
    }

/* Modal */
.modal-content .popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #e8590c;
    color: #FFF;
    font-size: 24px;
    display: block;
    line-height: 1;
    width: 30px;
    height: 30px;
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    z-index: 1;
    top: 0;
    right: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

    .modal-content .popup-close:hover {
        color: #fff;
        background-color: #333;
    }


.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

    .modal-open[style] {
        padding-right: 0px !important;
    }



/* MVC3 validation */
.validation-summary-errors ul {
    list-style-type: disc;
}

.validation-summary-errors li {
    margin-left: 30px;
}

.validation-summary-valid {
    display: none;
}

.field-validation-valid {
    display: none;
}

.field-validation-error {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    padding-left: 5px;
    color: #b94a48;
}

.input-validation-error {
    color: #b94a48;
    border-color: #ee5f5b !important;
}

    .input-validation-error:focus {
        border-color: #e9322d;
        -webkit-box-shadow: 0 0 6px #f8b9b7;
        -moz-box-shadow: 0 0 6px #f8b9b7;
        box-shadow: 0 0 6px #f8b9b7;
    }

/* End MVC3 validation */


/* Top Bar */

.top-bar {
    background-color: #f9f9f9;
    color: #878787;
    position: relative;
    z-index: 998;
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
}

    .top-bar .top-bar-left {
        text-align: left;
    }

    .top-bar .top-bar-center {
        text-align: center;
    }

    .top-bar .top-bar-right {
        text-align: right;
    }

    .top-bar .sidebar a:hover {
        color: #e8590c;
    }

    .top-bar .sidebar aside {
        display: inline-block;
        margin-top: 0;
        vertical-align: middle;
    }

        .top-bar .sidebar aside + aside {
            margin-left: 30px;
        }


    .top-bar .sidebar .separate-left {
        position: relative;
    }

        .top-bar .sidebar .separate-left:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: -15px;
            width: 1px;
            height: 16px;
            margin: auto;
        }

        .top-bar .sidebar .separate-left:before {
            background-color: #d3d3d3;
        }

    .top-bar .sidebar .separate-right {
        position: relative;
    }

        .top-bar .sidebar .separate-right:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            right: -15px;
            width: 1px;
            height: 16px;
            margin: auto;
        }

        .top-bar .sidebar .separate-right:after {
            background-color: #d3d3d3;
        }

    .top-bar .sidebar .widget_nav_menu > div > ul.menu {
        overflow: visible;
        border: none;
        margin: 0;
        padding: 0;
        color: inherit;
        font-size: 16px;
    }

        .top-bar .sidebar .widget_nav_menu > div > ul.menu li {
            display: inline-block;
            position: relative;
            border: none;
            color: inherit;
        }

        .top-bar .sidebar .widget_nav_menu > div > ul.menu > li {
            padding: 0;
            margin: 0;
        }

            .top-bar .sidebar .widget_nav_menu > div > ul.menu > li + li {
                margin-left: 30px;
            }

                .top-bar .sidebar .widget_nav_menu > div > ul.menu > li + li:before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: -15px;
                    width: 1px;
                    height: 16px;
                    margin: auto;
                }

                .top-bar .sidebar .widget_nav_menu > div > ul.menu > li + li:before {
                    background-color: #d3d3d3;
                }

            .top-bar .sidebar .widget_nav_menu > div > ul.menu > li ul {
                display: none;
                position: absolute;
                z-index: 999;
                right: 0;
                top: 100%;
                background-color: #fff;
                color: #333;
                text-align: left;
                margin: 0;
                padding: 0 15px;
                min-width: 150px;
                -webkit-box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.3);
                -moz-box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.3);
                box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.3);
            }

                .top-bar .sidebar .widget_nav_menu > div > ul.menu > li ul li {
                    display: block;
                    white-space: nowrap;
                    padding: 8px 0;
                    margin: 0;
                    line-height: 28px;
                }

                    .top-bar .sidebar .widget_nav_menu > div > ul.menu > li ul li + li {
                        border-top: solid 1px #f0f0f0;
                    }

                .top-bar .sidebar .widget_nav_menu > div > ul.menu > li ul ul {
                    left: 100%;
                    top: 0;
                }


/* Header */

header {
    margin-bottom: 20px;
}

    header.main-header .header-customize-right, header.main-header .header-customize-left {
        height: 130px;
    }

    header.main-header .header-logo {
        height: 130px;
    }

        header.main-header .header-logo:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        header.main-header .header-logo > a > img {
            max-height: 150px;
            padding-top: 20px;
            padding-bottom: 20px;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            max-width: none;
        }

    header.main-header .header-wrapper {
        display: table;
        position: relative;
        width: 100%;
        border-bottom-color: #e8590c;
        border-bottom-style: solid;
        border-bottom-width: 2px;
    }

    header.main-header .header-left {
        display: table-cell;
        text-align: left;
        vertical-align: middle;
    }

    header.main-header .header-right {
        display: table-cell;
        text-align: right;
        vertical-align: middle;
    }

        header.main-header .header-left.text-center,
        header.main-header .header-right.text-center {
            text-align: center;
        }

    header.main-header .header-nav-wrapper {
        background-color: #fff;
        left: 0;
        right: 0;
        z-index: 997;
    }

    header.main-header .header-customize {
        display: inline-block;
        vertical-align: middle;
    }

    header.main-header .header-customize-left,
    header.main-header .header-customize-right {
        color: #3f3f3f;
    }

        header.main-header .header-customize-left .search-box input,
        header.main-header .header-customize-right .search-box input {
            color: #3f3f3f;
        }

        header.main-header .header-customize-left .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon + span.total,
        header.main-header .header-customize-right .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon + span.total {
            background-color: #3f3f3f;
            color: #fff;
        }

    header.main-header .header-customize-item {
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

        header.main-header .header-customize-item + .header-customize-item {
            position: relative;
            margin-left: 30px;
        }

    header.main-header .header-customize .search-button-wrapper + .shopping-cart-wrapper,
    header.main-header .header-customize .shopping-cart-wrapper + .search-button-wrapper {
        margin-left: 15px;
    }

    header.main-header .header-customize .header-customize-item + .shopping-cart-wrapper.with-price .widget_shopping_cart_icon > i {
        width: 32px;
        text-align: left;
    }

    header.main-header .header-customize-separate .header-customize-item + .header-customize-item:before {
        content: '';
        position: absolute;
        left: -15px;
        display: block;
        width: 1px;
        height: 16px;
        background-color: #eee;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    header.main-header .icon-search-menu {
        width: 43px;
        height: 43px;
        line-height: 43px;
        vertical-align: middle;
        font-size: 17px;
        display: inline-block;
        text-align: center;
    }

    header.main-header .search-button-wrapper.style-round .icon-search-menu,
    header.main-header .shopping-cart-wrapper.no-price.style-round .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon {
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        color: #fff;
    }

    header.main-header .search-button-wrapper.style-bordered .icon-search-menu,
    header.main-header .shopping-cart-wrapper.no-price.style-bordered .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon {
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        background-color: transparent;
        border: solid 2px #eee;
        line-height: 39px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

ul.header-social-profile-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    color: #e8590c;
}

    ul.header-social-profile-wrapper li {
        display: inline-block;
    }

        ul.header-social-profile-wrapper li a {
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }

            ul.header-social-profile-wrapper li a:hover {
                color: #191919;
            }

        ul.header-social-profile-wrapper li + li {
            margin-left: 20px;
        }

header.main-header .search-box input {
    height: 30px;
    border: solid 1px #eee;
    color: #191919;
    background-color: transparent;
    height: 50px;
    line-height: 48px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
    vertical-align: middle;
}

header.main-header .search-box button {
    border: none;
    background-color: transparent;
    position: absolute;
    top: 0px;
    bottom: 0;
    right: 20px;
    margin: auto;
    padding: 0;
    line-height: 1;
}

header.main-header .search-box-wrapper > form {
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;
    line-height: 30px;
    border: none;
}

    header.main-header .search-box-wrapper > form input {
        width: 300px;
    }

header.main-header .search-with-category {
    width: 460px;
}

    header.main-header .search-with-category > .search-with-category-inner {
        line-height: 50px;
    }


    header.main-header .search-with-category .form-search-right {
        padding-left: 0px;
    }

        header.main-header .search-with-category .form-search-right input[type="text"] {
            width: 100%;
        }


    header.main-header .search-with-category .search-box input {
        border-width: 2px;
        line-height: 46px;
    }


/* Ajax Search results */
.ajax-search-result {
    margin: auto;
    max-width: 1140px;
    background: rgba(77, 77, 77, 0.1);
}

    .ajax-search-result > ul {
        list-style: none;
        position: relative;
        padding: 0;
        margin: 0;
    }

    .ajax-search-result li {
        padding: 5px 20px;
        color: inherit;
        font-size: 14px;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

        .ajax-search-result li:hover,
        .ajax-search-result li.selected {
            background-color: rgba(127, 127, 127, 0.1);
        }

        .ajax-search-result li > a {
            color: #333;
        }

        .ajax-search-result li + li {
            border-top: dotted 1px rgba(77, 77, 77, 0.1);
        }

        .ajax-search-result li.search-view-more {
            font-size: 14px;
            font-style: italic;
        }

            .ajax-search-result li.search-view-more a {
                text-decoration: underline;
            }

        .ajax-search-result li span {
            color: #555;
            float: right;
        }

/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*i.ajax-search-icon {
    color: inherit;
}
*/


div.search-view-more {
    background-color: rgba(255, 255, 0, 0.1);
    padding: 5px 20px;
    border-top: solid 1px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    text-align: center;
}

    div.search-view-more i.wicon {
        vertical-align: middle;
    }



/* Mobile Header */
body.menu-mobile-in {
    left: 280px;
}

header.mobile-header {
    background: #fff;
}

    header.mobile-header .header-logo {
        width: 110px;
        margin: 0px auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

        header.mobile-header .header-logo img {
            width: 100px;
        }

    header.mobile-header .header-container-wrapper {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        background-color: #fff;
        z-index: 997;
        top: 0;
        background-color: #eee;
        border-bottom: none;
    }

        header.mobile-header .header-container-wrapper .header-mobile-inner {
            /*height: 52px;*/
            position: relative;
        }

.main-menu-overlay {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

body.menu-mobile-in .main-menu-overlay {
    opacity: 1;
    z-index: 1000;
    pointer-events: auto;
}

/* Mobile header toggle icon */
.toggle-icon-wrapper {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

    .toggle-icon-wrapper:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .toggle-icon-wrapper .toggle-icon {
        display: inline-block;
        height: 30px;
        position: relative;
        vertical-align: middle;
        width: 30px;
    }

        .toggle-icon-wrapper .toggle-icon > span {
            background: none repeat scroll 0 0 #666;
            bottom: 0;
            display: block;
            height: 2px;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            width: 80%;
        }

        .toggle-icon-wrapper .toggle-icon:after,
        .toggle-icon-wrapper .toggle-icon:before {
            background: none repeat scroll 0 0 #666;
            content: "";
            height: 2px;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            width: 80%;
        }

        .toggle-icon-wrapper .toggle-icon:before {
            top: 20%;
            -webkit-transform-origin: top left;
            -moz-transform-origin: top left;
            -ms-transform-origin: top left;
            -o-transform-origin: top left;
            transform-origin: top left;
        }

        .toggle-icon-wrapper .toggle-icon:after {
            bottom: 20%;
            -webkit-transform-origin: bottom left;
            -moz-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
            -o-transform-origin: bottom left;
            transform-origin: bottom left;
        }

    .toggle-icon-wrapper + span {
        vertical-align: middle;
        text-transform: uppercase;
    }

    .toggle-icon-wrapper.in .toggle-icon span {
        background: transparent;
    }

    .toggle-icon-wrapper.in .toggle-icon:before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .toggle-icon-wrapper.in .toggle-icon:after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }


header.mobile-header .header-mobile-inner .header-customize {
    display: block;
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    color: #000;
}

    header.mobile-header .header-mobile-inner .header-customize:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

header.mobile-header .header-mobile-inner .header-customize-item {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

    header.mobile-header .header-mobile-inner .header-customize-item + .header-customize-item {
        margin-left: 10px;
    }

header.mobile-header .shopping-cart-wrapper .widget_shopping_cart_content {
    height: 52px;
}

    header.mobile-header .shopping-cart-wrapper .widget_shopping_cart_content:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    header.mobile-header .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon {
        display: inline-block;
        vertical-align: middle;
    }

        header.mobile-header .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon {
            display: inline-block;
            /*border: solid 1px #666;*/
            height: 50px;
            width: 50px;
            text-align: center;
            line-height: 37px;
            padding: 13px;
            font-size: 22px;
            color: #666;
        }

            header.mobile-header .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon + span {
                top: 4px;
                right: 4px;
                color: #fff;
                background-color: #191919;
                border-radius: 100%;
                padding: 0;
                width: 17px;
                height: 17px;
                line-height: 17px;
            }


/* Mobile header search
   Rendered under the logo row in _Layout.cshtml rather than inside the fly-out menu, so it is
   reachable on every page without opening the hamburger. */
.mobile-header-search {
    padding-bottom: 12px;
}

form.search-form-mobile-header {
    position: relative;
    margin: 0;
}

    form.search-form-mobile-header input {
        -webkit-appearance: none;
        appearance: none;
        background-color: #fff;
        color: #444;
        border: solid 1px #ddd;
        border-radius: 3px;
        display: block;
        width: 100%;
        /* 16px stops iOS Safari zooming the page when the field takes focus. */
        font-size: 16px;
        line-height: 1.2;
        height: auto;
        padding: 10px 46px 10px 12px;
    }

        /* type="search" draws its own clear button, which would sit right on top of the
           magnifier. Hide it and keep the submit button as the only control. */
        form.search-form-mobile-header input::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
        }

    form.search-form-mobile-header button {
        border: none;
        background-color: transparent;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        padding: 0 14px;
        line-height: 1;
        font-size: 16px;
    }

/* Mobile menu */

.container.header-mobile-wrapper {
    position: relative;
}

.header-mobile-nav {
    background: #fcfcfc;
    display: none;
    margin-bottom: 15px;
}

.header-mobile-nav.menu-drop-fly {
    display: block;
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    overflow-x: hidden;
    width: 280px;
    left: -280px;
    border-right: solid 3px #e8590c;
    z-index: 9999;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    .header-mobile-nav.menu-drop-fly.in {
        left: 0;
    }

/* Shopping Cart */

.shopping-cart-wrapper {
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    position: relative;
}

    .shopping-cart-wrapper.no-price .sub-total-text {
        display: none;
    }

    .shopping-cart-wrapper .widget_shopping_cart_content {
        display: block;
        text-align: left;
    }

        .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon {
            position: relative;
            display: inline-block;
        }

            .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon {
                cursor: pointer;
                padding: 13px;
                vertical-align: middle;
                width: 50px;
                height: 50px;
            }

                .shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon + span.total {
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    line-height: 15px;
                    background-color: #191919;
                    color: #fff;
                    top: 4px;
                    right: 4px;
                    text-align: center;
                    font-size: 11px;
                    -webkit-border-radius: 100%;
                    -moz-border-radius: 100%;
                    border-radius: 100%;
                }

        /* Flyout cart */
        .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper {
            display: block;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 100%;
            right: 0;
            left: auto;
            z-index: 9998;
            min-width: 300px;
            background: #fff;
            border: solid 2px #eee;
            padding: 0;
            line-height: 2em;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -ms-transition: 0.5s all;
            -o-transition: 0.5s all;
            transition: 0.5s all;
            -webkit-transition-timing-function: cubic-bezier(1, 0.07, 1, 0.07);
            -moz-transition-timing-function: cubic-bezier(1, 0.07, 1, 0.07);
            -ms-transition-timing-function: cubic-bezier(1, 0.07, 1, 0.07);
            -o-transition-timing-function: cubic-bezier(1, 0.07, 1, 0.07);
            transition-timing-function: cubic-bezier(1, 0.07, 1, 0.07);
        }

            .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper .cart-total {
                padding: 0 15px 20px;
                position: relative;
                color: #222;
            }

            .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li.empty {
                padding: 15px;
                text-align: center;
            }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li.empty h4 {
                    text-transform: uppercase;
                    padding: 0 0 15px;
                    margin: 0;
                    font-size: 16px;
                    word-spacing: 0.2em;
                }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li.empty p {
                    color: #777;
                    padding: 0;
                    margin: 0;
                    font-size: 16px;
                }

            .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li {
                padding: 15px 0;
                margin: 0;
                position: relative;
            }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li + li {
                    border-top: solid 1px #eee;
                }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li .cart-left {
                    float: left;
                    overflow: hidden;
                    margin-right: 10px;
                    border: solid 1px #eee;
                    background: #fff;
                }

                    .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li .cart-left > a > img {
                        height: auto;
                        width: 58px;
                        margin: 0;
                        display: block;
                    }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li .cart-right {
                    overflow: hidden;
                }

                    .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li .cart-right > a {
                        word-spacing: 0.2em;
                        font-size: 14px;
                        display: block;
                        padding-right: 15px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li .cart-right > span.quantity {
                        font-size: 13px;
                        display: block;
                        text-align: left;
                        color: #8f8f8f;
                    }

                    .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li .cart-right > a.mini-cart-remove {
                        position: absolute;
                        right: 0;
                        top: 15px;
                        padding-right: 0;
                        font-size: 18px;
                    }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper li:after {
                    content: "";
                    display: block;
                    clear: both;
                }

            .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.total {
                padding: 0;
                font-size: 13px;
                font-weight: bold;
                margin: 0;
                border-top: solid 1px #eee;
                border-bottom: solid 1px #eee;
                line-height: 43px;
            }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.total strong {
                    text-transform: uppercase;
                    font-weight: 400;
                }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.total > span.amount {
                    font-weight: 700;
                    float: right;
                }

            .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.buttons {
                text-align: center;
                margin: 0;
                padding: 15px 0 0;
                font-size: 0;
            }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.buttons .button {
                    border-color: #333333;
                    background-color: #333333;
                    color: #fff;
                    -webkit-border-radius: 0;
                    -moz-border-radius: 0;
                    border-radius: 0;
                    line-height: 20px;
                    padding: 10px;
                    font-size: 12px;
                    min-width: 125px;
                    width: 48%;
                    display: inline-block;
                    text-transform: uppercase;
                }

                    .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.buttons .button > i.fa {
                        margin-right: 5px;
                    }

                    .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.buttons .button + .button {
                        margin-left: 4%;
                    }

            .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper dl {
                border: none;
                margin: 0;
                padding: 0;
            }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper dl dt {
                    float: left;
                    margin: 0 10px 0 0;
                    padding: 0;
                    line-height: 25px;
                    clear: none;
                    font-size: 11px;
                    font-weight: 400;
                }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper dl dd {
                    padding: 0;
                    line-height: 25px;
                    display: block;
                    float: none;
                    margin: 0;
                    font-size: 11px;
                }

                .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper dl p {
                    margin: 0;
                    padding: 0;
                }

        .shopping-cart-wrapper .widget_shopping_cart_content ul.cart_list,
        .shopping-cart-wrapper .widget_shopping_cart_content ul.product_list_widget {
            position: relative;
            margin: 0;
            list-style: none;
            padding: 15px 15px 0;
        }

        /* Displays the flayout cart */
        .shopping-cart-wrapper .widget_shopping_cart_content:hover .cart_list_wrapper {
            visibility: visible;
            opacity: 1;
            -webkit-transition-timing-function: cubic-bezier(0.11, 0.76, 0.24, 0.93);
            -moz-transition-timing-function: cubic-bezier(0.11, 0.76, 0.24, 0.93);
            -ms-transition-timing-function: cubic-bezier(0.11, 0.76, 0.24, 0.93);
            -o-transition-timing-function: cubic-bezier(0.11, 0.76, 0.24, 0.93);
            transition-timing-function: cubic-bezier(0.11, 0.76, 0.24, 0.93);
        }

    .shopping-cart-wrapper.with-price a .sub-total-text .amount {
        color: #333;
    }


    .shopping-cart-wrapper.with-price .sub-total-text {
        display: inline-block;
    }

    .shopping-cart-wrapper.with-price .widget_shopping_cart_content .widget_shopping_cart_icon > .wicon {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background-color: transparent;
    }

/* Menu */
header.main-header .menu-wrapper {
    font-family: 'Lato', sans-serif;
    display: inline-block;
    vertical-align: middle;
}

    header.main-header .menu-wrapper .x-nav-menu {
        position: static;
        display: inline-block;
        vertical-align: middle;
    }

        header.main-header .menu-wrapper .x-nav-menu > li.x-menu-item > a {
            padding: 0;
            font-size: 16px;
            font-weight: 400;
            line-height: 65px;
        }

        header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu li > a {
            color: #333;
            font-weight: 400;
            font-size: 16px;
        }

        header.main-header .menu-wrapper .x-nav-menu li.x-header-column > a.x-menu-a-text,
        header.main-header .menu-wrapper .x-nav-menu li.x-header-column:hover > a.x-menu-a-text {
            color: #333 !important;
        }

        header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu {
            border: solid 2px #ededed;
            background-color: #fff;
        }

        header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu-standard {
            padding: 10px 0;
        }

            header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu-standard > li {
                padding-left: 25px;
                padding-right: 25px;
            }

                header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu-standard > li > a.x-menu-a-text {
                    padding-right: 20px;
                    line-height: 45px;
                }

                    header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu-standard > li > a.x-menu-a-text > span {
                        position: relative;
                    }

                        header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu-standard > li > a.x-menu-a-text > span:before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 100%;
                            margin-top: 5px;
                            width: 0;
                            border-top: solid 1px #333;
                            -webkit-transition: 0.3s all;
                            -moz-transition: 0.3s all;
                            -ms-transition: 0.3s all;
                            -o-transition: 0.3s all;
                            transition: 0.3s all;
                        }

                header.main-header .menu-wrapper .x-nav-menu li > ul.x-sub-menu-standard > li + li > a.x-menu-a-text {
                    border-top: solid 1px #ededed;
                }

        header.main-header .menu-wrapper .x-nav-menu > li > a {
            color: #333;
        }

        header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu b.x-caret {
            right: 0;
            color: #2D3339;
        }

            header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu b.x-caret:before {
                font-family: "FontAwesome";
                content: '\f178';
                font-size: 11px;
            }

        header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-header-column > a.x-menu-a-text {
            font-weight: 400;
            font-size: 22px;
            /*font-family: 'Playfair Display';*/
            font-family: "Fraunces", serif;
            font-optical-sizing: auto;
            position: relative;
            display: block;
            color: #000;
        }

            header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-header-column > a.x-menu-a-text:before {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
            }

            header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-header-column > a.x-menu-a-text:before {
                border-top: solid 1px #ededed;
            }

        header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item ul.x-sub-menu {
            border: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            background-color: transparent;
        }

        header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item > ul.x-sub-menu-standard > li {
            padding-left: 0;
            padding-right: 0;
        }

        header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item a.x-menu-a-text {
            line-height: 28px;
        }

        header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-tabs .x-sub-menu-tab {
            padding: 15px;
        }

            header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-tabs .x-sub-menu-tab > li.x-menu-item {
                background-color: transparent;
                padding: 10px 0;
            }

                header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-tabs .x-sub-menu-tab > li.x-menu-item > a.x-menu-a-text {
                    font-size: 15px;
                    /*font-family: 'Playfair Display';*/
                    font-family: "Fraunces", serif;
                    font-optical-sizing: auto;
                    color: #333;
                }

                    header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-tabs .x-sub-menu-tab > li.x-menu-item > a.x-menu-a-text:hover {
                        padding-left: 35px;
                    }

                    header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-tabs .x-sub-menu-tab > li.x-menu-item > a.x-menu-a-text > b.x-caret {
                        display: block;
                    }

                header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-tabs .x-sub-menu-tab > li.x-menu-item + li.x-menu-item {
                    border-top: solid 1px #ededed;
                }

        header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column li.x-menu-item + li > a.x-menu-a-text {
            border-top: none;
        }

header.main-header .header-nav-above {
    border-bottom: solid 1px #eee;
}

header.main-header .header-customize-right:before,
header.main-header .header-customize-left:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

header.main-header .header-customize-right .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper,
header.main-header .header-customize-left .shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper {
    margin-top: 10px;
}

header.main-header .header-customize.header-customize-left {
    margin-left: 0;
}

header.main-header .custom-list {
    margin: 0;
    list-style: none;
    padding-left: 0;
    color: #191919;
}

    header.main-header .custom-list li {
        line-height: 24px;
    }

header.main-header .custom-separate {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 1px;
    background-color: #eee;
    margin-left: 15px;
    margin-right: 15px;
}

header.main-header .menu-wrapper .x-nav-menu > li.x-menu-item + li.x-menu-item {
    margin-left: 45px;
}

/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*header.header-float {
    position: absolute !important;
    z-index: 997;
    left: 0;
    right: 0;
}
*/




header.main-header .icon-search-menu,
header.main-header .search-with-category .form-search-left > span:after,
header.main-header .search-box button,
header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu li.x-menu-item:hover > a > b.x-caret,
header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu li.x-menu-item > a:hover,
header.main-header .search-button-wrapper.style-bordered .icon-search-menu,
header.main-header .shopping-cart-wrapper.no-price.style-bordered .widget_shopping_cart_content .widget_shopping_cart_icon > i.wicon,
header.main-header ul.header-social-profile-wrapper li a, header.main-header .ajax-search-result > ul > li a:hover,
header.main-header .menu-wrapper .x-nav-menu li.current-menu-ancestor > a.x-menu-a-text,
header.main-header .menu-wrapper .x-nav-menu li.current-menu-parent > a.x-menu-a-text,
header.main-header .menu-wrapper .x-nav-menu li.current-menu-item > a.x-menu-a-text,
header.main-header .menu-wrapper .x-nav-menu li.menu-current > a.x-menu-a-text,
header.main-header .menu-wrapper .x-nav-menu li > a.x-menu-a-text:hover,
header.main-header .menu-wrapper .x-nav-menu li.x-menu-item:hover > a,
header.main-header .menu-wrapper .x-nav-menu ul.x-sub-menu-multi-column > li.x-menu-item.x-tabs .x-sub-menu-tab > li.x-menu-item.x-menu-active > a {
    color: #e8590c;
}


header.main-header .nav-hover-primary-base .header-customize i.fa {
    color: #191919;
}

    header.main-header .nav-hover-primary-base .header-customize i.fa:hover {
        color: #3f3f3f;
    }


.shopping-cart-wrapper.with-price .sub-total-text {
    display: inline-block;
}


.shopping-cart-wrapper .widget_shopping_cart_content ul.cart_list,
.shopping-cart-wrapper .widget_shopping_cart_content ul.product_list_widget {
    position: relative;
    margin: 0;
    list-style: none;
    padding: 15px 15px 0;
}

.shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper p.total > span.amount {
    font-weight: 700;
    float: right;
}





.p-color,
.p-color-hover:hover {
    color: #e8590c;
}


/***
    Footer 
***/

footer {
    padding: 50px 0 0px 0;
    background-color: #fff;
    color: #777;
}

    footer .scroll-up {
        padding: 22px 0;
        text-align: center;
        background-color: #f9f9f9;
        margin-bottom: 50px;
    }

        footer .scroll-up a {
            color: #aaa;
            font-size: 14px;
            text-transform: uppercase;
        }

            footer .scroll-up a svg {
                filter: invert(58%) sepia(55%) saturate(6%) hue-rotate(4deg) brightness(103%) contrast(99%);
            }

            footer .scroll-up a span {
                vertical-align: top;
            }


    footer .main-footer {
        padding: 0 0 70px 0;
    }

        footer .main-footer aside {
            margin-bottom: 30px;
        }

            footer .main-footer aside h4 {
                font-size: 25px;
                font-weight: normal;
                color: #333;
                margin-bottom: 20px;
            }

            /* Below md each footer section folds away behind its own heading, because four stacked
               sections put the copyright line a long way down the page. The heading becomes the
               toggle: a rule under it and a caret that flips say it can be opened.

               "collapse d-md-block" is what limits this to small screens - Bootstrap's display
               utility carries !important, so from md up the content is shown whatever the collapse
               state, and the heading goes back to being just a heading. */
            footer .main-footer aside .footer-section-toggle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 0;
                border: none;
                background: none;
                font: inherit;
                color: inherit;
                text-align: left;
            }

            footer .main-footer aside .footer-section-caret {
                transition: transform 0.2s;
                font-size: 24px;
            }

            footer .main-footer aside .footer-section-toggle[aria-expanded="true"] .footer-section-caret {
                transform: rotate(180deg);
            }

            @media (max-width: 767.98px) {
                footer .main-footer aside .footer-section-heading {
                    border-bottom: solid 1px #ededed;
                    padding-bottom: 12px;
                    margin-bottom: 0;
                }

                /* Only while the section is open, so a closed one sits tight against the next. */
                footer .main-footer aside .collapse.show,
                footer .main-footer aside .collapsing {
                    padding-top: 18px;
                }

                footer .main-footer aside {
                    margin-bottom: 0;
                }
            }

            /* From md up there is nothing to toggle, so the heading must not behave like a control. */
            @media (min-width: 768px) {
                footer .main-footer aside .footer-section-toggle {
                    pointer-events: none;
                }

                footer .main-footer aside .footer-section-caret {
                    display: none;
                }
            }

            footer .main-footer aside ul {
                list-style: none;
                padding: 0;
                margin: 0;
                line-height: 1.8;
                font-size: 15px;
                color: #999;
            }

                footer .main-footer aside ul li {
                    padding-bottom: 0;
                    font-size: 16px;
                    margin-bottom: 9px;
                }

                    footer .main-footer aside ul li a {
                        color: inherit;
                        padding-left: 5px;
                        -webkit-transition: all 0.3s;
                        -moz-transition: all 0.3s;
                        -ms-transition: all 0.3s;
                        -o-transition: all 0.3s;
                        transition: all 0.3s;
                    }

                        footer .main-footer aside ul li a:hover {
                            color: #e8590c;
                            text-decoration: underline;
                            padding-left: 10px;
                        }

    footer .bottom-bar {
        border-top: solid 1px;
        border-color: #ededed;
        padding-top: 18px;
        padding-bottom: 18px;
    }

        footer .bottom-bar ul.payment-list {
            list-style: none;
            display: inline-block;
        }

            footer .bottom-bar ul.payment-list li {
                float: left;
                display: inline-block;
                padding-right: 4px;
                padding-top: 5px;
                padding-bottom: 5px;
            }

                footer .bottom-bar ul.payment-list li:last-child {
                    padding-right: 0px;
                }

                footer .bottom-bar ul.payment-list li:hover {
                    opacity: 0.6;
                }

            footer .bottom-bar ul.payment-list image {
                max-width: 46px;
                max-height: 28px;
            }




/* Alphabetical index */

/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index-container {
    text-align: center;
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index {
    margin-bottom: 20px;
    text-align: left;
    display: inline-block;
}
*/


    /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index ul {
        list-style: none;
        padding-left: 0px;
    }
*/


        /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index ul li {
            float: left;
        }
*/


            /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index ul li a {
                display: block;
                text-align: center;
                width: 26px;
                height: 26px;
                margin: 0 8px 4px 0;
                background-color: #e8590c;
                color: #fff;
                text-decoration: none;
            }
*/


                /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index ul li a:hover {
                    cursor: pointer;
                    background-color: #D0A85B;
                }
*/


                /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index ul li a.no-items {
                    background-color: #EEDEC1;
                }
*/


                    /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.alphabetical-index ul li a.no-items:hover {
                        cursor: not-allowed;
                    }
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.collection-list-container {
    text-align: center;
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*ul.collection-list {
    list-style: none;
    padding-left: 0;
}
*/


/* Product details */

#product-details-page .product-column {
    width: auto;
}

#product-details-page .product-info {
    margin-bottom: 30px;
}

    #product-details-page .product-info h1 {
        margin-top: 0px;
        margin-bottom: 10px;
        font-family: 'Lato', sans-serif;
        font-weight: normal;
        font-size: 36px;
        color: #333;
        line-height: 1.4;
    }

    #product-details-page .product-info .product-purchase {
        margin-bottom: 20px;
    }

    #product-details-page .product-info .price {
        font-size: 36px;
        line-height: 1.2;
        font-style: normal;
        color: #c2410c;
        margin-bottom: 10px;
    }

        #product-details-page .product-info .price span {
            font-size: 20px;
        }

    #product-details-page .product-info .list-price {
        margin-top: -10px;
        margin-bottom: 10px;
    }

        #product-details-page .product-info .list-price .savings-amount {
            color: #ff2600;
        }

    #product-details-page .product-info select {
        width: 100%;
        height: 42px;
        background-color: #fafafa;
        color: #202020;
        margin-bottom: 30px;
        padding: 0 20px;
        border: 1px solid #ddd;
    }

    /* Product details Select 2 */
    #product-details-page .product-info .select2 {
        width: 100%;
        position: relative;
        height: 42px;
        background-color: #fafafa;
        color: #202020;
        padding: 0 20px;
        margin: 0 0 5px 0;
        border: 1px solid #ddd;
    }

    #product-details-page .product-info .select2-container--default .select2-selection--single {
        background-color: transparent;
        border: none;
        height: 42px;
        padding: 5px 0 5px 0;
    }

        #product-details-page .product-info .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }
    /* End Product details select 2 */

    #product-details-page .product-info .product-details {
        margin-bottom: 20px;
    }

    #product-details-page .product-info .add-to-cart select {
        width: auto;
        margin: 0 0 5px 0;
    }

    #product-details-page .product-info .product-details-out-of-stock {
        margin-bottom: 20px;
    }

    #product-details-page .product-info .add-to-design-wall {
        margin-bottom: 10px;
    }

        #product-details-page .product-info .add-to-design-wall button {
            color: #777;
            background: none;
            border: none;
            padding: 0px;
        }

            #product-details-page .product-info .add-to-design-wall button:before {
                font-family: "Material Symbols Outlined";
                content: "\E146";
                font-size: 18px;
                font-style: normal;
                font-weight: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                vertical-align: middle;
                width: 36px;
                height: 36px;
                background-color: #FAFAFA;
                line-height: 36px;
                text-align: center;
                border-radius: 100%;
                display: inline-block;
                color: #888;
                margin-right: 10px;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }

            #product-details-page .product-info .add-to-design-wall button:hover {
                color: #c2410c;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }

                #product-details-page .product-info .add-to-design-wall button:hover:before {
                    background-color: #e8590c;
                    color: #fff;
                }

    #product-details-page .product-info .add-to-wish-list {
        margin-bottom: 10px;
    }

        #product-details-page .product-info .add-to-wish-list button {
            color: #777;
            background: none;
            border: none;
            padding: 0px;
        }

            #product-details-page .product-info .add-to-wish-list button:before {
                font-family: "Material Symbols Outlined";
                content: "\E87D";
                font-size: 18px;
                font-style: normal;
                font-weight: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                vertical-align: middle;
                width: 36px;
                height: 36px;
                background-color: #FAFAFA;
                line-height: 36px;
                text-align: center;
                border-radius: 100%;
                display: inline-block;
                color: #888;
                margin-right: 10px;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }

            #product-details-page .product-info .add-to-wish-list button:hover {
                color: #c2410c;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }

                #product-details-page .product-info .add-to-wish-list button:hover:before {
                    background-color: #e8590c;
                    color: #fff;
                }

    #product-details-page .product-info .add-to-stash {
        margin-bottom: 10px;
    }

        #product-details-page .product-info .add-to-stash button {
            color: #777;
            background: none;
            border: none;
            padding: 0px;
        }

            #product-details-page .product-info .add-to-stash button:before {
                font-family: "Material Symbols Outlined";
                content: "inventory_2";
                font-size: 18px;
                font-style: normal;
                font-weight: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                vertical-align: middle;
                width: 36px;
                height: 36px;
                background-color: #FAFAFA;
                line-height: 36px;
                text-align: center;
                border-radius: 100%;
                display: inline-block;
                color: #888;
                margin-right: 10px;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }

            #product-details-page .product-info .add-to-stash button:hover {
                color: #c2410c;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }

                #product-details-page .product-info .add-to-stash button:hover:before {
                    background-color: #e8590c;
                    color: #fff;
                }

    #product-details-page .product-info .product-details .product-details-item {
        border-bottom: 1px solid #eee;
        padding-bottom: 3px;
        padding-top: 5px;
    }

        #product-details-page .product-info .product-details .product-details-item .detail-label {
            float: left;
            width: 120px;
        }








/*#product-details-page h2 {
    color: #333;
    font-size: 30px;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid;
    border-color: #e8590c;
}*/


#product-details-page .product-details-sample-color {
    float: left;
    display: block;
    height: 45px;
    width: 45px;
    margin: 0 10px 10px 0;
    text-decoration: none;
    border: solid 1px #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* Ribbon shown over images on product details for preorder / pdf / etc */

/* The ribbon is absolutely positioned, so it needs a positioned ancestor to sit against. Nothing
   between it and the body is positioned, so without these it anchors to the page and lands in the
   top right corner of the window rather than the corner of the image. One container is the product
   page, the other the quick view modal; both hold the ribbons and the image carousel together. */
#productVariantImagesHtmlContainer,
#productVariantImagesHtmlModalContainer {
    position: relative;
}


#product-details-page .ribbon {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 110px;
    height: 110px;
    overflow: hidden;
    z-index: 1;
}


    #product-details-page .ribbon .text {
        position: relative;
        left: -8px;
        top: 18px;
        width: 158px;
        padding: 8px 8px;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        background-color: #54A694;
        -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
        -moz-transform: rotate(45deg) translate3d(0, 0, 0);
        -ms-transform: rotate(45deg) translate3d(0, 0, 0);
        -o-transform: rotate(45deg) translate3d(0, 0, 0);
    }

        #product-details-page .ribbon .text:before,
        #product-details-page .ribbon .text:after {
            content: '';
            position: absolute;
            bottom: -5px;
            border-top: 5px solid #2e4050;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }

        #product-details-page .ribbon .text:before {
            left: 0;
        }

        #product-details-page .ribbon .text:after {
            right: 0;
        }

#product-details-page .pill {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 100px;
    height: 50px;
    text-align: center;
    overflow: hidden;
    color: #31708f;
    background-color: #d9edf7;
    padding: 10px;
    border: 1px solid #bce8f1;
    border-radius: 4px;
    z-index: 1;
}

/* Product Image and Home Page */

.carousel {
    border: 2px solid #f3f1f1;
}


.carousel-inner {
    /* background-color: #c2c2c2;*/
    padding: 10px;
}

    .carousel-inner .carousel-item {
        white-space: nowrap;
        text-align: center;
        overflow: hidden;
    }

        .carousel-inner .carousel-item .helper {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .carousel-inner .carousel-item img {
            width: auto;
            max-width: 100%;
            height: auto;
            margin: auto;
            vertical-align: middle;
            display: inline;
            z-index: 1;
        }

        /* The homepage banner is a fixed size promo, not a photo to be fitted into its box. It keeps
           its own width and is trimmed evenly on both sides so the middle of the artwork stays in
           view, rather than being scaled down to an unreadable strip on a phone.

           The rule above scales images down to fit, which is what the product, project and modal
           carousels want, so this override is scoped to the homepage carousel alone. Positioning
           the image rather than changing the item's display keeps Bootstrap's own show/hide of
           slides intact for when this goes back to being a multi slide gallery. */
        #myCarousel .carousel-item img {
            display: block;
            max-width: none;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .carousel-inner .carousel-item .promo {
            height: 280px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

#slider-thumbs-container {
    float: left;
    position: relative;
    left: 50%;
}

#slider-thumbs {
    float: left;
    position: relative;
    left: -50%;
}

    #slider-thumbs ul.thumbs {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
    }

        #slider-thumbs ul.thumbs img {
            max-height: 60px;
        }


/***
    Product  and category lists 
***/

.product-card {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 30px;
    transition: border-color 0.2s;
}

    .product-card:hover {
        border-color: #e8590c;
    }

    .product-card .product-card-image {
        position: relative;
        overflow: hidden;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        aspect-ratio: 1 / 1;
    }

        .product-card .product-card-image .product-card-image-label {
            position: absolute;
            top: 5px;
            right: 5px;
        }

.product-card .product-card-image .label-inactive {
    position: absolute;
    top: 5px;
    right: 5px;
}

.product-card .product-card-image.is-inactive img {
    filter: grayscale(1);
}

.product-card .product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card a.product-quickview-link {
    transition: all .5s ease;
    position: absolute;
    bottom: -30px;
    right: 10px;
}

    .product-card a.product-quickview-link .badge {
        padding: 6px 10px;
    }

    .product-card a.product-quickview-link.hover {
        bottom: 10px;
        text-decoration: none;
    }


.product-card .product-card-body {
    padding: 20px;
}

    .product-card .product-card-body .product-card-description {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .product-card .product-card-body .product-card-description a {
            color: #777;
        }

            .product-card .product-card-body .product-card-description a:hover {
                border-color: #e8590c;
                color: #c2410c;
            }

    .product-card .product-card-body .product-card-price {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #3f7e71;
    }

    .product-card .product-card-body .product-card-quantity {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #777;
    }

    .product-card .product-card-body .product-card-edit {
        text-align: right;
    }




h2.collection-title {
    margin-bottom: 20px;
}

/* verified UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*h4.collection-subtitle {
    margin-top: -20px;
    margin-bottom: 30px;
}
*/




/*  Shopping Cart */

.cart-info table {
    width: 100%;
    margin-bottom: 15px;
    border-collapse: collapse;
}

.cart-info td {
    padding: 10px;
    overflow: hidden;
}

.cart-info thead td {
    color: #4D4D4D !important;
    font-weight: bold;
    background-color: #F7F7F7;
    border-bottom: 1px solid #EEEEEE;
}

.cart-info thead .cart-quantity {
    width: 165px;
}

.cart-info thead .cart-name, .cart-info thead .cart-quantity {
    text-align: left;
}

.cart-info thead .cart-price, .cart-info thead .cart-total {
    text-align: right;
    width: 100px;
}

.cart-info tbody td {
    vertical-align: top;
    border-bottom: 1px solid #EEEEEE;
}

.cart-name img {
    float: left;
    margin-right: 20px;
}

.cart-info .cart-name a.cart-name-link {
    color: #4d4d4d;
    text-decoration: none;
}

    .cart-info .cart-name a.cart-name-link:hover {
        color: #005580;
        text-decoration: underline;
    }

.cart-info tbody .cart-quantity .input-mini {
    padding: 4px 2px;
    font-size: 14px;
    border-radius: 6px;
}

.cart-info tbody .cart-price, .cart-info tbody .cart-total {
    text-align: right;
}


.cart-info tbody .remove-product-button, .cart-info tbody .remove-fabric-button, .cart-info tbody .update-fabric-button, .cart-info tbody .update-product-button, .cart-info tbody .move-product-button {
    font-size: 14px;
}

/* verified UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.cart-module > div {
    display: none;
}
*/


.cart-info tbody tr.cart-update-all-row td {
    border-bottom: none;
    font-size: 12px;
}


.cart-button-well {
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
    margin-top: 20px;
}

.cart-info .form-horizontal {
    display: inline;
}

.cart-totals-container {
    margin-bottom: 30px;
}


    .cart-totals-container .cart-totals .detail-item {
        border-bottom: 1px #eee solid;
        padding: 10px 0 3px 0;
    }

    .cart-totals-container .cart-totals .detail-label {
        float: left;
        font-weight: 700;
    }

    .cart-totals-container .cart-totals .detail-value {
        text-align: right;
        width: 100%;
        padding-right: 10px;
    }

    .cart-totals-container .cart-totals .discount {
        color: forestgreen;
    }

    .cart-totals-container .cart-totals .detail-item-total {
        font-weight: bold;
    }





/* Checkout pages */

/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px #ccc solid;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container-inner {
    padding: 20px;
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container .checkout-container-header {
    background-color: #92a4a6;
    padding: 8px 0 8px 20px;
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container .checkout-container-header-empty {
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container .checkout-container-header h2 {
    font-size: 1.7em;
    color: #fff;
    margin: 0;
    padding: 0;
    display: inline;
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container .checkout-container-header .checkout-container-header-actions {
    float: right;
    margin: 5px 20px 0 0;
}
*/


    /* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container .checkout-container-header .checkout-container-header-actions a {
        color: #fff;
    }
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.checkout-container h3 {
    color: #444;
    font-size: 1.4em;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px #eee solid;
}
*/


/* UNUSED (no references found in .cshtml/.razor/.cs/.js as of 2026-08-30) */
/*.form-horizontal .control-group-tight {
    margin-bottom: 0;
}
*/


.checkout-container .divider {
    margin-bottom: 20px;
    border-bottom: 1px #eee solid;
    line-height: 1px;
}

.checkout-container .form-actions {
    padding: 0 0 0 180px;
    margin-bottom: 0;
}


/* Checkout summary */

.checkout-cart-summary .checkout-cart-items .checkout-cart-item {
    display: flex;
    margin: 0 0 20px 0;
}

    .checkout-cart-summary .checkout-cart-items .checkout-cart-item img {
        width: 80px;
        height: 80px;
        object-fit: cover;
    }

    .checkout-cart-summary .checkout-cart-items .checkout-cart-item .checkout-cart-item-description {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin-left: 10px;
    }

        .checkout-cart-summary .checkout-cart-items .checkout-cart-item .checkout-cart-item-description .price-qty {
            display: flex;
            justify-content: space-between
        }

            .checkout-cart-summary .checkout-cart-items .checkout-cart-item .checkout-cart-item-description .qty {
                display: inline-block;
                margin-right: 10px;
        }

        .checkout-cart-summary .checkout-cart-items .checkout-cart-item .checkout-cart-item-description .price {
            text-align: right;
        }

.checkout-cart-summary .checkout-cart-totals {
    border-top: 1px solid #ccc;
    margin-top: 15px;
    padding-top: 15px;
}

.checkout-cart-summary .detail-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.checkout-cart-summary .detail-label {
    overflow: hidden;
    font-weight: 700;
}

.checkout-cart-summary .detail-value {
    text-align: right;
}

.checkout-cart-summary .discount {
    color: forestgreen;
}

.checkout-cart-totals .detail-item-total {
    border-top: 1px solid #ccc;
    font-weight: bold;
    padding-top: 15px;
    margin-top: 15px;
}



/*.home-page h2 {
    color: #333;
    font-size: 30px;
    padding-bottom: 8px;
    padding-left: 5px;
    margin-bottom: 30px;
    border-bottom: 1px solid;
    border-color: #e8590c;
}*/


/* A section heading with its "view all" link alongside it, pushed to the right. The rule that sits
   under these headings moves off the h2 and onto this wrapper, so it still runs the full width
   rather than stopping where the heading text ends. */
.section-heading {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8590c;
}

    /* #product-details-page h2 sets the same rule from an id, which outweighs a class, so that
       selector has to be repeated here or the heading keeps a second rule under its own text. */
    .section-heading h2 {
        padding-bottom: 0;
        padding-left: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

        .section-heading h2 > a:hover {
            text-decoration: none;
        }

    /* Pushed right with a margin rather than space-between, so the link stays right even on a narrow
    screen where it has had to wrap onto its own line. */
    .section-heading > a {
        margin-left: auto;
        white-space: nowrap;
    }




/* Order Details */

/* marked for deletion on 8/25/26
    
    .order-details .section-tile {
    margin: 0 0 20px;
    border: 1px solid #d9d9d9;
    *zoom: 1;
    min-height: 180px;
}

.order-details .section-tile-test {
    margin: 0 0 20px;
    border: 1px solid #d9d9d9;
    *zoom: 1;
    min-height: 175px;
    vertical-align: middle;
}

.order-details .section-tile-medium {
    min-height: 195px;
}

.order-details .section-tile-pending {
    border-color: #d9d9d9;
    background-color: #fff;
}

.order-details .section-tile-success {
    background-color: #edffe6;
    border-color: #d6e9c6;
    color: #3c763d;
}

.order-details .section-tile-info {
    background-color: #def3fd;
    border-color: #bce8f1;
    color: #31708f;
}

.order-details .section-tile-danger {
    background-color: #ffeaea;
    border-color: #ebccd1;
    color: #a94442;
}

.order-details .section-tile-header {
    padding: 0 4px 0 10px;
    min-height: 38px;
    line-height: 42px;
    font-weight: bold;
    border-bottom: 1px solid #d9d9d9;
    background-color: #eee;
}

.order-details .section-tile-success .section-tile-header {
    background-color: #dff0d8;
    border-bottom: 1px solid #d6e9c6;
}

.order-details .section-tile-info .section-tile-header {
    background-color: #d9edf7;
    border-bottom: 1px solid #bce8f1;
}

.order-details .section-tile-danger .section-tile-header {
    background-color: #f2dede;
    border-bottom: 1px solid #ebccd1;
}

.order-details .section-tile-text {
    padding: 10px;
}

.order-details .section-tile-text-large {
    padding: 10px;
    font-size: 20pt;
}

.order-details .section-tile-shipping-column {
    float: left;
    width: 350px;
}

.order-details .section-tile-shipping-column-last {
    float: left;
    width: 160px;
}*/

.order-details .singleButtonForm {
    margin: 0 0 5px 0;
}

.order-details .shipping-cost {
    font-weight: bold;
    padding: 10px 0 15px 0;
}

.order-details .order-item-name-img {
    float: left;
}

    .order-details .order-item-name-img img {
        max-height: 200px;
    }

.order-details .order-item-name-desc {
    float: left;
    padding-left: 10px;
}


.order-details .order-item-location-id {
    text-align: right;
    width: 100px;
}

.order-details .order-item-id {
    text-align: right;
    width: 100px;
}

.order-details .order-item-quantity {
    text-align: right;
    width: 100px;
}

.order-details .order-item-price {
    text-align: right;
    width: 100px;
}

.order-details .order-item-total {
    text-align: right;
    width: 100px;
}

.order-details .cart-totals {
    /*float: right;
    width: 300px;
    border: 1px solid #d9d9d9;
    *zoom: 1;*/
}


/*** 
    Home page sliders
***/

.card-carousel {
    position: relative;
}

.card-carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .card-carousel-track::-webkit-scrollbar {
        display: none;
    }

/* Set by the script once it knows the track overflows, so a row short enough to fit does not
   advertise a drag that would do nothing. */
.card-carousel.is-scrollable .card-carousel-track {
    cursor: grab;
}

.card-carousel.is-dragging .card-carousel-track {
    cursor: grabbing;
    /* Stops the drag painting a text selection across the card titles as it passes over them. */
    user-select: none;
    -webkit-user-select: none;
}

/* Whatever each card is wrapped in becomes a slide. The product card partials bring their own
   Bootstrap column with them, so its width and gutter are overridden here rather than giving those
   partials a second, carousel-only form.

   Widths are a share of the track rather than a fixed size, so the last card in view is always cut
   off part way instead of landing flush against the edge. Growing is allowed, so a row with too few
   cards to scroll still fills the width instead of trailing off. */
.card-carousel-track > * {
    flex: 1 0 42%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
    scroll-snap-align: start;
}

    .card-carousel-track > * > .product-card {
        margin-bottom: 0;
    }

@media (min-width: 576px) {
    .card-carousel-track > * {
        flex-basis: 30%;
    }
}

@media (min-width: 992px) {
    .card-carousel-track > * {
        flex-basis: 21%;
    }
}

.card-carousel-nav {
    position: absolute;
    /* Centred on the card image, whose height the script measures, rather than on the whole card -
       the caption under the image is a different depth on a product card than on a feed card. */
    top: var(--card-carousel-arrow-top, 50%);
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    color: #555;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    transition: color 0.2s, border-color 0.2s;
}

    .card-carousel-nav:hover:not(:disabled) {
        border-color: #e8590c;
        color: #e8590c;
    }

    /* Left in place at the end of the track so a stray press lands on nothing, not on the card
       beneath. No pointer-events: none here - that would let the click through to the card. */
    .card-carousel-nav:disabled {
        opacity: .4;
        cursor: default;
    }

    .card-carousel-nav.prev {
        left: -14px;
    }

    .card-carousel-nav.next {
        right: -14px;
    }

    /* Touch screens swipe; the arrows would just cover a card. */
    @media (hover: none) {
        .card-carousel-nav {
            display: none;
        }
    }

/* Card shaped like a product card: a square image filling the top, one line of title underneath,
   and the item type as a badge over the image instead of a header row. */
/*.store-feed-card {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 25px;
    transition: border-color 0.2s;
}

    .store-feed-card:hover {
        border-color: #e8590c;
    }

    .store-feed-card .store-feed-card-image {
        position: relative;
        overflow: hidden;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        aspect-ratio: 1 / 1;*/
        /* Feed items are not required to have an image; this keeps the card square either way. */
        /*background-color: #f7f7f7;
    }

        .store-feed-card .store-feed-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .store-feed-card .store-feed-card-image .store-feed-card-type {
            position: absolute;
            top: 5px;
            left: 5px;
        }

    .store-feed-card .store-feed-card-body {
        padding: 15px;
        text-align: center;
    }

        .store-feed-card .store-feed-card-body a {
            display: block;
            color: #777;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .store-feed-card .store-feed-card-body a:hover {
                color: #c2410c;
            }

.fade-box {
    max-height: 1000px;
    overflow: hidden;
    position: relative;
    --mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 0) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}*/

.card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    margin-bottom: 20px;
    transition: border-color 0.2s;
}

    .card:hover {
        border-color: #e8590c;
    }

.card-header {
    padding: 8px 10px 8px 10px;
    border-bottom: 1px solid rgba(0,0,0,.125);
    margin-bottom: 10px;
    cursor: default;
}

    .card-header svg {
        vertical-align: middle;
    }

    .card-header .header-time {
        float: right;
        font-size: 14px;
        color: #888;
    }

.card-image-container {
    margin: 0 10px;
}

    .card-image-container .card-img {
        width: 100%;
    }

.card-body {
    padding: 15px;
}

a.no-style {
    display: block !important;
    height: 100% !important;
    color: rgb(72, 72, 72) !important;
    text-decoration: none !important;
}

/*** 
    Category Details
***/

.category-title {
    display: table;
    height: 100px;
    line-height: 100px;
    margin-bottom: 20px;
}

    .category-title h1 {
        display: table-cell;
        vertical-align: middle;
        line-height: normal;
    }


    .category-title .title-image-container {
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 20px;
        float: left;
    }

        .category-title .title-image-container img {
            display: block;
            width: 100px;
            height: 100px;
            object-fit: cover;
        }


/*** 
    User account sidebar navigation 
***/

.account-nav-container {
    background-color: #f5f5f5;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: .375em;
}

    .account-nav-container .nav-link {
        color: #c2410c;
    }

        .account-nav-container .nav-link.active {
            background-color: #D3AE69;
        }

            .account-nav-container .nav-link.active:hover {
                background-color: #e8590c;
                color: #fff;
            }

        .account-nav-container .nav-link:hover {
            background-color: #EEE;
        }


/***
    Solid Finder
***/

#solid-finder-dropzone {
    max-width: 640px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    transition: border-color 0.2s, background-color 0.2s;
}

    #solid-finder-dropzone.is-dragover {
        border-color: #e8590c;
        background-color: #faf6ee;
    }

/* The stage is hidden until an image is loaded, so the dashed box does not start out holding a
   1x1 canvas the visitor cannot see or use. */
#solid-finder-stage {
    display: none;
    position: relative;
    line-height: 0;
}

#solid-finder.has-image #solid-finder-stage {
    display: block;
}

#solid-finder.has-image #solid-finder-empty {
    display: none;
}

#solid-finder-empty {
    text-align: center;
    padding: 40px 10px;
    color: #777;
}

#solid-finder-canvas {
    /* Scaled to the column while keeping its own pixel resolution for sampling. */
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    cursor: crosshair;
    border-radius: 4px;
    /* Without this a press-and-drag on a touch screen scrolls the page instead of moving the
       picker, and the pointermove handler never sees the drag. */
    touch-action: none;
}

/* Sits on the picked point. translate(-50%,-50%) centres it on the pixel rather than hanging
   below and to the right of it, which would make the picker feel offset from what it reads. */
#solid-finder-marker {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.solid-finder-picked {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.solid-finder-swatch {
    display: block;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f5f5f5;
}

.solid-finder-picked-fields {
    flex: 1 1 auto;
    /* min-width:auto on a flex item resolves to min-content, which the placeholder is wide enough
       to push past - the field would then overflow the column instead of shrinking. */
    min-width: 0;
}

/* The results reuse the shared product card, which carries its own column classes. The wrapper
   here is the real grid column, so the card's own one is flattened to fill it rather than
   becoming a column inside a column a quarter of the width. */
.solid-finder-match > div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.solid-finder-match-color {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* Stands in for a product card until its price and stock arrive, so the grid does not jump
   while someone drags the picker around. */
.solid-finder-match-pending {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 30px;
    padding: 12px;
    min-height: 120px;
    color: #999;
    font-size: 0.9rem;
}

.solid-finder-match-chip {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.solid-finder-match-closeness {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/***
    Palette Builder
***/

#palette-builder-dropzone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    transition: border-color 0.2s, background-color 0.2s;
}

    #palette-builder-dropzone.is-dragover {
        border-color: #e8590c;
        background-color: #faf6ee;
    }

#palette-builder-stage {
    display: none;
    position: relative;
    line-height: 0;
}

#palette-builder.has-image #palette-builder-stage {
    display: block;
}

#palette-builder.has-image #palette-builder-empty {
    display: none;
}

#palette-builder-empty {
    text-align: center;
    padding: 40px 10px;
    color: #777;
}

#palette-builder-canvas {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
}

/* The marker layer sits over the image and is the only thing that takes pointer events - the
   canvas itself is not clickable here, unlike the solid finder. Markers are moved, not placed. */
#palette-builder-markers {
    position: absolute;
    inset: 0;
    /* Without this a press-and-drag on a touch screen scrolls the page instead of moving a marker,
       and the pointermove handler never sees the drag. */
    touch-action: none;
}

.palette-marker {
    position: absolute;
    width: 34px;
    height: 34px;
    margin: 0;
    /* Centres the marker on the pixel it reads, rather than hanging below and to the right of it. */
    transform: translate(-50%, -50%);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    cursor: grab;
    color: #222;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    user-select: none;
}

    /* Flipped on a dark fill so the number stays readable whatever it lands on. */
    .palette-marker.is-dark {
        color: #fff;
    }

    .palette-marker.is-dragging {
        cursor: grabbing;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(199, 151, 61, 0.35);
    }

    .palette-marker:focus-visible {
        outline: 3px solid #e8590c;
        outline-offset: 2px;
    }

.palette-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.palette-entry-number {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    font-size: 0.75rem;
    line-height: 22px;
    text-align: center;
}

.palette-entry-chip {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.palette-entry-name {
    font-size: 0.8rem;
    color: #777;
    /* min-width:auto on a flex item resolves to min-content, which a long fabric name pushes past,
       widening the tile instead of ellipsing. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The card the server returns brings its own column classes. The tile here is the real grid
   column, so the card's own one is flattened to fill it rather than becoming a column inside a
   column a quarter of the width. */
.palette-entry-card > div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Shown while the fabric under a marker has changed but its card has not caught up. */
.palette-entry-card.is-stale {
    opacity: 0.45;
    transition: opacity 0.15s;
}

.palette-entry-pending {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 30px;
    padding: 12px;
    min-height: 120px;
    color: #999;
    font-size: 0.9rem;
}


/***
    Resources
***/

/* The whole card is the link, so the target is the tile rather than just the few words of the
   heading - easier to hit, and on a phone it is the obvious thing to tap. */
.resource-card {
    display: block;
    height: 100%;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .resource-card:hover,
    .resource-card:focus-visible {
        border-color: #e8590c;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        color: inherit;
        text-decoration: none;
    }

    .resource-card h3 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .resource-card p {
        margin-bottom: 0;
        color: #666;
    }


/***
    Calculators
***/

.calculator-form {
    padding: 24px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.calculator-results {
    padding: 24px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fbf9f5;
}

    .calculator-results h2 {
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* Focused programmatically when the Calculate button is pressed, so a reader is taken to the
       answer. It is not a control, so it gets no focus ring of its own. */
    .calculator-results:focus {
        outline: none;
    }

/* The figures and the "fill everything in" line swap places, so one of the two is always showing
   and a half-filled form never displays a stale number. */
.calculator-incomplete-message {
    display: none;
    color: #777;
    margin-bottom: 0;
}

.calculator-page.is-incomplete .calculator-incomplete-message {
    display: block;
}

.calculator-page.is-incomplete .calculator-figures,
.calculator-page.is-incomplete .calculator-note {
    display: none;
}

.calculator-figures {
    display: grid;
    /* The label column takes what it needs and the value column takes the rest, so a long value
       wraps under itself rather than squeezing the label. */
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    margin: 0;
}

    .calculator-figures dt {
        font-weight: 400;
        color: #666;
    }

    .calculator-figures dd {
        margin: 0;
        font-weight: 700;
        text-align: right;
    }

/* The number someone actually acts on, so it is the one that stands out. */
.calculator-figure-headline {
    padding-top: 10px;
    border-top: 1px solid #ddd;
    font-size: 1.15rem;
}

    dd.calculator-figure-headline {
        color: #e8590c;
    }

.calculator-note {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 0.85rem;
}

.calculator-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.calculator-preset {
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 0.8rem;
    line-height: 1.6;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

    .calculator-preset:hover,
    .calculator-preset:focus-visible {
        border-color: #e8590c;
        color: #222;
    }

@media (max-width: 991px) {
    /* Stacked, so the answer sits under the form it belongs to rather than off the bottom. */
    .calculator-results {
        margin-top: 24px;
    }
}


/***
    Share button
***/

/* Matches the other product actions exactly - same circle, same icon treatment, same hover - so
   Share reads as one of the set rather than a bolted-on extra. ios_share is the glyph the operating
   systems use for their own share sheet, which is what this opens. */
#product-details-page .product-info .share-product {
    margin-bottom: 10px;
}

    #product-details-page .product-info .share-product button {
        color: #777;
        background: none;
        border: none;
        padding: 0px;
    }

        #product-details-page .product-info .share-product button:before {
            font-family: "Material Symbols Outlined";
            content: "ios_share";
            font-size: 18px;
            font-style: normal;
            font-weight: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            vertical-align: middle;
            width: 36px;
            height: 36px;
            background-color: #FAFAFA;
            line-height: 36px;
            text-align: center;
            border-radius: 100%;
            display: inline-block;
            color: #888;
            margin-right: 10px;
            transition: all 0.2s;
        }

        #product-details-page .product-info .share-product button:hover {
            color: #c2410c;
            transition: all 0.2s;
        }

            #product-details-page .product-info .share-product button:hover:before {
                background-color: #e8590c;
                color: #fff;
            }

/* The project page and the design wall dialog have no action list to join, so these buttons stand
   on their own and need their own shape rather than borrowing the circled-icon treatment. */
.share-standalone button,
.favorite-project button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: #555;
    transition: border-color 0.2s, color 0.2s;
}

    .share-standalone button:before,
    .favorite-project button:before {
        font-family: "Material Symbols Outlined";
        font-size: 18px;
        font-style: normal;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1;
    }

    .share-standalone button:before {
        content: "ios_share";
    }

    .favorite-project button:before {
        content: "\E87D";
    }

    .share-standalone button:hover,
    .share-standalone button:focus-visible,
    .favorite-project button:hover,
    .favorite-project button:focus-visible {
        border-color: #e8590c;
        color: #222;
    }

    /* Already a favorite: the store's gold, so the state is readable from the button itself and not
       only from the label it is wearing. */
    .favorite-project button.favorited {
        border-color: #e8590c;
        color: #c2410c;
    }

/***
    Adding an item to a project or a stash
***/

.add-project-item-panes,
.add-stash-item-panes {
    padding-top: 20px;
}

/* Tall enough to show a few results without the dialog jumping in height as they arrive, and
   capped so a long list scrolls rather than pushing the quantity field off the screen. */
.store-product-results {
    max-height: 260px;
    overflow-y: auto;
}

.store-product-results:not(:empty) {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 12px;
}

.store-product-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f2f2f2;
}

.store-product-result:last-child {
    border-bottom: none;
}

.store-product-result:hover {
    background-color: #FAFAFA;
}

.store-product-result img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    flex: none;
}

.store-product-result-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.store-product-result-sku,
.store-product-result-stock {
    font-size: 12px;
    color: #888;
}

.store-product-result-stock {
    color: #c2410c;
}

.store-product-empty {
    padding: 8px 10px;
    color: #888;
}

/* What was chosen, standing in for the list once it is gone so the dialog still says what is
   about to be added. */
.store-product-chosen {
    padding: 8px 10px;
    background-color: #FAFAFA;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 12px;
}

.store-product-chosen-label {
    color: #888;
    margin-right: 6px;
}

.store-product-clear {
    margin-left: 10px;
    font-size: 13px;
}

/***
    Buying a project's items
***/

#project-purchase-page .project-purchase-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

#project-purchase-page .project-purchase-note {
    font-size: 12px;
    color: #888;
}

/* Called out rather than left for the shopper to compare the two columns themselves - it is the one
   thing on this page that stops them buying what the project used. */
#project-purchase-page .project-purchase-short {
    color: #c2410c;
}

/* The amount sits at the end of a row that is already busy, so the dropdowns are no wider than
   their contents need and stay on one line. */
#project-purchase-page .project-purchase-amount {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

#project-purchase-page .project-purchase-whole,
#project-purchase-page .project-purchase-fraction {
    width: 72px;
}

#project-purchase-page .project-purchase-unit {
    font-size: 13px;
    color: #888;
}

#project-purchase-page .btn-light {
    margin-left: 6px;
}

/* The two share a row under the description and wrap onto a second line on a narrow screen. */
.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}


/***
    Solid Finder tabs, wheel and readout
***/

.solid-finder-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

    .solid-finder-tabs .nav-link .material-symbols-outlined {
        font-size: 20px;
        line-height: 1;
    }

    .solid-finder-tabs .nav-link.active {
        color: #222;
        font-weight: 700;
    }

.solid-finder-panes {
    padding: 20px 0 0 0;
}

#solid-finder-wheel-stage {
    position: relative;
    line-height: 0;
    /* Square, and never wider than the column, so the circle stays a circle. */
    max-width: 420px;
}

#solid-finder-wheel {
    width: 100%;
    height: auto;
    cursor: crosshair;
    /* Without this a press-and-drag on a touch screen scrolls the page instead of moving the
       picker, and the pointermove handler never sees the drag. */
    touch-action: none;
}

#solid-finder-wheel-marker {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    /* Centres the marker on the pixel it read rather than hanging below and right of it. */
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.solid-finder-brightness {
    max-width: 420px;
    margin-top: 16px;
}

/* The chosen color, shown the same way whichever tab produced it. */
/* Beside the control from lg up. Below it on anything narrower, where it needs separating from
   what it now sits under. */
@media (max-width: 991px) {
    .solid-finder-picked {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
}

.solid-finder-readout {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}