.pi-main-modal {
    position: fixed;
    background: rgba(0,0,0,0.9);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
}


.pi-main-modal .swiper-wrapper {
    align-items: center;
}

.pi-modal {
    width: 50%;
    max-width: 750px;
}

.pi-main-modal .pi-modal-pagination {
    color: white;
    font-weight: 700;
    font-size: 20px;
    position: absolute;
    bottom: 20px;
}

.pi-main-modal .pi-modal-prev, .pi-main-modal .pi-modal-next {
    color: white;
    padding: 60px;
}

span.pi-modal-close {
    color: white;
    font-size: 64px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
    cursor: pointer;
}

.pi-main-modal > .swiper-button-disabled {
    pointer-events: all!important;
}


#prod-buybox {
    width: calc(5/12 * 100%);
    /* margin-left: calc(7/12 * 100%); */
}

#prod-image-bb-display {
    display: flex;
    min-height: 540px;
}

#prod-images {
    width: calc(7/12 * 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pi-main-container {
    position: relative;
    margin: 0 30px;
    max-width: calc(100% - 60px);
}

.pi-main {
    max-width: 540px;
    width: 100%;
    min-height: 400px;
    min-width: 400px;
}

.pi-thumbs-container {
    min-height: 50px;
}

.swiper-button-prev.pi-thumbs-prev-med {
    left: -30px;
}

.swiper-button-next.pi-thumbs-next-med {
    right: -30px;
}

.swiper-button-next, .swiper-button-prev {
    z-index: 1!important;
}

.pi-main > .swiper-wrapper {
    display: flex;
    align-items: center;
}

.pi-thumbs-container {
    position: relative;
}

.pi-thumbs > .swiper-wrapper {
    display: flex;
    align-items: center;
}

.pi-thumbs .pi-thumb {
    width: 75px;
    border: 1px solid #c4c4c4;
}

.pi-thumbs-container {
    padding: 0 30px;
    position: relative;
    margin-top: 24px;
    /* max-width: calc(100% - 30px); */
    width: 100%;
}

.pi-thumbs-container .swiper-button-next:after, .pi-thumbs-container .swiper-button-prev:after {
    font-size: 24px;
}

.pi-main img, .pi-thumbs img {
    cursor: pointer;
}

.pi-thumbs img:hover {
    border: 1px solid #333;
}

.pi-main-container .swiper-pagination {
    bottom: -20px;
    color: #2a527a;
    font-weight: 700;
    font-size: 12px;
}

.pi-thumbs {
    padding: 4px;
}

.pi-thumb.swiper-slide-thumb-active {
    border: 2px solid #0066CC!important;
}

.pi-thumbs-container .pi-thumbs-prev {
    left: 0;
}

.pi-thumbs-container .pi-thumbs-next {
    right: 0px
}

.pi-main-pagination {
    position: absolute;
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: #2a527a;
}

#prod-buybox {
    border-left: 1px solid #c4c4c4;
    padding: 0 20px;
    color: #ddd;
    /* display: flex; */
    /* flex-direction: column; */
}

#prod-buybox {
    line-height: 100%;
}

#prod-buybox p {
    margin: 0;
}

#prod-buybox select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

#prod-buybox select:focus, #prod-buybox input:focus, #prod-buybox textarea:focus {
    outline: 2px solid #0066CC;
    box-shadow: none;
}

#prod-buybox select {
    border: none;
    border-radius: 0;
    display: block;
    height: unset;
    line-height: unset;
    outline: 0 none;
    padding: 0;
    vertical-align: unset;
    overflow: hidden;
    
}

#prod-buybox select, #prod-buybox input, #prod-buybox textarea {
    background-color: white;
    color: #333;
    padding: 8px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #c4c4c4;
    line-height: 24px;
}

#prod-buybox select {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px 40px 8px 8px;
}

.pbb-attributes-container {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

.pbb-attribute {
    margin-bottom: 8px;
}

#prod-buybox select {
    width: 60%;
}

.pbb-price {
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    color: #2a527a;
}

.pbb-retail-price {
    text-decoration: line-through;
    color: #333;
    font-size: 16px;
    text-decoration-color: #2a527a;
    text-decoration-thickness: 2px;
}

