/* Shop "Shop by Concern" chips ------------------------------------------------
 * A row of clickable concern tiles above the product grid. Active/hover states
 * inherit the per-segment shop CSS vars (--shop-accent / --shop-text), so the
 * chips re-theme automatically per segment. Wired by assets/js/lander-common.js.
 */
.sbr-shop-concerns {
	max-width: 1200px;
	margin: 28px auto 4px;
	padding: 0 16px;
	text-align: center;
}

.sbr-shop-concerns__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	color: #3d3f40;
}

.sbr-shop-concerns__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sbr-shop-concern {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border: 2px solid #e2e2ea;
	border-radius: 999px;
	background: #fff;
	color: #3d3f40;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sbr-shop-concern:hover,
.sbr-shop-concern:focus-visible {
	border-color: var(--shop-accent, #5642bb);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	outline: none;
}

.sbr-shop-concern.is-active {
	border-color: var(--shop-accent, #5642bb);
	background: var(--shop-accent, #5642bb);
	color: var(--shop-text, #fff);
}

/* Collapse / "See more" is a mobile-only affordance — on desktop every chip
   shows on one line and the toggle is hidden (the collapse rules live in the
   max-width: 1024px block below). The toggle is a filled chip with a solid (not
   dotted) border. */
.sbr-shop-concerns__toggle {
	display: none; /* shown on mobile */
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 8px 14px;
	border: 2px solid var(--shop-accent, #5642bb);
	border-radius: 999px;
	background: #fff;
	color: var(--shop-accent, #5642bb);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sbr-shop-concerns__toggle:hover,
.sbr-shop-concerns__toggle:focus-visible {
	background: var(--shop-accent, #5642bb);
	color: var(--shop-text, #fff);
	outline: none;
}

.sbr-shop-concerns__caret {
	font-size: 10px;
	transition: transform .15s ease;
}

.sbr-shop-concerns:not(.sbr-shop-concerns--collapsed) .sbr-shop-concerns__caret {
	transform: rotate(180deg);
}

/* Mobile/tablet: chips don't fit one line, so collapse to the first two with the
   "See more" toggle. On desktop both rules are inert (toggle stays hidden). */
@media (max-width: 1024px) {
	.sbr-shop-concerns__toggle {
		display: inline-flex;
	}

	.sbr-shop-concerns--collapsed .sbr-shop-concerns__grid > .sbr-shop-concern:nth-child(n+3) {
		display: none;
	}
}

@media (max-width: 640px) {
	.sbr-shop-concerns {
		margin-top: 18px;
	}

	.sbr-shop-concerns__title {
		font-size: 17px;
	}

	.sbr-shop-concern {
		padding: 7px 12px;
		font-size: 12px;
	}
}