/****************************** ******************************
Product Detail CSS
****************************** *****************************/
.product-main-section {
padding: 1.5rem 0;
}
@media (min-width: 768px) {
.product-main-section {
padding: 2rem 0;
}
}
@media (min-width: 1024px) {
.product-main-section {
padding: 3.25rem 0;
}
}
/*Product Content Section*/
.product-content-section {
display: flex;
flex-direction: column;
}
/*Product Heading*/
.product-heading-part .product--cat {
margin: 0;
font-size: 1rem;
color: var(--bs-primary-900);
font-weight: 600;
}
@media (min-width: 768px) {
.product-heading-part .product--cat {
margin: 0 0 2px;
font-size: 1.125rem;
}
}
.product-heading-part .product--sku {
margin-top: 0;
color: var(--bs-primary-900);
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
.product-heading-part .product--sku {
margin-bottom: 1rem;
font-size: 1rem;
}
}
body .product-heading-part h1 {
color: var(--bs-neutral-900);
font-weight: 500;
margin: 0 0 1rem;
font-size: 1.75rem;
}
@media (min-width: 1024px) {
body .product-heading-part h1 {
margin: 0 0 0.75rem;
}
}
@media (min-width: 1630px) {
body .product-heading-part h1 {
font-size: 2.0625rem;
}
}
/****** Product Value (This CSS Are Not Use) ******/
/*.product-value-part {
color: var(--bs-primary-900);
font-size: 1rem;
font-weight: 500;
text-align: left;
display: flex;
align-items: center;
margin: 5px 0;
align-items: baseline;
line-height: 1;
}
.product-value-part span:not(.woocommerce-Price-amount):not(.woocommerce-Price-currencySymbol) {
display: inline-block;
margin: 0 10px 0 0;
}
.product-value-part .p_discount {
color: var(--bs-primary-900);
font-weight: 600;
font-size: 1.75rem;
}
.product-value-part .p_original {
color: var(--bs-neutral-500);
text-decoration: line-through;
font-size: 1.75rem;
}
@media (min-width: 576px) {
.product-value-part .p_discount {
font-size: 1.75rem;
}
.product-value-part .p_original {
font-size: 1.75rem;
}
}
@media (min-width: 768px) {
.product-value-part .p_discount {
font-size: 2rem;
}
.product-value-part .p_original {
font-size: 2rem;
}
}
@media (min-width: 1200px) {
.product-value-part .p_discount {
font-size: 2.5rem;
}
.product-value-part .p_original {
font-size: 2.5rem;
}
}
@media (min-width: 1630px) {
.product-value-part {
font-size: 1.125rem;
}
.product-value-part .p_discount {
font-size: 3rem;
}
.product-value-part .p_original {
font-size: 3rem;
}
}*/
/*****/
.woocommerce div.product .product-value-part p.price, .woocommerce div.product .product-value-part span.price {
color: var(--bs-primary-900);
font-size: 1.125rem;
margin: 0;
}
@media(min-width:768px) {
.woocommerce div.product .product-value-part p.price, .woocommerce div.product .product-value-part span.price {
font-size: 1.4375rem;
}
}
@media(min-width:1024px) {
.woocommerce div.product .product-value-part p.price, .woocommerce div.product .product-value-part span.price {
font-size: 1.875rem;
}
}
@media(min-width:1200px) {
.woocommerce div.product .product-value-part p.price, .woocommerce div.product .product-value-part span.price {
font-size: 2.4375rem;
}
}
.woocommerce div.product .product-value-part p.price del, .woocommerce div.product .product-value-part del {
opacity: 1;
font-weight: 300;
font-family: var(--body-theme-font);
}
.woocommerce div.product .product-value-part p.price ins, .woocommerce div.product .product-value-part p.price ins {
text-decoration: none;
font-weight: 500;
font-family: var(--heading-theme-font);
}
/*Woo-Commerce Sigle Variation*/
.woocommerce-variation.single_variation {
padding: 1rem 0;
display: none !important;
}
/*.woocommerce-variation.single_variation .woocommerce-variation-price {
color: var(--bs-primary-900);
font-size: 1rem;
font-weight: 400;
display: flex;
margin: 5px 0;
line-height: 1;
justify-content: center;
}
.woocommerce-variation.single_variation .woocommerce-variation-price span:not(.woocommerce-Price-amount):not(.woocommerce-Price-currencySymbol) {
display: inline-block;
}
.woocommerce-variation.single_variation .woocommerce-variation-price span.p_original {
margin: 0 10px 0 0;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .p_discount {
color: var(--bs-primary-900);
font-weight: 600;
font-size: 1.25rem;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .p_original {
color: var(--bs-neutral-500);
text-decoration: line-through;
font-size: 1.25rem;
}
@media (min-width: 576px) {
.woocommerce-variation.single_variation .woocommerce-variation-price .p_discount {
font-size: 1.5rem;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .p_original {
font-size: 1.5rem;
}
}
@media (min-width: 768px) {
.woocommerce-variation.single_variation .woocommerce-variation-price {
font-size: 1.125rem;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .p_discount {
font-size: 1.75rem;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .p_original {
font-size: 1.75rem;
}
}
@media (min-width: 1024px) {
.woocommerce-variation.single_variation .woocommerce-variation-price .p_discount {
font-size: 2rem;
}
.woocommerce-variation.single_variation .woocommerce-variation-price .p_original {
font-size: 2rem;
}
}*/
/*** Product Variation Select (This CSS Not Use)****/
/*.product-content-section .variations select {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
display: block;
width: 100%;
padding: 0.5rem 2.25rem 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-neutral-500);
background-color: var(--bs-body-bg);
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: var(--bs-border-width) solid var(--bs-neutral-200);
border-radius: 100px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@media (prefers-reduced-motion: reduce) {
.product-content-section .variations select {
transition: none;
}
}
.product-content-section .variations select:focus {
border-color: var(--bs-primary);
outline: 0;
box-shadow: none;
}
.product-content-section .variations select[multiple], .product-content-section .variations select[size]:not([size="1"]) {
padding-right: 0.75rem;
background-image: none;
}
.product-content-section .variations select:disabled {
background-color: var(--bs-secondary-bg);
}
.product-content-section .variations select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--bs-body-color);
}*/
/*Product Info*/
.product-info-part, body .product-info-part p, .product-info-part, body .product-info-part p a {
font-size: 1rem;
color: var(--bs-neutral) !important;
font-weight: 300;
}
.product-content-section .product-info-part .short-desc .shortcontent p {
margin-bottom: 1rem !important;
}
.product-content-section .product-info-part .short-desc a.morelink {
color: var(--bs-primary-500);
text-decoration: none;
font-weight: 500;
position: relative;
display: inline-flex;
align-items: center;
}
.product-content-section .product-info-part .short-desc a.morelink:hover {
color: var(--bs-secondary-500);
text-decoration: none;
}
.product-content-section .product-info-part .short-desc a.morelink::after {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 16px;
display: block !important;
content: "";
width: 16px;
height: 16px;
margin-left: 5px;
}
.product-content-section .product-info-part .short-desc a.morelink:hover::after {
background-image: url("data:image/svg+xml,");
}
.product-content-section .product-info-part .short-desc a.morelink.less::after {
transform: rotate(-180deg);
}
.product-content-section .product-info-part ul {
margin: 2rem 0;
}
@media(min-width:1024px) {
.product-content-section .product-info-part ul {
margin: 2.75rem 0;
}
}
.product-content-section .product-info-part ul li {
color: var(--bs-neutral-600);
list-style: none;
display: flex;
}
.product-content-section .product-info-part ul li strong {
color: var(--bs-neutral-700);
display: inline-block;
width: 30%;
font-weight: 600;
flex-shrink: 0;
}
.product-content-section hr {
color: var(--bs-primary-200);
opacity: 1;
margin: 0;
}
.product-content-section form.cart {
display: flex;
flex-direction: column;
}
.product-content-section .cart, .woocommerce .product-content-section form.cart {
margin: 2rem 0;
}
@media(min-width:1024px) {
.product-content-section .cart, .woocommerce .product-content-section form.cart {
margin: 2.75rem 0;
}
}
.product-content-section .variations_form.cart table.variations tbody tr {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 1rem 0;
flex-wrap: wrap;
}
.product-content-section .variations_form.cart table.variations tbody tr td.label {
width: 32.33% !important;
padding: 0;
vertical-align: middle;
}
.product-content-section .variations_form.cart table.variations tbody tr td.value {
width: 67.66% !important;
}
@media(max-width:374.98px) {
.product-content-section .variations_form.cart table.variations tbody tr td.label, .product-content-section .variations_form.cart table.variations tbody tr td.value {
width: 100% !important;
}
.product-content-section .variations_form.cart table.variations tbody tr td.label {
margin-bottom: 8px;
}
}
.product-content-section .variations_form.cart table.variations tbody tr td.label label {
font-weight: 600;
font-size: 1rem;
color: var(--bs-primary-900);
}
.product-content-section .variations_form.cart table.variations select, .woocommerce .product-content-section .variations_form.cart table.variations select {
min-width: 100%;
margin-right: 0;
border-radius: 25rem;
padding: 0.625rem 1rem;
outline: none;
border: 1px solid var(--bs-neutral-200);
color: var(--bs-neutral-500);
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23536073' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: var(--bs-shades-0);
}
.product-content-section .variations_form.cart table.variations select:focus, .woocommerce .product-content-section .variations_form.cart table.variations select:focus {
border-color: var(--bs-primary-500);
}
/*********/
/*.woocommerce div.product .product-content-section .variations {
margin: 0;
}
.woocommerce div.product .product-content-section .variations th, .woocommerce div.product .product-content-section .variations th label {
font-weight: 600;
width: 200px;
}
.woocommerce div.product .product-content-section .woocommerce-variation.single_variation {
padding: 0;
}
.woocommerce div.product .product-content-section .variations .value ul {
list-style: none;
margin: 4px 0 0;
padding: 0;
}
.woocommerce div.product .product-content-section .variations .value ul li {
margin: 1px 0;
}
.woocommerce div.product .product-content-section .product-btns .btn {
height: 56px;
}
.woocommerce div.product .product-content-section .product-btns .btn svg.icon {
margin-right: 5px;
}
.woocommerce div.product .product-content-section form.cart .single_add_to_cart_button {
display: block;
}
.product-content-section .yith-wcwl-add-button, .woocommerce div.product .product-content-section .yith-wcwl-add-button {
width: 100%;
height: auto;
font-family: var(--body-theme-font);
border-width: 1px;
font-weight: 500;
padding: 0;
font-size: 1rem;
line-height: 1.5;
border-radius: 25rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bs-shades-0);
border: 1px solid var(--bs-primary);
position: relative;
z-index: 2;
color: var(--bs-primary-900);
transition: all 0.25s ease;
}
.product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button, .woocommerce div.product .product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button {
background-color: var(--bs-primary) !important;
}
.product-content-section .yith-wcwl-add-button:hover, .product-content-section .yith-wcwl-add-button:focus, .woocommerce div.product .product-content-section .yith-wcwl-add-button:hover, .woocommerce div.product .product-content-section .yith-wcwl-add-button:focus {
background-color: var(--bs-primary);
}
.product-content-section .yith-wcwl-add-button:hover img, .product-content-section .yith-wcwl-add-button:focus img, .woocommerce div.product .product-content-section .yith-wcwl-add-button:hover img, .woocommerce div.product .product-content-section .yith-wcwl-add-button:focus img, .product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button img, .woocommerce div.product .product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button img {
filter: brightness(100);
}
.product-content-section .yith-wcwl-add-button .add_to_wishlist.single_add_to_wishlist, .woocommerce div.product .product-content-section .yith-wcwl-add-button .add_to_wishlist.single_add_to_wishlist {
position: relative;
width: 100%;
height: 100%;
display: flex;
font-size: 1rem;
font-weight: 500;
align-items: center;
justify-content: center;
background: transparent !important;
padding: 0;
height: 56px;
}
.product-content-section .yith-wcwl-add-button .add_to_wishlist.single_add_to_wishlist i.fa-shopping-basket:before, .woocommerce div.product .product-content-section .yith-wcwl-add-button .add_to_wishlist.single_add_to_wishlist i.fa-shopping-basket:before {
color: var(--bs-primary-900);
}
.product-content-section .yith-wcwl-add-button:hover .add_to_wishlist.single_add_to_wishlist i.fa-shopping-basket:before, .product-content-section .yith-wcwl-add-button:focus .add_to_wishlist.single_add_to_wishlist i.fa-shopping-basket:before, .woocommerce div.product .product-content-section .yith-wcwl-add-button:hover .add_to_wishlist.single_add_to_wishlist i.fa-shopping-basket:before, .woocommerce div.product .product-content-section .yith-wcwl-add-button:focus .add_to_wishlist.single_add_to_wishlist i.fa-shopping-basket:before {
color: var(--bs-shades-0);
}
.product-content-section .yith-wcwl-add-button .add_to_wishlist.single_add_to_wishlist > img, .woocommerce div.product .product-content-section .yith-wcwl-add-button .add_to_wishlist.single_add_to_wishlist > img {
order: 0;
margin-left: 0;
}
.product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button .delete_item, .woocommerce div.product .product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button .delete_item {
background: transparent !important;
position: relative;
width: 100%;
height: 100%;
display: flex;
font-size: 1rem;
font-weight: 500;
align-items: center;
justify-content: center;
background: transparent !important;
padding: 0;
height: 56px;
}
.product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button .delete_item > img, .woocommerce div.product .product-content-section .yith-wcwl-add-to-wishlist.exists .yith-wcwl-add-button .delete_item > img {
order: 0;
margin-left: 0;
}
.product-content-section .yith-wcwl-add-to-wishlist, .woocommerce div.product .product-content-section .yith-wcwl-add-to-wishlist {
margin-top: 10px !important;
margin-right: 0 !important;
}
.prodcut-content-section .yith-wcwl-add-to-wishlist .yith-wcwl-add-button span, .woocommerce div.product .product-content-section .yith-wcwl-add-to-wishlist .yith-wcwl-add-button span {
display: block !important;
color: var(--bs-primary-900) !important;
}
.product-content-section .yith-wcwl-add-button:hover span, .product-content-section .yith-wcwl-add-button:focus span, .woocommerce div.product .product-content-section .yith-wcwl-add-button:hover span, .woocommerce div.product .product-content-section .yith-wcwl-add-button:focus span {
color: var(--bs-shades-0) !important;
}
.prodcut-content-section .yith-wcwl-add-to-wishlist .yith-wcwl-add-button span.separator, .woocommerce div.product .product-content-section .yith-wcwl-add-to-wishlist .yith-wcwl-add-button span.separator {
display: none !important;
}
.yith-wcwl-add-button .view-wishlist {
display: none;
}
.product-content-section .col-form-label {
font-weight: 600;
color: var(--bs-primary-900);
line-height: 2;
}
.product-content-section .col-form-label span {
font-weight: 400;
color: var(--bs-neutral-500);
}
*/
/******Qty****/
.product-content-section .cart label, .woocommerce .product-content-section .cart label {
font-weight: 600;
font-size: 1rem;
color: var(--bs-primary-900);
text-align: left;
}
.woocommerce div.product .product-content-section form.cart .group_table {
margin-bottom: 2rem;
}
@media(min-width:1024px) {
.woocommerce div.product .product-content-section form.cart .group_table {
margin-bottom: 2.75rem;
}
}
.woocommerce div.product .product-content-section form.cart .group_table td {
display: inline;
}
.woocommerce div.product .product-content-section form.cart .group_table td ins {
text-decoration: none;
}
.woocommerce div.product .product-content-section form.cart .group_table td.woocommerce-grouped-product-list-item__label {
padding-left: 0;
}
.woocommerce div.product .product-content-section form.cart .group_table td.woocommerce-grouped-product-list-item__label a {
color: var(--bs-primary-900);
}
.woocommerce .quantity, .quantity {
cursor: pointer;
background: var(--bs-shades-0);
border: 1px solid var(--bs-neutral-200);
color: var(--bs-neutral-400);
border-radius: 100px;
height: 54px;
position: relative;
font-size: 1rem;
font-weight: 400;
text-align: center;
width: auto;
outline: none;
padding: 0 10px;
display: flex;
max-width: 140px;
overflow: hidden;
justify-content: center;
align-items: center;
margin: 0 !important;
}
.quantity .minus, .quantity .plus {
width: 35px;
height: 100%;
text-align: center;
flex-shrink: 0;
font-size: 1.5rem;
font-weight: 400;
color: var(--bs-neutral-400);
line-height: 50px;
}
.prodcut-content-section .quantity input[type='text'], .woocommerce .quantity input[type='text'] {
height: 100%;
border: none;
border-radius: 0;
background: transparent;
color: var(--bs-primary-900);
font-size: 1rem;
font-weight: 400;
text-align: center;
width: 50px;
float: left;
}
.prodcut-content-section .product-info .quantity input[type='button'] {
border: none;
}
/***** Product Image Part ******/
.product-image-part {
display: block;
}
.product-image-part:not(.enabledSlider) .swiper-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.product-image-part:not(.enabledSlider) .swiper-wrapper .swiper-slide {
overflow: hidden;
padding: 0;
position: relative;
width: auto !important;
}
.product-image-part .swiper-wrapper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-image-part .swiper-wrapper .swiper-slide.has-video a .play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 6px 12px rgba(16, 24, 40, 0.10);
border-radius: 50%;
background: var(--bs-shades-0);
width: 64px;
height: 64px;
border: 1px solid var(--bs-neutral-100);
display: flex;
justify-content: center;
align-items: center;
transition: all 0.25s ease;
}
.product-image-part .swiper-wrapper .swiper-slide.has-video a .play-btn:hover {
background: var(--bs-primary-900);
border: 1px solid var(--bs-primary-900);
}
.product-image-part .swiper-wrapper .swiper-slide.has-video a .play-btn svg.icon {
width: 1.5rem;
height: 1.5rem;
color: var(--bs-primary);
}
.product-image-part .swiper-wrapper .swiper-slide.has-video a .play-btn:hover svg.icon {
color: var(--bs-shades-0);
}
.product-image-part:not(.enabledSlider) .swiper-wrapper .swiper-slide:only-child {
grid-area: 1 / 1 / 2 / 3;
}
.product-image-part .swiper-button-next, .product-image-part .swiper-button-prev {
background-color: var(--bs-neutral-200);
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat !important;
width: 32px;
height: 32px;
border-radius: 100px;
color: var(--bs-neutral-500);
overflow: hidden;
padding: 0;
text-align: center;
background-position: 50% 50% !important;
background-size: 9px;
}
.product-image-part .swiper-button-next {
background-image: url("data:image/svg+xml,");
}
.product-image-part .swiper-button-prev {
background-image: url("data:image/svg+xml,");
}
.product-image-part .swiper-button-next:hover {
background-image: url("data:image/svg+xml,");
}
.product-image-part .swiper-button-prev:hover {
background-image: url("data:image/svg+xml,");
}
.product-image-part .swiper-button-next::after, .product-image-part .swiper-button-prev::after {
display: none;
}
.product-image-part .swiper-button-next:hover, .product-image-part .swiper-button-prev:hover {
background-color: var(--bs-primary);
}
.product-image-part .swiper-pagination-fraction {
background: var(--bs-neutral-50);
border: 1px solid var(--bs-neutral-200);
border-radius: 100px;
position: absolute;
top: 15px;
bottom: auto;
right: 15px;
left: auto;
width: auto;
padding: 1px 10px;
color: var(--bs-primary-900);
font-size: 0.875rem;
font-weight: 500;
min-width: 50px;
text-align: center;
}
/*******/
.woocommerce .product-main-section .productSec-left {
position: relative;
}
.woocommerce .product-main-section .productSec-left span.new-label, .woocommerce .product-main-section .productSec-left span.onsale {
border-radius: 25px;
font-size: 0.875rem;
font-weight: 500;
color: var(--bs-shades-0);
width: 50px;
position: absolute;
top: 10px;
z-index: 2;
text-align: center;
padding: 5px 0;
margin: 0;
min-width: initial;
min-height: initial;
line-height: normal;
}
.woocommerce .product-main-section .productSec-left span.new-label {
background: var(--bs-primary-500);
left: 25px;
}
.woocommerce .product-main-section .productSec-left span.onsale {
background: var(--bs-primary-900);
right: 58px;
left: auto;
}
@media (max-width: 991.98px) {
.woocommerce .product-main-section .productSec-left span.onsale {
right: 25px;
}
}
/****************************** ******************************
Product Features
****************************** *****************************/
.product-features-part {
display: block;
margin-top: 2rem;
}
@media (min-width: 576px) {
.product-features-part {
margin-top: 2.5rem;
}
}
.product-features-part ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.product-features-part ul li {
width: 33.33%;
padding: 10px 0;
display: flex;
align-items: center;
}
@media (max-width: 767.98px) {
.product-features-part ul li {
text-align: center;
padding: 10px 5px;
}
}
@media (max-width: 575px) {
.product-features-part ul li {
display: block;
}
}
.product-features-part ul li span.icon {
width: 45px;
display: inline-block;
}
@media (min-width: 768px) {
.product-features-part ul li span.icon {
float: left;
}
}
.product-features-part ul li span.icon img {
width: 30px;
}
.product-features-part ul li span.content {
overflow: hidden;
display: block;
padding-top: 0px;
font-size: 0.875rem;
color: var(--bs-primary-900);
line-height: normal;
}
@media (min-width: 768px) {
.product-features-part ul li span.content {
font-size: 1rem;
}
}
@media (min-width: 1630px) {
.product-features-part ul li span.content {
font-size: 1.125rem;
}
}
@media (max-width: 575px) {
.product-features-part ul li span.content {
margin-top: 0.75rem;
}
}
/****************************** ******************************
Product Features Logos
****************************** *****************************/
.product-featured-logos .accrediations {
margin-top: 2rem;
}
@media (min-width: 1024px) {
.product-featured-logos .accrediations {
margin-top: 3.125rem;
}
}
.product-featured-logos .accrediations h5 {
font-size: 1.125rem;
color: var(--bs-primary-900);
margin-bottom: 1.25rem;
font-weight: 400;
}
.product-featured-logos .accrediations ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.product-featured-logos .accrediations ul li {
margin-right: 1rem;
}
.product-featured-logos .accrediations ul li:last-child {
margin-right: 0;
}
.product-featured-logos .accrediations ul li img {
width: auto;
max-width: 100%;
height: 100%;
max-height: 100px;
}
/****************************** ******************************
Product Specifications Block
****************************** *****************************/
.zdcb-product-specification-block .accordion {
--bs-accordion-btn-icon: url("data:image/svg+xml,");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,");
}
.zdcb-product-specification-block .accordion-item {
border: none;
margin: 0.5rem 0;
}
.zdcb-product-specification-block .accordion-button {
background-color: var(--bs-primary-50);
padding: 1rem;
font-size: 1rem;
font-weight: 500;
color: var(--bs-primary-900);
font-family: var(--primary-theme-font);
}
@media (min-width: 768px) {
.zdcb-product-specification-block .accordion-button {
font-size: 1.125rem;
padding: 1rem 1.5rem;
}
}
.zdcb-product-specification-block .accordion-button:focus {
box-shadow: none;
}
.zdcb-product-specification-block .accordion-button:not(.collapsed) {
color: var(--bs-primary-900);
background-color: var(--bs-primary-50);
box-shadow: none;
}
.zdcb-product-specification-block .accordion-button svg {
margin-right: 1rem;
width: 1.5rem;
height: 1.5rem;
}
.zdcb-product-specification-block .accordion-body {
background-color: var(--bs-primary-50);
padding: 1rem;
}
@media (min-width: 768px) {
.zdcb-product-specification-block .accordion-body {
padding: 1rem 1.5rem;
}
}
body .zdcb-product-specification-block .accordion-body p {
color: var(--bs-neutral-500);
}
body .zdcb-product-specification-block .accordion-body p:first-child {
margin-top: 0;
}
body .zdcb-product-specification-block .accordion-body p:last-child {
margin-bottom: 0;
}
.zdcb-product-specification-block .table {
font-size: 0.875rem;
font-weight: 400;
color: var(--bs-neutral-700);
margin: 0;
}
@media (min-width: 768px) {
.zdcb-product-specification-block .table {
font-size: 1rem;
}
}
.zdcb-product-specification-block .table > :not(caption) > * > * {
padding: 0.8rem 0;
font-weight: 400;
background-color: var(--bs-primary-50);
border-bottom: 0px;
border-top: 1px solid var(--bs-neutral-200);
}
.zdcb-product-specification-block .table-striped > tbody > tr > th {
color: var(--bs-primary-900);
box-shadow: none;
font-weight: 600;
width: 120px;
padding-right: 10px;
}
@media (min-width: 768px) {
.zdcb-product-specification-block .table-striped > tbody > tr > th {
width: 150px;
}
}
@media (min-width: 1200px) {
.zdcb-product-specification-block .table-striped > tbody > tr > th {
width: 200px;
}
}
.zdcb-product-specification-block .table-striped > tbody > tr > td {
color: var(--bs-neutral-600);
box-shadow: none;
font-weight: 400;
}
/****************************** ******************************
Product Category Slider Block
****************************** *****************************/
.zdcb-product-category-slider-block {
--swiper-navigation-sides-offset: -50px;
background-color: var(--bs-primary-50);
}
@media only screen and (min-width: 1300px) {
.zdcb-product-category-slider-block {
--swiper-navigation-sides-offset: -75px;
}
}
.zdcb-product-category-slider-block .swiper[class='swiper'] .swiper-slide {
margin-right: 20px;
}
.zdcb-product-category-slider-block .swiper[class='swiper'] .swiper-slide:last-child {
margin-right: 0;
}
.zdcb-product-category-slider-block .swiper[class='swiper'] .swiper-scrollbar, .zdcb-product-category-slider-block .swiper[class='swiper'] + .swiper-button-prev, .zdcb-product-category-slider-block .swiper[class='swiper'] + .swiper-button-prev + .swiper-button-next {
opacity: 0;
}
.zdcb-product-category-slider-block .swiper[class='swiper'] .swiper-wrapper .swiper-slide {
width: 150px;
margin-right: 20px;
}
.zdcb-product-category-slider-block .swiper .swiper-scrollbar {
background: var(--bs-primary-50);
}
.zdcb-product-category-slider-block .swiper .swiper-scrollbar-drag {
background: var(--bs-neutral-300);
}
.zdcb-product-category-slider-block .swiper-slide > a {
display: block;
padding: 0.75rem;
background: var(--bs-neutral-50);
border: 1px solid var(--bs-neutral-300);
border-radius: 8px;
/*flex-flow: column;*/
/*align-items: center;*/
text-decoration: none;
font-size: 0.9rem;
color: var(--bs-primary-900);
font-weight: 300;
transition: color 0.25s ease-in-out, transform 0.25s ease-in-out, background 0.25s ease-out;
}
.zdcb-product-category-slider-block .swiper-slide > a:hover {
color: var(--bs-neutral-50);
background: var(--bs-neutral-500);
}
.zdcb-product-category-slider-block .swiper-slide > a > img {
width: 140px;
max-height: 140px;
object-fit: contain;
}
.zdcb-product-category-slider-block .card-body {
padding: 1rem 0 2rem;
text-align: center;
}
.zdcb-product-category-slider-block .content {
text-align: center;
}
@media (min-width: 1630px) {
.zdcb-product-category-slider-block .swiper[class='swiper'] .swiper-wrapper .swiper-slide {
width: 150px;
margin-right: 40px;
}
.zdcb-product-category-slider-block .swiper[class='swiper'] .swiper-slide:last-child {
margin-right: 0;
}
.zdcb-product-category-slider-block .content h1 {
font-size: 3.75rem;
line-height: 1;
}
}
.zdcb-product-category-slider-block .content p:last-child {
margin-bottom: 0;
}
.zdcb-product-category-slider-block .swiper-button-prev, .zdcb-product-category-slider-block .swiper-button-next {
top: calc(50% - 48px);
}
@media (max-width: 767.98px) {
.zdcb-product-category-slider-block .swiper-button-prev, .zdcb-product-category-slider-block .swiper-button-next {
display: none;
}
}
.zdcb-product-category-slider-block .swiper-button-prev::after, .zdcb-product-category-slider-block .swiper-button-next::after {
font-size: 20px;
font-weight: 600;
}
.zdcb-product-category-slider-block .swiper-button-next.swiper-button-disabled, .zdcb-product-category-slider-block .swiper-button-prev.swiper-button-disabled {
pointer-events: initial;
opacity: 0;
}
.zdcb-product-category-slider-block .swiper-horizontal > .swiper-scrollbar, .zdcb-product-category-slider-block .swiper-scrollbar.swiper-scrollbar-horizontal {
left: 0;
width: 100%;
}
.zdcb-product-category-slider-block .swiper-button-next, .zdcb-product-category-slider-block .swiper-button-prev {
background-color: var(--bs-primary-100);
background-repeat: no-repeat;
background-position: 50% 50%;
width: 52px;
height: 52px;
border-radius: 100px;
color: var(--bs-primary-900);
overflow: hidden;
padding: 0;
text-align: center;
background-size: auto;
border: 1px solid var(--bs-primary-200);
}
.zdcb-product-category-slider-block .swiper-button-next {
background-image: url("data:image/svg+xml,");
}
.zdcb-product-category-slider-block .swiper-button-prev {
background-image: url("data:image/svg+xml,");
}
.zdcb-product-category-slider-block .swiper-button-next:hover {
background-image: url("data:image/svg+xml,");
}
.zdcb-product-category-slider-block .swiper-button-prev:hover {
background-image: url("data:image/svg+xml,");
}
.zdcb-product-category-slider-block .swiper-button-next::after, .zdcb-product-category-slider-block .swiper-button-prev::after {
display: none;
}
.zdcb-product-category-slider-block .swiper-button-next:hover, .zdcb-product-category-slider-block .swiper-button-prev:hover {
background-color: var(--bs-shades-0);
}
/**
* Show category pills on mobile (<480px)
**/
.zdcb-product-category-slider-block .swiper[class="swiper"] .swiper-wrapper, .zdcb-product-category-slider-block .swiper .swiper-wrapper {
display: grid;
/*flex-flow: row wrap;*/
/*column-count: 2;*/
row-gap: 0.75em;
grid-template-columns: repeat(2, 1fr);
}
.zdcb-product-category-slider-block .swiper[class="swiper"] .swiper-slide, .zdcb-product-category-slider-block .swiper.disabled .swiper-slide {
width: 48%;
margin-right: 0;
}
.zdcb-product-category-slider-block .swiper .swiper-slide .card-img {
display: none;
}
@media only screen and (min-width: 480px) {
.zdcb-product-category-slider-block .swiper[class="swiper"] .swiper-wrapper {
justify-content: center;
}
.zdcb-product-category-slider-block .swiper-slide > a:hover {
color: var(--bs-primary-500);
background: transparent;
transform: scale3d(1.02, 1.02, 1.02);
}
.zdcb-product-category-slider-block .swiper[class="swiper"] .swiper-wrapper, .zdcb-product-category-slider-block .swiper .swiper-wrapper {
display: flex;
flex-flow: row nowrap;
column-count: auto;
gap: 0;
}
.zdcb-product-category-slider-block .swiper .swiper-slide .card-img {
display: block;
}
.zdcb-product-category-slider-block .swiper-slide > a {
display: flex;
flex-flow: column;
align-items: center;
background: transparent;
border: 0;
border-radius: 0;
font-size: 1rem;
}
}
/****************************** ******************************
Product Filter CSS
****************************** *****************************/
main.content > .product-page-section {
display: block;
margin: 3em auto !important;
}
@media (min-width: 1024px) {
main.content > .product-page-section {
margin: 4em auto !important;
}
}
main.content > .zdcb-product-category-slider-block + .product-page-section {
margin-top: 2.4375rem !important;
}
.product-filter-section {
display: block;
}
.product-filter-section .filter-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-filter-section .active-clear {
display: flex;
align-items: center;
}
.product-filter-wrap {
display: flex;
align-items: center;
background: var(--bs-shades-0);
border-radius: 25px;
padding: 5px;
margin-bottom: 1.75rem;
border: none;
}
@media (min-width: 1200px) {
.product-filter-wrap {
border-radius: 100px;
}
}
.product-filter--left {
display: flex;
width: 100%;
}
@media (max-width: 1199.98px) {
.product-filter--left {
flex-wrap: wrap;
}
}
@media (max-width: 1199.98px) {
.product-filter--left .dropdown {
width: calc(25% - 15px);
margin: 5px;
}
.product-filter--left .dropdown .btn {
width: 100%;
}
}
.product-filter--left .dropdown .btn {
padding: 0 15px;
height: 42px;
text-align: left;
min-width: 100px;
margin: 0 2px;
font-weight: 400;
position: relative;
}
@media (min-width: 1630px) {
.product-filter--left .dropdown .btn {
min-width: 115px;
}
}
.product-filter--left .dropdown > .btn {
min-width: 170px;
height: 50px;
}
.product-filter--left .dropdown > .btn span {
padding-right: 20px;
color: var(--bs-neutral);
font-weight: 400;
}
.product-filter--left .dropdown > .btn span b {
font-weight: 400;
color: var(--bs-primary-400);
}
.product-filter--left .dropdown .btn.dropdown-toggle::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='1258 0 24 24'%3e%3cpath fill='none' stroke='%230B3A41' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1264 9L1270 15L1276 9'/%3e%3c/svg%3e");
background-repeat: no-repeat;
height: 18px;
width: 18px;
border: none;
position: absolute;
top: calc(50% - 7px);
right: 12px;
}
@media (min-width: 1200px) {
.product-filter--left .dropdown > .btn {
min-width: 200px;
}
.product-filter--left .dropdown .btn.dropdown-toggle::after {
right: 20px;
}
}
.product-filter--left .dropdown:hover .btn.dropdown-toggle::after, .product-filter--left .dropdown:active .btn.dropdown-toggle::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='1258 0 24 24'%3e%3cpath fill='none' stroke='%230B3A41' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1264 9L1270 15L1276 9'/%3e%3c/svg%3e");
}
.product-filter--left .dropdown .btn.btn-outline-secondary {
--bs-btn-color: var(--bs-primary-900);
--bs-btn-bg: var(--bs-shades-0);
--bs-btn-border-color: var(--bs-neutral-200);
--bs-btn-hover-color: var(--bs-primary-900);
--bs-btn-hover-bg: var(--bs-primary-100);
--bs-btn-hover-border-color: var(--bs-primary-900);
--bs-btn-active-color: var(--bs-primary-900);
--bs-btn-active-bg: var(--bs-primary-100);
--bs-btn-active-border-color: var(--bs-primary-900);
}
.product-filter--left .dropdown .dropdown-menu {
background: var(--bs-shades-0);
border: 1px solid var(--bs-neutral-200);
box-shadow: 0px 4px 8px 0px rgba(16, 24, 40, 0.10);
border-radius: 8px;
padding: 0;
font-size: 1rem;
color: var(--gray);
margin-top: 6px !important;
min-width: 328px;
z-index: 2;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body {
padding: 10px;
max-height: 360px;
overflow-y: auto;
overflow-x: hidden;
}
body .filter-modal.modal {
padding: 0 0 !important;
}
.filter-modal .accordion-body .dropdown-body {
list-style: none;
padding: 8px 0;
max-height: auto;
overflow-y: auto;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body li, .filter-modal .accordion-body .dropdown-body li {
background: var(--bs-shades-0);
padding: 10px 14px;
margin: 2px 0;
}
/*Product Filter Checkbox CSS*/
.product-filter--left .dropdown-menu .checkbox-custom {
display: none;
opacity: 0;
position: absolute;
cursor: pointer;
}
.product-filter--left .dropdown-menu .checkbox-custom-label {
color: var(--bs-primary-900);
font-size: 1rem;
font-weight: 400;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: block;
min-height: 18px;
overflow: hidden;
line-height: normal;
}
.product-filter--left .dropdown-menu .checkbox-custom-label span {
overflow: hidden;
display: block;
padding-left: 8px;
padding-right: 20px;
}
.product-filter--left .dropdown-menu .checkbox-custom-label span + b {
position: absolute;
right: 0;
top: 0;
font-size: 0.875rem;
color: var(--bs-neutral-400);
font-weight: 400;
}
.product-filter--left .dropdown-menu .checkbox-custom + .checkbox-custom-label::before {
background-color: transparent;
border: 2px solid var(--bs-primary-300);
border-radius: 2px;
content: "";
float: left;
height: 16px;
width: 16px;
margin-right: 5px;
text-align: center;
margin-top: 2px;
}
.product-filter--left .dropdown-menu .checkbox-custom:checked + .checkbox-custom-label::before {
border-color: var(--bs-primary-500);
background-color: var(--bs-primary-500);
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 12px;
}
/**/
.filter-modal .accordion-body .dropdown-body li {
padding: 10px 1rem;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body li:hover, .filter-modal .accordion-body .dropdown-body li:hover {
background: var(--bs-neutral-50);
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body li.active, .filter-modal .accordion-body .dropdown-body li.active {
background: var(--bs-neutral-50);
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body li.disabled, .filter-modal .accordion-body .dropdown-body li.disabled {
pointer-events: none;
opacity: 0.2;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-footer {
display: flex;
padding: 10px;
border-top: 1px solid var(--bs-neutral-200);
justify-content: space-between;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-footer .btn {
text-align: center;
margin: 0;
width: 48%;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-footer .btn svg {
width: 20px;
height: 20px;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-footer .btn span {
padding-right: 0;
}
/*Price Range Slider*/
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body, .filter-modal .accordion-body .dropdown-body.price-slider-body {
padding: 10px 20px;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .dropdown-header, .filter-modal .accordion-body .dropdown-body.price-slider-body .dropdown-header {
padding: 0 0 5px;
font-size: 1rem;
color: var(--bs-neutral-900);
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body small.price-min-max, .filter-modal .accordion-body .dropdown-body.price-slider-body small.price-min-max {
font-size: 0.875rem;
color: var(--bs-neutral-400);
display: block;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-slider, .filter-modal .accordion-body .dropdown-body.price-slider-body .price-slider {
display: block;
margin: 18px 0 0;
text-align: center;
height: 55px;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-range-slider, .filter-modal .price-range-slider {
display: none;
height: 0;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle, .filter-modal .accordion-body .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle {
margin-left: -.6em;
border-radius: 50%;
width: 24px;
height: 24px;
top: -8px;
background: var(--bs-shades-0) !important;
border-color: var(--bs-neutral-500) !important;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle span, .filter-modal .accordion-body .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle span {
font-size: 1rem;
color: var(--bs-neutral-500);
font-weight: 500;
position: absolute;
bottom: -30px;
font-family: var(--body-theme-font);
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle span.minimum-slider, .filter-modal .accordion-body .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle span.minimum-slider {
left: 0;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle span.maximum-slider, .filter-modal .accordion-body .dropdown-body.price-slider-body .price-slider #slider-range.ui-slider-horizontal .ui-slider-handle span.maximum-slider {
right: 0;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-slider .ui-widget-content, .filter-modal .accordion-body .dropdown-body.price-slider-body .price-slider .ui-widget-content {
background: var(--bs-neutral-300);
border: 0 !important;
border-radius: 20px;
height: 8px;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.price-slider-body .price-slider #slider-range .ui-widget-header, .filter-modal .accordion-body .dropdown-body.price-slider-body .price-slider #slider-range .ui-widget-header {
background: var(--bs-primary);
height: 8px;
}
/*Colour Filter*/
.product-filter--left .dropdown .dropdown-menu .dropdown-body.pa_colour li, .filter-modal .accordion-body .dropdown-body.pa_colour li {
padding: 16px 14px;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.pa_colour .checkbox-custom-label, .product-filter--left .dropdown .dropdown-menu .dropdown-body.pa_colour .form-check-label, .filter-modal .accordion-body .dropdown-body.pa_colour .checkbox-custom-label, .filter-modal .accordion-body .dropdown-body.pa_colour .form-check-label {
overflow: inherit;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.pa_colour .checkbox-custom + .checkbox-custom-label::before, .product-filter--left .dropdown .dropdown-menu .dropdown-body.pa_colour .form-check-input + .form-check-label::before, .filter-modal .accordion-body .dropdown-body.pa_colour .checkbox-custom + .checkbox-custom-label::before, .filter-modal .accordion-body .dropdown-body.pa_colour .form-check-input + .form-check-label::before {
height: 32px;
width: 32px;
border: 0;
box-shadow: 0 0 0 2px var(--bs-neutral-300), 0 0 0 5px white inset;
border-radius: 100px;
margin-top: -4px;
}
.product-filter--left .dropdown .dropdown-menu .dropdown-body.pa_colour .checkbox-custom:checked + .checkbox-custom-label::before, .product-filter--left .dropdown .dropdown-menu .dropdown-body.pa_colour .form-check-input:checked + .form-check-label::before, .filter-modal .accordion-body .dropdown-body.pa_colour .checkbox-custom:checked + .checkbox-custom-label::before, .filter-modal .accordion-body .dropdown-body.pa_colour .form-check-input:checked + .form-check-label::before {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 16px;
background-position: 50% 50%;
border: 0;
box-shadow: 0 0 0 2px var(--bs-primary), 0 0 0 5px white inset;
}
/*Product Filter Right*/
.product-filter--right {
display: flex;
margin-left: auto;
margin-right: 20px;
flex-shrink: 0;
}
.resetfilter {
font-weight: 500;
color: var(--bs-neutral-600);
display: flex;
align-items: center;
text-decoration: none;
margin-bottom: 1rem;
}
.resetfilter svg {
width: 24px;
height: 24px;
margin-right: 12px;
}
.resetfilter:hover {
color: var(--bs-neutral-900);
}
/*Active Filters*/
.product-active-filter {
display: block;
margin-bottom: 1.75rem;
}
.product-active-filter h6 {
font-size: 1rem;
color: var(--bs-shades-100);
}
@media (min-width: 1200px) {
.product-active-filter h6 {
font-size: 1.125rem;
}
}
.product-active-filter ul {
list-style: none;
margin: 0 -4px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.product-active-filter ul li {
margin: 4px;
}
.product-active-filter ul li .btn {
border-color: var(--bs-neutral-900);
color: var(--bs-neutral-900);
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
font-weight: 400;
}
.product-active-filter .btn.btn-outline-secondary {
--bs-btn-color: var(--bs-primary-900);
--bs-btn-bg: var(--bs-shades-0);
--bs-btn-border-color: var(--bs-primary-900);
--bs-btn-hover-color: var(--bs-primary-900);
--bs-btn-hover-bg: var(--bs-primary-100);
--bs-btn-hover-border-color: var(--bs-primary-900);
--bs-btn-active-color: var(--bs-primary-900);
--bs-btn-active-bg: var(--bs-primary-100);
--bs-btn-active-border-color: var(--bs-primary-900);
}
.product-active-filter ul li .btn .icon {
width: 18px;
height: 18px;
}
.product-active-filter ul li .btn span {
padding: 0 12px;
}
/*Product Sorting*/
.product-sorting {
display: flex;
align-items: center;
margin-bottom: 1.75rem;
width: 100%;
}
.product-sorting .sortby {
margin-left: auto;
}
.product-sorting .sortby .form-select {
min-width: 170px;
height: 50px;
}
@media (min-width: 1200px) {
.product-sorting .sortby .form-select {
min-width: 200px;
}
}
.product-sorting .sortby .form-select, .product-mobile-filter-section .sortby .form-select {
padding: 0.5rem 2.25rem 0.5rem 1.15rem;
background-position: right 1rem center;
background-color: var(--bs-shades-0);
--bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230B3A41' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
color: var(--bs-neutral);
border: var(--bs-border-width) solid var(--bs-neutral-200);
border-radius: 100px;
box-shadow: none !important;
}
.product-sorting .sortby .form-select:focus, .product-mobile-filter-section .sortby .form-select:focus, .product-sorting .sortby .form-select:active, .product-mobile-filter-section .sortby .form-select:active, .product-sorting .sortby .form-select:hover, .product-mobile-filter-section .sortby .form-select:hover {
color: var(--bs-primary-900);
background-color: var(--bs-primary-100);
border-color: var(--bs-primary-900);
}
.product-showing {
margin-left: auto;
color: var(--bs-neutral-500);
}
/*Mobile Filters*/
.product-mobile-filter-section .btn:not(.modal-footer .btn) {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 20px;
font-weight: 400;
--bs-btn-color: var(--bs-neutral);
--bs-btn-bg: var(--bs-shades-0);
--bs-btn-border-color: var(--bs-neutral-200);
--bs-btn-hover-color: var(--bs-primary-900);
--bs-btn-hover-bg: var(--bs-primary-100);
--bs-btn-hover-border-color: var(--bs-primary-900);
--bs-btn-active-color: var(--bs-primary-900);
--bs-btn-active-bg: var(--bs-primary-100);
--bs-btn-active-border-color: var(--bs-primary-900);
}
.product-mobile-filter-section .btn .icon:not(.modal-footer .btn .icon) {
width: 20px;
height: 20px;
}
.product-mobile-filter-section .product-showing {
text-align: center;
font-size: 0.75rem;
margin-top: 15px;
}
.product-mobile-filter-section .product-filter--right {
text-align: center;
margin: 1rem 0 0;
}
.product-mobile-filter-section .product-filter--right .resetfilter.clear-button {
display: inline-flex;
}
/*Filter Modal for Mobile*/
body .filter-modal.modal .modal-header {
border: 0;
padding: 2rem 1rem;
position: inherit;
}
body .filter-modal .modal-dialog {
margin: 0;
padding: 0;
}
body .filter-modal .modal-dialog-centered {
min-height: calc(100% - 1rem * 2);
}
.filter-modal .modal-header .btn-close {
background-color: var(--bs-neutral-200);
border: 2px solid var(--bs-neutral-300);
width: 20px;
height: 20px;
border-radius: 100px;
outline: none;
box-shadow: none;
position: initial;
--bs-btn-close-opacity: 0.75;
--bs-btn-close-hover-opacity: 1;
}
.filter-modal .modal-body {
padding: 0 1rem;
}
.filter-modal .modal-title {
font-size: 1.45rem !important;
color: var(--bs-primary-900);
font-weight: 600;
}
.filter-modal .modal-footer {
display: flex;
padding: 30px 1rem;
border-top: 1px solid var(--bs-neutral-200);
justify-content: space-between;
}
.filter-modal .modal-footer .btn {
text-align: center;
margin: 0;
width: 48%;
min-height: 52px;
}
.filter-modal .modal-footer .btn svg {
width: 20px;
height: 20px;
}
.filter-modal .modal-footer .btn span {
padding-right: 0;
}
/**/
.filter-modal .accordion-item {
border-bottom: 1px solid var(--bs-neutral-200);
}
.filter-modal .accordion-item:first-child {
border-top: 1px solid var(--bs-neutral-200);
}
.filter-modal .accordion-item:last-child {
border-bottom: 1px solid var(--bs-neutral-200);
}
.filter-modal .accordion-item i {
width: 22px;
height: 22px;
margin-right: 15px;
}
.filter-modal .accordion-item i img {
width: 100%;
height: 100%;
}
.filter-modal .accordion-button {
background-color: transparent;
padding: 1rem 1rem;
font-size: 1.125rem;
font-weight: 300;
color: var(--bs-neutral-500);
}
.filter-modal .accordion-button span b, .filter-modal .accordion-button span.mobile-clear {
font-size: 1.125rem;
font-weight: 400;
color: var(--bs-neutral-400);
}
.filter-modal .accordion-button:focus {
box-shadow: none;
}
.filter-modal .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B3A41'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-size: 16px;
background-position: center;
}
.filter-modal .accordion-button:not(.collapsed) {
color: var(--bs-neutral-500);
background-color: transparent;
box-shadow: none;
}
.filter-modal .accordion-body {
background-color: transparent;
padding: 0 0;
}
.filter-modal .accordion-body .checkbox-custom-label span, .filter-modal .accordion-body .form-check-label span {
font-size: 1rem;
color: var(--bs-neutral-900);
}
.filter-modal .accordion-body .checkbox-custom-label b, .filter-modal .accordion-body .form-check-label b {
color: var(--bs-neutral-400);
font-weight: 400;
}
.filter-modal .accordion-body .checkbox-custom + .checkbox-custom-label::before, .filter-modal .accordion-body .form-check-input + .form-check-label::before {
margin-top: 1px;
}
/****************************** ******************************
Product Listing Section
****************************** *****************************/
.product-main-listing ul, .woocommerce .product-main-listing ul.products {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: 0 -12px;
}
@media (max-width: 575.98px) {
.product-main-listing ul li, .woocommerce .product-main-listing ul.products li.product {
margin: 0 -8px;
}
}
.product-main-listing ul::after, .product-main-listing ul::before, .woocommerce .product-main-listing ul.products::after, .woocommerce .product-main-listing ul.products::before {
display: none;
}
.product-main-listing ul li, .woocommerce .product-main-listing ul.products li.product {
float: left;
width: 25%;
padding: 0 12px;
margin: 0 0 1.75rem;
clear: none;
position: relative;
}
@media (max-width: 1023.98px) {
.product-main-listing ul li, .woocommerce .product-main-listing ul.products li.product {
width: 33.33%;
}
}
@media (max-width: 767.98px) {
.product-main-listing ul li, .woocommerce .product-main-listing ul.products li.product {
width: 50%;
}
}
@media (max-width: 575.98px) {
.product-main-listing ul li, .woocommerce .product-main-listing ul.products li.product {
padding: 0 8px;
}
}
.product-main-listing ul li.first, .woocommerce .product-main-listing ul.products li.product.first {
clear: none;
}
/**** Product Item Box *****/
.product-item-box {
position: relative;
z-index: 1;
cursor: pointer;
/*overflow: hidden;*/
}
.product-item-box .product-pic {
background: var(--bs-neutral-50);
border: 1px solid var(--bs-primary-100);
border-radius: 0;
display: block;
position: relative;
height: 100%;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
.product-item-box .product-pic > a {
display: block;
position: relative;
height: 100%;
width: 100%;
padding-top: 100%;
}
.product-item-box .product-pic img, .woocommerce ul.products li.product .product-item-box a img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
display: inline-block;
margin: 0;
max-height: 100%;
transition: transform 0.75s ease-out;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
@media (min-width: 480px) {
.product-item-box:hover .product-pic img, .woocommerce ul.products li.product .product-item-box:hover a img {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-o-transform: scale(1.15);
transform: scale(1.15);
}
}
.product-item-box .product-pic .product-hover-img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.product-item-box .product-pic:hover .product-hover-img {
visibility: visible;
}
/**** Product New / Out of Stock and Sale Lable *****/
.product-item-box .product-pic span.new-label, .woocommerce ul.products li.product .product-item-box .new-label, .product-item-box .product-pic span.onsale, .woocommerce ul.products li.product .product-item-box .onsale, .product-item-box .product-pic span.outofstock-label, .woocommerce ul.products li.product .product-item-box .outofstock-label {
border-radius: 25px;
font-size: 0.775rem;
font-weight: 500;
color: var(--bs-shades-0);
width: 50px;
position: absolute;
top: 10px;
z-index: 2;
text-align: center;
padding: 5px 0;
margin: 0;
min-width: initial;
min-height: initial;
line-height: normal;
}
.product-item-box .product-pic span.new-label, .woocommerce ul.products li.product .product-item-box .new-label {
background: var(--bs-primary-500);
left: 10px;
}
.product-item-box .product-pic span.onsale, .woocommerce ul.products li.product .product-item-box .onsale {
background: var(--bs-primary-900);
right: 10px;
}
.product-item-box .product-pic span.outofstock-label, .woocommerce ul.products li.product .product-item-box .outofstock-label {
background: var(--bs-secondary);
right: 10px;
width: 90px;
}
@media (min-width: 576px) {
.product-item-box .product-pic span.new-label, .woocommerce ul.products li.product .product-item-box .new-label, .product-item-box .product-pic span.onsale, .woocommerce ul.products li.product .product-item-box .onsale, .product-item-box .product-pic span.outofstock-label, .woocommerce ul.products li.product .product-item-box .outofstock-label {
font-size: 0.875rem;
}
.product-item-box .product-pic span.outofstock-label, .woocommerce ul.products li.product .product-item-box .outofstock-label {
width: 110px;
}
}
@media (min-width: 768px) {
.product-item-box .product-pic span.new-label, .woocommerce ul.products li.product .product-item-box .new-label, .product-item-box .product-pic span.onsale, .woocommerce ul.products li.product .product-item-box .onsale, .product-item-box .product-pic span.outofstock-label, .woocommerce ul.products li.product .product-item-box .outofstock-label {
top: 15px;
}
.product-item-box .product-pic span.new-label, .woocommerce ul.products li.product .product-item-box .new-label {
left: 15px;
}
.product-item-box .product-pic span.onsale, .woocommerce ul.products li.product .product-item-box .onsale {
right: 15px;
}
.product-item-box .product-pic span.outofstock-label, .woocommerce ul.products li.product .product-item-box .outofstock-label {
right: 15px;
}
}
.woocommerce-variation-availability .stock.in-stock, .stock.in-stock, .woocommerce .product-content-section .stock.in-stock, .woocommerce .product-content-section .stock {
color: var(--bs-neutral-600) !important;
font-size: 0.875rem;
font-weight: 400;
padding: .75rem;
text-align: left;
}
.woocommerce .product-content-section .stock.in-stock, .woocommerce .product-content-section p.stock {
padding-left: 0 !important;
}
.woocommerce-variation-availability .stock.out-of-stock, .stock.out-of-stock, .woocommerce .product-content-section .stock.out-of-stock {
background: var(--bs-secondary-50);
border: 1px solid var(--bs-secondary-50);
color: var(--bs-secondary) !important;
padding: .75rem;
text-align: center;
font-size: 0.875rem;
font-weight: 400;
border-radius: 25rem;
}
/*** Product Content ***/
.product-item-box .product-content {
display: flex;
padding: 1rem 0 0;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
@media (min-width: 1024px) {
.product-item-box .product-content {
padding: 1.25rem 0 0;
}
}
.product-item-box .product-content h2.woocommerce-loop-product__title, .woocommerce ul.products li.product .product-item-box .product-content .woocommerce-loop-product__title {
font-size: 1.125rem;
line-height: normal;
color: var(--bs-primary-900);
font-weight: 500;
margin: 0;
padding: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
}
.product-item-box .product-content h2.woocommerce-loop-product__title a, .woocommerce ul.products li.product .product-item-box .product-content .woocommerce-loop-product__title a {
color: var(--bs-primary-900);
display: block;
text-decoration: none;
}
@media (min-width: 768px) {
.product-item-box .product-content h2.woocommerce-loop-product__title, .woocommerce ul.products li.product .product-item-box .product-content .woocommerce-loop-product__title {
font-size: 1.25rem;
}
}
@media (min-width: 1024px) {
.product-item-box .product-content h2.woocommerce-loop-product__title, .woocommerce ul.products li.product .product-item-box .product-content .woocommerce-loop-product__title {
font-size: 1.4375rem;
}
}
/**** Product Price *****/
.product-item-box .product-content .product-price {
margin: 4px 0 0;
min-height: 28px;
}
.product-item-box .product-content .product-price .price, .woocommerce ul.products li.product .product-item-box .product-content .product-price .price {
color: var(--bs-primary);
display: block;
font-weight: 500;
margin-bottom: 0;
font-size: 0.875rem;
line-height: normal;
font-family: var(--heading-theme-font);
}
.product-item-box .product-content .product-price .price del, .woocommerce ul.products li.product .product-item-box .product-content .product-price .price del {
text-decoration: line-through;
margin-right: 3px;
opacity: 1;
color: var(--bs-primary);
}
.product-item-box .product-content .product-price .price ins, .woocommerce ul.products li.product .product-item-box .product-content .product-price .price ins {
text-decoration: none;
font-weight: 500;
background: transparent;
}
.product-item-box .product-content .woocommerce-Price-amount bdi, .woocommerce ul.products li.product .price .woocommerce-Price-amount .price bdi {
color: var(--bs-primary);
font-weight: 500;
font-size: 0.875rem;
font-family: var(--heading-theme-font);
}
@media (min-width: 576px) {
.product-item-box .product-content .product-price .price, .woocommerce ul.products li.product .product-item-box .product-content .product-price .price {
font-size: 1rem;
}
.product-item-box .product-content .woocommerce-Price-amount bdi, .woocommerce ul.products li.product .price .woocommerce-Price-amount .price bdi {
font-size: 1rem;
}
}
@media (min-width: 768px) {
.product-item-box .product-content .product-price .price, .woocommerce ul.products li.product .product-item-box .product-content .product-price .price {
font-size: 1.1875rem;
}
.product-item-box .product-content .woocommerce-Price-amount bdi, .woocommerce ul.products li.product .price .woocommerce-Price-amount .price bdi {
font-size: 1.1875rem;
}
}
.product-content-section .cart .calculate-price, .woocommerce div.product .calculate-price {
background: var(--bs-secondary-100);
padding: 1.25rem;
margin: 2rem 0;
}
@media(min-width:767px) {
.product-content-section .cart .calculate-price, .woocommerce div.product .calculate-price {
padding: 1.75rem;
}
}
@media(min-width:1024px) {
.product-content-section .cart .calculate-price, .woocommerce div.product .calculate-price {
margin: 2.75rem 0;
}
}
.product-content-section .cart .calculate-price > p, .woocommerce div.product .calculate-price > p {
font-size: 1.125rem;
color: var(--bs-primary);
margin: 0;
font-weight: 500;
margin-bottom: 5px;
}
.product-content-section .cart .calculate-price span.price, .woocommerce div.product .calculate-price span.price {
color: var(--bs-primary-900);
display: block;
font-weight: 600;
margin-bottom: 0;
font-size: 1.5625rem;
line-height: normal;
font-family: var(--heading-theme-font);
}
.product-content-section .cart .calculate-price span.price small.woocommerce-price-suffix, .woocommerce div.product .calculate-price span.price small.woocommerce-price-suffix {
font-size: 1.125rem !important;
}
@media(max-width:575px) {
.product-content-section .cart .calculate-price span.price small.woocommerce-price-suffix, .woocommerce div.product .calculate-price span.price small.woocommerce-price-suffix {
font-size: 1rem !important;
}
}
.product-content-section .cart .calculate-price span.price del, .woocommerce div.product .calculate-price span.price del {
font-size: 1.75rem;
font-weight: 600;
}
.product-content-section .cart .calculate-price span.price ins, .woocommerce div.product .calculate-price span.price ins {
font-size: 1.75rem;
text-decoration: none;
font-weight: 600;
}
@media(min-width:1024px) {
.product-content-section .cart .calculate-price span.price del, .woocommerce div.product .calculate-price span.price del, .product-content-section .cart .calculate-price span.price ins, .woocommerce div.product .calculate-price span.price ins, .product-content-section .cart .calculate-price span.price, .woocommerce div.product .calculate-price span.price {
font-size: 2rem;
}
}
@media(min-width:1200px) {
.product-content-section .cart .calculate-price span.price del, .woocommerce div.product .calculate-price span.price del, .product-content-section .cart .calculate-price span.price ins, .woocommerce div.product .calculate-price span.price ins, .product-content-section .cart .calculate-price span.price, .woocommerce div.product .calculate-price span.price {
font-size: 3rem;
}
}
.product-content-section form.cart .button, .woocommerce div.product form.cart .button {
width: 100%;
color: var(--bs-shades-0);
background-color: var(--bs-secondary-500);
padding: 1.25em 2em;
font-size: 1rem;
font-weight: 500;
border-radius: 25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
}
.product-content-section form.cart .button svg, .woocommerce div.product form.cart .button svg {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
}
.product-content-section form.cart .button:hover, .woocommerce div.product form.cart .button:hover {
background-color: var(--bs-primary-400);
}
.product-item-box .product-content .product-btn {
display: block;
margin-top: 1.5rem;
}
.product-item-box .product-content .product-btn .btn {
width: 100%;
font-size: 0.875rem;
padding: 0.75rem 0.5rem;
color: var(--bs-neutral-900);
}
.product-item-box:hover .product-content .product-btn .btn, .woocommerce ul.products li.product .product-item-box:hover .product-content .product-btn .btn {
color: var(--bs-btn-hover-color);
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
}
/************/
.product-item-box .product-content .product-variation {
margin: 8px 0 0;
min-height: 28px;
}
.woo-variation-swatches .product-item-box .product-content .product-variation ul.variations > li {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
margin: 0;
padding: 0;
}
.woo-variation-swatches .product-item-box .product-content .product-variation ul.variations > li .variable-items-wrapper {
margin: 0;
width: 100%;
}
.woo-variation-swatches .product-item-box .product-content .product-variation ul.variations > li .variable-items-wrapper .variable-item:not(.radio-variable-item) {
-webkit-box-shadow: 0 0 0 1px var(--bs-primary-900);
box-shadow: 0 0 0 1px var(--bs-primary-900);
}
.woo-variation-swatches .product-item-box .product-content .product-variation ul.variations > li .variable-items-wrapper .variable-item:not(.radio-variable-item).selected, .woo-variation-swatches .product-item-box .product-content .product-variation ul.variations > li .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
-webkit-box-shadow: 0 0 0 2px var(--bs-primary-900);
box-shadow: 0 0 0 2px var(--bs-primary-900);
}
.woo-variation-swatches .product-item-box .product-content .product-variation ul.variations > li .variable-items-wrapper .variable-item:not(.radio-variable-item):focus, .woo-variation-swatches .product-item-box .product-content .product-variation ul.variations > li .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
-webkit-box-shadow: 0 0 0 3px var(--bs-primary-900);
box-shadow: 0 0 0 3px var(--bs-primary-900);
}
.product-item-box .product-content .product-variation .stock {
display: none;
}
/****************************** ******************************
Default Glightbox CSS
****************************** *****************************/
.custom-glightbox-pagination {
font-family: var(--body-theme-font);
position: absolute;
left: 20px;
top: 15px;
color: var(--bs-shades-0);
padding: 0px 3px;
}
@media (min-width: 768px) {
.gslide-description.description-left, .gslide-description.description-right {
max-width: 335px;
}
}
@media (min-width: 768px) {
.glightbox-clean .description-left .gdesc-inner, .glightbox-clean .description-right .gdesc-inner {
width: 100%;
}
}
/*Glightbox Modal*/
.glightbox-heading {
border-bottom: 1px solid #f1f1f1;
padding-bottom: 18px;
}
.glightbox-clean .gslide-desc {
font-family: var(--body-theme-font);
}
.glightbox-clean .gslide-desc .glightbox-heading h6 {
color: var(--bs-primary-900);
margin: 0;
font-weight: 300;
}
.glightbox-clean .gslide-desc .glightbox-heading a {
color: var(--bs-primary-900);
font-size: 0.875rem;
text-decoration: none;
font-weight: 500;
}
.glightbox-clean .gslide-desc .glightbox-heading a:hover {
color: var(--bs-primary-500);
text-decoration: underline;
}
.glightbox-clean .gslide-desc ul {
list-style: none;
margin: 0;
padding: 0;
}
.glightbox-clean .gslide-desc ul li {
border-bottom: 1px solid rgba(var(--bs-primary-300-rgb), 0.65);
padding: 1rem 0;
}
.glightbox-clean .gslide-desc ul li a {
text-decoration: none;
}
.gproduct-card {
display: flex;
}
.gproduct-card-img {
float: left;
width: 80px;
margin-right: 15px;
flex-shrink: 0;
position: relative;
}
.gproduct-card-img a {
display: block;
position: relative;
}
.gproduct-card-img img {
display: block;
background: var(--bs-neutral-50);
width: 100%;
height: 100%;
object-fit: cover;
}
.gproduct-card-img img.product-hover-img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.gproduct-card-img:hover img.product-hover-img {
visibility: visible;
}
.gproduct-card-body {
overflow: hidden;
width: 100%;
}
.gproduct-card-body .gproduct-card-title {
font-weight: 300;
font-size: 1rem;
color: var(--bs-primary-900);
margin-bottom: 2px;
}
@media (min-width: 1024px) {
.gproduct-card-body .gproduct-card-title {
font-size: 1.125rem;
}
}
.gproduct-card-body .gproduct-card-title a {
color: var(--bs-primary-900);
}
.gproduct-card-body .gproduct-card-title a:hover {
text-decoration: underline;
color: var(--bs-primary-500);
}
.gproduct-card-body .btn.btn-link {
padding: 0;
font-size: 0.875rem;
margin-top: 20px;
}
.gproduct-card-body .gproduct-card-text {
color: var(--bs-primary-900);
font-size: 0.875rem;
font-weight: 400;
text-align: left;
display: flex;
margin: 3px 0 5px;
align-items: baseline;
line-height: 1;
}
.gproduct-card-body .gproduct-card-text span:not(.woocommerce-Price-amount):not(.woocommerce-Price-currencySymbol) {
display: inline-block;
margin: 0 5px 0 0;
}
.gproduct-card-body .gproduct-card-text .p_discount {
color: var(--bs-primary-900);
font-weight: 500;
font-size: 0.875rem;
}
.gproduct-card-body .gproduct-card-text .p_original {
color: var(--bs-neutral-400);
text-decoration: line-through;
font-size: 0.875rem;
}
.gproduct-card-body .btn {
color: var(--bs-primary-900);
padding-left: 0;
display: inline-flex;
font-size: 0.875rem;
font-weight: 500;
padding-bottom: 0;
}
.gproduct-card-body .btn.btn-link::after {
border-color: var(--bs-primary-900);
border-width: 1px 1px 0 0;
width: 6px;
height: 6px;
margin-top: 2px;
}
.gproduct-card-body .btn:hover {
color: var(--bs-primary);
}
.gproduct-card-body .btn.btn-link:hover::after {
border-color: var(--bs-primary);
}
/****************************** ******************************
Woocommerce Message
****************************** *****************************/
.woocommerce-error, .woocommerce-info, .woocommerce-message {
background-color: var(--bs-primary-100);
border: none;
padding-top: 1.5rem;
padding-right: calc(var(--bs-gutter-x)*.5);
padding-left: calc(var(--bs-gutter-x)*.5);
display: flex;
align-items: center;
}
@media (min-width: 580px) {
.woocommerce-error, .woocommerce-info, .woocommerce-message {
padding-right: calc(var(--bs-gutter-x)*1.5);
padding-left: calc(var(--bs-gutter-x)*1.5);
}
}
ul.woocommerce-error, ul.woocommerce-info {
flex-direction: column;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
display: inline-flex;
position: initial;
margin-right: 1rem;
}
.woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button, .woocommerce-page .woocommerce-error .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-message .button {
float: right;
order: 2;
margin-left: auto;
flex-shrink: 0;
}
.woocommerce-error {
padding-top: 0.8rem;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
top: 1.5rem;
}
.woocommerce-error a.button, .woocommerce-info a.button, .woocommerce-message a.button {
border-radius: 50rem;
background-color: var(--bs-secondary-500);
color: var(--bs-shades-0);
padding: 1rem 2rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.woocommerce-error a.button:hover, .woocommerce-info a.button:hover, .woocommerce-message a.button:hover {
background-color: var(--bs-primary-400);
color: var(--bs-shades-0);
}
/****************************** ******************************
Product Not Found
****************************** *****************************/
.woocommerce-no-products-found a.btn {
min-width: 180px;
width: auto;
margin-top: 1.5rem;
}
.woocommerce-no-products-found .icon-wrapper {
margin-top: 3rem;
margin-bottom: 2rem;
}
.woocommerce-no-products-found .icon-wrapper .icon__background {
color: var(--bs-shades-0);
background: var(--bs-primary);
border-radius: 50%;
justify-content: center;
align-items: center;
width: 88px;
height: 88px;
margin-left: auto;
margin-right: auto;
display: flex;
}
.woocommerce-no-products-found .icon-wrapper .icon__background .icon {
width: 2rem;
height: 2rem;
}
/****************************** ******************************
Cart Page / Checkout Page CSS
****************************** *****************************/
body.woocommerce-cart > .wrap .content, body.woocommerce-checkout > .wrap .content {
margin: 3rem 0;
}
@media(min-width:1024px) {
body.woocommerce-cart > .wrap .content, body.woocommerce-checkout > .wrap .content {
margin: 6rem 0;
}
}
body .is-large.wc-block-cart {
margin-bottom: 0;
}
body.page-cart.woocommerce-cart > .wrap h1.wp-block-heading, body.page-checkout.woocommerce-checkout > .wrap h1.wp-block-heading {
font-weight: 600;
}
body.woocommerce-checkout > .wrap h1, body.woocommerce-cart > .wrap h1, body.woocommerce-checkout > .wrap h3, body.woocommerce-cart > .wrap h3 {
font-size: 1.25rem;
}
@media(min-width:768px) {
body.woocommerce-checkout > .wrap h1, body.woocommerce-cart > .wrap h1, body.woocommerce-checkout > .wrap h3, body.woocommerce-cart > .wrap h3 {
font-size: 1.5625rem;
}
}
@media(min-width:1024px) {
body.woocommerce-checkout > .wrap h1, body.woocommerce-cart > .wrap h1, body.woocommerce-checkout > .wrap h3, body.woocommerce-cart > .wrap h3 {
font-size: 1.75rem;
}
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button, .wp-element-button, .wp-block-button__link {
border-radius: 50rem;
background-color: var(--bs-secondary-500) !important;
color: var(--bs-shades-0);
padding: 1rem 2rem !important;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
font-weight: 500 !important;
box-shadow: none !important;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button:hover, .wp-element-button:hover, .wp-block-button__link:hover {
background-color: var(--bs-primary-400) !important;
color: var(--bs-shades-0);
}
body .wp-block-woocommerce-cart, body .wp-block-woocommerce-checkout {
margin-top: 2rem;
}
body .is-large.wc-block-cart .wc-block-cart-items th, body .editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__header th, body table.wc-block-cart-items .wc-block-cart-items__header th {
font-weight: 600;
color: var(--bs-primary-900);
font-size: 0.875rem;
margin-bottom: 8px;
}
body .wc-block-components-sidebar {
background: var(--bs-neutral-50);
padding: 2.25rem 2rem;
border-radius: 0.5rem;
}
body .wc-block-components-sidebar.wc-block-checkout__sidebar p h3 {
font-weight: 600;
}
/*
body .wc-block-components-sidebar .wc-block-cart__submit .wc-block-cart__submit-container a > span, body .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button > span {
position: relative;
}
body .wc-block-components-sidebar .wc-block-cart__submit .wc-block-cart__submit-container a > span:after, body .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button > span:after {
background-repeat: no-repeat;
background-size: 16px;
content: "";
width: 16px;
height: 16px;
position: absolute;
top: calc(50% - 7px);
right: -23px;
transition: none;
background-image: url("data:image/svg+xml,");
}
.wc-block-components-button.wc-block-components-button--loading .wc-block-components-button__text {
display: none !important;
}
*/
body .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
width: auto;
min-width: 180px;
}
body .wc-block-cart .wc-block-cart__totals-title, body .is-large.wc-block-cart .wc-block-cart__totals-title {
color: var(--bs-primary-900);
font-size: 1.25rem;
text-align: left;
margin-bottom: 2rem;
text-transform: capitalize;
font-weight: 600;
font-family: var(--heading-theme-font);
display: block !important;
}
@media (min-width: 768px) {
body .wc-block-cart .wc-block-cart__totals-title, body .is-large.wc-block-cart .wc-block-cart__totals-title {
margin-bottom: 2.5rem;
font-size: 1.5625rem;
}
}
@media (min-width: 1024px) {
body .wc-block-cart .wc-block-cart__totals-title, body .is-large.wc-block-cart .wc-block-cart__totals-title {
font-size: 1.75rem;
}
}
body .wc-block-components-totals-wrapper {
padding: 1.25rem 0;
border-color: var(--bs-neutral-200);
}
body .is-large .wc-block-components-sidebar .wc-block-components-panel, body .is-large .wc-block-components-sidebar .wc-block-components-totals-coupon, body .is-large .wc-block-components-sidebar .wc-block-components-totals-item, body .wc-block-components-totals-item {
color: var(--bs-primary-900);
}
body .is-large .wc-block-components-sidebar .wc-block-components-totals-coupon a, body .wc-block-components-totals-wrapper .wc-block-components-totals-coupon a {
color: var(--bs-primary-900);
font-size: 1rem;
font-weight: 500;
}
body .is-large .wc-block-components-sidebar .wc-block-components-panel, body .is-large .wc-block-components-sidebar .wc-block-components-totals-coupon, body .is-large .wc-block-components-sidebar .wc-block-components-totals-item {
padding: 0;
}
body .is-large.wc-block-cart .wc-block-components-sidebar .wc-block-components-shipping-calculator, body .is-large.wc-block-cart .wc-block-components-sidebar .wc-block-components-shipping-rates-control__package:not(.wc-block-components-panel) {
padding: 0;
}
body .wc-block-components-totals-shipping .wc-block-components-totals-shipping__change-address__link {
color: var(--bs-primary-900);
font-weight: 500;
margin-bottom: 1rem;
display: inline-block;
}
body .wc-block-cart .wc-block-components-totals-footer-item, body .wc-block-cart .wc-block-components-totals-taxes {
margin: 0.5rem 0;
}
@media(min-width:1024px) {
body .wc-block-cart .wc-block-components-totals-footer-item, body .wc-block-cart .wc-block-components-totals-taxes {
margin: 2.5rem 0;
}
}
body .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input, body .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
border-radius: 25px;
border-color: var(--bs-neutral-200);
padding: 1.5em 1em 0.5em;
color: var(--bs-neutral-500);
outline: none !important;
}
body .wc-block-components-combobox .wc-block-components-combobox-control label.components-base-control__label, body .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control label.components-base-control__label {
left: 1rem;
}
body .wc-block-components-form .wc-block-components-text-input input[type=email], body .wc-block-components-form .wc-block-components-text-input input[type=number], body .wc-block-components-form .wc-block-components-text-input input[type=tel], body .wc-block-components-form .wc-block-components-text-input input[type=text], body .wc-block-components-form .wc-block-components-text-input input[type=url], body .wc-block-components-text-input input[type=email], body .wc-block-components-text-input input[type=number], body .wc-block-components-text-input input[type=tel], body .wc-block-components-text-input input[type=text], body .wc-block-components-text-input input[type=url] {
border-radius: 25px;
outline: none !important;
border-color: var(--bs-neutral-200);
}
body .wc-block-components-form .wc-block-components-text-input input[type=email]:focus, body .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, body .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, body .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, body .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, body .wc-block-components-text-input input[type=email]:focus, body .wc-block-components-text-input input[type=number]:focus, body .wc-block-components-text-input input[type=tel]:focus, body .wc-block-components-text-input input[type=text]:focus, body .wc-block-components-text-input input[type=url]:focus {
box-shadow: none;
border-color: var(--bs-primary-500);
}
body .wc-block-components-form .wc-block-components-text-input label, body .wc-block-components-text-input label {
left: 1rem;
}
body .wc-block-components-form .wc-block-components-text-input input:-webkit-autofill, body .wc-block-components-form .wc-block-components-text-input.is-active input[type=email], body .wc-block-components-form .wc-block-components-text-input.is-active input[type=number], body .wc-block-components-form .wc-block-components-text-input.is-active input[type=tel], body .wc-block-components-form .wc-block-components-text-input.is-active input[type=text], body .wc-block-components-form .wc-block-components-text-input.is-active input[type=url], body .wc-block-components-text-input input:-webkit-autofill, body .wc-block-components-text-input.is-active input[type=email], body .wc-block-components-text-input.is-active input[type=number], body .wc-block-components-text-input.is-active input[type=tel], body .wc-block-components-text-input.is-active input[type=text], body .wc-block-components-text-input.is-active input[type=url] {
padding: 1.5em 1em 0.5em;
}
body .is-large.wc-block-cart .wc-block-cart-items td {
border-color: var(--bs-neutral-200);
padding: 2.25rem 0;
}
body .is-large.wc-block-cart .wc-block-cart-items td .wc-block-cart-item__wrap {
margin-left: 2.25rem;
}
body .is-large.wc-block-cart .wc-block-cart-items td:last-child {
padding-right: 0;
}
body .editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, body .wc-block-checkout__sidebar .wc-block-components-product-name {
font-size: 1.125rem;
color: var(--bs-primary-900);
font-weight: 600;
text-decoration: none;
margin-bottom: 5px;
}
body .wc-block-components-product-price {
font-size: 1.125rem;
font-weight: 400;
color: var(--bs-neutral-500);
margin-bottom: 0.5rem;
}
@media(max-width:575px) {
body .editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, body .wc-block-checkout__sidebar .wc-block-components-product-name {
font-size: 1rem;
}
body .wc-block-components-product-price {
font-size: 1rem;
}
}
body .wc-block-components-product-badge {
padding: 0.5rem 1rem;
border-radius: 25rem;
font-size: 0.875rem;
margin: 0.5rem 0;
background-color: var(--bs-primary-100);
border-color: var(--bs-primary-200);
color: var(--bs-primary-500);
}
body .wc-block-components-product-badge > span.wc-block-formatted-money-amount {
color: var(--bs-primary-500);
}
body .wc-block-components-product-metadata .wc-block-components-product-metadata__description > p, body .wc-block-components-product-metadata .wc-block-components-product-metadata__variation-data {
font-size: 0.75rem;
font-weight: 400;
color: var(--bs-neutral-400);
}
body .wc-block-components-quantity-selector {
border-radius: 25rem;
border-color: var(--bs-neutral-200);
margin: 1rem 0;
width: 120px;
}
body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
padding: 0.7em 0;
}
body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
box-shadow: none;
}
@media(max-width:1023.85px) {
body .wc-block-components-quantity-selector {
margin-top: 0;
}
}
body .wc-block-components-quantity-selector:after {
border-radius: 25rem;
border-color: var(--bs-neutral-200);
}
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
font-size: 1.5rem;
color: var(--bs-neutral-400);
}
body .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--plus, body .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--minus {
border-radius: 0;
}
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
box-shadow: none;
}
body .editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link, body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
color: var(--bs-primary-900);
font-size: 0.875rem;
font-weight: 500;
text-decoration: underline;
}
body .editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover, body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
text-decoration: underline;
}
body .wc-block-components-formatted-money-amount {
color: var(--bs-primary-900);
font-weight: 600;
}
body .wc-block-components-sidebar-layout {
align-items: flex-start;
}
body .is-medium.wc-block-components-sidebar-layout .wc-block-components-main, body .is-medium.wc-block-components-sidebar-layout .wc-block-components-sidebar, .is-mobile.wc-block-components-sidebar-layout .wc-block-components-main, body .is-mobile.wc-block-components-sidebar-layout .wc-block-components-sidebar, body .is-small.wc-block-components-sidebar-layout .wc-block-components-main, body .is-small.wc-block-components-sidebar-layout .wc-block-components-sidebar {
padding: 2rem;
}
@media(max-width:575px) {
body .is-medium.wc-block-components-sidebar-layout .wc-block-components-main, body .is-medium.wc-block-components-sidebar-layout .wc-block-components-sidebar, .is-mobile.wc-block-components-sidebar-layout .wc-block-components-main, body .is-mobile.wc-block-components-sidebar-layout .wc-block-components-sidebar, body .is-small.wc-block-components-sidebar-layout .wc-block-components-main, body .is-small.wc-block-components-sidebar-layout .wc-block-components-sidebar {
padding: 1rem;
}
}
body .wc-block-components-totals-item__description.wc-block-components-totals-shipping__via {
margin-top: 5px;
font-size: 0.875rem;
font-weight: 400;
}
body .wc-block-components-totals-shipping .wc-block-components-shipping-address {
margin-bottom: 0.5rem;
}
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
border-color: var(--bs-neutral-400);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus {
outline: none;
}
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
background: var(--bs-primary);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
fill: var(--bs-shades-0);
}
body .wc-block-components-checkout-step__heading {
margin-bottom: 4px;
}
body .wc-block-components-checkout-step__heading-content {
font-size: .875em;
}
body .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container::after {
border-left: 1px solid #E5D6F3;
}
body .wc-block-components-checkout-step__description {
margin: 0 !important;
margin-bottom: 1rem !important;
}
body .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label-group {
font-size: 1.125em;
font-weight: 400;
}
body .wc-block-components-textarea, body .wc-block-checkout__add-note .wc-block-components-textarea {
border-radius: 25px;
border-color: var(--bs-neutral-200);
resize: none;
height: 130px;
}
body .wc-block-checkout__add-note .wc-block-components-textarea:focus {
box-shadow: none;
border-color: var(--bs-primary-500);
}
body .wc-block-components-shipping-rates-control {
margin: 0.5rem 0;
}
body .wc-block-components-checkout-return-to-cart-button {
color: var(--bs-primary);
font-size: 1rem;
font-weight: 600;
}
body .wc-block-components-checkout-return-to-cart-button:hover {
color: var(--bs-secondary);
}
body .is-large .wc-block-checkout__actions {
padding-top: 3.375rem;
}
body .wc-block-components-panel__button[aria-expanded=true] {
padding-bottom: 1.625rem;
}
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
min-height: 1.5rem;
min-width: 1.5rem;
border: none;
background: var(--bs-primary-500);
color: var(--bs-shades-0);
padding: 0;
box-shadow: none;
line-height: normal;
font-size: 0.875rem;
font-weight: 600;
}
body .wc-block-checkout__sidebar .wc-block-components-product-name, body .wc-block-checkout__sidebar .wc-block-components-product-price {
font-size: 0.875rem;
}
body .wc-block-checkout__sidebar .wc-block-components-product-price del, body .wc-block-components-product-price__value.is-discounted {
font-size: 1.125rem;
font-weight: 400;
color: var(--bs-neutral);
}
@media(max-width:575px) {
body .wc-block-checkout__sidebar .wc-block-components-product-price del, body .wc-block-components-product-price__value.is-discounted {
font-size: 1rem;
}
}
body .wc-block-components-product-details__name, body .wc-block-components-product-details__value {
font-size: 0.875rem;
color: var(--bs-neutral-500);
}
body .wc-block-components-product-details__name {
color: var(--bs-primary-900);
font-weight: 500;
}
body .wc-block-components-totals-item__value {
font-weight: 600;
}
@media(max-width:461.55px) {
body .wc-block-components-totals-coupon__form {
display: block;
}
body .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input {
margin-bottom: 1rem;
}
}
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 1.25rem;
font-weight: 600;
}
@media (min-width: 768px) {
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 1.5625rem;
}
}
@media (min-width: 1024px) {
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 1.75rem;
}
}
body.woocommerce-checkout .wc-block-checkout__terms span {
font-size: 0.875rem;
}
/**/
body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
margin: 0 auto 0.85em;
background: url(../../images/empty-cart-icon.svg) 0% 0% no-repeat;
width: 88px;
height: 88px;
content: '';
mask-image: none;
}
body .wc-block-cart__empty-cart__title.with-empty-cart-icon.wc-block-cart__empty-cart__title {
font-size: 2.125rem;
}
@media (min-width: 1024px) {
body .wc-block-cart__empty-cart__title.with-empty-cart-icon.wc-block-cart__empty-cart__title {
font-size: 3rem;
}
}
@media (min-width: 1024px) {
body .wc-block-cart__empty-cart__title.with-empty-cart-icon.wc-block-cart__empty-cart__title + p {
font-size: 1.125rem;
}
}
body .wp-block-woocommerce-empty-cart-block .wp-block-buttons {
margin: 0;
}
body .wp-block-woocommerce-empty-cart-block .wp-block-buttons .wp-block-button a.wp-block-button__link {
min-width: 180px;
}
/****************************** ******************************
Order Confirmed Page CSS
****************************** *****************************/
.woocommerce-order-received .wp-block-heading {
display: none;
}
body.woocommerce-checkout.woocommerce-order-received > .wrap h2 {
font-size: 2.125rem;
margin-bottom: 1.25rem;
}
@media(min-width:768px) {
body.woocommerce-checkout.woocommerce-order-received > .wrap h2 {
font-size: 2.125rem;
}
}
@media(min-width:1024px) {
body.woocommerce-checkout.woocommerce-order-received > .wrap h2 {
font-size: 3rem;
}
}
.woocommerce-order-received .wrap > .content .icon-wrapper .icon__background {
color: var(--bs-shades-0);
background: var(--bs-primary);
border-radius: 50%;
justify-content: center;
align-items: center;
width: 88px;
height: 88px;
margin-left: auto;
margin-right: auto;
display: flex;
margin-bottom: 2rem;
}
@media(min-width:1024px) {
.woocommerce-order-received .wrap > .content .icon-wrapper .icon__background {
margin-bottom: 3rem;
}
}
.woocommerce-order-received .wrap > .content .icon-wrapper .icon__background .icon {
width: 2rem;
height: 2rem;
}
.woocommerce-order-received .col-12 h1 {
text-align: center;
}
.woocommerce-order-received .col-12 .woocommerce {
width: 100%;
margin: 0 auto;
text-align: center;
}
@media(min-width:1024px) {
.woocommerce-order-received .col-12 .woocommerce {
max-width: 650px;
}
}
.woocommerce-order-received .col-12 .woocommerce .btn.btn-primary {
min-width: 180px;
width: auto;
margin-top: 1rem;
}
.woocommerce-order-received .col-12 .woocommerce ul.order_details {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 2rem 0;
flex-wrap: wrap;
}
@media(min-width:1024px) {
.woocommerce-order-received .col-12 .woocommerce ul.order_details {
margin: 3rem 0;
}
}
.woocommerce-order-received .col-12 .woocommerce ul.order_details li {
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: var(--bs-primary-900);
border: none;
width: 33.33%;
padding: 0;
margin-left: 0;
margin-right: 0;
text-transform: capitalize;
}
@media(max-width:575px) {
.woocommerce-order-received .col-12 .woocommerce ul.order_details li {
width: 50%;
}
}
@media(max-width:425px) {
.woocommerce-order-received .col-12 .woocommerce ul.order_details li {
width: 100%;
}
}
.woocommerce-order-received .col-12 .woocommerce ul.order_details li strong {
color: var(--bs-neutral);
font-weight: 400;
font-size: 0.875rem;
margin-top: 5px;
}
.woocommerce-order-received .col-12 .woocommerce .woocommerce-order-details h2 {
text-align: left;
margin-bottom: 1.15rem;
font-size: 1.4375rem;
font-weight: 700;
color: var(--bs-primary-900);
text-transform: capitalize;
}
.woocommerce-order-received .col-12 .woocommerce .woocommerce-order-details table.shop_table {
border-radius: 12px;
border-color: var(--bs-primary-200);
border-spacing: 0;
overflow: hidden;
}
.woocommerce-order-received .col-12 .woocommerce .woocommerce-order-details table.shop_table thead {
background: var(--bs-primary-500);
color: var(--bs-neutral-50);
}
.woocommerce-order-received .col-12 .woocommerce .woocommerce-order-details table.shop_table thead th.woocommerce-table__product-table.product-total, .woocommerce-order-received .col-12 .woocommerce .woocommerce-order-details table.shop_table tbody tr.woocommerce-table__line-item.order_item td.woocommerce-table__product-total.product-total, .woocommerce-order-received .col-12 .woocommerce .woocommerce-order-details table.shop_table tfoot tr td {
text-align: right;
}
.woocommerce-order-received .col-12 .woocommerce .woocommerce-order-details table.shop_table tbody td ul {
margin-left: 0;
}
.woocommerce-order-received .col-12 table.shop_table th {
font-weight: 500;
font-size: 1.125rem;
}
.woocommerce-order-received .col-12 table.shop_table tfoot tr th, .woocommerce-order-received .col-12 table.shop_table tfoot tr td, .woocommerce-order-received .col-12 table.shop_table tbody tr td {
color: var(--bs-primary-900);
font-weight: 400;
border-color: var(--bs-primary-200);
font-size: 0.875rem;
}
.woocommerce-order-received .col-12 table.shop_table tbody tr td strong.product-quantity {
color: var(--bs-primary-900);
font-weight: 400;
}
.woocommerce-order-received .woocommerce table.shop_table th {
padding: 1rem 1.25rem;
}
.woocommerce-order-received .woocommerce table.shop_table td small {
font-size: .875rem;
}
.woocommerce-order-received table.shop_table td {
padding: 0.875rem 1.25rem;
}
.woocommerce-order-received table.shop_table td a {
color: var(--bs-primary-900);
font-weight: 400;
}
@media(max-width:575px) {
.woocommerce-order-received .woocommerce table.shop_table th, .woocommerce-order-received table.shop_table td {
padding: 0.5rem 1rem;
}
}
body .wc-block-components-totals-discount__coupon-list {
margin-left: 0;
}
body .wc-block-components-totals-discount .wc-block-components-totals-item__value {
color: var(--bs-primary-900);
}
body .wc-block-components-totals-shipping .wc-block-components-totals-shipping__options .wc-block-components-radio-control__description, body .wc-block-components-totals-shipping .wc-block-components-totals-shipping__options .wc-block-components-radio-control__label, body .wc-block-components-totals-shipping .wc-block-components-totals-shipping__options .wc-block-components-radio-control__secondary-description, body .wc-block-components-totals-shipping .wc-block-components-totals-shipping__options .wc-block-components-radio-control__secondary-label {
color: var(--bs-primary-900);
}
body .wc-block-components-validation-error > p {
margin: 0.5rem 0;
}
.wc-block-components-combobox .wc-block-components-combobox-control .components-combobox-control__suggestions-container, .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control .components-combobox-control__suggestions-container {
box-shadow: none;
outline: none;
}
/****************************** ******************************
Login Page CSS
****************************** *****************************/
.woocommerce #customer_login {
background: var(--bs-shades-0);
padding: 0;
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
justify-content: center;
align-content: stretch;
min-height: 500px;
}
@media(max-width: 768px) {
.woocommerce #customer_login {
display: block !important;
}
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
background-color: var(--bs-primary-50);
padding: 2rem;
}
.woocommerce .col2-set .col-1.woocommerce-Address address, .woocommerce-page .col2-set .col-1.woocommerce-Address address, .woocommerce .col2-set .col-2.woocommerce-Address address, .woocommerce-page .col2-set .col-2.woocommerce-Address address {
font-size: 0.875rem;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
background-color: var(--bs-secondary-100);
padding: 2rem;
}
@media(max-width: 768px) {
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
margin-top: 2rem;
}
}
.woocommerce .col2-set .col-2 form.woocommerce-form.woocommerce-form-register button.woocommerce-Button, .woocommerce-page .col2-set .col-2 form.woocommerce-form.woocommerce-form-register button.woocommerce-Button {
width: 100%;
margin: 2rem 0 0;
}
.woocommerce .col2-set .col-2 form.woocommerce-form.woocommerce-form-register .woocommerce-privacy-policy-text > p > a, .woocommerce-page .col2-set .col-2 form.woocommerce-form.woocommerce-form-register .woocommerce-privacy-policy-text > p > a {
color: var(--bs-neutral-500);
}
body .woocommerce-privacy-policy-text p {
font-size: 0.875rem;
}
.woocommerce .col2-set .col-2 form.woocommerce-form.woocommerce-form-register .woocommerce-privacy-policy-text > p > a:hover, .woocommerce-page .col2-set .col-2 form.woocommerce-form.woocommerce-form-register .woocommerce-privacy-policy-text > p > a:hover {
color: var(--bs-secondary-500);
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
border: none;
padding: 0;
margin: 0;
}
body.woocommerce-account .woocommerce h2 {
text-align: center;
margin-bottom: 3rem;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
font: 400 normal 1rem var(--body-theme-font);
background-color: var(--bs-shades-0);
border: 1px solid var(--bs-neutral-200);
border-radius: 100px;
height: 52px;
padding: 0.8em 1em;
color: var(--bs-neutral-500);
box-shadow: none;
outline: none;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
border-color: var(--bs-primary-500);
}
.woocommerce form .form-row label, .woocommerce-page form .form-row label {
display: block;
font-size: 1rem;
margin-bottom: 0.5rem;
text-align: left;
color: var(--bs-neutral-800);
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
right: 1em;
top: 1em;
}
.woocommerce form.checkout_coupon p.woocommerce-LostPassword.lost_password, .woocommerce form.login p.woocommerce-LostPassword.lost_password, .woocommerce form.register p.woocommerce-LostPassword.lost_password {
text-align: center;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
margin: 2rem 0 0;
width: 100%;
}
/****************************** ******************************
Lost Password CSS
****************************** *****************************/
.woocommerce .woocommerce-ResetPassword.lost_reset_password > p {
text-align: center;
margin-bottom: 3rem;
}
.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
width: 100%;
}
.woocommerce form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button {
width: 100%;
margin: 0;
}
/****************************** ******************************
My Account CSS
****************************** *****************************/
.woocommerce nav.woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
border-bottom: 1px solid var(--bs-neutral-300);
padding: 0;
color: var(--bs-neutral-500);
text-align: center;
margin: 0;
}
.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link:last-child {
border: none;
}
.woocommerce nav.woocommerce-MyAccount-navigation ul li.is-active a {
background: var(--bs-primary);
color: var(--bs-shades-0);
}
.woocommerce nav.woocommerce-MyAccount-navigation ul li a {
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
display: block;
text-transform: capitalize;
padding: 1rem;
text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
padding: 0;
background: var(--bs-primary-900);
border-radius: 10px;
overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
background: var(--bs-primary);
color: var(--bs-shades-0);
text-decoration: none;
}
@media (max-width: 768.85px) {
.woocommerce-account .woocommerce-MyAccount-content {
margin-top: 3rem;
}
.woocommerce-page .woocommerce-MyAccount-content .woocommerce-info {
padding: 1em 2em 1em 3em;
}
}
.woocommerce-account .woocommerce-MyAccount-content p {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
}
.woocommerce-account .woocommerce-MyAccount-content p a {
font-size: 0.875rem;
font-weight: 500;
color: var(--bs-primary-900);
}
.woocommerce form .form-row-last, .woocommerce-page form .form-row-last {
width: 100%;
}
.woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button.button, .woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .button {
text-align: center;
width: auto;
margin-top: 1.5rem;
border-radius: 3rem;
background: var(--bs-primary);
color: var(--bs-shades-0);
font-size: 0.875rem;
font-weight: 500;
padding: 1rem 1rem;
text-transform: capitalize;
border: none;
}
@media(max-width:768.85px) {
.woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button.button, .woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .button {
width: 100%;
}
}
.woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button.button:hover, .woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button.button:focus, .woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button.button:focus-visible, .woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .button:hover, .woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .button:focus, .woocommerce-page .woocommerce-MyAccount-content .woocommerce-info .button:focus-visible {
background: var(--bs-primary-600);
color: var(--bs-shades-0);
}
.woocommerce-account .addresses .title .edit {
color: var(--bs-primary-900);
margin-top: 0.6rem;
font-size: 0.875rem;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper .woocommerce-error {
padding-left: 3rem;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper .woocommerce-error li {
margin: 0;
}
.woocommerce-account .addresses .title h3 {
font-size: 1.75rem;
}
/**/
.post-type-archive .product-price .woocommerce-price-suffix, .related.products .product-price .woocommerce-price-suffix, .tax-product_cat .product-price .woocommerce-price-suffix {
display: none;
}