@charset "UTF-8";

/*
Theme Name: electro-child
Theme URI: https://themeforest.net/item/electro-electronics-store-woocommerce-theme/15720624
Author: MadrasThemes
Author URI: https://madrasthemes.com/
Template: electro
Description: Electro is a robust and flexible WordPress theme...
Version: 3.6.3
GitHub Theme URI: https://github.com/madrasthemes/electro
GitHub Branch: theme
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: electro
*/

/* --- General & Header Styles --- */
.full-color-background .top-bar {
    background-color: #000;
}

.full-color-background .top-bar .nav-inline .menu-item > a,
.full-color-background .top-bar .nav-inline .menu-item + .menu-item:before {
    color: #000;
}

.home-vertical-nav.departments-menu-v2 .vertical-menu-title {
    background-color: transparent;
    color: #000;
}

.handheld-header-v2 .handheld-header-links > ul li > a,
.mobile-header-v1 .handheld-header-links > ul li > a,
.mobile-header-v2-inner .handheld-header-links > ul li > a {
    padding-left: 0;
}

/* --- Breadcrumbs --- */
span.woocommerce-breadcrumb a,
span.woocommerce-breadcrumb .delimiter {
    color: #333333 !important;
    font-weight: bold !important;
}

/* --- Product Loop & Card Styling --- */
.woocommerce-loop-product__title {
    height: auto !important;
    min-height: 50px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    color: #0000CD !important;
}

.product-loop-footer {
    position: relative;
    padding-top: 5px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: 150px !important;
    box-sizing: border-box !important;
}

.product-loop-footer .price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
    line-height: 1.2 !important;
    margin-top: 5px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

