.product-detail {
    .breadcrumbs .current {
        display: none;
    }

    .pd-grid, [role="cross-sells"], .pd-specs {
        padding: 0 0.9375em;
        margin-bottom: 0.9375em !important;
    }

    .detail-info {
        float: left;
        width: 100%;
    }

    .name-price [class*="price-"], .name-price .price {
        width: auto;
        display: inline-block;
        padding-right: .15em;
    }

    .name-price {
        .um {
            padding-right: 1em;
        }
    }

    .detail-info h1 {
        margin-top: 0;
        font-size: 1.5em;
    }

    .detail-info .pd-price-um {
        margin-bottom: 1em;
    }

    .detail-info .pd-price-um .quote-required {
        margin-right: 1em;
    }

    .detail-info .pd-price-um .quote-required .quote-tip {
        margin-left: .5em;
    }

    .detail-info .pd-price {
        display: inline-block;
        font-size: 1.25em;
        font-weight: 600;
    }

    .detail-info .quantity-pricing {
        margin-bottom: 1em;
    }

    .detail-info .availability {
        margin-bottom: 1em;
    }

    .pd-grid ul.attribute-list {
        width: 100%;
        font-size: 0.9em;
        margin: 0.5em 0 1.5em 0;
        color: inherit;
    }

    .pd-grid ul.doclinks {
        font-size: .9em;
        margin: 0.5em 0 1.5em 0;
        color: inherit;
        list-style-type: none;
    }

    .pd-grid ul.doclinks li {
        display: inline-block;
        margin-right: 0.5em;
    }

    .detail-options {
        float: left;
        width: 100%;
    }

    .detail-options .fc-qty label {
        font-size: .875rem;
    }

    .detail-image {
        float: left;
        text-align: center;
        margin-bottom: 20px;
    }

    .btn-swatch {
        width: 45% !important;
        font-size: 0.875rem;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 5px !important;
        padding: .7em .7em !important;
    }

    .swatch {
        position: absolute;
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 100%;
    }

    .swatch-current-container {
        font-weight: 600;
        background: #F6F6F6 !important;
    }

    .swatch-current {
        border: 2px solid #00A3FF !important;
        border-radius: 100%;
    }

    .swatch-disabled {
        svg {
            position: absolute;
            opacity: .75;
            top: 2px;
            left: 2px;
        }
    }

    .style-trait-label-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    // swatch dropdown
    .swatch-dropdown {
        position: relative;
        display: inline-block;
        height: 2.7em;
        width: 100%;
    }

    .swatch-dropdown-selected-swatch {
        display: flex;
    }

    .swatch-dropdown-select {
        height: 2.7em;
        width: 100%;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(204, 204, 204);
        font-size: 14px;
        font-weight: 400;
        font-family: 'sourcesanspro';
        color: rgba(0, 0, 0, 0.75);
        background-color: #FFFFFF !important;
        padding: 0.1em 0.5em;
        text-align: left;
        margin-bottom: 0;
    }

    .swatch-dropdown-text {
        display: flex;
        align-items: center;
        margin-left: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .swatch-dropdown-option {
        height: 2.7em;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        font-family: 'sourcesanspro';
        color: rgba(0, 0, 0, 0.75);
        background-color: #FFFFFF;
        padding: 0.1em 0.5em;
        text-align: left;
        margin-bottom: 0;
    }

    .swatch-dropdown-option:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    button.swatch-dropdown-option:hover:enabled {
        background: #F6F6F6 !important;
    }

    button.swatch-dropdown-option:hover:disabled {
        background: none !important;
        color: rgba(16, 16, 16, 0.3);
    }

    .swatch-dropdown-list {
        display: none;
        position: absolute;
        background-color: #FFFFFF;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .show-dropdown-list {
        display: block;
        max-height: 300px;
        width: 100%;
    }

    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }

    .swatch-dropdown-item {
        display: flex;
        align-content: center;
    }

    .swatch-dropdown-container {
        position: relative;
        display: inline-block;
        min-width: 33px;
        min-height: 33px;
        padding: 2px;
        background: transparent;
        border-radius: 100%;
        border: 2px solid transparent;
    }
    // swatch grid
    .swatch-grid > ul {
        overflow-y: auto;
        max-height: 300px;
        display: inline-block;
        width: 100%;
        margin-left: auto;
    }

    .swatch-grid-item {
        display: inline-block;
        width: 40%;
        text-align: center;
        margin: 10px 5px;
    }

    .swatch-grid-option {
        height: 100%;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        font-family: 'sourcesanspro';
        color: rgba(0, 0, 0, 0.75);
        background-color: #FFFFFF;
        padding: 0.1em 0.5em;
        text-align: left;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .swatch-grid-option:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .swatch-grid-container {
        position: relative;
        display: inline-block;
        min-width: 33px;
        min-height: 33px;
        padding: 2px;
        background: transparent;
        border-radius: 100%;
        border: 2px solid transparent;
    }

    .swatch-grid-text {
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    button.swatch-grid-option:hover:enabled {
        background: #F6F6F6 !important;
    }

    button.swatch-grid-option:hover:disabled {
        background: none !important;
        color: rgba(16, 16, 16, 0.3);
    }
    // swatch list
    .swatch-list > ul {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 300px;
        width: 100%;
        margin-left: auto;
    }

    .swatch-list-item {
        display: inline-block;
        width: 90%;
        margin: 10px 0px;
    }

    .swatch-list-option {
        height: 100%;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        font-family: 'sourcesanspro';
        color: rgba(0, 0, 0, 0.75);
        background-color: #FFFFFF;
        padding: 0.1em 0.5em;
        text-align: left;
        margin-bottom: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .swatch-list-option:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    button.swatch-list-option:hover:enabled {
        background: #F6F6F6 !important;
    }

    button.swatch-list-option:hover:disabled {
        background: none !important;
        color: rgba(16, 16, 16, 0.3);
    }

    .swatch-list-container {
        position: relative;
        display: inline-block;
        min-width: 33px;
        min-height: 33px;
        padding: 2px;
        background: transparent;
        border-radius: 100%;
        border: 2px solid transparent;
    }

    .swatch-list-text {
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        margin-left: 5px;
    }

    .detail-share {
        text-align: center;
    }

    .pd-grid .fc-um, .pd-grid .fc-qty {
        float: left;
        padding: 0;
        width: 50% !important;
    }

    .pd-grid .fc-qty input {
        max-width: 100px;
    }

    .pd-buttons div {
        float: left;
    }

    .pd-grid .fc-um label {
        font-size: .875rem;
    }

    .pd-grid .fc-um .columns, .pd-grid .fc-qty .columns {
        padding: 0;
    }

    .pd-grid .fc-um .pack {
        float: left;
        display: block;
        width: 100%;
        margin-bottom: 1em;
        font-size: .875rem;

        .pack-label {
            font-weight: 600;
            font-size: .875rem;
        }
    }

    [role="main"] .detail-options a.btn.btn-add-to-cart, [role="main"] .detail-options a.btn.btn-add-to-list {
        padding-top: 0.75em;
        padding-bottom: 0.75em;
    }

    .primary-button, .secondary-button {
        padding-right: 0;
        margin-right: 0;
    }

    .pd-grid {
        margin-top: 2em !important;
    }

    .detail-info .item-num {
        margin-bottom: 1em;
    }

    .detail-options .panel {
        border: 1px solid #e0e7ea;
        background: none;

        .section-label {
            word-break: break-word;
        }
    }

    .pd-buttons, .secondary-button {
        float: left;
        width: 100%;
    }

    .pd-item-link {
        cursor: zoom-in;
    }

    .images-carousel-wrapper {
        padding: 0.6em 0;
        visibility: hidden;
        position: relative;
        margin: 0 auto;

        .img-carousel {
            .slides img {
                display: inline-block;
                max-height: 44px;
                max-width: 44px;
                height: auto;
                width: auto;
                margin: 0 auto;
                vertical-align: middle;
                text-align: center;
            }
        }

        ul {
            li {
                margin: 0;
                width: 50.8px;
                height: 50.8px;
                line-height: 42px;
                cursor: pointer;

                .item-wrap {
                    margin: 0 4.8px 0 0;
                    border: 1px solid #d5d5d5;
                }

                &.active .item-wrap {
                    border-color: #555555;
                }
            }
        }

        .img-carousel-control-prev, .img-carousel-control-next {
            top: 0.3em;
            width: 0.7em;
            height: 2em;
            background: none;
            display: none;

            span {
                font-size: 0.8em;
            }
        }

        .img-carousel-control-prev {
            left: -0.8em;
        }

        .img-carousel-control-next {
            right: -0.8em;
        }

        .img-carousel-control-prev:hover, .img-carousel-control-next:hover {
            text-decoration: none;
            background: #f6f6f6;
        }
    }

    &.popup-share {
        max-width: 480px;
        overflow: auto;
        height: 93vh;
    }

    .pd-specs {
        .spec-attributes {
            width: 480px;

            td {
                padding: .5625rem .625rem;
                line-height: 1.25rem;
            }
        }

        .spec-documents {
            margin-left: 0;

            li {
                list-style-type: none;
                line-height: 2.2em;
                margin-bottom: 5px;
            }
        }
    }
}

#imgZoom .modal-wrap {
    max-width: 90%;
    width: auto;

    img.imgZoom {
        display: block;
        margin: 0 auto;
        max-height: 80vh;
    }

    .sirv-image {
        width: 400px;
        padding-top: 10px;
    }

    .zoom-carousel-wrapper {
        height: 56px;

        .images-carousel-wrapper {
            margin: 0 auto;
        }
    }
}

@media all and (max-width: 767px) {
    .product-detail {
        .detail-info .name-price {
            width: 100%;
        }

        .detail-info h6 {
            margin-top: 0 !important;
        }

        .detail-info ul.attribute-list {
            color: inherit;
        }

        .detail-options {
            margin-bottom: 1.5em;
        }

        .pd-grid .fc-um {
            width: 100%;
            float: left;
            margin-bottom: 0.5em;
            padding-right: 1.5em;
        }

        .pd-grid .fc-qty {
            width: 100% !important;
            float: left;
        }

        .pd-specs {
            .spec-attributes {
                width: 100%;
            }
        }
    }
}

@media all and (min-width: 768px) {
    .product-detail {
        .pd-grid .fc-um {
            width: 70% !important;
            padding-right: 1em;
        }

        .pd-grid .fc-um select {
            width: auto;
        }

        .pd-grid .fc-qty {
            width: 30% !important;
        }

        [role="main"] .detail-options .btn.btn-add-to-cart, [role="main"] .detail-options a.btn.btn-add-to-list {
            font-size: 1.2em;
        }

        [role="main"] .detail-options .btn.btn-add-to-cart {
            width: 100%;
        }

        .detail-info {
            padding-right: .9375em;
        }

        .detail-image {
            max-width: 300px !important;
            float: left;
            width: 43% !important;
        }

        .detail-info {
            width: 75% !important;
            float: left;
        }

        .name-price, .pd-grid .pd-cm-wrap, .pd-grid .doclinks {
            float: right;
            width: 54%;
            color: inherit;
        }

        .detail-specs {
            width: 75% !important;
            float: left;
            padding-right: 0.9375em;
        }

        .detail-options {
            float: right;
            width: 20%;
        }

        .fc-um, .fc-qty {
            width: 100% !important;
        }

        #imgZoom .modal-wrap img {
            max-height: 75vh;
        }
    }
}
