/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Hello Elementor Child Theme for Sun Industries Water Heaters. Custom UAE premium design.
Author: Antigravity AI
Author URI: https://github.com/google-deepmind
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ----------------------------------------------------
   SUN INDUSTRIES - WORDPRESS CHILD THEME STYLES
   ---------------------------------------------------- */

:root {
  /* Colors */
  --color-primary: #C8102E; /* UAE Industrial Red */
  --color-primary-hover: #E31837;
  --color-primary-light: #FCE8EA;
  --color-dark: #1A1A1A;
  --color-dark-muted: #6B7280;
  --color-light: #FFFFFF;
  --color-bg-light: #F9FAFB;
  --color-border: #E5E7EB;
  --color-success: #10B981;
  --color-card-shadow: rgba(0, 0, 0, 0.05);
  --color-glow-shadow: rgba(200, 16, 46, 0.12);

  /* Fonts */
  --font-headings: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
}

/* Global Typography & Base Styles */
body {
  font-family: var(--font-body) !important;
  color: var(--color-dark);
  line-height: 1.6;
  background-color: var(--color-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings) !important;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
}

/* Base Layout & Grid System */

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 90px 0;
}

.section-bg {
  background-color: var(--color-bg-light);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.section-title {
  font-size: 2.5rem;
  font-family: var(--font-headings);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  margin: 12px auto 0;
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--color-dark-muted);
  line-height: 1.6;
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-light) !important;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 8px 24px var(--color-glow-shadow);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-dark) !important;
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-dark);
  transform: translateY(-2px);
}

.btn-white {
  background-color: var(--color-light);
  color: var(--color-primary) !important;
}

.btn-white:hover {
  background-color: var(--color-bg-light);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────
   TOP BAR  —  slim brochure download strip
   ───────────────────────────────────────── */
.sun-topbar {
  background: #fdf0f2;          /* very soft red-white tint */
  border-bottom: 1px solid #f5c6ce;
  z-index: 1001;
  position: relative;
}

.sun-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

.sun-topbar-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-headings);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9b1c2e;
  margin-right: auto;   /* push to the left, buttons go right */
  opacity: 0.8;
}

.sun-topbar-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Top bar buttons */
.sun-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 3px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.sun-tb-btn-outline {
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary);
  background: transparent;
}
.sun-tb-btn-outline:hover {
  background: var(--color-primary);
  color: #fff !important;
}

.sun-tb-btn-solid {
  color: #fff !important;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.sun-tb-btn-solid:hover {
  background: #a50d26;
  border-color: #a50d26;
  box-shadow: 0 3px 10px rgba(200,16,46,0.35);
}

/* ─────────────────────────────────────────
   MAIN HEADER & Navigation
   ───────────────────────────────────────── */
/* Header & Navigation */
.sun-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.sun-navbar-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 80px;
  gap: 0;
}

/* Logo gets auto right margin — pushes nav+buttons to the right */
.sun-logo {
  margin-right: auto;
}

.sun-logo-link {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none !important;
  flex-shrink: 0;
}

.sun-logo-sun {
  color: var(--color-primary);
}

.sun-logo-ind {
  color: var(--color-dark);
  font-weight: 700;
}

.sun-nav-menu {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.sun-nav-link {
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  padding: 8px 0;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.sun-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.sun-nav-link:hover {
  color: var(--color-primary) !important;
}

.sun-nav-link:hover::after {
  width: 100%;
}

.sun-nav-active {
  color: var(--color-primary) !important;
}

.sun-nav-active::after {
  width: 100% !important;
}

/* Header action area — sits right next to the nav, small gap */
.sun-header-action {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 20px;
}

/* Header CTA Buttons */
.sun-hdr-btn {
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 6px 11px;
  border-radius: 4px;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  white-space: nowrap;
  white-space: nowrap;
}

.sun-hdr-btn-outline {
  background: transparent;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary);
}

.sun-hdr-btn-outline:hover {
  background: var(--color-primary);
  color: #ffffff !important;
  border-color: var(--color-primary);
}

.sun-hdr-btn-solid {
  background: var(--color-primary);
  color: #ffffff !important;
  border: 1.5px solid var(--color-primary);
}

.sun-hdr-btn-solid:hover {
  background: #a50d26;
  border-color: #a50d26;
  box-shadow: 0 4px 12px rgba(200,16,46,0.4);
}

/* Dropdown Menu CSS */
.sun-has-dropdown {
  position: relative;
}

.sun-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background-color: #ffffff;
  min-width: 240px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  z-index: 1001;
  animation: fadeInDown 0.2s ease;
}

