/* Front Page Hero Section */
.front-page-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 50px;
}

.hero-overlay {
  width: 1080px;
  margin: 0 auto;
}

.hero-content {
  display: flex;
  justify-content: flex-end;
}

/* WPF Filters Styling in Hero - Generic selectors for any filter plugin */
/* WPF Filters Styling in Hero - Generic selectors for any filter plugin */
.hero-filter-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hero-filter-section > div,
.hero-filter-section > form,
.hero-filter-section .wpf-filter-wrapper,
.hero-filter-section .wpf-filters,
.hero-filter-section .wp-filter,
.hero-filter-section .filter-form {
  background: rgba(255, 255, 255, 0.98);
  padding: 11px 15px;
  border-radius: 12px;
  text-align: center;
}

/* Form layout - horizontal with flexbox */
.hero-filter-section form,
.hero-filter-section .wpf-filters form,
.hero-filter-section .filter-form form {
  display: flex !important;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-end;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Filter items - each dropdown container */
.hero-filter-section .wpf-filter-item,
.hero-filter-section .filter-item,
.hero-filter-section form > div:not(.all-inventory-section),
.hero-filter-section form > p {
  flex: 1;
  min-width: 180px;
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
}

/* Labels */
.hero-filter-section label,
.hero-filter-section .wpf-filter-item label,
.hero-filter-section .filter-item label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2271b1 !important;
  margin-bottom: 10px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block !important;
}

/* Select dropdowns */
.hero-filter-section select,
.hero-filter-section .wpf-filter-item select,
.hero-filter-section .filter-item select {
  padding: 11px 14px !important;
  border: 2px solid #2271b1 !important;
  border-radius: 8px !important;
  max-width: 100% !important;
}

/* Submit buttons */
.hero-filter-section .wpf-submit-button,
.hero-filter-section button[type="submit"],
.hero-filter-section input[type="submit"],
.hero-filter-section .button,
.hero-filter-section .wp-element-button {
  padding: 11px 30px !important;
  background: linear-gradient(135deg, #2271b1 0%, #1a5a8a 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  height: auto !important;
  line-height: normal !important;
  box-shadow: 0 4px 15px rgba(34, 113, 177, 0.3);
}

.hero-filter-section .wpf-submit-button:hover,
.hero-filter-section button[type="submit"]:hover,
.hero-filter-section input[type="submit"]:hover,
.hero-filter-section .button:hover,
.hero-filter-section .wp-element-button:hover {
  background: linear-gradient(135deg, #1a5a8a 0%, #135078 100%) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(34, 113, 177, 0.4) !important;
}

/* Hide any unwanted elements */
.hero-filter-section .wpf-preloader,
.hero-filter-section .loading {
  display: none;
}

/* All Inventory Section */
.all-inventory-hero-section {
  /* Reset generic container styles */
  background: transparent !important;
  padding: 0 !important;
}

/* All Inventory Section */
.all-inventory-page-section {
  /* Reset generic container styles */
  margin-top: 36px !important;
}

.all-inventory-button {
  display: block;
  width: 100%;
  padding: 20px 25px;
  background: #2271b1;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  text-align: center;
}

.all-inventory-button:hover {
  color: #1a5a8a;
  transform: translateY(-2px);
}

.home-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.section-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 25px;
}

/* Responsive Front Page */
@media (max-width: 768px) {
  /* Mobile Front Page Styles */
  .front-page-hero {
    min-height: 135px;
    align-items: flex-end;
  }

  .hero-title {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .hero-description {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .hero-product-filter {
    padding: 20px 15px;
  }

  .filter-controls {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .filter-button {
    width: 100%;
    padding: 14px 20px;
  }

  .all-inventory-button {
    font-size: 11px;
    padding: 10px;
  }

  .hero-filter-section > div,
  .hero-filter-section > form,
  .hero-filter-section .wpf-filter-wrapper,
  .hero-filter-section .wpf-filters,
  .hero-filter-section .wp-filter,
  .hero-filter-section .filter-form {
    padding: 10px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}