/*
Theme Name:   Aetherio Child
Template:     astra
Version:     1.0.0
Description:  Natürliches Design für aetherio love & science
Author:       VIBE
*/

/* ===== RESET & BASE ===== */
:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Open Sans', sans-serif;
  --font-button: 'Montserrat', sans-serif;
}

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== HEADER ===== */
.site-header {
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) !important;
  padding: 15px 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.ast-builder-menu-1 ul {
  display: flex !important;
  justify-content: center !important;
  list-style: none !important;
  gap: 30px !important;
  font-family: var(--font-button) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ast-builder-menu-1 ul li a {
  color: var(--ast-customizer-text-color) !important;
  text-decoration: none !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
}

.ast-builder-menu-1 ul li a:hover {
  background-color: var(--ast-customizer-color-2) !important; /* Lavendel */
  color: var(--ast-customizer-primary-color) !important;
}

/* ===== WOOCOMMERCE ===== */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}

.woocommerce ul.products li.product {
  background-color: white !important;
  border-radius: 10px !important;
  padding: 15px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--ast-customizer-color-3) !important; /* Lindgrün */
}

.woocommerce ul.products li.product h3 {
  font-family: var(--font-heading) !important;
  color: var(--ast-customizer-primary-color) !important;
}

.woocommerce-Price-amount {
  color: var(--ast-customizer-color-1) !important; /* Zitronengelb */
}

/* ===== FOOTER ===== */
.ast-builder-footer {
  background-color: var(--ast-customizer-text-color) !important;
  color: white !important;
  padding: 40px 0 20px !important;
  text-align: center !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ast-builder-menu-1 ul {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}