/* WM Workshop Form — front-end
   Inherits the theme typography on purpose; only structure and colour are ours. */

.wm-wf {
	--wm-wf-primary: #efb446;
	--wm-wf-on-primary: #241c17;
	--wm-wf-ink: #8b6829;
	--wm-wf-price: #241c17;
	--wm-wf-soft: #fdf4e3;
	--wm-wf-text: #241c17;
	--wm-wf-radius: 14px;
	--wm-wf-max: 940px;
	--wm-wf-line: #e7ddc9;
	--wm-wf-muted: #7d7368;
	--wm-wf-danger: #c0392b;

	max-width: var(--wm-wf-max);
	margin: 0 auto;
	color: var(--wm-wf-text);
	font-size: 16px;
	line-height: 1.55;
	text-align: right;
	direction: rtl;
}

.wm-wf *,
.wm-wf *::before,
.wm-wf *::after { box-sizing: border-box; }

.wm-wf-form {
	background: #fff;
	border: 1px solid var(--wm-wf-line);
	border-radius: var(--wm-wf-radius);
	padding: 28px;
	box-shadow: 0 12px 34px -26px rgba(0, 0, 0, .5);
}

/* ---------- Head ---------- */

.wm-wf-head { margin-bottom: 22px; }

.wm-wf-title {
	margin: 0 0 6px;
	font-size: 1.6em;
	line-height: 1.25;
	color: var(--wm-wf-text);
}

.wm-wf-subtitle {
	margin: 0;
	color: var(--wm-wf-muted);
	font-size: .95em;
}

/* ---------- Progress ---------- */

.wm-wf-progress {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	counter-reset: none;
}

.wm-wf-progress__item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: calc(var(--wm-wf-radius) - 4px);
	background: var(--wm-wf-soft);
	font-size: .86em;
	color: var(--wm-wf-muted);
	transition: background .2s ease, color .2s ease;
}

.wm-wf-progress__item.is-active {
	background: var(--wm-wf-primary);
	color: var(--wm-wf-on-primary);
}

.wm-wf-progress__item.is-done { color: var(--wm-wf-text); }

.wm-wf-progress__dot {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .08);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: .9em;
}

.wm-wf-progress__item.is-active .wm-wf-progress__dot { background: rgba(0, 0, 0, .12); }

.wm-wf-progress__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Layout ---------- */

.wm-wf-step { animation: wm-wf-fade .25s ease; }
.wm-wf-step[hidden] { display: none; }

@keyframes wm-wf-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.wm-wf--single .wm-wf-step + .wm-wf-step { margin-top: 30px; }

.wm-wf-step__title {
	margin: 0 0 14px;
	font-size: 1.05em;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--wm-wf-soft);
}

.wm-wf-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.wm-wf-field { flex: 1 1 100%; min-width: 0; }
.wm-wf-col-50 { flex: 1 1 calc(50% - 8px); }
.wm-wf-col-33 { flex: 1 1 calc(33.333% - 11px); }
.wm-wf-field.is-hidden { display: none; }

/* ---------- Inputs ---------- */

span.wm-wf-label,
.wm-wf-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .93em;
}

.wm-wf-req { color: var(--wm-wf-danger); margin-inline-start: 2px; }

.wm-wf-desc {
	margin: -2px 0 6px;
	font-size: .84em;
	color: var(--wm-wf-muted);
}

.wm-wf-input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--wm-wf-line);
	border-radius: calc(var(--wm-wf-radius) - 6px);
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .97em;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wm-wf-input:focus {
	outline: none;
	border-color: var(--wm-wf-primary);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

.wm-wf-input:focus-visible { outline: 2px solid transparent; }

textarea.wm-wf-input { resize: vertical; min-height: 96px; }

.wm-wf-field.has-error .wm-wf-input { border-color: var(--wm-wf-danger); }

.wm-wf-error {
	display: none;
	margin-top: 5px;
	font-size: .82em;
	color: var(--wm-wf-danger);
}

.wm-wf-field.has-error .wm-wf-error { display: block; }

/* ---------- Choices ---------- */

.wm-wf-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wm-wf-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--wm-wf-line);
	border-radius: 999px;
	cursor: pointer;
	font-size: .92em;
	transition: border-color .15s ease, background .15s ease;
	background: #fff;
}

.wm-wf-choice:hover { border-color: var(--wm-wf-primary); }

.wm-wf-choice input {
	accent-color: var(--wm-wf-primary);
	margin: 0;
}

