/* Mobile chip row for the package pages (2026-07-25).
   Scoped to <=767px so the approved desktop layout is untouched. */

.chips-heading { display: none; }
.filter-item--extra { display: none; }

@media (max-width: 767px) {

	/* The chip row owns a full line of its own so the filters sit below it.
	   #taxonomy-filters is a grid at this breakpoint, so span every column;
	   the flex-basis keeps it correct if the container is flex instead. */
	#taxonomy-filters .term-visual-radio-filters {
		grid-column: 1 / -1;
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		gap: 8px;
		padding: 2px 2px 10px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	#taxonomy-filters .term-visual-radio-filters::-webkit-scrollbar { display: none; }

	.chips-heading {
		display: block;
		grid-column: 1 / -1;
		flex: 0 0 100%;
		order: 0;
		font-size: 15px;
		font-weight: bold;
		margin: 4px 2px 6px;
		color: #222;
	}

	/* the chip: a solid pill with a big, clear crest */
	.term-visual-radio-filters .filter-item {
		flex: 0 0 auto;
		scroll-snap-align: start;
		font-size: 13.5px;
	}
	.term-visual-radio-filters label {
		flex-direction: row;
		align-items: center;
		gap: 7px;
		height: 52px;
		padding: 0 12px 0 10px;
		background-color: #fff;
		border: 1px solid #e3e3e8;
		border-radius: 26px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
		color: #1d1d1f;
		font-weight: bold;
		white-space: nowrap;
		transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
	}
	.term-visual-radio-filters img {
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
		object-fit: contain;
	}
	/* long names (artists especially) must not push the next chip off-screen */
	.term-visual-radio-filters .term-name {
		display: block;
		max-width: 62px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.term-visual-radio-filters label:hover,
	.term-visual-radio-filters input:checked ~ label {
		background-color: var(--clr-primary);
		border-color: var(--clr-primary);
		color: #fff;
		box-shadow: 0 3px 10px rgba(169, 30, 34, .35);
	}
	.term-visual-radio-filters input:checked ~ label img {
		background: #fff;
		border-radius: 50%;
		padding: 2px;
	}

	/* two filters only, side by side, equal width: league + month.
	   sorting and the big clear button are off — the status line clears. */
	div#taxonomy-filters > div.city-select-filter,
	div#taxonomy-filters > div.term-select-filter,
	div#taxonomy-filters > div.sorting-select-filter,
	div#taxonomy-filters > div.clear-filters { display: none !important; }

	div#taxonomy-filters > div.league-select-filter,
	div#taxonomy-filters > div.month-select-filter {
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
	}
	div#taxonomy-filters > div.league-select-filter { order: 2; }
	div#taxonomy-filters > div.month-select-filter { order: 3; }
	#taxonomy-filters select {
		width: 100%;
		height: 48px;
		border: 1px solid #d8d8de;
		border-radius: 10px;
		font-size: 14px;
		background-color: #fff;
	}
	div#taxonomy-filters label { font-size: 13px; }

	/* shorter intro so teams + packages reach the first screen */
	.intro-text .short-text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* status line: what is filtered right now + a way out */
	.chips-status {
		grid-column: 1 / -1;
		flex: 0 0 100%;
		order: 8;
		display: none;
		align-items: center;
		gap: 10px;
		margin-top: 6px;
	}
	.chips-status.is-on { display: flex; }
	.chips-status__text { font-size: 15px; font-weight: bold; color: #222; }
	.chips-status__clear {
		border: 0;
		background: #f1f1f3;
		border-radius: 14px;
		font-size: 13px;
		font-weight: bold;
		padding: 7px 13px;
		color: #555;
	}
}