/* WORLD LEGEND OÜ - Hunter Global Corporate Styling & Design System */

:root {
  --primary: #002855;               /* Hunter Global Corporate Navy */
  --primary-dark: #001A38;          /* Hunter Deep Midnight Navy */
  --primary-container: #0A3A75;
  --secondary: #115CB9;             /* Smart Water / Hydrawise Tech Blue */
  --secondary-container: #659DFE;
  --hunter-navy: #002855;           /* Hunter Official Navy */
  --hunter-red: #C8102E;            /* Hunter Signature Red Accent */
  --hunter-red-hover: #A00C22;
  --hunter-green: #012D1D;          /* Eco Irrigation Deep Green */
  --hunter-green-light: #0D5C3A;
  --surface: #F8F9FA;
  --surface-low: #F3F4F5;
  --surface-lowest: #FFFFFF;
  --on-surface: #111827;
  --on-surface-variant: #4B5563;
}

/* Supernav */
.hunter-supernav {
  background: #001C3D;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hunter-supernav a {
  transition: color 0.2s ease;
}

.hunter-supernav a:hover {
  color: #FFFFFF;
}

/* Glassmorphism & Header */
.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 40, 85, 0.08);
}

.glass-badge {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(17, 92, 185, 0.2);
}

/* Brand Buttons */
.btn-hunter-red {
  background: linear-gradient(135deg, #C8102E 0%, #A00C22 100%);
  color: #FFFFFF;
  font-weight: 700;
  transition: all 0.25s ease;
}
.btn-hunter-red:hover {
  background: linear-gradient(135deg, #D91837 0%, #B81129 100%);
  box-shadow: 0 8px 24px -4px rgba(200, 16, 46, 0.45);
  transform: translateY(-1px);
}
.btn-hunter-red:active {
  transform: translateY(0);
}

.btn-hunter-navy {
  background: linear-gradient(135deg, #002855 0%, #001A38 100%);
  color: #FFFFFF;
  font-weight: 700;
  transition: all 0.25s ease;
}
.btn-hunter-navy:hover {
  background: linear-gradient(135deg, #083870 0%, #002855 100%);
  box-shadow: 0 8px 24px -4px rgba(0, 40, 85, 0.35);
  transform: translateY(-1px);
}

.primary-gradient {
  background: linear-gradient(135deg, #002855 0%, #0A3A75 100%);
}
.primary-gradient:hover {
  background: linear-gradient(135deg, #083870 0%, #115CB9 100%);
  box-shadow: 0 8px 24px -4px rgba(0, 40, 85, 0.35);
}

.hero-overlay {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 42%, rgba(255, 255, 255, 0.22) 75%, rgba(255, 255, 255, 0.03) 100%);
}

@media (max-width: 1024px) {
  .hero-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.84) 55%, rgba(255, 255, 255, 0.35) 100%);
  }
}

/* Cards & Interactions */
.interactive-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.interactive-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 35px -10px rgba(0, 40, 85, 0.12);
  border-color: rgba(17, 92, 185, 0.35);
}

/* Spec Pills */
.spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F1F5F9;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}

/* Warranty Seal */
.warranty-seal {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid #F59E0B;
}

/* Hunter Official Dealer Ribbon */
.dealer-ribbon {
  background: linear-gradient(90deg, #001C3D 0%, #002855 50%, #0A3A75 100%);
  color: #FFFFFF;
}

/* Category Filter Active Pill */
.filter-btn-active {
  background-color: #002855 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 40, 85, 0.25);
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Seamless Product Image Blend (Removes white rectangular image borders) */
.product-image-box {
  background-color: #FFFFFF !important;
}

.product-image-box img {
  mix-blend-mode: multiply;
  background-color: transparent !important;
}