.product-card{
  --product-content-inset:1em;
  --product-card-background:var(--section-bg-color, var(--color-base-white));
  --product-card-foreground:var(--section-text-color, var(--color-base-black));
  --product-card-border-color:rgba(var(--product-card-foreground), 0.15);
  --product-card-border:1px solid var(--product-card-border-color);
  border-radius:var(--product-card-border-radius);
  transition:all var(--transition-duration-normal);
  position:relative;
}
.product-card .badge{
  position:absolute;
  inset-block-start:var(--product-content-inset);
  background-color:var(--badge-bg-color);
  color:var(--badge-text-color);
  border-radius:calc(var(--product-card-border-radius) * 0.66);
  padding:0.3em 0.8em;
  font-size:var(--text-xs);
}
.product-card .badge[data-position$=left]{
  inset-inline-start:var(--product-content-inset);
}
.product-card .badge[data-position$=right]{
  inset-inline-end:var(--product-content-inset);
}
.product-card .badge span{
  max-width:32ch;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.product-card .img-link{
  overflow:hidden;
  outline-offset:-1px;
}
.product-card .img-link img{
  height:var(--product-img-height);
  width:100%;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:var(--product-card-border-radius);
  pointer-events:none;
}
.product-card .img-link .card-placeholder{
  background-color:rgba(var(--product-card-foreground), 0.05);
  border-radius:var(--product-card-border-radius);
}
.product-card .img-link .card-placeholder svg{
  color:rgba(var(--product-card-foreground), 0.6);
}
.product-card .info{
  padding:1.25em;
  display:grid;
  grid-gap:var(--gap-xs);
  gap:var(--gap-xs);
  border-radius:var(--product-card-border-radius);
  background-color:var(--product-card-background);
  color:rgb(var(--product-card-foreground));
}
.product-card .info .title,
.product-card .info .price{
  justify-self:var(--product-card-text-alignment);
}
.product-card .info .title{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:currentColor;
}
.product-card .info .price{
  display:flex;
  align-items:center;
  gap:var(--gap-md);
  font-size:var(--text-md);
}
.product-card .info .price .current{
  font-size:var(--text-lg);
  font-weight:550;
}
.product-card .info .price .compare-at{
  color:currentColor;
  font-weight:400;
  -webkit-text-decoration:line-through;
  text-decoration:line-through;
}
.product-card .info button.secondary,
.product-card .info .yc-btn.secondary{
  width:100%;
  margin-block-start:0.5em;
}
.product-card .info button.secondary:hover,
.product-card .info .yc-btn.secondary:hover{
  color:var(--product-card-background);
}
.product-card[data-style$=standard]{
  --product-img-height:350px;
  border:var(--product-card-border);
}
.product-card[data-style$=standard] .img-link{
  display:block;
  border-bottom:var(--product-card-border);
}
.product-card[data-style$=standard] .img-link,
.product-card[data-style$=standard] img{
  height:var(--product-img-height);
}
.product-card[data-style$=standard] img,
.product-card[data-style$=standard] .card-placeholder{
  border-end-end-radius:0;
  border-end-start-radius:0;
}
.product-card[data-style$=standard] .info{
  position:static;
  border-start-end-radius:0;
  border-start-start-radius:0;
}
.product-card[data-style$=standard] .info button{
  width:100%;
}
.product-card[data-style$=compact]{
  --product-img-height:400px;
}
.product-card[data-style$=compact]::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  border-radius:var(--product-card-border-radius);
  -webkit-backdrop-filter:var(--overlay-blur);
          backdrop-filter:var(--overlay-blur);
  background-color:var(--overlay-background);
  opacity:0;
  transition:var(--transition-duration-normal);
  pointer-events:none;
}
.product-card[data-style$=compact]:hover::before{
  opacity:1;
}
.product-card[data-style$=compact] .img-link{
  display:block;
}
.product-card[data-style$=compact] .img-link,
.product-card[data-style$=compact] img{
  height:var(--product-img-height);
}
.product-card[data-style$=compact] .info{
  position:absolute;
  inset-block-end:0;
  margin:var(--product-content-inset);
  padding:var(--product-content-inset);
  width:-webkit-fill-available;
  width:-moz-available;
  width:stretch;
}