/* =========================================
   Shop-the-Energy Component (global)
   - one component for all elements & zodiac pages
   - element background via --shop-grad (modifier classes)
   - Grid policy:
     • 4er Bucket: 2x2 (2 Spalten)
     • 6er Bucket: 2/2/2 (2 Spalten)
     • Mobile: 1 Spalte → ab ~680px: 2 Spalten
   ========================================= */

/* ---------- Element background modifiers ---------- */
.shopEnergy { --shop-grad: var(--grad-wasser); background: var(--shop-grad); }
.shopEnergy--feuer  { --shop-grad: var(--grad-feuer); }
.shopEnergy--erde   { --shop-grad: var(--grad-erde); }
.shopEnergy--luft   { --shop-grad: var(--grad-luft); }
.shopEnergy--wasser { --shop-grad: var(--grad-wasser); }

/* ---------- Section layout ---------- */
.shopEnergy { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.shopEnergy .seoMicro { text-align: center; opacity: .82; margin: 0 0 .6rem; }
.shopEnergy .hubH2 { text-align: center; margin: 0; }
.shopEnergy .shopLede {
  margin: .75rem 0 0;
  text-align: center;
  max-width: none; /* volle Containerbreite */
}

/* ---------- Buckets: stacked (untereinander), GlobalShell-safe ---------- */
.shopEnergy .shopBuckets{
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 2.8vw, 2.75rem);
  margin-top: 1.75rem;
}
.shopEnergy .shopBucket{
  width: 100%;
  background: rgba(var(--ed-ivory), 0.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: clamp(1rem, 2vw, 1.4rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.shopEnergy .shopBucketHead{ text-align: center; margin-bottom: 1.1rem; }
.shopEnergy .shopEyebrow{
  margin: 0 0 .35rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .85;
}
.shopEnergy .shopH3{ margin: 0 0 .35rem; }
.shopEnergy .shopIntro{ margin: 0 auto; max-width: 72ch; opacity: .9; }

/* ---------- Product grid ---------- */
/* Wichtig: Wir bleiben absichtlich bei max. 2 Spalten,
   damit 4er = 2x2 und 6er = 2/2/2 immer gut aussieht. */
.shopEnergy .shopGrid{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* mobil: 1 */
}
@media (min-width: 680px){
  .shopEnergy .shopGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten */
  }
}

/* ---------- Cards ---------- */
.shopEnergy .shopCard{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Media: kompakt, ruhig, kein Riesenbild */
.shopEnergy .shopMedia{
  display: block;
  background: #fff;
  aspect-ratio: 4 / 3;
  padding: .75rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.shopEnergy .shopMedia img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.shopEnergy .shopMedia--placeholder{
  background: rgba(var(--ed-ivory), 0.95);
  background-image: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,0));
}
.shopEnergy .shopPlaceholder{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.shopEnergy .shopPlaceholderPill{
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  font-size: .85rem;
  opacity: .85;
}

/* Body */
.shopEnergy .shopBody{
  padding: .9rem 1rem 1rem;
  display: grid;
  gap: .55rem;
}
.shopEnergy .shopCurationTop{
  margin: 0;
  font-size: .85rem;
  opacity: .85;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.shopEnergy .shopDot{ opacity: .6; }

.shopEnergy .shopTitle{
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;

  /* Titel nicht ausufern lassen */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shopEnergy .shopHook{ margin: 0; opacity: .9; }

/* ---------- Bottom / Button ---------- */
/* Preise werden nicht angezeigt (Preisänderungs-Risiko). */
.shopEnergy .shopPrice{ display: none !important; }

/* Button mittig (und immer unten stabil) */
.shopEnergy .shopBottom{
  margin-top: .65rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopEnergy .shopBtn{
  white-space: nowrap;
}

/* ---------- Fineprint ---------- */
.shopEnergy .fineprint{
  margin-top: 1.25rem;
  opacity: .85;
}