.hover-showcase[hidden]{display:none;}
.hover-showcase{
  position:fixed;
  inset:0;
  z-index:4000;
  display:grid;
  place-items:center;
  padding:30px;
  pointer-events:auto;
  background:rgba(250,249,247,.86);
  backdrop-filter:blur(8px);
  opacity:0;
}
.hover-showcase-trigger{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:1501;
  min-width:54px;
  padding:8px 11px;
  border:1px solid rgba(42,36,31,.32);
  background:rgba(255,255,255,.94);
  color:#2d2824;
  box-shadow:0 4px 14px rgba(0,0,0,.13);
  opacity:0;
  transform:translateY(5px);
  pointer-events:none;
  cursor:pointer;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.12em;
  transition:opacity .18s ease,transform .18s ease;
}
.photo-wrap:hover .hover-showcase-trigger,
.hover-showcase-trigger:focus-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition-delay:.24s;
}
.hover-showcase-trigger:focus-visible{
  outline:2px solid #4A2F20;
  outline-offset:2px;
}
.hover-showcase.is-visible{animation:sa-showcase-backdrop .22s ease forwards;}
.hover-showcase__panel{
  position:relative;
  width:min(1120px,92vw);
  height:min(680px,80vh);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  overflow:hidden;
  background:#fff;
  border:1px solid #dedad5;
  box-shadow:0 28px 85px rgba(34,27,22,.22);
}
.hover-showcase__close{
  position:absolute;
  top:15px;
  right:15px;
  z-index:3;
  width:40px;
  height:40px;
  border:1px solid #c8c3bd;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#222;
  cursor:pointer;
  font:24px/36px Arial,sans-serif;
}
.hover-showcase__close:focus-visible{
  outline:2px solid #4A2F20;
  outline-offset:3px;
}
.hover-showcase__visual{
  min-width:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  perspective:1200px;
  background:#f4f3f1;
}
.hover-showcase__image{
  display:block;
  width:auto;
  height:auto;
  max-width:78%;
  max-height:68vh;
  object-fit:contain;
  transform-style:preserve-3d;
  backface-visibility:visible;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.14));
  will-change:transform,opacity;
}
.hover-showcase.is-visible .hover-showcase__image{
  animation:sa-showcase-two-spins 1.35s cubic-bezier(.22,.7,.12,1) both;
}
.hover-showcase__details{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:52px 58px;
  opacity:0;
  transform:translateX(70px);
}
.hover-showcase.is-visible .hover-showcase__details{
  animation:sa-showcase-details .52s cubic-bezier(.16,.82,.3,1) .92s forwards;
}
.hover-showcase__brand{
  margin:0 0 15px;
  color:#756c64;
  font:700 12px/1.3 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hover-showcase__title{
  margin:0;
  color:#1a1816;
  font:500 clamp(25px,2.4vw,39px)/1.16 Georgia,serif;
}
.hover-showcase__line{
  width:46px;
  height:1px;
  margin:24px 0;
  background:#9d8d80;
}
.hover-showcase__description{
  margin:0;
  color:#625c57;
  font:15px/1.75 Arial,sans-serif;
}
.hover-showcase__price{
  margin:27px 0 0;
  color:#28231f;
  font:700 12px/1.4 Arial,sans-serif;
  letter-spacing:.08em;
}
body.hover-showcase-open{overflow:hidden;}
@keyframes sa-showcase-backdrop{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes sa-showcase-two-spins{
  0%{opacity:0;transform:translateX(-130%) scale(.68) rotateY(0deg);}
  8%{opacity:1;}
  72%{transform:translateX(-6%) scale(1.08) rotateY(720deg);}
  100%{opacity:1;transform:translateX(0) scale(1) rotateY(720deg);}
}
@keyframes sa-showcase-details{
  from{opacity:0;transform:translateX(70px);}
  to{opacity:1;transform:translateX(0);}
}

@media(prefers-reduced-motion:reduce){
  .hover-showcase.is-visible,
  .hover-showcase.is-visible .hover-showcase__image,
  .hover-showcase.is-visible .hover-showcase__details{animation-duration:.01ms;animation-delay:0s;}
  .hover-showcase__image{transform:none;}
}