﻿/* product commons */

.product-details-page .label {
    color: #d9d8d7;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}
.product-details-page .label + .value {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

/* img bg */

.product-details-page .img-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: .2;
    z-index: -1;
}

/* main img */

.main-img {
    background-color: #071738;
    background: linear-gradient( 180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 30%,rgba(0,0,0,.5) 100%);
}

/* viedo on product */

.product-details-page .video-on-product {
    margin: 30px 0 30px 0;
    width: 100%;
}
.product-details-page .video-on-product iframe {
    width: 100%;
}

/* spec container */

.product-details-page .flex-overview .spec-container .table {
    color: #fff;
}
.product-details-page .flex-overview .spec-container .table td {
    border: 0;
    background-color: rgba(255,255,255,.1);
}
.product-details-page .flex-overview .spec-container .table td .spec-value {
    font-size: 16px;
    font-weight: 500;
}

/* product title */

.product-details-page .product-title h2.title {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}

/* rating */

.product-details-page .game-rating {
    display: inline-flex;
    align-items: center;
}
.product-details-page .game-rating .rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 0 10px;
    line-height: 1;
}
.product-details-page .game-rating .rating .b-rating-star-empty .b-icon.bi {
    color: #3a496a;
}
.product-details-page .game-rating .rating .title {
    color: #d9d8d7;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}
.product-details-page .game-rating .rating .b-rating-value {
    display: none;
}
.product-details-page .game-rating .mkCharts {
    position: relative;
}
.product-details-page .game-rating .mkCharts::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 13px;
    bottom: 13px;
    left: 13px;
    border-radius: 100%;
    background: linear-gradient(to top,rgba(255,255,255,.1),rgba(255,255,255,.05));
    z-index: -1;
}

/* flex overview */

.product-details-page .flex-overview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.product-details-page .flex-overview .tabs {
    max-height: 400px;
}
.product-details-page .flex-overview .tab-content {
    max-height: 350px;
    padding-bottom: 15px;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.product-details-page .flex-overview .tab-content .tab-pane {
    padding: 30px 0 0 0;
}
.product-details-page .flex-overview .tab-content .tab-pane.desc-pane {
    display: flex;
    height: 100%;
    color: #efefef;
    font-size: 18px;
}
.product-details-page .flex-overview .main-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px 0;
}
.product-details-page .flex-overview .main-buttons .input-group.product-add-to-cart {
    width: auto;
    margin: 0 15px 10px 0;
}
.product-details-page .flex-overview .main-buttons .product-price {
    flex-direction: column;
    margin: 0 0 10px 0;
}
.product-details-page .flex-overview .main-buttons .product-price .actual-price {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}
.product-details-page .flex-overview .main-buttons .product-price .old-price {
    color: #999;
    font-size: 20px;
    text-decoration: line-through;
}

/* product gallery */