.sun-has-dropdown:hover .sun-dropdown-menu {
  display: block;
}

.sun-dropdown-menu li {
  width: 100%;
}

.sun-dropdown-menu li a {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-headings);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-dark) !important;
  text-transform: none;
  text-decoration: none !important;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.sun-dropdown-menu li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary) !important;
  padding-left: 26px;
}

/* Forms */
.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  font-family: var(--font-headings);
  color: var(--color-dark);
}

.form-control {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Custom layout enhancements */
.sun-hero-overlay {
  position: relative;
}

.sun-hero-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg, rgba(10,10,10,0.88) 0%, rgba(15,15,15,0.75) 45%, rgba(10,10,10,0.55) 100%);
  z-index: 1;
}

.sun-glow-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--color-border);
  background: var(--color-light);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px var(--color-card-shadow);
}

.sun-glow-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px var(--color-glow-shadow);
  border-color: var(--color-primary);
}

/* Custom list styling for technical specifications */
.sun-spec-list {
  list-style: none;
  padding: 0;
}

.sun-spec-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--color-dark-muted);
}

.sun-spec-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.1rem;
}

/* Spec Tables */
.sun-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.sun-spec-table table {
  width: 100%;
  border-collapse: collapse;
}

.sun-spec-table th {
  background-color: var(--color-dark);
  color: var(--color-light);
  font-family: var(--font-headings);
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
  font-size: 0.95rem;
}

.sun-spec-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-dark-muted);
  font-size: 0.9rem;
}

.sun-spec-table tr:nth-child(even) {
  background-color: var(--color-bg-light);
}

.sun-spec-table tr:hover {
  background-color: var(--color-primary-light);
  transition: background-color 0.2s ease;
}

/* Trust badge/certification logos grid */
.sun-cert-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
  padding: 20px 0;
}

.sun-cert-logo {
  height: 50px;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: all 0.3s ease;
}

.sun-cert-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* CTA pulse button */
.sun-btn-pulse {
  position: relative;
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(200, 16, 46, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0);
  }
}

/* Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

.text-center { text-align: center; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }
  .section-title {
    font-size: 2rem;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sun-navbar-container {
    height: 70px;
  }
  .sun-nav-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    padding: 20px 24px 30px;
    gap: 6px;
    border-bottom: 3px solid var(--color-primary);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    z-index: 999;
  }
  .sun-nav-menu.is-open {
    display: flex;
  }
  .sun-nav-menu > li > a {
    display: block;
    padding: 12px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .sun-dropdown-menu {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-sm);
    padding: 0 0 8px 12px;
    margin-top: 4px;
  }
  .sun-dropdown-menu li a {
    padding: 8px 12px;
    font-size: 0.875rem;
  }
  .sun-header-action {
    display: none !important;
  }
}

/* -----------------------------------
   Mobile Hamburger Toggle Button
   ----------------------------------- */
.sun-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 6px;
  background: transparent;
  border: none;
  outline: none;
  transition: background 0.2s ease;
}

.sun-hamburger:hover {
  background-color: var(--color-primary-light);
}

.sun-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sun-hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sun-hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.sun-hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .sun-hamburger {
    display: flex;
  }
}

/* -----------------------------------
   Page Banner / Hero Inner Pages
   ----------------------------------- */
