.elementor-408 .elementor-element.elementor-element-4244383{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-408 .elementor-element.elementor-element-21d9422{--display:flex;}.elementor-408 .elementor-element.elementor-element-5a51edb{--display:flex;}.elementor-408 .elementor-element.elementor-element-4c34dff .cart button, .elementor-408 .elementor-element.elementor-element-4c34dff .cart .button{transition:all 0.2s;}.elementor-408 .elementor-element.elementor-element-4c34dff .quantity .qty{transition:all 0.2s;}.elementor-408 .elementor-element.elementor-element-4f4902a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-408 .elementor-element.elementor-element-34c0288.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-408 .elementor-element.elementor-element-34c0288.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-408 .elementor-element.elementor-element-34c0288.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-408 .elementor-element.elementor-element-21d9422{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-408 .elementor-element.elementor-element-4f4902a{--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-408 .elementor-element.elementor-element-34c0288.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for container, class: .elementor-element-4244383 *//* =========================================================
   Kamal Herbs — Single Product page REDESIGN
   =========================================================
   Structural change from v1: instead of stretching the image
   to match the text column's height (which only works via
   object-fit:cover cropping and still felt fragile), the image
   is now a FIXED 1:1 square card — same size on every product,
   regardless of description length. The two columns no longer
   try to match each other; they just both look intentional.
   ========================================================= */

/* --- Broad letter-spacing safety net (unchanged from before) --- */
[data-elementor-type="product"] h1,
[data-elementor-type="product"] h2,
[data-elementor-type="product"] h3,
[data-elementor-type="product"] h4,
[data-elementor-type="product"] h5,
[data-elementor-type="product"] h6,
[data-elementor-type="product"] p,
[data-elementor-type="product"] span,
[data-elementor-type="product"] a,
[data-elementor-type="product"] button,
[data-elementor-type="product"] label{
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* --- Top section background --- */
.elementor-element-4244383{
  position: relative;
  background-color: #e9f3ec !important;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(28,107,58,0.22), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(28,107,58,0.16), transparent 45%) !important;
  padding: 40px !important;
  overflow: hidden;
}
.elementor-element-4244383::before{
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 240px; height: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c6b3a' stroke-width='1.2'%3E%3Cpath d='M12 2C7 6 4 10 4 14a8 8 0 0 0 16 0c0-4-3-8-8-12z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.16;
  pointer-events: none;
  transform: rotate(15deg);
}
.elementor-element-4244383 .e-con-inner{
  position: relative;
  z-index: 2;
  align-items: flex-start !important;
}

/* --- Image column: fixed square card, same size every time --- */
.elementor-element-21d9422{
  flex: 0 0 auto !important;
  width: 44% !important;
  max-width: 480px;
}
.elementor-element-50e586c{
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 8px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.1);
  border: 1px solid rgba(28,107,58,0.08);
  position: relative;
}
.elementor-element-50e586c .woocommerce-product-gallery__wrapper{
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: #fafcfa;
}
.elementor-element-50e586c img.wp-post-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- Sale badge: simple rounded pill in the top-left corner,
   matching the badge style used on the Shop grids and Related
   Products — consistent across the whole site, and far more
   reliably positioned than a rotated diagonal ribbon. --- */
.elementor-element-50e586c .onsale,
[data-elementor-type="product"] .onsale{
  position: absolute !important;
  top: 20px !important; left: 20px !important;
  z-index: 5;
  background: #e63946 !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px !important;
  padding: 5px 14px !important;
  transform: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border-radius: 20px !important;
  min-height: 0 !important; min-width: 0 !important;
  margin: 0 !important;
}

/* --- Kill default Elementor per-widget spacing in this column so
   the whole title/price/cart/description/meta stack uses ONE
   consistent, tighter rhythm instead of each widget adding its own
   default gap on top of whatever margin I set inside it. --- */
.elementor-element-5a51edb .elementor-widget{
  margin-bottom: 0 !important;
}
.elementor-element-999f1b1,
.elementor-element-f892f67,
.elementor-element-4c34dff,
.elementor-element-e03568b,
.elementor-element-a3cc2bd{
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-element-999f1b1{ margin-bottom: 8px !important; }
.elementor-element-f892f67{ margin-bottom: 18px !important; }
.elementor-element-4c34dff{ margin-bottom: 6px !important; }
.elementor-element-e03568b{ margin-bottom: 18px !important; }

/* --- Title --- */
.elementor-element-999f1b1 h1.product_title{
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  color: #14251a !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* --- Price row: current price, strikethrough, AND a computed
   discount-percent chip (added via the companion JS snippet) --- */
.elementor-element-f892f67{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
}
.elementor-element-f892f67 p.price{
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #1c6b3a !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.elementor-element-f892f67 p.price del{
  color: #b5b5b5 !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
}
.elementor-element-f892f67 p.price ins{ text-decoration: none; }
.kh-discount-chip{
  background: #fbeaea;
  color: #e63946;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* --- Quantity stepper (+/- buttons injected by JS around the
   existing WooCommerce number input) --- */
.kh-qty-stepper{
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid #d9e2dc !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
}
.kh-qty-stepper button{
  width: 42px; height: 48px;
  background: #f4f8f5 !important;
  border: none !important;
  color: #14251a !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  font-family: 'Poppins', sans-serif !important;
  transition: background .15s ease;
}
.kh-qty-stepper button:hover{ background: #e2ece4 !important; }
.elementor-element-4c34dff .quantity .qty{
  font-family: 'Poppins', sans-serif !important;
  width: 54px !important;
  height: 48px !important;
  border: none !important;
  text-align: center;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #14251a !important;
  -moz-appearance: textfield;
}
.elementor-element-4c34dff .quantity .qty::-webkit-outer-spin-button,
.elementor-element-4c34dff .quantity .qty::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.elementor-element-4c34dff .e-atc-qty-button-holder{
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  margin-top: 4px !important;
}
.elementor-element-4c34dff .single_add_to_cart_button{
  font-family: 'Poppins', sans-serif !important;
  background: linear-gradient(180deg, #f4cc2f, #e0a900) !important;
  color: #1a1406 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase;
  letter-spacing: normal !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 32px !important;
  height: 48px !important;
  cursor: pointer;
  transition: transform .2s ease;
  box-shadow: 0 6px 16px -6px rgba(230,184,0,0.6);
}
.elementor-element-4c34dff .single_add_to_cart_button:hover{ transform: translateY(-2px); }

/* --- Trust badges row (injected by JS below Add to Cart) --- */
.kh-trust-row{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 26px 0 6px;
  padding-top: 20px;
  border-top: 1px solid #e2e8e4;
}
.kh-trust-item{
  display: flex; align-items: center; gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #5c6b62;
}
.kh-trust-item svg{ width: 18px; height: 18px; stroke: #1c6b3a; flex-shrink: 0; }

/* --- Short description --- */
.elementor-element-e03568b .woocommerce-product-details__short-description p{
  font-family: 'Poppins', sans-serif !important;
  color: #5c6b62 !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Product meta --- */
.elementor-element-a3cc2bd .product_meta{
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e2e8e4 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
}
.elementor-element-a3cc2bd .detail-container{
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.85rem !important;
  color: #7a877f !important;
}
.elementor-element-a3cc2bd .detail-label{
  font-weight: 600 !important;
  color: #14251a !important;
  margin-right: 6px;
}
.elementor-element-a3cc2bd .posted_in a{
  color: #1c6b3a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.elementor-element-a3cc2bd .posted_in a:hover{ text-decoration: underline !important; }

/* --- Full description: CSS-only styled blocks. (A real click-to-
   expand accordion isn't possible with CSS alone on plain text —
   that needs JavaScript or a native <details> element, since CSS
   has no concept of "click." This is the static version instead:
   every section always visible, styled as its own card.) --- */
.elementor-element-4f4902a{ background: #ffffff !important; }
.elementor-element-df2df8b{
  max-width: 860px;
  margin: 60px auto 0 !important;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.elementor-element-df2df8b p{
  font-family: 'Poppins', sans-serif !important;
  color: #4a564d !important;
  font-size: 0.96rem !important;
  line-height: 1.8 !important;
  margin: 0 !important;
  padding: 20px 24px;
  background: #f7faf8;
  border-left: 3px solid #1c6b3a;
  border-radius: 0 12px 12px 0;
}
.elementor-element-df2df8b p:first-line{
  font-weight: 700;
  color: #14251a;
}

/* --- Related products --- */
.elementor-element-34c0288{
  max-width: 1400px;
  margin: 70px auto 0 !important;
  padding: 0 40px 60px;
}
.elementor-element-34c0288 h2{
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  color: #14251a !important;
  text-align: center;
  margin-bottom: 8px !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}
.elementor-element-34c0288 h2::after{
  content: "";
  display: block;
  width: 48px; height: 3px;
  background: linear-gradient(90deg, #f4cc2f, #e0a900);
  border-radius: 3px;
  margin: 14px auto 32px;
}
.elementor-element-34c0288 ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  list-style: none !important;
}
.elementor-element-34c0288 ul.products li.product{
  position: relative;
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
}
.elementor-element-34c0288 ul.products li.product:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}
.elementor-element-34c0288 .woocommerce-loop-product__link{
  display: block; position: relative; width: 100%; overflow: hidden;
}
.elementor-element-34c0288 .woocommerce-loop-product__link img{
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  display: block;
  transition: transform .35s ease;
}
.elementor-element-34c0288 li.product:hover img{ transform: scale(1.05); }
.elementor-element-34c0288 .onsale{
  position: absolute !important;
  top: 14px !important; left: 14px !important; right: auto !important;
  z-index: 2;
  background: #e63946 !important;
  color: #fff !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  text-transform: uppercase;
  line-height: 1 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  left: 14px !important;
}
.elementor-element-34c0288 .woocommerce-loop-product__title{
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: #14251a !important;
  text-transform: uppercase;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  margin: 16px 16px 6px !important;
  line-height: 1.4 !important;
  min-height: calc(1.4em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.elementor-element-34c0288 li.product .price{
  margin: 0 16px 14px !important;
  font-weight: 700; font-size: .95rem; color: #14251a !important;
}
.elementor-element-34c0288 li.product .price del{
  color: #b5b5b5 !important; font-weight: 400 !important; margin-right: 8px;
}
.elementor-element-34c0288 li.product .price ins{ text-decoration: none; }
.elementor-element-34c0288 li.product > a.button,
.elementor-element-34c0288 li.product > a.add_to_cart_button{
  display: block !important;
  margin: auto 16px 18px !important;
  background: #ffffff !important;
  color: #14251a !important;
  border: 1.5px solid #14251a !important;
  border-radius: 4px !important;
  padding: 10px 16px !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease;
}
.elementor-element-34c0288 li.product > a.button:hover,
.elementor-element-34c0288 li.product > a.add_to_cart_button:hover{
  background: #14251a !important; color: #fff !important;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .elementor-element-4244383 .e-con-inner{ flex-direction: column !important; }
  .elementor-element-21d9422{ width: 100% !important; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 980px){
  .elementor-element-34c0288 ul.products{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px){
  .elementor-element-4244383{ padding: 20px !important; }
  .elementor-element-df2df8b{ padding: 0 20px; }
  .elementor-element-34c0288{ padding: 0 20px 40px; }

  /* Related products cards at 2-column mobile width: the title's
     reserved 2-line height didn't match the actual rendered line
     height at this narrower size, so the price below was colliding
     with/overlapping the title's second line. Smaller font +
     explicit line-height fixes the math so the reserved space is
     actually correct again. */
  .elementor-element-34c0288 ul.products{ gap: 14px !important; }
  .elementor-element-34c0288 .woocommerce-loop-product__title{
    font-size: .78rem !important;
    line-height: 1.35 !important;
    margin: 12px 12px 6px !important;
    /* Drop the 2-line clamp entirely instead of trying to match its
       reserved height to the font size exactly — that's what kept
       breaking on longer titles. Let it wrap to as many lines as it
       needs; the price/button below just flow after it naturally,
       so nothing can overlap regardless of title length. Cards in
       the same row may end up slightly different heights, but CSS
       Grid still stretches the whole row to fit the tallest one. */
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .elementor-element-34c0288 li.product .price{
    font-size: .82rem !important;
    margin: 0 12px 12px !important;
  }
  .elementor-element-34c0288 li.product .price del{
    font-size: .74rem !important;
    display: block;
    margin: 0 0 2px !important;
  }
  .elementor-element-34c0288 li.product > a.button,
  .elementor-element-34c0288 li.product > a.add_to_cart_button{
    margin: auto 12px 14px !important;
    padding: 9px 12px !important;
    font-size: .7rem !important;
  }
  .elementor-element-34c0288 .onsale{
    font-size: .62rem !important;
    padding: 4px 10px !important;
    top: 10px !important; left: 10px !important;
  }
}/* End custom CSS */