.pbb-price-container {
    margin: 16px 0 16px 0;
    position: relative;
}

.pbb-action-container {
    margin: 16px 0;
    display: flex;
    align-items: center;
}

input.pbb-quantity {
    width: 60px;
    height: 68px;
    font-size: 24px;
    text-align: center;
    border: 1px solid #c4c4c4;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
}

.pbb-add-to-cart {
    background: #0066CC;
    padding: 16px;
    flex: 1;
    font-size: 36px;
    border-radius: 4px;
    color: white;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    text-align: center;
    max-width: 60%;
}

.pbb-add-to-cart:hover {
    background: #0059b3;
}

.pbb-add-to-cart:active {
    background: #004c99;
}

#prod-buybox div.pbb-qty-input {
    display: flex;
    margin-right: 20px;
    color: #333;
}

.pbb-qty-actions {
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 4px;
}

.pbb-qty-actions > div {
    padding: 4px;
    border: 1px solid #efefef;
    margin-left: 12px;
    border-radius: 4px;
    text-align: center;
}

.pbb-qty-actions > span {
    display: block;
    border-radius: 4px;
    font-weight: 700;
}

.pbb-qty-actions > span:hover {
    cursor: pointer;
    color: #0066CC;
    outline: 1px solid #c4c4c4;
}

.pbb-price-line-container {
    display: flex;
    align-items: center;
}

.pbb-discount-pct {
    margin-left: 12px;
    color: #333;
}

.pbb-qty-actions > span.pbb-qty-disabled:hover {
    cursor: initial;
    box-shadow: none;
}

.pbb-qty-actions > span.pbb-qty-disabled {
    color: #ddd;
}

.pbb-qty-actions > span.pbb-qty-disabled:hover {
    cursor: initial;
    box-shadow: none;
}

.pbb-qty-actions > span.pbb-qty-disabled {
    color: #ddd;
}

#prod-buybox p.pbb-attribute-label {
    color: #2a527a;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}

.pbb-review-avg > span {
    color: #F6AD55;
    margin-right: 2px;
}

.pbb-review-avg {
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.pbb-review-avg > .pbb-review-score {
    color: #333;
    font-size: 14px;
    margin-left: 4px;
    cursor: pointer;
}

.pbb-review-score:hover {
    color: #0066CC;
}

.pbb-product-code {
    color: #333;
}

.pbb-product-code > span {
    color: #2a527a;
}

.pbb-inventory-message {
    color: #333;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.pbb-inventory-messaging-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

span.pbb-im-icon {
    position: relative;
    top: 0px;
    font-size: 24px;
    color: #2ecc71;
    margin-right: 4px;
}

.pbb-discounts-container {
    position: relative;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    padding: 12px;
    margin: 6px 0 0 0;
    color: #333;
    font-size: 14px;
    display: inline-block;
}

.pbb-discounts-label {
    position: absolute;
    top: -8px;
    background: white;
    padding: 0 4px;
    text-transform: uppercase;
    font-size: 11px;
    color: #2a527a;
}

.pbb-discount > span {
    color: #2a527a;
    margin-left: 4px;
}

.pbb-summary {
    margin-bottom: 16px;
}

.restricted-kit-message > span, .backordered-kit-message > span {
    font-weight: 700;
    color: #2a527a;
}

.pbb-backordered-part {
    color: #333;
    font-size: 14px;
    line-height: 18px;
}

.pbb-attribute:last-of-type {
    margin-bottom: 0;
}

.pbb-wishlist-add {
    display: flex;
    align-items: center;
    /* padding: 4px 0; */
    cursor: pointer;
}

.pbb-wishlist-add span {
    margin-right: 4px;
    color: #0066CC;
    font-size: 20px;
    width: 25px;
    display: inline-block;
}

.pbb-wishlist-container {
    color: #333;
    margin-bottom: 4px;
}

.pbb-wishlist-add:hover {
    color: #0066CC;
}

.pbb-wishlist-adding {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #c4c4c4;
    width: 60%;
    align-items: flex-start;
    padding: 20px;
    border-radius: 4px;
}

#prod-buybox .pbb-wishlist-adding select {margin-bottom: 10px;width: 100%;}

.pbb-wishlist-added {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.pbb-wishlist-added span[data-icon] {
    font-size: 24px;
    color: #2ecc71;
    margin-right: 4px;
}

.pbb-wishlist-added a {
    margin-left: 12px;
    font-size: 16px;
    color: #333;
    text-decoration: underline;
}

#pbb-buybox a {
    transition: none;
}

#prod-buybox a {
    transition: none;
}

#prob-buybox a:hover {
    color: black;
}