.sun-page-banner {
  background: linear-gradient(135deg, var(--color-dark) 0%, #2D1A1A 100%);
  padding: 70px 0 30px;
  border-bottom: 4px solid var(--color-primary);
  position: relative;
  overflow: hidden;
}

.sun-page-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(200,16,46,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.sun-page-banner h1 {
  color: #ffffff !important;
}

.sun-page-banner p {
  color: rgba(255,255,255,0.7) !important;
}

.sun-page-banner .sun-breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
}

.sun-page-banner .sun-breadcrumb a {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* -----------------------------------
   Smooth Scroll & Focus Accessibility
   ----------------------------------- */
html {
  scroll-behavior: smooth;
}

*:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* -----------------------------------
   Badge / Chip Styles
   ----------------------------------- */
.sun-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sun-badge-dark {
  background-color: var(--color-dark);
  color: #ffffff;
}

/* -----------------------------------
   Stats / Counter Section
   ----------------------------------- */
.sun-stat-number {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 3rem;
  color: var(--color-primary);
  line-height: 1;
  display: block;
}

.sun-stat-label {
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  display: block;
}

/* -----------------------------------
   Utilities
   ----------------------------------- */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-dark-muted); }
.font-headings { font-family: var(--font-headings); }
.mb-0 { margin-bottom: 0; }
.mt-auto { margin-top: auto; }

