/**
 * Hajvery Solar Energy — Lithium Batteries page
 * File: /wp-content/themes/hajvery-solar-theme/assets/css/hse-lithium-batteries.css
 * Applies to: draft #37109 and existing live page #29342 (after redesign migration)
 * Version: 1.0.0 | Prepared: 2026-10-17
 *
 * Scope is limited to Elementor page wrappers and identified WordPress page IDs.
 * The three dynamic price tables keep their own plugin-generated CSS.
 * Do not copy this file into Additional CSS or the Elementor HTML widget.
 */

/* ----- Page-specific content sections ----- */
:is(.elementor-37109, .elementor-29342) .hse-lit {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 0 30px;
  color: #26344b;
  box-sizing: border-box;
}
:is(.elementor-37109, .elementor-29342) .hse-lit *,
:is(.elementor-37109, .elementor-29342) .hse-lit *::before,
:is(.elementor-37109, .elementor-29342) .hse-lit *::after {
  box-sizing: border-box;
}
:is(.elementor-37109, .elementor-29342) .hse-lit h2 {
  font-size: clamp(23px, 2.7vw, 32px);
  line-height: 1.25;
  color: #13245d;
  font-weight: 750;
  margin: 0 0 14px;
}
:is(.elementor-37109, .elementor-29342) .hse-lit h3 {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.35;
  color: #13245d;
  margin: 0 0 10px;
}
:is(.elementor-37109, .elementor-29342) .hse-lit p,
:is(.elementor-37109, .elementor-29342) .hse-lit li {
  font-size: 16px;
  line-height: 1.72;
}
:is(.elementor-37109, .elementor-29342) .hse-lit p { margin: 0 0 15px; }
:is(.elementor-37109, .elementor-29342) .hse-lit a { overflow-wrap: anywhere; }
:is(.elementor-37109, .elementor-29342) .hse-lit__lead { max-width: 940px; }

/* ----- Battery types/cards ----- */
:is(.elementor-37109, .elementor-29342) .hse-lit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}
:is(.elementor-37109, .elementor-29342) .hse-lit__card {
  background: #f6f8fc;
  border: 1px solid #e0e7f3;
  border-radius: 12px;
  padding: 22px;
  min-width: 0;
}
:is(.elementor-37109, .elementor-29342) .hse-lit__card p { margin: 0; }
:is(.elementor-37109, .elementor-29342) .hse-lit__steps { margin: 14px 0 0; padding-left: 22px; }
:is(.elementor-37109, .elementor-29342) .hse-lit__steps li { margin: 0 0 10px; padding-left: 4px; }
:is(.elementor-37109, .elementor-29342) .hse-lit__note {
  font-size: 14px !important;
  color: #55647b;
}

/* ----- Navy verification section ----- */
:is(.elementor-37109, .elementor-29342) .hse-lit--verify {
  background: #13245d;
  border-radius: 16px;
  color: #fff;
  padding: 30px;
}
:is(.elementor-37109, .elementor-29342) .hse-lit--verify h2,
:is(.elementor-37109, .elementor-29342) .hse-lit--verify h3,
:is(.elementor-37109, .elementor-29342) .hse-lit--verify p,
:is(.elementor-37109, .elementor-29342) .hse-lit--verify li { color: #fff; }
:is(.elementor-37109, .elementor-29342) .hse-lit--verify a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* ----- Buying section / in-page WhatsApp CTA ----- */
:is(.elementor-37109, .elementor-29342) .hse-lit--buy {
  background: #f5f7fb;
  border: 1px solid #e1e7f2;
  border-radius: 14px;
  padding: 28px;
}
:is(.elementor-37109, .elementor-29342) .hse-lit__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 9px !important;
  background: #25d366 !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  font-size: 16px;
  line-height: 1.35;
  min-height: 50px;
}
:is(.elementor-37109, .elementor-29342) .hse-lit__wa img {
  height: 26px !important;
  width: 26px !important;
  max-width: none !important;
  object-fit: contain;
}

/* ----- WooCommerce featured products ----- */
:is(.elementor-37109, .elementor-29342) .hse-lit__products .woocommerce ul.products,
:is(.elementor-37109, .elementor-29342) .hse-lit__products ul.products { margin-top: 18px; }

