/* css/products.css - Moderne Produktkarten & Detailseite */

/* ========================================
   FILTER BUTTONS - Modern Design
   ======================================== */
.filter-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 48px 24px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.filter-buttons button {
  padding: 10px 24px;
  border-radius: 24px; /* Rundere Buttons */
  border: 2px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.filter-buttons button:hover {
  background: var(--primary-color);
  color: var(--text-on-primary); /* ✅ Dynamisch für Kontrast */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.filter-buttons button.active {
  background: var(--primary-color);
  color: var(--text-on-primary); /* ✅ Dynamisch für Kontrast */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}


/* ========================================
   PRODUKTGRID - Modern Cards
   ======================================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px; /* Mehr Abstand zwischen Produkten */
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}


/* ========================================
   PRODUKT-KARTE - Card Design
   ======================================== */
.product-card {
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); /* ✅ STÄRKERER Schatten */
  border: none; /* ✅ Kein Border */
  cursor: pointer;
  transition: all var(--transition-base);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18); /* ✅ Noch stärker bei Hover */
}

.product-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}


/* ========================================
   PRODUCT IMAGE - Mit Breathing Room
   ======================================== */
.product-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* Square aspect ratio */
  overflow: hidden;
  background: #FFFFFF; /* ✅ Weiß statt Grau */
  border: none; /* ✅ KEIN Rand */
  box-shadow: none; /* ✅ KEIN separater Schatten */
}

.product-card img,
.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zeigt ganzes Bild ohne Crop */
  padding: 16px; /* Innenabstand für Breathing Room */
  transition: transform var(--transition-slow);
}

.product-card:hover img {
  transform: scale(1.05);
}


/* ========================================
   PRODUCT INFO
   ======================================== */
.product-card .product-info,
.product-info {
  padding: var(--space-lg);
}

.product-card h3,
.product-title {
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--font-family-display);
  color: var(--gray-900);
  margin-bottom: var(--space-sm);
  line-height: 1.4;

  /* Text Truncation */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .price,
.product-price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary-color);
  margin-top: var(--space-sm);
}


/* ========================================
   PRODUCT BADGES - Neu/Aktion
   ======================================== */
.product-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 10;

  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