.bg-light { background-color: var(--color-bg-light) !important; }
.sun-hero-section h1 { color: #ffffff !important; }

/* ====================================================
   COMPREHENSIVE RESPONSIVE STYLES
   Breakpoints: 1200px | 1024px | 768px | 480px
==================================================== */

/* ---- 1200px: Large tablet landscape ---- */
@media (max-width: 1200px) {
  .container { max-width: 100%; padding-left: 32px; padding-right: 32px; }

  /* Hero 2-col tighten */
  .sun-hero-section .container > div[style*="grid-template-columns: 1fr 1fr"] {
    gap: 36px;
  }

  /* Footer 4-col → 2-col */
  footer > div.container > div[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
}

/* ---- 1024px: Tablet landscape ---- */
@media (max-width: 1024px) {
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
  .grid-3  { grid-template-columns: repeat(2, 1fr); }

  /* Trust bar counter + location card → stack */
  .sun-trust-bar .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Counter inner grid → wrap */
  .sun-trust-bar .container > div > div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* About section 2-col → stack */
  #about-us .grid-2,
  section .grid-2[style*="gap: 60px"] {
    grid-template-columns: 1fr !important;
  }

  /* Products left + right → stack */
  #products .container > div[style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero slider height */
  #heroSlider { height: 360px !important; }
}

/* ---- 768px: Mobile / Tablet portrait ---- */
@media (max-width: 768px) {
  /* === Container === */
  .container { padding-left: 20px; padding-right: 20px; }

  /* === Sections === */
  .section { padding: 52px 0; }
  .section-title { font-size: 1.75rem; }

  /* === Grids → single column === */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* === HERO — stack left/right → top/bottom === */
  .sun-hero-section { padding: 100px 0 60px; min-height: auto !important; }
  .sun-hero-section .container > div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }
  /* Hero text */
  .sun-hero-section h1 { font-size: 2.4rem !important; }
  .sun-hero-section p[style*="font-size: 1.1rem"] { font-size: 0.95rem !important; }
  /* 23yr badge */
  .sun-hero-section img[alt="23 Years of Experience"] { height: 80px !important; }
  /* Hero product area */
  #heroSlider { height: 300px !important; }
  .sun-water-drops { display: none; } /* hide decorative drops on small screens */
  /* Glow circles — shrink */
  .sun-hero-section div[style*="width: 420px"] {
    width: 280px !important; height: 280px !important;
  }
  .sun-hero-section div[style*="width: 380px"] {
    width: 260px !important; height: 260px !important;
  }

  /* === TRUST BAR === */
  .sun-trust-bar .container > div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* Counter bar → single row, scroll if needed */
  .sun-trust-bar div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .sun-trust-bar span[style*="font-size: 2.25rem"] { font-size: 1.6rem !important; }
  /* Location dark card */
  .sun-trust-bar div[style*="background: #1a1a1a"] {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .sun-trust-bar div[style*="background: #1a1a1a"] > a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* === BUSINESSES LOGOS === */
  #clientLogoTrack {
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: center !important;
  }
  #clientLogoTrack img { height: 32px !important; }

  /* === ABOUT SECTION === */
  #about-us .grid-2,
  section .grid-2[style*="align-items: center"] {
    grid-template-columns: 1fr !important;
  }
  /* About image — full width on mobile */
  #about-us img { width: 100% !important; }
  #about-us div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* === WHY CHOOSE US === */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* === PRODUCTS SECTION === */
  #products .container > div[style*="grid-template-columns: 1fr 2fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  #products .grid-2 { grid-template-columns: 1fr !important; }

  /* === CTA SECTION === */
  section[style*="background: var(--color-primary)"] h2 { font-size: 1.6rem !important; }
  section[style*="background: var(--color-primary)"] div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  section[style*="background: var(--color-primary)"] a.btn {
    text-align: center !important;
    width: 100% !important;
  }

  /* === HEADER NAV === */
  .sun-navbar-container { height: 68px; }
  .sun-nav-menu {
    display: none;
    position: fixed;
    top: 68px;
    left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    padding: 16px 20px 24px;
    gap: 4px;
    border-bottom: 3px solid var(--color-primary);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    z-index: 999;
  }
  .sun-nav-menu.is-open { display: flex; }
  .sun-header-action { display: none !important; }
  .sun-hamburger { display: flex; }
  .sun-dropdown-menu {
    position: static !important;
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    background: var(--color-bg-light);
    padding: 0 0 8px 12px;
    margin-top: 4px;
  }

  /* === FOOTER === */
  footer > div.container > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer .container div[style*="justify-content: space-between"][style*="border-top"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  /* === INNER PAGE BANNERS === */
  .sun-page-banner { padding: 90px 0 24px; }
  .sun-page-banner h1 { font-size: 2rem !important; }

  /* === PRODUCT PAGES === */
  .sun-product-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .sun-spec-table-wrap { overflow-x: auto; }

  /* === CONTACT PAGE === */
  .sun-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ---- 480px: Small phones ---- */
@media (max-width: 480px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .section { padding: 40px 0; }
  .section-title { font-size: 1.5rem; }
  .btn { font-size: 0.82rem; padding: 11px 22px; }

  /* Hero */
  .sun-hero-section { padding: 90px 0 50px; }
  .sun-hero-section h1 { font-size: 1.9rem !important; }
  #heroSlider { height: 240px !important; }
  .sun-hero-section img[alt="23 Years of Experience"] { height: 64px !important; }

  /* Grid → always single col on phones */
  .grid-4 { grid-template-columns: 1fr !important; }

  /* Counter bar → wrap */
  .sun-trust-bar div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Logos */
  #clientLogoTrack img { height: 26px !important; }

  /* Footer → single col */
  footer > div.container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Nav logo */
  .sun-logo img { height: 44px !important; }
  .sun-navbar-container { padding: 0 16px !important; }
}

/* ---- Contact form inline grids → single column on mobile ---- */
@media (max-width: 600px) {
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 16px"] {
    grid-template-columns: 1fr !important;
  }
  /* Contact page info + form stack */
  .grid-2[style*="gap: 60px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Contact info cards (grid-3 → 1 col) */
  .grid-3 { grid-template-columns: 1fr !important; }
}

/* ---- Product/Hotsun pages — image + content stack ---- */
@media (max-width: 900px) {
  /* Any 2-column layout with image on left */
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
  div[style*="display: grid"][style*="grid-template-columns: 1.5fr 1fr"],
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Product specs table — allow horizontal scroll */
  table { display: block; overflow-x: auto; white-space: nowrap; width: 100%; }
  table tbody { display: table; width: 100%; }
}

/* ---- Ensure images never overflow their container ---- */
img { max-width: 100%; height: auto; }

/* ---- Buttons always readable on small screens ---- */
@media (max-width: 480px) {
  .btn + .btn { margin-top: 0; }
  div[style*="display: flex"][style*="gap: 14px"],
  div[style*="display: flex"][style*="gap: 16px"] {
    flex-wrap: wrap !important;
  }
  div[style*="display: flex"][style*="gap: 14px"] a,
  div[style*="display: flex"][style*="gap: 16px"] a {
    flex: 1 1 140px;
    text-align: center;
    justify-content: center;
  }
}
/* ============================================================
   NEW PAGES — Responsive fixes
   ============================================================ */

/* ---- Nav link font size — prevent wrapping on medium screens ---- */
@media (max-width: 1100px) {
  .sun-nav-link { font-size: 0.78rem; letter-spacing: 0; }
  .sun-nav-menu { gap: 14px; }
  .sun-header-action { gap: 6px; }
}

/* ---- Certifications grid ---- */
@media (max-width: 900px) {
  .cert-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 580px) {
  .cert-grid { grid-template-columns: 1fr !important; }
  .cert-card-link { padding: 32px 24px 28px; }
}

/* ---- Gallery grid ---- */
@media (max-width: 1024px) {
  .sun-gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  .sun-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .sun-gallery-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gallery-item { aspect-ratio: 1/1; }
}

/* ---- Special Heaters — thumbnail grid on mobile ---- */
@media (max-width: 768px) {
  .sh-thumb img { height: 70px !important; }
  .sh-safety-box { padding: 18px 16px; }
  .sh-description p { font-size: 0.92rem; }
}

/* ---- Lightbox on mobile ---- */
@media (max-width: 600px) {
  #sunLbImg { max-height: 70vh; }
  #sunLbPrev { left: 6px !important; width: 40px !important; height: 40px !important; }
  #sunLbNext { right: 6px !important; width: 40px !important; height: 40px !important; }
  #sunLbClose { top: 12px !important; right: 12px !important; }
}

/* ---- Fix nav menu z-index on new pages ---- */
.sun-nav-menu { z-index: 1001; }
.sun-dropdown-menu { z-index: 1002; }

/* ============================================================
   NAVBAR LAYOUT — Logo left / Nav+Buttons right
   ============================================================ */

/* On mobile: logo auto-margin resets so hamburger is right-aligned */
@media (max-width: 768px) {
  .sun-logo { margin-right: auto !important; }
  .sun-header-action { margin-left: 0 !important; }
  .sun-navbar-container { gap: 0 !important; }
}

/* Medium screens (1100–1200px): tighten further */
@media (max-width: 1200px) {
  .sun-header-action { margin-left: 12px; gap: 6px; }
}

/* ============================================================
   CUSTOM SELECT — Product of Interest dropdown
   ============================================================ */
.sun-select {
  width: 100%;
  padding: 12px 44px 12px 16px; /* right padding leaves room for chevron */
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-dark);
  background: #ffffff;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  /* Remove native browser arrow on ALL browsers */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.sun-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.12);
}

.sun-select:hover {
  border-color: rgba(200,16,46,0.4);
}

/* Ensure option text stays dark */
.sun-select option {
  color: var(--color-dark);
  background: #ffffff;
  font-size: 0.95rem;
}

/* Placeholder option — greyed out */
.sun-select option[value=""] {
  color: #9ca3af;
}

/* ============================================================
   TOP BAR — Mobile responsive
   ============================================================ */

/* Tablet: collapse label text, keep buttons */
@media (max-width: 768px) {
  .sun-topbar-label { display: none; }
  .sun-topbar-inner { justify-content: center; height: 34px; }
  .sun-topbar-buttons { gap: 6px; }
  .sun-tb-btn { font-size: 0.62rem; padding: 3px 9px; }
}

/* Small phones: hide entire top bar to save space */
@media (max-width: 480px) {
  .sun-topbar { display: none; }
}

/* Also fix: .sun-header-action is now empty/gone — hide if still rendered */
.sun-header-action { display: none !important; }

/* Top bar WhatsApp link — matches the old "Download Brochures" label style */
.sun-topbar-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-headings);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9b1c2e !important;
  text-decoration: none !important;
  margin-right: auto;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.sun-topbar-wa:hover { opacity: 1; }
.sun-topbar-wa svg { flex-shrink: 0; fill: #9b1c2e; }

@media (max-width: 480px) {
  .sun-topbar-wa span { display: none; }
  .sun-topbar-wa { font-size: 0.65rem; gap: 4px; }
}





}

/* ============================================================
   MOBILE NAV — Brochure download links
   ============================================================ */

/* Hidden on desktop */
.sun-mob-brochures { display: none !important; }

/* Show in mobile open menu */
@media (max-width: 768px) {
  .sun-mob-brochures {
    display: block !important;
    border-top: 2px dashed var(--color-border);
    margin-top: 8px;
    padding-top: 8px;
  }

  .sun-mob-brochure-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-family: var(--font-headings);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-border);
    transition: opacity 0.2s ease;
  }

  .sun-mob-brochure-link:hover {
    opacity: 0.75;
  }

  .sun-mob-brochure-link svg {
    stroke: var(--color-primary);
    flex-shrink: 0;
  }
}

