/* Landing: Neueste Produkte – magischer Bildbereich + stabile Karten (scoped) */

.lp-products .lp-pgrid{
  align-items: stretch;
}

.lp-products .lp-pcard{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ✅ feste Bildzone */
.lp-products .lp-pimg{
  position: relative;
  height: clamp(210px, 26vw, 280px);
  overflow: hidden;
  border-bottom: 1px solid rgba(20,18,26,0.08);

  background:
    radial-gradient(520px 280px at 25% 25%, rgba(109,40,217,0.14), transparent 60%),
    radial-gradient(520px 280px at 75% 70%, rgba(236,72,153,0.12), transparent 62%),
    radial-gradient(420px 220px at 60% 35%, rgba(234,179,8,0.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.55));
}

.lp-products .lp-pimg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,0.85), transparent 70%),
    radial-gradient(2px 2px at 22% 44%, rgba(255,255,255,0.60), transparent 70%),
    radial-gradient(2px 2px at 38% 28%, rgba(255,255,255,0.75), transparent 70%),
    radial-gradient(2px 2px at 62% 22%, rgba(255,255,255,0.70), transparent 70%),
    radial-gradient(2px 2px at 78% 40%, rgba(255,255,255,0.65), transparent 70%),
    radial-gradient(2px 2px at 88% 18%, rgba(255,255,255,0.78), transparent 70%),
    radial-gradient(2px 2px at 70% 72%, rgba(255,255,255,0.55), transparent 70%),
    radial-gradient(2px 2px at 34% 78%, rgba(255,255,255,0.50), transparent 70%);
  opacity: 0.55;
  pointer-events:none;
  mix-blend-mode: screen;
}

.lp-products .lp-pimg::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 90% at 50% 35%, rgba(255,255,255,0.0), rgba(20,18,26,0.06));
  pointer-events:none;
}

.lp-products .lp-pimg img{
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  padding: 16px;
  filter:
    drop-shadow(0 18px 28px rgba(20,18,26,0.18))
    drop-shadow(0 2px 0 rgba(255,255,255,0.25));
  transform: translateZ(0);
}

/* ✅ Textzone konsistent */
.lp-products .lp-pbody{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ✅ Titel & Preis nebeneinander */
.lp-products .lp-ptop{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

/* Titel: max 2 Zeilen */
.lp-products .lp-ptitle{
  min-width: 0;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -0.2px;
}

.lp-products .lp-ptitle a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ✅ Preis als „Twinkel-Plakette“ */
.lp-products .lp-pprice{
  text-align: right;
  white-space: nowrap;
}

.lp-products .lp-price{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  background:
    radial-gradient(160px 60px at 30% 35%, rgba(255,255,255,0.28), transparent 60%),
    linear-gradient(90deg, rgba(109,40,217,0.94), rgba(236,72,153,0.92));
  color: #fff;

  border: 1px solid rgba(255,255,255,0.20);
  box-shadow:
    0 14px 34px rgba(109,40,217,0.22),
    0 10px 26px rgba(236,72,153,0.14),
    0 0 0 1px rgba(20,18,26,0.06) inset;

  font-weight: 950;
  letter-spacing: -0.2px;
  line-height: 1;
  position: relative;
}

.lp-products .lp-price::before{
  content: "✦";
  font-size: 12px;
  opacity: 0.85;
  transform: translateY(-0.5px);
}

.lp-products .lp-price::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 999px;
  background:
    radial-gradient(140px 50px at 50% 50%, rgba(234,179,8,0.18), transparent 70%);
  filter: blur(8px);
  opacity: 0.55;
  pointer-events:none;
}

/* Kategorie als Badge statt Link */
.lp-products .lp-pmeta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 10px;
  border-radius: 999px;

  border: 1px solid rgba(20,18,26,0.10);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 24px rgba(20,18,26,0.06);

  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  opacity: 0.88;
}

.lp-products .lp-pmeta a:hover{
  opacity: 1;
  background: rgba(255,255,255,0.82);
}

/* Badges bleiben sauber */
.lp-products .lp-pbadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Buttons unten anheften */
.lp-products .lp-pactions{
  margin-top: auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

/* Hover: sanft */
@media (hover:hover){
  .lp-products .lp-pcard:hover .lp-pimg{ filter: saturate(1.03) contrast(1.02); }
  .lp-products .lp-pcard:hover .lp-pimg img{
    transform: scale(1.01);
    transition: transform 220ms ease;
  }
  .lp-products .lp-pcard:hover .lp-price{
    filter: brightness(1.03);
  }
}

/* Mobile: kompakter */
@media (max-width: 520px){
  .lp-products .lp-pimg{ height: 230px; }
  .lp-products .lp-pimg img{ padding: 14px; }
  .lp-products .lp-price{ padding: 7px 10px; }
}