/*
Theme Name: Finovate Child
Author: VamTam
Author URI: https://vamtam.com
Template: finovate
*/



/*

put your child theme styles here


you don't need any @import rules

*/


/* Product grid container */
.brand-product-grid ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: -10px;
    padding: 0;
    list-style: none;
}

/* Individual product card */
.brand-product-grid ul.products li.product {
    width: calc(100% / 4 - 20px); /* 4 columns */
    margin: 10px;
    background: #ffffff;
    border: 1px solid #f6f5f2;
    border-radius: 8px;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    transition: all 0.3s ease;

    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}

/* Responsive columns */
@media (max-width: 1200px) { .brand-product-grid ul.products li.product { width: calc(100% / 3 - 20px); } }
@media (max-width: 992px)  { .brand-product-grid ul.products li.product { width: calc(100% / 3 - 20px); } }
@media (max-width: 768px)  { .brand-product-grid ul.products li.product { width: calc(100% / 2 - 20px); } }
@media (max-width: 480px)  { .brand-product-grid ul.products li.product { width: 100%; margin: 10px 0; } }

/* Product image wrapper */
.brand-product-grid ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* fixed area */
    overflow: hidden;
}

/* Product image */
.brand-product-grid ul.products li.product img {
    width: 200px !important;          /* fixed image width */
    height: 200px !important;         /* fixed image height */
    object-fit: contain !important;   /* keep ratio */
    display: block !important;
    margin: 0 auto !important;
}

/* Product title */
.brand-product-grid .woocommerce-loop-product__title {
     font-size: 14px !important;
    text-align: left;
    font-weight: normal;
    margin-bottom: 6px;
    color: #333;
    line-height: 1.4;
    min-height: 30px;
    flex-grow: 1;
    padding: 0px 5px 5px 5px !important;
}

/* Product price */
.brand-product-grid ul.products li.product .price {
    font-size: 13px;
    font-weight: normal;
    color: #e53935;
    margin-bottom: 8px;
}

/* Read More / Add to Cart button */
/* Make product image wrapper relative for absolute positioning */
.brand-product-grid ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* fixed area */
    overflow: hidden;
    position: relative; /* needed for absolute child */
}

/* Button overlay */
.brand-product-grid ul.products li.product .button {
    position: absolute;  /* overlay */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* center */
    background: rgba(7, 15, 38, 0.85); /* semi-transparent dark */
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    text-transform: capitalize;
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Show button on hover */
.brand-product-grid ul.products li.product:hover .button {
    opacity: 1;
    visibility: visible;
}

/* Optional: slight fade effect on hover image */
.brand-product-grid ul.products li.product:hover .woocommerce-LoopProduct-link img {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Optional: smooth hover lift effect */
.brand-product-grid ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.brand-product-grid .loop-sku {
    font-size: 14px;
    text-align: left;
    border-top: solid 1px #f6f5f2;
    padding: 10px 5px 5px 5px;
    color: #2ce2f8;
}
.brand-product-grid .loop-category {
    font-size: 14px;
    text-align: left;
    padding: 0px 5px 5px 5px;
    color: #070f26;
}

.brand-product-grid .loop-category a {
    color: #070f26;
}
.brand-product-grid .in-stock {
    text-align: right;
    color: #00d72e;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    display: inline-block;
    padding-left: 18px; /* space for the circle */
}

.brand-product-grid .in-stock::before {
    content: '';
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;       /* circle diameter */
    height: 10px;
    background-color: #00d72e; /* green color */
    border-radius: 50%;         /* makes it a circle */
}
.brand-product-grid .out-stock {
    text-align: right;
    color: #ff0000;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    display: inline-block;
    padding-left: 18px; /* space for the circle */
}

.brand-product-grid .out-stock::before {
    content: '';
    position: absolute;
    right: 89px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;       /* circle diameter */
    height: 10px;
    background-color: #ff0000; /* green color */
    border-radius: 50%;         /* makes it a circle */
}
.brand-product-grid .loader {
    text-align: center;
    padding: 30px 0;
}


.infinite-loader .spinner {
    border: 4px solid #f3f3f3;       /* Light gray */
    border-top: 4px solid #070f26;   /* Blue color */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*Brand Page More Menu*/
.brand_page_more_menu {
  display: flex;
  justify-content: flex-end; /* ✅ pushes menu to the right */
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 15px;
}

.brand_page_more_menu li {
  position: relative;
}

.brand_page_more_menu li a {
  color: #fff; /* text white */
  text-decoration: none;
  transition: color 0.3s ease;
}

.brand_page_more_menu li a:hover {
  color: #02d3d5; /* hover color */
}

.brand_page_more_menu .more {
  position: relative;
}

.brand_page_more_menu .more ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #000; /* black dropdown */
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 180px;
  z-index: 1000;
  box-shadow: none;
  text-align: left;
}

.brand_page_more_menu .more:hover ul {
  display: block;
}

.brand_page_more_menu .more ul li {
  padding: 8px 15px;
  text-align: left;
}

.brand_page_more_menu .more ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.brand_page_more_menu .more ul li a:hover {
  color: #02d3d5;
}
/*Brand Page More Menu*/




/* Main Menu */
.expertise-menu li a {
	font-size:10px;
  display: block;
  position: relative;
  padding: 5px 0px !important;
  color: #333;           /* default text color */
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  border-bottom: 0px solid #f3f3f3;
  transition: color 0.5s ease; /* smooth text color change */
}

/* Blue sliding background */
.expertise-menu li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;           /* start off-screen to the left */
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  z-index: 0;
}

/* Hover triggers animation */
.expertise-menu li a:hover::before {
  animation: slideBlue 0.3s linear forwards; /* slow slide */
  z-index: -9;
}

/* Keyframes for left-to-right slide */
@keyframes slideBlue {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

/* Text color changes on hover */
.expertise-menu li a:hover {
  color: #333 !important;
	font-weight:500;
}

/* Optional arrow */
.expertise-menu li a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: inherit;
  z-index: 1;
  transition: transform 0.3s ease;
}

.expertise-menu li a:hover::after {
  transform: translateY(-50%) translateX(4px);
}
/* Main Menu */

.shop-menu {
  font-family: "Segoe UI", Arial, sans-serif;
}

.shop-menu h4 {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  margin-bottom: 10px;
}
.shop-menu-sub-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 17px;
  white-space: normal;
  margin: -23px 0px 0px -26px;
}

.shop-menu-sub-list li {
  flex: 0 0 auto;
}

.shop-menu-sub-list li a {
  white-space: normal;
  font-size:14px;
  line-height: 1.6;
}




.image-fade-color::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 31, 84, 0.3);
    pointer-events: none;
}

.brand-logo img { border-radius:20px; }