.elementor-29444 .elementor-element.elementor-element-83b2347{--display:flex;}.elementor-29444 .elementor-element.elementor-element-7f9d1f8{--display:flex;}.elementor-29444 .elementor-element.elementor-element-1f102ea{--spacer-size:100px;}.elementor-29444 .elementor-element.elementor-element-98a020e{--display:flex;}/* Start custom CSS for wd_products, class: .elementor-element-e8566b1 *//* grid wrapper — apply to the container holding your product columns */
.products-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  align-items: start;
}

/* main card wrapper — ensure each product is inside .product-card */
.product-card{
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(10,10,10,0.04);
  box-shadow: 0 6px 14px rgba(10,20,30,0.04);
  transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms ease;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  cursor: default;
}

/* only the hovered single card lifts */
.product-card:hover,
.product-card:focus-within{
  transform: translateY(-10px);
  box-shadow: 0 22px 50px rgba(12,20,35,0.14);
}

/* optional circular badge (top-left) */
.product-card .badge{
  position: absolute;
  left: 14px;
  top: 12px;
  background: #39a55a;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 10px;
  border-radius: 50px;
  box-shadow: 0 6px 14px rgba(10,20,40,0.06);
  z-index: 3;
}

/* image container */
.product-card .img-wrap{
  width: 100%;
  height: 260px;           /* tweak if you want taller/shorter images */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(250,250,250,0.9);
  margin-bottom: 14px;
}
.product-card .img-wrap img{
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.product-card:hover .img-wrap img{
  transform: scale(1.06);
}

/* title/meta/price inside the box */
.product-card .product-title{ font-size: 1rem; font-weight:600; color:#0b1d39; margin:0 0 6px; }
.product-card .product-meta{ font-size:0.88rem; color:#9aa1a7; margin-bottom:6px; }
.product-card .price{ color:#22a455; font-weight:700; font-size:1rem; }

/* make the entire card clickable (optional helper) */
.product-card a.thumb-link{ display:block; color:inherit; text-decoration:none; }

/* responsive tweaks */
@media (max-width:480px){
  .product-card .img-wrap{ height:180px; }
}/* End custom CSS */