.tc-price-per-m2-wrap {
	margin: 0 0 1em;
	font-size: 0.9em;
	color: #666;
}

/*
 * Sit the area field beside WooCommerce's native quantity box, which this
 * theme (Enfold) floats left and renders as a 43px-tall stepper — match
 * those metrics so the two fields read as one row instead of two styles.
 * The calculator markup renders right after the quantity box in the
 * template, so floating both left puts area to the right of tiles.
 */
.tc-calculator {
	float: left;
	margin: 0 0 0 8px;
}

/* Force the Add to cart button onto its own line below both fields. */
.single_add_to_cart_button {
	clear: both;
}

/*
 * !important: now that this row is a real "div.quantity", Enfold's own
 * tag-qualified rule ("div form.cart div.quantity") ties our selector on
 * class count but wins on tag count, re-adding ~5px of right margin. That
 * shrinks the row just under the 176px the minus+input+plus trio needs
 * (43+90+43), so the inline "plus" button wraps onto its own line.
 */
.tc-calculator .tc-area-row {
	margin: 0 !important;
}

.tc-calculator .tc-area-row label,
.tc-qty-label {
	display: block;
	margin-bottom: 6px;
	font-weight: bold;
}

/* The area row is floated (see above), so clear it to drop the total below. */
.tc-calculator .tc-total-wrap {
	clear: both;
	padding-top: 8px;
}

.tc-calculator .tc-total-price {
	font-weight: bold;
}

/*
 * Puts the per-m² figure on its own line under the per-tile price inside
 * WooCommerce's ".woocommerce-variation-price" box, rather than running on
 * inline right after it — that box's own content (a "span.price") is
 * inline, so without this the two prices would sit side by side.
 */
.woocommerce-variation-price .tc-price-per-m2-wrap {
	display: block;
}

/*
 * !important throughout: Enfold's own base field reset
 * ("#top input[type=number]") carries the real #top ID plus an
 * input[type=number] attribute+tag combo, which out-specifies a plain
 * "#tc_area.tc-area-input" selector (ID+class ties on ID, loses on the
 * extra tag-selector point) and forces display:block/width:100%/padding
 * — which is what was stacking this field full-width instead of sitting
 * compactly next to its +/- buttons like the tiles stepper does.
 */
#tc_area.tc-area-input {
	display: inline !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	width: 90px !important;
	height: 43px !important;
	padding: 0 8px !important;
	line-height: 41px !important;
	font-size: 16px !important;
	text-align: center !important;
	border-radius: 0 !important;
	vertical-align: middle !important;
	margin: 0 !important;
	border: 1px solid #ebebeb !important;
	background: #fff !important;
}

/*
 * Colour filter shown above product listings, on both WooCommerce archives and
 * the Enfold ALB pages. Scoped under #top so it wins against Enfold's own list
 * and link resets without needing !important on every rule.
 */
#top .tc-colour-filter {
	margin: 0 0 25px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ebebeb;
	clear: both;
	overflow: hidden;
}

#top .tc-colour-filter__title {
	display: block;
	margin: 0 0 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 13px;
}

#top .tc-colour-filter__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#top .tc-colour-filter__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .tc-colour-filter__item a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
}

#top .tc-colour-filter__item a:hover {
	border-color: #999;
}

#top .tc-colour-filter__item.is-active a {
	border-color: #222;
	background: #222;
	color: #fff;
}

#top .tc-colour-filter__count {
	opacity: 0.6;
	font-size: 12px;
}

#top .tc-colour-filter__clear {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	text-decoration: underline;
}

/*
 * The colour dropdown reuses Enfold's own sort-param markup, so it inherits the
 * bar styling. Only the submenu width needs adjusting: colour names carrying a
 * count ("Translucent Lacquer (2)") are longer than the Sort and Display labels
 * the default width was sized for, and would otherwise wrap onto two lines.
 */
#top .avia-product-sorting .sort-param-colour ul {
	min-width: 200px;
}