.elementor-kit-5{--e-global-color-primary:#1A1A1A;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#DA7756;--e-global-color-b5aeb33:#F4F7FE;--e-global-color-c58817e:#1A2233;--e-global-color-5420d44:#2D63D1;--e-global-color-58be983:#ffffff;--e-global-color-09cc561:#0d141a;--e-global-color-a495fd4:#B8C0CC;--e-global-color-dff8941:#F4F7FE;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-5535e8e-font-family:"Playfair Display";--e-global-typography-5535e8e-font-size:3rem;--e-global-typography-5535e8e-font-weight:700;--e-global-typography-c83476d-font-family:"Playfair Display";--e-global-typography-c83476d-font-size:2.5rem;--e-global-typography-c83476d-font-weight:bold;--e-global-typography-ff8f921-font-family:"Playfair Display";--e-global-typography-ff8f921-font-size:2.3rem;--e-global-typography-ff8f921-font-weight:bold;--e-global-typography-887fca2-font-family:"DM Sans";--e-global-typography-887fca2-font-size:1rem;--e-global-typography-887fca2-font-weight:400;--e-global-typography-2142591-font-family:"DM Sans";--e-global-typography-2142591-font-size:1rem;--e-global-typography-2142591-font-weight:700;--e-global-typography-6e52843-font-family:"DM Sans";--e-global-typography-6e52843-font-size:1rem;--e-global-typography-6e52843-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 h1{font-family:"Playfair Display", Sans-serif;}.elementor-kit-5 h2{font-family:"Playfair Display", Sans-serif;}.elementor-kit-5 h3{font-family:"Playfair Display", Sans-serif;}.elementor-kit-5 h4{font-family:"Playfair Display", Sans-serif;}.elementor-kit-5 h5{font-family:"Playfair Display", Sans-serif;}.elementor-kit-5 h6{font-family:"Playfair Display", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.entry-title, .wp-block-post-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-c83476d-font-size:1.9rem;--e-global-typography-ff8f921-font-size:1.9rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================
   LUVFINDS — WOOCOMMERCE + ELEMENTOR CUSTOM CSS (v3)
   Paste into: Elementor → Site Settings → Custom CSS
   (or Appearance → Customize → Additional CSS)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --lf-accent: #DA7756;
  --lf-accent-dark: #C2633E;
  --lf-bg-soft: #F7F7F7;
  --lf-bg-hero: #F5F5F5;
  --lf-border: #E8E8E8;
  --lf-text: #1A1A1A;
  --lf-text-muted: #888;
}

body, .woocommerce {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--lf-text);
}

/* ---------- HEADINGS ---------- */
.woocommerce-products-header__title,
.product_title,
h1.entry-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--lf-text);
}

/* ---------- HIDE DEFAULT WOOCOMMERCE SUCCESS NOTICES ----------
   Hides the green/olive "Cart updated.", "Coupon applied", etc. banners
   sitewide, since we use the custom add-to-cart checkmark animation
   (below) and the cart page's own live-updating totals instead. */
.woocommerce-notices-wrapper .woocommerce-message {
  display: none !important;
}

/* ---------- PRODUCT GRID CARDS (Archive Products widget) ---------- */
.woocommerce ul.products li.product,
.elementor-loop-container .e-loop-item {
  background: var(--lf-bg-soft);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}
.woocommerce ul.products li.product:hover,
.elementor-loop-container .e-loop-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,.08);
}
.woocommerce ul.products li.product img {
  border-radius: 20px 20px 0 0 !important;
  aspect-ratio: 1;
  object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--lf-text);
  padding: 0 18px;
}
.woocommerce ul.products li.product .price {
  font-size: 16px;
  font-weight: 700;
  color: var(--lf-text);
  padding: 0 18px 18px;
}
.woocommerce ul.products li.product .price del {
  color: #aaa;
  font-weight: 400;
  font-size: 12px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* Sale badge → pill style */
.woocommerce span.onsale {
  background: var(--lf-accent) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 50px !important;
  padding: 4px 10px !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  min-height: unset !important;
  min-width: unset !important;
  line-height: normal !important;
}

/* ---------- ADD TO CART BUTTON (loop + single) ---------- */
.woocommerce a.add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt {
  background: var(--lf-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  transition: background .2s, transform .15s !important;
  position: relative;
  overflow: hidden;
}
.woocommerce a.add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
  background: var(--lf-accent-dark) !important;
  transform: translateY(-1px);
}

/* Loop add-to-cart as small circular "+" button (optional, matches mockup) */
.woocommerce a.add_to_cart_button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 0;
  flex-shrink: 0;
}
.woocommerce a.add_to_cart_button::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
}