.pbb-wishlist-added a span[data-icon] {
    font-size: 14px;
    margin-left: 3px;
    position: relative;
    top: 2px;
    color: #0066CC;
}

.pbb-wishlist-added a:hover {
    color: #0066CC;
}

.pbb-wishlist-adding p {
    text-transform: uppercase;
    font-size: 12px;
}

.pbb-wishlist-adding button {
    padding: 4px 12px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    background: #f0f0f0;
}

.pbb-wishlist-adding div {
    /* margin-bottom: 12px; */
}

.pbb-free-shipping-inner {
    display: flex;
    align-items: center;
}

.pbb-free-shipping-inner span {
    /* margin-left: 4px; */
}

.pbb-free-shipping-inner svg {
    margin-right: 4px;
}

.pbb-free-shipping {
    color: #333;
    margin-bottom: 4px;
}

#prod-buybox #bread-button a:hover {
    color: #0066CC;
}

.pbb-inventory-backordered-parts {
    margin-top: 4px;
}

.pbb-bread {
    height: 16px;
}

.pbb-qty-actions > span:active {
    background: #eaeaea;
    outline: 1px solid #c4c4c4;
    color: #0066CC;
}

.pbb-qty-actions > span.pbb-qty-disabled:hover {
    outline: none;
    color: #ddd;
}

.pbb-qty-actions > span.pbb-qty-disabled:active {
    outline: none;
    background: white;
    color: #ddd;
}

.pbb-wishlist-adding button:hover {
    background: #e1e1e1;
}

.pbb-wishlist-adding button:active {
    background: #d2d2d2;
}

.pbb-im-message {
    font-size: 18px;
}

input.pbb-quantity:focus {
    box-shadow: none;
    outline: 2px solid #0066CC;
}

.pbb-wishlist-adding-actions {
    display: flex;
    align-items: center;
}

#prod-buybox .pbb-wishlist-adding-actions > p {
    text-transform: none;
    text-decoration: underline;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
}

.pbb-fitment-message {
    width: 60%;
    margin-bottom: 16px;
    line-height: 20px;
}

.pbb-fitment-modified {
    border: 2px solid #fb923c;
    border-radius: 4px;
    padding: 8px;
    color: #333;
    display: flex;
    align-items: center;
}

.pbb-fitment-modified span {
    color: #fb923c;
}

.pbb-fitment-no-fit span {
    color: #fb923c;
}

#prod-buybox .pbb-fitment-modified p {
    margin-top: 8px;
    font-size: 14px;
}

.pbb-fitment-modified > span, .pbb-fitment-fits > span, .pbb-fitment-no-fit > span {
    display: block;
    font-size: 36px;
    margin-right: 16px;
}

.pbb-fitment-message .pbb-fitment-vehicle {
    color: #2a527a;
    font-weight: 700;
}

#prod-buybox .pbb-fitment-modified p::before {
    content: "";
    margin-right: 4px;
}

.pbb-fitment-modified div {
    line-height: 18px;
}

.pbb-fitment-no-fit {
    border: 2px solid #fb923c;
    border-radius: 4px;
    padding: 8px;
    color: #333;
    display: flex;
    align-items: center;
}

.pbb-fitment-fits {
    border: 2px solid #2ecc71;
    border-radius: 4px;
    padding: 8px;
    color: #333;
    display: flex;
    align-items: center;
}

.pbb-fitment-fits span {
    color: #2ecc71;
}

.pbb-fitment-fits p span {
    color: #1e8549;
}

.pbb-im-message span {
    color: #0066CC;
    font-size: 14px;
    text-decoration: underline;
    margin-left: 5px;
    cursor: pointer;
}