.gallery-slider {
    display: inline-flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100px;
    margin: 30px 0 0 0;
}
.gallery-slider img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    pointer-events: none;
}
.gallery-top {
    height: 100%;
    width: 75%;
    background: #071738;
    background: linear-gradient(to right,#071738,#091e49);
    border: 1px solid rgba(255,255,255,.2);
}
.gallery-thumbs {
    width: 100%;
    height: 100%;
    padding: 0 15px 0 0;
    box-sizing: border-box;
}
.gallery-thumbs .swiper-slide {
    width: 20%;
    height: 100%;
    opacity: 0.4;
    background: #071738;
    background: linear-gradient(to right,#071738,#091e49);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: none;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.gallery-thumbs .swiper-slide-active, .gallery-thumbs .swiper-slide:hover {
    opacity: 1;
    border-color: #dd191d;
    box-shadow: 0 6px 10px rgba(0,0,0,.3), 0 15px 12px rgba(0,0,0,.22);
}
.gallery-top .swiper-button-prev::after {
    border-left: 0;
}
.gallery-top .swiper-button-next::after {
    border-right: 0;
}

/* gallery zoom */

.medium-zoom-overlay {
    z-index: 1100;
}
.medium-zoom-image--opened {
    z-index: 1101;
}
.zoom-button {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    color: #fff;
    font-size: 32px;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.zoom-button:hover {
    border-color: #dd191d;
}
.swiper-slide:hover .zoom-button {
    opacity: 1;
    visibility: visible;
}

/* product overview */

.product-details-page .product-label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1033;
}
.product-details-page .generalTitle {
    margin: 0;
    font-size: 32px;
}
.product-details-page .product-label + .generalTitle {
    max-width: calc(100% - 43px)
}
.product-details-page .product-label .badge {
    padding: 6px 8px;
}
.product-details-page .overview .short-description {
    color: #aaa;
}
.product-details-page .overview .label {
    color: #aaa;
    font-size: 16px;
    font-weight: 300;
}
.product-details-page .overview .value {
    margin: 0 0 0 5px;
    font-size: 16px;
    font-weight: 500;
}

/* product attributes */

.attributes {
    margin: 0 0 15px 0;
    padding: 15px;
    border: 2px solid rgba(255,255,255,.2);
    border-radius: .25rem;
}
.attributes table {
    margin: 0;
    border: 0;
}
.attributes table td {
    border-top: 0;
}
.attributes table tr:first-child td {
    border-top: 0;
    vertical-align: middle;
    padding: 10px;
}
.attributes .text-prompt {
    color: #aaa;
    font-size: 16px;
    font-weight: 500;
}
.image-square-tooltip {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.image-square-tooltip img {
    max-width: 165px;
}
.attributes .color-container .color {
    width: 32px;
    height: 32px;
}
.attributes input:checked ~ .color-container .color::before {
    left: 19px;
}

/* product price */

.product-details-page .overview .actual-price {
    color: #dd191d;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
}
.product-details-page .overview .actual-price label {
    color: #aaa;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 16px;
    font-weight: 500;
}
.product-details-page .overview .old-price {
    padding: 0 0 11px 0;
    color: #999;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-decoration: line-through;
}

/* product add to cart */

.product-details-page .qty-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 57px;
    background: transparent;
}
.product-details-page .qty-controls div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.2);
    border-right: 0;
    cursor: pointer;
}
.product-details-page .qty-controls div.plus::before, .product-details-page .qty-controls div.plus::after, .product-details-page .qty-controls div.minus::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 9px;
    width: 12px;
    height: 2px;
    display: flex;
    justify-content: center;
    background: #aaa;
}
.product-details-page .qty-controls div.plus:hover::before, .product-details-page .qty-controls div.plus:hover::after, .product-details-page .qty-controls div.minus:hover::before {
    background: #dd191d;
}
.product-details-page .qty-controls div.plus::after {
    transform: rotate( 90deg );
    -webkit-transform: rotate( 90deg );
}
.product-details-page .qty-controls div:last-child {
    border-top: 0;
}
.product-add-to-cart .qty-input, .product-add-to-cart .qty-dropdown {
    margin: 0 15px 0 0;
    max-width: 65px;
    height: 57px;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    background-color: transparent;
    border-color: rgba(255,255,255,.2);
}
.product-details-page .add-to-cart-button.btn-info {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    max-height: 54px;
    padding: 15px 35px;
    border: 0;
    background: #6913d1;
    background: linear-gradient( 90deg,rgba(105,19,209,1) 0%,rgba(43,110,250,1) 100%);
    border-radius: 20px;
    white-space: pre;
}
.product-details-page .add-to-cart-button.btn-info:focus, .product-details-page .add-to-cart-button.btn-info:active, .product-details-page .add-to-cart-button.btn-info:not(:disabled):not(.disabled):active:focus {
    background-color: #dda128;
    box-shadow: 0 0 0 0.2rem rgba(181, 126, 16, .5);
}
.product-other-buttons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 15px 0;
}
.product-other-buttons .btn.btn-outline-secondary,
.product-other-buttons .btn.btn-outline-secondary:active,
.product-other-buttons .btn.btn-outline-secondary:active:focus {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-family: Prata, serif;
    border: 0;
    background-color: transparent;
    color: #aaa;
    box-shadow: none;
}
.product-other-buttons .btn.btn-outline-secondary:hover {
    color: #dd191d;
}
.product-other-buttons .btn.btn-outline-secondary .text {
    margin: 0 0 0 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

/* product tabs */

.product-details-page .nav-tabs {
    position: relative;
    justify-content: center;
    border: 0;
}
.product-details-page .nav-tabs .nav-link {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    color: #ddd;
    background-color: transparent;
    border: 0;
    outline: none;
    border-radius: 0;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.product-details-page .nav-tabs .nav-link.active {
    color: #fff;
}
.product-details-page .nav-tabs .nav-link:hover:not(.active) {
    color: #fff;
}
.product-details-page .nav-tabs .nav-link::before {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    right: 50%;
    width: 0;
    height: 3px;
    background: #aaa;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.product-details-page .nav-tabs .nav-link:hover::before {
    left: 0;
    right: 0;
    width: 100%;
}
.product-details-page .nav-tabs .nav-link.active::before {
    background: #dd191d;
    left: 0;
    right: 0;
    width: 100%;
}

/* product collateral */

.product-collateral .add-to-cart-button {
    max-width: 160px;
}
.product-collateral .add-to-wishlist-button {
    width: 235px;
}

/* quick view */

.modal-content .gallery-top {
    width: 100%;
}

@media (max-width: 767px) {
    .product-details-page .gallery {
        margin: 0 0 15px 0;
    }
    .product-details-page .generalTitle {
        font-size: 28px;
    }
    .product-details-page .other-buttons .btn {
        padding: .8rem 1.5rem;
    }
    .product-details-page .flex-overview .tab-content {
        max-height: 290px;
    }
}
@media (max-width: 575px) {
    .product-details-page .generalTitle {
        font-size: 24px;
    }
}
@media (max-width: 380px) {
    .product-details-page .generalTitle {
        font-size: 22px;
        margin: 0 0 10px 0;
    }
    .product-details-page .overview .short-description {
        font-size: 14px;
    }
}