.product-loop-footer .price.variable-product-price {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

.product-loop-footer .price del {
    order: 1 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    margin-right: 8px !important;
    font-size: 0.8em !important;
    color: #000 !important;
    font-weight: bold !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
}

.product-loop-footer .price ins {
    order: 2 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    font-size: 1.05em !important;
    color: #e02f2f !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}

.product-loop-footer .price .woocommerce-Price-amount,
.product-loop-footer .price del .woocommerce-Price-amount,
.product-loop-footer .price ins .woocommerce-Price-amount {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

.price .woocommerce-Price-currencySymbol {
    font-size: 0.8em !important;
    vertical-align: baseline !important;
}

.product-loop-footer .price .woocommerce-Price-amount:first-of-type:not(:last-of-type)::after {
    content: " - ";
    display: inline;
    color: #333;
    font-weight: normal;
    font-size: 0.8em;
    margin: 0 2px;
}

/* --- Stock & Availability Status --- */
.product-loop-footer .availability,
.product-loop-footer p.stock,
.product-loop-footer span.stock {
    display: block !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    font-size: 0.9em !important;
    color: #006400 !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-loop-footer .out-of-stock,
.product-loop-footer p.stock.out-of-stock,
.product-loop-footer span.stock.out-of-stock {
    color: #FF0000 !important;
}

/* --- On Sale & New Badges --- */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    background-color: #8ec342 !important;
    color: #FFFFFF !important;
    padding: 0.2em 0.5em !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    line-height: 1.5;
    text-align: center;
    min-width: 0;
    display: inline-block;
}

.wc-new-badge {
    background-color: #e02f2f !important;
    color: #FFF !important;
    font-size: 0.75em !important;
    text-transform: uppercase !important;
    padding: 0.2em 0.5em !important;
    display: inline-block !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
}

/* === FIX: On Sale Badge inside Quick View Modal === */
.yith-wcqv-main .onsale {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    width: auto !important;
    height: auto !important;
    z-index: 99;
}

/* --- Buttons (Add to Cart & Quick View) --- */
.woocommerce .product .product-loop-buttons .add_to_cart_button,
.woocommerce .product .product-loop-buttons .button.add_to_cart_button,
.single-product .single_add_to_cart_button.button.alt,
form.cart .button.single_add_to_cart_button {
    background-color: #8ec342 !important;
    color: #FFFFFF !important;
    border-color: #8ec342 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 0.618em 1em !important;
}

.woocommerce .product .product-loop-buttons .add_to_cart_button:hover,
.woocommerce .product .product-loop-buttons .button.add_to_cart_button:hover,
.single-product .single_add_to_cart_button.button.alt:hover,
form.cart .button.single_add_to_cart_button:hover {
    background-color: #7cb63a !important;
    border-color: #7cb63a !important;
    color: #FFFFFF !important;
}

.product-loop-footer.product-item__footer > a.button.yith-wcqv-button {
    display: none;
}

a.button.yith-wcqv-button {
    background-color: #9370DB !important;
    color: #FFFFFF !important;
    border-color: #9370DB !important;
}

a.button.yith-wcqv-button:hover {
    background-color: #800080 !important;
    border-color: #800080 !important;
    color: #FFFFFF !important;
}

/* --- Other & Plugin Specific Styles --- */
iframe[src*="customer_chat/bubble"] {
    transform: translateX(-45px);
}

.footer-full-width-widget-area {
    width: 100%;
    clear: both;
    padding: 20px;
    box-sizing: border-box;
}

.footer-full-width-widget-area .widget {
    margin-bottom: 20px;
}

.footer-full-width-widget-area .widget-title {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin: 0 auto;
    max-width: 100%;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.fa.fa-map-marker {
    color: #FF0000;
    margin-right: 5px;
}

.vc_column_text p.social-link-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.vc_column_text p.social-link-url a {
    font-size: 16px;
    color: #0000FF !important;
    text-align: center;
}

.vc_column_text p.our-links-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.free-shipping-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px !important;
    margin-bottom: 15px !important;
    font-size: 0.95em;
    color: #28a745 !important;
    font-weight: bold;
}

.free-shipping-icon,
.free-shipping-text {
    color: #28a745 !important;
    white-space: nowrap;
}

.free-shipping-icon {
    font-size: 1.2em;
}

.social-icons-container {
    text-align: center;
    padding: 15px 0;
    background: #fff;
    margin-bottom: 20px;
}

.social-icons-container a {
    display: block;
    margin-bottom: 10px;
    line-height: 0;
    transition: transform .2s;
}

.social-icons-container a:hover {
    transform: scale(1.05);
}

.social-icons-container img {
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
    padding: 5px;
}

@media (max-width: 768px) {
    .social-icons-container img {
        max-width: 140px;
    }
}

@media (max-width: 480px) {
    .social-icons-container img {
        max-width: 100px;
    }
}

/* =========================
   iMedia Typography + Colors (Light mode baseline)
   ========================= */
:root{
  --ims-text: #111827;
  --ims-heading: #0B1F3B;
  --ims-muted: #4B5563;
  --ims-link: #1D4ED8;
  --ims-border: #D1D5DB;

  /* accents */
  --ims-accent: #8ec342;     /* brand green (light mode) */
  --ims-accent-hover: #7cb63a;
}

/* Base text */
body{
  color: var(--ims-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color: var(--ims-heading);
  font-weight: 700;
}

/* Sidebar widget titles + filter section titles */
.widget-title,
.widget .widget-title,
.woocommerce-widget-layered-nav .widget-title,
.sidebar-shop .widget-title{
  color: var(--ims-heading);
  font-weight: 700;
}

/* Category titles (grid) + product titles */
.woocommerce-loop-category__title,
.product-category .woocommerce-loop-category__title,
.woocommerce-loop-product__title,
.products .product h2.woocommerce-loop-product__title{
  color: var(--ims-heading);
  font-weight: 700;
}

/* Links */
a{ color: var(--ims-link); }
a:hover{ filter: brightness(0.9); }

/* Muted text */
small, .woocommerce-result-count, .posted_in, .tagged_as, .sku_wrapper{
  color: var(--ims-muted);
}

/* SelectWoo / Select2 look (dropdowns + search input) */
.select2-container--default .select2-selection--single{
  border-color: var(--ims-border);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--ims-text);
  font-weight: 600;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  color: var(--ims-text);
  border-color: var(--ims-border);
}
.select2-container--default .select2-search__field::placeholder{
  color: var(--ims-muted);
  opacity: 1;
}

/* Optional: tighten those section labels a bit */
.sidebar-shop .widget-title,
.woocommerce-widget-layered-nav .widget-title{
  letter-spacing: 0.2px;
}

 /* =========================================================
   iMedia Dark Mode (ONE source of truth) - FINAL
   Fix:
   - product titles (loop + single) not dark
   - hand/select options icon buttons visible
   - footer + social icons readable
   - google reviews names/date links readable (with row class)
   ========================================================= */

body.electro-dark{
  --ims-text: #E5E7EB;
  --ims-heading: #F9FAFB;
  --ims-muted: #9CA3AF;
  --ims-link: #93C5FD;
  --ims-border: #374151;

  --ims-accent: #A8E05F;
  --ims-accent-hover: #94D64A;
}

/* Base text */
body.electro-dark{ color: var(--ims-text); }
body.electro-dark a{ color: var(--ims-link); }
body.electro-dark a:hover{ color: var(--ims-accent); }

/* ========== Product titles: loop + single ========== */
body.electro-dark .woocommerce-loop-product__title,
body.electro-dark .woocommerce-loop-product__title a,
body.electro-dark .products .product h2,
body.electro-dark .products .product h2 a,
body.electro-dark .products .product .product-title,
body.electro-dark .products .product .product-title a,
body.electro-dark .single-product .product_title,
body.electro-dark .single-product .product_title a{
  color: #E5E7EB !important;
}
body.electro-dark .woocommerce-loop-product__title a:hover,
body.electro-dark .products .product h2 a:hover,
body.electro-dark .single-product .product_title a:hover{
  color: var(--ims-accent) !important;
}

/* ========== Prices in dark (avoid dark/black) ========== */
body.electro-dark .products .product .price,
body.electro-dark .woocommerce div.product p.price,
body.electro-dark .woocommerce div.product span.price{
  color: #E5E7EB !important;
}
body.electro-dark .products .product .price del,
body.electro-dark .woocommerce div.product p.price del,
body.electro-dark .woocommerce div.product span.price del{
  color: #9CA3AF !important;
  opacity: 1 !important;
}
body.electro-dark .products .product .price ins,
body.electro-dark .woocommerce div.product p.price ins,
body.electro-dark .woocommerce div.product span.price ins{
  color: #FB7185 !important; /* readable red/pink on dark */
}

/* ========== Availability / free shipping ========== */
body.electro-dark .product-loop-footer .availability,
body.electro-dark .product-loop-footer p.stock,
body.electro-dark .product-loop-footer span.stock,
body.electro-dark .free-shipping-indicator,
body.electro-dark .free-shipping-icon,
body.electro-dark .free-shipping-text{
  color: var(--ims-accent) !important;
}

/* ========== Icon buttons (hand + select options + add) ========== */
body.electro-dark .products .product .product-loop-buttons a,
body.electro-dark .products .product .product-loop-buttons a.button,
body.electro-dark .products .product .product-loop-footer a.button,
body.electro-dark .products .product a.add_to_cart_button,
body.electro-dark .products .product a.product_type_simple,
body.electro-dark .products .product a.product_type_variable,
body.electro-dark .products .product a.product_type_grouped,
body.electro-dark .products .product a.product_type_external,
body.electro-dark .products .product .price-add-to-cart a.button,
body.electro-dark .products .product .add-to-cart-wrap a.button{
  background: #374151 !important;
  border-color: #4B5563 !important;
  color: #F9FAFB !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) !important;
}

/* icon via pseudo-element OR <i> OR svg */
body.electro-dark .products .product .product-loop-buttons a:before,
body.electro-dark .products .product .product-loop-buttons a:after,
body.electro-dark .products .product .product-loop-footer a.button:before,
body.electro-dark .products .product a.add_to_cart_button:before,
body.electro-dark .products .product a.product_type_variable:before,
body.electro-dark .products .product .price-add-to-cart a.button:before,
body.electro-dark .products .product .add-to-cart-wrap a.button:before{
  color: inherit !important;
  opacity: 1 !important;
}
body.electro-dark .products .product .product-loop-buttons a i,
body.electro-dark .products .product .product-loop-footer a.button i{
  color: inherit !important;
}
body.electro-dark .products .product a svg{
  fill: currentColor !important;
}

/* hover */
body.electro-dark .products .product .product-loop-buttons a:hover,
body.electro-dark .products .product .product-loop-footer a.button:hover,
body.electro-dark .products .product a.add_to_cart_button:hover,
body.electro-dark .products .product a.product_type_variable:hover,
body.electro-dark .products .product .price-add-to-cart a.button:hover,
body.electro-dark .products .product .add-to-cart-wrap a.button:hover{
  background: var(--ims-accent) !important;
  border-color: var(--ims-accent) !important;
  color: #0B1F3B !important;
}
body.electro-dark .products .product .product-loop-buttons a:hover:before,
body.electro-dark .products .product .product-loop-footer a.button:hover:before{
  color: #0B1F3B !important;
}

/* ========== Footer ========== */
body.electro-dark .site-footer,
body.electro-dark footer,
body.electro-dark .footer-widgets,
body.electro-dark .footer-bottom-widgets,
body.electro-dark .footer-bottom{
  background: #0B0F14 !important;
  color: #E5E7EB !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
body.electro-dark .site-footer a,
body.electro-dark footer a,
body.electro-dark .site-footer a:visited{
  color: #93C5FD !important;
}
body.electro-dark .site-footer a:hover,
body.electro-dark footer a:hover{
  color: var(--ims-accent) !important;
}

/* Social icons container (the white box problem) */
body.electro-dark .social-icons-container{
  background: #0B0F14 !important;
  border: 1px solid #1F2937 !important;
  border-radius: 14px !important;
  padding: 14px 12px !important;
}
body.electro-dark .site-footer i,
body.electro-dark .site-footer .fa{
  color: #9CA3AF !important;
}
body.electro-dark .site-footer a:hover i{
  color: var(--ims-accent) !important;
}

body.electro-dark .ims-google-reviews .reviewer a:hover,
body.electro-dark .ims-google-reviews .testimonial-author a:hover{
  color: var(--ims-accent) !important;
}
/* Dark mode: remove/replace purple underline under header */
body.electro-dark .site-header,
body.electro-dark .site-header .navbar-primary,
body.electro-dark .site-header .header-logo-area{
  border-bottom-color: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
/* =========================================================
   IMS - Dark Mode compat (prod/stg) + stop blue titles in dark
   Put this at VERY END of style.css
   ========================================================= */

/* 1) Treat these as "dark mode" (covers most togglers) */
body.electro-dark,
html.electro-dark body,
body.dark,
html.dark body,
body.dark-mode,
html.dark-mode body,
body[data-theme="dark"],
html[data-theme="dark"] body{
  --ims-text: #E5E7EB;
  --ims-heading: #F9FAFB;
  --ims-muted: #9CA3AF;
  --ims-link: #93C5FD;
  --ims-border: #374151;

  --ims-accent: #A8E05F;
  --ims-accent-hover: #94D64A;
}

/* 2) Product titles in dark (loop + single) */
body.electro-dark .woocommerce-loop-product__title,
html.electro-dark body .woocommerce-loop-product__title,
body.dark .woocommerce-loop-product__title,
body.dark-mode .woocommerce-loop-product__title,
body[data-theme="dark"] .woocommerce-loop-product__title,
body.electro-dark .single-product .product_title,
html.electro-dark body .single-product .product_title,
body.dark .single-product .product_title,
body.dark-mode .single-product .product_title,
body[data-theme="dark"] .single-product .product_title{
  color: var(--ims-heading) !important;
}

/* 3) Breadcrumbs in dark (prevent "light blue" if you want it neutral/white-ish) */
body.electro-dark span.woocommerce-breadcrumb a,
html.electro-dark body span.woocommerce-breadcrumb a,
body.dark span.woocommerce-breadcrumb a,
body.dark-mode span.woocommerce-breadcrumb a,
body[data-theme="dark"] span.woocommerce-breadcrumb a{
  color: #E5E7EB !important;
  opacity: .85;
}
body.electro-dark span.woocommerce-breadcrumb a:hover,
html.electro-dark body span.woocommerce-breadcrumb a:hover,
body.dark span.woocommerce-breadcrumb a:hover,
body.dark-mode span.woocommerce-breadcrumb a:hover,
body[data-theme="dark"] span.woocommerce-breadcrumb a:hover{
  color: var(--ims-accent) !important;
  opacity: 1;
}
/* ===========================
   FIX: Right side promo banners text color (Light vs Dark)
   Put at VERY END of style.css
   =========================== */

/* Light mode: make promo/banner text black (stop link-blue there) */
body:not(.electro-dark) .banner,
body:not(.electro-dark) .banner a,
body:not(.electro-dark) .banner-content,
body:not(.electro-dark) .banner-content a,
body:not(.electro-dark) .electro-banner,
body:not(.electro-dark) .electro-banner a,
body:not(.electro-dark) .ads-block,
body:not(.electro-dark) .ads-block a,
body:not(.electro-dark) .home-banner,
body:not(.electro-dark) .home-banner a{
  color: #111 !important;
}

/* Dark mode: ensure those promo texts are readable */
body.electro-dark .banner,
body.electro-dark .banner a,
body.electro-dark .banner-content,
body.electro-dark .banner-content a,
body.electro-dark .electro-banner,
body.electro-dark .electro-banner a,
body.electro-dark .ads-block,
body.electro-dark .ads-block a,
body.electro-dark .home-banner,
body.electro-dark .home-banner a{
  color: #E5E7EB !important;
}
/* =========================================================
   FIX (Light mode): Right promo/DAS block + Left departments menu
   - keep them BLACK in Light mode
   - keep them WHITE in Dark mode
   ========================================================= */

/* --------- Light mode: force BLACK for promo (DAS) block links --------- */
body:not(.electro-dark) .da-block a,
body:not(.electro-dark) .da-block a *{
  color: #111827 !important;
}

/* --------- Dark mode: force WHITE for the same areas --------- */
body.electro-dark .da-block a,
body.electro-dark .da-block a *{
  color: #E5E7EB !important;
}
body.electro-dark .departments-menu-v2 a,
body.electro-dark .home-vertical-nav.departments-menu-v2 a{
  color: #E5E7EB !important;
}
/* =========================================================
   IMS FIX (LIGHT MODE): Add to cart / Select options icon box
   - Fix "black square" icon (wrong font-family)
   - Keep Dark mode rules as-is
   Put at VERY END of style.css
   ========================================================= */

/* Light mode only */
body:not(.electro-dark) .products .product .price-add-to-cart > a.button,
body:not(.electro-dark) .products .product .price-add-to-cart > a.add_to_cart_button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;

  padding: .55rem .9rem !important;
  border-radius: 1.375rem !important;

  background: #F3F4F6 !important;
  border: 1px solid #D1D5DB !important;
  color: #111827 !important;

  line-height: 1.1 !important;
  text-align: center !important;
}

/* Force the icon font on pseudo-elements (most Electro setups use :before) */
body:not(.electro-dark) .products .product .price-add-to-cart > a.button:before,
body:not(.electro-dark) .products .product .price-add-to-cart > a.add_to_cart_button:before{
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free","Electro","FontAwesome" !important;
  font-weight: 900 !important;

  color: var(--ims-accent) !important;
  background: transparent !important;
  opacity: 1 !important;

  /* helps spacing if theme puts icon before text */
  margin-right: .35rem !important;
}

/* If theme renders icon as <i> or svg instead of :before */
body:not(.electro-dark) .products .product .price-add-to-cart > a.button i,
body:not(.electro-dark) .products .product .price-add-to-cart > a.add_to_cart_button i{
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free","Electro","FontAwesome" !important;
  font-weight: 900 !important;
  color: var(--ims-accent) !important;
  background: transparent !important;
}

body:not(.electro-dark) .products .product .price-add-to-cart > a.button svg,
body:not(.electro-dark) .products .product .price-add-to-cart > a.add_to_cart_button svg{
  fill: currentColor !important;
  color: var(--ims-accent) !important;
}

/* Hover (light mode) */
body:not(.electro-dark) .products .product .price-add-to-cart > a.button:hover,
body:not(.electro-dark) .products .product .price-add-to-cart > a.add_to_cart_button:hover{
  background: var(--ims-accent) !important;
  border-color: var(--ims-accent) !important;
  color: #FFFFFF !important;
}

body:not(.electro-dark) .products .product .price-add-to-cart > a.button:hover:before,
body:not(.electro-dark) .products .product .price-add-to-cart > a.add_to_cart_button:hover:before,
body:not(.electro-dark) .products .product .price-add-to-cart > a.button:hover i,
body:not(.electro-dark) .products .product .price-add-to-cart > a.add_to_cart_button:hover i{
  color: #FFFFFF !important;
}