.pbb-im-message span {
    color: #0066CC;
    font-size: 14px;
    text-decoration: underline;
    margin-left: 5px;
    cursor: pointer;
}

.pbb-backorder-notification {
    display: flex;
    flex-direction: column;
    border: 1px solid #c4c4c4;
    width: 60%;
    padding: 20px;
    border-radius: 4px;
    margin-top: 10px;
    color: #333;
}

#prod-buybox .pbb-backorder-notification-info {
    margin-bottom: 10px;
    font-size: 14px;
}

#prod-buybox p.pbb-input-label {
    text-transform: uppercase;
    font-size: 12px;
}

.pbb-backorder-notification input {
    margin-bottom: 10px;
}

.pbb-backorder-notification button {
    padding: 4px 12px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    background: #f0f0f0;
}

.pbb-backorder-notification button:hover {
    background: #e1e1e1;
}

#prod-buybox p.pbb-backorder-notification-cancel {
    text-transform: none;
    text-decoration: underline;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
}

.pbb-notification-actions {
    display: flex;
    align-items: center;
}

.pbb-backorder-notification button:active {
    background: #d2d2d2;
}

.pbb-notification-error {
    margin-bottom: 10px;
    color: #dc2626;
}

.pbb-backorder-notification-added {
    display: flex;
    border: 1px solid #c4c4c4;
    width: 60%;
    align-items: center;
    padding: 20px;
    border-radius: 4px;
    margin-top: 10px;
    color: #333;
}

.pbb-backorder-notification-added span:first-of-type {
    font-size: 24px;
    color: #2ecc71;
    margin-right: 10px;
}

.pbb-backorder-notification-added span {
    line-height: 20px;
}

input.pbb-attribute-text {
    width: 60%;
    border: 1px solid #c4c4c4;
}

textarea.pbb-attribute-memo {
    width: 60%;
}

.pbb-wishlist-add span.pbb-wishlist-add-text, .pbb-wishlist-notification span.pbb-wishlist-add-text {
    margin-right: 0;
    color: #333;
    font-size: 16px;
    text-decoration: underline;
    width: auto;
}

.pbb-wishlist-add span.pbb-wishlist-add-text:hover, .pbb-wishlist-notification span.pbb-wishlist-add-text:hover {
    color: #0066CC;
}


.pbb-wishlist-notification {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #c4c4c4;
    width: 60%;
    align-items: flex-start;
    padding: 20px;
    border-radius: 4px;
}

.pbb-wishlist-notification span.pbb-wishlist-add-text {
    cursor: pointer;
    margin: 4px 0;
    color: #0066CC;
}

.pbb-wishlist-adding > span {
    margin-bottom: 8px;
    font-weight: 700;
}

.pbb-wishlist-adding.pbb-sign-in-throwback {
    border: 2px solid #0066CC;
}

.pbb-supplemental-info > .pbb-supplemental-icon {
    font-size: 25px;
    line-height: 25px;
    color: #2ecc71;
    width: 25px;
    margin-right: 4px;
    text-align: center;
    display: inline-block;
}

.pbb-supplemental-info {
    align-items: center;
    margin-bottom: 4px;
    display: flex;
}

.pbb-supplemental-info span {
    color: #333;
}

.pbb-supplemental-info a {
    color: #0066CC;
    font-size: 14px;
    margin-left: 10px;
    line-height: 14px;
}

.pbb-supplemental-info a > span {
    color: #0066CC;
    position: relative;
    font-size: 12px;
    left: 2px;
}

.pbb-supplemental-info a:hover {
    text-decoration: underline;
}

.pbb-supplemental-info > span[data-icon] {
    color: #0066CC;
    font-weight: 700;
    font-size: 22px;
    width: 25px;
    margin-right: 4px;
    position: relative;
    top: -1px;
    display: inline-block;
}

.pbb-fitment-option {
    color: #333;
    text-decoration: underline;
    cursor: pointer;
    padding-top: 4px;
}

span.pbb-fitment-option:hover {
    color: #0066CC;
}

.pbb-customer-needs-fitment {
    display: flex;
    width: 60%;
    margin: 16px 0;
}

.pbb-ostentatious-fitment-display {
    margin-bottom: 4px;
}