/* ============================================================
   RESPONSIVE FIXES — Header, Logo, Overflow
   ============================================================ */

/* Prevent ALL elements from causing horizontal overflow */
*, *::before, *::after {
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Top bar: hide brochure buttons on phones, show WA only --- */
@media (max-width: 600px) {
  .sun-topbar { display: none; }
}

/* --- Logo: scale down on mobile so it fits without clipping --- */
@media (max-width: 768px) {
  .sun-logo img {
    height: 44px !important;
    max-width: 180px;
    width: auto;
    object-fit: contain;
  }
  .sun-navbar-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    height: 64px;
  }
  /* Mobile nav slides down from correct offset */
  .sun-nav-menu {
    top: 64px !important;
  }
}

@media (max-width: 390px) {
  .sun-logo img {
    height: 38px !important;
    max-width: 160px;
  }
  .sun-navbar-container { height: 58px; }
  .sun-nav-menu { top: 58px !important; }
}

/* --- Container: ensure proper padding and no overflow --- */
@media (max-width: 480px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* --- Hero/Page sections: prevent inline wide elements from overflowing --- */
@media (max-width: 768px) {
  .sun-hero-section,
  .sun-page-banner,
  section,
  .section {
    overflow-x: hidden;
  }
}

/* ============================================================
   MOBILE MENU — Full overlay + scroll lock + close button
   ============================================================ */

/* Lock body scroll when mobile menu is open */
body.menu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* Backdrop overlay — dims the page behind the menu */
#sun-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
  opacity: 0;
}
#sun-nav-overlay.is-visible {
  display: block;
  opacity: 1;
}

