/* Minification failed. Returning unminified contents.
(2083,27): run-time error CSS1030: Expected identifier, found '#cartShipOptionsForm'
(2083,47): run-time error CSS1031: Expected selector, found ')'
(2083,47): run-time error CSS1025: Expected comma or open brace, found ')'
(2151,27): run-time error CSS1030: Expected identifier, found '.'
(2151,43): run-time error CSS1031: Expected selector, found ')'
(2151,43): run-time error CSS1025: Expected comma or open brace, found ')'
(2192,27): run-time error CSS1030: Expected identifier, found '.'
(2192,50): run-time error CSS1031: Expected selector, found ')'
(2192,50): run-time error CSS1025: Expected comma or open brace, found ')'
(2239,31): run-time error CSS1030: Expected identifier, found '#cartShipOptionsForm'
(2239,51): run-time error CSS1031: Expected selector, found ')'
(2239,51): run-time error CSS1025: Expected comma or open brace, found ')'
(2246,31): run-time error CSS1030: Expected identifier, found '#cartShipOptionsForm'
(2246,51): run-time error CSS1031: Expected selector, found ')'
(2246,51): run-time error CSS1025: Expected comma or open brace, found ')'
(3315,30): run-time error CSS1046: Expect comma, found '69'
(3315,36): run-time error CSS1046: Expect comma, found '/'
(3597,19): run-time error CSS1046: Expect comma, found '16'
(3597,25): run-time error CSS1046: Expect comma, found '/'
 */
/* SKU */
#product-sku {
    padding-top: 22px;
}
/* Related Categories */
#product-related-categories .alert {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    position: relative;
}
#product-related-categories .alert button {
    position: absolute;
    top: 8px;
    right: 4px;
}
#product-related-categories .alert h4 {
    margin: 10px 0 8px 0;
}
#product-related-categories h5 {
    margin: 4px 0 0 0;
}
/* Discontinued Products */
#discontinued-product-warning {
   margin: 14px 0;
}
    #discontinued-product-warning h3 {
        margin-top: 0;
    }
    #discontinued-product-warning img {
        width: 100px !important;
        height: auto !important;
    }
/* Images */
.product-media-item {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#main-product-media-outer {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
}
    #main-product-media-outer.zoom-enabled .image-tip:after {
        content: 'Hover over the image to zoom in.';
    }
    #main-product-media-outer.zooming .image-tip:after {
        content: 'Click on the image to view full screen.';
    }
#main-product-media-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}
#main-product-media {
    display: inline-block;
    width: 100%;
    position: relative;
    height: 100%;
}
    #main-product-media:hover {
        cursor: pointer;
    }
.image-tip {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -16px;
    margin: 0;
    font-size: 12px;
    text-align: center;
}
#product-media-thumbnails {
    padding: 0;
    margin: 20px 0;
}
    #product-media-thumbnails img {
        margin: 4px 0;
        padding: 0;
    }
    #product-media-thumbnails .video-thumbnail {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        padding: 0;
        vertical-align: middle;
        margin: 4px 0;
        max-width: 23%;
    }
        #product-media-thumbnails .video-thumbnail:before {
            font-family: 'Font Awesome 6 Pro';
            position: absolute;
            background: rgba(34, 34, 34, 0.6);
            color: rgba(255, 255, 255, 0.8);
            content: '\f07b';
            top: 50%;
            margin-top: -23px;
            margin-left: -23px;
            left: 50%;
            font-size: 46px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            line-height: 1;
            padding: 0 0 0 3px;
            z-index: 1;
        }
    #product-media-thumbnails .video-thumbnail img {
        max-width: 100%;
        height: auto;
        margin: 0 !important;
    }
@media (max-width: 991px) {
    #product-media-thumbnails .video-thumbnail {
        max-width: 25%;
    }
}
@media (max-width: 767px) {
    #main-product-media-outer {
        padding: 10px 0;
    }
    #product-media-thumbnails .product-thumbnails-wrapper {
        height: auto !important;
    }
    #product-media-thumbnails .btn {
        display: none !important;
    }
    #product-media-thumbnails .video-thumbnail {
        width: auto;
        max-width: 92px;
        max-height: 64px;
    }
}
#zoom-window {
    position: absolute;
    top: 0;
    left: -8px;
    width: 100%;
    height: auto;
    z-index: 1000;
    display: none;
    background-color: #fff;
}
    #zoom-window span {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        padding: 2px 6px;
        font-size: 12px;
        color: #fff;
        background-color: #000;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-text-shadow: 1px 1px 2px #000;
        text-shadow: 1px 1px 2px #000;
        border-radius: 2px;
    }
/* Video Posters */
.product-video-poster .panel-body,
.product-video-poster-slideshow .panel-body {
    padding: 0;
}
.product-video-poster .panel-footer,
.product-video-poster-slideshow .panel-footer {
    overflow: auto;
}
.product-video-poster .video-title,
.product-video-poster-slideshow .video-title {
    display: inline-block;
    max-width: 75%;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.product-video-poster:before,
.product-video-poster-slideshow:before {
    font-family: "Font Awesome 6 Pro";
    content: '\f144';
    position: absolute;
    left: 50%;
    margin-left: -48px;
    top: 50%;
    margin-top: -75px;
    background: rgba(246, 246, 246, 0.8);
    color: rgba(34, 34, 34, 0.7);
    font-size: 95px;
    border-radius: 50%;
    width: 95px;
    height: 95px;
    line-height: 1;
}
        .product-video-poster:hover:before,
        .product-video-poster-slideshow:hover:before {
            background: rgba(255, 255, 255, 0.9)
        }
/* Intro Videos */
.video-item {
    position: absolute;
    z-index: 1;
    left: 15px;
    display: none;
    width: 100%;
}
@media (max-width: 767px)
{
    .video-item {
        top: 10%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 100% !important;
    }
}
.video-close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #555;
    background-color: rgba(85, 85, 85, 0.7);
    color: #fff;
    text-shadow: 1px 1px 1px #555;
    font-size: 1.6em;
    border-radius: 2px;
    padding: 0 15px;
    cursor: pointer;
    z-index: 1;
}
/* Images Modal */
#product-image-modal {
    display: block;
    position: absolute;
    top: 5%;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 95%;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto;
}
#product-images-modal .modal-dialog {
    height: 100%;
    width: 100%;
    margin: 0;
}
#product-images-modal .modal-content {
    height: 100%;
    border-radius: 0;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.7);
}
#product-images-modal .modal-header,
#product-images-modal .modal-footer {
    position: absolute;
    margin: 0;
    width: 100%;
    border-color: transparent;
    color: #fff;
    -webkit-text-shadow: 1px 1px 1px #000;
    text-shadow: 1px 1px 1px #000;
}
#product-images-modal .modal-header {
    top: 0;
}
    #product-images-modal .modal-header .close {
        color: #fff;
        opacity: 1.0;
    }
#product-images-modal .modal-footer {
    bottom: 0;
}
    #product-images-modal .modal-footer p {
        line-height: 34px;
        margin: 0;
    }
#product-images-modal .modal-body {
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 50px 0 74px 0;
    padding: 0;
}
#product-image-caption-description {
    max-height: 5%;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 20px;
    position: absolute;
    padding-top: 6px;
}
    #product-images-modal .modal-body > div[class*='col-'] {
        height: 100%;
    }
    #product-images-modal .btn-prev {
        width: 33.33%;
    }
    #product-images-modal .btn-next {
        width: 66.66%;
    }
#product-images-modal-thumbnails {
    text-align: center;
    padding-left: 0;
    padding: 6px 0;
}
    #product-images-modal-thumbnails > div {
        height: 100%;
        background-color: rgb(120, 120, 120);
        background-color: rgba(120, 120, 120, 0.5);
        overflow: auto;
    }
#product-images-modal-viewport {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 0 12px #000;
}
#product-images-modal-thumbnails img {
    margin: 13px 0;
}
/* Social Media Buttons */
#social-media {
    padding: 4px 0;
}
    #social-media button {
        padding: 3px 8px;
    }
#social-media button i {
    font-size: 1.2em;
}
/* Layout */
@media (min-width: 768px) {
    #product-top-info {
        padding-left: 0;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #product-container #product-media-container:not(.col-sm-12),
    #product-container #product-top-info:not(.col-sm-12) {
        width: 50% !important;
    }
}
/* Stock Information/LeadTime/Countdown */
.stock-information .stock-status {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 0 6px 0;
}
.stock-information .stock-low-warning {
    margin-bottom: 6px;
    font-size: 1.1em;
}
    /*.stock-information .stock-low-warning i {
        color: #e56b25;
    }*/
.stock-information .stock-lead-time {
    font-size: 0.9em;
}
.stock-information .stock-lead-time.long-lead {
    font-size: 1.1em;
}
.stock-information .shipping-countdown {
    line-height: 1.2;
}
.stock-information .media {
    margin-top: 0;
}
.stock-information .media-left {
    vertical-align: middle;
}
.stock-information .shipping-countdown .countdown-time, .countdown-ship-day {
    font-weight: bold;
}
/* Small pricing/add to cart */
.add-to-cart-sm {
    overflow: auto;
    margin-bottom: 5px;
}
.add-to-cart-sm select {
    display: inline;
    width: auto;
}
.product-price-sm {
    font-size: 1.4em;
    padding: 10px 0 5px 0;
    vertical-align: middle;
}
/*wishlist*/
#wishlist-add-dropdown {
    top: initial;
}
#wishlist-add.btn {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 15px;
    line-height: 1.42857143;
    border-radius: 4px;
}
#wishlist-add .fa, #wishlist-add-dropdown small .fa {
    color: #dba700;
}
@media (max-width: 767px)  {
    #wishlist-add > span > span {
        display: inline!important;
    }
}
/* Pricing Table */
.pricing-table {
    margin: 6px 0 0 0;
    width: 100%;
}
    .pricing-table tr th,
    .pricing-table tr td {
        text-align: center;
        vertical-align: middle !important;
    }