.product-badge.new {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.product-badge.sale {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

/* Multiple Badges */
.product-card .product-badge:nth-child(2) {
  top: calc(var(--space-md) + 32px);
}


/* ========================================
   OUT OF STOCK
   ======================================== */
.product-card.out-of-stock {
  opacity: 0.6;
}

.product-card.out-of-stock::after {
  content: 'Ausverkauft';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: var(--space-md) var(--space-xl);
  background: rgba(0, 0, 0, 0.8);
  color: white;

  font-size: var(--text-lg);
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

.out-of-stock-label {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  margin-top: var(--space-sm);
}


/* ========================================
   FARB-PUNKTE AUF PRODUKTKARTE
   ======================================== */
.card-color-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.card-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.card-color-dot:hover {
  transform: scale(1.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.card-color-dot.active {
  box-shadow: 0 0 0 1px white, 0 0 0 3px var(--primary-color);
}

@media (max-width: 768px) {
  .card-color-dot {
    width: 16px;
    height: 16px;
  }
}


/* ========================================
   NO PRODUCTS STATE
   ======================================== */
.no-products {
  text-align: center;
  padding: var(--space-3xl);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.no-products p {
  font-size: var(--text-lg);
  color: var(--gray-600);
  margin-bottom: var(--space-xl);
}


/* ========================================
   ERROR CONTAINER
   ======================================== */
.error-container {
  text-align: center;
  padding: var(--space-3xl);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  margin: var(--space-3xl) auto;
}

.error-container h2 {
  font-size: var(--text-3xl);
  color: var(--gray-900);
  margin-bottom: var(--space-lg);
}

.error-container p {
  font-size: var(--text-base);
  color: var(--gray-600);
  margin-bottom: var(--space-md);
}

.error-container ul {
  text-align: left;
  margin: var(--space-xl) auto;
  max-width: 400px;
  color: var(--gray-700);
}

.error-container li {
  margin-bottom: var(--space-sm);
}

.error-container .btn-primary {
  margin-top: var(--space-xl);
}


/* ========================================
   PRODUCT CONTAINER (mit Back-Button)
   ======================================== */
.product-container {
  max-width: 1200px;
  margin: 32px auto 0 auto; /* ✅ Top-Margin für Abstand */
  padding: 24px;
}

.back-to-products {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--gray-700); /* ✅ Neutrale Farbe, passt zu jedem BG */
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.back-to-products:hover {
  transform: translateX(-4px);
  opacity: 0.7;
}


/* ========================================
   EINZELPRODUKT LAYOUT
   ======================================== */
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  background: white;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  margin-top: 16px; /* ✅ Abstand zum Back-Button */
}


/* ========================================
   PRODUCT IMAGES (Detailseite)
   ======================================== */
.product-images {
  position: relative;
  background: #FFFFFF; /* ✅ Weißer Hintergrund */
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.product-images img.product-image-main {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base);
  cursor: zoom-in;
}

.product-images img.product-image-main:hover {
  transform: scale(1.02);
}


/* ========================================
   LIGHTBOX
   ======================================== */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

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

.lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: white;
  padding: 16px;
  user-select: none;
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-nav {
  background: none;
  border: none;
  color: white;
  font-size: 64px;
  line-height: 1;
  cursor: pointer;
  padding: 16px;
  opacity: 0.6;
  transition: opacity 0.2s;
  user-select: none;
  flex-shrink: 0;
}

.lightbox-nav:hover {
  opacity: 1;
}

.lightbox-nav:disabled {
  opacity: 0.15;
  cursor: default;
}

@media (max-width: 768px) {
  .lightbox-nav {
    font-size: 40px;
    padding: 8px;
  }
}


/* ========================================
   BILD-THUMBNAILS (Galerie)
   ======================================== */
.product-thumbnails {
  display: flex;
  flex-wrap: wrap;           /* Umbuch wenn zu wenig Platz */
  gap: 8px;
  margin-top: 12px;
}

.product-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--gray-100);
  padding: 4px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.55;
}

.product-thumb:hover {
  opacity: 0.85;
}

.product-thumb--active {
  border-color: var(--primary-color);
  opacity: 1;
}


/* ========================================
   PRODUCT INFO SECTION
   ======================================== */
.product-info h2 {
  font-size: var(--text-4xl);
  font-weight: 700;
  font-family: var(--font-family-display);
  color: var(--gray-900);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.price-large {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--space-xs);
}

.product-sku {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-xl);
  min-height: 1.2em;
}

.description {
  color: var(--gray-600);
  font-size: var(--text-base);
  line-height: 1.8;
  margin-bottom: var(--space-2xl);
}


/* ========================================
   VARIANTEN-AUSWAHL (Modern mit Chips)
   ======================================== */
.variant-selector {
  margin: var(--space-2xl) 0;
}

.variant-selector h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
  color: var(--gray-800);
}

/* Color Chips */
.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-chip {
  width: 48px;
  height: 48px;
  border-radius: 50%; /* Rund! */
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.color-chip:hover:not(.unavailable) {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.color-chip.selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-color);
  transform: scale(1.05);
}

.color-chip.unavailable {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.color-chip.unavailable::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 2px;
  background: #ff0000;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Spezielle Farben für Color Chips */
.color-chip[data-color="black"],
.color-chip[data-color="schwarz"] {
  background-color: #000000;
}

.color-chip[data-color="white"],
.color-chip[data-color="weiss"],
.color-chip[data-color="weiß"] {
  background-color: #FFFFFF;
  border: 2px solid #e0e0e0; /* Damit weiß sichtbar ist */
}

.color-chip[data-color="red"],
.color-chip[data-color="rot"] {
  background-color: #FF0000;
}

.color-chip[data-color="blue"],
.color-chip[data-color="blau"] {
  background-color: #0000FF;
}

.color-chip[data-color="green"],
.color-chip[data-color="grün"] {
  background-color: #00AA00;
}

.color-chip[data-color="yellow"],
.color-chip[data-color="gelb"] {
  background-color: #FFD700;
}

.color-chip[data-color="grey"],
.color-chip[data-color="gray"],
.color-chip[data-color="grau"] {
  background-color: #808080;
}

.color-chip[data-color="navy"],
.color-chip[data-color="marine"] {
  background-color: #001F3F;
}

.color-chip[data-color="orange"] {
  background-color: #FF8800;
}

/* Size Chips */
.size-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.size-chip {
  min-width: 60px;
  padding: 12px 20px;
  border: 2px solid #d0d0d0;
  border-radius: var(--radius-md);
  background: white;
  font-weight: 600;
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--gray-800);
}

.size-chip:hover:not(.unavailable) {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.size-chip.selected {
  background: var(--primary-color);
  color: var(--text-on-primary);
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.size-chip.unavailable {
  opacity: 0.3;
  text-decoration: line-through;
  cursor: not-allowed;
  border-color: #e0e0e0;
  color: var(--gray-400);
}

.size-chip.unavailable:hover {
  transform: none;
  box-shadow: none;
}


/* ========================================
   GRUPPIERTER GRÖSSEN-PICKER
   ======================================== */
.size-group {
  margin-bottom: var(--space-md);
}

.size-group:last-child {
  margin-bottom: 0;
}

/* Gruppen-Label (z.B. "Herren", "Damen", "Kinder") */
.size-group-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: var(--space-sm);
}


/* ========================================
   INITIALEN-EINGABE
   ======================================== */
.initialen-selector {
  margin: var(--space-2xl) 0;
}

/* Gleicher Label-Stil wie Farbe/Grösse */
.initialen-selector h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
  color: var(--gray-800);
}

.required-star {
  color: #e53e3e;
  margin-left: 2px;
  font-weight: 400;
}

.initialen-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.initialen-selector input {
  width: 96px;
  padding: 12px var(--space-md);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: white;
  color: var(--gray-800);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.initialen-selector input::placeholder {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gray-400);
}

.initialen-selector input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
}