/* ----- Fully visible FAQs; no accordion behaviour ----- */
:is(.elementor-37109, .elementor-29342) .hse-lit__faq { margin: 16px 0 0; }
:is(.elementor-37109, .elementor-29342) .hse-lit__faq-item {
  border: 1px solid #dce3ef;
  border-radius: 10px;
  padding: 19px 20px;
  margin: 0 0 14px;
  background: #fff;
}
:is(.elementor-37109, .elementor-29342) .hse-lit__faq-item h3 {
  margin: 0 0 10px;
  color: #13245d;
  font-size: clamp(16px, 1.65vw, 19px);
  line-height: 1.4;
}
:is(.elementor-37109, .elementor-29342) .hse-lit__faq-item p {
  margin: 0;
  color: #293850;
  line-height: 1.65;
}

/* ----- Floating Chaty and WoodMart controls -----
 * A page-scoped JavaScript observer adds .hse-lit-table-in-viewport
 * to <body> when price tables are visible. These CSS rules alone do not
 * turn the buttons on/off; see hse-lithium-batteries.js.
 */
body.hse-lit-table-in-viewport:is(.page-id-37109, .page-id-29342) .chaty-widget,
body.hse-lit-table-in-viewport:is(.page-id-37109, .page-id-29342) .chaty-widget-wrapper,
body.hse-lit-table-in-viewport:is(.page-id-37109, .page-id-29342) .chaty-widget-i,
body.hse-lit-table-in-viewport:is(.page-id-37109, .page-id-29342) [id^="chaty-widget"],
body.hse-lit-table-in-viewport:is(.page-id-37109, .page-id-29342) .scrollToTop,
body.hse-lit-table-in-viewport:is(.page-id-37109, .page-id-29342) .scroll-to-top,
body.hse-lit-table-in-viewport:is(.page-id-37109, .page-id-29342) .wd-scroll-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ----- Mobile-only Elementor wrapper repairs from the tested draft ----- */
@media (max-width: 767px) {
  :is(.elementor-37109, .elementor-29342) .hse-lit { padding: 21px 0 24px; }
  :is(.elementor-37109, .elementor-29342) .hse-lit__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  :is(.elementor-37109, .elementor-29342) .hse-lit__card { padding: 16px; }
  :is(.elementor-37109, .elementor-29342) .hse-lit--verify,
  :is(.elementor-37109, .elementor-29342) .hse-lit--buy { padding: 20px 16px; }
  :is(.elementor-37109, .elementor-29342) .hse-lit h2 { font-size: clamp(22px, 6vw, 27px); }
  :is(.elementor-37109, .elementor-29342) .hse-lit p,
  :is(.elementor-37109, .elementor-29342) .hse-lit li { font-size: 15px; line-height: 1.65; }
  :is(.elementor-37109, .elementor-29342) .hse-lit__wa { width: 100%; font-size: 15px; }
  :is(.elementor-37109, .elementor-29342) .hse-lit__faq-item {
    padding: 15px 14px;
    margin-bottom: 11px;
  }
  :is(.elementor-37109, .elementor-29342) .hse-lit__faq-item h3 {
    font-size: 16px;
    line-height: 1.45;
  }

  /* Fixed-width Elementor wrappers used by both price tables. */
  :is(.elementor-37109, .elementor-29342) :is(.elementor-element-hselprc01, .elementor-element-hselcap01) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  :is(.elementor-37109, .elementor-29342) :is(.elementor-element-hselprc01, .elementor-element-hselcap01) > .e-con-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    margin: 0 auto !important;
  }
  :is(.elementor-37109, .elementor-29342) :is(
    .elementor-element-hselprc02,
    .elementor-element-hselcap02,
    .hse-lbp-embed,
    .hse-lbp-capacity-embed
  ) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: 0 !important;
    transform: none !important;
  }
  :is(.elementor-37109, .elementor-29342) :is(
    .hse-lbp__heading,
    .hse-lbp__toolbar,
    .hse-lbp__brands,
    .hse-lbcap__heading,
    .hse-lbcap__table-wrap
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0 !important;
  }
  :is(.elementor-37109, .elementor-29342) .hse-lbp__heading h2 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(21px, 5.5vw, 26px);
    line-height: 1.3;
  }
  :is(.elementor-37109, .elementor-29342) .hse-lbp__toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  :is(.elementor-37109, .elementor-29342) .hse-lbp__count { white-space: normal; }
  :is(.elementor-37109, .elementor-29342) .hse-lbcap__note {
    margin: 12px 0 22px;
    padding: 0 1px 60px;
  }
}