.banner-section, .products-outer-box{
width: auto;
height: auto;
} .wp-block-column.is-vertically-aligned-center {
background: #fff;
padding: 15px;
position: relative;
top: 50%;
left: 14%;
margin-right: 20%;
}
h4.has-text-align-left{
font: 700 18px var(--font-two);
letter-spacing: 7px;
}
h1.has-text-align-left{
letter-spacing: 1px;
}
p.has-text-align-left{
font-size: 15px !important;
letter-spacing: 0;
}
.wp-block-buttons.alignleft, figure.aligncenter.size-large, .wp-block-buttons.aligncenter {
border: none;
}
.banner-section a.wp-block-button__link, .products-outer-box a.wp-block-button__link{
text-decoration: none;
}
a.wp-block-button__link:hover{
background: #24272e !important;
} .products-outer-box, .products-container{
margin: 0 auto !important;
}
.products-outer-box .products-container li img{
width: 250px!important;
height: 250px !important;
}
.products-container img {
width: auto !important;
}
.products-container .aligncenter img {
width: 100% !important;
height: 430px !important;
margin-top: 5%;
}
.sale-btn a {
position: relative;
top: -50px;
}
h2.has-text-align-left{
margin: 0 0 10px !important;
}
ul.wc-block-grid__products {
margin: 0 0 0 -10px;
}
li.wc-block-grid__product {
border: solid 1px #e8e9e8;
margin: 0 10px;
flex: 1 0 30.33333% !important;
max-width: 30.33333% !important;
}
.wc-block-grid__product-title {
color: #222222;
letter-spacing: 1px;
font-size: 14px !important;
font-weight: 600;
text-transform: uppercase;
text-align: left;
margin: 20px 20px 0px !important;
}
.wc-block-grid__product-price.price {
text-align: left;
margin: 0px 20px 0px !important;
}
.wc-block-grid__product:hover a.wp-block-button__link.add_to_cart_button{
background: url(//wolvescompletehistory.co.uk/wp-content/themes/jewellery-lite/inc/block-patterns/images/cart-icon.png) no-repeat scroll 14px #f8ae57 !important;
border: 1px solid #f8ae57;
}
.wc-block-grid__product:hover .wc-block-grid__product-onsale{
background: #f8ae57;
color: #fff;
border: 1px solid #f8ae57;
}
a.wc-block-grid__product-link {
text-decoration: none !important;
}
span.woocommerce-Price-amount.amount {
color: #9d9d9d;
font-size: 12px;
}
a.wp-block-button__link.add_to_cart_button {
background: url(//wolvescompletehistory.co.uk/wp-content/themes/jewellery-lite/inc/block-patterns/images/cart-icon.png) no-repeat scroll 14px #fff !important;
text-indent: -9999px;
border: solid 1px #e8e9e8;
border-radius: 3px;
cursor: pointer;
position: absolute;
right: 5%;
left: 70%;
bottom: -20px;
}
.wc-block-grid__product-onsale {
letter-spacing: 1px;
color: #a7a8a9;
display: inline-block;
border: solid 1px #e8e9e8;
background-color: #fff;
padding: 2px 12px;
position: absolute;
top: 70%;
left: 18px;
}
.products-outer-box, .products-container{
gap: 0;
}
@media screen and (max-width:425px){
.banner-section .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
flex-basis: 47% !important;
}
.products-outer-box .products-container{
gap: 0;
}
.wp-block-column.is-vertically-aligned-center{
margin-right: 0% !important;
}
}
@media screen and (max-width:767px) {
.wp-block-image, h2.has-text-align-left {
text-align: center;
}
}
@media screen and (max-width:374px) {
.banner-section .alignwide{
gap: 0em !important;
}
}
@media screen and (max-width:781px) and (min-width:426px){
.products-outer-box, .products-container{ gap: 0;
}
.wp-block-columns.alignwide{
flex-basis: 100%!important;
margin: 0;
}
.wp-block-column.is-vertically-aligned-center {
margin: 0;
position: static;
}
.products-outer-box, .products-container .wc-block-grid__product-onsale{
top: 45%;
left: 25px;
}
a.wp-block-button__link.add_to_cart_button{
left: 50%;
}
.wp-block-column.is-vertically-aligned-center{
margin-right: 20% !important;
}
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:first-child{
flex-basis: 33.33% !important;
}
.wp-block-columns.alignwide{
gap: 2em;
}
}
@media screen and (max-width:1024px) {
.banner-section h1 {
font-size: 30px !important;
}
li.wc-block-grid__product {
max-width: 100% !important;
margin: 0 8px 40px 0px;
}
}
@media screen and (max-width:1400px) and (min-width:992px){
.products-outer-box .products-container{
gap: 2em !important;
}
}
@media screen and (max-width:991px) and (min-width:782px){
.products-outer-box .products-container{
gap: 2em !important;
}
}