/* In Stock Notifications */
.btn-notify {
    text-shadow: none;
    margin-top: 6px;
}
@media (min-width:992px) and (max-width:1240px) {
    #add-to-cart .btn-notify {
        font-size: 13px;
    }
}
#stock-notification-modal .modal-dialog {
    top: 20%;
}
/* Coupon Code */
#product-coupon-code {
    margin: 10px 0 5px 0;
    border: 2px dashed #aaa;
    padding: 7px 5px;
    position: relative;
}
    #product-coupon-code:before {
        content: '\f0c4';
        font-family: 'Font Awesome 6 Pro';
        font-weight: 900;
        position: absolute;
        top: -14px;
        left: -2px;
        font-size: 17px;
        background: #fff;
    }
#copyCouponCode {
    background: none;
    color: #3B7A70;
    padding: 0;
    font-size: 13px;
    font-weight: normal;
    line-height: 0;
    margin: 0;
}
    #copyCouponCode.btn:focus, #copyCouponCode.btn:active:focus, #copyCouponCode.btn.active:focus, #copyCouponCode.btn.focus, #copyCouponCode.btn:active.focus, #copyCouponCode.btn.active.focus {
        outline: thin dotted;
    }
    #copyCouponCode.btn:active {
        -webkit-box-shadow:none;
        box-shadow:none;
    }
#coupon-copy-success, #coupon-copy-success-condensed {
    color: #3c763d;
}
#coupon-copy-fail, #coupon-copy-fail-condensed {
    color: #a94442;
}
    /* Quote Request Form */

#quoteToggle {
    border-bottom: 1px solid #ddd;
}
    #request-quote {
    cursor: pointer;
}
#request-quote a.btn {
    margin: 5px 0 0;
    padding: 2px 0;
}
#quote-form hr {
    margin-top:3px;
    margin-bottom:6px;
}
#quote-form .form-group {
    margin-bottom: 10px;
}
#quote-form .quote-request-heading {
    color: #4D4D4D;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 3px;
    font-size: 13px;
    margin-left: -10px;
    letter-spacing: .3px;
}
#quote-form .quote-contact .form-group {
    position: relative;
}
#quote-form .quote-contact input {
    padding-left: 25px;
}
#quote-form .quote-contact i {
    font-size: 16px;
    color: #ccc;
    position: absolute;
    top: 32px;
    left: 7px;
}
#request-quote-modal .modal-dialog {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#request-quote-modal .modal-header {
    border-bottom: none;
    
}
#request-quote-modal .modal-body {
    padding-top: 0;
}
#request-quote-modal .modal-body img {
    margin-right: auto;
    margin-left: auto;
    max-width: 50px;
    display: block;
 }
#request-quote-modal .modal-title {
    font-size: 18px;
    line-height: 0.8em;
}
    #request-quote-modal .modal-title + p {
        font-size: 14px;
        margin-top: 5px;
    }
#request-quote-modal label {
    font-weight: normal;
    color: #4D4D4D;
    font-size: 13px;
}
#request-quote-modal #request-quote-submit {
    margin-top: 10px;
}
#quote-call {
    background: #f7f7f7;
    padding: 15px 0;
}
    #quote-call h4 {
        font-size: 19px;
        margin-top: 0;
        margin-bottom: 5px;
    }
    #quote-call h4 + div {
        font-size: 17px;
    }
#request-quote-modal ul {
    max-width: 408px;
}
#request-quote-modal li {
    margin-bottom:5px;
}
@media (min-width: 768px) {
    #quote-form .row > div {
        padding: 0 5px;
    }
    #request-quote-modal .modal-dialog {
        width: 768px;
    }
    #request-quote-modal .modal-content {
        padding: 5px 30px;
    }
    #request-quote-modal .modal-header .close {
        margin-right: -23px;
    }
    #request-quote-modal .modal-footer {
        margin: 0 20px;
    }
    #quote-form #Quantity {
        width: 320px;
    }
}
/* Installation Consultation */
#installation-info {
    padding: 8px;
    cursor: pointer;
    background: #fff;
    border-color: rgba(87, 24, 155, .2);
    color: #57189b;
}
    #installation-info-dropdown {
        padding: 10px;
        margin-top: 10px;
    }
        #installation-info-dropdown .contact-group {
            padding-left: 33px;
        }
        #installation-info-dropdown .fa-li {
            color: #8965ab;
        }
/* Artwork Uploads */
#customer-artwork {
    border: 2px dashed #46b8da;
    margin-bottom: 10px;
    padding: 10px 8px;
    border-radius: 4px;
    background-color: #eef7fa;
    overflow: hidden;
}
    #customer-artwork.loading, #pu-customer-artwork.loading, #customer-artwork-condensed.loading {
        opacity: 0.5;
        position: relative;
    }
        #customer-artwork.loading:after, #pu-customer-artwork.loading:after, #customer-artwork-condensed.loading:after {
            font-family: 'Font Awesome 6 Pro';
            content: '\f021';
            position: absolute;
            top: 10px;
            left: 50%;
            margin-left: -26px;
            font-size: 3em;
            animation: fa-spin 2s infinite linear;
        }
        #pu-customer-artwork.loading:after {
            top: 0;
            font-size: 2em;
        }
#pu-customer-artwork {
    margin-top: 10px;
    display: inline-block;
}
    @media only screen and (max-width: 991px) {
        #customer-artwork,
        #customer-artwork-condensed {
            border: 1px dashed #46b8da;
            padding: 5px;
            border-radius: 4px;
            background-color: #eef7fa;
            font-size: smaller;
            margin-bottom: 10px;
        }
    }
#customer-artwork p, #customer-artwork-condensed p {
	font-weight: bold;
    font-size: 13px;
    margin: 0 0 4px 0;
    color: #034766;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#customer-artwork .btn, #customer-artwork-condensed .btn {
	margin-bottom: 10px;
}
#content-upload input[type="file"] {
	margin-bottom: 15px;
}
 
#artwork-upload-modal textarea {
    background: #f9f9f9;
}
#artwork-preview .input-validation-error {
    background: #f2e0e0;
    color: #a94442;
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 4px;
}
#file-preview img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
    padding: 2px;
    margin-bottom: 10px;
}
#artwork-upload-modal textarea {
    margin-bottom: 10px;
}
 
#artwork-upload-modal .modal-footer {
	padding-top: 10px;
}
[id^="artwork-upload-tabs"] {
    margin: -20px -20px 0 -20px;
    padding: 10px;
    list-style: none;
}
[id^="artwork-upload-tabs"] li a {
    opacity: 0.7;
    display: block;
    color: #fff;
}
[id^="artwork-upload-tabs"] li a:hover {
    background: transparent;
    opacity: 1;
    text-decoration: none;
}
[id^="artwork-upload-tabs"] li.active a {
    opacity: 1;
}
[id^="artwork-upload-tabs"] i {
    display: block;
    font-size: 2.5em;
}
[id^="artwork-upload-submit"].disabled,
[id^="artwork-select-save"].disabled {
    background: #eee;
    color: #999;
    border-color: #aaa;
}
#content-upload.loading {
    opacity: 0.5;
}
#aw-content-loading {
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -60px;
    z-index: 999;
    font-size: 40px;
    display: none;
}
#aw-content-loading.loading {
    display: block;
}
/* Artwork Previous Uploads */
#previous-uploads-carousel .eachImg {
    display:inline-block;
    width: 30%;
    vertical-align: top;
}
#previous-uploads-carousel .eachImg img {
    margin: 0 auto 6px auto;
    max-width: 100px;
}
#previous-uploads-carousel .selected img {
    border: solid 2px #3fb5d8;
}
#previous-uploads-carousel .carousel-control {
    width: 40px;
    top: 50%;
    font-size: 35px;
    margin-top: -18px;
    background-image: none;
    color: #aaa;
    opacity: 1;
    text-shadow: none;
}
#previous-uploads-carousel .carousel-control.right {
    right: -40px;
}
#previous-uploads-carousel .carousel-control.left {
    left: -40px;
}
/* Artwork Guideline Info Link */
#artworkguideline-info {
    padding-left: 10px;
    display: inline-block;
    border: 2px dashed #b3d695;
}
    @media only screen and (max-width : 991px) {
        #artworkguideline-info {
            padding: 5px;
            display: inline-block;
            border: 1px dashed #b3d695;
            font-size: smaller;
        }
    }
/* Warranties/Services */
.warranty-services-wrapper {
    margin: 20px 0;
}
.warranty-services-wrapper img {
    margin-left: auto;
    margin-right: 0;
}
.mb-intro {
    padding-right: 0;
    margin-bottom: 6px;
    font-size: 14px;
}
.mb-intro i, .mb-intro strong {
    cursor: pointer;
}
#warranty-faq-modal {
    font-size: 13.5px;
}
.warranty-services {
    margin-bottom: 0;
    margin-top: 10px;
}
    .warranty-services label {
        margin-bottom: 0;
        font-weight: normal;
        position: relative;
    }
        .warranty-services label > span:first-of-type {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .warranty-services label span.warranty-selected {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 3px;
            border: 1px solid #00A3B3;
        }
            .warranty-services label span.warranty-selected:after {
                content: '\f058';
                font-family: 'Font Awesome 6 Pro';
                position: absolute;
                top: -7px;
                right: -4px;
                font-size: 18px;
                color: #00A3B3;
            }
.warranty-services input[type="checkbox"],
.warranty-services label span.warranty-selected {
    display: none;
}
    .warranty-services input[type="checkbox"]:checked ~ span.warranty-selected {
        display: block;
    }


@media (min-width: 1240px) {
    .warranty-row > div:nth-of-type(odd) {
        padding-right: 2px;
    }
    .warranty-row > div:nth-of-type(even) {
        padding-left: 2px;
    }
}
/* Review/QA Links */
#review-qa-links > span {
    cursor: pointer;
}
    #review-qa-links i, #review-qa-links small {
        font-size: 16px;
    }
