/* Collection card controls share these variables with the live builder preview. */
.collection-card.mysterez-editable-card {
  --active-card-fit:var(--card-fit,cover);
  --active-card-min-media-size:var(--card-min-media-size,100%);
  --active-card-x:var(--card-x,50%);
  --active-card-y:var(--card-y,50%);
  --active-card-scale:var(--card-scale,1);
  --active-card-height:var(--card-height,auto);
  --active-card-media-area-height:var(--card-media-area-height,100%);
  --active-card-media-width:var(--card-media-width,100%);
  --active-card-media-height:var(--card-media-height,100%);
  --active-card-aspect-ratio:var(--card-aspect-ratio,3/4);
  --active-card-background:var(--card-background,#e8e8e4);
}
.collection-card.mysterez-editable-card.has-card-frame {
  height:var(--active-card-height);
  aspect-ratio:var(--active-card-aspect-ratio);
  min-height:80px;
  overflow:hidden;
  background:var(--active-card-background)!important;
}
.collection-card.mysterez-editable-card.has-card-frame>.collection-card__media {
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:var(--active-card-media-area-height);
  max-height:100%;
  aspect-ratio:auto;
  overflow:hidden;
  background:var(--active-card-background)!important;
}
.collection-card.mysterez-editable-card.has-card-frame>.collection-card__media>img,
.collection-card.mysterez-editable-card.has-card-frame>.collection-card__media>video {
  position:absolute;
  left:50%;
  top:50%;
  width:var(--active-card-media-width);
  height:var(--active-card-media-height);
  max-width:none;
  max-height:none;
  min-width:var(--active-card-min-media-size);
  min-height:var(--active-card-min-media-size);
  padding:0;
  aspect-ratio:auto;
  object-fit:var(--active-card-fit)!important;
  object-position:var(--active-card-x) var(--active-card-y)!important;
  transform:translate(-50%,-50%) scale(var(--active-card-scale))!important;
  transform-origin:var(--active-card-x) var(--active-card-y);
  transition:none;
  background:transparent!important;
}
.collection-card.mysterez-editable-card>span>.mysterez-collection-count {
  color:var(--card-count-color,var(--mysterez-item-text-color,rgba(255,255,255,.7)))!important;
  font-family:var(--card-count-font-family,Arial,sans-serif)!important;
  font-size:var(--card-count-font-size,8px)!important;
  font-weight:var(--card-count-font-weight,400)!important;
  letter-spacing:var(--card-count-letter-spacing,.1em)!important;
  line-height:var(--card-count-line-height,1.5)!important;
  opacity:var(--card-count-opacity,1);
  text-align:var(--card-count-align,left);
  text-transform:var(--card-count-text-transform,uppercase);
  background:var(--card-count-background,transparent);
  padding:var(--card-count-padding,0);
  border-radius:var(--card-count-radius,0);
  overflow-wrap:anywhere;
}
.collection-card.mysterez-editable-card>span>[data-mysterez-card-title] {
  font-family:var(--card-title-font-family,inherit);
  font-size:var(--card-title-font-size,inherit);
  font-weight:var(--card-title-font-weight,700);
  letter-spacing:var(--card-title-letter-spacing,inherit);
  line-height:var(--card-title-line-height,inherit);
  opacity:var(--card-title-opacity,1);
  text-align:var(--card-title-align,left);
  text-transform:var(--card-title-text-transform,inherit);
  background:var(--card-title-background,transparent);
  padding:var(--card-title-padding,0);
  border-radius:var(--card-title-radius,0);
}
.collection-card.mysterez-editable-card[data-mysterez-title-color]>span>[data-mysterez-card-title] { color:var(--card-title-color)!important; }
.collection-card.mysterez-editable-card [hidden] { display:none!important; }
.mysterez-builder-preview .collection-card [data-mysterez-collection-count]:hover { outline:1px dashed #d9b88a; outline-offset:4px; }
@media(max-width:1020px) {
  .collection-card.mysterez-editable-card {
    --active-card-fit:var(--tablet-card-fit,var(--card-fit,cover));
    --active-card-min-media-size:var(--tablet-card-min-media-size,var(--card-min-media-size,100%));
    --active-card-x:var(--tablet-card-x,var(--card-x,50%));
    --active-card-y:var(--tablet-card-y,var(--card-y,50%));
    --active-card-scale:var(--tablet-card-scale,var(--card-scale,1));
    --active-card-height:var(--tablet-card-height,var(--card-height,auto));
    --active-card-media-area-height:var(--tablet-card-media-area-height,var(--card-media-area-height,100%));
    --active-card-media-width:var(--tablet-card-media-width,var(--card-media-width,100%));
    --active-card-media-height:var(--tablet-card-media-height,var(--card-media-height,100%));
    --active-card-aspect-ratio:var(--tablet-card-aspect-ratio,var(--card-aspect-ratio,3/4));
    --active-card-background:var(--tablet-card-background,var(--card-background,#e8e8e4));
  }
}
@media(max-width:760px) {
  .collection-card.mysterez-editable-card {
    --active-card-fit:var(--mobile-card-fit,var(--card-fit,cover));
    --active-card-min-media-size:var(--mobile-card-min-media-size,var(--card-min-media-size,100%));
    --active-card-x:var(--mobile-card-x,var(--card-x,50%));
    --active-card-y:var(--mobile-card-y,var(--card-y,50%));
    --active-card-scale:var(--mobile-card-scale,var(--card-scale,1));
    --active-card-height:var(--mobile-card-height,var(--card-height,auto));
    --active-card-media-area-height:var(--mobile-card-media-area-height,var(--card-media-area-height,100%));
    --active-card-media-width:var(--mobile-card-media-width,var(--card-media-width,100%));
    --active-card-media-height:var(--mobile-card-media-height,var(--card-media-height,100%));
    --active-card-aspect-ratio:var(--mobile-card-aspect-ratio,var(--card-aspect-ratio,3/4));
    --active-card-background:var(--mobile-card-background,var(--card-background,#e8e8e4));
  }
}