.initialen-selector input.error {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
  animation: shake 0.3s ease;
}

.initialen-hint {
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: 1.5;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}


/* ========================================
   QUANTITY SELECTOR
   ======================================== */
.quantity-selector {
  margin-bottom: var(--space-xl);
}

.quantity-selector label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.quantity-selector input {
  width: 100px;
  padding: var(--space-md);
  font-size: var(--text-base);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.quantity-selector input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}


/* ========================================
   VEREIN SELECTOR (falls noch im Template)
   ======================================== */
.verein-selector {
  margin: var(--space-xl) 0;
}

.verein-selector label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.verein-selector select {
  width: 100%;
  padding: var(--space-md);
  font-size: var(--text-base);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: white;
  transition: all var(--transition-fast);
}

.verein-selector select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}


/* ========================================
   ADD TO CART BUTTON
   ======================================== */
#add-to-cart-btn {
  width: 100%;
  margin-top: var(--space-lg);
}

#add-to-cart-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


/* ========================================
   TRUST BADGES
   ======================================== */
.trust-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--gray-700);
  font-size: var(--text-sm);
}

.trust-badge::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-xs);
}


/* ========================================
   RESPONSIVE - Mobile
   ======================================== */
@media (max-width: 768px) {
  /* Filter Buttons */
  .filter-buttons {
    padding: 12px 16px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-buttons button {
    padding: 8px 16px;
    font-size: var(--text-xs);
    flex-shrink: 0;
  }

  /* Products Grid */
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md);
    padding: 16px;
  }

  .product-image-container {
    padding-bottom: 100%; /* Bleibt quadratisch */
  }

  .product-card img,
  .product-image {
    padding: 12px; /* Weniger Padding auf Mobile */
  }

  .product-card h3,
  .product-title {
    font-size: var(--text-base);
  }

  .product-card .price,
  .product-price {
    font-size: var(--text-lg);
  }

  .product-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-lg);
  }

  .product-info h2 {
    font-size: var(--text-2xl);
  }

  .price-large {
    font-size: var(--text-2xl);
  }
}