/* SG Sanatan page specific styles */


/* Extracted inline styles */
.page-hero{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center;
    background:linear-gradient(115deg,var(--deep) 40%, rgba(8,28,51,0.26) 100%), url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80') center/cover;
    color:#fff;padding:150px 5% 60px;}
  .page-hero h1{font-family:'Montserrat',sans-serif;font-size:2.4rem;font-weight:900;margin-bottom:14px;}
  .page-hero p{color:#C7D2DE;max-width:600px;margin:0 auto;font-size:1.02rem;}
  .page-hero .prem-eyebrow{display:inline-block;background:rgba(251,191,36,0.15);color:var(--gold);
    padding:6px 14px;border-radius:30px;font-size:0.8rem;font-weight:700;letter-spacing:0.5px;margin-bottom:16px;}
  .lifestyle-banner{max-width:1240px;margin:0 auto;padding:60px 5% 0;text-align:center;}
  .lifestyle-banner h2{font-family:'Montserrat',sans-serif;font-size:1.9rem;color:var(--deep);margin-bottom:10px;}
  .lifestyle-banner p{color:var(--gray);max-width:600px;margin:0 auto;}
/* ── Restored: product cards, tabs, modal, why-choose, warranty ── */
.why-grid { 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:1.5rem; 
  margin-top:3rem; 
}

.why-card {
  background: var(--dark); 
  border:1px solid rgba(245,160,0,0.4);
  border-radius:10px; 
  padding:2rem;
  transition:border-color 0.3s,transform 0.3s;
  backdrop-filter:blur(8px);
}

.why-card:hover { 
  border-color:var(--amber); 
  transform:translateY(-4px); 
}

.why-card.ev-card-why { border-color:rgba(0,184,107,0.4); }

.why-card.ev-card-why:hover { border-color:var(--ev-green); }

.why-icon { 
  font-size:2.2rem; 
  margin-bottom:1rem; 
  display:block; 
}

.why-card h4 { 
  font-family:'Montserrat',sans-serif; 
  font-weight:700; 
  font-size:1rem; 
  color:var(--amber); 
  margin-bottom:0.5rem; 
}

.why-card.ev-card-why h4 { color:var(--ev-green); }

.why-card p { 
  color:#E8E8E8; 
  font-size:0.9rem; 
  line-height:1.65; 
}

#panel-ev .ev-section-header h3 { color: var(--amber); }

#panel-ev .ev-section-header p { color: #B2DFDB; }

#panel-ev .why-card.ev-card-why { background: rgba(255,255,255,0.06); }

.ev-section-header {
  margin-top: 2rem; /* pushes it down */
  padding-top: 2rem;  /* optional extra spacing */
  padding-bottom: 3rem;
}

.ev-section-header h3 {
  color: var(--amber) !important;
}

.ev-section-header p {
  color: #333333; /* example: dark gray */
}

.product-panel { 
  display: none;
  height: auto;
  overflow: visible; 
}

.product-panel.active { display: block; }

.tab-bar { 
  display:flex; 
  gap:0.5rem; 
  flex-wrap:wrap; 
  margin:2rem 0; 
  justify-content:center; 
}

.tab-btn { 
  padding:10px 24px; 
  border-radius:4px; 
  border:2px solid var(--amber); 
  background:transparent; 
  color:var(--dark); 
  font-weight:600; 
  cursor:pointer; 
  font-size:0.88rem; 
  transition:all 0.25s; 
  font-family:'Montserrat',sans-serif; 
}

.tab-btn.active, .tab-btn:hover { 
  background:var(--amber); 
  color:var(--dark); 
}

.tab-content { display:none; }

.tab-content.active { display:block; }

.product-grid { 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:1.5rem; 
}

.product-card { 
  background:var(--white); 
  border-radius:12px; 
  border:1px solid #F0D890; 
  overflow:hidden; 
  box-shadow:0 2px 16px rgba(232,88,10,0.07); 
  transition:transform 0.3s,box-shadow 0.3s; 
}

.product-card:hover { 
  transform:translateY(-5px); 
  box-shadow:0 8px 32px rgba(232,88,10,0.15); 
}

.product-header { 
  background:linear-gradient(135deg,var(--amber),var(--orange)); 
  padding:1.2rem 1.5rem; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
}

.product-header h3 { 
  font-family:'Montserrat',sans-serif; 
  font-weight:900; 
  font-size:1.4rem; 
  color:var(--dark); 
}

.product-header .phase-tag { 
  background:rgba(26,16,0,0.25); 
  color:var(--dark); 
  font-size:0.7rem; 
  font-weight:700; 
  padding:4px 10px; 
  border-radius:20px; 
}

.product-body { padding:1.5rem; }

.specs-list { 
  list-style:none; 
  margin-bottom:1.2rem; 
}

.specs-list li { 
  display:flex; 
  align-items:flex-start; 
  gap:8px; 
  font-size:0.85rem; 
  color:var(--gray); 
  padding:5px 0; 
  border-bottom:1px dashed #F0D890; 
}

.specs-list li:last-child { border-bottom:none; }

.specs-list li::before { 
  content:'▸'; 
  color:var(--amber); 
  flex-shrink:0; 
  margin-top:1px; 
}

.price-row { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  background:var(--light); 
  padding:12px 14px; 
  border-radius:8px; 
  margin-top:1rem; 
}

.price-main { 
  font-family:'Montserrat',sans-serif; 
  font-weight:900; 
  font-size:1.4rem; 
  color:var(--orange); 
}

.price-sub { 
  font-size:0.72rem; 
  color:var(--gray); 
}

.subsidy-chip { 
  background:var(--amber); 
  color:var(--dark); 
  font-size:0.72rem; 
  font-weight:700; 
  padding:4px 10px; 
  border-radius:20px; 
}

.warranty-strip { 
  display:flex; 
  gap:0.8rem; 
  margin-top:1rem; 
  flex-wrap:wrap; 
}

.w-tag { 
  background:#FFF3DC; 
  border:1px solid #F0D890; 
  font-size:0.7rem; 
  font-weight:600; 
  color:var(--dark); 
  padding:4px 10px; 
  border-radius:20px; 
}

.panel-link {
  cursor: pointer;;
  color: var(--amber);
  font-weight: 600;
  transition: color 0.2s;
}

.panel-link:hover {
  color: var(--orange, #F5A000);
}

.battery-link {
  cursor: pointer;
  color: var(--amber);
  font-weight: 600;
  transition: color 0.2s;
}

.battery-link:hover {
  color: var(--orange, #F5A000);
}

.inverter-link {
  cursor: pointer;
  color: var(--amber);
  font-weight: 600;
  transition: color 0.2s;
}

.inverter-link:hover {
  color: var(--orange, #F5A000);
}

@media (max-width: 768px) {

  .page-hero {
    padding-top: 130px;
  }

  .page-hero .prem-eyebrow {
    margin-top: 10px;
  }

  .product-header{
    padding:0.9rem 1rem;
  }

  .product-header h3{
    font-size:1.1rem;
  }

  .price-row{
    background:
      linear-gradient(
      135deg,
      #fff7df,
      #fff
    );

    border:1px solid #f0d890;

    padding:15px;

  }
}

.ev-section-header { 
  text-align:center; 
  margin-bottom:2rem; 
}

.ev-section-header h3 { 
  font-family:'Montserrat',sans-serif; 
  font-size:1.5rem; 
  font-weight:900; 
  color:var(--ev-teal); 
  margin-bottom:0.5rem; 
}

.ev-section-header p { 
  color:var(--gray); 
  font-size:0.9rem; 
}

.view-details-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 10px 0;
  background: transparent;
  border: 1.5px solid var(--amber);
  color: var(--amber);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.view-details-btn:hover {
  background: var(--amber);
  color: var(--dark);
}

.ev-product-card .view-details-btn {
  border-color: var(--ev-green);
  color: var(--ev-green);
}

.ev-product-card .view-details-btn:hover {
  background: var(--ev-green);
  color: white;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: var(--white);
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: modalSlideIn 0.3s ease;
  margin: auto;
}

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(0,0,0,0.1);
  border: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  color: #333;
  z-index: 10;
  transition: background 0.2s;
}

.modal-close:hover { background: rgba(0,0,0,0.2); }

@media (max-width: 600px) {
  .modal-box { border-radius: 12px; }
  
  
  
  
  
  
}

@media (max-width: 1024px) {
  .product-grid, .ev-product-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  
  
  .why-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 768px) {
  
  

  

  

  

  

  

  
  
  
  
  
  .product-grid, .ev-product-grid { 
    grid-template-columns:1fr; 
  }
  .why-grid { 
    grid-template-columns:1fr; 
  }
  
  
  
  
  
  
  
  
}

@media (max-width: 600px) {
  .product-grid, .ev-product-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
}

.product-card,
.solution-card {

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .08),
      rgba(255, 255, 255, .03));

  border-radius: 24px;

  border: 1px solid rgba(255, 255, 255, .12);

  backdrop-filter: blur(15px);

  overflow: hidden;

}

@media(max-width:768px) {

  .product-card img,
  .solution-card img {

    width: 100%;
    height: 220px;
    object-fit: cover;

  }

}

@media(max-width:768px) {

  .solutions-section {

    padding: 50px 18px;

  }


  .product-grid {

    gap: 20px;

  }


  .product-card {

    padding: 20px;

  }

}

@media(max-width:768px){

  .tab-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:5px;
  }

  .tab-btn{
    white-space:nowrap;
  }

}

@media(max-width:768px) {

  .product-card {
    border-radius: 18px;
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.08);
  }

  .product-header {
    padding: 14px 16px;
  }

  .product-header h3 {
    font-size: 1.1rem;
  }

  .product-body {
    padding: 1rem;
  }

  .specs-list li {
    font-size: .78rem;
    padding: 4px 0;
  }


  .price-row {
    border-radius: 12px;
    padding: 14px;
  }


  .price-main {
    font-size: 1.25rem;
  }


  .subsidy-chip {
    font-size: .65rem;
    padding: 5px 8px;
  }


  .warranty-strip {
    gap: 6px;
  }


  .w-tag {
    font-size: .65rem;
  }


  .view-details-btn {
    margin-top: 12px;
    width: 100%;
    padding: 12px;
    border-radius: 30px;
  }


  


  


  .tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
  }


  .tab-btn {
    white-space: nowrap;
  }

}

a, button, .tab-btn, .cat-tab, .view-details-btn, .faq-q, .nav-links a {
  min-height: 40px;
  touch-action: manipulation;
}

@media (max-width: 480px) {
  
  
  
  
  
  
  
  
  
  
  section, .solutions-section { padding-left: 4%; padding-right: 4%; }
  
}

.modal-box { max-width: 94vw; max-height: 90vh; overflow-y: auto; }

/* ══ SOLAR PAGE MOBILE POLISH ══ */
@media (max-width: 480px) {
  .lifestyle-banner { padding: 40px 4% 0; }
  .lifestyle-banner h2 { font-size: 1.3rem; }
  .pdf-btn-row { flex-direction: column; gap: 0.8rem; align-items: center; }
  .pdf-btn { width: 100%; text-align: center; }
  .diagram-img { border-radius: 10px !important; }
  .modal-box { padding: 1rem; }
  .modal-content h2 { font-size: 1.2rem; }
  .modal-specs-grid { grid-template-columns: 1fr !important; }
  .tab-bar { gap: 0.4rem; }
  .tab-btn { padding: 8px 12px; font-size: 0.76rem; }
}

@media (max-width: 768px) {
  .pdf-btn-row { flex-wrap: wrap; justify-content: center; }
}