.pcard {
  position:relative;
  overflow:hidden;
  display:flex;
  z-index:1;
  flex:1 0 auto;
  flex-direction:column;
  background:var(--color-block-background);
  border-radius:var(--border-radius);
  will-change:transform;
  transition:transform .35s ease,background .25s ease-in-out
}
.pcard:hover {
  background:var(--color-block-background-hover);
  transform:scale(1.02)
}
.pcard:hover .pcard__image img {
  transform:scale(1.05)
}
.pcard__image {
  position:relative;
  overflow:hidden;
  z-index:1;
  height:340px;
  font-size:0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(var(--color-font-rgb),1),rgba(var(--color-font-rgb),0));
  mask-image:linear-gradient(to bottom,rgba(var(--color-font-rgb),1),rgba(var(--color-font-rgb),0))
}
.pcard__image .lazy-img {
  position:absolute;
  inset:0
}
.pcard__image img {
  width:100%;
  height:100%;
  will-change:transform;
  transition:transform .4s ease,opacity .4s ease-in-out;
  -o-object-fit:cover;
  object-fit:cover
}
.pcard__contents {
  position:relative;
  display:flex;
  z-index:3;
  flex:1 0 auto;
  flex-direction:column;
  margin-top:-10px;
  padding:0 30px 20px
}
.pcard__category {
  display:flex;
  align-items:center
}
.pcard__category img {
  flex:0 0 auto;
  width:10px;
  height:10px;
  margin-right:5px
}
.pcard__category span {
  font-size:10px;
  line-height:1;
  color:var(--color-font-60)
}
.pcard__name {
  margin-top:8px;
  font-variation-settings:"wght" 700;
  font-size:16px;
  line-height:1
}
@supports not (font-variation-settings:normal) {
  .pcard__name {
    font-weight:700
  }
}
.pcard__description {
  overflow:hidden;
  display:-webkit-box;
  max-width:100%;
  margin-top:16px;
  font-size:12px;
  line-height:1.25;
  color:var(--color-font-60);
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical
}
.pcard__action {
  display:flex;
  align-items:center;
  margin-top:auto;
  padding-top:16px
}
.pcard__price {
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  padding-right:20px;
  line-height:1;
  white-space:nowrap
}
.pcard__price._sale .pcard__price-current {
  color:rgba(var(--color-green),1)
}
.pcard__price._sale .pcard__price-old {
  display:block
}
.pcard__price-current {
  margin-right:5px;
  font-size:16px;
  font-variation-settings:"wght" 700
}
@supports not (font-variation-settings:normal) {
  .pcard__price-current {
    font-weight:700
  }
}
.pcard__price-old {
  display:none;
  font-size:10px;
  line-height:1;
  text-decoration:line-through;
  color:var(--color-font-60)
}
.pcard__cta,
.pcard__favourite {
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  font-size:0;
  color:var(--color-font-elements);
  border-radius:50%
}
.pcard__cta .svg-icon,
.pcard__favourite .svg-icon {
  font-size:12px
}
.pcard__favourite {
  margin-left:auto;
  margin-right:5px;
  background:radial-gradient(152.54% 100% at 50% 0,rgba(var(--color-font-rgb),5%) 0,rgba(var(--color-font-rgb),0) 100%);
  transition:background .25s ease-in-out
}
.pcard__favourite .svg-icon {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.pcard__favourite .svg-icon._star {
  opacity:1
}
.pcard__favourite .svg-icon._star-gradient {
  opacity:0
}
.pcard__favourite:hover {
  background:radial-gradient(152.54% 100% at 50% 0,rgba(var(--color-font-rgb),10%) 0,rgba(var(--color-font-rgb),0) 100%)
}

.pcard__cta,
.pcard__favourite._active {
  background: linear-gradient(90deg, #1f75ea 0%, #7f3e96 100%);
  margin-left: auto;
}
@media only screen and (max-width:1440px) {
  .pcard {
    border-radius:var(--border-radius-hd)
  }
  .pcard__image {
    height:300px
  }
  .pcard__contents {
    padding:0 20px 15px
  }
  .pcard__name {
    font-size:14px
  }
  .pcard__description {
    margin-top:12px
  }
  .pcard__action {
    padding-top:12px
  }
  .pcard__cta,
  .pcard__favourite {
    width:25px;
    height:25px
  }
}
@media only screen and (max-width:768px) {
  .pcard {
    display:flex;
    flex-direction:row;
    padding:25px 25px 20px;
    border-radius:var(--border-radius)
  }
  .pcard__image {
    flex:0 0 auto;
    width:75px;
    height:115px;
    margin-right:25px
  }
  .pcard__image:after {
    display:none
  }
  .pcard__contents {
    flex:1 1 auto;
    min-width:1px;
    margin-top:0;
    padding:0
  }
  .pcard__price-current {
    font-size:18px
  }
  .pcard__cta,
  .pcard__favourite {
    width:30px;
    height:30px
  }
}