/* Q-components: чипы (handle q-chips). DESIGN.md «Чипы» */
.q-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.q-chips__label { flex: none; margin-right: 2px; font-family: var(--q-font-body); font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--q-text-muted-strong); }

.q-chip {
	--q-chip-h: 40px;
	--q-chip-px: 15px;
	--q-chip-fs: 14px;
	box-sizing: border-box;
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: var(--q-chip-h);
	margin: 0;
	padding: 4px var(--q-chip-px) !important;
	border: 1px solid var(--q-border-warm);
	border-radius: var(--q-radius-pill);
	background: var(--q-white);
	box-shadow: none;
	font-family: var(--q-font-body);
	font-size: var(--q-chip-fs);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none !important;
	white-space: nowrap;
	color: var(--q-text-body) !important;
	list-style: none;
	cursor: default;
	-webkit-tap-highlight-color: transparent;
	transition: border-color var(--q-fast) var(--q-ease), background-color var(--q-fast) var(--q-ease);
}
.q-chip:where(a, button) { cursor: pointer; }
.q-chip::before { content: none; }
.q-chip .q-icon { flex: none; color: var(--q-orange-deep); }
.q-chip__n { font-size: .9em; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--q-text-muted-strong); }

@media (hover: hover) {
	.q-chip:where(a, button):not(:where([disabled], [aria-disabled="true"])):hover { border-color: var(--q-orange); }
}
.q-chip:where(a, button):not(:where([disabled], [aria-disabled="true"])):active { background: var(--q-sand-light); }

.q-chip:is(.is-selected, [aria-pressed="true"], [aria-current]:not([aria-current="false"])) {
	background: var(--q-selected-bg);
	border-color: var(--q-selected-border);
	color: var(--q-selected-text) !important;
	font-weight: 600;
}
.q-chip:is(.is-selected, [aria-pressed="true"], [aria-current]:not([aria-current="false"])) .q-chip__n { font-weight: inherit; color: var(--q-text-body); }
@media (hover: hover) {
	.q-chip:is(.is-selected, [aria-pressed="true"], [aria-current]:not([aria-current="false"])):where(a, button):hover { border-color: var(--q-orange-deep); }
}
.q-chip:is([disabled], [aria-disabled="true"]) { opacity: var(--q-disabled-opacity); cursor: default; }

@media (max-width: 1024px) { .q-chip { --q-chip-px: 14px; --q-chip-fs: 13.5px; } }
@media (max-width: 640px) { .q-chip { --q-chip-px: 13px; --q-chip-fs: 13px; } }

/* --s 36px, касание 44px */
.q-chip.q-chip--s { --q-chip-h: 36px; }
.q-chip--s::before { content: ''; position: absolute; inset: -4px 0; }

/* --remove: выбранный фильтр с крестиком */
.q-chip--remove { padding-right: calc(var(--q-chip-px) - 4px) !important; }
.q-chip--remove::after {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --dark: только админка */
.q-chip--dark:is(.is-selected, [aria-pressed="true"], [aria-current]:not([aria-current="false"])) { background: var(--q-bark); border-color: var(--q-bark); color: var(--q-white) !important; }
.q-chip--dark:is(.is-selected, [aria-pressed="true"], [aria-current]:not([aria-current="false"])) .q-chip__n { color: inherit; opacity: .8; }
@media (hover: hover) {
	.q-chip--dark:is(.is-selected, [aria-pressed="true"], [aria-current]:not([aria-current="false"])):where(a, button):hover { border-color: var(--q-bark-deep); }
}

/* --static: только чтение; q-product card_chips() считает ширину по этим числам */
.q-chip.q-chip--static { --q-chip-h: 27px; --q-chip-px: 11px; --q-chip-fs: 12.5px; gap: 6px; padding-top: 0 !important; padding-bottom: 0 !important; background: var(--q-sand-light); line-height: 1; transition: none; }

/* --scroll: одна строка на телефоне */
@media (max-width: 640px) {
	.q-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 32px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: -4px; padding: 4px 32px 4px 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
	.q-chips--scroll::-webkit-scrollbar { display: none; }
	.q-chips--scroll > .q-chip { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) { .q-chip { transition: none; } }