.wm-wf-choice:has(input:checked) {
	border-color: var(--wm-wf-primary);
	background: var(--wm-wf-soft);
	font-weight: 600;
}

.wm-wf-swatch {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .18);
	display: inline-block;
	flex: 0 0 18px;
}

/* ---------- Products ---------- */

.wm-wf-products { margin-top: 26px; }

.wm-wf-products__title {
	margin: 0 0 4px;
	font-size: 1.1em;
}

.wm-wf-products__subtitle {
	margin: 0 0 16px;
	color: var(--wm-wf-muted);
	font-size: .9em;
}

.wm-wf-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}

.wm-wf-card[hidden] { display: none !important; }

.wm-wf-card {
	border: 1px solid var(--wm-wf-line);
	border-radius: var(--wm-wf-radius);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wm-wf-card.is-selected {
	border-color: var(--wm-wf-primary);
	box-shadow: 0 10px 24px -18px var(--wm-wf-primary);
	transform: translateY(-2px);
}

.wm-wf-card__media {
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--wm-wf-radius) - 5px);
	overflow: hidden;
	background: var(--wm-wf-soft);
}

.wm-wf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wm-wf-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.wm-wf-card__name {
	font-weight: 600;
	font-size: .93em;
	line-height: 1.35;
}

.wm-wf-card__price {
	color: var(--wm-wf-price);
	font-weight: 700;
	font-size: .95em;
}

.wm-wf-card__note {
	font-size: .82em;
	line-height: 1.4;
	color: var(--wm-wf-muted);
}

.wm-wf-slot__note {
	flex: 1 1 100%;
	font-size: .82em;
	color: var(--wm-wf-muted);
	padding-inline-start: 38px;
}

.wm-wf-slot__note[hidden] { display: none; }

.wm-wf-card__total {
	font-size: .85em;
	font-weight: 700;
	color: var(--wm-wf-text);
	text-align: center;
	padding-top: 2px;
	border-top: 1px dashed var(--wm-wf-line);
}

.wm-wf-card__total[hidden] { display: none; }

/* Slots */

.wm-wf-slots { display: flex; flex-direction: column; gap: 10px; }

.wm-wf-slot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--wm-wf-line);
	border-radius: calc(var(--wm-wf-radius) - 4px);
	background: #fff;
}

.wm-wf-slot.is-selected { border-color: var(--wm-wf-primary); }

.wm-wf-slot__num {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wm-wf-soft);
	font-size: .82em;
	font-weight: 700;
	color: var(--wm-wf-muted);
}

.wm-wf-slot__select { flex: 1; }

.wm-wf-slot__total {
	flex: 0 0 92px;
	text-align: left;
	font-weight: 700;
	color: var(--wm-wf-text);
	font-size: .95em;
}

/* Stepper — the tactile ± control */

.wm-wf-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wm-wf-line);
	border-radius: 999px;
	overflow: hidden;
	background: var(--wm-wf-soft);
	align-self: center;
}

.wm-wf-stepper__btn {
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--wm-wf-text);
	transition: background .15s ease;
	padding: 0;
}

.wm-wf-stepper__btn:hover { background: rgba(0, 0, 0, .06); }
.wm-wf-stepper__btn:active { background: rgba(0, 0, 0, .12); }

.wm-wf-stepper__input {
	width: 46px;
	height: 34px;
	border: 0;
	background: #fff;
	text-align: center;
	font: inherit;
	font-weight: 700;
	font-size: .95em;
	color: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0;
}

.wm-wf-stepper__input::-webkit-outer-spin-button,
.wm-wf-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wm-wf-stepper__input:focus { outline: 2px solid var(--wm-wf-primary); outline-offset: -2px; }

.wm-wf-products__error { margin-top: 10px; }
.wm-wf-products.has-error .wm-wf-products__error { display: block; }

/* ---------- Summary ---------- */

.wm-wf-summary {
	margin-top: 24px;
	border: 1px solid var(--wm-wf-line);
	border-radius: var(--wm-wf-radius);
	overflow: hidden;
	background: #fff;
}

.wm-wf-summary__lines { padding: 6px 16px; }

.wm-wf-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	font-size: .9em;
	color: var(--wm-wf-muted);
}

.wm-wf-summary__row[hidden] { display: none; }

.wm-wf-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--wm-wf-soft);
	font-size: 1.02em;
	font-weight: 600;
}