/* Tabs */
.tab-pane {
    padding: 20px;
    min-height: 200px;
}
/* Product related items */
#related-items {
    padding: 10px;
    font-size: 0.9em;
}
    #related-items a {
        display: block;
        margin-top: 0 !important;
        padding: 0 6px;
    }
        #related-items a:nth-of-type(2n+1) {
            clear: left;
        }
    #related-items img {
        max-width: 100% !important;
    }
    #related-items .item-price {
        color: #111b23;
        margin-bottom: 0;
        font-size: 14px;
    }
    #related-items .item-price .original-price {
        font-size: 0.9em;
    }
    #related-items h4,h5 {
        margin-top: 0;
    }
    #related-items h4 {
        text-align: center;
    }
    #related-items h5 {
        font-size: 12px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-bottom: 2px;
    }
    #related-items .item:last-child {
        margin-bottom: 0;
    }
/* Customizable logo/size */
.customizable-option {
    font-size: 0.9em;
    padding: 10px;
    margin-bottom: 15px;
    max-width: 500px;
}
    .customizable-option h4 {
        font-size: 1.1em;
        margin-bottom: 3px;
    }
    .customizable-option p {
        margin-bottom: 0;
    }
/* Brands */
.product-brand {
    margin-bottom: 20px;
}
    .product-brand p {
        margin-bottom: 0;
        font-size: 12px;
    }
#product-options {
    margin-bottom: 14px;
}
.product-option h5 {
    margin: 14px 0 7px 0;
}
.product-option button,
.product-option a,
.product-option div.dropdown {
    margin-top: 2px;
    margin-bottom: 2px;
    display: inline-block !important;
}
.product-option .dropdown h5 {
    margin: 3px 0;
}
.product-option img {
    max-width: 50px;
    border-radius: 2px;
}
.product-option .option-thumb {
    padding: 0;
    vertical-align: top;
    border-width: 2px;
    margin: 2px 1px;
}
.product-option .option-thumb.dropdown-toggle {
    margin-top: 0;
}
    .product-option .option-thumb.dropdown-toggle img {
        border-radius: 3px 3px 0 0;
    }
.product-option .option-thumb.active {
    border-width: 3px !important;
    border-color: #e67a00 !important;
    margin: 1px 0;
}
    .product-option .option-thumb.active img {
        border-radius: 1px;
    }
.po-inactive-value {
    display: inline-block;
}
#product-options button.inactive, #product-options .btn-default.inactive {
    border: 1px dashed #ccc;
    color: #888d91;
    background: linear-gradient(-22deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.5px), #b8bbbd 50%, rgba(0,0,0,0) calc(50% + 0.5px), rgba(0,0,0,0) 100%), linear-gradient(22deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.5px), #b8bbbd 50%, rgba(0,0,0,0) calc(50% + 0.5px), rgba(0,0,0,0) 100%);
}
.inactive.option-thumb {
    position: relative;
}
    .inactive.option-thumb img {
        opacity: 0.4;
    }
    .inactive.option-thumb:after {
        content: 'X';
        position: absolute;
        top: 7px;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        font-size: 35px;
        opacity: 0.5;
    }
/* Product Customizations */
#customizations-toggle {
    color: #777;
    background: #f7f7f7;
    margin-bottom: 30px;
    padding: 6px 11px 6px 10px;
    box-shadow: none;
}
    #customizations-toggle span {
        color: #42abd8;
    }
#customization-options-modal h4 {
    font-size: 16px;
}
 /*Dynamic Dimension Options*/
#dymanic-dimension-options {
    display: flex;
    flex-wrap: wrap;
}
#dymanic-dimension-options .col-xs-5 {
    flex-grow:1;
}
    #dymanic-dimension-options .fa-xmark {
        align-items: center;
        justify-content: center;
        display: flex;
        height: 75%;
        width: 100%;
    }
    #dymanic-dimension-options > .col-xs-12 > h5{
        margin-left: -14px;
    }
#dymanic-dimension-options .input-group-addon {
    padding: 0px 5px;
}
#dymanic-dimension-options .form-group {
    padding:0;
}
/* Descriptions */
#second-long-description {
    font-size: 12px;
    margin-bottom: 10px;
}
#prop65-warning {
    padding: 10px 10px 0 10px;
    border: 1px solid #eee;
    margin: 10px 0;
    font-size: 13px;
}
    #prop65-warning img {
        vertical-align: baseline;
    }
/*Downloads and Manuals*/
#product-resources .resource-howto-video:before,
#videos-instructions-tab .resource-howto-video:before {
    content: 'Video';
}
#product-resources .media-howto-video .media-left,
#videos-instructions-tab .media-howto-video .media-left {
    position: relative;
    cursor: pointer;
}
    #product-resources .media-howto-video .media-left > img,
    #videos-instructions-tab .media-howto-video .media-left > img {
        width: 92px;
        height: auto;
        opacity: 0.3;
        border-radius: 4px 4px 0 0;
    }
    #product-resources .media-howto-video .media-left > i,
    #videos-instructions-tab .media-howto-video .media-left > i {
        position: absolute;
        top: 15%;
        left: 36%;
        font-size: 2.3em;
    }
#product-resources .media-howto-video .media-body,
#videos-instructions-tab .media-howto-video .media-body {
    cursor: pointer;
}
/* Reviews */
#product-reviews {
    box-shadow: none;
}
#product-reviews hr {
    border-top: 1px solid #ddd;
}
#product-reviews h3 {
    font-size: 22px;
}
#product-reviews .product-review {
    padding: 6px;
}

/* User Submitted Media */
#user-submitted-media img {
    max-height: 86px;
    width: auto;
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}
#user-submitted-media .user-video {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}
    #user-submitted-media .user-video img {
        opacity: 0.5;
    }
    #user-submitted-media .user-video:after {
            content: '\f144';
            font-family: 'FontAwesome';
            font-weight: 600;
            text-align: center;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            left: 50%;
            margin-left: -20px;
            background: rgba(246,246,246,.8);
            color: rgba(34,34,34,.7);
            font-size: 40px;
            width: 41px;
            height: 40px;
            border-radius: 50%;
            line-height: 1;
        }
        #user-submitted-media .user-video:hover:after {
            background: rgba(246, 246, 246, 1);
        }

/* QA */
#product-top-qa h4 {
    padding: 6px 2px;
}
.qa-answer .media-vote {
    width: 46px;
}
.qa-answer .media-body {
    padding-left: 6px;
}
/*Request a Quote Toggle*/

#quoteToggle .dropdown-menu {
    right: 0;
    left: inherit;
    min-width: 200px;
    font-size: 13px;
}

@media(min-width:768px) {
    #quoteToggle .dropdown-menu {
        min-width: 400px;
    }
}

#quoteToggle ol {
    padding-inline-start: 20px;
}

#request-quote-modal .quote-form-shipping .checkout-heading {
    display: none;
}

#empty-shopping-cart {
  padding-bottom: 10px;
  margin: 20px 0;
}

  /* The heading above this is a span, so it carries no bottom margin of its own -- the
     button opens the gap instead. Auto keeps it centred inside the 350px cap. */
  #empty-shopping-cart .cart-account-benefits .btn-primary {
    max-width: 350px;
    margin: 12px auto 0;
  }

#search-bar-cart > .search-box {
    margin: 0 auto;
}

@media (min-width: 576px) {
  #search-bar-cart > .search-box,
  #empty-shopping-cart .cart-account-benefits {
    width: 600px;
  }

}
@media (max-width: 575.98px) {
  #empty-shopping-cart .cart-account-benefits-register a {
    display: block;
  }
}
#shoppingcart-container #recently-viewed {
  margin: 40px 0;
}

.savings {
    font-weight: bold;
}

.invalid-coupon-reason {
    border-top: none !important;
    padding-top: 0 !important;
}

#shopping-cart-header {
    margin-top: 15px;
    margin-bottom: 10px;
}

    #shopping-cart-header span {
        position: relative;
    }

    #shopping-cart-header a, #shopping-cart-header button.chat-button {
        cursor: pointer;
        padding: 0;
        border: none;
        background: transparent;
    }

        #shopping-cart-header a:hover, #shopping-cart-header button.chat-button:hover {
            text-decoration: underline;
        }

    #shopping-cart-header .fa-comment-dots {
        font-size: 23px;
        color: #3B7A70;
    }

    #shopping-cart-header .fa-circle-question {
        position: absolute;
        left: -9px;
        top: 2px;
        background: #fff;
        border: 1px solid #fff;
        border-radius: 50%;
        font-size: 16px;
        width: 20px;
        height: 20px;
        text-align: center;
        color: #3B7A70;
    }

#shoppingcart-container h1 {
    margin-top: 0;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    #shoppingcart-container .container {
        width: 100%;
        max-width: none;
    }
}

/* Sticky checkout bar — mobile only (≤991px); desktop uses sticky right column instead */
#cart-sticky-checkout {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 1001;
    background: #fff;
    
    padding: 10px 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
 }

  #cart-sticky-checkout.stuck {
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 15px 6px 15px 8px;
  }

  #cart-sticky-checkout.sticky-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
  }

