.elementor-2673 .elementor-element.elementor-element-4ed5e78{--display:flex;--min-height:688px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--overlay-opacity:0.61;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:200px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2673 .elementor-element.elementor-element-4ed5e78:not(.elementor-motion-effects-element-type-background), .elementor-2673 .elementor-element.elementor-element-4ed5e78 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hpfs.site/wp-content/uploads/2026/09/industrial_valves.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2673 .elementor-element.elementor-element-4ed5e78::before, .elementor-2673 .elementor-element.elementor-element-4ed5e78 > .elementor-background-video-container::before, .elementor-2673 .elementor-element.elementor-element-4ed5e78 > .e-con-inner > .elementor-background-video-container::before, .elementor-2673 .elementor-element.elementor-element-4ed5e78 > .elementor-background-slideshow::before, .elementor-2673 .elementor-element.elementor-element-4ed5e78 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2673 .elementor-element.elementor-element-4ed5e78 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );color:var( --e-global-color-primary );}.elementor-2673 .elementor-element.elementor-element-4cc6291{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-2673 .elementor-element.elementor-element-4cc6291 .elementor-heading-title{color:var( --e-global-color-f55ac06 );}.elementor-2673 .elementor-element.elementor-element-a478980{--display:flex;--min-height:1051px;--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;--margin-top:-250px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:10;}.elementor-2673 .elementor-element.elementor-element-563c80e{--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;--border-radius:18px 18px 18px 18px;--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-2673 .elementor-element.elementor-element-563c80e:not(.elementor-motion-effects-element-type-background), .elementor-2673 .elementor-element.elementor-element-563c80e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-2673 .elementor-element.elementor-element-ca1747a{--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:050px;--padding-bottom:25px;--padding-left:50px;--padding-right:50px;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-widget-nested-tabs{--n-tabs-title-font-size:var( --e-global-typography-accent-font-size );}.elementor-2673 .elementor-element.elementor-element-d9767d4{--display:flex;}.elementor-2673 .elementor-element.elementor-element-a74b199 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );color:var( --e-global-color-f0daa63 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2673 .elementor-element.elementor-element-e9104e4{--display:flex;}.elementor-2673 .elementor-element.elementor-element-712fe06 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );text-decoration:var( --e-global-typography-secondary-text-decoration );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );color:var( --e-global-color-f0daa63 );}.elementor-2673 .elementor-element.elementor-element-3c39109{--display:flex;}.elementor-2673 .elementor-element.elementor-element-79df0c0 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:0.9em;letter-spacing:-0.3px;word-spacing:0em;}.elementor-2673 .elementor-element.elementor-element-8c4f285{--display:flex;}.elementor-2673 .elementor-element.elementor-element-bbe0a3a .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:0.9em;letter-spacing:-0.3px;word-spacing:0em;}.elementor-2673 .elementor-element.elementor-element-5f09b60{--display:flex;}.elementor-2673 .elementor-element.elementor-element-17ea33c .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:0.9em;letter-spacing:-0.3px;word-spacing:0em;}.elementor-2673 .elementor-element.elementor-element-a1f1754{--display:flex;}.elementor-2673 .elementor-element.elementor-element-34ab380 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:0.9em;letter-spacing:-0.3px;word-spacing:0em;}.elementor-2673 .elementor-element.elementor-element-35a522e{--display:flex;}.elementor-2673 .elementor-element.elementor-element-d496c35 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:0.9em;letter-spacing:-0.3px;word-spacing:0em;}.elementor-2673 .elementor-element.elementor-element-6246754{--display:flex;}.elementor-2673 .elementor-element.elementor-element-91fe897 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:0.9em;letter-spacing:-0.3px;word-spacing:0em;}.elementor-2673 .elementor-element.elementor-element-85c366d{--n-tabs-direction:row;--n-tabs-heading-direction:column;--n-tabs-heading-width:240px;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:initial;--n-tabs-heading-justify-content:flex-start;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:initial;--n-tabs-heading-wrap:wrap;--n-tabs-title-gap:2px;--n-tabs-gap:20px;--n-tabs-title-border-radius:0px 15px 0px 0px;}.elementor-2673 .elementor-element.elementor-element-85c366d.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-ef59176 );}.elementor-2673 .elementor-element.elementor-element-85c366d.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-2673 .elementor-element.elementor-element-85c366d.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-f0daa63 );}@media(min-width:768px){.elementor-2673 .elementor-element.elementor-element-a478980{--content-width:1250px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-nested-tabs{--n-tabs-title-font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-2673 .elementor-element.elementor-element-a74b199 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-2673 .elementor-element.elementor-element-712fe06 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-nested-tabs{--n-tabs-title-font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-2673 .elementor-element.elementor-element-a74b199 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-2673 .elementor-element.elementor-element-712fe06 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-2673 .elementor-element.elementor-element-79df0c0 .elementor-heading-title{font-size:62px;}.elementor-2673 .elementor-element.elementor-element-bbe0a3a .elementor-heading-title{font-size:62px;}.elementor-2673 .elementor-element.elementor-element-17ea33c .elementor-heading-title{font-size:62px;}.elementor-2673 .elementor-element.elementor-element-34ab380 .elementor-heading-title{font-size:62px;}.elementor-2673 .elementor-element.elementor-element-d496c35 .elementor-heading-title{font-size:62px;}.elementor-2673 .elementor-element.elementor-element-91fe897 .elementor-heading-title{font-size:62px;}}/* Start custom CSS for heading, class: .elementor-element-4cc6291 */.hpfs-text-scanner{
    position: relative;
    overflow: hidden;
}

.hpfs-text-scanner::after{
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 30%;
    height: 100%;
    pointer-events: none;

    /* White blurred scan line */
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.1) 20%,
        rgba(255,255,255,.2) 50%,
        rgba(255,255,255,.1) 80%,
        rgba(255,255,255,0) 100%
    );

    filter: blur(12px);

    animation: hpfsScan 1.9s linear infinite;
}

@keyframes hpfsScan{
    from{
        transform: translateX(-150%);
    }
    to{
        transform: translateX(450%);
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-273b0c8 *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-39b609e *//* =====================================================
   WooCommerce Product Grid — Card Style (Reference Design)
   4 columns x 2 rows per page + styled pagination
   
   HOW TO USE:
   Option 1: Appearance → Customize → Additional CSS
             (paste as-is — recommended)
   Option 2: Elementor HTML widget
             (wrap everything in <style> ... </style>)
   ===================================================== */

/* ---------- Grid container (4 columns x 2 rows per page) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive columns */
@media (max-width: 1100px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}
@media (max-width: 820px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fix: remove clearfix pseudo-elements ----------
   WooCommerce/themes add ::before/::after clearfixes on
   ul.products. With CSS Grid these become invisible grid
   items that steal the first cell and push products over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

/* Safety: neutralize WooCommerce's float-era row classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

/* ---------- Product card ---------- */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Link wrapper (image + title) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  text-decoration: none !important;
  color: inherit;
}

/* ---------- Product image (white area on top) ---------- */
.woocommerce ul.products li.product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 0 !important;
  padding: 28px 26px 20px;
  background: #ffffff;
  box-shadow: none !important;
  border-radius: 0;
  box-sizing: border-box;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ---------- Gray band: title area ----------
   Large bottom padding creates the gray zone that the
   button is pulled up into (see negative margin below) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  text-align: left;
  background: #f1f1f1;
  padding: 18px 20px 78px !important; /* 78px bottom = button zone */
  margin: 0 !important;
  min-height: 142px; /* uniform card height even for 1-line titles */
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Green "KNOW MORE" button ---------- */
.woocommerce ul.products li.product .woocommerce_catalog_product_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.btn.btn-primary {
  display: inline-block;
  align-self: flex-start;
  margin: -58px 20px 20px !important; /* pulls button onto the gray band */
  padding: 10px 26px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff !important;
  background: #2e8b3a !important; /* green button */
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  line-height: 1.4;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .woocommerce_catalog_product_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.btn.btn-primary:hover {
  background: #23702d !important; /* darker green on hover */
  box-shadow: 0 4px 12px rgba(46, 139, 58, 0.35);
  color: #ffffff !important;
}

/* =====================================================
   Pagination
   ===================================================== */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  color: #1a1a1a !important;
  background: #f1f1f1;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Current page */
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #2e8b3a !important; /* matches the green button */
  border-color: #2e8b3a !important;
  color: #ffffff !important;
}

/* Hover on page links */
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #23702d !important;
  border-color: #23702d !important;
  color: #ffffff !important;
}

/* Prev / Next arrows */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  font-size: 16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    height: 200px;
    padding: 22px 20px 16px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 16px 18px 74px !important;
    min-height: 136px;
  }
  .woocommerce ul.products li.product .woocommerce_catalog_product_button,
  .woocommerce ul.products li.product a.button {
    margin: -56px 18px 18px !important;
    padding: 9px 22px !important;
  }
}/* End custom CSS */