.wm-wf-summary__total strong {
	font-size: 1.35em;
	color: var(--wm-wf-ink);
	font-variant-numeric: tabular-nums;
}

/* Solid strip: the brand colour appears at full saturation as a background,
   where contrast is not a problem, and the number stays maximally legible. */
.wm-wf-summary--solid .wm-wf-summary__total {
	background: var(--wm-wf-primary);
	color: var(--wm-wf-on-primary);
	padding: 16px;
}

.wm-wf-summary--solid .wm-wf-summary__total strong {
	color: var(--wm-wf-on-primary);
	font-size: 1.45em;
}

/* ---------- Actions ---------- */

.wm-wf-privacy {
	margin: 18px 0 0;
	font-size: .8em;
	color: var(--wm-wf-muted);
}

.wm-wf-actions {
	display: flex;
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--wm-wf-soft);
	align-items: center;
}

.wm-wf-btn {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 13px 30px;
	background: var(--wm-wf-primary);
	color: var(--wm-wf-on-primary);
	font: inherit;
	font-weight: 600;
	font-size: .97em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: filter .15s ease, transform .1s ease;
}

.wm-wf-btn[hidden] { display: none; }

.wm-wf-btn--ghost {
	margin-inline-start: auto;
	order: 2;
}

.wm-wf-btn.is-loading { pointer-events: none; }

.wm-wf-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	opacity: .8;
	border-radius: 50%;
	animation: wm-wf-spin .7s linear infinite;
}

.wm-wf-btn.is-loading .wm-wf-spinner { display: block; }

@keyframes wm-wf-spin { to { transform: rotate(360deg); } }

/* ---------- Alerts / honeypot ---------- */

.wm-wf-alert {
	padding: 12px 16px;
	border-radius: calc(var(--wm-wf-radius) - 6px);
	margin-bottom: 18px;
	font-size: .9em;
}

.wm-wf-alert[hidden] { display: none; }

.wm-wf-alert--error {
	background: #fdecea;
	color: #92291c;
	border: 1px solid #f5c6c0;
}

.wm-wf-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Success ---------- */

.wm-wf-success {
	background: #fff;
	border: 1px solid var(--wm-wf-line);
	border-radius: var(--wm-wf-radius);
	padding: 40px 28px;
	text-align: center;
}

.wm-wf-success[hidden] { display: none; }

.wm-wf-success__mark {
	width: 62px;
	height: 62px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--wm-wf-primary);
	position: relative;
}

.wm-wf-success__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 14px;
	height: 25px;
	border: solid var(--wm-wf-on-primary);
	border-width: 0 3px 3px 0;
	transform: translateY(-3px) rotate(45deg);
}

.wm-wf-success__title { margin: 0 0 8px; font-size: 1.35em; }
.wm-wf-success__text { margin: 0 0 22px; color: var(--wm-wf-muted); }

.wm-wf-success__summary {
	text-align: right;
	max-width: 560px;
	margin: 0 auto;
}

.wm-wf-success__summary table { width: 100%; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
	.wm-wf-form { padding: 18px; }
	.wm-wf-col-50,
	.wm-wf-col-33 { flex: 1 1 100%; }
	.wm-wf-progress__label { display: none; }
	.wm-wf-progress__item { justify-content: center; }
	.wm-wf-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.wm-wf-slot { flex-wrap: wrap; }
	.wm-wf-slot__select { flex: 1 1 100%; order: 1; }
	.wm-wf-slot__num { order: 0; }
	.wm-wf-slot__total { flex: 1; text-align: left; }
	.wm-wf-actions { flex-wrap: wrap; }
	.wm-wf-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.wm-wf *,
	.wm-wf *::before,
	.wm-wf *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}


/* ---------------------------------------------------------------------------
   Theme armour.

   Themes style every <button> on the page — Flatsome, Astra and friends set a
   background on :hover, :focus and :active, which is why a form dropped into a
   theme suddenly flashes the theme's accent colour when you press a button.
   These rules pin our own colours to every interaction state. The selectors are
   deliberately specific and the declarations flagged, because they have to win
   against theme rules that are themselves flagged.
   --------------------------------------------------------------------------- */

