/* BearPlay exact cards 1.0. Artwork, content and cart action are separate layers. */
.card.bpx-skin-card.bpx-exact-card {
  position:relative;isolation:isolate;display:block;box-sizing:border-box;
  width:100%;height:auto;min-height:0;aspect-ratio:327/497;overflow:hidden;
  padding:0;margin:0;border:0;border-radius:7.65% / 5.03%;
  container-type:inline-size;background:#00232e;
  box-shadow:0 12px 28px #0003;
  font-family:Arial,Helvetica,sans-serif;
  --bpx-exact-frame:url('/bearplayx-r12-preview/media/bearplay-card-frame-v1.webp');
}
.card.bpx-skin-card.bpx-exact-card::before{
  content:'';display:block;position:absolute;inset:0;z-index:3;padding:1.5px;
  border:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,#e1ffff,#67c6d1 32%,#019696 68%,#006f88);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card.bpx-skin-card.bpx-exact-card::after {
  content:'';position:absolute;inset:0;display:block;z-index:1;
  width:100%;height:100%;padding:0;border:0;border-radius:inherit;
  background:var(--bpx-exact-frame) center bottom/104% 121% no-repeat;
  pointer-events:none;box-shadow:none;
}
.card.bpx-skin-card.bpx-exact-card .art.bpx-skin-cover {
  position:absolute;inset:0 0 auto;z-index:0;display:block;
  width:100%;height:auto;min-height:0;aspect-ratio:1/1;overflow:hidden;
  padding:0;border:0;border-radius:0;background:#103841;
}
.card.bpx-skin-card.bpx-exact-card .art.bpx-skin-cover::after{content:none;display:none}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-img {
  display:block;width:100%;height:100%;aspect-ratio:1/1;
  object-fit:cover;object-position:center;border:0;border-radius:0;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-release {
  position:absolute;top:5%;left:5%;max-width:90%;z-index:1;
  padding:2cqw 3cqw;border:1px solid #acd9cd88;border-radius:999px;
  background:#062836de;color:#fff;font-size:3.65cqw;line-height:1.2;
  font-weight:700;white-space:nowrap;
}
.card.bpx-skin-card.bpx-exact-card .copy.bpx-skin-copy {
  position:absolute;inset:0;z-index:2;display:block;box-sizing:border-box;
  height:100%;min-height:0;margin:0;padding:0;border:0;gap:0;
  background:none;box-shadow:none;pointer-events:none;
}
.card.bpx-skin-card.bpx-exact-card .copy.bpx-skin-copy::before,
.card.bpx-skin-card.bpx-exact-card .copy.bpx-skin-copy::after{content:none;display:none}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-caption {
  position:absolute;left:6%;right:13.8%;top:67.9%;
  display:flex;flex-direction:column;gap:1.75cqw;
  height:auto;max-height:16%;min-width:0;overflow:hidden;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-title {
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  min-height:0;max-height:none;margin:0;padding:0;overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;font-size:7.2cqw;line-height:1.06;
  font-weight:900;letter-spacing:-.032em;color:#fff;overflow-wrap:anywhere;
  text-wrap:initial;text-align:left;text-shadow:0 .45px .6px #fff4,0 1px 1px #00151b;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-edition {
  display:block;min-height:0;margin:0;padding:0;
  font-family:Arial,Helvetica,sans-serif;font-size:5.55cqw;line-height:1.09;
  font-weight:750;letter-spacing:-.015em;color:#acd3e2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-bottom {
  position:absolute;inset:0;display:block;min-height:0;margin:0;padding:0;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-price {
  position:absolute;left:3.7%;bottom:5.6%;width:45.5%;height:10.7%;
  box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;
  min-width:0;min-height:0;margin:0;padding:0 5.2%;
  border:1.8px solid #27856f;border-radius:999px;
  background:linear-gradient(135deg,#06372544,#00313a44 55%,#00616b22),#001e24;
  box-shadow:inset 0 1px 2px #072f31,0 2px 3px #00151c77;
  font-family:Arial,Helvetica,sans-serif;color:#deffb5;
  font-size:7.3cqw;font-weight:900;line-height:1;letter-spacing:-.025em;
  white-space:nowrap;font-variant-numeric:tabular-nums;text-align:left;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-price::after {
  content:'';position:absolute;right:5.5%;top:29%;width:21%;height:43%;
  background:linear-gradient(150deg,#109767,#003a37);
  clip-path:polygon(0 100%,24% 36%,38% 63%,57% 9%,76% 58%,85% 41%,100% 100%);
  pointer-events:none;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-price.is-long {font-size:6.5cqw;padding-inline:4%}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-price.is-long::after{display:none}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-price.is-muted {
  font-size:3.7cqw;white-space:normal;line-height:1.2;color:#bbd1d2;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-price.is-muted::after{display:none}
.card.bpx-skin-card.bpx-exact-card button.bpx-skin-add {
  position:absolute;left:50.5%;bottom:5.6%;width:46.8%;height:10.9%;
  box-sizing:border-box;min-width:0;min-height:0;max-width:none;
  margin:0;padding:0 3%;display:flex;align-items:center;justify-content:center;gap:2.7cqw;
  border:1.7px solid #efffb3;border-radius:6.7cqw;
  background:linear-gradient(180deg,#d9ff76 0%,#b8ff5c 39%,#70f459 78%,#3af098 100%);
  box-shadow:inset 0 1px 2px #ffffe5bb,0 3px 6px #00161e77;
  font-family:Arial,Helvetica,sans-serif;font-size:5.55cqw;line-height:1;
  font-weight:800;letter-spacing:-.03em;color:#001809;
  white-space:nowrap;cursor:pointer;pointer-events:auto;touch-action:manipulation;
}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-add-label{white-space:nowrap}
.card.bpx-skin-card.bpx-exact-card .bpx-skin-add svg {
  display:block;width:7.25cqw;height:7.25cqw;flex:none;stroke:currentColor;
}
.card.bpx-skin-card.bpx-exact-card button.bpx-skin-add:hover{filter:brightness(1.07)}
.card.bpx-skin-card.bpx-exact-card button.bpx-skin-add:active{filter:brightness(.98)}
.card.bpx-skin-card.bpx-exact-card button.bpx-skin-add:focus-visible{outline:3px solid #fff;outline-offset:3px}
.card.bpx-skin-card.bpx-exact-card button.bpx-skin-add.is-active{background:linear-gradient(180deg,#caffb2,#62efaf)}
.cards.cards-full{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;row-gap:20px;align-items:start}
.cards.cards-carousel>.card.bpx-skin-card.bpx-exact-card{flex:0 0 clamp(270px,23vw,327px);width:auto}
@media(max-width:1220px){.cards.cards-full{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.cards.cards-full{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:560px){.cards.cards-full{grid-template-columns:minmax(0,1fr);max-width:390px;margin-inline:auto;gap:18px}.cards.cards-carousel>.card.bpx-skin-card.bpx-exact-card{flex-basis:min(83vw,327px)}}