.elementor-6714 .elementor-element.elementor-element-3eac63a{--display:flex;}/* ========== WooCommerce product card: visual polish to match screenshot ========== */
/* Paste into Appearance → Customize → Additional CSS */

/* Card shell: rounded white card with subtle shadow, keep existing layout */
.woocommerce ul.products li.product,
.woocommerce .products .product {
  background: #fff;
  border-radius: 12px;
  padding: 18px 16px 12px;
  border: 1px solid rgba(30,40,45,0.04);
  box-shadow: 0 6px 22px rgba(8,12,16,0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Sale badge (top-left red pill) */
.woocommerce ul.products li.product .onsale,
.woocommerce .products .product .onsale,
.woocommerce ul.products li.product .badge.onsale {
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  background: #ff3b30 !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(255,59,48,0.12) !important;
  z-index: 12 !important;
}

/* Optional "view" icon top-right if present (.view-btn or .quick-view). Style safely */
.woocommerce ul.products li.product .view-btn,
.woocommerce ul.products li.product .quick-view,
.woocommerce ul.products li.product .product-loop-view,
.woocommerce .products .product .view-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(18,34,46,0.95);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(8,12,16,0.08);
  z-index: 11;
  font-size: 14px;
}

/* Product image: centered, generous size */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce .products .product a.woocommerce-LoopProduct-link {
  display: block;
  width: 100%;
  text-align: center;
}

.woocommerce ul.products li.product a img,
.woocommerce .products .product a img {
  margin: 6px auto 12px;
  width: auto;
  max-width: 88%;
  max-height: 300px;
  object-fit: contain;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  border-radius: 6px;
}

/* gentle image scale on hover */
.woocommerce ul.products li.product:hover a img,
.woocommerce .products .product:hover a img {
  transform: scale(1.03);
}

/* Title: centered, bold, dark blue */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce .products .product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.product_title,
.woocommerce .products .product h2.product_title {
  text-align: center;
  font-weight: 800;
  color: #0f2740;
  font-size: 16px;
  line-height: 1.18;
  margin: 4px 8px 8px;
  padding: 0;
  white-space: normal;
  letter-spacing: 0;
}

/* Price block: struck original price + red sale price */
.woocommerce ul.products li.product .price,
.woocommerce .products .product .price {
  text-align: center;
  margin: 4px 0 6px;
  font-weight: 800;
  color: #e53935;
  font-size: 15px;
}

/* crossed/old price */
.woocommerce ul.products li.product .price del,
.woocommerce .products .product .price del {
  color: #c9c9c9;
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 700;
}

/* sale amount style (strong red) */
.woocommerce ul.products li.product .price ins,
.woocommerce .products .product .price ins,
.woocommerce ul.products li.product .price .amount,
.woocommerce .products .product .price .amount {
  color: #e53935 !important;
  font-weight: 900;
}

/* Stock left text (small bold, centered, red-ish) */
.woocommerce ul.products li.product p.stock,
.woocommerce .products .product p.stock,
.woocommerce ul.products li.product .stock,
.woocommerce .products .product .stock {
  text-align: center;
  color: #d33b30;
  font-weight: 700;
  font-size: 13px;
  margin-top: 6px;
}

/* ---------- Stock progress (slim pink track + red handle) ---------- */
/* Ensure wrapper exists in HTML with class .stock-progress */
.woocommerce ul.products li.product .stock-progress,
.woocommerce .products .product .stock-progress {
  margin: 10px 12px;
  height: 10px;
  background: rgba(255,120,140,0.12); /* pale pink track */
  border-radius: 10px;
  position: relative;
  overflow: visible;
}

/* fill: width should be set inline (style="width:XX%") or via plugin output */
.woocommerce ul.products li.product .stock-progress .progress-fill,
.woocommerce .products .product .stock-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg,#ff3b30,#ff7a80);
  border-radius: 10px;
  width: 18%; /* fallback - plugin/inline style should override */
  transition: width .45s cubic-bezier(.2,.9,.25,1);
}

/* small red circular handle centered on the end of the fill */
.woocommerce ul.products li.product .stock-progress .handle,
.woocommerce .products .product .stock-progress .handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(0% - 7px); /* plugin should set left inline like left:calc(30% - 7px) */
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff3b30;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(255,59,48,0.18);
}

/* "Limited Time Offer" label: centered, bluish, underlined */
.woocommerce ul.products li.product .limited-time,
.woocommerce .products .product .limited-time {
  text-align: center;
  color: #2f6bb3;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  text-decoration: underline;
}

