/* Ilosc QTY-2 "Karty pakietow" (presety, E8) - plik ladowany tylko przy stylu ilosci 2 (CurdeWidgetLook::style_files).
   Markup: woocommerce/single-product/add-to-cart/look/qs-2.php (button.vw-qk role=radio > .vw-qk__ic + .vw-qk__n + .vw-qk__p)
   w rzedzie .vw-hs (look/row.css + look.js; strzalki desktop przesuwaja o 3 karty). Spec: presety-spec.md (sekcja 0 i 2), plansza QTY-2.
   - karta 88 x 80, padding 0 6, gap 2: ikona uslugi 14 -> liczba 18/22 600 -> cena 13/16 (#5F6366, wybrany #303435), tabular-nums;
   - wybrany: obwodka --vw-ln + inset 1; hover niewybranego #8A8E91; fokus: obwodka + inset + poswiata 4 px --vw-ring;
   - P4 (tylko progi z _plh_popular_quantities): tlo --vw-tint-p + kreska 2 px u dolu (wybrany + P4: inset 1 + dolna 3 px);
   - wariant bez magazynu: przygaszony (chooseQty go pomija). */
form#product_widget.vw-p-qs2 .vw-qk-row {
	--vw-hs-w: 88px;
}
form#product_widget.vw-p-qs2 .vw-qk {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 80px;
	padding: 0 6px;
	border: 1px solid var(--vw-border);
	border-radius: var(--r-tile);
	background: #FFFFFF;
	box-shadow: 0 1px 1px rgba(48, 52, 53, .04), 0 3px 6px rgba(48, 52, 53, .03);
	color: var(--vw-ink);
	text-align: center;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .18s cubic-bezier(.2, 0, 0, 1), box-shadow .18s cubic-bezier(.2, 0, 0, 1);
}
form#product_widget.vw-p-qs2 .vw-qk__ic {
	display: block;
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
}
form#product_widget.vw-p-qs2 .vw-qk__n {
	display: block;
	max-width: 100%;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
form#product_widget.vw-p-qs2 .vw-qk__p {
	display: block;
	max-width: 100%;
	font-size: 13px;
	line-height: 16px;
	color: var(--vw-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
form#product_widget.vw-p-qs2 .vw-qk.is-on .vw-qk__p {
	color: var(--vw-ink);
}
@media (hover: hover) {
	form#product_widget.vw-p-qs2 .vw-qk:not(.is-on):not(.is-off):hover {
		border-color: #8A8E91;
	}
}
form#product_widget.vw-p-qs2 .vw-qk.is-on {
	border-color: var(--vw-ln);
	box-shadow: inset 0 0 0 1px var(--vw-ln), 0 1px 1px rgba(48, 52, 53, .04), 0 3px 6px rgba(48, 52, 53, .03);
}
form#product_widget.vw-p-qs2 .vw-qk.is-pop {
	background: var(--vw-tint-p);
	box-shadow: inset 0 -2px 0 var(--vw-p4-line), 0 1px 1px rgba(48, 52, 53, .04), 0 3px 6px rgba(48, 52, 53, .03);
}
form#product_widget.vw-p-qs2 .vw-qk.is-pop.is-on {
	box-shadow: inset 0 0 0 1px var(--vw-ln), inset 0 -3px 0 var(--vw-p4-line), 0 1px 1px rgba(48, 52, 53, .04), 0 3px 6px rgba(48, 52, 53, .03);
}
form#product_widget.vw-p-qs2 .vw-qk:focus {
	outline: none;
}
form#product_widget.vw-p-qs2 .vw-qk:focus-visible {
	border-color: var(--vw-ln);
	box-shadow: inset 0 0 0 1px var(--vw-ln), 0 0 0 4px var(--vw-ring);
}
form#product_widget.vw-p-qs2 .vw-qk.is-pop:focus-visible {
	box-shadow: inset 0 0 0 1px var(--vw-ln), inset 0 -3px 0 var(--vw-p4-line), 0 0 0 4px var(--vw-ring);
}
form#product_widget.vw-p-qs2 .vw-qk.is-off {
	opacity: .45;
	cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
	form#product_widget.vw-p-qs2 .vw-qk {
		transition: none;
	}
}

/* "Powieksz pakiet" PP-3 (superlike; decyzja wlasciciela 30.10, kanwa X35N4AQEHChRJp7A8mBfKM plansza PP-3, generator
   proces-makiet/scripts/presety/pp/gen_pp.py). Markup i logika wspolne (variable.php: .vw-up, upOffer/acceptUp/undoUp); tu wyglad:
   - karta nastepnego progu (klasa is-upn z look/qs-2.php = karta z oferty upOffer) dostaje kropke 6 px --vw-ln w prawym gornym
     rogu (8 px od krawedzi), bez tekstu i ramki; znika po przyjeciu (oferta znika);
   - linia pod rzedem zaczyna sie ta sama kropka (zamiast strzalki f062, kolumna 16), tekst 14/500 ink, doplata --vw-muted zaraz
     za tekstem, padding 0 10 0 0 (bez 40 px linii A), obrys fokusu z promieniem --r-field; po kliknieciu "Cofnij" do prawej.
   Ruch "rozlanie" (kolo od punktu dotyku na linii i od kropki na karcie) wymaga wspolrzednych dotyku z JS - etap E9. */
