.shape {
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}

.image-hotspot ~ .shape,
.image-hotspot .shape {
  z-index: 2;
}

.shape-top {
	top: -1px;
}

.shape-bottom {
	bottom: -1px;
	transform: rotate(180deg);
}

/* Reserve space per shape type to prevent CLS - matches each SVG viewBox exactly */
.shape svg {
	--_shape-width: var(--shape-width, 100%);

	display: block;
  width: calc(var(--_shape-width) + 1.3px);
  height: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.shape--curve svg { aspect-ratio: 1440 / 100; }
.shape--curve-wide svg { aspect-ratio: 1440 / 204; }
.shape--curve-invert svg { aspect-ratio: 1440 / 96; }
.shape-top.shape--waves svg { aspect-ratio: 1440 / 96; }
.shape-bottom.shape--waves svg { aspect-ratio: 1440 / 21.52; }
.shape--peak svg { aspect-ratio: 1440 / 110; }
.shape--tilt svg { aspect-ratio: 1440 / 90; }
.shape--clouds svg { aspect-ratio: 1440 / 115; }
.shape--hills svg { aspect-ratio: 1440 / 110; }
.shape--wave-soft svg { aspect-ratio: 1440 / 100; }
.shape--wave-offbeat svg { aspect-ratio: 1440 / 44; }
.shape rect,
.shape path {
	--_shape-color: var(--shape-color, #fff);
	fill: var(--_shape-color);
}