.cwArea {
	--cw-extra-purple: #3b265f;
	--cw-extra-accent: #6544aa;
	--cw-extra-accent-hover: #7655bc;
	--cw-extra-text: #fff;
	background: var(--cw-extra-purple);
	color: var(--cw-extra-text);
}

.cwArea .cwVisibleForm,
.cwArea .cwInfoArea,
.cwArea .cwDataArea,
.cwArea .cwControlAreaTop,
.cwArea .cwControlAreaBottom {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
}

.cwArea .cwShopPageName {
	font-size: clamp(1.7rem, 4vw, 3rem);
	font-weight: 800;
	text-transform: uppercase;
}

.cwArea .cwButton,
.cwArea .cwGrid .cwRegButton,
.cwArea .cwGrid .cwRegButton:visited,
.cwArea .cwShopFilterLabel {
	background: var(--cw-extra-accent);
	border: 0;
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--cw-extra-text);
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 600;
	padding: 0.65rem 1.1rem;
}

.cwArea .cwShopFilterLabelBase {
	margin-left: 0;
	text-transform: uppercase;
}

.cwArea .cwShopFilterLabelSelected {
	margin-left: 0;
}

.cwArea .cwButton:hover:enabled,
.cwArea .cwButton:active:enabled,
.cwArea .cwButton:focus-visible,
.cwArea .cwGrid .cwRegButton:hover,
.cwArea .cwGrid .cwRegButton:active,
.cwArea .cwGrid .cwRegButton:focus-visible,
.cwArea .cwShopFilterLabel:hover,
.cwArea .cwShopFilterLabel:focus-visible,
.cwArea .cwShopFilterLabel[aria-expanded="true"] {
	background: var(--cw-extra-accent-hover);
	color: var(--cw-extra-text);
	outline: 2px solid var(--cw-extra-text);
	outline-offset: 2px;
}

.cwArea .cwShopFilterLabel::after {
	font-size: 1.4em;
	line-height: 0.6;
}

.cwArea .cwShopFilterList {
	background: var(--cw-extra-purple);
	border-color: rgba(255, 255, 255, 0.55);
	border-radius: 18px;
	color: var(--cw-extra-text);
}

.cwArea .cwInputArea {
	background: var(--cw-extra-purple);
}

.cwArea table.cwEvents tr.dataRow {
	border-color: rgba(255, 255, 255, 0.4);
}

.cwArea table.cwEvents tr.dataRow:hover,
.cwArea table.cwEvents tr.dataRow:hover a {
	background: rgba(101, 68, 170, 0.55);
	color: var(--cw-extra-text);
}

/* Match the main CogWork shop breakpoint in lib.css. */
@media only screen and (max-width: 799px) {
	.cwArea .cwInfoArea {
		padding: 1.5rem 1.1rem;
	}

	.cwArea .cwShopSearchForm {
		display: grid;
		gap: 0.65rem;
	}

	.cwArea .cwShopFilterDropdown,
	.cwArea .cwShopFilterLabel {
		width: 100%;
	}

	.cwArea .cwShopFilterList {
		box-sizing: border-box;
		min-width: 100%;
	}
}