/* ============================================
   Mockups produits — SVG illustrations
   ============================================ */

.mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(180deg, #F4F1EA 0%, #E8E2D4 100%);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  --c: #1C1B19;
  --c-shade: rgba(0,0,0,0.18);
  --c-light: rgba(255,255,255,0.12);
}

.mockup svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.05) 0%, transparent 40%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.mockup.dark {
  background: linear-gradient(180deg, #2A2A28 0%, #1C1B19 100%);
}

.mockup.sage {
  background: linear-gradient(180deg, #ABBAA0 0%, #8FA383 100%);
}

.mockup .corner-tag {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(0,0,0,0.35);
  text-transform: uppercase;
  z-index: 2;
}

.mockup.dark .corner-tag {
  color: rgba(255,255,255,0.4);
}

/* Thumb mockup — square ratio in gallery thumbnails */
.gallery-thumbs .thumb.mockup {
  aspect-ratio: 1;
  width: 100%;
  border: 1px solid transparent;
}

.gallery-thumbs .thumb.mockup svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs .thumb.mockup.active {
  border-color: var(--charcoal);
  opacity: 1;
}

.gallery-thumbs .thumb.mockup:not(.active) {
  opacity: 0.55;
  transition: opacity var(--fast);
}
.gallery-thumbs .thumb.mockup:hover { opacity: 1; }

/* Card mockup — for shop grid */
.card-mockup {
  aspect-ratio: 4/5;
  background: linear-gradient(180deg, #F4F1EA 0%, #E8E2D4 100%);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  --c: #1C1B19;
}
.card-mockup svg { width: 100%; height: 100%; display: block; }
.card-mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.3) 0%, transparent 50%);
  pointer-events: none;
}