/* Flat, rounded artwork throughout the site. Crop only the exterior canvas,
   retaining the original white face. Dimensional depth belongs to the shop. */
.taply-card-frame[data-card-kind] {
  --card-size: 160px;
  --card-radius: 6.5%;
  --card-zoom: 105.70825%;
  position: relative;
  inset: auto;
  display: block;
  flex: 0 0 auto;
  /* A definite width gives centered grid items a real intrinsic size. */
  width: var(--card-size);
  max-width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--card-radius);
  background: transparent;
  box-shadow: none;
  filter: none;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  isolation: isolate;
  pointer-events: none;
  transform: none;
  transition: none;
}
.taply-card-frame[data-card-kind="pay"] {
  --card-radius: 5.8%;
  --card-zoom: 102.24949%;
}
/* Shop product photography only; marketing pages, demos and cart stay flat. */
.store-page .store-product-visual > .taply-card-frame {
  --card-x: 9deg;
  --card-y: -12deg;
  --card-z: -3deg;
  --card-lift: 0px;
  --edge-x: 1.5%;
  --edge-y: 2.1%;
  transform: perspective(800px) translateY(var(--card-lift)) rotateX(var(--card-x)) rotateY(var(--card-y)) rotateZ(var(--card-z));
  transform-origin: center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.store-page .store-product-visual > .taply-card-frame[data-card-kind="pay"] {
  --card-y: 12deg;
  --card-z: 3deg;
}
.store-page .store-product-visual > .taply-card-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #6180d1, #f0ece2 22%, #bdb4a4 44%, #655a49 66%, #7e98da 82%, #393125);
  transform: translate(var(--edge-x), var(--edge-y));
  box-shadow: 0 1px 0 #16140f, 0 12px 18px -6px #000a, 0 28px 35px -13px #000b;
}
.taply-card-frame > .taply-card-face {
  /* Keep a square in normal flow even before a lazy image loads. An empty
     absolute face plus percentage/min() sizing can collapse the grid item. */
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0 0 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #111;
  /* The face clips the photo; the separate edge keeps its complete shadow. */
  isolation: isolate;
}
.store-page .store-product-visual > .taply-card-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #b3c2ea6b;
  border-radius: inherit;
  background: linear-gradient(125deg, #ffffff18, transparent 29%, transparent 70%, #365bb910);
  box-shadow: inset 0 1px 0 #ffffff66, inset -1px -1px 0 #0006;
}
/* Images keep their alt text, live source, and original classes. These rules
   supersede older per-image clipping, sizing, hover and breathing effects. */
.taply-card-frame > .taply-card-face > img {
  position: absolute !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--card-zoom) !important;
  height: var(--card-zoom) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: fill !important;
  clip-path: none !important;
  filter: none !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  transition: none !important;
}

/* Preserve the space each card occupied, including every compact demo. */
.hero-card-orbit > .taply-card-frame { --card-size: 134px; }
.original-nfc-card > .taply-card-frame { --card-size: 154px; }
.notice-card > .taply-card-frame { --card-size: 38px; }
.ml-tap-card > .taply-card-frame { --card-size: 168px; }
.xl-review-showcase > .taply-card-frame { --card-size: 285px; margin-block: 6px 14px; }
.pl-card-display > .taply-card-frame { --card-size: 158px; }
.taply-card-frame[data-card-slot="review-notice"] { --card-size: 135px; margin: 18px 0; }
.taply-card-frame[data-card-slot="band"] { --card-size: 210px; }
.xl-notification > .taply-card-frame { --card-size: 40px; flex: 0 0 auto; }
.pl-notification > .taply-card-frame { --card-size: 43px; }
.store-product-visual > .taply-card-frame { --card-size: 225px; }
.catalog-detail .store-product-visual > .taply-card-frame { --card-size: 340px; }
.cart-line > .taply-card-frame { --card-size: 74px; margin-top: 4px; }
@media (hover: hover) {
  .store-page .store-product-visual:hover > .taply-card-frame { --card-lift: -4px; }
}
.store-page .store-product-visual:focus-visible > .taply-card-frame { --card-lift: -4px; }

@media (max-width: 1150px) { .solution-top > .taply-card-frame { --card-size: 145px; } }
@media (max-width: 1100px) { .ml-tap-card > .taply-card-frame { --card-size: 110px; } }
@media (max-width: 930px) { .solution-top > .taply-card-frame { --card-size: 173px; } }
@media (max-width: 900px) { .taply-card-frame[data-card-slot="band"] { --card-size: 160px; } }
@media (max-width: 760px) { .catalog-detail .store-product-visual > .taply-card-frame { --card-size: 240px; } }
@media (max-width: 700px) {
  .solution-top > .taply-card-frame { --card-size: 143px; }
  .hero-card-orbit > .taply-card-frame { --card-size: 124px; }
}
@media (max-width: 600px) { .store-product-visual > .taply-card-frame { --card-size: 195px; } }
@media (max-width: 550px) { .taply-card-frame[data-card-slot="band"] { margin-bottom: 20px; } }
@media (max-width: 430px) { .solution-top > .taply-card-frame { --card-size: 120px; } }
@media (max-width: 400px) { .cart-line > .taply-card-frame { --card-size: 58px; } }
@media (max-width: 350px) {
  .solution-top > .taply-card-frame { --card-size: 168px; }
  .original-nfc-card > .taply-card-frame { --card-size: 146px; }
}
@media (prefers-reduced-motion: reduce) {
  .store-page .store-product-visual > .taply-card-frame { transition: none; --card-lift: 0px !important; }
}