.cover-shell{display:flex;align-items:center;justify-content:center;overflow:visible}
.cover-shell .real-cover{display:block;width:min(74%,240px);aspect-ratio:2/3;object-fit:cover;border-radius:5px;box-shadow:0 26px 45px rgba(2,18,34,.28),10px 8px 0 rgba(255,255,255,.55);transition:transform .35s ease,box-shadow .35s ease}
.product:hover .real-cover{transform:translateY(-8px) rotateY(-5deg);box-shadow:0 34px 56px rgba(2,18,34,.34),12px 9px 0 rgba(255,255,255,.65)}
.real-hero{display:flex!important;align-items:center;justify-content:center;gap:clamp(8px,1.3vw,20px);perspective:1200px;padding:44px 34px!important}
.real-hero>img{position:relative;z-index:2;width:29%;max-width:190px;aspect-ratio:2/3;object-fit:cover;border-radius:5px;box-shadow:0 30px 55px rgba(0,0,0,.45);animation:bookFloat 5s ease-in-out infinite}
.real-hero>img:first-child{transform:translateY(22px) rotate(-7deg);animation-delay:-1.2s}
.real-hero>img:nth-child(2){z-index:3;transform:translateY(-10px);animation-delay:-2.4s}
.real-hero>img:nth-child(3){transform:translateY(22px) rotate(7deg);animation-delay:-3.6s}
@keyframes bookFloat{0%,100%{margin-top:0}50%{margin-top:-13px}}
@media(max-width:760px){.real-hero{min-height:390px;padding:35px 18px!important}.real-hero>img{width:31%;max-width:150px}.cover-shell .real-cover{width:min(68%,220px)}}
@media(prefers-reduced-motion:reduce){.real-hero>img{animation:none}.cover-shell .real-cover{transition:none}}