.wm-wf .wm-wf-form button.wm-wf-btn,
.wm-wf .wm-wf-form button.wm-wf-btn:link,
.wm-wf .wm-wf-form button.wm-wf-btn:visited,
.wm-wf .wm-wf-form button.wm-wf-btn:hover,
.wm-wf .wm-wf-form button.wm-wf-btn:focus,
.wm-wf .wm-wf-form button.wm-wf-btn:focus-within,
.wm-wf .wm-wf-form button.wm-wf-btn:focus-visible,
.wm-wf .wm-wf-form button.wm-wf-btn:active {
	background: var(--wm-wf-primary) !important;
	background-color: var(--wm-wf-primary) !important;
	background-image: none !important;
	color: var(--wm-wf-on-primary) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	filter: none !important;
	opacity: 1 !important;
}

.wm-wf .wm-wf-form button.wm-wf-btn > * { color: inherit !important; }

/* Pressing lifts the button rather than recolouring it. */
.wm-wf .wm-wf-form button.wm-wf-btn:hover {
	box-shadow: 0 8px 18px -10px var(--wm-wf-primary) !important;
}

.wm-wf .wm-wf-form button.wm-wf-btn:active {
	transform: translateY(1px);
	box-shadow: none !important;
}

.wm-wf .wm-wf-form button.wm-wf-btn:focus-visible {
	outline: 3px solid var(--wm-wf-ink) !important;
	outline-offset: 2px;
}

.wm-wf .wm-wf-form button.wm-wf-btn.is-loading { opacity: .8 !important; }

/* Secondary "back" button — declared after, so it overrides the block above. */
.wm-wf .wm-wf-form button.wm-wf-btn--ghost,
.wm-wf .wm-wf-form button.wm-wf-btn--ghost:link,
.wm-wf .wm-wf-form button.wm-wf-btn--ghost:visited,
.wm-wf .wm-wf-form button.wm-wf-btn--ghost:focus,
.wm-wf .wm-wf-form button.wm-wf-btn--ghost:active {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--wm-wf-muted) !important;
	border: 1px solid var(--wm-wf-line) !important;
	box-shadow: none !important;
}

.wm-wf .wm-wf-form button.wm-wf-btn--ghost:hover {
	background: var(--wm-wf-soft) !important;
	background-color: var(--wm-wf-soft) !important;
	color: var(--wm-wf-text) !important;
	box-shadow: none !important;
}

/* Quantity steppers are buttons too. */
.wm-wf .wm-wf-form button.wm-wf-stepper__btn,
.wm-wf .wm-wf-form button.wm-wf-stepper__btn:link,
.wm-wf .wm-wf-form button.wm-wf-stepper__btn:visited,
.wm-wf .wm-wf-form button.wm-wf-stepper__btn:focus,
.wm-wf .wm-wf-form button.wm-wf-stepper__btn:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wm-wf-text) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	padding: 0 !important;
}

.wm-wf .wm-wf-form button.wm-wf-stepper__btn:hover {
	background: rgba(0, 0, 0, .06) !important;
	background-color: rgba(0, 0, 0, .06) !important;
}

.wm-wf .wm-wf-form button.wm-wf-stepper__btn:active {
	background: var(--wm-wf-primary) !important;
	background-color: var(--wm-wf-primary) !important;
	color: var(--wm-wf-on-primary) !important;
}

.wm-wf .wm-wf-form button.wm-wf-stepper__btn:focus-visible {
	outline: 2px solid var(--wm-wf-ink) !important;
	outline-offset: -2px;
}

/* Inputs get the same treatment — themes recolour fields on focus. */
.wm-wf .wm-wf-form .wm-wf-input,
.wm-wf .wm-wf-form .wm-wf-input:hover,
.wm-wf .wm-wf-form .wm-wf-input:focus {
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	color: var(--wm-wf-text) !important;
	border: 1px solid var(--wm-wf-line) !important;
	box-shadow: none !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.wm-wf .wm-wf-form .wm-wf-input:focus {
	border-color: var(--wm-wf-primary) !important;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06) !important;
	outline: none !important;
}

.wm-wf .wm-wf-form .wm-wf-field.has-error .wm-wf-input {
	border-color: var(--wm-wf-danger) !important;
}

/* Choice pills are <label>s — some themes give those a background too. */
.wm-wf .wm-wf-form .wm-wf-choice,
.wm-wf .wm-wf-form .wm-wf-choice:hover {
	background: #fff;
	color: var(--wm-wf-text);
}

.wm-wf .wm-wf-form .wm-wf-choice:hover { border-color: var(--wm-wf-primary); }

.wm-wf .wm-wf-form .wm-wf-choice:has(input:checked) {
	background: var(--wm-wf-soft);
	border-color: var(--wm-wf-primary);
}