/* Mobile nav panel — slide in from top, fixed height with internal scroll */
@media (max-width: 768px) {
  .sun-nav-menu {
    display: none;
    position: fixed !important;
    top: 0 !important;             /* covers from TOP of screen */
    left: 0;
    right: 0;
    bottom: 0;                     /* full screen height */
    background: #ffffff !important;
    flex-direction: column;
    padding: 80px 28px 40px !important;  /* top padding for close btn space */
    gap: 0 !important;
    overflow-y: auto;
    z-index: 999 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sun-nav-menu.is-open {
    display: flex !important;
    transform: translateX(0);
  }
}

/* Close × button inside mobile nav */
.sun-nav-close {
  display: none;
}

@media (max-width: 768px) {
  .sun-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-dark);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
  }
  .sun-nav-close:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
  }
  /* nav needs position relative for absolute close btn */
  nav[aria-label="Primary navigation"] {
    position: static;
  }
  #sun-main-nav {
    position: fixed !important;
  }
}

/* ============================================================
   NEW HEADER — Desktop defaults for mobile-only elements
   ============================================================ */

/* Close button: hidden on desktop */
.sun-nav-close { display: none; }

/* Brochure links section: hidden on desktop */
.sun-mob-brochures { display: none; }

/* Overlay: hidden by default */
#sun-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1999;
}
#sun-nav-overlay.is-visible {
  display: block;
}

/* Logo image fix */
.sun-logo img {
  height: 60px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .sun-logo img {
    height: 44px;
  }
  .sun-topbar { display: none; }
}