#cart-sticky-checkout .cart-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: margin 0.25s ease;
}

#cart-sticky-checkout .cart-sticky-heading {
    white-space: nowrap;
    line-height: 1;
    margin: 0;
    display: none;
}

#cart-sticky-checkout.sticky-visible .cart-sticky-heading,
#cart-sticky-checkout.stuck .cart-sticky-heading {
    display: block;
}

#cart-sticky-checkout .cart-sticky-total {
    flex: 1;
}
  #cart-sticky-checkout.stuck .btn.btn-lg {
    width: 27vw;
    margin-top: 0;
    margin-bottom: 10px;
    transition: margin 0.25s ease;
  }

  

@media (max-width: 991px) {

  #shopping-cart-header {
      margin-bottom:0;
  }

    
  /* Disable the header search bar sticking on the cart page */
  #mobile-search.mobile-search-top-stick {
    position: static;
    box-shadow: none;
  }

  /* Fixed bottom checkout bar — hidden until JS observes checkout section is off-screen */
  #cart-sticky-checkout {
    position: fixed;
    top: auto;
    bottom: 0;
    z-index: 900;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    padding: 10px 10px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #ddd;
    box-shadow: 0 -3px 12px rgba(0,0,0,0.1);
  }

  #cart-sticky-checkout.cta-bar-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }

  /* Pad cart so content isn't hidden behind the fixed bar when active */
  body.has-mobile-cta-bar #shoppingcart-container {
    padding-bottom: 130px;
  }

  #cart-sticky-checkout .cart-sticky-inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  #cart-sticky-checkout .cart-sticky-total {
    line-height: 1;
  }

  #cart-sticky-checkout .cart-sticky-heading,
  #cart-sticky-checkout.sticky-visible .cart-sticky-heading,
  #cart-sticky-checkout.stuck .cart-sticky-heading {
    display: none;
  }

  #cart-sticky-checkout .btn {
    flex: 0 0 100%;
  }

  /* .cart-layout-row is a Bootstrap .row, so it keeps margin: 0 -15px. At >=992px the
     grid block absorbs that with padding: 0 14px; here there is none, and the column
     gutter is zeroed below — without this reset the item rows overhang the container
     by 15px each side and their right border is clipped at the viewport edge. */
  .cart-layout-row {
    margin-left: 0;
    margin-right: 0;
  }

  #shopping-cart-items {
    padding-left: 0;
    padding-right: 0;
  }

  /* One step down from the 16px body size. Set on the list so it carries to everything in the
     row that has no size of its own - title, sku, variant, the each price - and leaves the
     ones that do (the line total, the qty input) where they are. */
  #shopping-cart-items ul {
    font-size: 15px;
  }
}



#shopping-cart-items {
  margin-bottom: 0;
}

    #shopping-cart-items ul {
        list-style-type: none;
        padding:0;
        margin-bottom:0;
    }

  #shopping-cart-items li.item-row {
    border: solid 1px rgba(18, 69, 68, .2);
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 0 14px;
  }
 
    #shopping-cart-items li.item-row:last-of-type {
      margin-bottom:0;
    }

.summary-footer-wrapper {
  border-top: 2px solid #dee2e6;
  padding-top: 8px;
}
  .summary-footer-wrapper .savings-total {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 3px 10px;
  }

  .cart-help-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 0;
    padding-top: 12px;
    padding-bottom:12px;
    border-top: 1px solid #dee2e6;
  }

.cart-help-row .btn-link {
  font-size: inherit;
  color: #0A6170;
  padding: 0 4px;
  text-decoration: none;
}

.cart-help-row .btn-link:hover {
  text-decoration: underline;
}

.cart-ksp-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid #dee2e6;
}

.cart-ksp-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: default;
  text-decoration: none;
}

button.cart-ksp-item {
  cursor: pointer;
}

/* Support hours sit directly under the chat/phone row and share its centring.
   Renders on one line where it fits; text-wrap: balance keeps the two lines even
   rather than leaving a short orphan when it has to break (ignored where unsupported). */
.cart-help-hours {
  margin: -6px 0 12px;
  padding: 0 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  text-wrap: balance;
}

button.cart-ksp-item:hover {
  text-decoration: underline;
}

.cart-account-benefits {
  background: #fff;
  border-radius: 6px;
  text-align: center;
  border-top: 3px solid rgba(18, 69, 68, .15);
  padding: 12px 0;
}

/* This closes out the box, so it only needs a gap above it -- the container's own bottom
   padding handles the rest. */
.cart-account-benefits-tagline {
  font-size: 14px;
  color: #555;
  margin: 12px 0 0;
  font-weight: 500;
}

/* The class sits on the paragraph so the "Don't have an account?" lead-in stays body
   colour and only the link inside it picks up the teal underline. */
.cart-account-benefits-register {
  margin: 10px 0 0;
  font-size: 16px;
}

.cart-account-benefits-register a {
  color: #0A6170;
  text-decoration: underline;
}

/* This box is a direct child of the empty cart page, so I centre it under the search
   bar. It shares the search box's width rule up top so both edges line up. */
#empty-shopping-cart .cart-account-benefits {
  margin: 24px auto 0;
}

#order-summary-checkout .order-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  font-weight: 600;
}

/* Only rendered before a ZIP, when neither a shipping row nor a tax row exists yet and this
   number is items only. Its own line inside the label, so the row stays two columns and the
   amount keeps aligning to "Sub Total" on the baseline rather than to this. Weight and size are
   reset off the row's heading treatment - it is a footnote to the number, not part of it. */
#order-summary-checkout .order-subtotal-note {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.3;
}
  #order-summary-checkout  .savings-total {
    margin: 0 0 14px 0;
    padding: 7px 14px;
  }

/* The sticky checkout bar occupies the same corner as the back-to-top control, so
   suppress it only while that bar is actually on screen. Gated on the breakpoint too:
   #cart-sticky-checkout is display:none at >=992px, so desktop keeps its button even
   if a stale has-mobile-cta-bar class survives a resize. */
@media (max-width: 991px) {
  body.has-mobile-cta-bar #to-top,
  body.has-mobile-cta-bar #to-top-mobile {
    display: none !important;
  }
}

.cart-layout-row {
  border-bottom: 1px solid #dee2e6;
  margin-bottom:50px;
}

@media (min-width: 992px) {
    /* Hide top sticky bar — right column sticks instead */
    #cart-sticky-checkout {
        display: none;
    }

    /* CSS grid: items top-left, order summary right (spans rows), lead+SFL bottom-left.
       DOM order (items → summary → cart-left-lower) handles small-screen stacking. */
  .cart-layout-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 14px;
    padding: 0 14px;
  }
    .cart-layout-row > [class*="col-"] {
        float: none;
    }

    #shopping-cart-items {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* Right column spans both grid rows so sticky inner has room to scroll */
    #order-summary-col {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        align-self: stretch;
    }

    .cart-left-lower {
        grid-column: 1;
        grid-row: 2;
        float: none;
    }

    /* Sticky right column */
    #order-summary {
        position: sticky;
        top: 100px;
    }

    /* Price, qty box and action links are evenly spaced - this gap and the .cart-qty-wrapper
       one below have to stay the same value, and .cart-item-actions must not add its own
       margin on top of them. */
    #shopping-cart-items .cart-right-col {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #shopping-cart-items .cart-item-price {
        text-align: right;
        min-width: 0;
    }

    #shopping-cart-items .product-info {
        display: grid;
        grid-template-columns: 1fr 160px;
        column-gap: 20px;
        row-gap: 0;
    }

    #shopping-cart-items .product-info-wrapper {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    #shopping-cart-items .cart-item-bottom {
        grid-column: 1 / span 2;
        grid-row: 3;
    }

    #shopping-cart-items .cart-qty-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #shopping-cart-items .product-quantity {
        width: 100%;
        margin-right: 0;
        max-width: none;
    }

    #shopping-cart-items .cart-item-actions {
        align-self: stretch;
    }

    /* Logged out there is no Save button, so line the lone Remove up with the right
       edge of the qty input instead of stranding it on the left. */
    #shopping-cart-items .cart-item-actions > .btn:only-child {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        padding-right: 0;
    }

}

#shopping-cart-items .cart-item-body {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 24px 15px 24px;
}

#shopping-cart-items .product-image {
    flex: 0 0 150px;
    padding: 0;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #shopping-cart-items .product-image {
    flex: 0 0 110px;
  }
  #shipping-options-table.shipping-methods-list {
    font-size: 13px;
  }
}

@media (min-width: 1200px) {
  .cart-layout-row {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

@media (min-width: 1400px) {
  .cart-layout-row {
    grid-template-columns: minmax(0, 1fr) 520px;
  }
}

#shopping-cart-items .product-info {
    flex: 1;
    min-width: 0;
}

#shopping-cart-items .product-info-wrapper {
    flex: 1;
    min-width: 0;
}


@media (max-width: 575.98px) {
  #shopping-cart-items .cart-item-bottom {
    width: calc(100% + 90px + 12px);
    margin-left: calc(-90px - 12px);
  }

  #shopping-cart-items .cart-item-body {
    padding: 15px;
  }
}

@media (max-width: 991px) {
    #shopping-cart-items .cart-item-body {
        gap: 12px;
     }
    #shopping-cart-items .product-image {
        flex: 0 0 75px;
    }
    #shopping-cart-items .product-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    #shopping-cart-items .cart-item-price {
        order: -1;
        padding: 0;
    }
    #shopping-cart-items .cart-right-col {
        display: contents;
    }
}
 
    #shopping-cart-items .item-row:not(:first-of-type) {
        border-top: 1px solid #d0dada;
    }

