724 lines
11 KiB
CSS
724 lines
11 KiB
CSS
|
@charset "utf-8";
|
||
|
/*--
|
||
|
Shop styles
|
||
|
--*/
|
||
|
|
||
|
|
||
|
.product-cat-mains {
|
||
|
width:25%;
|
||
|
float:left;
|
||
|
|
||
|
padding:25px;
|
||
|
|
||
|
}
|
||
|
.product-cat-mains img {
|
||
|
width:100%;
|
||
|
height:auto;
|
||
|
position:relative;
|
||
|
z-index:1;
|
||
|
transform: translateZ(0);
|
||
|
}
|
||
|
.product-cat-img {
|
||
|
overflow:hidden;
|
||
|
}
|
||
|
.product-cat-img a {
|
||
|
position:absolute;
|
||
|
left:50%;
|
||
|
margin:-20px 0 0 -50px;
|
||
|
|
||
|
width:100px;
|
||
|
height:40px;
|
||
|
line-height:40px;
|
||
|
color:#fff;
|
||
|
background:#292929;
|
||
|
text-transform:uppercase;
|
||
|
font-size:9px;
|
||
|
|
||
|
z-index:2;
|
||
|
top:-50%;
|
||
|
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
}
|
||
|
.product-cat-img img , .product-cat-img a {
|
||
|
-webkit-transition: all 400ms linear;
|
||
|
-moz-transition: all 400ms linear;
|
||
|
-o-transition: all 400ms linear;
|
||
|
-ms-transition: all 400ms linear;
|
||
|
transition: all 400ms linear;
|
||
|
}
|
||
|
.product-cat-img:hover a{
|
||
|
top:50%;
|
||
|
}
|
||
|
.product-cat-img:hover img {
|
||
|
opacity:0.6;
|
||
|
-webkit-transform: scale(1.15);
|
||
|
-moz-transform:scale(1.15);
|
||
|
transform: scale(1.15);
|
||
|
}
|
||
|
.product-cat-title {
|
||
|
float:left;
|
||
|
margin-top:30px;
|
||
|
}
|
||
|
.product-cat-title h4 {
|
||
|
float:left;
|
||
|
text-align:left;
|
||
|
font-size:15px;
|
||
|
font-weight:800;
|
||
|
}
|
||
|
.product-cats {
|
||
|
float:left;
|
||
|
padding-left:20px;
|
||
|
}
|
||
|
.product-cats a {
|
||
|
font-size:13px;
|
||
|
font-weight:800;
|
||
|
color:#C1BFC0;
|
||
|
}
|
||
|
.product-price {
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
margin-top:20px;
|
||
|
color:#847E80;
|
||
|
text-align:left;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
}
|
||
|
.product-filter-wrap {
|
||
|
padding-bottom:30px;
|
||
|
margin-bottom:30px;
|
||
|
border-bottom:1px solid #eee;
|
||
|
margin-top:50px;
|
||
|
}
|
||
|
.product-cat-filter{
|
||
|
float:left;
|
||
|
position:relative;
|
||
|
top:25px;
|
||
|
padding-right:20px;
|
||
|
|
||
|
}
|
||
|
.product-cat-filter span {
|
||
|
float:left;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
padding-right:20px;
|
||
|
font-size:14px;
|
||
|
|
||
|
}
|
||
|
.product-cat-filter a {
|
||
|
float:left;
|
||
|
padding-right:20px;
|
||
|
padding-top:4px;
|
||
|
font-weight:700;
|
||
|
font-size:14px;
|
||
|
color:#847E80;
|
||
|
}
|
||
|
.product-cat-filter a:hover {
|
||
|
color:#000;
|
||
|
}
|
||
|
.product-filter-wrap .btn {
|
||
|
float:right;
|
||
|
}
|
||
|
|
||
|
.product-mainfilter {
|
||
|
padding-bottom:60px;
|
||
|
margin-bottom:30px;
|
||
|
border-bottom:1px solid #eee;
|
||
|
margin-top:30px;
|
||
|
display:none;
|
||
|
}
|
||
|
.product-mainfilter-item {
|
||
|
min-height:10px;}
|
||
|
.product-mainfilter-item:before {
|
||
|
content:'';
|
||
|
position:absolute;
|
||
|
height:70px;
|
||
|
margin-top:-15px;
|
||
|
top:50%;
|
||
|
width:1px;
|
||
|
right:0;
|
||
|
background:#eee;
|
||
|
}
|
||
|
.product-mainfilter-item.no-decline:before {
|
||
|
display:none;
|
||
|
}
|
||
|
.product-mainfilter-header {
|
||
|
float:left;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
width:100%;
|
||
|
font-size:14px;
|
||
|
padding-bottom:20px;
|
||
|
text-align:left;
|
||
|
}
|
||
|
.material-list li{
|
||
|
float:left;
|
||
|
text-align:left;
|
||
|
|
||
|
font-weight:700;
|
||
|
font-size:14px;
|
||
|
margin-right:15px;
|
||
|
|
||
|
|
||
|
}
|
||
|
.material-list li a , .size-list li a{
|
||
|
color:#847E80;
|
||
|
}
|
||
|
|
||
|
|
||
|
.colorfilter-list li , .size-list li{
|
||
|
float:left;
|
||
|
margin-right:30px;
|
||
|
}
|
||
|
.colorfilter-list li a {
|
||
|
width:30px;
|
||
|
height:30px;
|
||
|
float:left;
|
||
|
border-radius:100%;
|
||
|
}
|
||
|
.size-list li a {
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
}
|
||
|
|
||
|
|
||
|
.cart-modal {
|
||
|
position:fixed;
|
||
|
top:70px;
|
||
|
bottom:0;
|
||
|
background:#fff;
|
||
|
width:350px;
|
||
|
right:-350px;
|
||
|
z-index:100;
|
||
|
padding:100px 30px;
|
||
|
overflow:auto;
|
||
|
-webkit-transform: translate3d(0,0,0);
|
||
|
}
|
||
|
.cart-modal h3 {
|
||
|
text-align:left;
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
padding:30px 0 20px;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
font-size:24px;
|
||
|
border-top:1px solid #eee;
|
||
|
}
|
||
|
.cart-modal-list li {
|
||
|
float:left;
|
||
|
padding:15px 20px 24px 0;
|
||
|
border-bottom:1px solid #eee;
|
||
|
position:relative;
|
||
|
width:100%;
|
||
|
}
|
||
|
.cart-modal-list li .cart-modal-image {
|
||
|
float:left;
|
||
|
width:60px;
|
||
|
height:60px;
|
||
|
}
|
||
|
.cart-modal-list li .cart-modal-image img , .cart-image img {
|
||
|
width:100%;
|
||
|
height:auto;
|
||
|
transform: translateZ(0);
|
||
|
}
|
||
|
.cart-modal-det {
|
||
|
float:left;
|
||
|
padding-left:40px;
|
||
|
text-align:left;
|
||
|
}
|
||
|
.cart-modal-det a {
|
||
|
font-weight:700;
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
padding-bottom:14px;
|
||
|
font-size:16px;
|
||
|
|
||
|
}
|
||
|
.cart-modal-det .quantity {
|
||
|
color:#999;
|
||
|
}
|
||
|
.cart-modal-list a.remove {
|
||
|
width:20px;
|
||
|
height:20px;
|
||
|
position:absolute;
|
||
|
top:10px;
|
||
|
right:0;
|
||
|
line-height:20px;
|
||
|
}
|
||
|
.cart-modal-total{
|
||
|
margin:30px 0;
|
||
|
padding-bottom:30px;
|
||
|
border-bottom:1px solid #eee;
|
||
|
}
|
||
|
.cart-modal-total-title {
|
||
|
float:left;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
}
|
||
|
.cart-modal-total .woocommerce-Price-amount {
|
||
|
float:right;
|
||
|
font-weight:700;
|
||
|
font-size:15px;
|
||
|
color:#666;
|
||
|
}
|
||
|
.close-cart {
|
||
|
position:absolute;
|
||
|
top:-40px;
|
||
|
right:0;
|
||
|
|
||
|
cursor:pointer;
|
||
|
z-index:20;
|
||
|
}
|
||
|
.close-cart i {
|
||
|
padding-left:10px;
|
||
|
|
||
|
}
|
||
|
.cart-overlay {
|
||
|
position:fixed;
|
||
|
top:70px;
|
||
|
bottom:0;
|
||
|
background:#292929;
|
||
|
width:100%;
|
||
|
right:0;
|
||
|
z-index:99;
|
||
|
-webkit-transform: translate3d(0,0,0);
|
||
|
opacity:0.4;
|
||
|
display:none;
|
||
|
}
|
||
|
.show-cart {
|
||
|
position:fixed;
|
||
|
top:150px;
|
||
|
right:0;
|
||
|
width:40px;
|
||
|
height:40px;
|
||
|
line-height:40px;
|
||
|
background:#292929;
|
||
|
color:#fff;
|
||
|
z-index:20;
|
||
|
cursor:pointer;
|
||
|
-webkit-transform: translate3d(0,0,0);
|
||
|
}
|
||
|
.show-cart span {
|
||
|
position:absolute;
|
||
|
width:20px;
|
||
|
height:20px;
|
||
|
line-height:20px;
|
||
|
bottom:-4px;
|
||
|
left:-4px;
|
||
|
border-radius:100%;
|
||
|
z-index:2;
|
||
|
line-height:20px;
|
||
|
background:#fff;
|
||
|
color:#292929;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
font-size:10px;
|
||
|
}
|
||
|
.show-cart:hover i {
|
||
|
color:#999;
|
||
|
}
|
||
|
.product-nav {
|
||
|
margin:30px 0 0;
|
||
|
padding-bottom:20px;
|
||
|
border-bottom:1px solid #eee;
|
||
|
}
|
||
|
.pr-nav-list{
|
||
|
float:right;
|
||
|
position:relative;
|
||
|
}
|
||
|
|
||
|
.product-container{
|
||
|
margin-top:70px;
|
||
|
}
|
||
|
|
||
|
.product-text {
|
||
|
padding-left:50px;
|
||
|
}
|
||
|
.product-text h2{
|
||
|
padding-bottom:10px;
|
||
|
font-size:24px;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
}
|
||
|
.product-text h3 , .product-text h2 {
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
text-align:left;
|
||
|
}
|
||
|
.product-text h3 {
|
||
|
font-style:italic;
|
||
|
font-weight:700;
|
||
|
color:#666;
|
||
|
}
|
||
|
|
||
|
.pr-opt {
|
||
|
margin:40px 0 30px;
|
||
|
border-top:1px solid #eee;
|
||
|
border-bottom:1px solid #eee;
|
||
|
}
|
||
|
.product-rating , .product-item-price{
|
||
|
float:left;
|
||
|
width:50%;
|
||
|
padding:20px;
|
||
|
font-size:14px;
|
||
|
text-align:left;
|
||
|
}
|
||
|
.product-rating ul , .product-rating span {
|
||
|
float:right;
|
||
|
}
|
||
|
.product-rating span {
|
||
|
margin-left:4px;
|
||
|
}
|
||
|
.product-rating li {
|
||
|
display:inline-block;
|
||
|
padding:1px;
|
||
|
}
|
||
|
.product-item-price {
|
||
|
|
||
|
font-size:24px
|
||
|
}
|
||
|
.product-item-price span {
|
||
|
text-decoration:line-through;
|
||
|
padding-right:10px;
|
||
|
font-size:15px;
|
||
|
opacity:0.6;
|
||
|
}
|
||
|
.product-item p {
|
||
|
max-width:600px;
|
||
|
}
|
||
|
.quantity {
|
||
|
|
||
|
padding:30px 0 20px;
|
||
|
border-top:1px solid #eee;
|
||
|
margin-top:20px;
|
||
|
|
||
|
}
|
||
|
.quantity input {
|
||
|
background:none;
|
||
|
border:none;
|
||
|
-webkit-appearance:none;
|
||
|
float:left;
|
||
|
width:50px;
|
||
|
height:50px;
|
||
|
background:#262526;
|
||
|
font-size:14px;
|
||
|
color:#fff;
|
||
|
cursor:pointer;
|
||
|
line-height:50px;
|
||
|
text-align:center;
|
||
|
}
|
||
|
.quantity input.qty {
|
||
|
background:#eee;
|
||
|
color:#666;
|
||
|
}
|
||
|
.quantity .btn {
|
||
|
margin-top:8px;
|
||
|
margin-left:15px;
|
||
|
|
||
|
}
|
||
|
.wishlist-link {
|
||
|
float:left;
|
||
|
margin-top:50px;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
padding-bottom:10px;
|
||
|
border-bottom:4px solid #eee;
|
||
|
}
|
||
|
.wishlist-link:hover {
|
||
|
border-color:#000;
|
||
|
}
|
||
|
.product-opt-list {
|
||
|
margin:10px 0 20px;}
|
||
|
|
||
|
.product-opt-list li {
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
padding:10px 0;
|
||
|
text-align:left;
|
||
|
font-weight: 800;
|
||
|
font-size:11px;
|
||
|
word-spacing: 0;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
.product-opt-list li span {
|
||
|
float: left;
|
||
|
padding-right: 10px;
|
||
|
color: #999;
|
||
|
}
|
||
|
.single-prd-list {
|
||
|
|
||
|
margin-top:40px;
|
||
|
padding-top:30px;
|
||
|
}
|
||
|
.single-prd-list h3 {
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
text-align:left;
|
||
|
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
font-size:18px;
|
||
|
padding-bottom:30px;
|
||
|
|
||
|
}
|
||
|
.product-nav .pr-cat-title{
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
font-size:14px;
|
||
|
float:left;
|
||
|
padding-right:20px;
|
||
|
position:relative;
|
||
|
top:34px;
|
||
|
}
|
||
|
.product-nav ul {
|
||
|
float:left;
|
||
|
position:relative;
|
||
|
top:38px;
|
||
|
}
|
||
|
.product-nav ul li {
|
||
|
float:left;
|
||
|
margin-right:10px;
|
||
|
}
|
||
|
.product-nav ul li a {
|
||
|
color:#999;
|
||
|
|
||
|
font-weight:700;
|
||
|
}
|
||
|
|
||
|
|
||
|
.cart-header {
|
||
|
padding-bottom:30px;
|
||
|
|
||
|
border-bottom:1px solid #eee;
|
||
|
}
|
||
|
.cart-header h3 {
|
||
|
float:left;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
font-size:22px;
|
||
|
color:#292929;
|
||
|
padding-right:30px;
|
||
|
|
||
|
}
|
||
|
.tottal-items {
|
||
|
float:left;
|
||
|
font-weight:700;
|
||
|
font-size:12px;
|
||
|
position:relative;
|
||
|
top:12px;
|
||
|
}
|
||
|
.sum-total {
|
||
|
float:right;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
font-size:18px;
|
||
|
color:#292929;
|
||
|
|
||
|
position:relative;
|
||
|
top:6px;
|
||
|
}
|
||
|
.sum-total span {
|
||
|
font-weight:700;
|
||
|
font-size:12px;
|
||
|
float:left;
|
||
|
padding-right:40px;
|
||
|
position:relative;
|
||
|
top:6px;
|
||
|
color:#999;
|
||
|
|
||
|
}
|
||
|
.cart {
|
||
|
margin-top:40px;
|
||
|
}
|
||
|
.cart-image{
|
||
|
float:left;
|
||
|
width:20%;
|
||
|
position:relative;
|
||
|
|
||
|
}
|
||
|
.cart-item {
|
||
|
padding:20px 0 0;
|
||
|
margin-bottom:30px;
|
||
|
}
|
||
|
.cart-container{
|
||
|
float:left;
|
||
|
width:80%;
|
||
|
padding:50px 20px 30px 60px;
|
||
|
box-sizing:border-box;
|
||
|
}
|
||
|
.checkout-table {
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
}
|
||
|
.product-name {
|
||
|
float:left;
|
||
|
font-size:18px;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
width:100%;
|
||
|
padding-bottom:10px;
|
||
|
text-align:left;
|
||
|
|
||
|
}
|
||
|
.product-cart-cat{
|
||
|
float:left;
|
||
|
color:#999;
|
||
|
font-weight:700;
|
||
|
text-align:left;
|
||
|
margin-right:10px;
|
||
|
|
||
|
}
|
||
|
.checkout-table input , .checkout-table select {
|
||
|
border:4px solid #eee;
|
||
|
width:50px;
|
||
|
padding-left:10px;
|
||
|
margin-left:10px;
|
||
|
font-weight:800;
|
||
|
}
|
||
|
.checkout-table select {
|
||
|
width:100px;
|
||
|
}
|
||
|
.order-money {
|
||
|
float:right;
|
||
|
font-size:15px;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
font-weight:700;
|
||
|
position:relative;
|
||
|
top:10px;
|
||
|
|
||
|
|
||
|
}
|
||
|
.cart-wrap {
|
||
|
margin:0 0 50px 0;
|
||
|
}
|
||
|
.cart-item-footer {
|
||
|
margin-top:50px;
|
||
|
border-bottom:1px solid #eee;
|
||
|
padding-bottom:40px;
|
||
|
}
|
||
|
.cart-item-footer p {
|
||
|
max-width:350px;
|
||
|
|
||
|
}
|
||
|
.pr-remove {
|
||
|
float:right;
|
||
|
width:40px;
|
||
|
height:40px;
|
||
|
line-height:40px;
|
||
|
background:#292929;
|
||
|
color:#fff;
|
||
|
}
|
||
|
.coupon-form {
|
||
|
float:left;
|
||
|
max-width:400px;
|
||
|
padding-right:100px;
|
||
|
position:relative;
|
||
|
}
|
||
|
.coupon-form input {
|
||
|
float:left;
|
||
|
background-color: #f1f1f1;
|
||
|
font-size: 12px;
|
||
|
height: 55px;
|
||
|
padding: 0 20px;
|
||
|
width: 100%;
|
||
|
border: none;
|
||
|
}
|
||
|
.coupon-form .btn-a{
|
||
|
position:absolute;
|
||
|
top:0;
|
||
|
right:0;
|
||
|
width: 100px;
|
||
|
height: 55px;
|
||
|
cursor:pointer;
|
||
|
background: #292929;
|
||
|
color: #fff;
|
||
|
font-weight: bold;
|
||
|
border: none;
|
||
|
font-size: 10px;
|
||
|
font-family: 'Montserrat', sans-serif;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
.coupon-holder .btn {
|
||
|
float:right;
|
||
|
cursor:pointer;
|
||
|
}
|
||
|
.product-name a , .product-cart-cat , .cart-image a {
|
||
|
-webkit-transition: all 400ms linear;
|
||
|
-moz-transition: all 400ms linear;
|
||
|
-o-transition: all 400ms linear;
|
||
|
-ms-transition: all 400ms linear;
|
||
|
transition: all 400ms linear;
|
||
|
}
|
||
|
.product-name a:hover , .product-cart-cat:hover , .cart-image a:hover {
|
||
|
opacity:0.5;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
@media only screen and (max-width: 1064px) {
|
||
|
.cart-container , .cart-image{
|
||
|
width:100%;
|
||
|
}
|
||
|
.cart-container {
|
||
|
padding:50px 0;
|
||
|
}
|
||
|
.product-text {
|
||
|
padding-left:0;
|
||
|
margin-top:30px;
|
||
|
}
|
||
|
.product-cat-filter {
|
||
|
float:left;
|
||
|
width:100%;
|
||
|
margin-bottom:20px;
|
||
|
}
|
||
|
.product-filter-wrap {
|
||
|
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
.product-mainfilter-item {
|
||
|
margin-bottom:20px;
|
||
|
}
|
||
|
}
|
||
|
@media only screen and (max-width: 768px) {
|
||
|
.product-cat-mains {
|
||
|
width:50%;
|
||
|
}
|
||
|
.product-filter-wrap .btn {
|
||
|
float: left;
|
||
|
margin-top:30px;
|
||
|
}
|
||
|
}
|
||
|
@media only screen and (max-width: 540px) {
|
||
|
.coupon-holder .btn {
|
||
|
float:left;
|
||
|
margin-top:30px;
|
||
|
}
|
||
|
.checkout-table td {
|
||
|
width:100%;
|
||
|
float:left;
|
||
|
margin-bottom:20px;
|
||
|
}
|
||
|
.checkout-table td label {
|
||
|
float:left;
|
||
|
margin-right:30px;
|
||
|
}
|
||
|
#quantity , #dropdown , .order-money , .pr-remove{
|
||
|
float:left;
|
||
|
}
|
||
|
#quantity {
|
||
|
position:relative;
|
||
|
left:-16px;
|
||
|
}
|
||
|
.pr-remove {
|
||
|
margin-top:15px;
|
||
|
}
|
||
|
.product-cat-mains {
|
||
|
width:100%;
|
||
|
}
|
||
|
}
|