/* Better Homes: variation option blocks (see assets/js/variation-buttons.js). */

/* Poppins, self-hosted (SIL Open Font License). Latin subset. */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-400.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-600.woff2") format("woff2");
}

.bh-vb-select-hidden {
	display: none !important;
}

.bh-vb-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.bh-vb-btn {
	min-height: 44px; /* comfortable touch target */
	padding: 8px 14px;
	border: 1px solid #e3e3e3;
	border-radius: var(--btn-brd-radius, 4px);
	background: #fff;
	color: #242424;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: capitalize; /* first letter of each word in capitals */
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.bh-vb-btn:hover:not(:disabled):not(.is-selected) {
	border-color: #9a9a9a;
}

.bh-vb-btn:focus-visible {
	outline: 2px solid var(--wd-primary-color, #2d1042);
	outline-offset: 2px;
}

.bh-vb-btn.is-selected {
	border-color: var(--wd-primary-color, #2d1042);
	box-shadow: inset 0 0 0 1px var(--wd-primary-color, #2d1042);
	font-weight: 600; /* Poppins 600 */
}

.bh-vb-btn.is-disabled {
	position: relative;
	opacity: .45;
	cursor: not-allowed;
	overflow: hidden;
}

/* Diagonal strike-through for unavailable options. */
.bh-vb-btn.is-disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 1px), #888 50%, transparent calc(50% + 1px));
	pointer-events: none;
}

@media (max-width: 576px) {
	.bh-vb-group {
		gap: 6px;
	}

	.bh-vb-btn {
		flex: 1 1 calc(50% - 6px); /* two per row on phones */
		padding: 8px 10px;
		font-size: 14px;
	}
}