.elementor-1589 .elementor-element.elementor-element-c9e9abe{--display:flex;}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{color:var( --e-global-color-text );}.elementor-1589 .elementor-element.elementor-element-64039f6.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-1589 .elementor-element.elementor-element-64039f6.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-1589 .elementor-element.elementor-element-64039f6.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-1589 .elementor-element.elementor-element-64039f6.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for wc-archive-products, class: .elementor-element-64039f6 *//* ============================================================
   Antara Books — Best Sellers — COMPLETE, UNSCOPED VERSION
   Delete everything else in your Custom CSS box, paste only this.

   FIX IN THIS VERSION: the real Add to Cart button was only
   showing on hover because the theme sets it to opacity:0 /
   visibility:hidden by default and reveals it via :hover.
   Forcing display:block alone doesn't override that — this
   version also forces opacity:1 and visibility:visible so it's
   always shown.
   ============================================================ */

:root{
  --ab-red:#E13B36;
  --ab-red-dark:#C4241F;
  --ab-ink:#1B1B1B;
  --ab-line:#EDEDED;
}

/* ---------- Card wrapper ---------- */
.e-loop-item,
li.product{
  background:#fff !important;
  border:1px solid var(--ab-line) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow:none !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
  position:relative !important;
}
.e-loop-item:hover,
li.product:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.10) !important;
}

/* ---------- Product image ---------- */
.e-loop-item img,
li.product img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3/4.3 !important;
  object-fit:cover !important;
  object-position:center top !important;
  border-radius:0 !important;
  margin:0 !important;
}

/* ---------- Sale badge ---------- */
.onsale{
  position:absolute !important;
  top:10px !important;
  left:10px !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  min-width:0 !important;
  line-height:1 !important;
  border-radius:4px !important;
  background:var(--ab-red-dark) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:800 !important;
  padding:6px 10px !important;
  margin:0 !important;
  text-transform:uppercase !important;
  z-index:3 !important;
}

/* ---------- Title ---------- */
.elementor-widget-theme-post-title .elementor-heading-title,
.elementor-widget-woocommerce-product-title .elementor-heading-title,
.e-loop-item h2,
.e-loop-item h3,
li.product .woocommerce-loop-product__title{
  font-size:13.5px !important;
  font-weight:700 !important;
  color:var(--ab-ink) !important;
  line-height:1.3 !important;
  padding:12px 14px 0 !important;
  margin:0 0 6px !important;
  text-align:left !important;
}

/* ---------- Rating ---------- */
.star-rating{
  margin:0 0 8px 14px !important;
  font-size:13px !important;
}
.star-rating span::before,
.star-rating::before{
  color:#F5A623 !important;
}

/* ---------- Price ---------- */
.price{
  padding:0 14px !important;
  display:block !important;
  margin:0 0 12px !important;
  text-align:left !important;
}
.price del{
  color:#9c9c9c !important;
  text-decoration:line-through !important;
  font-size:12px !important;
  opacity:1 !important;
  margin-right:6px !important;
}
.price ins{
  text-decoration:none !important;
  font-weight:800 !important;
  font-size:15px !important;
  color:var(--ab-red-dark) !important;
  background:none !important;
}

/* ---------- Add to cart: hide EVERY instance by default ---------- */
.elementor-widget-woocommerce-product-add-to-cart-button{
  display:none !important;
}

/* ---------- re-show + style ONLY the one after the price widget —
   forcing display, opacity AND visibility so hover isn't required ---------- */
.elementor-widget-woocommerce-product-price ~ .elementor-widget-woocommerce-product-add-to-cart-button{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  transition:none !important;
}
.elementor-widget-woocommerce-product-price ~ .elementor-widget-woocommerce-product-add-to-cart-button a,
.elementor-widget-woocommerce-product-price ~ .elementor-widget-woocommerce-product-add-to-cart-button button{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  transition:none !important;

  width:calc(100% - 28px) !important;
  margin:0 14px 14px !important;
  padding:11px 10px !important;

  text-align:center !important;
  background:var(--ab-red) !important;
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  line-height:1.3 !important;

  border:none !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
.elementor-widget-woocommerce-product-price ~ .elementor-widget-woocommerce-product-add-to-cart-button a:hover{
  background:var(--ab-red-dark) !important;
}

/* fallback for plain WooCommerce markup with only one button */
li.product a.add_to_cart_button,
li.product a.added_to_cart,
li.product a.button{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  width:calc(100% - 28px) !important;
  margin:0 14px 14px !important;
  padding:11px 10px !important;
  text-align:center !important;
  background:var(--ab-red) !important;
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  border:none !important;
  border-radius:6px !important;
  box-shadow:none !important;
}

/* ---------- Grid spacing ---------- */
.elementor-loop-container{
  gap:18px !important;
}
/* Add this AFTER everything else in your CSS (very end of the file).
   Targets the exact element: an <a> with BOTH classes
   add_to_cart_button AND ast-on-card-button together — this is
   more specific than "li.product a.add_to_cart_button" alone,
   so it wins the cascade instead of losing to that older rule. */

li.product a.add_to_cart_button.ast-on-card-button,
a.add_to_cart_button.ast-on-card-button{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}/* End custom CSS */