.cart-qty-wrapper {
  display: flex;
  align-items: center;
}

@media (max-width: 991px) {
  .cart-qty-wrapper {
    flex-direction: column-reverse;
    align-items: flex-start;
    max-width: 210px;
  }

  .cart-item-actions {
    margin-left: -10px;
    margin-top: -5px;
    margin-bottom: 10px;
    font-size: 15px;
  }
}

 

@media (max-width: 991px) {
  #shopping-cart-items .product-quantity {
    margin-right: 0;
    width: 100%;
    margin-bottom: 10px;
  }
}
 
/* Sits directly under the stepper now, so it reads as a note about that input rather than
   a stray line under the action buttons. */
#shopping-cart-items .min-qty {
    display: block;
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 15px;
    white-space: nowrap;
}

/* Disabled by gpaweb.shoppingcart.js once the quantity is at the floor. Bootstrap fades a
   disabled .btn-default but keeps the pointer, so set that too. */
#shopping-cart-items .product-quantity .qty-minus[disabled] {
    cursor: not-allowed;
}

#shopping-cart-items .product-quantity .input-group-btn {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}


    #shopping-cart-items .product-image img {
        margin: 0 auto;
    }

        #shopping-cart-items .product-image img.designer-product {
            max-height: 150px;
        }

#shopping-cart-items .product-info .product-title {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
}

#shopping-cart-items .product-title {
    color: #010101;
}

#shopping-cart-items .product-sku {
    margin-bottom: 10px;
}

#shopping-cart-items .product-delay {
    margin-top: 10px;
    margin-bottom:10px;
}

 

#order-summary .product-total,
#shopping-cart-items .product-total {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
}

/*#shopping-cart-items .product-each {
    font-size: 12px;
}*/

/*#shopping-cart-items .product-remove a {
    padding: 3px 0;
}
*/
#shopping-cart-items .line-item-services {
    margin-top: 10px;
    margin-bottom: 20px;
}

    #shopping-cart-items .line-item-services > p {
        margin-bottom: 5px;
        color: #437C98;
    }

    #shopping-cart-items .line-item-services > .row {
        margin: 0 -14px 5px 0;
        font-size: 13px;
    }

    #shopping-cart-items .line-item-services .product-total {
        padding: 0 2px 0 4px;
        font-size: 15px;
    }

#update-row {
    padding: 15px 0;
    border-bottom: 1px solid #d0dada;
    border-top: 1px solid #d0dada;
}

    #update-row > div {
        padding-left: 0;
        padding-right: 30px;
    }


.service-addon {
  margin-top: 12px;
  padding: 14px 16px;
/*  border: 1px solid #e8e2da;
  border-radius: 6px;*/
/*  background: #f8f7f4;*/
  border-left: 3px solid rgba(18, 69, 68, .15);
}

.service-addon-added {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(18, 69, 68, .15);
  border-bottom: 1px solid rgba(18, 69, 68, .15);

}

.service-addon-added-body {
  flex: 1;
  min-width: 0;
}

.service-addon-added-price {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}
  .service-addon-added-price:before {
    content: "+ ";
  }
.service-addon-added-remove {
  display: inline-block;
  margin-top: 4px;
  text-decoration: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.service-addon-added-remove:hover {
  color: #333;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .service-addon-added {
    gap: 8px;
  }
}

.service-addon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.service-addon-info .service-header {
   margin-bottom: 3px;
   white-space: nowrap;
}

  .service-addon .product-each{
      font-size:80%;
      font-weight:500;
  }

  .service-addon-info {
    flex: 0 0 100%;
    font-weight: 600;
  }
  .service-addon-info small {
      font-weight:normal;
  }
  .service-addon-info-link {
    font-weight: normal;
    margin-left: 4px;
    color: #3B7A70;
    vertical-align: middle;
    text-decoration: none !important;
  }

.service-addon-info-link:hover {
    color: #2a5c54;
}
.design-services-well {
  background: #fff;
  border: 1px solid #E5CA81;
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 14px;
  margin-bottom: 16px;
  border-left: 3px solid #E5CA81;
}
.design-services-well > strong {
  display: block;
  margin-bottom: 4px;
}
.service-header-trigger {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}
.service-header-trigger:hover,
.service-header-trigger:focus {
    color: inherit;
    text-decoration: underline;
}

.service-addon-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  flex: 0 0 100%;
  margin-top:15px;
  margin-bottom:15px;
}

@media (max-width: 991px) {
  .service-addon-options {
    align-items: flex-start;
  }
  .service-addon-action .btn:not(.btn-link) {
    width: 100%;
  }
}

.service-addon-options .radio{
    margin:0;
    cursor:pointer;
}

  .service-addon-options .radio input {
    margin-top: 5px;
  }

.service-addon-options input[type="radio"] {
    accent-color: #3B7A70;
}

.service-addon-options .product-each {
    font-size: 80%;
    font-weight: 500;
}
 

.service-addon-action .btn:not(.btn-link) {
    display:block;
    margin-bottom:3px;
}

@media (max-width: 767px) {
    .item-row > .clearfix > .col-xs-7 {
        padding-right: 0;
    }

    .item-row > .clearfix > .col-xs-5 {
        padding-left: 0;
    }

    .qty-input {
        padding: 0 0 0 3px;
    }

    #update-row > div {
        padding: 0 15px;
    }

}

@media (max-width: 575.98px) {
  .service-addon-options {
    flex-direction: column;
  }
}


#shipping-inline .input-group input {
    border-radius: 6px 0 0 6px;
}
.coupon-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 8px 3px 8px;
  border-top: 1px solid #d0dada;
}

.coupon-toggle-cell {
    padding: 6px 8px;
    border-top: 1px solid #d0dada;
}

/* ZIP input inline with Shipping label (no ship method selected) */
#order-summary-tbl tr:has(#cartShipOptionsForm) td {
    vertical-align: middle;
}
#order-summary-tbl #cartShipOptionsForm .form-control {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* Inline shipping panel */
.shipping-inline-row > td {
    padding: 0 !important;
    border-top: 0 !important;
}

.shipping-inline-panel {
    padding: 2px 0 10px;
}

.shipping-inline-panel .ship-options {
    margin: 0 0 8px;
}

/* Must be allowed to wrap: a long ShipDescription ("Commercial Dock to Dock")
   sets the label cell's min-content width, forcing the summary table wider than
   its column and clipping the price cells on narrow screens. */
/* Vertical padding is hit area, not decoration — these are small inline targets.
   Kept horizontal at 0 so the label still lines up with the other summary rows. */
.shipping-toggle {
  padding: 3px 0;
  white-space: normal;
  text-align: left;
  vertical-align: baseline;
}

.shipping-chevron {
    display: inline-block;
    transition: transform 0.2s;
}

/* The markup sits this flush against the ZIP so the line can't break in front of it and leave it
   alone on the last line - the gap it would have got from that space comes from here instead.
   Scoped to the toggle: the coupon row uses the same chevron and already has a space of its own. */
.shipping-toggle .shipping-chevron {
    margin-left: 5px;
}

/* Row headings are labels, not prose: "Items Total" split over two lines reads as two rows, and
   "Ship to" split in half stops reading as a prompt. The cells hold more than their label though
   - the ship-method toggle, the pickup address and the est-delivery line all sit in the same <th>
   - and those have to keep wrapping. A long one sets the column's min-content otherwise ("Commercial
   Dock to Dock", a full street address), and the summary table then outgrows its 350px column and
   clips the price cells. So the cell holds its line and hands it back to anything narrative
   inside it. */
#order-summary-tbl th {
    white-space: nowrap;
}

#order-summary-tbl th small,
#order-summary-tbl th a,
#order-summary-tbl th button {
    white-space: normal;
}

/* The shipping row is the one cell holding a label and a control side by side, and the nowrap
   above governs the cell's own whitespace - so the space between "Shipping" and the toggle is
   not a break opportunity and a long ship description ("Lift Gate Delivery 02703") runs the
   toggle into the price. This gives that line somewhere to break; "Shipping" is a single word,
   so it still can't split. */
#order-summary-tbl th:has(.shipping-toggle) {
    white-space: normal;
}

/* Informational location link — hover-only underline, matching .sfl-title / .wl-title.
   The always-underlined treatment is reserved for action links like .sfl-action-link.
   The summary cell is a <th>, so the weight is reset here the same way .pickup-artwork-note
   below does it - the address is supporting detail, not a heading. */
.pickup-address-link {
    display: inline-block;
    padding: 6px 0;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.3;
    text-decoration: none;
}

.pickup-address-link:hover,
.pickup-address-link:focus {
    text-decoration: underline;
}

/* Sits under the address link. Block so it gets its own line without a <br>, and the
   link's own 6px bottom padding is the gap. */
.pickup-artwork-note {
    display: block;
    font-weight: normal;
    line-height: 1.3;
}

/* Reserve room for the "Updating…" label so submitting the ZIP form does not widen
   the cell and re-wrap the heading mid-request. */
#order-summary-tbl #cartShipOptionsForm .input-group-btn .btn {
    min-width: 95px;
}

/* Invalid-ZIP message sits under the input, inside the same cell - the input stays put.
   Left-aligned so it doesn't inherit the cell's right-alignment, and the label has to
   top-align or "Shipping" ends up vertically centred against three lines of error text and
   reads as though it's wrapped into them. !important is to beat the inline
   vertical-align: middle on that <th>. */
#order-summary-tbl tr:has(.field-validation-error) > th {
    vertical-align: top !important;
}

#order-summary-tbl .field-validation-error {
    display: block;
    margin-top: 5px;
    text-align: left;
}

