.hafbox-app {
	--hafbox-primary: var(--wd-primary-color, #2f6b4f);
	--hafbox-primary-hover: var(--wd-link-color-hover, var(--wd-primary-color, #24563f));
	--hafbox-secondary: #f2b84b;
	--hafbox-text: var(--wd-text-color, #24312b);
	--hafbox-muted: var(--wd-text-color, #68756f);
	--hafbox-background: var(--bgcolor-gray-200, #f7f9f8);
	--hafbox-surface: var(--bgcolor-white, #fff);
	--hafbox-border: var(--brdcolor-gray-300, #dbe3df);
	--hafbox-success: #26734d;
	--hafbox-warning: #a66300;
	--hafbox-danger: #b42318;
	--hafbox-radius: 16px;
	--hafbox-card-padding: clamp(1.125rem, 3vw, 2rem);
	--hafbox-section-gap: 1.5rem;
	--hafbox-button-gap: .75rem;
	--hafbox-shadow: 0 12px 32px rgba(24, 55, 42, .09);
	box-sizing: border-box;
	width: 100%;
	max-width: 960px;
	margin: 1.5rem auto;
	padding: var(--hafbox-card-padding);
	border: 1px solid var(--hafbox-border);
	border-radius: var(--hafbox-radius);
	background: var(--hafbox-surface);
	color: var(--hafbox-text);
	box-shadow: var(--hafbox-shadow);
	font-family: inherit;
	overflow-wrap: anywhere;
}
.hafbox-app [hidden] { display: none !important; }

.hafbox-app *, .hafbox-app *::before, .hafbox-app *::after { box-sizing: border-box; }
.hafbox-app [hidden] { display: none !important; }
.hafbox-app :focus-visible { outline: 3px solid var(--hafbox-primary); outline-offset: 3px; }
.hafbox-app .button, .hafbox-app button { min-height: 44px; }

.hafbox-app .hbps-addon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
	justify-content: start;
	align-items: stretch;
	gap: 1rem;
	margin-top: 1.25rem;
}

.hafbox-app .hbps-addon-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 250px;
	min-width: 0;
	gap: .75rem;
	padding: 1rem;
	border: 1px solid var(--hafbox-border);
	border-radius: 15px;
	background: var(--hafbox-surface);
	box-shadow: 0 5px 14px rgba(24, 55, 42, .05);
	overflow: hidden;
}

.hafbox-app .hbps-addon-card.is-selected { border-color: var(--hafbox-success); box-shadow: 0 0 0 2px rgba(38, 115, 77, .14); }
.hafbox-app .hbps-addon-card__image { display: grid; width: 100%; max-width: 200px; aspect-ratio: 1; margin: 0 auto; place-items: center; }
.hafbox-app .hbps-addon-card__image img { display: block; width: 100%; height: 100%; max-width: 200px; max-height: 200px; object-fit: contain; border-radius: 10px; }
.hafbox-app .hbps-addon-card h3, .hafbox-app .hbps-addon-card h5, .hafbox-app .hbps-addon-card p { margin: 0; overflow-wrap: anywhere; }
.hafbox-app .hbps-addon-card h3, .hafbox-app .hbps-addon-card h5 { font-size: 1.05rem; line-height: 1.35; }
.hafbox-app .hbps-addon-card__price { color: var(--hafbox-muted); }
.hafbox-app .hbps-addon-card form { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: auto; padding-top: .35rem; }
.hafbox-app .hbps-addon-card form .button { width: 100%; }
.hafbox-app .hbps-badge { display: inline-flex; align-items: center; width: fit-content; gap: .25rem; margin: 0; padding: .25rem .6rem; border-radius: 999px; font-size: .85em; font-weight: 600; }
.hafbox-app .hbps-badge--success { background: #e9f5ef; color: var(--hafbox-success); }
.hafbox-app .hbps-addon-selection__checkout { margin-top: 1.5rem; }
.hafbox-app .hbps-addon-selection__summary { margin-top:1.25rem; padding:1rem 1.125rem; border:1px solid var(--hafbox-border); border-radius:12px; background:var(--hafbox-background); }
.hafbox-app .hbps-addon-selection__summary p { margin:.4rem 0 0; overflow-wrap:anywhere; }
.hafbox-app .hbps-addon-selection__summary > p:first-child { margin-top:0; }

.hafbox-app.hbps-recommendation-result {
	max-width: 840px;
	padding: var(--hafbox-card-padding);
	border-radius: 18px;
}
.hafbox-app .hbps-success-icon { margin-bottom: .8rem; }
.hafbox-app.hbps-recommendation-result > h2 { margin: 0 0 .8rem; line-height: 1.25; }
.hafbox-app.hbps-recommendation-result > p { margin: 0 0 var(--hafbox-section-gap); line-height: 1.6; }
.hafbox-app .hbps-recommendation-program { display: grid; gap: .65rem; padding: clamp(1.125rem, 2.5vw, 1.5rem); border: 1px solid var(--hafbox-border); border-radius: 15px; background: var(--hafbox-background); }
.hafbox-app .hbps-recommendation-program h3, .hafbox-app .hbps-recommendation-program p { margin: 0; }
.hafbox-app .hbps-recommendation-program__price-period { display: flex; flex-wrap: wrap; gap: .45rem 1rem; align-items: baseline; }
.hafbox-app .hbps-recommendation-program__fixed-price { color: var(--hafbox-muted); font-size: .94em; }
.hafbox-app .hbps-recommendation-products { display: grid; gap: var(--hafbox-section-gap); margin-top: var(--hafbox-section-gap); }
.hafbox-app .hbps-recommendation-products > section { display: grid; gap: .75rem; }
.hafbox-app .hbps-recommendation-products > section > h3 { margin: 0; font-size: 1.15rem; }
.hafbox-app .hbps-recommendation-products__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.hafbox-app .hbps-recommendation-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; min-width: 0; padding: clamp(1.125rem, 2.5vw, 1.5rem); border: 1px solid var(--hafbox-border); border-radius: 14px; background: var(--hafbox-background); }
.hafbox-app .hbps-recommendation-product img { display: block; width: 80px; height: 80px; max-width: 100%; object-fit: contain; }
.hafbox-app .hbps-recommendation-product h4, .hafbox-app .hbps-recommendation-product p { margin: 0; overflow-wrap: anywhere; }
.hafbox-app .hbps-recommendation-product h4 { font-size: 1.05rem; line-height: 1.35; }
.hafbox-app .hbps-recommendation-product__details { display: flex; flex-wrap: wrap; gap: .45rem 1rem; color: var(--hafbox-muted); }
.hafbox-app .hbps-recommendation-product__reason { color: var(--hafbox-muted); font-size: .94em; line-height: 1.5; }
.hafbox-app .hbps-recommendation-actions { display: flex; flex-wrap: wrap; gap: var(--hafbox-button-gap); margin-top: 1.5rem; }
.hafbox-app .hbps-recommendation-actions .button { margin: 0; padding-inline: 1.15rem; }
.hafbox-app .hbps-test-order-badge { display: inline-flex; width: fit-content; margin: 0 0 1rem; padding: .3rem .65rem; border: 1px solid #d4b15a; border-radius: 999px; background: #fff8e1; color: #6f5100; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.hafbox-app .hbps-status-block { margin-top: 1.25rem; padding: 1rem 1.125rem; border: 1px solid var(--hafbox-border); border-radius: 12px; background: var(--hafbox-background); }
.hafbox-app .hbps-result-hero { margin-bottom: var(--hafbox-section-gap); }
.hafbox-app .hbps-result-hero h2,
.hafbox-app .hbps-result-hero p,
.hafbox-app .hbps-subscription-explainer h3,
.hafbox-app .hbps-subscription-explainer p,
.hafbox-app .hbps-future-boxes h3,
.hafbox-app .hbps-future-boxes p { margin: 0; }
.hafbox-app .hbps-result-hero p { margin-top: .75rem; color: var(--hafbox-muted); line-height: 1.6; }
.hafbox-app .hbps-eyebrow { color: var(--hafbox-primary); font-size: .82rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.hafbox-app .hbps-program-price { color: var(--hafbox-primary); font-size: clamp(1.35rem, 4vw, 1.8rem); }
.hafbox-app .hbps-subscription-explainer,
.hafbox-app .hbps-future-boxes { display: grid; gap: .8rem; margin-top: var(--hafbox-section-gap); padding: clamp(1.125rem, 2.5vw, 1.5rem); border: 1px solid var(--hafbox-border); border-radius: 15px; background: var(--hafbox-surface); }
.hafbox-app .hbps-subscription-explainer ul { display: grid; gap: .55rem; margin: 0; padding-inline-start: 1.25rem; }
.hafbox-app .hbps-monthly-invoice { padding: .8rem 1rem; border-radius: 10px; background: #e9f5ef; color: var(--hafbox-success); }
.hafbox-app .hbps-recommendation-product__why { display: grid; gap: .3rem; padding-top: .45rem; border-top: 1px solid var(--hafbox-border); }
.hafbox-app .hbps-recommendation-product__why > strong { font-size: .9rem; }
.hafbox-app .hbps-replacement { margin-top: .25rem; }
.hafbox-app .hbps-replacement summary { min-height: 44px; padding: .65rem 0; color: var(--hafbox-primary); font-weight: 650; cursor: pointer; }
.hafbox-app .hbps-recommendation-product__replace { display: grid; gap: .65rem; padding-top: .5rem; }
.hafbox-app .hbps-recommendation-product__replace label { display: grid; gap: .4rem; }
.hafbox-app .hbps-recommendation-product__replace select { width: 100%; min-height: 44px; }
.hafbox-app .hbps-recommendation-actions { display: grid; gap: .75rem; padding: 1.25rem; border-radius: 15px; background: var(--hafbox-background); }
.hafbox-app .hbps-recommendation-actions p { margin: 0; }
.hafbox-app .hbps-recommendation-actions form { margin: 0; }
.hafbox-app .hbps-primary-cta { width: 100%; min-height: 52px; font-weight: 750; text-align: center; }
.hafbox-app .hbps-test-mode { padding: .9rem 1rem; border: 1px solid #d4b15a; border-radius: 10px; background: #fff8e1; color: #6f5100; }
.hafbox-app .hbps-test-mode p { margin: .3rem 0 0; }
.hafbox-app .hbps-recommendation-account { display: grid; gap: .65rem; margin-top: 1.25rem; padding: 1.125rem; border: 1px solid var(--hafbox-border); border-radius: 14px; background: var(--hafbox-surface); }
.hafbox-app .hbps-recommendation-account h3, .hafbox-app .hbps-recommendation-account p { margin: 0; }
.hafbox-app .hbps-recommendation-account__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.hafbox-app .hbps-recommendation-account__continue { color: var(--hafbox-muted); font-size: .94em; }
.hafbox-app .hbps-recommendation-account .button { min-height: 44px; }
.hafbox-app .hbps-offer-summary {
	display: grid;
	gap: .75rem;
	padding: clamp(1.125rem, 2.5vw, 1.5rem);
	border: 1px solid var(--hafbox-border);
	border-radius: 15px;
	background: var(--hafbox-background);
}
.hafbox-app .hbps-offer-summary h3,
.hafbox-app .hbps-offer-summary p,
.hafbox-app .hbps-offer-prices { margin: 0; }
.hafbox-app .hbps-offer-prices {
	display: grid;
	gap: .35rem;
	color: var(--hafbox-text);
}
.hafbox-app .hbps-subscription-notice {
	padding-top: .75rem;
	border-top: 1px solid var(--hafbox-border);
	line-height: 1.55;
}
.hafbox-app .hbps-recommendation-result--direct .hbps-recommendation-products__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hafbox-app .hbps-recommendation-product__image {
	display: grid;
	width: 100%;
	min-height: 120px;
	place-items: center;
}
.hafbox-app .hbps-recommendation-product__image img {
	width: min(160px, 100%);
	height: 140px;
	object-fit: contain;
}
.hafbox-app .hbps-component-type {
	color: var(--hafbox-primary);
	font-size: .82rem;
	font-weight: 750;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.hafbox-app .hbps-availability { font-weight: 650; }
.hafbox-app .hbps-product-information--offer {
	min-width: 0;
	margin-top: .25rem;
	border-top: 1px solid var(--hafbox-border);
}
.hafbox-app .hbps-product-information--offer summary {
	min-height: 44px;
	padding: .7rem 0;
	color: var(--hafbox-primary);
	font-weight: 700;
	cursor: pointer;
}
.hafbox-app .hbps-product-information--offer dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .25rem;
	margin: 0;
}
.hafbox-app .hbps-product-information--offer dt { margin-top: .45rem; font-weight: 700; }
.hafbox-app .hbps-product-information--offer dd,
.hafbox-app .hbps-product-information--offer p { min-width: 0; margin: 0; color: var(--hafbox-muted); overflow-wrap: anywhere; }
.hafbox-app .hbps-secondary-action { margin: 1rem 0 0; }
.hafbox-app .hbps-secondary-action .button { min-height: 44px; }
.hafbox-app [data-hbps-offer-cta] button[disabled] { cursor: wait; opacity: .7; }
.hafbox-app .hbps-new-selection { width: fit-content; padding: .25rem .55rem; border-radius: 999px; background: #e9f5ef; color: var(--hafbox-success); font-size: .78rem; font-weight: 750; }
.hafbox-app .hbps-product-rejection { min-width: 0; margin-top: .35rem; border-top: 1px solid var(--hafbox-border); }
.hafbox-app .hbps-product-rejection summary { min-height: 44px; padding: .7rem 0; color: var(--hafbox-primary); font-weight: 650; cursor: pointer; }
.hafbox-app .hbps-product-rejection form,
.hafbox-app .hbps-product-rejection fieldset,
.hafbox-app .hbps-rejection-reasons { display: grid; min-width: 0; gap: .65rem; }
.hafbox-app .hbps-product-rejection form { padding-top: .35rem; }
.hafbox-app .hbps-product-rejection fieldset { margin: 0; padding: 0; border: 0; }
.hafbox-app .hbps-product-rejection legend { margin-bottom: .35rem; font-weight: 700; }
.hafbox-app .hbps-rejection-reasons label { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; min-height: 44px; gap: .55rem; margin: 0; cursor: pointer; }
.hafbox-app .hbps-rejection-reasons input { width: 20px; height: 20px; margin: 0; }
.hafbox-app .hbps-rejection-note { display: grid; min-width: 0; gap: .4rem; font-weight: 650; }
.hafbox-app .hbps-rejection-note textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; resize: vertical; }
.hafbox-app .hbps-health-guidance { padding: .8rem; border-radius: 10px; background: #fff8e1; color: #5c4300; }
.hafbox-app .hbps-health-guidance p { margin: 0 0 .65rem; }
.hafbox-app .hbps-health-guidance .button,
.hafbox-app .hbps-replacement-submit { min-height: 44px; }
.hafbox-app .hbps-replacement-submit { justify-self: start; background: transparent; color: var(--hafbox-primary); }
.hafbox-app .hbps-replacement-submit[disabled] { cursor: wait; opacity: .7; }

@media (max-width: 540px) {
	.hafbox-app { margin: .75rem auto; padding: 1.125rem; border-radius: 12px; }
	.hafbox-app .hbps-addon-grid { grid-template-columns: minmax(0, 1fr); }
	.hafbox-app .hbps-addon-card { max-width: none; }
	.hafbox-app .hbps-addon-card__image, .hafbox-app .hbps-addon-card__image img { max-width: min(200px, 100%); }
	.hafbox-app .hbps-recommendation-products__grid { grid-template-columns: minmax(0, 1fr); }
	.hafbox-app .hbps-recommendation-actions { flex-direction: column; }
	.hafbox-app .hbps-recommendation-actions .button, .hafbox-app .hbps-addon-selection__checkout .button { width: 100%; }
	.hafbox-app .hbps-recommendation-product { padding: 1rem; }
	.hafbox-app .hbps-recommendation-result--direct .hbps-recommendation-products__grid { grid-template-columns: minmax(0, 1fr); }
	.hafbox-app .hbps-secondary-action .button { width: 100%; text-align: center; }
	.hafbox-app .hbps-recommendation-account__actions .button { flex: 1 1 150px; text-align: center; }
	.hafbox-app .hbps-health-guidance .button,
	.hafbox-app .hbps-replacement-submit { width: 100%; text-align: center; }
}