/**
* Main WooCommerce styles
*/
.woocommerce {
h1.page-title{
display:none;
}
a.remove {
&:hover {
}
}
.quantity{
float:none;
display:block;
margin-bottom:30px;
label{
color:#000;
opacity:0.5;
font-size:14px;
display:block;
margin-bottom:4px;
}
.qty_input{
width:220px;
border:1px solid #e5e5e5;
border-radius:4px;
height:54px;
display:flex;
background:#fff;
}
input{
box-shadow:none;
border:0;
}
.qty_button{
min-width:56px;
text-align: center;
line-height: 52px;
font-size:16px;
}
.qty{
flex:1;
font-size:14px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
}
}
.shop_table{
.quantity{
margin-bottom:0px;
label{
display:none;
}
}
}
/**
* Product Page
*/
div.product {
.summary{
.product_title{
font-size:48px;
line-height:60px;
letter-spacing: -0.04em;
text-transform: none;
}
.price{
font-size:20px;
line-height:28px;
margin-top:24px;
color:#000;
ins{
display:block;
text-decoration:none;
line-height:1;
}
del{
display:block;
line-height:1;
margin-bottom:5px;
}
margin-bottom:60px;
}
.woocommerce-product-details__short-description{
margin-bottom:60px;
}
.cart{
margin-bottom:32px;
.quantity{
float:none;
display:block;
margin-bottom:30px;
label{
color:#000;
opacity:0.5;
font-size:14px;
display:block;
margin-bottom:4px;
}
.qty_input{
width:220px;
border:1px solid #e5e5e5;
border-radius:4px;
height:54px;
display:flex;
}
input{
box-shadow:none;
border:0;
}
.qty_button{
min-width:56px;
text-align: center;
line-height: 52px;
font-size:16px;
}
.qty{
flex:1;
font-size:14px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
}
}
.single_add_to_cart_button{
height:68px;
width:160px;
@include xl{
width:370px;
}
border-radius:34px;
margin-left:0px;
font-size:14px;
background:#cce7ee;
font-weight: 500;
font-size: 16px;
line-height: 28px;
color:#000;
@include transition(all 0.3s);
&:hover{
background:#000;
color:#fff;
}
}
&.grouped_form{
.single_add_to_cart_button{
margin-left:0;
margin-top:10px;
}
.group_table{
td{
vertical-align:middle;
}
.woocommerce-grouped-product-list-item__price{
text-align:right;
font-weight:600;
padding-right:10px;
}
.woocommerce-grouped-product-list-item__quantity{
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
label{
display:none;
}
.quantity{
margin:0px;
.qty_input{
width:160px;
}
}
}
}
}
.variations{
width:100%;
label{
opacity:0.5;
font-weight:normal;
font-size:14px;
}
.reset_variations{
position:absolute;
height:0;
}
.select2-container.select2{
width:100% !important;
}
td{
line-height:38px;
&.value{
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
&.label{
padding: 0;
line-height: 20px;
vertical-align: middle;
padding-left:20px;
}
}
}
.single_variation_wrap{
.single_variation{
margin-bottom:20px;
}
}
.yith-wcwl-add-button{
float:left;
a{
border:1px solid #e5e5e5;
width:68px;
height:68px;
display:inline-block;
border-radius:50%;
margin-left:32px;
background-color:#fff;
@include transition( all 0.3s );
color: #000;
i{
font-size: 24px;
line-height: 68px;
text-align: center;
width: 100%;
}
&:hover{
background-color:#000;
border:1px solid rgb(0,0,0);
color:#fff;
}
}
span{
display:none;
}
}
}
.share-buttons{
span{
opacity:0.5;
font-size:14px;
line-height:24px;
margin-right:8px;
}
a{
margin-right:24px;
}
}
.product_meta{
margin-top:16px;
opacity:0.5;
font-size:14px;
line-height:24px;
> span{
display: table;
table-layout: fixed;
span{
}
a{
}
}
}
margin-bottom:60px;
@include lg{
padding-left:90px;
}
}
div.images{
margin-bottom:60px;
.flex-control-thumbs{
}
ul.flex-direction-nav {
position: absolute;
top: 313px;
z-index: 9999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;
li{
position:relative;
&.flex-nav-prev{
float:left;
}
&.flex-nav-next{
float:right;
}
a{
position:absolute;
top:0;
width:48px;
height:48px;
background:#fff;
border-radius:50%;
&:after{
font-family: 'feather';
font-size:24px;
line-height:48px;
color:#000;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
}
&.flex-next{
right:20px;
&:after{
content:"\e844";
}
}
&.flex-prev{
left:20px;
&:after{
content:"\e843";
}
}
&:focus{
outline:none;
border:none;
}
}
}
}
}
> .onsale{
height:30px;
width:auto;
padding:0 14px;
margin:0;
left:10px;
top:10px;
right:auto;
bottom:auto;
border-radius:15px;
line-height:30px;
min-height:auto;
min-width:auto;
font-size:12px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight:600;
}
.woocommerce-tabs{
ul.tabs{
margin-bottom:0;
padding:0;
border:0;
border-radius:0;
border-bottom:1px solid #e5e5e5;
&:before{
border:0;
}
li{
&:first-child{
}
border:0;
border-radius:0;
background:#fff;
font-weight:400;
text-transform: uppercase;
font-size:14px;
line-height:24px;
padding:14px 20px;
position:relative;
a{
color:rgba(0,0,0,0.5);
font-weight:400;
}
&:before{
display:none;
}
&:after{
display:none;
}
&.active{
a{
color:rgba(0,0,0,1);
}
&:after{
content:"";
width:100%;
position:absolute;
height:2px;
background:#000;
bottom:-1px;
left:0;
display:block;
opacity:1;
}
}
}
&:before{
display:none;
}
}
.woocommerce-Tabs-panel{
padding:32px;
padding-left:0;
padding-right:0;
margin-bottom:0;
padding-bottom:0;
h2{
display:none;
}
#codeless-content{
p:first-child{
margin-top:0 !important;
}
}
}
margin-bottom:60px;
}
.related{
h2{
font-size:24px;
margin-bottom:30px;
}
}
}
/**
* Product loops
*/
.products ul,
ul.products {
&[class*=columns-]{
li.product{
@include rmax(767){
width:100%
}
}
}
&.cl-carousel{
margin-left:-15px;
margin-right:-15px;
width:auto;
display:block;
li.product{
width:100%;
margin:0;
padding:0 15px;
}
}
}
ul.products li.product {
margin-bottom:35px;
.onsale{
height:30px;
width:auto;
padding:0 14px;
margin:0;
left:10px;
top:10px;
right:auto;
bottom:auto;
border-radius:15px;
line-height:30px;
min-height:auto;
min-width:auto;
font-size:12px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight:600;
}
img{
max-width:none;
width:100%;
}
.woocommerce-loop-product__title{
padding: 0;
margin-bottom:4px;
font-size:20px;
}
.price{
font-weight:600;
}
.product_category_title{
display:block;
font-size:10px;
line-height:20px;
}
.cl-woo-product{
&__wrapper{
position:relative;
&:hover{
.cl-woo-product__overlay{
opacity:1;
@include transform( translateY(0px) );
}
}
.image-link{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 100px);
z-index: 9999;
}
}
&__overlay{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.2);
opacity:0;
@include transform( translateY(20px) );
@include transition( all 0.25s );
display:flex;
align-items:center;
justify-content:center;
}
&__overlay-buttons{
height:50px;
position:absolute;
bottom:30px;
display:flex;
align-items:center;
justify-content: center;
z-index:99999;
a{
width:48px;
height:48px;
background:#fff;
border-radius:50%;
margin:0;
margin-right:20px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 0px rgba(0,0,0,0);
@include transition(all 0.3s);
&:last-child{
margin-right:0;
}
backface-visibility: hidden;
svg{
color:#000;
@include transform(translateZ(0) scale(0.8));
@include transition(all 0.3s);
backface-visibility: hidden;
}
&:hover{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
svg{
@include transform(scale(1));
}
}
}
}
&__title-wrapper{
margin-top:16px;
display:flex;
align-items:flex-start;
justify-content: space-between;
.woocommerce-LoopProduct-link{
flex:2;
&:hover{
h2{
color:var(--codeless-primary-color);
}
}
h2{
@include transition(all 0.3s);
}
}
.price{
margin-top:4px;
flex:2;
max-width:110px;
justify-content: flex-end;
display: flex;
flex-direction: column;
align-items:flex-end;
font-size:12px;
line-height:20px;
font-weight:500;
letter-spacing: 0.2em;
color:#000;
ins{
text-decoration: none;
}
}
.woocs_price_code{
flex:1;
justify-content: flex-end;
align-items:flex-end;
display: flex;
flex-direction: column;
}
}
}
&.product-type-variable .price{
flex-direction: row;
}
&.product-type-variable .woocs_price_code{
flex-direction: row;
}
&.product-type-variable .cl-view-details{
display:none;
}
&.product-type-variable .product_type_variable{
border-right:0;
padding-right:0;
margin-right:0;
}
&.product-type-grouped .price{
flex-direction: row;
}
&.product-type-grouped .woocs_price_code{
flex-direction: row;
}
&.product-type-external{
.cl-view-details{
display:none;
}
.button.product_type_external{
text-align:center;
border-right:0;
padding-right:0;
font-size:10px;
}
}
}
/**
* Reviews
*/
#reviews {
#comments{
margin-top:0;
.woocommerce-Reviews-title{
display:block;
font-size:24px;
margin-bottom:20px;
}
ol.commentlist{
padding-left:0;
li{
img.avatar{
width:64px;
height:64px;
border:0;
background:transparent;
border-radius:50%;
}
.comment-text{
margin-left:84px;
border:0;
padding:0;
p.meta{
}
p{
margin-bottom:10px;
}
}
}
}
}
label{
display:initial !important;
}
#reply-title{
font-size: 16px;
font-weight: 600;
}
#submit{
font-size:14px !important;
padding: 15px 35px !important;
background-color:#000 !important;
color:#fff !important;
}
.comment-form-cookies-consent{
display: flex;
align-items: center;
width: 100%;
padding-left: 0;
}
}
/**
* Tables
*/
table.shop_attributes {
border:none;
th{
text-align:left;
border:none !important;
}
td{
border:none !important;
}
tr{
border:none !important;
}
tr:nth-child(even) td, tr:nth-child(even) th{
background:#eee;
}
}
table.shop_table {
th{
font-weight:500 !important;
padding: 20px 12px;
}
td{
padding: 20px 12px;
}
.coupon{
#coupon_code{
width:auto !important;
height:54px !important;
padding-left:20px;
}
.cl-btn{
@include only_responsive{
padding-left:14px;
padding-right:14px;
min-width:auto;
float:left;
}
}
button.button{
height: 54px;
background: #cce7ee;
font-weight: 500;
color: #000;
padding-left: 25px;
padding-right: 25px;
@include transition(all 0.3s);
&:hover{
background:#000;
color:#fff;
}
}
}
.cl-btn{
}
.actions{
> button.button{
height: 54px;
background: #cce7ee;
font-weight: 500;
color: #000;
padding-left: 25px;
padding-right: 25px;
@include transition(all 0.3s);
&:hover{
background:#000;
color:#fff;
}
}
}
img{
width:86px !important;
}
}
table.my_account_orders {
}
table.woocommerce-MyAccount-downloads {
}
/**
* Cart sidebar
*/
ul.cart_list,
ul.product_list_widget {
}
&.widget_shopping_cart,
.widget_shopping_cart {
}
/**
* Forms
*/
form .form-row {
margin:0 0 13px;
input:not([type="submit"]){
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-sizing: border-box;
border-radius: 4px;
height: 54px;
color: #000;
padding: 15px 20px;
font-size: 14px;
line-height: 24px;
}
textarea{
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-sizing: border-box;
border-radius: 4px;
color: #000;
padding: 15px 20px;
font-size: 14px;
line-height: 24px;
}
}
ul#shipping_method {
}
/**
* Order page
*/
ul.order_details {
}
.wc-bacs-bank-details-account-name {
font-weight: 500;
}
/**
* Layered nav widget
*/
.woocommerce-widget-layered-nav-list {
}
.woocommerce-widget-layered-nav-dropdown__submit {
}
.widget_layered_nav_filters ul {
}
/**
* Price filter widget
*/
.widget_price_filter {
}
/**
* Rating Filter Widget
*/
.widget_rating_filter ul {
}
.cart-collaterals .cart_totals{
width:100%;
margin-top:20px;
h2{
margin-top:20px;
margin-bottom:20px;
}
.cl-btn{
float:right;
}
.wc-proceed-to-checkout{
.button{
background: #000;
font-weight: 500;
color: #fff;
}
}
}
nav.woocommerce-pagination{
clear:both;
ul{
list-style: none;
display: inline;
padding: 0;
margin: 0;
border:none;
li{
display: inline-block;
margin-right: 5px;
float:none;
border:none;
span{
font-size: 16px;
font-weight: 500;
width: 40px;
height: 40px;
line-height: 40px;
padding:0;
min-width:none;
border-radius: 50%;
text-align: center;
display: inline-block;
&.current{
color:#000;
}
}
a{
font-size: 16px;
font-weight: 500;
width: 40px;
height: 40px;
line-height: 40px;
padding:0;
min-width:none;
border-radius: 50%;
text-align: center;
display: inline-block;
}
}
}
}
form.checkout_coupon{
@include only_responsive{
.form-row{
width:100%;
}
}
.button{
height: 54px;
background: #cce7ee;
font-weight: 500;
color: #000;
padding-left: 25px;
padding-right: 25px;
@include transition(all 0.3s);
&:hover{
background:#000;
color:#fff;
}
}
}
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
line-height:35px;
}
/**
* Right to left styles
*/
.rtl.woocommerce .price_label,
.rtl.woocommerce .price_label span {
}
.woocommerce-message {
}
.woocommerce-info {
}
.woocommerce-error {
}
/**
* Account page
*/
.woocommerce-account {
}
/**
* Cart/checkout page
*/
.woocommerce-cart,
.woocommerce-checkout,
#add_payment_method {
#customer_details{
.col-1{
max-width:100%;
padding-left:0;
padding-right:0;
}
.col-2{
max-width:100%;
padding-left:30px;
padding-right:0;
}
h3{
font-size:16px
}
}
#order_review_heading{
margin-top:40px;
margin-bottom:20px;
}
}
.woocommerce-checkout{
#payment{
background:#f5f5f5;
}
}
.widget_shopping_cart_content{
padding-left:15px;
padding-right:15px;
.woocommerce-mini-cart{
&.product_list_widget{
margin-top:20px;
margin-bottom:20px;
list-style: none;
padding: 0;
margin-left: 0;
margin-right: 0;
.woocommerce-mini-cart-item{
position:relative;
padding-left:0;
padding-right:0;
a.remove{
position:absolute;
left:0px;
top:50%;
@include transform(translateY(-50%));
}
a:not(.remove){
padding-left:25px;
line-height:1.3;
margin-bottom:5px;
}
img{
float:left;
width:48px;
margin-right:15px;
}
}
}
&__total{
text-align:center;
strong{
color:#fff;
}
}
&__buttons{
margin-top:15px;
margin-bottom:20px;
display:flex;
align-items:center;
justify-content: center;
a{
font-size: 12px !important;
padding: 12px 21px !important;
border-radius: 23px !important;
text-transform: uppercase !important;
background:transparent !important;
border:1px solid rgba(255,255,255,0.6) !important;
color:#fff !important;
margin:0 5px;
&:hover{
background:#fff !important;
border-color:#fff !important;
}
}
}
&__empty-message{
padding:30px;
}
}
}
.cl_woocommerce{
.block-header{
display:flex;
justify-content: space-between;
align-items:center;
text-transform: lowercase;
font-weight:500;
margin-bottom:32px;
i{
margin-left:8px;
}
}
}
.results-wrapper{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
margin-bottom:32px;
}
#place_order{
height: 48px;
background: #000;
font-weight: 500;
color: #fff;
padding-left: 25px;
padding-right: 25px;
@include transition(all 0.3s);
}
.woocommerce a.remove{
&:hover{
background:transparent;
color:#000 !important;
}
}