/* Add custom CSS styles below */ 

.footer-contact h2,.text-\[\#676D75\],.s-cart-summary-total,.section-heading-title,.text-primary,
.product__description ul, .product__description li, .s-product-options-option-label,
.text-gray-600,.text-gray-500,.text-gray-400,
.s-product-options-option-label b,
.main-menu li a,
.footer-links h2{

  color :var(--bg-tertiary) !important;
}
#theme-toggle .theme-toggle{
--icon-fill: var(--bg-tertiary) !important;

}


.footer-wrapper {
max-width: 90% !important;
    padding: 3rem !important;
    margin: auto !important;

}
.swiper-wrapper > custom-salla-product-card.swiper-slide.\!h-auto.swiper-slide > div { 
   background-color:var(--infinte-color)!important;
   border : 2px solid var(--bg-gray);
   
}
.form-label,
.total-price{
  color :var(--bg-tertiary) !important;

}

.bg-\[var\(--bg-secondary\)\]{
background-color: var(--bg-primary);
}

div.product-card-actions > button.product-card-actions-add-to-cart,
salla-product-options [type=text]{
background-color : var(--bg-tertiary);
color : var(--swiper-theme-color)
}
.product-card-content-meta-title h4,
.product-card-actions-wishlist{
color : var(--swiper-theme-color)
}


#app > div.app-inner > div.container > div > div.product-details-meta.w-full.lg\:w-\[calc\(50\%-32px\)\] > form > section.flex.py-2.sm\:pb-0.rounded-md.rounded-b-none{
background-color : var(--bg-secondary);
color :var(--bg-tertiary)

}

#app > div.app-inner > div.container > div > div.product-details-meta.w-full.lg\:w-\[calc\(50\%-32px\)\] > form > salla-product-options > salla-conditional-fields > div > div > div > div{
    border: 2px solid var(--bg-secondary);
}