/* Rzad przewijany presetow (E6b) - wspolny dla QUA-5, potem LOC-3/LOC-5 (E7) i QTY-2 (E8). Ladowany razem z public/js/look.js
   (CurdeWidgetLook::needs_look_js / style_files 'row'). Markup: .vw-hs (wrapper, v-vw-hs) > [.vw-hs__ar--p] .vw-hs__sc > pozycje [.vw-hs__ar--n].
   Spec: .claude/skills/design-system/references/presety-spec.md (sekcja 0 "Rzad przewijany"), plansze LOC-3/5 (loc/gen2.py, .hs/.arr).
   Zmienne ustawia styl sekcji na .vw-hs: --vw-hs-w (min. szerokosc pozycji; pozycje rosna, gdy sie mieszcza), --vw-hs-pt (zapas nad
   rzedem, np. 16 na badge jakosci; domyslnie 5 na poswiate fokusu).
   - bez przewijania: margines -5 / padding 5 (zapas na poswiate fokusu 4 px), krawedzie pozycji rowno z naglowkiem (17 od karty);
   - is-scroll (JS: suma --vw-hs-w pozycji + odstepy > miejsce o wiecej niz 4 px): bleed (margines -16, padding 16, scroll-padding 16), snap do poczatku pozycji;
   - strzalki 36 (pole 44) tylko desktop (>= 768) przy is-scroll i nie na krancu (is-start / is-end). */
form#product_widget .vw-hs {
	position: relative;
	--vw-hs-pt: 5px;
	--vw-hs-w: 136px;
}
form#product_widget .vw-hs__sc {
	position: relative;
	display: flex;
	gap: 8px;
	margin: calc(var(--vw-hs-pt) * -1) -5px -6px;
	padding: var(--vw-hs-pt) 5px 6px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: auto; /* motyw (style.css, reset) daje smooth kazdemu div - przewijanie plynne tylko jawnie z look.js */
}
form#product_widget .vw-hs__sc::-webkit-scrollbar {
	display: none;
}
form#product_widget .vw-hs__sc > * {
	flex: 1 1 var(--vw-hs-w); /* bez przewijania pozycje moga oddac do 4 px (tolerancja look.js, P3 po E6b) */
	min-width: 0;
	scroll-snap-align: start;
}
form#product_widget .vw-hs.is-scroll .vw-hs__sc > * {
	flex-shrink: 0;
}
form#product_widget .vw-hs.is-scroll .vw-hs__sc {
	margin-right: -16px;
	margin-left: -16px;
	padding-right: 16px;
	padding-left: 16px;
	scroll-padding: 0 16px;
	scroll-snap-type: x mandatory;
}
form#product_widget .vw-hs__ar {
	display: none;
}
@media (min-width: 768px) {
	form#product_widget .vw-hs.is-scroll .vw-hs__ar {
		position: absolute;
		z-index: 5;
		top: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin-top: -18px;
		padding: 0;
		border: 1px solid var(--vw-line);
		border-radius: 50%;
		background: #FFFFFF;
		box-shadow: 0 2px 8px rgba(48, 52, 53, .14);
		color: var(--vw-ink);
		cursor: pointer;
		transition: opacity .15s, border-color .15s;
	}
	form#product_widget .vw-hs.is-scroll .vw-hs__ar::before {
		content: "";
		position: absolute;
		inset: -4px;
	}
	form#product_widget .vw-hs.is-scroll .vw-hs__ar svg {
		display: block;
		width: 16px;
		height: 16px;
	}
	form#product_widget .vw-hs.is-scroll .vw-hs__ar--p {
		left: -34px;
	}
	form#product_widget .vw-hs.is-scroll .vw-hs__ar--n {
		right: -34px;
	}
	form#product_widget .vw-hs.is-start .vw-hs__ar--p,
	form#product_widget .vw-hs.is-end .vw-hs__ar--n {
		opacity: 0;
		pointer-events: none;
	}
	form#product_widget .vw-hs.is-scroll .vw-hs__ar:focus-visible {
		outline: 2px solid var(--vw-ink);
		outline-offset: 2px;
	}
}
@media (min-width: 768px) and (hover: hover) {
	form#product_widget .vw-hs.is-scroll .vw-hs__ar:hover {
		border-color: #8A8E91;
	}
}
/* reduced-motion: ta sama specyficznosc co regula strzalek w @media (min-width: 768px) wyzej (E8b, QA E8 - z samym .vw-hs__ar
   przegrywala i strzalki wygaszaly sie 150 ms). */
@media (prefers-reduced-motion: reduce) {
	form#product_widget .vw-hs.is-scroll .vw-hs__ar {
		transition: none;
	}
}