.single-product {
.site-main {
div.product {
.onsale {
position: absolute;
top: 0;
left: 15px;
text-transform: uppercase;
font-size: 0.6em;
font-weight: 700;
background: $black_color;
color: $white_color;
line-height: 1.35;
padding: 5px 10px;
text-align: center;
z-index: 9;
margin: 0;
min-width: auto;
min-height: auto;
border-radius: 0;
right: auto;
@include transform(rotate(-90deg));
@include transform-origin(25px 28px);
&::before, &::after {
content: "";
border-right: 10px solid $black_color;
border-bottom: 13px solid transparent;
position: absolute;
top: 0px;
left: -10px;
}
&::after {
top: auto;
bottom: 0;
border-bottom: none;
border-top: 13px solid transparent;
}
}//.onsale
div.summary {
margin-top: 0;
position: relative;
display: flex;
flex-wrap: wrap;
flex: 1;
.product_title {
font-family: $secondary_font;
font-size: 1.8em;
font-weight: 700;
margin-bottom: 5px;
width: 100%;
}//.product_title
.woocommerce-product-rating {
order: -1;
margin-bottom: 15px;
line-height: 1;
.star-rating {
font-size: 0.7em;
margin-top: 0;
float: none;
display: inline-block;
vertical-align: middle;
color: #FFB001;
}//.star-rating
.woocommerce-review-link {
display: inline-block;
vertical-align: middle;
font-size: 0.7em;
color: rgba($black_color, 0.5);
}//.woocommerce-review-link
}//.woocommerce-product-rating
.price {
margin-top: 10px;
font-size: 0.9em;
color: $black_color;
font-weight: 700;
margin-bottom: 0;
del {
opacity: 0.3;
filter: alpha(opacity=30);
margin-right: 15px;
}
ins {
background: none;
}
}//.price
.woocommerce-product-details__short-description {
font-size: 0.8em;
margin-top: 20px;
border-top: 1px solid rgba($black_color, 0.1);
padding-top: 20px;
width: 100%;
p {
margin-top: 0;
margin-bottom: 20px;
}//p
}//.woocommerce-product-details__short-description
.stock {
width: 100%;
margin-top: 0;
margin-bottom: 10px;
}//.stock
form.cart {
width: 100%;
}
table.woocommerce-grouped-product-list {
tbody {
tr {
background: none;
border-bottom: 1px solid rgba($black_color, 0.1);
td {
.button {
background: $black_color;
color: $white_color;
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0;
padding: 10px 15px;
line-height: 1.5;
&:hover {
background: $secondary_color;
}
}//.button
label {
a {
color: $black_color;
font-size: 0.8em;
font-weight: 700;
}//a
}//label
input[type="number"] {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}//input[type="number"]
.woocommerce-Price-amount {
font-size: 0.8em;
font-weight: 600;
}//.woocommerce-Price-amount
del {
opacity: 0.5;
filter: alpha(opacity=50);
margin-right: 5px;
}
ins {
background: none;
}
p.stock.out-of-stock {
margin-top: 0;
margin-bottom: 0;
}
}//td
}//tr
}//tbody
}//table.woocommerce-grouped-product-list
.single_add_to_cart_button {
background: $black_color;
font-size: 0.7em;
padding: 20px 30px;
border-radius: 0;
&:hover {
background: $secondary_color;
}
}//.single_add_to_cart_button
.quantity {
.qty {
padding: 5px;
height: 54px;
width: 5em;
}//.qty
}//.quantity
.yith-wcwl-add-to-wishlist {
display: inline-block;
margin-top: 0;
margin-bottom: 10px;
+ .clear {
display: none;
}
~ .compare.button {
margin-left: 10px;
}
}//.yith-wcwl-add-to-wishlist
.yith-wcwl-add-button {
position: relative;
width: auto;
height: auto;
@include transition(all ease 0.35s);
.add_to_wishlist {
height: 50px;
border-radius: 0;
padding: 0 20px 0 50px;
display: inline-flex;
flex: 1;
flex-direction: column;
justify-content: center;
overflow: hidden;
border: 1px solid $primary_color;
background-image: url('data:image/svg+xml; utf-8, ');
background-repeat: no-repeat;
background-position: 20px 50%;
background-size: 20px;
font-size: 0.7em;
text-transform: uppercase;
font-weight: 700;
color: $black_color;
letter-spacing: 1px;
&:hover {
background-color: $primary_color;
// background-image: url('data:image/svg+xml; utf-8, ');
}
}//.add_to_wishlist
.ajax-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}//.ajax-loading
}//.yith-wcwl-add-button
a.compare {
background-color: transparent;
height: 50px;
border-radius: 0;
margin-bottom: 10px;
padding: 0 20px 0 50px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-self: flex-start;
overflow: hidden;
border: 1px solid $primary_color;
background-image: url('data:image/svg+xml; utf-8, ');
background-repeat: no-repeat;
background-position: 20px 50%;
background-size: 20px;
font-size: 0.7em;
text-transform: uppercase;
font-weight: 700;
color: $black_color;
letter-spacing: 1px;
&:hover {
background-color: $primary_color;
}
}//a
.product_meta {
border-top: 1px solid rgba($black_color, 0.1);
padding-top: 15px;
margin-top: 20px;
font-size: 0.6em;
text-transform: uppercase;
font-weight: 700;
color: $black_color;
letter-spacing: 1px;
width: 100%;
> span {
display: block;
margin-bottom: 10px;
a, span {
display: inline-block;
color: rgba($black_color, 0.5);
margin-left: 10px;
}
a:hover {
color: $secondary_color;
}
}
}//.product_meta
}//div.summary
.woocommerce-tabs {
ul.tabs {
margin: 0;
padding: 0;
text-align: center;
border-bottom: 1px solid rgba($black_color, 0.1);
overflow: visible;
&:before {
position: static;
border-bottom: none;
width: auto;
}
li {
background: none;
font-size: 0.7em;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
border-radius: 0;
border: none;
margin: 0;
padding: 0 10px;
&:before, &:after {
display: none;
}
a {
position: relative;
padding: 10px 40px;
color: rgba($black_color, 0.5);
&:hover {
color: $black_color;
}
&:after {
content: "";
background: $secondary_color;
height: 1px;
width: 0;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
margin: 0 auto;
visibility: hidden;
@include transition(all ease 0.35s);
}
}//a
&.active {
a {
color: $black_color;
&:after {
width: 100%;
visibility: visible;
}
}
}//&.active
}//li
}//ul.tabs
.panel {
margin: 0;
padding: 30px 10% 0 10%;
h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.2em;
font-weight: 700;
}//h2
p {
margin-top: 0;
margin-bottom: 20px;
font-size: 0.8em;
&:last-child {
margin-bottom: 0;
}
}//p
}//.panel
}//.woocommerce-tabs
#reviews {
#comments {
h2 {
margin-bottom: 30px;
}//h2
ol.commentlist {
padding: 0 0 10px 0;
margin-bottom: 40px;
border-bottom: 1px solid rgba($black_color, 0.1);
li {
margin-bottom: 50px;
img.avatar {
width: 50px;
border-radius: 100%;
border: none;
background: none;
padding: 0;
}//img.avatar
.comment-text {
padding: 0 0 0 70px;
border: none;
margin-left: 0;
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
flex-direction: row-reverse;
p.meta {
font-size: 1em;
display: flex;
flex: auto;
margin-bottom: 0;
.woocommerce-review__author {
font-size: 0.7em;
text-transform: capitalize;
color: $black_color;
font-weight: 700;
margin-right: 5px;
}//.woocommerce-review__author
.woocommerce-review__dash {
display: inline-block;
vertical-align: middle;
font-size: 0.7em;
}//.woocommerce-review__dash
time {
font-size: 0.7em;
}//time
}//p.meta
.description {
margin-top: 10px;
width: 100%;
}//.description
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}//p
}//.comment-text
.star-rating {
float: none;
font-size: 12px;
color: #FFB001;
}//.star-rating
}//li
}//ol.commentlist
}//#comments
#respond {
.comment-reply-title {
display: block;
font-size: 1.2em;
line-height: 1.5;
margin-bottom: 10px;
color: $black_color;
a {
color: rgba($black_color, 0.5);
font-size: 0.6em;
letter-spacing: 1px;
&:hover {
color: $secondary_color;
}
}//a
}//.comment-reply-title
.comment-form {
display: flex;
flex: 1;
flex-wrap: wrap;
p {
margin-bottom: 30px;
&.comment-notes {
margin-bottom: 0;
}
textarea {
height: 120px;
font-size: 1em;
font-weight: 400;
}//textarea
&.comment-form-author, &.comment-form-email {
width: 48%;
}
&.comment-form-author {
margin-right: 4%;
}//&.comment-form-author
&.comment-form-cookies-consent {
font-size: 1em;
}
&.form-submit {
margin-bottom: 0;
font-size: 1em;
input[type="submit"] {
background: $black_color;
color: $white_color;
font-size: 0.7em;
border-radius: 0;
padding: 20px 30px;
&:hover {
background: $secondary_color;
}
}//input[type="submit"]
}//&.form-submit
}//p
}//.comment-form
.comment-form-rating {
margin-top: 30px;
label {
font-size: 0.7em;
color: rgba($black_color, 0.5);
margin-bottom: 10px;
display: block;
}//label
p.stars {
margin-bottom: 20px;
font-size: 0.7em;
a {
color: rgba($black_color, 0.7);
}//a
}
}//.comment-form-rating
}//#respond
.comment-notes {
display: block;
color: rgba($black_color, 0.5);
.required {
color: red;
}//.required
}//.comment-notes
}//#reviews
div.images {
.flex-control-thumbs {
padding-top: 5px;
margin-left: 0;
margin-right: 0;
li {
padding: 5px 0;
float: none;
width: 100%;
}
.owl-nav {
[class*="owl-"] {
height: calc(100% - 10px);
transform: none;
top: 8px;
width: 30px;
background-color: rgba($white_color, 0.9);
background-size: 17px;
background-image: url('data:image/svg+xml; utf-8, ');
&:hover {
background-color: rgba($white_color, 0.5);
}
}//[class*="owl-"]
.owl-next {
background-image: url('data:image/svg+xml; utf-8, ');
}//.owl-next
}//.owl-nav
}//.flex-control-thumbs
}//div.images
}//div.product
.related {
margin-top: 60px;
> h2 {
margin-top: 0;
margin-bottom: 50px;
font-family: $secondary_font;
font-size: 1.8em;
}//h2
}//.related
}//.site-main
&.bsp-style-two,
&.bsp-style-three {
.site-main {
div.product {
.onsale {
left: 115px;
}//.onsale
div.images {
display: flex;
flex: 1;
flex-direction: row-reverse;
flex-wrap: wrap;
.flex-viewport {
width: calc(100% - 100px);
margin-left: 20px;
}//.flex-viewport
.flex-control-thumbs {
width: 80px;
padding-top: 0;
position: relative;
li {
display: block;
img {
display: initial;
}
}
.slick-arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba($white_color, 0.7);
height: 30px;
background-image: url('data:image/svg+xml; utf-8, ');
background-repeat: no-repeat;
background-size: 10px;
background-position: center;
cursor: pointer;
z-index: 999;
padding: 0;
font-size: 0;
width: 100%;
&.slick-next {
top: auto;
bottom: 0;
background-image: url('data:image/svg+xml; utf-8, ');
}//&.slick-next
&:hover {
background-color: rgba($white_color, 0.85);
}//&:hover
}//.slick-arrow
}//.flex-control-thumbs
}//div.images
}//div.product
}//.site-main
}//&.bsp-style-two
&.bsp-style-three {
.site-main {
div.product {
.onsale {
left: 15px;
}//.onsale
div.images {
flex-direction: row;
.woocommerce-product-gallery__trigger {
right: 115px;
}//.woocommerce-product-gallery__trigger
.flex-viewport {
margin-left: 0;
margin-right: 20px;
}//.flex-viewport
.flex-control-thumbs {
float: right;
}//.flex-control-thumbs
}//div.images
}//div.product
}//.site-main
}//&.bsp-style-three
}//.single-product
@include media(xs) {
.single-product {
.site-main {
div.product {
.woocommerce-tabs {
ul.tabs {
li {
padding-left: 0;
padding-right: 0;
a {
padding-left: 20px;
padding-right: 20px;
}//a
}//li
}//ul.tabs
.panel {
padding-left: 0;
padding-right: 0;
}//.panel
}//.woocommerce-tabs
#reviews {
#comments {
ol.commentlist {
li {
.star-rating {
margin-bottom: 5px;
}//.star-rating
.comment-text {
flex-direction: column;
align-items: flex-start;
}//.comment-text
}//li
}//ol.commentlist
}//#comments
#respond {
.comment-form {
p {
&.comment-form-author, &.comment-form-email {
width: 100%;
}//&.comment-form-author
&.comment-form-author {
margin-right: 0;
}//&.comment-form-author
}//p
}//.comment-form
}//#respond
}//#reviews
}//div.product
}//.site-main
}//.single-product
}//media(xs)