/* The group takes whatever the cell has, which is what puts the label and the form on one row
   and moves the checkout button up by the row they used to take. Say it explicitly: an input
   group is a table, so left alone it shrink-wraps to the input's default size and lands short of
   the edge on desktop and mid-row on mobile. Nothing here fixes the input's own width - the
   button column is nowrap at 95px for "Updating…" and the input column is the one that absorbs
   slack, so pinning the input hands the leftover to the button column, which then slides to the
   far edge on the cell's text-right and breaks the group in two.

   The min-width is a floor, not a width, and it is what keeps the input usable. Column widths are
   shared by every row and the table hands out leftover space in proportion to how much each column
   wants, so without a floor the form's column gets whatever the headings leave it. The ceiling on
   the number is close: the summary column is a fixed 350px, so after col gutters and two cells of
   padding there are ~320px, of which the button holds 95px for "Updating…" and the first column
   needs ~105px once "Estimated Tax" shows up in the row below - that one can't wrap either way,
   the &nbsp; in the markup sees to it. Much past 85px here and the table outgrows its column and
   starts clipping the price cells. In the state that matters, before a ZIP, there is no tax row
   and the floor is not the binding constraint anyway - the input lands nearer 105px.

   td > scopes both to the form in the label row - the copy inside the inline shipping panel spans
   the full row and is already full width. */
#order-summary-tbl td > #cartShipOptionsForm .input-group {
    width: 100%;
}

#order-summary-tbl td > #cartShipOptionsForm .form-control {
    min-width: 85px;
}

/* Off the sidebar layout the summary runs full width, so the label keeps its own line and the
   input group takes the whole row beneath it - a much bigger target than it gets sharing a row
   with the label. Nothing sizes it here; the width: 100% above is what fills the row. */
/* The label and the ZIP form stack instead of sharing a row - there is not room for both at this
   width. Only the label row, though: the inline panel renders a ZIP form of its own, so it answers
   :has too, and its cell is a colspan="2". A cell told to display: block loses its span and gets
   wrapped in an anonymous cell in the first column, which sizes the whole options list to the label
   column instead of the table. */
@media (max-width: 991px) {
    #order-summary-tbl tr:has(#cartShipOptionsForm):not(.shipping-inline-row) > th,
    #order-summary-tbl tr:has(#cartShipOptionsForm):not(.shipping-inline-row) > td {
        display: block;
        width: auto;
        text-align: left;
    }

    #order-summary-tbl tr:has(#cartShipOptionsForm):not(.shipping-inline-row) > td {
        padding-top: 4px;
        border-top: 0;
    }

    /* The panel's own ZIP form, now that the panel has the full width to sit in. An input group is
       a table, so left alone it shrink-wraps to the input's default size and the Update button
       lands mid-row, short of the prices in the list below it. */
    .shipping-inline-panel #cartShipOptionsForm .input-group {
        width: 100%;
    }
}

.shipping-toggle[aria-expanded="true"] .shipping-chevron {
    transform: rotate(180deg);
}

#shopping-cart-options {
    /*border: 1px solid #d0dada;*/
}

    #shopping-cart-options form {
        margin: 8px 0 12px 0;
    }

#order-summary-tbl {
    margin-bottom: 0;
}

    #order-summary-tbl td,
    #order-summary-tbl th {
        border-top: 1px solid #d0dada;
        padding:5px;
    }

    #order-summary-tbl tr > td:nth-of-type(2),
    #order-summary-tbl tr > th ~ td {
        text-align: right;
    }

    #order-summary-tbl .help-block {
        margin-top: 0;
        margin-bottom: 0;
    }

    #order-summary-tbl .coupon-code a {
        vertical-align: inherit;
        color: #a94442;
    }

@media (max-width: 991px) {

  #order-summary-col {
    padding: 0;
    background: #fcfcfd;
    border-radius: 6px;
  }
  #order-summary {
    margin-top: 40px;
    padding: 14px;
  }
}

#shopping-cart-notes {
    padding-left: 0;
    list-style-type: none;
}

    #shopping-cart-notes li {
        font-size: 0.9em;
        margin: 8px 0;
    }

        #shopping-cart-notes li:first-of-type {
            margin-top: 45px;
        }

.checkout-options {
    margin-bottom: 14px;
}
.checkout-options .btn-warning,
#cart-sticky-checkout .btn-warning {
  background-color: #E5CA81;
  border-color: #D8BC6A;
  color: #101010;
  font-weight: 500;
}
.checkout-options .btn-warning:hover,
.checkout-options .btn-warning:focus,
#cart-sticky-checkout .btn-warning:hover,
#cart-sticky-checkout .btn-warning:focus {
  background-color: #CEAD52;
  border-color: #B89935;
  color: #101010;
}


.line-artwork-text {
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.1;
    padding-top: 3px;
    color: #777;
}

#shipping-options-table {
  position: relative;
}

    #shipping-options-table a {
        text-decoration: none !important;
    }

    #shipping-options-table.refresh {
        opacity: 0.5;
    }

        #shipping-options-table.refresh:after {
            content: '\e62a';
            font-family: "Font Awesome 6 Pro";
            -webkit-animation: fa-spin 1s infinite steps(8);
            animation: fa-spin 1s infinite steps(8);
            position: absolute;
            font-size: 55px;
            top: 50%;
            margin-top: -30px;
            left: 50%;
            margin-left: -30px;
            color: #3B7A70;
        }

    #shipping-options-table td {
        vertical-align: middle;
        padding: 0;
    }


    #shipping-options-table a {
        color: #101010;
        display: block;
    }

/* New inline list layout overrides the display:block above */
#shipping-options-table.shipping-methods-list {
    margin-top: 4px;
}

  #shipping-options-table.shipping-methods-list div.shipping-method-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 3px 5px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-radius: 6px;
    margin-bottom: 0;
    font-size: 15px;
  }

    #shipping-options-table.shipping-methods-list div.shipping-method-option:hover {
      background: #f9fbfb;
      border: 1px solid #b1c9c5;
    }

    #shipping-options-table.shipping-methods-list div.shipping-method-option.selected {
      background: #f9fbfb;
      border: 1px solid #3b7a70;
    }

.shipping-method-radio {
    flex: 0 0 20px;
    padding-top: 2px;
    font-size: 18px;
    color: #767676;
    text-align: center;
    text-decoration: none !important;
}

.shipping-method-option.selected .shipping-method-radio {
    color: #3B7A70;
}

.shipping-method-info {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.shipping-method-name-link {
    display: block;
    font-weight: 500;
    text-decoration: none !important;
}

/* The whole option is the click target, not just the name. The name link stretches an
   invisible layer over the row so the address and lead-time lines select the method too.
   More Info and the price sit above it so they still work on their own. */
.shipping-method-name-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.shipping-method-info .description,
.shipping-method-price-col {
    position: relative;
    z-index: 2;
}

/* A positioned element with a z-index is a stacking context, so the 1060 on
   .delivery-info-dropdown below only orders it against its own siblings - against the page
   the whole .description is pinned at 2, under #cart-sticky-checkout (900 on mobile, 1001
   for the top bar) and level with every other row's trigger and price. The open one comes up
   as a unit instead. Hover, .open and focus because the menu opens all three ways. */
.shipping-method-info .description:hover,
.shipping-method-info .description.open,
.shipping-method-info .description:focus-within {
    z-index: 1060;
}

/* The facility address, on its own line under the method name with a bit more room than the
   1.3 the option row uses. Everything else about pickup lives in the More Info panel. */
.pickup-lines {
    margin-bottom: 5px;
}

.pickup-lines small {
    display: block;
    line-height: 1.5;
}

.pickup-lines small i {
    margin-right: 1px;
}

.shipping-method-info .dropdown:hover .dropdown-menu {
    display: block;
}

.shipping-method-option.selected .shipping-method-name-link {
    color: #3B7A70;
}

.shipping-method-price-col {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.shipping-method-price {
    font-weight: 600;
    text-decoration: none !important;
    display: block;
}

.shipping-method-option.selected .shipping-method-price {
    color: #3B7A70;
}

.label-best-value {
  background-color: #3b7a70;
  color: #fff;
  font-weight: 450;
}

/* Nested inside .shipping-method-name-link, which runs at 500. This is a detail line under
   the method name, so it opts back out to normal weight. */
.est-delivery {
    margin: 0;
    font-weight: normal;
}

    #shipping-options-table .fa-square {
        color: #777;
    }

    #shipping-options-table .fa-square-check {
        color: #4597bf;
    }

    #shipping-options-table tr.success td {
        background-color: #f6fafc;
    }

.delivery-info {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
}
.delivery-info:focus-visible {
    outline: 2px solid #3B7A70;
    outline-offset: 2px;
}

/* Cart error box. Html.ValidationSummary() always renders a <ul>, which puts a bullet next
   to a single message inside an alert. Scoped to the cart on purpose - the same helper is
   used by 39 other views and they aren't ours to restyle. */
#shoppingcart-container .bs-validation-summary ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* Sits just below the error box. It can't go inside it - BootstrapValidationSummary closes
   its own div - so pull it up tight against the alert so it reads as part of the message
   rather than a stray line. */
#shoppingcart-container .qty-quote-note {
    margin-top: -12px;
    margin-bottom: 20px;
    font-size: 16px;
}

#shoppingcart-container .bs-validation-summary {
    text-align: left;
}

/* .alert-heading is a Bootstrap 4 class and this project is on 3, so it needs styling here */
#shoppingcart-container .bs-validation-summary .alert-heading {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

#shoppingcart-container .bs-validation-summary p {
    margin: 0 0 6px;
}

