.mtx-showcase{
  flex:1 1 0; align-self:stretch; position:relative;
  min-height:500px; margin-left:0;
  perspective:1400px;
  display:none;
}
@media (min-width:900px){ .mtx-showcase{display:block} }
/* Mobile: show a scaled, centered deck below the hero text (fan is clipped to avoid overflow). */
@media (max-width:899px){
  section.hero{ flex-wrap:wrap; }        /* let the deck drop below the hero text */
  .mtx-showcase{
    display:block; flex:1 1 100%; width:100%; min-height:430px;
    margin-top:14px; overflow:hidden; perspective:1100px;
  }
  .mtx-sc-stage{
    transform:scale(.72) rotateY(-14deg) rotateX(6deg);
    transform-origin:50% 50%;
  }
  .mtx-sc-card{ left:50%; }               /* center the front card */
  .mtx-sc-tag{ right:auto; left:50%; transform:translateX(-50%); }
}
.mtx-sc-stage{
  position:absolute; inset:0;
  transform:rotateY(-18deg) rotateX(8deg);
  transform-style:preserve-3d;
  transition:transform .3s ease;
}
.mtx-sc-card{cursor:pointer;
  position:absolute; top:50%; left:34%;
  width:300px; height:414px;
  border-radius:18px; overflow:hidden; text-decoration:none;
  background:#fff; border:1px solid #e3e6ea;
  box-shadow:0 30px 60px -18px rgba(19,26,38,.45);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .7s ease;
  will-change:transform,opacity;
}
.mtx-sc-img{
  display:block; height:300px; background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:#f7f9fb;
}
.mtx-sc-meta{display:flex;flex-direction:column;gap:2px;padding:8px 14px 10px}
.mtx-sc-cat{font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8a97a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtx-sc-name{font-size:14px;font-weight:800;color:#131A26;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtx-sc-price{font-size:13px;font-weight:800;color:#0d6f8a;white-space:nowrap;margin-top:1px}
.mtx-sc-opts{font-size:10px;color:#8a97a6;white-space:nowrap}
.mtx-sc-ruo{font-size:9px;color:#9aa4b0;margin-top:5px;border-top:1px solid #eef1f4;padding-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtx-sc-pill{
  position:absolute; top:12px; left:12px; z-index:2;
  background:#1a7f3c; color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px;
}
.mtx-sc-tag{
  position:absolute; bottom:8px; right:24px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#8a97a6; font-weight:700;
}
@media (prefers-reduced-motion:reduce){
  .mtx-sc-card{cursor:pointer;transition:none}
  .mtx-sc-stage{transition:none}
}

/* front card affordance */
.mtx-sc-card{transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .7s ease, box-shadow .25s ease}
.mtx-sc-card:hover{box-shadow:0 36px 70px -16px rgba(13,111,138,.5)}