/* Sistema visual por camadas da vitrine Croma */
.product-media-layered{
  --visual-accent:var(--croma-navy);
  height:174px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#f5f4fb;
}
.product-media-layered::after{
  content:"";
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:linear-gradient(90deg,var(--croma-magenta) 0 25%,var(--croma-yellow) 25% 50%,var(--croma-green) 50% 75%,var(--croma-blue) 75%);
}
.media-background,
.media-product-layer{
  position:absolute;
  inset:0;
}
.media-background{
  z-index:0;
  overflow:hidden;
  background:#f7f7fb;
}
.media-background::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-68px;
  top:-86px;
  border:38px solid rgba(48,41,127,.08);
  border-radius:50%;
}
.media-background::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  left:-70px;
  bottom:-95px;
  border-radius:50%;
  background:rgba(195,0,121,.08);
}
.media-background-image{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.96;
}
.media-product-layer{
  z-index:2;
  display:grid;
  place-items:center;
  padding:12px;
}
.media-product{
  display:block;
  max-width:100%;
  max-height:100%;
}
.media-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.media-cutout{
  width:86%;
  height:86%;
  object-fit:contain;
  filter:drop-shadow(0 14px 12px rgba(33,28,92,.2));
}
.media-shadow{
  position:absolute;
  z-index:1;
  left:18%;
  right:18%;
  bottom:17px;
  height:14px;
  border-radius:50%;
  background:rgba(33,28,92,.22);
  filter:blur(9px);
}
.media-placeholder{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:78px;
  height:78px;
  border-radius:24px;
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 28px rgba(33,28,92,.12);
  font-size:2.4rem;
}
.media-badges{
  position:absolute;
  z-index:6;
  top:11px;
  left:11px;
  right:11px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  pointer-events:none;
}
.media-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:var(--croma-navy-deep);
  box-shadow:0 6px 14px rgba(33,28,92,.12);
  font-size:.63rem;
  line-height:1.1;
  font-weight:900;
}
.media-badge-primary{
  background:var(--croma-navy);
  border-color:var(--croma-navy);
  color:#fff;
}
.media-badge-promo{
  background:var(--croma-magenta);
  border-color:var(--croma-magenta);
  color:#fff;
}
.media-badge-stock{
  background:#fff7d4;
  border-color:#f0d45c;
  color:#6c5700;
}
.theme-graphic .media-background{background:linear-gradient(145deg,#f1effc,#fff)}
.theme-print .media-background{background:linear-gradient(145deg,#eef8fd,#fff)}
.theme-event .media-background{background:linear-gradient(145deg,#fff4fa,#fff)}
.theme-paper .media-background{background:linear-gradient(145deg,#fffbe5,#fff)}
.theme-gift .media-background{background:linear-gradient(145deg,#fff0f7,#fff)}
.theme-tech .media-background{background:linear-gradient(145deg,#edf5ff,#fff)}
.theme-digital .media-background{background:linear-gradient(145deg,#eef0ff,#fff)}
.theme-brand .media-background{background:linear-gradient(145deg,#f1effc,#fff)}
.mode-foto .media-background{background:#fff}
.mode-foto .media-background::before,
.mode-foto .media-background::after{opacity:.18}
@media(max-width:760px){
  .product-media-layered{height:180px}
  .media-badge{font-size:.6rem;padding:4px 7px}
}