/* ---------- ADD TO CART → CHECKMARK ANIMATION ----------
   Works with the add-to-cart-checkmark.js snippet, which toggles the
   "lf-added" class on the clicked button for ~1.5s after a successful
   AJAX add-to-cart. Works on both the round loop "+" button and the
   full-width single-product button. */
.woocommerce a.add_to_cart_button.lf-added::after {
  content: "✓" !important;
}
.woocommerce .single_add_to_cart_button.lf-added,
.woocommerce a.add_to_cart_button.lf-added {
  background: #4CAF50 !important;
}
.woocommerce .single_add_to_cart_button.lf-added {
  color: #fff !important;
}
/* Swap the full-width button's text via a data attribute the JS sets,
   without touching WooCommerce's own text node directly. */
.woocommerce .single_add_to_cart_button.lf-added .lf-added-label {
  display: inline !important;
}
.woocommerce .single_add_to_cart_button.lf-added .lf-original-label {
  display: none !important;
}

/* Little cart-bubble pulse, used on the header cart icon count when an
   item is added — targets the common ".cart-contents-count" / WooCommerce
   Menu Cart widget badge. Adjust .elementor-kit-5 if your header badge differs. */
.lf-cart-pulse {
  animation: lfCartPulse .4s ease;
}
@keyframes lfCartPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- FILTER / SORT PILLS ---------- */
.lf-filter-btn, .woocommerce-ordering select,
.elementor-button.lf-pill {
  background: #fff;
  border: 1.5px solid var(--lf-border) !important;
  border-radius: 50px !important;
  padding: 9px 18px !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--lf-text);
  transition: all .2s;
}
.lf-filter-btn:hover, .lf-filter-btn.active,
.elementor-button.lf-pill:hover {
  background: var(--lf-accent) !important;
  border-color: var(--lf-accent) !important;
  color: #fff !important;
}

/* ---------- CART PAGE ---------- */

/* Coupon field + button */
.coupon.e-cart-section {
  display: flex !important;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
}
.coupon .form-row.coupon-col {
  display: flex !important;
  gap: 10px;
  width: 100%;
}
.coupon input#coupon_code {
  border: 1.5px solid var(--lf-border) !important;
  border-radius: 50px !important;
  padding: 11px 20px !important;
  font-size: 14px;
  background: #fff !important;
  flex: 1;
}
.coupon button.e-apply-coupon {
  background: #fff !important;
  color: var(--lf-text) !important;
  border: 1.5px solid var(--lf-text) !important;
  border-radius: 50px !important;
  padding: 11px 24px !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.coupon button.e-apply-coupon:hover {
  background: var(--lf-text) !important;
  color: #fff !important;
}

/* Delete (X) button — thinner, right-aligned, muted gray */
td.product-remove {
  text-align: right !important;
  width: 30px;
}
td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: var(--lf-text-muted) !important;
  border-radius: 50%;
  transition: color .2s, background .2s;
  text-decoration: none !important;
}
td.product-remove a.remove:hover {
  color: var(--lf-accent) !important;
  background: var(--lf-bg-hero) !important;
}

/* Product name links inside cart table — dark gray, not WooCommerce default blue */
.woocommerce-cart-form .cart_item td.product-name a,
.shop_table .cart_item a {
  color: var(--lf-text) !important;
  font-weight: 500;
  text-decoration: none;
}
.woocommerce-cart-form .cart_item td.product-name a:hover,
.shop_table .cart_item a:hover {
  color: var(--lf-accent) !important;
}

