/* ============================================================
   WAYFARER'S LANE — SALE STYLES
   Diese Datei enthält ALLE Sale-bezogenen Styles.
   Zum Beenden des Sales einfach diese CSS-Datei nicht mehr
   einbinden und die Sale-HTML-Blöcke entfernen/auskommentieren.
   ============================================================ */

/* === Markenfarben === */
:root {
  --sale-red: #e8392a;
  --sale-red-dark: #c42d20;
  --sale-yellow: #ffd84d;
  --sale-text-dark: #1a1a1a;
}

/* === 1. Sticky Sale-Banner ganz oben === */
.sale-banner {
  background: var(--sale-red);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1050;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  line-height: 1.4;
}

.sale-banner strong {
  font-weight: 800;
  letter-spacing: 1px;
}

.sale-banner .sale-banner-divider {
  display: inline-block;
  margin: 0 12px;
  opacity: 0.55;
}

.sale-banner a,
.sale-banner a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .sale-banner { font-size: 12px; padding: 8px 12px; }
  .sale-banner .sale-banner-divider { display: block; height: 0; margin: 2px 0; opacity: 0; }
}

/* === 2. Preise (durchgestrichen + Sale) === */
.sale-price-block {
  display: inline-flex;
  align-items: anchor-center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.sale-price-old {
  color: #888;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-weight: 400;
  font-size: 0.75em;
}

.sale-price-new {
  color: var(--sale-red);
  font-weight: 800;
  font-size: 1.05em;
}

.sale-price-discount {
  display: inline-block;
  background: var(--sale-red);
  color: #fff;
  font-size: 0.55em;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: 1px;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
}

/* === 3. Lagerbestand-Anzeige === */
.sale-stock {
  margin-top: 14px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: var(--sale-text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sale-stock-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sale-red);
  box-shadow: 0 0 0 0 rgba(232, 57, 42, 0.7);
  animation: sale-pulse 2s infinite;
}

@keyframes sale-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 57, 42, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(232, 57, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 57, 42, 0); }
}

.sale-stock-text strong {
  color: var(--sale-red);
  font-weight: 700;
}

.sale-stock-bar {
  margin-top: 8px;
  width: 220px;
  max-width: 80%;
  height: 6px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.sale-stock-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sale-red), #ff7f50);
  border-radius: 3px;
}

/* === 4. Sale-Hinweis-Box (z.B. Rabattcode) === */
.sale-notice {
  background: #fff7e6;
  border: 1px dashed #d4a017;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 22px auto;
  max-width: 520px;
  text-align: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: #6b4c00;
  line-height: 1.5;
}

.sale-notice strong { color: var(--sale-red); }

/* === 5. Sale-Badge auf Produktbildern === */
.sale-product-wrapper {
  position: relative;
  display: inline-block;
  width: auto;
  padding-inline: 200px;
  text-align: center;
}

.sale-product-wrapper .sale-badge-overlay {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 110px;
  height: 110px;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sale-product-wrapper .sale-badge-overlay {
    width: 78px;
    height: 78px;
    top: 4%;
    right: 4%;
  }
}

/* === 6. Werbe-Headline ("Letzte Einheiten") === */
.sale-headline {
  text-align: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--sale-red);
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 6px;
}

.sale-subline {
  text-align: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: #555;
  font-style: italic;
  margin-bottom: 14px;
}

/* === 7. Shop-Übersicht: Sale-Karten === */
.shop-item .sale-headline { margin-top: 6px; }
.shop-item .sale-stock { margin-bottom: 10px; }