@import "partials";
.product-details-sec{
padding-top: 25px;
background-color: #111113;
.product-details-wrapper{
@media ($sm-991) {
flex-wrap: wrap;
}
}
.details-left-block{
width: 440px;
flex-shrink: 0;
@media ($sm-991) {
width: 100%;
margin-bottom: 20px;
}
}
.details-left-block{
.product-img-cover{
width: 100%;
background: #31313129;
border-radius: 8px;
padding: 30px 25px;
@media ($sm-991) {
padding: 25px 25px 20px;
}
.product-lg-slider{
.prod-img-cover{
height: 388px;
display: flex;
align-items: center;
justify-content: center;
@media ($sm-1679) {
height: 330px;
}
@media ($sm-767) {
height: 280px;
}
@media ($sm-579) {
height: 220px;
}
img{
max-width: 100%;
max-height: 100%;
}
}
}
.product-thumb-slider{
margin-top: 15px;
.slick-next, .slick-prev{
background-color: #1C1C21;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
background-position: center;
background-repeat: no-repeat;
filter: grayscale(1);
transition: .3s;
z-index: 1;
&:hover{
filter: none;
}
&::before{
display: none;
}
}
.slick-prev{
left: -5px;
background-image: url('../img/thumb-left.svg');
}
.slick-next{
right: -5px;
background-image: url('../img/thumb-right.svg');
}
.slick-slide{
padding: 7px;
}
.thumb-img-block{
cursor: pointer;
height: 100px;
width: 100%;
background: #111113;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border: solid 1px transparent;
@media ($sm-1679) {
height: 85px;
}
img{
max-width: 85%;
max-height: 85%;
@media($sm-991){
max-width: 68%;
max-height: unset;
height: auto;
}
}
}
.slick-current{
.thumb-img-block{
border-color: rgba($color: $primary, $alpha: 0.6);
}
}
.thumb-img-block{
}
}
}
}
.details-right-block{
flex-grow: 1;
padding-left: 15px;
@media ($sm-991) {
padding-left: 0;
}
.det-block-top{
border: 0.84px solid #1C1C1F;
background-color: #111113;
border-radius: 10px;
margin-bottom: 50px;
@media ($sm-1199) {
margin-bottom: 30px;
}
.top-block-1{
padding: 40px 40px 50px;
@media ($sm-1679) {
padding: 30px 30px 40px;
}
@media ($sm-1199) {
padding: 20px 20px 30px;
}
}
.rating-block{
margin-bottom: 15px;
.str{
@media ($sm-1679) {
width: 15px;
}
}
.rating-num{
display: inline-block;
padding-left: 0px;
font-size: 18px;
color: #565662;
@media ($sm-1679) {
font-size: 16px;
}
}
}
.prod-name{
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 37px;
margin-bottom: 30px;
@media ($sm-1679) {
font-size: 18px;
line-height: 35px;
}
@media ($sm-1199) {
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
}
}
.brand-det-wrapper{
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
.brand-det-col{
min-width: 180px;
// padding-left: 50px;
@media ($sm-1199) {
min-width: 120px;
}
@media ($sm-479) {
padding-left: 0;
width: 100%;
}
&:first-child{
padding-left: 0;
}
.brand-det-card{
font-size: 18px;
margin-bottom: 20px;
@media ($sm-1679) {
font-size: 16px;
margin-bottom: 15px;
}
@media ($sm-1199) {
font-size: 14px;
margin-bottom: 10px;
}
span{
display: inline-block;
}
.data-sm-label{
color: #565662;
}
.data-sm-val{
color: #fff;
a{
color: #fff;
}
&.val-grn{
color: #34AE53;
}
}
}
}
}
.special-price-label{
color: $primary;
font-size: 16px;
margin-bottom: 10px;
@media ($sm-1679) {
font-size: 14px;
}
}
.price-det{
display: flex;
align-items: center;
@media ($sm-479) {
flex-wrap: wrap;
}
span{
display: inline-block;
}
.price{
color: #fff;
font-size: 36px;
font-weight: 700;
@media ($sm-1679) {
font-size: 32px;
}
@media($sm-1441){
font-size: 28px;
}
@media ($sm-1199) {
font-size: 26px;
}
@media($sm-991){
font-size: 24px;
}
@media($sm-767){
font-size: 22px;
}
@media($sm-579){
font-size: 20px;
}
}
.prod-price{
padding-left: 15px;
color: #565662;
text-decoration: line-through;
font-size: 18px;
margin-right: 50px;
@media ($sm-1679) {
font-size: 16px;
}
@media ($sm-1199) {
margin-right: 40px;
}
@media ($sm-579) {
margin-right: 25px;
}
.woocommerce-Price-amount.amount{
text-decoration: line-through;
}
}
.off-data{
display: inline-flex;
align-items: center;
background-color: $primary;
border-radius: 0 12px 0 12px;
padding: 5px 10px;
font-size: 16px;
color: #111113;
@media ($sm-1679) {
font-size: 14px;
}
@media ($sm-1199) {
font-size: 13px;
padding: 4px 10px;
}
img{
margin-right: 7px;
}
}
}
}
.cart-btn-block{
display: flex;
border-top: 1px solid #1C1C1F;
padding: 40px;
@media ($sm-1679) {
padding: 30px;
}
@media ($sm-1199) {
padding: 20px;
}
@media ($sm-479) {
flex-wrap: wrap;
}
.cart , form{
@media($sm-479){
width: 100%;
}
}
.cart-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
padding: 5px 10px;
border-radius: 25px;
border: solid 1px $primary;
background-color: transparent;
color: $primary;
text-decoration: none;
transition: .3s;
font-size: 18px;
@media ($sm-1679) {
font-size: 14px;
width: 180px;
height: 46px;
}
@media ($sm-1199) {
width: 170px;
height: 45px;
}
@media ($sm-479) {
width: 100%;
height: 50px;
}
&:hover{
opacity: .8;
}
img{
margin-right: 12px;
@media ($sm-1679) {
max-height: 20px;
}
}
&.buy-now-btn{
margin-left: 20px;
color: #fff;
background-color: $primary;
@media ($sm-479) {
margin-left: 0;
margin-top: 15px;
}
}
}
}
.features-sec{
margin-bottom: 50px;
@media ($sm-579) {
flex-wrap: wrap;
}
@media ($sm-1199) {
margin-bottom: 30px;
}
h4{
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
}
.features-block{
@media ($sm-1199) {
width: 50%;
}
@media ($sm-579) {
width: 100%;
}
}
.feat-item{
margin-bottom: 15px;
font-size: 14px;
color: #fff;
@media ($sm-1199) {
font-size: 13px;
}
.icon{
display: inline-block;
width: 28px;
margin-right: 15px;
@media ($sm-1199) {
width: 24px;
margin-right: 5px;
img{
max-width: 20px;
}
}
}
.txt-off{
color: #565662;
}
}
}
.shipping-block{
padding-left: 80px;
@media ($sm-1199) {
padding-left: 40px;
}
@media ($sm-579) {
padding-left: 0;
padding-top: 25px;
}
}
.details-btm-block{
margin-bottom: 40px;
h4{
margin-bottom: 20px;
}
p{
color: #fff;
font-size: 14px;
line-height: 29px;
margin-bottom: 20px;
@media ($sm-1199) {
font-size: 13px;
line-height: 25px;
}
}
}
.block-title-sm{
color: #fff;
font-size: 16px;
font-weight: 600;
}
.table-data-cover{
margin-bottom: 50px;
.table-data-block{
.datas-table{
color: #fff;
font-size: 14px;
width: 100%;
@media ($sm-1199) {
font-size: 13px;
}
tr{
td{
border-bottom: 0.5px solid #373737;
padding: 12px 0;
&:last-child{
padding-left: 10px;
width: 200px;
text-align: right;
}
&:last-child{
@media ($sm-479) {
width: 170px;
}
}
}
}
}
}
}
}
}