/* ---------- QUANTITY STEPPER (works with the qty-stepper.js snippet) ---------- */
.quantity.lf-qty,
.quantity {
  display: inline-flex !important;
  align-items: center;
  border: 1.5px solid var(--lf-border) !important;
  border-radius: 50px !important;
  overflow: hidden;
  width: auto !important;
  background: #fff !important;
}
.quantity.lf-qty input.qty,
.quantity input.qty {
  width: 36px !important;
  min-width: 36px !important;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  -moz-appearance: textfield;
  color: var(--lf-text) !important;
}
.quantity.lf-qty input.qty::-webkit-inner-spin-button,
.quantity.lf-qty input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Stepper +/- buttons — force override Elementor's default active/hover color */
.lf-qty-btn,
.quantity .minus,
.quantity .plus {
  width: 38px !important;
  height: 44px !important;
  background: #fff !important;
  border: none !important;
  font-size: 16px !important;
  color: var(--lf-text) !important;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: background .2s;
  flex-shrink: 0;
}
.lf-qty-btn:hover,
.quantity .minus:hover,
.quantity .plus:hover {
  background: var(--lf-bg-hero) !important;
  color: var(--lf-text) !important;
}
.quantity .minus:active,
.quantity .plus:active,
.quantity .minus:focus,
.quantity .plus:focus {
  background: var(--lf-bg-hero) !important;
  color: var(--lf-text) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- WISHLIST BUTTON (large, single product page) ----------
   If your wishlist plugin/widget uses a different class, adjust .elementor-kit-5
   after checking the inspector, same approach as other elements above. */
.lf-wishlist-lg,
.single_add_to_cart_button + .wishlist-button,
.yith-wcwl-add-to-wishlist a {
  width: 50px !important; height: 50px !important;
  border: 1.5px solid var(--lf-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  font-size: 20px;
  cursor: pointer;
  display: flex !important; align-items: center; justify-content: center;
  transition: border-color .2s;
  flex-shrink: 0;
}
.lf-wishlist-lg:hover,
.yith-wcwl-add-to-wishlist a:hover {
  border-color: var(--lf-accent) !important;
}

/* ---------- BUY NOW BUTTON (FIXED) ----------
   Applies consistent height, strips any multi-layer shadows/borders, 
   and standardizes button heights sitewide. */
.lf-buy-now-btn,
.elementor-button.lf-buy-now-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--lf-text) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  
  /* Matches standard single button height calculation */
  height: 48px !important; 
  line-height: 48px !important;
  padding: 0 24px !important;
  
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
  cursor: pointer;
  transition: background .2s;
  
  /* Strips out the dual-layer transparent background halo effect */
  outline: none !important;
  box-shadow: none !important;
}

.lf-buy-now-btn:hover {
  background: #000 !important;
}

.lf-buy-now-btn:active,
.lf-buy-now-btn:focus {
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- ADD TO CART & STRUCTURAL LAYOUT ALIGNMENT ----------
   Forces identical sizing across both simple and variation product forms,
   and standardizes margin blocks. */

/* 1. Base Add to Cart Sizing Rules */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt {
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* 2. Style alignment for Simple Product templates (e.g., image_f384e6.png) */
.woocommerce form.cart:not(.variations_form) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px !important;
}

.woocommerce form.cart:not(.variations_form) .single_add_to_cart_button {
  flex: 1 !important;
}

/* 3. Style alignment for Variable Product templates (e.g., image_f384c2.png) */
.woocommerce-variation-add-to-cart.variations_button {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 0 !important; /* Managed by the form layout instead */
  width: 100% !important;
}

.woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
  flex: 1 !important;
}

/* 4. Global spacing control between the Add To Cart area and Buy Now Button */
.woocommerce form.cart .quantity,
.woocommerce form.cart .woocommerce-variation-add-to-cart,
.woocommerce form.cart .single_add_to_cart_button {
  margin-bottom: 0 !important;
}

/* Enforces a structured, uniform 16px vertical gap right before the Buy Now button element */
.lf-buy-now-btn {
  margin-top: 16px !important;
}


/* ==========================================================================
   LUVFINDS — LOOP GRID PILL & STATE STYLING FIX
   ========================================================================== */

/* 1. Reset & Force the Circular Orange Button Layout */
.elementor-loop-container .add_to_cart_button,
.woocommerce ul.products li.product a.add_to_cart_button,
.e-loop-add-to-cart .add_to_cart_button,
.woocommerce a.add_to_cart_button {
  background: var(--lf-accent) !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border-radius: 50% !important;
  
  /* Flexbox settings to perfectly center the icon inside the circle */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
  transition: background .2s, transform .15s !important;
}

