.elementor-2740 .elementor-element.elementor-element-9d1d53f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2740 .elementor-element.elementor-element-60d2e68{text-align:center;}.elementor-2740 .elementor-element.elementor-element-60d2e68 .elementor-heading-title a:hover, .elementor-2740 .elementor-element.elementor-element-60d2e68 .elementor-heading-title a:focus{color:#2B37A1;}.elementor-2740 .elementor-element.elementor-element-5dc8099.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-2740 .elementor-element.elementor-element-5dc8099 a > img{border-radius:1px 1px 1px 1px;margin-bottom:0px;}:root{--page-title-display:none;}/* Start custom CSS for wc-categories, class: .elementor-element-5dc8099 *//* === Product Category Grid Styling === */
ul.products.elementor-grid.columns-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px; /* space between cards */
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.products.elementor-grid.columns-6 li.product-category.product {
  position: relative; /* so count can be positioned inside */
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  text-align: center;
  padding: 15px 10px 10px;
  width: 180px; /* control card width */
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

ul.products.elementor-grid.columns-6 li.product-category.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* === Category Image === */
ul.products.elementor-grid.columns-6 li.product-category.product img {
  width: 120px; /* smaller image */
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

ul.products.elementor-grid.columns-6 li.product-category.product:hover img {
  transform: scale(1.05);
}

/* === Product Count (top-right inside box) === */
ul.products.elementor-grid.columns-6 li.product-category.product h2.woocommerce-loop-category__title mark.count {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #007cba;
  padding: 3px 7px;
  border-radius: 20px;
  line-height: 1;
}

/* === Category Title (below box) === */
ul.products.elementor-grid.columns-6 li.product-category.product h2.woocommerce-loop-category__title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-top: 20px;
  margin-bottom: 0px;
  text-transform: capitalize;
  transition: color 0.3s ease;
}

ul.products.elementor-grid.columns-6 li.product-category.product:hover h2.woocommerce-loop-category__title {
  color: #007cba; /* change to your brand color */
}

/* Hide count from original position (since it's absolutely positioned now) */
ul.products.elementor-grid.columns-6 li.product-category.product h2.woocommerce-loop-category__title mark.count {
  display: inline-block;
}/* End custom CSS */