/* Shared Quick View layout. Keep this in the theme stylesheet so every
 * product, including products added later, receives the same behavior. */
.modal.modal--quickView .modal-close {
    font-size: 0 !important;
    line-height: 1 !important;
}

.modal.modal--quickView .modal-close .aria-description--hidden {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.modal.modal--quickView .modal-close span[aria-hidden="true"] {
    display: block !important;
    font-size: 28px !important;
    line-height: 1 !important;
}

/* Known broken legacy handle previews. These selectors cover product tiles
 * and Quick View, while the product template normalizes new values at runtime. */
.form-option-swatch:has(.form-option-variant[title="3-Spoke"]) .form-option-image,
.form-option-swatch[for$="_2010"] .form-option-image,
.form-option-swatch[for$="_2011"] .form-option-image,
.form-option-swatch[for$="_2012"] .form-option-image,
.form-option-swatch[for$="_2013"] .form-option-image,
.form-option-swatch[for$="_2014"] .form-option-image,
.form-option-swatch[for$="_2015"] .form-option-image {
    background-image: url("https://cdn11.bigcommerce.com/s-m9igkc9yzt/images/stencil/300x300/attribute_value_images/2226.zoom.png?t=1780157595") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.form-option-swatch:has(.form-option-variant[title="5-Spoke"]) .form-option-image,
.form-option-swatch[for$="_2006"] .form-option-image,
.form-option-swatch[for$="_2007"] .form-option-image,
.form-option-swatch[for$="_2008"] .form-option-image,
.form-option-swatch[for$="_2009"] .form-option-image {
    background-image: url("https://cdn11.bigcommerce.com/s-m9igkc9yzt/images/stencil/300x300/attribute_value_images/2220.zoom.png?t=1780157589") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.form-option-swatch:has(.form-option-variant[title="L-Handle"]) .form-option-image,
.form-option-swatch[title="L-Handle"] .form-option-image,
.form-option-swatch[data-boswell-swatch-label="L-Handle"] .form-option-image {
    background-image: url("https://cdn11.bigcommerce.com/s-m9igkc9yzt/images/stencil/300x300/attribute_value_images/2281.zoom.png?t=1780247914") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

@media screen and (max-width: 1024px) {
    .modal.modal--quickView {
        background: #fff !important;
        bottom: 10px !important;
        box-sizing: border-box !important;
        display: block !important;
        left: 10px !important;
        margin: 0 !important;
        max-height: calc(100dvh - 20px) !important;
        max-width: none !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: fixed !important;
        right: 10px !important;
        top: 10px !important;
        transform: none !important;
        width: auto !important;
    }

    .modal.modal--quickView .modal-close {
        align-items: center !important;
        background: #fff !important;
        border: 1px solid #d8e0ea !important;
        border-radius: 999px !important;
        box-shadow: 0 4px 14px rgba(12, 28, 48, .16) !important;
        color: #1b2a3a !important;
        display: flex !important;
        height: 44px !important;
        justify-content: center !important;
        padding: 0 !important;
        position: absolute !important;
        right: 8px !important;
        top: 8px !important;
        width: 44px !important;
        z-index: 5 !important;
    }

    .modal.modal--quickView .modal-content {
        box-sizing: border-box !important;
        height: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding: 42px 16px 24px !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .modal.modal--quickView .modal-body {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView {
        display: grid !important;
        gap: 0 !important;
        grid-template-areas:
            "quickview-image"
            "quickview-thumbnails"
            "quickview-details"
            "quickview-highlights" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        margin: 0 !important;
        min-width: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-images {
        display: contents !important;
        float: none !important;
        max-width: none !important;
        padding: 0 !important;
        width: auto !important;
    }

    .modal.modal--quickView .productView-image {
        align-items: center !important;
        display: flex !important;
        grid-area: quickview-image !important;
        height: min(40vh, 240px) !important;
        justify-content: center !important;
        margin: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-img-container,
    .modal.modal--quickView .productView-image > .productView-img-container > a {
        align-items: center !important;
        display: flex !important;
        height: 100% !important;
        justify-content: center !important;
        margin: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-image > .productView-img-container > a {
        flex: 0 0 100% !important;
        min-width: 100% !important;
    }

    .modal.modal--quickView .productView-image img,
    .modal.modal--quickView .productView-image--default {
        display: block !important;
        height: auto !important;
        max-height: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        position: static !important;
        width: auto !important;
    }

    .modal.modal--quickView .productView-thumbnails {
        align-items: center !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        grid-area: quickview-thumbnails !important;
        justify-content: center !important;
        margin: 12px 0 20px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 0 6px !important;
        scroll-snap-type: x proximity;
        touch-action: pan-x !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-thumbnail {
        display: block !important;
        flex: 0 0 68px !important;
        height: 68px !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: center;
        width: 68px !important;
    }

    .modal.modal--quickView .productView-thumbnail-link {
        align-items: center !important;
        box-sizing: border-box !important;
        display: flex !important;
        height: 68px !important;
        justify-content: center !important;
        max-width: 68px !important;
        padding: 4px !important;
        width: 68px !important;
    }

    .modal.modal--quickView .productView-thumbnail img {
        display: block !important;
        max-height: 54px !important;
        max-width: 54px !important;
        object-fit: contain !important;
    }

    .modal.modal--quickView .productView-details {
        border-top: 1px solid #dfe6ef !important;
        clear: none !important;
        float: none !important;
        grid-area: quickview-details !important;
        margin: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 18px 0 0 !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-product,
    .modal.modal--quickView .productView-title,
    .modal.modal--quickView .productView-brand,
    .modal.modal--quickView .productView-price,
    .modal.modal--quickView .productView-rating {
        text-align: center !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-product {
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal.modal--quickView .productView-title {
        color: #1f3042 !important;
        font-size: clamp(22px, 7vw, 29px) !important;
        line-height: 1.1 !important;
        margin: 0 0 10px !important;
        overflow-wrap: anywhere !important;
    }

    .modal.modal--quickView .productView-brand {
        display: block !important;
        font-size: 12px !important;
        margin: 0 0 10px !important;
    }

    .modal.modal--quickView .productView-product > span[style] {
        display: none !important;
    }

    .modal.modal--quickView .productSKU,
    .modal.modal--quickView .productUPC {
        align-items: baseline !important;
        display: flex !important;
        gap: 6px !important;
        justify-content: center !important;
        margin: 0 0 6px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-info-name,
    .modal.modal--quickView .productView-info-value {
        float: none !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .modal.modal--quickView .productView-price {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin: 10px 0 14px !important;
    }

    .modal.modal--quickView .productView-options,
    .modal.modal--quickView .productView-options form,
    .modal.modal--quickView .productView-options .form-field {
        box-sizing: border-box !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .modal.modal--quickView .productView-options .form-field,
    .modal.modal--quickView .productView-options .form-label {
        text-align: center !important;
    }

    .modal.modal--quickView .productView-options [data-product-attribute="swatch"] {
        justify-content: center !important;
    }

    .modal.modal--quickView .productView-options .form-increment {
        align-items: center !important;
        display: flex !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
    }

    .modal.modal--quickView .productView-options .form-increment .button,
    .modal.modal--quickView .productView-options .form-increment .form-input,
    .modal.modal--quickView .productView-options #form-action-addToCart {
        min-height: 44px !important;
    }

    .modal.modal--quickView .productView-options .add-to-cart-buttons,
    .modal.modal--quickView .productView-options .form-action,
    .modal.modal--quickView .productView-options #form-action-addToCart {
        box-sizing: border-box !important;
        text-align: center !important;
        width: 100% !important;
    }

    .modal.modal--quickView .boswell-product-share {
        border-top: 1px solid #dfe5ec !important;
        margin: 18px 0 0 !important;
        padding-top: 14px !important;
        text-align: center !important;
    }

    .modal.modal--quickView .boswell-product-share .socialLinks {
        align-items: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .modal.modal--quickView .boswell-product-share .socialLinks-item {
        margin: 0 !important;
    }

    .modal.modal--quickView .boswell-product-share .boswell-share-link {
        align-items: center !important;
        background: #1f3042 !important;
        border: 0 !important;
        border-radius: 999px !important;
        color: #fff !important;
        cursor: pointer !important;
        display: inline-flex !important;
        height: 44px !important;
        justify-content: center !important;
        padding: 0 !important;
        text-decoration: none !important;
        width: 44px !important;
    }

    .modal.modal--quickView .boswell-product-share .boswell-share-link:hover,
    .modal.modal--quickView .boswell-product-share .boswell-share-link:focus {
        background: #1268d8 !important;
        color: #fff !important;
    }

    .modal.modal--quickView .boswell-product-share .boswell-share-link svg {
        display: block !important;
        fill: currentColor !important;
        height: 20px !important;
        width: 20px !important;
    }

    .modal.modal--quickView .boswell-product-highlights {
        background: #fff !important;
        border: 1px solid #dce4ee !important;
        border-radius: 6px !important;
        display: block !important;
        grid-area: quickview-highlights !important;
        margin: 24px 0 0 !important;
        max-width: none !important;
        overflow: hidden !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .modal.modal--quickView .boswell-product-highlights__tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        touch-action: pan-x !important;
        width: 100% !important;
    }

    .modal.modal--quickView .boswell-product-highlights__tab {
        flex: 0 0 auto !important;
        min-height: 48px !important;
        padding: 13px 14px !important;
        scroll-snap-align: center;
        text-align: center !important;
    }

    .modal.modal--quickView .boswell-product-highlights__panel {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 18px 16px 22px !important;
    }
}