.elementor-34 .elementor-element.elementor-element-4b342a8{--display:flex;--min-height:300px;--justify-content:center;--overlay-opacity:0.5;}.elementor-34 .elementor-element.elementor-element-4b342a8:not(.elementor-motion-effects-element-type-background), .elementor-34 .elementor-element.elementor-element-4b342a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://boyuanrope.digitalshri.com/wp-content/uploads/2026/06/boyuanrope-bg.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-34 .elementor-element.elementor-element-4b342a8::before, .elementor-34 .elementor-element.elementor-element-4b342a8 > .elementor-background-video-container::before, .elementor-34 .elementor-element.elementor-element-4b342a8 > .e-con-inner > .elementor-background-video-container::before, .elementor-34 .elementor-element.elementor-element-4b342a8 > .elementor-background-slideshow::before, .elementor-34 .elementor-element.elementor-element-4b342a8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-34 .elementor-element.elementor-element-4b342a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-34 .elementor-element.elementor-element-d9b19c4{text-align:center;}.elementor-34 .elementor-element.elementor-element-d9b19c4 .elementor-heading-title{color:#FFFFFF;}.elementor-34 .elementor-element.elementor-element-8518f20{--display:flex;--margin-top:20px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}.elementor-34 .elementor-element.elementor-element-a19694e{margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}@media(max-width:1024px){.elementor-34 .elementor-element.elementor-element-4b342a8{--min-height:200px;}}@media(max-width:767px){.elementor-34 .elementor-element.elementor-element-4b342a8{--min-height:150px;}}/* Start custom CSS for shortcode, class: .elementor-element-a19694e *//*
=============================================================
  WooCommerce Product Grid — Read More Button Hover Effect
  Site: boyuanrope.digitalshri.com
  
  Paste into: Appearance > Customize > Additional CSS
=============================================================
*/

/* --- Card hover lift + shadow --- */
.woocommerce ul.products li.product {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  transform: translateY(-3px);
}

/* --- Image zoom on hover --- */
.woocommerce ul.products li.product a img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

/* --- Image wrapper: needed for button to sit over image --- */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  position: relative;
  display: block;
  overflow: hidden;
}

/* ===== READ MORE BUTTON — Default State (always visible, black) ===== */
.woocommerce ul.products li.product a.button.product_type_simple {
  position: absolute !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  
  /* Always visible */
  opacity: 1 !important;
  
  /* Black background */
  background: #111111 !important;
  color: #ffffff !important;
  
  /* Size */
  width: 140px !important;
  padding: 10px 0 !important;
  text-align: center !important;
  
  /* Style */
  border-radius: 5px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border: none !important;
  text-decoration: none !important;
  z-index: 5 !important;
  display: block !important;
  
  /* Smooth animation */
  transition: width 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* ===== READ MORE BUTTON — Hover State (green + wider) ===== */
.woocommerce ul.products li.product:hover a.button.product_type_simple {
  background: #27ae60 !important;
  width: 80% !important;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.4) !important;
}

/* --- Mobile: slightly smaller default width --- */
@media (max-width: 767px) {
  .woocommerce ul.products li.product a.button.product_type_simple {
    width: 110px !important;
    font-size: 12px !important;
  }
  .woocommerce ul.products li.product:hover a.button.product_type_simple {
    width: 85% !important;
  }
}

/*
=============================================================
  Dynamic: Ye CSS automatically sabhi products pe kaam
  karega — naye products add karo, effect automatically
  apply hoga. Kuch bhi change nahi karna padega.
=============================================================
*//* End custom CSS */