/**
 * Design / mockup images in shop cards — uniform 4:5 frame, full mockup visible inside.
 * Carousel viewport height comes from CSS (not per-image JS sizing).
 */
.design-example-card:not(.design-example-card--listing) .design-media-fit.card-media--design,
.design-example-card:not(.design-example-card--listing) .design-media-fit.design-image-carousel,
.design-example-card:not(.design-example-card--listing) .design-media-fit.design-image-carousel--single,
.featured-design-card .design-media-fit.card-media--design,
.featured-design-card .design-media-fit.design-image-carousel,
.featured-design-card .design-media-fit.design-image-carousel--single {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  overflow: hidden;
  background: var(--soft-cream);
}

.design-example-card--listing .design-example-card__media-wrap > .design-media-fit,
.design-example-card.design-example-card--listing .design-example-card__media-wrap > .card-media.card-media--bleed.card-media--design.design-media-fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--soft-cream);
}

.design-example-card--listing .design-media-fit .design-image-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--soft-cream);
}

.design-example-card .design-media-fit .design-image-carousel__viewport,
.featured-design-card .design-media-fit .design-image-carousel__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.design-example-card .design-media-fit .design-image-carousel__track,
.featured-design-card .design-media-fit .design-image-carousel__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: transform 0.32s ease;
}

.design-example-card .design-media-fit.design-image-carousel--single .design-image-carousel__track,
.featured-design-card .design-media-fit.design-image-carousel--single .design-image-carousel__track {
  display: flex;
  height: 100%;
}

.design-example-card .design-media-fit .design-image-carousel__slide,
.featured-design-card .design-media-fit .design-image-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--soft-cream);
}

.design-example-card .design-media-fit picture,
.featured-design-card .design-media-fit picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.design-example-card--listing .design-media-fit .design-image-carousel__slide img.design-example-card__media,
.design-example-card--listing .design-media-fit img.design-example-card__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  border-radius: 12px;
}

.design-example-card .design-media-fit .design-image-carousel__slide img.design-example-card__media,
.design-example-card .design-media-fit img.design-example-card__media,
.featured-design-card .design-media-fit .design-image-carousel__slide img.design-example-card__media,
.featured-design-card .design-media-fit img.design-example-card__media,
.design-example-card img.design-example-card__media,
.featured-design-card img.design-example-card__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
}

/* Product detail gallery — same fit rules as shop cards. */
.shop-design-pdp__main-image .design-media-fit.card-media--design,
.shop-design-pdp__main-image .design-media-fit.design-image-carousel,
.shop-design-pdp__main-image .design-media-fit.design-image-carousel--single {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  overflow: hidden;
  background: var(--soft-cream);
}

.shop-design-pdp__main-image .design-media-fit .design-image-carousel__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.shop-design-pdp__main-image .design-media-fit .design-image-carousel__track {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: transform 0.32s ease;
}

.shop-design-pdp__main-image .design-media-fit .design-image-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--soft-cream);
}

.shop-design-pdp__main-image .design-media-fit img.design-example-card__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
}

.shop-design-pdp__thumb img {
  object-fit: contain;
  object-position: center center;
  background: var(--soft-cream);
}

/* Admin library previews keep natural image proportions. */
.admin-mockup-card__media .design-media-fit.card-media--design,
.admin-mockup-card__media .design-media-fit.design-image-carousel,
.admin-mockup-card__media .design-media-fit.design-image-carousel--single {
  aspect-ratio: auto;
  height: auto;
  background: transparent;
}

.admin-mockup-card__media .design-media-fit .design-image-carousel__viewport {
  position: relative;
  inset: auto;
  height: auto;
}

.admin-mockup-card__media .design-media-fit .design-image-carousel__track {
  align-items: flex-start;
  height: auto;
  min-height: 0;
}

.admin-mockup-card__media .design-media-fit .design-image-carousel__slide {
  height: auto;
  min-height: 0;
  background: transparent;
}

.admin-mockup-card__media .design-media-fit img.design-example-card__media {
  position: static;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: unset;
}