/* ===== Five Star Solar — Modern Design System ===== */

/* Override Ecoly theme's own CSS custom properties (master.css :root) */
:root{
  --theme: #FF7A1A !important;
  --theme-2: #0F2540 !important;
  --theme-3: #FF7A1A !important;
  --theme-4: #FFB347 !important;
  --header: #12181F !important;
  --text: #5B6472 !important;
  --text-2: #5B6472 !important;
  --border: #ECEDF0 !important;
  --bg: #FFF8F1 !important;
  --bg-2: #F7F8FA !important;
  --bg-3: #FFF8F1 !important;
  --box-shadow: 0 10px 30px rgba(15,37,64,0.10) !important;
}

:root{
  --fs-navy: #0F2540;
  --fs-navy-dark: #0A1930;
  --fs-navy-light: #12314F;
  --fs-ink: #12181F;
  --fs-amber: #FF7A1A;
  --fs-amber-dark: #E4650A;
  --fs-amber-light: #FFB347;
  --fs-amber-tint: #FFDDB0;
  --fs-cream: #FFF8F1;
  --fs-gray: #5B6472;
  --fs-gray-light: #8A93A0;
  --fs-border: #ECEDF0;
  --fs-white: #FFFFFF;
  --fs-radius: 18px;
  --fs-radius-sm: 12px;
  --fs-shadow-sm: 0 2px 10px rgba(15,37,64,0.06);
  --fs-shadow: 0 10px 30px rgba(15,37,64,0.10);
  --fs-shadow-lg: 0 24px 60px rgba(15,37,64,0.16);
  --fs-ease: cubic-bezier(.22,1,.36,1);
}

html{ scroll-behavior:smooth; }

body, body.elementor-page{
  color:var(--fs-ink) !important;
  font-family:'Inter', -apple-system, sans-serif !important;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.eco-heading-title h2,
.eco-heading-title .title{
  font-family:'Manrope', -apple-system, sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-0.02em;
}
/* Elementor's stock #6EC1E4 default shows through on any heading left without
   an explicit color. Safe fallback (no !important) so widgets with their own
   inline color (e.g. white headings on dark sections) are unaffected. */
.elementor-heading-title,
.elementor-icon-box-title,
.elementor-icon-box-title span{ color:var(--fs-ink); }

p, li, a, span{ font-family:'Inter', -apple-system, sans-serif; }

/* ---------- Floating header ---------- */
body{ padding-top:0 !important; }
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:transparent !important;
  padding:16px 20px 0;
  pointer-events:none; /* let clicks pass through the transparent gutter */
}
.site-header .navbar-area,
.site-header nav.navbar{
  pointer-events:auto;
  max-width:1200px;
  margin:0 auto !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-radius:999px !important;
  border:1px solid rgba(15,37,64,.06);
  box-shadow:0 10px 34px rgba(15,37,64,.10);
  padding-top:6px !important;
  padding-bottom:6px !important;
  padding-left:12px !important;
  padding-right:12px !important;
  transition:box-shadow .3s var(--fs-ease), background .3s var(--fs-ease), transform .3s var(--fs-ease);
}
.fs-scrolled .site-header .navbar-area,
.fs-scrolled .site-header nav.navbar{
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 16px 44px rgba(15,37,64,.16);
}
.site-header .navbar-area .custom-container,
.site-header nav.navbar .custom-container{
  padding-left:12px;
  padding-right:8px;
}
.main-menu ul li a, .main-menu > ul > li > a,
.navbar-nav .nav-link, .navbar-nav > li > a{
  font-weight:600;
  transition:color .2s var(--fs-ease);
}
.main-menu ul li a:hover, .main-menu ul li.current-menu-item > a,
.navbar-nav .nav-link:hover, .navbar-nav li.current-menu-item > a{
  color:var(--fs-amber) !important;
}
@media (max-width:991px){
  .site-header{ padding:12px 14px 0; }
  .site-header .navbar-area,
  .site-header nav.navbar{ border-radius:24px !important; }
}

/* Bigger logo (theme caps it at 150px) */
.custom-logo-link img,
.site-logo img{
  max-width:210px !important;
  width:210px;
  height:auto;
}
@media (max-width:575px){
  .custom-logo-link img,
  .site-logo img{ max-width:160px !important; width:160px; }
}

/* Ecoly's .theme-btn class hardcodes lime green, not the CSS var — override directly */
.theme-btn{
  background:var(--fs-amber) !important;
  color:#fff !important;
  font-family:'Inter',sans-serif !important;
  box-shadow:0 10px 24px rgba(255,122,26,.28);
  transition:transform .28s var(--fs-ease), box-shadow .28s var(--fs-ease) !important;
}
.theme-btn i{ background-color:var(--fs-navy) !important; color:#fff !important; }
.theme-btn::before{ background-color:var(--fs-navy) !important; }
.theme-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(15,37,64,.35); }
.theme-btn:hover i{ background-color:var(--fs-amber) !important; color:#fff !important; }

/* ---------- Buttons ---------- */
.eco-btn, .elementor-button, a.eco-btn, .button, .add_to_cart_button, .single_add_to_cart_button, #submit{
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  transition:transform .28s var(--fs-ease), box-shadow .28s var(--fs-ease), background-color .28s var(--fs-ease) !important;
  box-shadow:0 10px 24px rgba(255,122,26,.28);
}
.eco-btn:hover, .elementor-button:hover, a.eco-btn:hover, .button:hover, .add_to_cart_button:hover, .single_add_to_cart_button:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(255,122,26,.38);
}

