@font-face {
  font-family: "Brother Deluxe 1350";
  src: url("../fonts/brotherDeluxe1350____2011.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.smf-page { background: #fff; color: #111; }
.smf-inner { max-width: 1240px; margin: 0 auto; padding: 72px 24px 64px; }
.smf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; row-gap: 34px; }
.smf-product { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 1; margin: 0; padding: 0; border: 0; background: transparent; cursor: default; touch-action: pan-y; }
.smf-product::before { content: ""; position: absolute; inset: -10%; }
.smf-product:nth-child(n+5):nth-child(-n+8) { margin-bottom: 54px; }
.smf-product img { position: absolute; inset: -10%; display: block; width: 120%; height: 120%; object-fit: contain; pointer-events: none; user-select: none; opacity: 0; transition: opacity .35s ease; mix-blend-mode: plus-lighter; }
.smf-front { z-index: 1; }
.smf-back { z-index: 2; }
/* Add complementary alpha inside the isolated pair to avoid white bleed. */
.smf-product.is-front-ready .smf-front { opacity: 1; }
.smf-product.is-switch-ready img { transition: opacity .75s cubic-bezier(.4, 0, .2, 1); }
.smf-product.is-switch-ready.is-back img { transition: opacity .35s ease; }
.smf-product.is-switch-ready.is-back .smf-front { opacity: 0; }
.smf-product.is-switch-ready.is-back .smf-back { opacity: 1; }
.smf-product.is-switch-ready.is-over-garment { cursor: pointer; }
.smf-product:focus-visible { outline: 2px solid #6f4dff; outline-offset: 8px; }
.smf-credits { margin: 64px 0 0; font-family: "Brother Deluxe 1350", "Courier New", monospace; font-size: clamp(10px, 1.8vw, 12px); font-weight: 400; line-height: 1; overflow-wrap: break-word; }
.smf-credits p { margin: 0 0 8px; }
.smf-credits p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .smf-inner { padding: 40px 20px 48px; }
  .smf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
  .smf-product:nth-child(n+5):nth-child(-n+8) { margin-bottom: 0; }
  .smf-credits { margin-top: 48px; }
}
@supports not (mix-blend-mode: plus-lighter) {
  .smf-product.is-switch-ready img,
  .smf-product.is-switch-ready.is-back img { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .smf-product img,
  .smf-product.is-switch-ready img,
  .smf-product.is-switch-ready.is-back img { transition: none; }
}