/* !important is used throughout this file on purpose: WooCommerce/Elementor
   themes frequently apply global resets to labels, images, del/ins, and
   list-like elements with fairly high specificity. Without !important here,
   the tier selector can render as unstyled inline text on many themes. */

:root {
	--hb-accent: #d98a72;      /* "Most chosen" header colour */
	--hb-dark: #37414c;        /* "Best choice" header colour */
	--hb-green: #2f7d32;       /* Price colour */
	--hb-border: #e2e2e2;
	--hb-savings-bg: #f2b6a3;
}

.hb-tier-selector {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin: 20px 0 !important;
	width: 100% !important;
	align-items: stretch !important;
}

.hb-tier-box {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	flex: 1 1 0 !important;
	min-width: 150px !important;
	border: 2px solid var(--hb-border) !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	background: #fff !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	font-weight: normal !important;
	line-height: 1.4 !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.hb-tier-box:hover {
	border-color: #b9b9b9 !important;
}

.hb-tier-box.is-active {
	border-color: var(--hb-accent) !important;
	box-shadow: 0 0 0 1px var(--hb-accent) !important;
}

.hb-tier-box.has-badge.is-active {
	border-color: var(--hb-accent) !important;
}

.hb-tier-box.is-highlight.is-active {
	border-color: #f68f76 !important;
	box-shadow: #f68f76 !important;
}

.hb-tier-header {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 62px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: #f68f76 !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 0.9em !important;
	padding: 10px 12px !important;
	text-align: center !important;
	line-height: 1.3 !important;
}

.hb-tier-box.is-highlight .hb-tier-header {
	background: #f68f76 !important;
}

/* Cards without a badge header don't have that ~62px strip at the top, so
   their body content starts higher than the badge cards' content. Add a
   matching spacer so "1 unit" lines up with "2 units" / "3 units" across
   all three cards, like in the reference design. */
.hb-tier-box:not(.has-badge) .hb-tier-body {
	padding-top: 84px !important;
}

.hb-tier-body {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 22px 18px 26px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.hb-tier-icons {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	min-height: 56px !important;
}

.hb-tier-icons img {
	width: 46px !important;
	height: 46px !important;
	max-width: 46px !important;
	object-fit: contain !important;
	display: inline-block !important;
	margin: 0 !important;
	border-radius: 4px !important;
	background: transparent !important;
}

.hb-tier-label {
	font-weight: 700 !important;
	font-size: 1.15em !important;
	display: block !important;
	margin-top: 6px !important;
}

.hb-tier-price {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 3px !important;
	margin-top: 4px !important;
}

.hb-tier-price del {
	color: #999 !important;
	font-size: 0.9em !important;
	text-decoration: line-through !important;
	order: 1 !important;
}

.hb-tier-price ins {
	text-decoration: none !important;
	font-weight: 800 !important;
	font-size: 1.6em !important;
	color: var(--hb-green) !important;
	order: 2 !important;
}

/* WooCommerce wraps the number in nested spans (.woocommerce-Price-amount,
   <bdi>) that themes sometimes colour directly with higher specificity
   than a plain "ins" selector — so we target those explicitly too. */
.hb-tier-price ins,
.hb-tier-price ins .woocommerce-Price-amount,
.hb-tier-price ins .woocommerce-Price-amount bdi,
.hb-tier-price ins bdi {
	color: var(--hb-green) !important;
}

.hb-tier-savings {
	display: inline-block !important;
	margin-top: 6px !important;
	background: var(--hb-savings-bg) !important;
	color: #6b3423 !important;
	font-size: 0.78em !important;
	font-weight: 700 !important;
	padding: 4px 12px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}

/* Hide (but keep functional) the default WooCommerce quantity stepper
   when our selector is present — JS still writes to it on change. Two
   mechanisms: a sibling-selector fallback for standard themes, and a
   JS-applied class (.hb-hidden-quantity) for non-standard markup where
   the quantity field isn't a direct sibling of our selector. */
.hb-tier-selector ~ .quantity,
.hb-hidden-quantity {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 700px) {
	.hb-tier-selector {
		flex-direction: column !important;
	}
	.hb-tier-box {
		min-width: 0 !important;
	}
}