/* ---------- Countdown boxes ---------- */
/* Target common plugin outputs: .deal-countdown, .product-countdown, .countdown-box, .yith-countdown */
.woocommerce ul.products li.product .deal-countdown,
.woocommerce ul.products li.product .product-countdown,
.woocommerce ul.products li.product .countdown-box,
.woocommerce ul.products li.product .yith-countdown,
.woocommerce .products .product .deal-countdown,
.woocommerce .products .product .product-countdown,
.woocommerce .products .product .countdown-box,
.woocommerce .products .product .yith-countdown {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 6px 8px 10px;
  flex-wrap: nowrap;
}

/* individual box */
.woocommerce ul.products li.product .deal-countdown .time,
.woocommerce ul.products li.product .product-countdown .time,
.woocommerce ul.products li.product .countdown-box .time,
.woocommerce ul.products li.product .yith-countdown .time,
.woocommerce .products .product .deal-countdown .time,
.woocommerce .products .product .product-countdown .time,
.woocommerce .products .product .countdown-box .time {
  width: 74px;
  background: #fff;
  border: 1px solid rgba(20,30,36,0.06);
  border-radius: 4px;
  padding: 10px 6px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(12,20,25,0.02);
}

/* big number (days/hours/minutes/seconds) - bold red */
.woocommerce ul.products li.product .deal-countdown .time .num,
.woocommerce ul.products li.product .product-countdown .time .num,
.woocommerce ul.products li.product .countdown-box .time .num,
.woocommerce .products .product .deal-countdown .time .num,
.woocommerce .products .product .product-countdown .time .num {
  font-size: 20px;
  font-weight: 900;
  color: #e53935;
  line-height: 1;
  display: block;
}

/* small label under number (uppercase, muted) */
.woocommerce ul.products li.product .deal-countdown .time .label,
.woocommerce ul.products li.product .product-countdown .time .label,
.woocommerce ul.products li.product .countdown-box .time .label,
.woocommerce .products .product .deal-countdown .time .label,
.woocommerce .products .product .product-countdown .time .label {
  font-size: 11px;
  font-weight: 800;
  color: #6b7884;
  margin-top: 6px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

/* ---------- Bottom controls row ---------- */
.woocommerce ul.products li.product .product-controls,
.woocommerce .products .product .product-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(21,30,33,0.04);
}

/* small square icon buttons */
.woocommerce ul.products li.product .icon-btn,
.woocommerce .products .product .icon-btn,
.woocommerce ul.products li.product .product-controls button,
.woocommerce .products .product .product-controls button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(21,30,33,0.06);
  background: #fff;
  box-shadow: 0 6px 18px rgba(8,12,16,0.03);
  cursor: pointer;
}

/* Add to cart center: flat white button with bold text */
.woocommerce ul.products li.product .add-to-cart-wrap,
.woocommerce .products .product .add-to-cart-wrap {
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
  padding: 6px 10px;
}

.woocommerce ul.products li.product .add-to-cart-wrap .button,
.woocommerce .products .product .add-to-cart-wrap .button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce .products .product .button.add_to_cart_button {
  min-width: 180px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid rgba(21,30,33,0.06);
  background: #fff;
  font-weight: 800;
  color: #1f2d36;
  box-shadow: 0 6px 18px rgba(8,12,16,0.03);
}

/* Favorite/heart on right */
.woocommerce ul.products li.product .product-controls .fav,
.woocommerce .products .product .product-controls .fav {
  width:36px;
  height:36px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(21,30,33,0.06);
  background: #fff;
  box-shadow: 0 6px 18px rgba(8,12,16,0.03);
}

/* ---------- Small responsive tweaks (do not change layout behavior) ---------- */
@media (max-width: 900px) {
  .woocommerce ul.products li.product a img,
  .woocommerce .products .product a img { max-height: 260px; }
  .woocommerce ul.products li.product .stock-progress { margin-left: 10px; margin-right: 10px; }
}

@media (max-width: 520px) {
  .woocommerce ul.products li.product .deal-countdown .time,
  .woocommerce .products .product .deal-countdown .time { width: 62px; padding: 8px 6px; }
  .woocommerce ul.products li.product .add-to-cart-wrap .button,
  .woocommerce .products .product .add-to-cart-wrap .button { min-width: 150px; }
}

/* ========== NOTES ==========
- This CSS expects the stock/progress markup like:
  
    
    
  
  If your plugin doesn't output that, add the small wrapper in your template or tell me the plugin markup.

- Common countdown classnames targeted: .deal-countdown, .product-countdown, .countdown-box, .yith-countdown.
  If your countdown plugin uses other .elementor-6714 .elementor-element.elementor-element-93bdf46s, give me one product's HTML and I will adapt.

- Paste the whole block into Additional CSS, clear any CSS cache, then refresh.
========================================== */