/* 2. Set Content Icons Separately to Protect Alignment */
.elementor-loop-container .add_to_cart_button::after,
.woocommerce ul.products li.product a.add_to_cart_button::after,
.e-loop-add-to-cart .add_to_cart_button::after,
.woocommerce a.add_to_cart_button::after {
  content: "+" !important;
  font-size: 18px !important;
  font-family: Arial, sans-serif !important;
  font-weight: normal !important;
  line-height: 1 !important;
  display: block !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

/* Maintain layout integrity during loading states */
.elementor-loop-container .add_to_cart_button.loading::after,
.woocommerce a.add_to_cart_button.loading::after {
  content: "+" !important;
}
.elementor-loop-container .add_to_cart_button.loading::before,
.woocommerce a.add_to_cart_button.loading::before {
  display: none !important; 
}

/* 3. Force the Gray Success State Overlay */
.elementor-loop-container .add_to_cart_button.lf-added,
.woocommerce ul.products li.product a.add_to_cart_button.lf-added,
.woocommerce a.add_to_cart_button.lf-added,
.woocommerce .single_add_to_cart_button.lf-added {
  background: #7A7A7A !important;
  color: #fff !important;
}

/* Swaps out the content element cleanly while maintaining structural alignment */
.elementor-loop-container .add_to_cart_button.lf-added::after,
.woocommerce ul.products li.product a.add_to_cart_button.lf-added::after,
.woocommerce a.add_to_cart_button.lf-added::after {
  content: "✓" !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* 4. Complete Lockdown on "View Cart" Elements */
.elementor-loop-container .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart,
a.added_to_cart.view_cart,
.e-loop-add-to-cart .added_to_cart {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------- STRIP DEFAULT WOOCOMMERCE VARIATIONS TABLE ----------
   WooCommerce wraps variation swatches in a <table class="variations">
   with default theme background/padding. The mockup has variants sitting
   plainly on white background with no box, so we strip the table chrome
   entirely and hide the redundant ": Michy" text + "Clear" link. */
.variations,
.variations tbody,
.variations tr,
.variations th.label,
.variations td.value {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
}
.variations th.label {
  font-size: 13px;
  font-weight: 700;
  color: var(--lf-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.variations th.label label { display: inline; }
/* Hide the redundant ": Michy" selected-value text — the highlighted pill already shows this */
.woo-selected-variation-item-name {
  display: none !important;
}
/* Hide the "Clear" link, not present in the mockup */
.reset_variations {
  display: none !important;
}
.single-product-variable-items.variable-items-wrapper {
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

/* ---------- VARIATION SWATCHES (Variation Swatches for WooCommerce plugin) ----------
   Confirmed classes from live inspector: .variable-item.button-variable-item
   with text inside .variable-item-span-button, and aria-checked="true" on selection. */
.variable-item.button-variable-item {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  border-radius: 50px !important;
  border: 1.5px solid var(--lf-border) !important;
  background: #fff !important;
  padding: 9px 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 4px 8px 4px 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  transition: all .2s;
}
.variable-item.button-variable-item .variable-item-span-button {
  font-size: 13px;
  font-weight: 500;
  color: var(--lf-text);
  white-space: nowrap !important;
  overflow: visible !important;
}
.variable-item.button-variable-item:hover,
.variable-item.button-variable-item[aria-checked="true"] {
  border-color: var(--lf-accent) !important;
  background: #FFF3EE !important;
}
.variable-item.button-variable-item[aria-checked="true"] .variable-item-span-button {
  color: var(--lf-accent) !important;
}

/* ---------- PRODUCT DATA TABS (Description / Reviews / Shipping) ---------- */
.woocommerce-tabs ul.tabs li {
  border: none !important;
  background: none !important;
}
.woocommerce-tabs ul.tabs li a {
  font-size: 14px;
  font-weight: 600;
  color: var(--lf-text-muted);
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--lf-text);
  border-bottom-color: var(--lf-accent);
}

/* ---------- ACCORDION (Elementor widget) ---------- */
.elementor-accordion-item .elementor-tab-title {
  font-weight: 600;
  font-size: 14px;
}
.elementor-accordion-item .elementor-tab-title.elementor-active {
  color: var(--lf-accent);
}

/* ---------- PAGINATION ---------- */
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
  width: 40px; height: 40px;
  border-radius: 50% !important;
  border: 1.5px solid var(--lf-border) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--lf-text);
  background: #fff;
  transition: all .2s;
}
.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--lf-accent) !important;
  border-color: var(--lf-accent) !important;
  color: #fff !important;
}

/* ---------- PRICE FILTER SLIDER ---------- */
.price_slider_amount { font-size: 13px; color: var(--lf-text-muted); }
.ui-slider .ui-slider-range,
.ui-slider .ui-slider-handle {
  background: var(--lf-accent) !important;
  border-color: var(--lf-accent) !important;
}

/* ---------- WOOCOMMERCE INFO NOTICE (e.g. "Your cart is currently empty.") ---------- */
.woocommerce-info {
  border-top-color: var(--lf-accent) !important;
  background: var(--lf-bg-soft) !important;
  border-radius: 12px;
  color: var(--lf-text) !important;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  padding: 16px 20px !important;
  box-shadow: none !important;
}
.woocommerce-info::before {
  display: none !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px){
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; }
}


