/* v101 – readable centered holo look
   Korrektur zu v100:
   - zentrierter Waifu-/Holo-Look bleibt im Bildbereich
   - Produktkarte und Textbereich bleiben hell, lesbar und premium
   - keine Änderung an Gruppen, IDs, Filter oder Produkten
*/

body.vault-page .vault-card{
  position:relative!important;
  border-radius:28px!important;
  padding:12px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.82),transparent 34%),
    linear-gradient(180deg,rgba(255,248,235,.96),rgba(239,219,186,.88))!important;
  border:1px solid rgba(91,30,45,.13)!important;
  box-shadow:0 20px 46px rgba(35,22,18,.10),inset 0 1px 0 rgba(255,255,255,.75)!important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}
body.vault-page .vault-card:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(216,177,95,.48)!important;
  box-shadow:0 30px 72px rgba(35,22,18,.18),0 0 0 1px rgba(216,177,95,.13) inset!important;
}
body.vault-page .vault-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.34),transparent 35%,rgba(216,177,95,.09)),
    radial-gradient(circle at 92% 8%,rgba(91,30,45,.05),transparent 28%)!important;
  opacity:.78!important;
}
body.vault-page .vault-card > *{
  position:relative!important;
  z-index:1!important;
}

/* Nur der Bildbereich bekommt den dunklen Deluxe-/Holo-Look. */
body.vault-page .vault-img-wrap{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  aspect-ratio:1699/2176!important;
  min-height:0!important;
  padding:10px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,244,223,.10),transparent 54%),
    linear-gradient(145deg,#130609,#2a0d15)!important;
  box-shadow:
    inset 0 0 0 1px rgba(216,177,95,.28),
    0 14px 34px rgba(35,12,16,.14)!important;
}
body.vault-page .vault-img-wrap::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.10),transparent 24%),
    linear-gradient(135deg,rgba(255,255,255,.055),transparent 35%,rgba(216,177,95,.055))!important;
}
body.vault-page .vault-img-wrap::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:3!important;
  background:linear-gradient(115deg,transparent 0 40%,rgba(255,255,255,.12) 46%,rgba(255,255,255,.34) 50%,rgba(216,177,95,.18) 54%,transparent 60%)!important;
  transform:translateX(-135%)!important;
  opacity:0!important;
  transition:transform .72s ease,opacity .72s ease!important;
}
body.vault-page .vault-card:hover .vault-img-wrap::after{
  transform:translateX(135%)!important;
  opacity:1!important;
}
body.vault-page .vault-img-wrap > img{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:auto!important;
  border-radius:18px!important;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.18))!important;
  transition:transform .28s ease,filter .28s ease!important;
  image-rendering:auto!important;
}
body.vault-page .vault-card:hover .vault-img-wrap > img{
  transform:scale(1.018)!important;
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.22)) contrast(1.05) saturate(1.05) brightness(1.02)!important;
}

/* Textbereich wieder hell und lesbar. */
body.vault-page .vault-card-body{
  position:relative!important;
  z-index:1!important;
  margin-top:0!important;
  padding:16px 2px 4px!important;
  background:transparent!important;
  border-top:0!important;
  color:#4b2e25!important;
}
body.vault-page .vault-card-body h3{
  color:#5B1E2D!important;
  font-size:1.04rem!important;
  line-height:1.23!important;
  margin:4px 0 8px!important;
  letter-spacing:-.015em!important;
  text-shadow:none!important;
}
body.vault-page .vault-sub{
  color:#6b5043!important;
  font-size:.86rem!important;
  line-height:1.45!important;
  font-weight:800!important;
  text-shadow:none!important;
}
body.vault-page .vault-meta{
  margin-top:12px!important;
  padding:12px 14px!important;
  border-radius:20px!important;
  border:1px solid rgba(91,30,45,.10)!important;
  background:rgba(255,250,243,.50)!important;
  color:#5a4439!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58)!important;
}
body.vault-page .vault-meta div,
body.vault-page .vault-stock-line{
  color:#5a4439!important;
  text-shadow:none!important;
}
body.vault-page .vault-meta b,
body.vault-page .vault-stock-line b{
  color:#c09a45!important;
  font-weight:950!important;
}
body.vault-page .vault-badge{
  top:12px!important;
  left:12px!important;
  background:rgba(91,30,45,.94)!important;
  color:#fff4e6!important;
  border:1px solid rgba(212,176,106,.48)!important;
  box-shadow:0 10px 28px rgba(22,19,17,.20)!important;
}

/* Rückseiten-Button sichtbar, aber sauberer im neuen Frame. */
body.vault-page .vault-back-toggle{
  top:12px!important;
  right:12px!important;
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  border:2px solid rgba(216,177,95,.92)!important;
  background:linear-gradient(145deg,rgba(255,249,238,.98),rgba(233,211,172,.96))!important;
  box-shadow:0 12px 32px rgba(41,16,15,.28),0 0 0 3px rgba(91,23,41,.08)!important;
  z-index:4!important;
}
body.vault-page .vault-back-toggle img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:12px!important;
  display:block!important;
  background:linear-gradient(145deg,#130609,#2a0d15)!important;
  padding:2px!important;
}

@media (max-width:760px){
  body.vault-page .vault-card{border-radius:22px!important;padding:8px!important;}
  body.vault-page .vault-img-wrap{border-radius:18px!important;padding:8px!important;}
  body.vault-page .vault-img-wrap > img{border-radius:14px!important;}
  body.vault-page .vault-card-body{padding:12px 2px 4px!important;}
  body.vault-page .vault-card-body h3{font-size:.96rem!important;line-height:1.2!important;}
  body.vault-page .vault-meta{padding:10px 12px!important;border-radius:16px!important;}
}