.elementor-10548 .elementor-element.elementor-element-fadb16a{--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;--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-10548 .elementor-element.elementor-element-73c2ac0{--display:flex;--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-10548 .elementor-element.elementor-element-2859bdf{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-892a389{--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;--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-10548 .elementor-element.elementor-element-a18c1c5{--display:flex;--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-10548 .elementor-element.elementor-element-ca02814{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-2882e64{--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;--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-10548 .elementor-element.elementor-element-fa44d5f{--display:flex;--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-10548 .elementor-element.elementor-element-ece8aec{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-a1081d2{--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;--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-10548 .elementor-element.elementor-element-9bf7768{--display:flex;--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-10548 .elementor-element.elementor-element-9c08c63{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-327f65d{--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;--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-10548 .elementor-element.elementor-element-5bed47b{--display:flex;--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-10548 .elementor-element.elementor-element-fc7e57e{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-bfc2091{--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;--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-10548 .elementor-element.elementor-element-628ed05{--display:flex;--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-10548 .elementor-element.elementor-element-1a30bc9{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-fb52684{--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;--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-10548 .elementor-element.elementor-element-ccab215{--display:flex;--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-10548 .elementor-element.elementor-element-f4f0148{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-4038946{--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;--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-10548 .elementor-element.elementor-element-2b86166{--display:flex;--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-10548 .elementor-element.elementor-element-9f76401{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10548 .elementor-element.elementor-element-95e76fb{--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;--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-10548 .elementor-element.elementor-element-2284063{--display:flex;--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-10548 .elementor-element.elementor-element-7b25ebc{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS *//*
  ============================================================
  COMPLIANT RETROFITS — COMMERCIAL BATTERY STORAGE RESPONSIVE CSS
  FILE:    cr-commercial-battery-storage-responsive.css
  VERSION: v1
  DATE:    July 2026
  PREFIX:  cbs__

  GOLDEN RULE: @media queries must NEVER live inside
  Elementor HTML widget <style> blocks — WordPress/Elementor
  strips them silently. ALL responsive rules go here ONLY.

  THIS FILE CONTAINS ONLY cbs__ rules.
  Homepage rules (crh__, crws__ etc.) are in cr-homepage-responsive.css
  CHP rules (cchp__) are in cr-commercial-heat-pumps-responsive.css
  ASHP rules (ashp__) are in cr-air-source-heat-pump-responsive.css
  BST rules (bst__) are in cr-battery-storage-responsive.css
  CSP rules (csp__) are in cr-commercial-solar-responsive.css

  BREAKPOINT SYSTEM: Bootstrap 5 max-width (mobile-first base,
  overriding down to XS)

    < 1200px  — large desktop → 4-col grids collapse
    < 992px   — desktop → narrower grids go single column
    < 768px   — tablet → single column throughout
    < 576px   — mobile portrait → full typography & layout override

  HOW TO ENQUEUE IN WORDPRESS:
  Add to functions.php alongside cr-shared.css:

    wp_enqueue_style(
      'cr-commercial-battery-storage-responsive',
      get_template_directory_uri() . '/css/cr-commercial-battery-storage-responsive.css',
      array(),
      '1.0'
    );

  PAGE URL: /services/commercial-battery-storage
  ============================================================
*/


/* ---- XL and below (< 1200px): 4-col grids collapse ---- */
@media (max-width: 1199.98px) {
  /* Hide gold connector line — only visible at full 4-col width */
  .cbs__steps::before { display: none; }

  /* Installation Process: 4 → 2 cols */
  .cbs__steps { grid-template-columns: repeat(2, 1fr); }

  /* Why Choose: 3 → 2 cols */
  .cbs__choose-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---- LG and below (< 992px): grids narrow ---- */
@media (max-width: 991.98px) {
  /* Why Install: 3 → 1 col */
  .cbs__why-grid { grid-template-columns: 1fr; }

  /* Applications: 3 → 2 cols */
  .cbs__apps-grid { grid-template-columns: repeat(2, 1fr); }

  /* Installation Process: 2 → 1 col */
  .cbs__steps { grid-template-columns: 1fr; }

  /* Why Choose: 2 → 1 col */
  .cbs__choose-grid { grid-template-columns: 1fr; }

  /* CTA: 2-col → stacked */
  .cbs__cta-inner { grid-template-columns: 1fr; }
  .cbs__contact-card { max-width: 500px; }
}


/* ---- MD and below (< 768px): single column ---- */
@media (max-width: 767.98px) {
  /* H1 size reduction */
  .cbs__h1 { font-size: 2.1rem; }

  /* Applications: 2 → 1 col */
  .cbs__apps-grid { grid-template-columns: 1fr; }

  /* Tables: allow horizontal scroll (already on .cbs__table-wrap) */
  .cbs__size-table,
  .cbs__costs-table { font-size: 0.82rem; }
}


/* ---- XS (< 576px): mobile portrait ---- */
@media (max-width: 575.98px) {
  /* Section padding reduction */
  .cbs__hero,
  .cbs__why,
  .cbs__apps,
  .cbs__size,
  .cbs__costs,
  .cbs__process,
  .cbs__choose,
  .cbs__faq,
  .cbs__cta     { padding: 60px 0; }

  /* Typography */
  .cbs__h1      { font-size: 1.8rem; }
  .cbs__why-h2,
  .cbs__apps-h2,
  .cbs__size-h2,
  .cbs__costs-h2,
  .cbs__process-h2,
  .cbs__choose-h2,
  .cbs__faq-h2,
  .cbs__cta-h2  { font-size: 1.7rem; }

  /* Hero CTAs: side-by-side → stacked */
  .cbs__ctas    { flex-direction: column; }
  .cbs__ctas a  { width: 100%; text-align: center; }

  /* CTA section buttons: stacked */
  .cbs__cta-btns   { flex-direction: column; }
  .cbs__cta-btns a { width: 100%; text-align: center; }

  /* Trust chips: tighter */
  .cbs__chip { font-size: 0.72rem; padding: 6px 10px; }

  /* Why card: tighter padding */
  .cbs__why-card { padding: 20px 18px; }

  /* App cards: stack icon above text */
  .cbs__app-card { flex-direction: column; }

  /* Choose items: tighter gap */
  .cbs__choose-grid { gap: 24px; }

  /* Key insight box: stack icon */
  .cbs__key-insight { flex-direction: column; gap: 12px; }
}/* End custom CSS */