/* ==========================
   LOOP GRID LAYOUT FIX
   ========================== */

.elementor-loop-container .e-loop-item,
.elementor-loop-container .elementor-widget-theme-product-title,
.elementor-loop-container .elementor-widget-woocommerce-product-price{
    margin-bottom:0 !important;
}

.elementor-loop-container .elementor-widget-theme-product-title{
    flex-grow:0 !important;
}

.elementor-loop-container .elementor-widget-woocommerce-product-price{
    margin-top:auto !important;
}

.elementor-loop-container .elementor-widget-container{
    height:auto !important;
}

.woocommerce ul.products li.product .price,
.elementor-widget-woocommerce-product-price .price{
    white-space: nowrap;
    flex-wrap:nowrap;
    align-items:baseline;
    gap:4px;
}

/* ---------- LOOP CARD DESCRIPTION ---------- */

/* Keep all descriptions the same height */
.elementor-widget-woocommerce-product-short-description,
.elementor-widget-theme-post-excerpt,
.woocommerce ul.products li.product .woocommerce-product-details__short-description{
    line-height: 1.45;
    min-height: calc(1.45em * 2);
}

/* Display only 2 lines */
.elementor-widget-woocommerce-product-short-description p,
.elementor-widget-theme-post-excerpt p,
.woocommerce ul.products li.product .woocommerce-product-details__short-description p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* ---------- LOOP CARD CONTENT ALIGNMENT ---------- */

.elementor-loop-container .e-loop-item{
    display:flex;
    flex-direction:column;
    height:100%;
}

.elementor-loop-container .elementor-widget-wrap{
    display:flex;
    flex-direction:column;
    height:100%;
}

/* ---------- LOOP CARD TITLE ---------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    line-height: 1.3;
    min-height: calc(1.3em * 2);
}

/* ==========================================================================
   LUVFINDS — SINGLE PRODUCT MOBILE OVERLAP FIX
   ========================================================================== */

@media (max-width: 767px) {
  /* 1. Force the main product layout container to stack vertically */
  .single-product .elementor-page .elementor-section-wrap > .elementor-element,
  .single-product .elementor-fit-to-screen,
  .single-product .product {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: unset !important;
  }

  /* 2. Ensure the product gallery/image stays full width and doesn't swallow text */
  .single-product .woocommerce-product-gallery,
  .single-product .elementor-widget-woocommerce-product-images {
    width: 100% !important;
    position: relative !important;
    margin-bottom: 20px !important;
    height: auto !important;
  }

  /* 3. Force the title/summary area to sit completely clear below the image */
  .single-product .summary.entry-summary,
  .single-product .elementor-column:has(.product_title) {
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-left: 20px !important;  /* Matches your branding margins */
    padding-right: 20px !important;
    box-sizing: border-box !important;
    display: block !important;
    height: auto !important;
  }

  /* 4. Safe structural clear to prevent text components from overlapping each other */
  .single-product .product_title,
  .single-product .elementor-widget-woocommerce-product-title,
  .single-product .price,
  .single-product .elementor-widget-woocommerce-product-price,
  .single-product .woocommerce-product-details__short-description {
    position: relative !important;
    display: block !important;
    clear: both !important;
    top: auto !important;
    left: auto !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }
}/* End custom CSS */