.hangerflow {
	--hf-rope-color: #92958a;
	--hf-background: #f7f4ef;
	--hf-text: #252321;
	--hf-gap: clamp(24px, 3.3vw, 54px);
	--hf-image-height: clamp(270px, 28vw, 350px);
	--hf-hover-scale: 1.19;
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: clamp(32px, 5vw, 68px) 0 42px;
	background: var(--hf-background);
	color: var(--hf-text);
	box-sizing: border-box;
}
.hangerflow * { box-sizing: border-box; }
.hangerflow__header { position: relative; z-index: 2; text-align: center; padding: 0 20px; margin: 0 auto clamp(78px, 8vw, 116px); }
.hangerflow__eyebrow { display: block; margin-bottom: 12px; color: #b39b73; font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.hangerflow__header h2 { margin: 0 0 12px; color: var(--hf-text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3vw, 43px); line-height: 1.12; font-weight: 500; }
.hangerflow__header p { margin: 0; color: #77736d; font-size: 15px; line-height: 1.5; }
.hangerflow__viewport { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 0 68px; scrollbar-width: none; scroll-behavior: smooth; }
.hangerflow__viewport::-webkit-scrollbar { display: none; }
/* SVG clothesline travels with the product track. Product items are vertically
   offset to follow this same curve, keeping each image's built-in hook aligned. */
.hangerflow__rope {
	position: absolute; z-index: 0; top: var(--hf-rope-offset, 12px); left: 0; display: block;
	width: 100%; height: 130px; overflow: visible; pointer-events: none;
	filter: drop-shadow(0 2px 1px rgba(0,0,0,.13));
}
.hangerflow__rope-path {
	fill: none; stroke: var(--hf-rope-color); stroke-width: 3;
	stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.hangerflow__track { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--hf-gap); width: max-content; min-width: 100%; padding: 0 max(7vw, 34px) 12px; cursor: grab; touch-action: pan-y; user-select: none; }
.hangerflow__track.is-dragging { cursor: grabbing; }
.hangerflow__item { position: relative; z-index: 1; transform: translateY(var(--hf-sag, 0px)); flex: 0 0 clamp(130px, 15vw, 190px); width: clamp(130px, 15vw, 190px); min-height: calc(var(--hf-image-height) * var(--hf-image-scale, 1.8) * var(--hf-hover-scale) + 36px); text-align: center; transition: z-index 0s; }
.hangerflow__product { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: inherit; color: inherit; text-decoration: none !important; outline-offset: 5px; }
/* The product photo itself must include its hook and hanger. No extra hanger is drawn by the plugin. */
.hangerflow__image-wrap { position: relative; display: block; width: 100%; height: var(--hf-image-height); overflow: visible; transform: scale(1); transform-origin: 50% 0%; transition: transform .48s cubic-bezier(.2,.75,.25,1); }
.hangerflow__image {
	position: absolute; top: 0; left: 50%; right: auto; bottom: auto;
	display: block; width: auto; height: 100%; max-width: none;
	object-fit: contain; object-position: center top;
	transform: translateX(-50%) scale(var(--hf-image-scale, 1.8));
	transform-origin: 50% 0%;
	transition: opacity .42s ease; pointer-events: none;
}
.hangerflow__image--side { opacity: 1; }
.hangerflow__image--front { opacity: 0; }
.hangerflow__item:hover,
.hangerflow__item:focus-within,
.hangerflow__item.is-active { z-index: 4; }
.hangerflow__product:hover .hangerflow__image-wrap,
.hangerflow__product:focus-visible .hangerflow__image-wrap,
.hangerflow__item.is-active .hangerflow__image-wrap { transform: scale(1.19); }
.hangerflow__product:hover .hangerflow__image--side,
.hangerflow__product:focus-visible .hangerflow__image--side,
.hangerflow__item.is-active .hangerflow__image--side { opacity: 0; }
.hangerflow__product:hover .hangerflow__image--front,
.hangerflow__product:focus-visible .hangerflow__image--front,
.hangerflow__item.is-active .hangerflow__image--front { opacity: 1; }
.hangerflow__controls { position: absolute; right: clamp(16px, 4vw, 52px); bottom: 12px; z-index: 5; display: flex; gap: 8px; }
.hangerflow__arrow { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(40,38,34,.25); border-radius: 50%; background: rgba(255,255,255,.86); color: #292722; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
.hangerflow__arrow:hover { background: #292722; color: #fff; }
@media (hover: none) {
	.hangerflow__product:active .hangerflow__image-wrap { transform: scale(1.12); }
}
@media (max-width: 767px) {
	.hangerflow { padding-top: 34px; padding-bottom: 54px; }
	.hangerflow { --hf-image-height: 245px; --hf-hover-scale: 1.12; }
	.hangerflow__header { margin-bottom: 68px; }
	.hangerflow__item { flex-basis: 124px; width: 124px; min-height: calc(var(--hf-image-height) * var(--hf-image-scale, 1.8) * var(--hf-hover-scale) + 30px); }
	.hangerflow__image-wrap { height: var(--hf-image-height); }
	.hangerflow__track { gap: 28px; padding-left: 22px; padding-right: 22px; }
	.hangerflow__viewport { padding-bottom: 58px; }
	.hangerflow__controls { bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
	.hangerflow *, .hangerflow *:before, .hangerflow *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}