/* ---------- Browsing a large catalogue ---------- */

.wm-wf-browse {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.wm-wf-browse__search { position: relative; }

.wm-wf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wm-wf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--wm-wf-line);
	border-radius: 999px;
	background: #fff;
	color: var(--wm-wf-muted);
	font: inherit;
	font-size: .84em;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.wm-wf-chip[hidden] { display: none; }
.wm-wf-chip:hover { border-color: var(--wm-wf-primary); color: var(--wm-wf-text); }

.wm-wf-chip.is-active {
	background: var(--wm-wf-primary);
	border-color: var(--wm-wf-primary);
	color: var(--wm-wf-on-primary);
	font-weight: 600;
}

.wm-wf-chip__n {
	font-size: .85em;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

.wm-wf-chip--selected {
	border-style: dashed;
	border-color: var(--wm-wf-primary);
	color: var(--wm-wf-ink);
}

.wm-wf-products__empty {
	margin: 18px 0 0;
	padding: 22px;
	text-align: center;
	color: var(--wm-wf-muted);
	background: var(--wm-wf-soft);
	border-radius: calc(var(--wm-wf-radius) - 5px);
	font-size: .92em;
}

.wm-wf-products__empty[hidden] { display: none; }

.wm-wf-products__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.wm-wf-more {
	appearance: none;
	border: 1px solid var(--wm-wf-primary);
	background: #fff;
	color: var(--wm-wf-ink);
	border-radius: 999px;
	padding: 10px 24px;
	font: inherit;
	font-size: .92em;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}

.wm-wf-more[hidden] { display: none; }
.wm-wf-more:hover { background: var(--wm-wf-soft); }

.wm-wf-more__n { opacity: .7; font-weight: 400; }

.wm-wf-products__count {
	font-size: .84em;
	color: var(--wm-wf-muted);
	font-variant-numeric: tabular-nums;
}

/* Theme armour for the browse controls. */
.wm-wf .wm-wf-form button.wm-wf-chip,
.wm-wf .wm-wf-form button.wm-wf-chip:focus,
.wm-wf .wm-wf-form button.wm-wf-chip:hover {
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	color: var(--wm-wf-muted) !important;
	border: 1px solid var(--wm-wf-line) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-transform: none !important;
	filter: none !important;
}

.wm-wf .wm-wf-form button.wm-wf-chip:hover {
	border-color: var(--wm-wf-primary) !important;
	color: var(--wm-wf-text) !important;
}

.wm-wf .wm-wf-form button.wm-wf-chip.is-active {
	background: var(--wm-wf-primary) !important;
	background-color: var(--wm-wf-primary) !important;
	border-color: var(--wm-wf-primary) !important;
	color: var(--wm-wf-on-primary) !important;
}

.wm-wf .wm-wf-form button.wm-wf-more,
.wm-wf .wm-wf-form button.wm-wf-more:focus,
.wm-wf .wm-wf-form button.wm-wf-more:active {
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	color: var(--wm-wf-ink) !important;
	border: 1px solid var(--wm-wf-primary) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-transform: none !important;
	filter: none !important;
}

.wm-wf .wm-wf-form button.wm-wf-more:hover {
	background: var(--wm-wf-soft) !important;
	background-color: var(--wm-wf-soft) !important;
}


/* Search field: icon painted as a background on the input itself, so the
   placeholder can never run underneath it whatever the theme does to padding.
   Declared after the input armour above, which it must override. */
.wm-wf .wm-wf-form input.wm-wf-browse__input,
.wm-wf .wm-wf-form input.wm-wf-browse__input:hover,
.wm-wf .wm-wf-form input.wm-wf-browse__input:focus {
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237d7368' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.8' cy='8.8' r='5.8'/%3E%3Cpath d='M13.2 13.2 17 17'/%3E%3C/svg%3E") no-repeat right 14px center !important;
	background-size: 17px 17px !important;
	padding: 11px 42px 11px 14px !important;
	text-indent: 0 !important;
}

.wm-wf .wm-wf-form input.wm-wf-browse__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}


/* Centring armour. A theme or page builder that resets margins on child
   elements can leave the form hugging one edge of its container, so the
   doubled class raises specificity without needing a known parent. */
.wm-wf.wm-wf {
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	box-sizing: border-box;
}

/* Wider layouts get more product columns and a three-across field row on
   desktop, so the extra space is used rather than just stretching inputs. */
@media (min-width: 1100px) {
	.wm-wf-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}