.elementor-10568 .elementor-element.elementor-element-9dbe908{--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-10568 .elementor-element.elementor-element-d9ae408{--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-10568 .elementor-element.elementor-element-507b5ce{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-65df3a8{--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-10568 .elementor-element.elementor-element-f0394b2{--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-10568 .elementor-element.elementor-element-461de7a{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-d304fe2{--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-10568 .elementor-element.elementor-element-de009ea{--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-10568 .elementor-element.elementor-element-38bcb4d{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-c755ca9{--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-10568 .elementor-element.elementor-element-fb763c6{--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-10568 .elementor-element.elementor-element-e973cbe{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-be1ca52{--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-10568 .elementor-element.elementor-element-b2ebab2{--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-10568 .elementor-element.elementor-element-045f258{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-3e6209c{--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-10568 .elementor-element.elementor-element-45cd890{--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-10568 .elementor-element.elementor-element-0d934c0{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-132fd91{--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-10568 .elementor-element.elementor-element-71cba9b{--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-10568 .elementor-element.elementor-element-af8469f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-32ac28a{--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-10568 .elementor-element.elementor-element-9a94971{--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-10568 .elementor-element.elementor-element-d8dc131{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-a83fb4b{--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-10568 .elementor-element.elementor-element-48125bb{--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-10568 .elementor-element.elementor-element-d36dc3a{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-10568 .elementor-element.elementor-element-2b88afa{--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-10568 .elementor-element.elementor-element-3b220ef{--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-10568 .elementor-element.elementor-element-be2366f{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 SOLAR PANELS RESPONSIVE CSS
  FILE:    cr-commercial-solar-responsive.css
  VERSION: v1
  DATE:    July 2026
  PREFIX:  csp__

  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 csp__ 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

  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-solar-responsive',
      get_template_directory_uri() . '/css/cr-commercial-solar-responsive.css',
      array(),
      '1.0'
    );

  PAGE URL: /services/commercial-solar-panels
  ============================================================
*/


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

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

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


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

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

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

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

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


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

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

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

  /* Tables: allow horizontal scroll (already on .csp__table-wrap) */
  .csp__size-table,
  .csp__costs-table { font-size: 0.82rem; }
}


/* ---- XS (< 576px): mobile portrait ---- */
@media (max-width: 575.98px) {
  /* Section padding reduction */
  .csp__hero,
  .csp__why,
  .csp__apps,
  .csp__size,
  .csp__costs,
  .csp__process,
  .csp__regs,
  .csp__choose,
  .csp__faq,
  .csp__cta     { padding: 60px 0; }

  /* Typography */
  .csp__h1      { font-size: 1.8rem; }
  .csp__why-h2,
  .csp__apps-h2,
  .csp__size-h2,
  .csp__costs-h2,
  .csp__process-h2,
  .csp__regs-h2,
  .csp__choose-h2,
  .csp__faq-h2,
  .csp__cta-h2  { font-size: 1.7rem; }

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

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

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

  /* Why card: stack icon above text */
  .csp__why-card { padding: 20px 18px; }

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

  /* Reg cards: stack number above text */
  .csp__reg-card { flex-direction: column; }

  /* Choose items: tighter gap */
  .csp__choose-grid { gap: 24px; }
}/* End custom CSS */