#shoppingcart-container .bs-validation-summary hr {
    margin: 9px 0;
    border-top-color: rgba(0, 0, 0, .12);
}

#shoppingcart-container .bs-validation-summary p:last-child {
    margin-bottom: 0;
}

.delivery-info-dropdown {
    padding: 10px;
    font-size: 13px;
    color: #111b23;
}

/* Bullets run together otherwise, especially the ones that wrap to three lines */
.delivery-info-dropdown li {
    line-height: 1.5;
}

.delivery-info-dropdown li + li {
    margin-top: 7px;
}

/* Local pickup's panel opens with the free-pickup line and the facility hours, then the
   bullets. Neither of the first two is an <li>, so the li rules above don't reach them and
   the list carries the gap - the hours line is conditional on the CMS having them. */
.pickup-info-head {
    font-weight: 600;
    line-height: 1.5;
}

.pickup-info-hours {
    line-height: 1.5;
}

.pickup-info-hours i {
    margin-right: 2px;
}

.pickup-info-list {
    margin-top: 9px;
}

/* BS3 dropdowns ignore the viewport completely. Pin this one to the option row so it can't
   hang off the right edge (same trick as .lead-time-popover), and cap the height so a long
   one scrolls instead of running past the bottom. gpaweb.shoppingcart.js adds .info-dropup when
   there's no room below. */
.shipping-method-option .delivery-info-dropdown {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-height: 50vh;
    overflow-y: auto;
    white-space: normal;
    z-index: 1060;
}

/* Flipped above the button. Own class rather than Bootstrap's .dropup because bootstrap.css
   isn't a plain file in Content/css and I can't count on that rule being loaded here. */
.shipping-method-option .info-dropup .delivery-info-dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}

/* Lead time estimate summary well — icon spacing */
.lead-time-estimate-well i {
  margin-right: 3px;
}

/* Artwork/backorder pending: date and qualifier on one line, detail below full-width */
.lead-time-estimate-well.artwork-pending .lead-time-estimate-date,
.lead-time-estimate-well.backorder-pending .lead-time-estimate-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .lead-time-estimate-well.artwork-pending .lead-time-estimate-date {
/*    flex-direction: column;
    align-items: flex-start;
    gap: 2px;*/
display:inline;
  }
}

.lead-time-estimate-well.artwork-pending .lead-time-popover-wrap,
.lead-time-estimate-well.backorder-pending .lead-time-popover-wrap {
  flex: 1;
}

.lead-time-same-day {
  border-left-color: #3d8b37;
  background: #edf5ec;
}

/* While the countdown is running the line already says everything a help popover would,
   so the toggle is hidden rather than competing with it. onCountdownExpire() drops
   .lead-time-same-day when the cutoff passes, which brings the toggle back for the
   ship-date wording that replaces the countdown - the same wording the non-same-day well
   gives a toggle to. I hide the menu as well as the icon so a click on the countdown text
   can't open a popover that has no visible trigger, and drop the pointer cursor and hover
   underline to match. */
.lead-time-same-day .lead-time-date-trigger .fa-circle-question {
  display: none;
}
.lead-time-same-day .lead-time-popover-wrap.open .lead-time-popover {
  display: none;
}
.lead-time-same-day .lead-time-popover-wrap {
  cursor: default;
}
.lead-time-same-day .lead-time-date-trigger:hover strong,
.lead-time-same-day .lead-time-date-trigger:focus strong {
  text-decoration: none;
}

.lead-time-estimate-well {
  position: relative;
  background: #f0f5f4;
  border: 1px solid #c3d9d5;
  border-left: 3px solid #3d8b37;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

/* Every well's date line opens a dropdown, including the same-day countdown, so the
   whole line has to read as clickable. */
.lead-time-popover-wrap {
  cursor: pointer;
}
.lead-time-estimate-date {
    margin: 0 0 4px;

}
.lead-time-estimate-date strong {
  font-weight: 500;
}
.lead-time-estimate-detail {
  background: #fff;
  border: 1px solid #dee2e6;
  border-left: 3px solid #3d8b37;
  border-top: none;
  border-radius: 0;
  padding: 3px 16px;
  margin: 0;
}
 
 

/* Equal-height cards */
.lead-time-bullets {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.lead-time-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}

.lead-time-bullets li:last-child {
    margin-bottom: 0;
}

.lead-time-bullets li span:not(.lead-time-bullet-icon) {
    flex: 1;
}

.lead-time-bullet-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #E5CA81;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Lead time inline popover dropdown */
.lead-time-popover-wrap {
  position: static;
}
.lead-time-date-trigger {
  color: inherit;
  text-align: left;
  white-space: normal;
  font-size: inherit;
  line-height: inherit;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
@media (min-width: 992px) {
  .lead-time-date-trigger {
    font-size: 18px;
  }
}
.lead-time-date-trigger .lead-time-partial-note {
  flex: 0 0 auto;
}
@media (max-width: 575px) {
  .lead-time-date-trigger .lead-time-partial-note {
    flex: 1 1 100%;
  }
}

.lead-time-date-trigger:hover,
.lead-time-date-trigger:focus {
  color: inherit;
  text-decoration: none;
}
.lead-time-date-trigger:hover strong,
.lead-time-date-trigger:focus strong {
  text-decoration: underline;
}
.lead-time-date-trigger .fa-circle-question {
  color: #4a7c6f;
  font-size: 1.1em;
  margin-left: 3px;
}
.lead-time-date-trigger:hover .fa-circle-question,
.lead-time-date-trigger:focus .fa-circle-question {
  color: #2d5a50;
}
.lead-time-popover {
  padding: 0;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  margin-top: 4px;
  z-index: 1060;
}
.lead-time-popover-close {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #101010;
  opacity: 0.6;
  font-size: 18px;
  text-shadow: none;
  padding: 4px 6px;
  z-index: 1;
  line-height: 1;
}
.lead-time-popover-close:hover,
.lead-time-popover-close:focus {
  color: #101010;
  opacity: 1;
}
.lead-time-popover-body {
  padding: 14px 36px 14px 16px;
}

/* Shopping Cart Add To Cart Result Page */
#artwork-text {
    white-space: pre-line;
    font-size: 13px;
    color: #777;
}

    #artwork-text strong {
        color: #555;
    }

#shoppingcart-add-container h2 {
    margin-bottom: 30px;
}

#add-to-cart-items .product-link img.designer-product {
    max-height: 300px;
}

#add-to-cart-items .item-price {
    display: inline-block;
}

#add-to-cart-items .original-price {
    font-size: 15px;
}

#add-to-cart-recommendations {
    margin-top: 14px;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 4px;
}

    #add-to-cart-recommendations h3 {
        margin: 0 0 20px 0;
    }

    #add-to-cart-recommendations h5 {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-bottom: 2px;
    }

    #add-to-cart-recommendations img {
        max-width: 100%;
    }

@media (min-width: 768px) {
    #add-to-cart-items .form-horizontal .col-sm-4 .form-group {
        padding-left: 8px;
    }
}
/* Wish Lists & Saved for Later List */
#cart-wishlists,
#saved-for-later {
  padding: 15px 24px 15px 24px;
}
 
  #empty-shopping-cart + #saved-for-later {
    margin: auto;
    padding-top: 0;
    margin-top:24px;
  }

@media (min-width: 576px) {

  #empty-shopping-cart + #saved-for-later {
  border-top: 3px solid #e8eaed;
  border-bottom: 3px solid #e8eaed;
}
}
#customer-wishlists .wishlist-name {
  cursor: pointer;
  border: none;
  padding: 10px 16px;
  background: #edf3f2;
  box-shadow: none !important;
  border-radius: 6px;
  color: #101010;
}

    #customer-wishlists .wishlist-name span {
        font-weight:500;
    }

        #customer-wishlists .wishlist-name span:after {
            content: '\f077';
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            float: right;
            color: #4D4D4D;
        }

    #customer-wishlists .wishlist-name.collapsed span:after {
        content: '\f078';
    }

#customer-wishlists .wishlist-details,
#customer-wishlists .btn-remove {
    display: none;
    visibility: hidden;
}

#customer-wishlists .add-to-cart-btn,
#customer-wishlists .btn-disabled {
    margin-top: 25px;
}

#customer-wishlists .btn-disabled {
  border: none;
}

#customer-wishlists .media-list,
#customer-wishlists .list-empty {
  padding: 0 8px;
}


#saved-for-later .sfl-count {
    font-size: 16px;
    font-weight: 400;
}

#saved-for-later .sfl-list {
  margin: 0;
  padding: 0;
  max-width: 992px;
}

#saved-for-later .sfl-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
        "image details price"
        "image details actions";
    align-items: start;
    column-gap: 14px;
    row-gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid #e8eaed;
}

#saved-for-later .sfl-item-image   { grid-area: image; }
#saved-for-later .sfl-item-details { grid-area: details; }
#saved-for-later .sfl-item-price   { grid-area: price; }
#saved-for-later .sfl-actions      { grid-area: actions; }

#saved-for-later .sfl-item:last-child {
    border-bottom: none;
}

#saved-for-later .sfl-item-image {
    flex: 0 0 72px;
    text-align: center;
}

#saved-for-later .sfl-item-image img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

#saved-for-later .sfl-item-details {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#saved-for-later .sfl-actions {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    white-space: nowrap;
}

/* Unavailable items render no "Move to Cart", so pull the lone Remove across to line
   up with the Remove on rows that have both actions. Desktop only — the <=767px grid
   gives actions a full-width, left-aligned row. */
@media (min-width: 768px) {
    #saved-for-later .sfl-actions > .sfl-action-link:only-child {
        margin-left: auto;
    }
}