form#product_widget.vw-p-qs2 .vw-qk::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vw-ln);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s cubic-bezier(.2, 0, 0, 1);
}
form#product_widget.vw-p-qs2 .vw-qk.is-upn::after {
	opacity: 1;
}
form#product_widget.vw-p-qs2 .vw-up__btn,
form#product_widget.vw-p-qs2 .vw-up__ok {
	padding: 0 10px 0 0;
}
form#product_widget.vw-p-qs2 .vw-up__ar::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--vw-ln);
}
form#product_widget.vw-p-qs2 .vw-up__p {
	margin-left: 0;
	padding-left: 0;
}
form#product_widget.vw-p-qs2 .vw-up__btn:focus-visible {
	border-radius: var(--r-field);
}
@media (prefers-reduced-motion: reduce) {
	form#product_widget.vw-p-qs2 .vw-qk::after {
		transition: none;
	}
}

/* 05.11 (wlasciciel): rzad kart QTY-2 - przygaszone konce, strzalki takze na telefonie, przeciaganie mysza (look.js, data-hs-drag).
   Tylko ten styl ilosci (inne rzedy .vw-hs bez zmian). Kazdy selektor z form#product_widget (FlyingPress RUCSS zostawia reguly widgetu).
   - konce: ::before (lewy, po przewinieciu - bez is-start) i ::after (prawy, gdy jest dalsza tresc - bez is-end), od krawedzi przewijanego
     obszaru (bleed 16 px = krawedz karty) do 40 px w glab; kolor --vw-hs-fade = tlo karty widgetu (look.js), zapas --bs-card-bg / bialy;
     pod strzalkami (z-index 4 < 5), bez przechwytywania klikniec;
   - telefon (< 768): te same strzalki co desktop (36, pole 44 przez ::before -4), ale w calosci w karcie: left/right -16 = przy krawedzi
     przewijanego obszaru (desktop -34 wystaje poza karte) - nie zaslaniaja ceny w pelni widocznych kart (390 i 360);
   - przeciaganie (tylko kursor myszy): grab / grabbing, is-drag = bez snap i zaznaczania. */
form#product_widget.vw-p-qs2 .vw-qk-row::before,
form#product_widget.vw-p-qs2 .vw-qk-row::after {
	content: "";
	position: absolute;
	z-index: 4;
	top: 0;
	bottom: 0;
	width: 40px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s cubic-bezier(.2, 0, 0, 1);
}
form#product_widget.vw-p-qs2 .vw-qk-row::before {
	left: -16px;
	background: linear-gradient(to right, var(--vw-hs-fade, var(--bs-card-bg, #FFFFFF)), rgba(255, 255, 255, 0));
}
form#product_widget.vw-p-qs2 .vw-qk-row::after {
	right: -16px;
	background: linear-gradient(to left, var(--vw-hs-fade, var(--bs-card-bg, #FFFFFF)), rgba(255, 255, 255, 0));
}
form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll:not(.is-start)::before,
form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll:not(.is-end)::after {
	opacity: 1;
}
@media (max-width: 767px) {
	form#product_widget.vw-p-qs2 .vw-qk-row.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;
		-webkit-tap-highlight-color: transparent;
	}
	form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-hs__ar::before {
		content: "";
		position: absolute;
		inset: -5px;
	}
	form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-hs__ar svg {
		display: block;
		width: 16px;
		height: 16px;
	}
	form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-hs__ar--p {
		left: -16px;
	}
	form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-hs__ar--n {
		right: -16px;
	}
	form#product_widget.vw-p-qs2 .vw-qk-row.is-start .vw-hs__ar--p,
	form#product_widget.vw-p-qs2 .vw-qk-row.is-end .vw-hs__ar--n {
		opacity: 0;
		pointer-events: none;
	}
	form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-hs__ar:focus-visible {
		outline: 2px solid var(--vw-ink);
		outline-offset: 2px;
	}
}
/* grab bez @media (hover) - na dotyku kursora nie widac, a hybrydy (laptop z ekranem) dostaja wskazowke przy myszy */
form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-hs__sc,
form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-qk {
	cursor: grab;
}
form#product_widget.vw-p-qs2 .vw-qk-row.is-drag .vw-hs__sc {
	scroll-snap-type: none;
	user-select: none;
	-webkit-user-select: none;
}
form#product_widget.vw-p-qs2 .vw-qk-row.is-drag .vw-hs__sc,
form#product_widget.vw-p-qs2 .vw-qk-row.is-drag .vw-qk {
	cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
	form#product_widget.vw-p-qs2 .vw-qk-row::before,
	form#product_widget.vw-p-qs2 .vw-qk-row::after,
	form#product_widget.vw-p-qs2 .vw-qk-row.is-scroll .vw-hs__ar {
		transition: none;
	}
}