/* Shop the Look — editorial lifestyle images with product hotspots */

.fz-lookbook__hero { padding: 56px 0 24px; text-align: center; }
.fz-lookbook__title {
	font-family: var(--fz-font-heading, serif);
	font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; margin: 0 0 12px;
	color: var(--fz-text, #1a1a1a);
}
.fz-lookbook__intro {
	max-width: 60ch; margin: 0 auto; color: var(--fz-muted, #6b6b6b);
	font-size: 1.0625rem; line-height: 1.6;
}

.fz-lookbook__feed { padding: 24px 0 80px; }
.fz-lookbook__look { margin: 0 0 64px; }
.fz-lookbook__look:last-child { margin-bottom: 0; }
.fz-lookbook__look-title {
	font-family: var(--fz-font-heading, serif);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 400; margin: 0 0 18px;
	color: var(--fz-text, #1a1a1a);
}

/* Stage holds the lifestyle image + absolutely positioned pins */
.fz-lookbook__stage { position: relative; line-height: 0; border-radius: 4px; overflow: hidden; }
.fz-lookbook__img { width: 100%; height: auto; display: block; }

.fz-lookbook__pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; line-height: normal; }

/* Hotspot pin */
.fz-lookbook__hotspot {
	width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
	border: 2px solid #fff; background: rgba(26, 26, 26, 0.82);
	color: #fff; font-size: 20px; line-height: 1; padding: 0;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.18s ease, background 0.18s ease;
}
.fz-lookbook__hotspot::before {
	content: ""; position: absolute; inset: -6px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6); animation: fz-lookbook-pulse 2.4s ease-out infinite;
}
@keyframes fz-lookbook-pulse {
	0% { transform: scale(0.85); opacity: 0.8; }
	70% { transform: scale(1.5); opacity: 0; }
	100% { opacity: 0; }
}
.fz-lookbook__hotspot:hover { transform: scale(1.08); background: var(--fz-accent, #8B7355); }
.fz-lookbook__hotspot-plus { transform: translateY(-1px); }
.fz-lookbook__pin.is-open .fz-lookbook__hotspot { background: var(--fz-accent, #8B7355); transform: rotate(45deg); }
.fz-lookbook__pin.is-open .fz-lookbook__hotspot::before { display: none; }

/* Popover card */
.fz-lookbook__popover {
	position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
	width: 260px; max-width: 78vw; background: #fff; border-radius: 8px; overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); display: flex; gap: 0;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 5;
}
.fz-lookbook__pin.is-open .fz-lookbook__popover {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.fz-lookbook__popover::after {
	content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 8px solid transparent; border-top-color: #fff;
}
.fz-lookbook__popover-img { flex: 0 0 92px; line-height: 0; background: var(--fz-bg, #f7f5f1); }
.fz-lookbook__popover-img img { width: 92px; height: 100%; object-fit: cover; display: block; }
.fz-lookbook__popover-info { flex: 1; padding: 12px 14px; min-width: 0; }
.fz-lookbook__popover-name {
	display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px;
	color: var(--fz-text, #1a1a1a); text-decoration: none;
}
.fz-lookbook__popover-name:hover { text-decoration: underline; }
.fz-lookbook__popover-price { display: block; font-size: 0.875rem; color: var(--fz-text, #1a1a1a); margin-bottom: 10px; }
.fz-lookbook__popover-price .amount { font-weight: 600; }
.fz-lookbook__popover-actions .fz-btn { width: 100%; justify-content: center; }

.fz-lookbook__empty { text-align: center; color: var(--fz-muted, #6b6b6b); padding: 48px 0; }

/* Flip popover below the pin when near the top edge of the stage */
.fz-lookbook__pin:nth-child(-n+1) {} /* placeholder to keep specificity predictable */

@media (max-width: 600px) {
	.fz-lookbook__hotspot { width: 28px; height: 28px; font-size: 18px; }
	.fz-lookbook__popover { width: 220px; }
	.fz-lookbook__popover-img { flex-basis: 76px; }
	.fz-lookbook__popover-img img { width: 76px; }
}