p.pbb-fitment-select-label {
    color: #333;
    padding: 4px 0;
}

p.pbb-ostentatious-fitment-select-label {
    font-weight: 700;
    color: #0066CC;
    padding-bottom: 8px;
}

.pbb-customer-choosing-fitment {
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    padding: 20px;
    width: 100%;
}

#prod-buybox .pbb-ostentatious-fitment-select-container > select {
    width: 100%;
}

.pbb-fitment-prompt {
    color: #333;
}

.pbb-fitment-prompt span {
    text-decoration: underline;
    color: #0066CC;
    cursor: pointer;
}

.pbb-product-sku {
    background: yellow;
    color: black;
    font-weight: 700;
    width: auto;
    margin: 4px 0;
    padding: 4px;
}

.pbb-completely-oos {
    color: #fb923c;
    font-size: 24px;
    line-height: 36px;
}

span.discount-disclaimer {
    color: #0066cc;
    margin-left: 5px;
    cursor: pointer;
    position: relative;
}

.discount-disclaimer-popup {
    position: absolute;
    left: calc(100% + 10px);
    bottom: 0;
    background: white;
    width: 200px;
    padding: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    color: #333;
    border-radius: 4px;
}

@media screen and (max-width: 959px) {
    #prod-buybox select {
        width: 100%;
    }

    .pbb-add-to-cart {
        padding: 16px 24px;
        font-size: 28px;
        flex: 1;
        max-width: 100%;
    }

    .pbb-wishlist-adding {
        width: 100%;
    }

    input.pbb-quantity {
        height: 60px;
    }

    .pbb-fitment-message {
        width: 100%;
    }

    .pi-main {
        min-width: 300px;
        min-height: 300px;
    }

    .pbb-customer-needs-fitment {
        width: 100%;
    }

    .pbb-customer-choosing-fitment {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    #prod-images {
        width: 100%;
    }

    #prod-image-bb-display {
        flex-direction: column;
        align-items: center;
    }

    .pi-main-container {
        position: relative;
        margin: 0 30px;
    }

    .pi-main {
        /* max-width: calc(100% - 60px); */
        width: 100%;
    }

    .pi-thumbs-container {
        margin-bottom: 16px;
        width: 100%;
    }

    #prod-buybox {
        border-left: none;
        margin-left: 0;
        width: 100%;
    }

    .swiper-button-prev.pi-thumbs-prev-med {
        left: -28px;
    }
    
    .swiper-button-prev.pi-thumbs-prev-med:after, .swiper-button-next.pi-thumbs-next-med:after {
        font-size: 24px;
    }
    
    .swiper-button-next.pi-thumbs-next-med {
        right: -28px;
    }

    .pi-thumbs-container > .swiper-button-prev.pi-thumbs-prev {
        left: 0px;
    }
    
    .pi-thumbs-container > .swiper-button-next.pi-thumbs-next {
        right: 0px;
    }

    .pi-main-modal .pi-modal-prev, .pi-main-modal .pi-modal-next {
        padding: 20px;
        z-index: 100;
    }

    .pi-main-modal .pi-modal-prev {
        padding-top: 20px;
        padding-right: 100px;
        z-index: 100;
        width: 12px!important;
        height: 24px!important;
        box-sizing: content-box;
    }

    .pi-main-modal .pi-modal-next {
        padding-top: 20px;
        padding-left: 100px;
        z-index: 100;
        width: 12px;
        height: 24px;
        box-sizing: content-box;
    }
    
    .pi-modal {
        width: 100%;
        max-height: calc(100% - 80px);
    }

    .pi-modal-prev {
        bottom: 0!important;
        top: initial!important;
        left: 0!important;
    }
    
    .pi-modal-next {
        bottom: 0!important;
        top: initial!important;
        right: 0!important;
    }

    .pi-modal-prev:after, .pi-modal-next:after {
        font-size: 24px!important;
    }

    .pi-main {
        min-width: 200px;
        min-height: 200px;
    }

    span.pi-modal-close {
        font-size: 48px;
        padding: 10px;
    }
}

@media screen and (max-width: 425px) {
    .pi-main {
        min-width: 150px;
        min-height: 150px;
    }
}