#saved-for-later .sfl-title {
    font-weight: normal;
    color: #010101;
    text-decoration: none;
    margin-bottom: 2px;
}

#saved-for-later .sfl-title:hover {
    text-decoration: underline;
}

#saved-for-later .sfl-sku,
#saved-for-later .sfl-qty,
#saved-for-later .saved-artwork-filename,
#saved-for-later .saved-artwork-text {
    display: block;
}

#saved-for-later .sfl-action-link {
    font-size: 15px;
    color: #0A6170;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

#saved-for-later .sfl-action-link:hover {
    color: #084f5a;
}

#saved-for-later .sfl-item-price {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-size: 16px;
}

  #saved-for-later .sfl-item-price .original-price {
    display: block;
    color: #767676;
    font-size: 16px;
  }

#saved-for-later .sfl-current-price {
    font-size: 16px;
}

@media (max-width: 767px) {
    #saved-for-later .sfl-item {
        display: grid;
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "image details"
            "image price"
            "image actions";
        column-gap: 14px;
        row-gap: 4px;
    }
    #saved-for-later .sfl-item-image  { grid-area: image; }
    #saved-for-later .sfl-item-details { grid-area: details; }
    #saved-for-later .sfl-item-price  { grid-area: price; text-align: left; flex: none; }
    #saved-for-later .sfl-actions     { grid-area: actions; margin-top: 0; }
}

/* WishList cart items */
.wl-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
}

.wl-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

#customer-wishlists .wishlist-details-cart {
  padding: 14px 28px;
}

.wl-item-image {
  flex: 0 0 76px;
  text-align: center;
}

.wl-item-details {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wl-title {
    font-weight: normal;
    color: #010101;
    text-decoration: none;
    margin-bottom: 2px;
}

.wl-title:hover {
    text-decoration: underline;
}

.wl-sku {
    display: block;
}

.wl-item-price {
    font-size: 16px;
    margin-top: 4px;
}

.wl-item-price .original-price {
    display: block;
    color: #767676;
    font-size: 16px;
}

.wl-actions {
    flex: 0 0 130px;
    width: 130px;
    overflow: hidden;
}

.wl-actions .btn {
    white-space: normal;
}

.wl-actions .add-to-cart-btn {
    margin-top: 0;
}

@media (max-width: 767px) {
    #cart-wishlists {
        padding: 10px 0;
    }
    .wl-list {
        grid-template-columns: 1fr;
    }
    .wl-item {
        display: grid;
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "image details"
            "image actions";
        column-gap: 14px;
        row-gap: 4px;
    }
    .wl-item-image  { grid-area: image; }
    .wl-item-details { grid-area: details; }
    /* .wl-item becomes grid here and hands actions a full-width row, so the
       flex sizing and clipping from the >=768px rule must be released. */
    .wl-actions     { grid-area: actions; margin-top: 0; flex: none; width: auto; overflow: visible; }
}

/* UWBAB Shopping Cart Recommendations */
/* #cart-user-purchase-recommendations {
        margin-bottom: 10px;
        background: #fff;
        border-top: 1px solid #d0dada;
        border-bottom: 1px solid #d0dada;
        border-radius: 0;
    }

        #cart-user-purchase-recommendations h3 {
            color: #234d85;
            font-size: 20px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        #cart-user-purchase-recommendations ul > li {
            width: 205px;
            text-align: center;
        }

        #cart-user-purchase-recommendations img {
            height: 180px;
            width: 139.5px;
            margin: 0 auto 3px auto;
            display: block;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #d0dada;
            padding: 4px;
        }

        #cart-user-purchase-recommendations .recommended-item-title {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin: 0 0 4px 0;
            padding-bottom: 4px;
            font-weight: normal;
        }

        #cart-user-purchase-recommendations .item-price {
            color: #111b23;
            font-size: 16px;
            font-weight: bold;
        }*/

/* Loading Overlay */
#shoppingcart-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    text-align: center;
    padding-top: 34vh;
    z-index: 9999;
    display: none;
}

#shoppingcart-loading > i {
    display: block;
    color: #3B7A70;
    margin-bottom: 14px;
}

#shoppingcart-loading > p {
    font-size: 16px;
    font-weight: 500;
    color: #3B7A70;
    letter-spacing: 0.02em;
    margin: 0;
}
/* Artwork Previous Uploads */
.preImgsWrap .eachImg {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

    .preImgsWrap .eachImg img {
        margin: 0 auto 6px auto;
        max-width: 100px;
    }

.preImgsWrap .selected img {
    border: solid 2px #3fb5d8;
}

.preImgsWrap .carousel-control {
    width: 40px;
    top: 50%;
    font-size: 35px;
    margin-top: -18px;
    background-image: none;
    color: #aaa;
    opacity: 1;
    text-shadow: none;
}

    .preImgsWrap.carousel-control.right {
        right: -40px;
    }

    .preImgsWrap .carousel-control.left {
        left: -40px;
    }


.eachImg.selected {
    background-color: rgb(18 69 68 / 10%);
    border-left: 3px solid #124544;
}

.aw-selected-badge {
    display: none !important;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-weight: bold;
    color: #124544;
    white-space: nowrap;
    margin-right: 4px;
}

.eachImg.selected .aw-selected-badge {
    display: inline-flex !important;
}

#artwork-select-save {
    margin:10px;
}

#save-and-continue:disabled {
    background-color: #e0e0e0;
    border-color: #ccc;
    color: #999;
    opacity: 1;
}

/* Artwork Upload Modal */
#artwork-upload-modal #current-file-preview-icon {
    display: none !important;
}

#artwork-upload-modal .modal-body {
    padding-bottom: 8px;
}

#artwork-upload-modal .modal-footer {
    padding-top: 12px;
}

#artwork-upload-modal .aw-divider {
    margin: 12px 0;
}

#aw-content-loading {
    display: none;
}

#aw-content-loading.loading {
    display: block;
}

@media (max-width: 767px) {
    #artwork-upload-modal .modal-body {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }
}

#upload-mode-toggle {
    text-align: center;
    margin-bottom: 16px;
}

#current-file-section {
    margin-bottom: 12px;
}

.edit-artwork {
    display: inline-flex;
    padding: 0;
    text-align: left;
    align-items: center;
    flex-wrap: wrap;
    white-space: normal;
    gap: 4px;
}

    .edit-artwork .fa-paperclip-vertical,
    .edit-artwork strong,
    .edit-artwork .artwork-filename-display {
        color: #333;
    }

    .edit-artwork .fa-pen-to-square {
        margin-left: 6px;
    }
 
    .aw-file-info-row .btn {
        margin-top: 5px;
        display: block;
    }

    .aw-file-info-row #current-filename {
        margin-right:3px;
    }

    #drop-zone {
        border: 2px dashed #2B8282;
        border-radius: 6px;
        padding: 24px 16px;
        text-align: center;
        cursor: pointer;
        transition: background 0.15s;
        position: relative;
    }

    #drop-zone-overlay {
        display: none;
        position: absolute;
        inset: 0;
        border-radius: 4px;
        background: rgba(18, 69, 68, 0.85);
        color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 24px;
        font-weight: 600;
        pointer-events: none;
        z-index: 1;
    }

    #drop-zone-overlay.active {
        display: flex;
    }

.aw-drop-label {
    margin: 8px 0 4px;
    font-weight: 600;
}

.aw-drop-or {
    margin: 0 0 12px;
}

.aw-drop-formats {
    margin: 8px 0 0;
}

.aw-drop-multifile {
    margin: 6px 0 0;
}

.aw-prev-uploads-list {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.aw-prev-uploads-list .eachImg {
    padding: 8px 20px 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.aw-prev-uploads-list .eachImg span:not(.aw-selected-badge) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.aw-prev-thumb {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f7f7f7;
    flex-shrink: 0;
}

.aw-prev-thumb-icon {
    width: 36px;
    font-size: 22px;
    color: #aaa;
    flex-shrink: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Current file preview in modal */
#current-file-preview-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    background: #f7f7f7;
}

.aw-current-preview {
    width: auto;
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.aw-current-preview-icon {
    width: 64px;
    height: 64px;
    font-size: 64px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f7f7f7;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Cart line item artwork row */
.cart-artwork-well {
    background: #fdf8ec;
    border: 1px solid #E5CA81;
    border-left: 3px solid #E5CA81;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 8px;
}
.cart-artwork-well--attached {
    background: #fafafb;
    border-color: #dee3e3;
}
.cart-artwork-well-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 3px;
  font-weight: 600;
}

.cart-artwork-well a {
    color: #0A6170;
}
.cart-artwork-well .btn-link {
    color: #0A6170;
}

.cart-artwork-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cart-artwork-info {
    flex: 1;
    min-width: 0;
}

.cart-artwork-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f7f7f7;
    flex-shrink: 0;
}

.cart-artwork-thumb-icon {
    width: 64px;
    height: 64px;
    font-size: 54px;
    object-fit: contain;
    flex-shrink: 0;
    justify-content: center;
    display: flex;
    color: rgb(16 16 16 / 60%);
}

@media (max-width: 767px) {
    .cart-artwork-thumb {
        width: 40px;
        height: 40px;
    }
    .cart-artwork-thumb-icon {
        width: 40px;
        height: 40px;
        font-size: 40px;
    }
}
 
.artwork-notes-label {
    margin-bottom:10px;
}

 
/* Invalid coupon message */
.invalid-coupon-reason {
    color: #933;
    font-weight: bold;
    font-size: 0.8em;
}


#shipping-options-table .fa-square-check {
    color: #4A8235
}

#shipping-options-table tr.success td {
    background-color: #F0F4F5;
}