/* ---------- Cards: icon boxes, service boxes ---------- */
.eco-icon-box, .elementor-icon-box-wrapper, .eco-service-box, .service-box-two{
  transition:transform .35s var(--fs-ease), box-shadow .35s var(--fs-ease) !important;
  border-radius:var(--fs-radius) !important;
}
.eco-service-box:hover, .service-box-two:hover, .elementor-widget-ecoly-service-box-two-widget:hover{
  transform:translateY(-8px);
  box-shadow:var(--fs-shadow-lg) !important;
}

/* ---------- Section rhythm ---------- */
.elementor-section, section{ scroll-margin-top:100px; }

/* ---------- Scroll-reveal ---------- */
.fs-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--fs-ease), transform .7s var(--fs-ease);
}
.fs-reveal.fs-in{
  opacity:1;
  transform:translateY(0);
}

/* ---------- WooCommerce shop grid ---------- */
.wc-page-content-inner ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:28px !important;
  list-style:none;
  margin:0 !important;
  padding:0 !important;
}
.wc-page-content-inner ul.products li.product{
  background:var(--fs-white);
  border-radius:var(--fs-radius);
  overflow:hidden;
  box-shadow:var(--fs-shadow-sm);
  border:1px solid var(--fs-border);
  transition:transform .35s var(--fs-ease), box-shadow .35s var(--fs-ease);
  margin:0 !important;
  position:relative;
  width:100% !important;
  max-width:100% !important;
  float:none !important;
}
.wc-page-content-inner ul.products li.product:hover{
  transform:translateY(-8px);
  box-shadow:var(--fs-shadow-lg);
}
.wc-page-content-inner ul.products li.product a{ text-decoration:none; }
.wc-page-content-inner ul.products li.product img,
.wc-page-content-inner ul.products li.product img.attachment-woocommerce_thumbnail{
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  display:block;
  transition:transform .5s var(--fs-ease);
}
.wc-page-content-inner ul.products li.product:hover img{ transform:scale(1.05); }
.wc-page-content-inner ul.products li.product .woocommerce-loop-product__title{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--fs-ink);
  padding:16px 16px 0;
  margin:0;
  line-height:1.35;
}
.wc-page-content-inner ul.products li.product .price{
  padding:6px 16px 20px;
  display:block;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:18px;
  color:var(--fs-amber-dark);
}
.wc-page-content-inner ul.products li.product .price del{
  color:var(--fs-gray-light);
  font-weight:500;
  opacity:.8;
  margin-right:6px;
}
.wc-page-content-inner ul.products li.product .price ins{ text-decoration:none; }
.wc-page-content-inner ul.products li.product .button{
  margin:0 16px 18px !important;
  width:calc(100% - 32px);
  text-align:center;
  display:block;
  background:var(--fs-navy) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.wc-page-content-inner ul.products li.product .button:hover{
  background:var(--fs-amber) !important;
}
.wc-page-content-inner ul.products li.product .onsale{
  position:absolute; top:14px; left:14px;
  background:var(--fs-amber) !important;
  color:#fff; font-weight:800; font-size:12px;
  border-radius:999px; padding:6px 14px;
  box-shadow:0 6px 16px rgba(255,122,26,.4);
  min-height:0; min-width:0; line-height:1;
  z-index:2;
}

/* ---------- Single product ---------- */
.single-product .price{ color:var(--fs-amber-dark) !important; font-weight:800; }
.single-product .summary .price del{ color:var(--fs-gray-light); }

/* ---------- Hero banner overlay for legibility ---------- */
.hero-height{ position:relative; }
.hero-height::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,20,35,.72) 0%, rgba(10,20,35,.38) 48%, rgba(10,20,35,.12) 78%);
  z-index:1;
  pointer-events:none;
}
.hero-height .row{ position:relative; z-index:2; }

/* ---------- Category / hero overlays ---------- */
.fs-overlay-navy{ position:relative; }
.fs-overlay-navy::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,25,48,.15) 0%, rgba(10,25,48,.72) 100%);
  pointer-events:none;
  z-index:1;
}
.fs-overlay-navy > *{ position:relative; z-index:2; }

/* ---------- Page title / breadcrumb banner ---------- */
.eco-breadcrumb, .page-title-area{
  position:relative;
}
.eco-breadcrumb::after, .page-title-area::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,37,64,.55) 0%, rgba(15,37,64,.82) 100%);
}
.eco-breadcrumb .container, .page-title-area .container{ position:relative; z-index:2; }

/* ---------- Category tiles (custom, injected via shortcode) ---------- */
.fs-cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:24px;
  margin:0 0 8px;
}
.fs-cat-card{
  position:relative;
  border-radius:var(--fs-radius);
  overflow:hidden;
  aspect-ratio:4/5;
  display:flex;
  align-items:flex-end;
  box-shadow:var(--fs-shadow-sm);
  transition:transform .4s var(--fs-ease), box-shadow .4s var(--fs-ease);
}
.fs-cat-card:hover{ transform:translateY(-6px); box-shadow:var(--fs-shadow-lg); }
.fs-cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--fs-ease);
}
.fs-cat-card:hover img{ transform:scale(1.08); }
.fs-cat-card::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,25,48,0) 35%, rgba(10,25,48,.88) 100%);
}
.fs-cat-card-body{
  position:relative; z-index:2; padding:22px; color:#fff; width:100%;
}
.fs-cat-card-body .fs-cat-label{
  display:inline-block; background:var(--fs-amber); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:10px;
}
.fs-cat-card-body h3{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:20px; margin:0 0 4px;
  color:#fff !important;
}
.fs-cat-card-body span{ font-size:13px; opacity:.85; }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .fs-cat-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .wc-page-content-inner ul.products{ grid-template-columns:repeat(2,1fr); gap:16px; }
}