@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.education-page-taxonomy-filter .e-filter-item[data-filter="press"] {
	display: none !important;
}


.education-page-loop-grid-ms .image-article-loop-item-ms {
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 32px;
}

.education-page-loop-grid-ms .image-article-loop-item-ms .elementor-widget-container,
.education-page-loop-grid-ms .image-article-loop-item-ms a {
	width: 100%;
	height: 100%;
	display: block;
}

.education-page-loop-grid-ms .image-article-loop-item-ms img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

input#input_1_1,
input#input_1_3,
input#input_1_4,
input#input_1_5,
textarea#input_1_6 {
	border-radius: 8px;
	padding-top: 32px;
	padding-right: 24px;
	padding-bottom: 32px;
	padding-left: 24px;
	border: 1px solid #EEEEEE;
	color: #090909;
	box-shadow: none;
}

input#input_1_1::placeholder,
input#input_1_3::placeholder,
input#input_1_4::placeholder,
input#input_1_5::placeholder,
textarea#input_1_6::placeholder {
	font-family: Montserrat;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0px;
	text-transform: uppercase;
	/* These placeholders stand in for the missing field labels, so they have to
	   be legible. #888 was 3.5:1 on white; this is 5.3:1 (WCAG AA needs 4.5:1)
	   while staying lighter than the typed value. */
	color: #6B6B6B;
}

input#gform_submit_button_1 {
	border-radius: 8px;
	padding: 18px 60px 18px 24px;
	background: #0C1F3D url('https://betterbody360.ropstam.dev/wp-content/uploads/2026/06/arrow-right.svg') no-repeat right 24px center;
	background-size: 20px 20px;
	color: #FFFFFF;
	font-family: Montserrat;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	text-transform: uppercase;
	border: none;
}

input#gform_submit_button_1:hover {
	background: #090909 url('https://betterbody360.ropstam.dev/wp-content/uploads/2026/06/arrow-right.svg') no-repeat right 24px center;
	color: #FFFFFF;
}

/* ---- Contact form (ID 1) — submission confirmation ----
   Same vocabulary as the intake form's .bb360-submitted screen: white card,
   #EEEEEE hairline border, navy/green accents, Montserrat. */
.gform_confirmation_wrapper_1 {
	display: flex;
	justify-content: center;
}

.gform_confirmation_wrapper_1 .gform_confirmation_message,
.gform_confirmation_message_1 {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 720px;
	padding: 56px 32px 48px;
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 24px;
	box-shadow: 0 18px 48px rgba(12, 31, 61, 0.06);
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: 0;
	color: #090909;
	animation: bb360-confirm-in 0.45s ease-out both;
}

/* Navy hairline across the top of the card. */
.gform_confirmation_message_1::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #0C1F3D 0%, #4B83D9 100%);
}

/* Green check badge above the copy. Inline SVG — no extra request, and it
   survives the CSP on any page this stylesheet is loaded into. */
.gform_confirmation_message_1::before {
	content: "";
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: #07BC341A url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%2307BC34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center;
	background-size: 32px 32px;
}

@keyframes bb360-confirm-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.col1-fl {
	position: relative;
	overflow: hidden;
}

.col1-fl::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(12, 31, 61, 0) 80%, rgba(12, 31, 61, 0.85) 95%, #0C1F3D 100%);
	pointer-events: none;
}

/* Active/Open accordion item - dark navy background */
.faqs-section-ms .e-n-accordion-item[open] {
	background-color: #0C1F3D;
	border-radius: 24px;
	padding: 20px 0px 40px 20px;
	gap: 10px;
}

/* Active title text - white */
.faqs-section-ms .e-n-accordion-item[open] .e-n-accordion-item-title {
	color: #ffffff;
	background-color: #0C1F3D !important;
	border-radius: 8px 8px 0 0;
}

.faqs-section-ms .e-n-accordion-item[open] .e-n-accordion-item-title-text {
	color: #ffffff;
}

/* Active content area - dark navy, white text */
.faqs-section-ms .e-n-accordion-item[open]>div,
.faqs-section-ms .e-n-accordion-item[open] .elementor-widget-text-editor,
.faqs-section-ms .e-n-accordion-item[open] .elementor-widget-text-editor p {
	background-color: #0C1F3D;
	color: #ffffff;
	border-radius: 8px;
	border: none !important;
}

.faqs-section-ms .e-n-accordion-item[open] .e-n-accordion-item-title {
	padding-bottom: 0;
	border: none !important;
	padding-left: 10px;
}

.single-post h2 {
	font-family: 'Lusitana', sans-serif;
	font-size: 22px;
}

.single-post h3 {
	font-family: 'Lusitana', sans-serif;
	font-size: 20px;
}

.footer-sub-heading-ms {
	min-width: 178px !important;
}

.col1-fl-products {
	position: relative;
	overflow: hidden;
}

.col1-fl-products::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(248, 244, 236, 0) 80%, rgba(248, 244, 236, 0.6) 90%, #F8F4EC 100%);
	pointer-events: none;
	z-index: 2;
}

/* ---- Recommended Ribbon on Loop Grid Product ---- */
.product_tag-recommended-product .col1-fl-products {
	position: relative;
	overflow: hidden;
}

.product_tag-recommended-product .col1-fl-products::before {
	content: "RECOMMENDED\A PRODUCT" !important;
	white-space: pre !important;
	position: absolute !important;
	top: 40px !important;
	left: -75px !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 20 !important;
	width: 300px !important;
	height: auto !important;
	background: #EA5B04 !important;
	color: #FFFFFF !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	line-height: 28px !important;
	letter-spacing: 0.5px !important;
	text-align: center !important;
	text-transform: uppercase !important;
	transform: rotate(-45deg) !important;
	pointer-events: none !important;
	padding: 12px 0 !important;
	display: block !important;
	min-height: 0 !important;
	max-height: none !important;
	min-width: 0 !important;
	max-width: none !important;
	border-radius: 0px;
}

/* Add arrow icon only to submenu items that have a child submenu */
.header-menu-ms .elementor-nav-menu--dropdown .elementor-sub-item {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 100px;
	padding-right: 30px !important;
}

.header-menu-ms .elementor-nav-menu--dropdown .elementor-sub-item.has-submenu::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url('https://betterbody360.ropstam.dev/wp-content/uploads/2026/06/dropdown-menu-icon.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-menu-ms .elementor-nav-menu--dropdown .elementor-sub-item.has-submenu:hover::after {
	opacity: 1;
	transform: translateX(2px);
}

.header-menu-ms .elementor-nav-menu--dropdown a {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Dropdown item text size. Covers both header menus (main nav and the
   account/brand-partner nav), every nesting level, and the mobile drawer —
   which reuses .elementor-nav-menu--dropdown for top-level items too.
   !important because Elementor writes per-widget font sizes into its own
   generated stylesheet. */
.header-menu-ms .elementor-nav-menu--dropdown a.elementor-sub-item,
.header-menu-ms .elementor-nav-menu--dropdown a.elementor-item {
	font-size: 16px !important;
}

/* Hide sub-arrow on submenu items only */
.header-menu-ms .elementor-nav-menu--dropdown .elementor-sub-item .sub-arrow {
	display: none !important;
}

/* Add left margin to push child submenu away from parent */
.header-menu-ms .sub-menu .elementor-nav-menu--dropdown {
	left: 20px !important;
}

#gform_page_4_1,
.bb360-fullwidth {
	border: 1px solid #EEEEEE;
	background: #FFF;
	border-radius: 40px;
	padding: 24px;
	width: 1100px;
}

/* Hide form title and progress bar on all steps */
#gform_4 .gform_heading,
#gf_progressbar_wrapper_4 {
	display: none !important;
}

.left-column-child-ms {
	width: 100%;
	justify-content: center;
	align-items: center;
}

#gform_wrapper_4 .gform_heading .gform_title {
	display: none;
}

div#field_4_1 {
	justify-content: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}

div#field_4_1 svg {
	margin-bottom: 20px;
}

div#field_4_1 h2,
div#field_4_9 h2,
div#field_4_16 h2,
div#field_4_18 h2,
div#field_4_27 h2,
div#field_4_30 h2,
div#field_4_35 h2,
div#field_4_39 h2,
div#field_4_44 h2,
div#field_4_47 h2,
div#field_4_54 h2,
div#field_4_59 h2 {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 62px;
	text-transform: capitalize;
	color: #090909;
}

div#field_4_1 p,
div#field_4_9 p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0%;
	text-align: center;
	color: #888888;
	margin-bottom: 30px;
}

div#field_4_9 p {
	text-align: left;
}

div#field_4_1 ul {
	list-style: none;
	margin-bottom: 80px;
	padding: 0px;
}

fieldset#field_4_52,
fieldset#field_4_62 {
	margin-bottom: 80px;
}

div#field_4_1 ul li {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	color: #090909;
	padding: 10px;
}

/* Full-width form area on step 2 and onwards (toggled via JS) */
.shortcode-multistep-beluga-form-ms.bb360-fullwidth {
	width: 100% !important;
}

/* Step indicator ([bb360_steps]) */
.bb360-steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 1620px;
	max-width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #EEEEEE;
}

.bb360-steps-track {
	width: 100%;
	height: 4px;
	background: #EEEEEE;
	overflow: hidden;
}

.bb360-steps-fill {
	display: block;
	height: 100%;
	width: 0;
	background: #0C1F3D;
	transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gravity Forms renders each step server-side, so the swap can lag. We can't
   speed that up — but we can stop the new step from snapping in. Fade + lift
   it instead so the arrival reads as smooth rather than a jump. */
#gform_wrapper_4 .gform_page,
#gform_wrapper_5 .gform_page {
	animation: bb360-step-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes bb360-step-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bb360-steps-label {
	transition: opacity 0.3s ease;
}

.bb360-steps-label {
	font-family: Montserrat;
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-align: center;
	color: #0C1F3D;
}

input#gform_next_button_4_3 {
	background: #0C1F3D;
	width: 100%;
	color: #FFF;
	box-shadow: 0px 0px 50px 0px #FFFFFF66;
	border-radius: 8px;
	padding: 12px 32px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
}

div#gform_page_4_2 label,
legend.gfield_label.gform-field-label,
label.gfield_label.gform-field-label {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 0%;
	color: #090909;
}

div#gform_page_4_2 label span.gfield_required.gfield_required_text,
legend.gfield_label.gform-field-label span.gfield_required.gfield_required_text,
.gfield_required .gfield_required_text {
	display: none;
}

/* :not(checkbox):not(radio) is load-bearing, not tidiness. This rule used to
   read `#gform_wrapper_4 input` and hit EVERY input in the form — including the
   choice controls. Pages 5-12 draw their own 24x24 boxes and override it, but
   the Yes/No radios on pages 2 and 3 have no such block, so those native radios
   were being handed 24px of padding and a 24px font: a bloated, misaligned
   control next to a text label. Anything typed into keeps the design;
   anything ticked is left to the choice-control rules below. */
#gform_page_4_2 textarea,
#gform_page_4_10 textarea,
#gform_wrapper_4 input:not([type="checkbox"]):not([type="radio"]) {
	border: 1px solid #EEEEEE;
	backdrop-filter: blur(4px);
	border-radius: 8px;
	padding: 24px;
	font-family: Montserrat;
	font-weight: 400;
	/* Scales with the viewport instead of sitting at 24px until the 768px
	   breakpoint catches it — the awkward width is the tablet range between. */
	font-size: clamp(16px, 1.6vw, 24px);
	line-height: 100%;
	letter-spacing: 0%;
}

#gform_wrapper_4 #field_4_28 input {
	padding: 14px;
}

/* Cursor pointer on all intake form fields */
#gform_wrapper_4 input,
#gform_wrapper_4 textarea,
#gform_wrapper_4 select,
#gform_wrapper_4 .gchoice,
#gform_wrapper_4 .gchoice label,
#gform_wrapper_4 .gfield_radio label,
#gform_wrapper_4 .gfield_checkbox label {
	cursor: pointer;
}

#gform_page_4_2 div#input_4_14,
#gform_page_4_3 div#input_4_17 {
	display: flex;
	flex-direction: row;
	gap: 18px;
}

#gform_page_4_2 .gchoice.gchoice_4_14_0,
#gform_page_4_2 .gchoice.gchoice_4_14_1,
#gform_page_4_3 .gchoice.gchoice_4_17_0,
#gform_page_4_3 .gchoice.gchoice_4_17_1 {
	display: flex;
	align-items: center;
	gap: 20px;
	border: 1px solid #EEEEEE;
	padding: 18px 24px;
	border-radius: 8px;
	backdrop-filter: blur(4px);
}

/* Yes / No (and Male/Female) choice label text */
#gform_page_4_2 .gfield_radio label,
#gform_page_4_3 .gfield_radio label {
	margin: 0;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #090909;
}

div#field_4_15 {
	display: flex;
	gap: 10px;
}

div#field_4_15 svg {
	margin-top: 4px;
}

div#field_4_15 {
	display: flex;
	gap: 10px;
}

div#field_4_15 svg {
	margin-top: 5px;
}

div#field_4_15 p {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
}

/* "Additional Information" note box (icon + text) */
div#field_4_16>div {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #ECF3FF;
	padding: 14px;
	border-radius: 8px;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
}

div#field_4_16>div svg {
	flex-shrink: 0;
	margin-top: 6px;
}

div#field_4_16>div p {
	margin: 0;
}

/* Page 1: pre-intake instructions note box (field_4_75 / field_5_38) */
div#field_4_75,
div#field_5_38 {
	background: #ECF3FF;
	border-radius: 8px;
	padding: 20px 24px;
	margin-top: 24px;
	margin-bottom: 24px;
}

div#field_4_75 .bb360-intro-note p,
div#field_5_38 .bb360-intro-note p {
	margin: 0 0 16px;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
}

div#field_4_75 .bb360-intro-note p:last-child,
div#field_5_38 .bb360-intro-note p:last-child {
	margin-bottom: 0;
}

input#gform_previous_button_4_5,
input#gform_next_button_4_5,
#gform_previous_button_4_7,
#gform_next_button_4_7,
#gform_wrapper_4 .gform_previous_button,
#gform_wrapper_4 .gform_next_button,
#gform_wrapper_4 .gform_button {
	box-shadow: 0px 0px 50px 0px #FFFFFF66;
	border: 1px solid #0C1F3D;
	padding: 16px 50px;
	border-radius: 8px;
	font-family: Montserrat;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	color: #0C1F3D;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

input#gform_next_button_4_5,
#gform_next_button_4_7,
#gform_wrapper_4 .gform_next_button,
#gform_wrapper_4 .gform_button {
	background: #0C1F3D;
	color: #FFF;
}

/* Filled buttons — darken + subtle lift on hover */
input#gform_next_button_4_5:hover,
#gform_next_button_4_7:hover,
#gform_wrapper_4 .gform_next_button:hover,
#gform_wrapper_4 .gform_button:hover {
	background: #000000;
	color: #FFF;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(12, 31, 61, 0.22);
}

/* Outlined previous/back button — fill on hover */
#gform_previous_button_4_7:hover,
#gform_wrapper_4 .gform_previous_button:hover {
	background: #0C1F3D;
	color: #FFF;
	transform: translateY(-1px);
}

#gform_page_4_2 .gform-page-footer.gform_page_footer.top_label,
#gform_page_4_3 .gform-page-footer.gform_page_footer.top_label,
#gform_wrapper_4 .gform-page-footer.gform_page_footer.top_label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

span#gform_ajax_spinner_4 {
	display: none;
}

div#field_4_25 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
	margin-bottom: 80px;
}

/* BMI result box (field_4_24) */
.bb360-bmi-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background: #ECF3FF;
	padding: 24px;
	border-radius: 8px;
}

.bb360-bmi-label {
	display: block;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
}

.bb360-bmi-value {
	display: block;
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 62px;
	letter-spacing: 0%;
	text-transform: capitalize;
	color: #090909;
}

.bb360-bmi-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #07BC341A;
	padding: 14px;
	border-radius: 100px;
}

.bb360-bmi-status svg {
	flex-shrink: 0;
}

.bb360-bmi-status span {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: right;
	vertical-align: middle;
	color: #090909;
	white-space: nowrap;
}

div#field_4_22 label {
	visibility: hidden;
}

/* ---- Page 5: "Do any of these apply to you?" checkbox grid ---- */
#gform_page_4_5 #input_4_28 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

#gform_page_4_5 .gfield_checkbox .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	border: 1px solid #EEEEEE;
	padding: 18px 24px;
	border-radius: 8px;
	backdrop-filter: blur(4px);
}

/* Custom 24x24 checkbox */
#gform_page_4_5 .gfield-choice-input {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid #0C1F3D;
	border-radius: 8px;
	background: #FFF;
	cursor: pointer;
	position: relative;
}

#gform_page_4_5 .gfield-choice-input:focus,
#gform_page_4_5 .gfield-choice-input:focus-visible {
	outline: none;
	box-shadow: none;
}

#gform_page_4_5 .gfield-choice-input:checked {
	background-color: #0C1F3D;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 4L5.5 10L2.5 7' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

/* Hide the pseudo checkmark and any theme-drawn check; the white check
   is drawn via background-image above. */
#gform_page_4_5 .gfield-choice-input:checked::after,
#gform_page_4_5 .gfield-choice-input:checked::before {
	display: none !important;
}

#gform_page_4_5 .gfield_checkbox label {
	margin: 0;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #090909;
}

/* ---- Pages 6, 7 & 8: medication / timing choices ---- */
#gform_page_4_6 #input_4_32,
#gform_page_4_7 #input_4_36,
#gform_page_4_8 #input_4_41 {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#gform_page_4_6 .gfield_checkbox .gchoice,
#gform_page_4_7 .gfield_checkbox .gchoice,
#gform_page_4_8 .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	border: 1px solid #EEEEEE;
	padding: 16px 24px;
	border-radius: 8px;
	backdrop-filter: blur(4px);
}

/* Round 24x24 selector */
#gform_page_4_6 .gfield-choice-input,
#gform_page_4_7 .gfield-choice-input,
#gform_page_4_8 .gfield-choice-input {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid #0C1F3D;
	border-radius: 2000px;
	background: #FFF;
	cursor: pointer;
	position: relative;
}

#gform_page_4_6 .gfield-choice-input:focus,
#gform_page_4_6 .gfield-choice-input:focus-visible,
#gform_page_4_7 .gfield-choice-input:focus,
#gform_page_4_7 .gfield-choice-input:focus-visible,
#gform_page_4_8 .gfield-choice-input:focus,
#gform_page_4_8 .gfield-choice-input:focus-visible {
	outline: none;
	box-shadow: none;
}

#gform_page_4_6 .gfield-choice-input:checked,
#gform_page_4_7 .gfield-choice-input:checked,
#gform_page_4_8 .gfield-choice-input:checked {
	background-color: #0C1F3D;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 4L5.5 10L2.5 7' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

#gform_page_4_6 .gfield-choice-input:checked::after,
#gform_page_4_6 .gfield-choice-input:checked::before,
#gform_page_4_7 .gfield-choice-input:checked::after,
#gform_page_4_7 .gfield-choice-input:checked::before,
#gform_page_4_8 .gfield-choice-input:checked::after,
#gform_page_4_8 .gfield-choice-input:checked::before {
	display: none !important;
}

#gform_page_4_6 .gfield_checkbox label,
#gform_page_4_7 .gfield_checkbox label,
#gform_page_4_8 .gfield_radio label {
	margin: 0;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #090909;
}

/* Page 8: select dropdown */
#gform_page_4_8 #input_4_40 {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	box-sizing: border-box;
	height: 63px;
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	padding: 0 24px;
	backdrop-filter: blur(4px);
	background-color: #FFF;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	letter-spacing: 0%;
	color: #090909 !important;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%234B83D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 13px 8px;
	display: flex;
	align-items: center;
}

#gform_page_4_8 #input_4_40 option {
	color: #090909 !important;
	opacity: 1 !important;
}

/* Note boxes (icon + text): pages 5, 6, 7 & 8 */
div#field_4_29,
div#field_4_33,
div#field_4_37,
div#field_4_42 {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #ECF3FF;
	padding: 14px;
	border-radius: 8px;
	margin-bottom: 80px;
}

div#field_4_29 svg,
div#field_4_33 svg,
div#field_4_37 svg,
div#field_4_42 svg {
	flex-shrink: 0;
	margin-top: 6px;
}

div#field_4_29 p,
div#field_4_33 p,
div#field_4_37 p,
div#field_4_42 p {
	margin: 0;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
}

/* ---- Page 9: file upload drag & drop zone ---- */
.bb360-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 240px;
	padding: 24px;
	text-align: center;
	cursor: pointer;
	border-radius: 8px;
	border: 1px dashed #0C1F3D;
	background: #0C1F3D0D;
	backdrop-filter: blur(4px);
}

.bb360-upload.bb360-upload--drag {
	background: #0C1F3D1A;
}

.bb360-upload svg {
	flex-shrink: 0;
}

.bb360-upload-text {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	text-align: center;
	color: #090909;
}

.bb360-upload-browse {
	font-family: Montserrat;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: underline;
	color: #090909;
	cursor: pointer;
}

.bb360-upload-filename {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #0C1F3D;
}

/* Hide the native file inputs (kept functional, triggered by the zone) */
.ginput_container_fileupload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Hide the default max-file-size rule lines on all upload fields */
.gform_fileupload_rules {
	display: none;
}

/* Page 9: keep "Supported formats" description, styled */
#gfield_description_4_45 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	text-align: center;
	color: #090909;
}

/* Page 11: the "Upload Photo" descriptions are rendered inside the zone */
#gfield_description_4_55,
#gfield_description_4_56 {
	display: none;
}

/* Page 11: "Accepted IDs" note box */
div#field_4_57 {
	background: #ECF3FF;
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 80px;
}

div#field_4_57 h3 {
	margin: 0;
	font-family: Montserrat;
	font-weight: 600;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
}

div#field_4_57 p {
	margin: 0;
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	text-transform: capitalize;
	color: #090909;
}

/* ---- Page 10: Side Effects & Preferences ---- */
/* Yes / No (field_4_49): inline boxes */
#gform_page_4_10 #input_4_49 {
	display: flex;
	flex-direction: row;
	gap: 18px;
}

/* Goal (field_4_51) & symptoms (field_4_52): 2-column grid */
#gform_page_4_10 #input_4_51,
#gform_page_4_10 #input_4_52 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* Choice cards */
#gform_page_4_10 .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	border: 1px solid #EEEEEE;
	padding: 16px 24px;
	border-radius: 8px;
	backdrop-filter: blur(4px);
}

#gform_page_4_10 #input_4_49 .gchoice {
	padding: 24px;
}

/* Selector base (radios + checkbox style) */
#gform_page_4_10 .gfield-choice-input {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid #0C1F3D;
	background: #FFF;
	cursor: pointer;
	position: relative;
}

/* Round for radios (Yes/No, goal); square for symptoms */
#gform_page_4_10 #input_4_49 .gfield-choice-input,
#gform_page_4_10 #input_4_51 .gfield-choice-input {
	border-radius: 2000px;
}

#gform_page_4_10 #input_4_52 .gfield-choice-input {
	border-radius: 8px;
}

#gform_page_4_10 .gfield-choice-input:focus,
#gform_page_4_10 .gfield-choice-input:focus-visible {
	outline: none;
	box-shadow: none;
}

#gform_page_4_10 .gfield-choice-input:checked {
	background-color: #0C1F3D;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 4L5.5 10L2.5 7' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

#gform_page_4_10 .gfield-choice-input:checked::after,
#gform_page_4_10 .gfield-choice-input:checked::before {
	display: none !important;
}

#gform_page_4_10 .gfield_radio label {
	margin: 0;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #090909;
}

/* ---- Page 12: Consent & Acknowledgements ---- */
/* Accordion */
#field_4_61 .accordion {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#field_4_61 .accordion-item {
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	overflow: hidden;
	background: #FFF;
	backdrop-filter: blur(4px);
}

#field_4_61 .accordion-header {
	margin: 0;
}

#field_4_61 .accordion-button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 24px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: 0%;
	color: #090909;
	/* Long titles must wrap instead of pushing the chevron off the edge
	   (the .accordion-item clips overflow). */
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Let the title (raw text or a wrapping span) shrink and wrap */
#field_4_61 .accordion-button>* {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Kill Bootstrap's inset border line + focus ring in every state */
#field_4_61 .accordion-button,
#field_4_61 .accordion-button:not(.collapsed),
#field_4_61 .accordion-button:focus,
#field_4_61 .accordion-button:active,
#field_4_61 .accordion-button:hover {
	box-shadow: none !important;
	outline: none !important;
	border: 0 !important;
	background-color: transparent !important;
	color: #090909 !important;
}

/* Remove the default divider line between header and body */
#field_4_61 .accordion-collapse,
#field_4_61 .accordion-body {
	border: 0 !important;
}

/* Chevron */
#field_4_61 .accordion-button::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 10px;
	margin-left: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%234B83D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease;
}

#field_4_61 .accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
}

/* Collapse behaviour (fallback if Bootstrap CSS is absent) */
#field_4_61 .accordion-collapse.collapse:not(.show) {
	display: none;
}

#field_4_61 .accordion-body {
	padding: 0 24px 18px;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: 0%;
	color: #090909;
}

/* Consent checkbox (field_4_62) */
#gform_page_4_12 #input_4_62 .gchoice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

#gform_page_4_12 .gfield-choice-input {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid #0C1F3D;
	border-radius: 8px;
	background: #FFF;
	cursor: pointer;
	position: relative;
}

#gform_page_4_12 .gfield-choice-input:focus,
#gform_page_4_12 .gfield-choice-input:focus-visible {
	outline: none;
	box-shadow: none;
}

#gform_page_4_12 .gfield-choice-input:checked {
	background-color: #0C1F3D;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 4L5.5 10L2.5 7' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

#gform_page_4_12 .gfield-choice-input:checked::after,
#gform_page_4_12 .gfield-choice-input:checked::before {
	display: none !important;
}

#gform_page_4_12 .gfield_checkbox label {
	margin: 0;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
}

/* ---- Conditional consent preview modal ---- */
.bb360-consent-trigger {
	text-decoration: underline;
	cursor: pointer;
	color: #4B83D9;
}

.bb360-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	padding: 24px;
	background: rgba(9, 9, 9, 0.5);
	overflow-y: auto;
}

.bb360-modal-overlay.bb360-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.bb360-modal {
	position: relative;
	width: 100%;
	max-width: 700px;
	margin: auto;
	background: #FFF;
	border-radius: 40px;
	padding: 40px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.bb360-modal-close,
.bb360-modal-close:hover,
.bb360-modal-close:focus,
.bb360-modal-close:active {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: 24px;
	line-height: 1;
	color: #090909 !important;
	cursor: pointer;
}

.bb360-modal-label {
	font-family: Montserrat;
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #4B83D9;
	margin-bottom: 24px;
	padding-right: 32px;
}

.bb360-modal-title {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 62px;
	letter-spacing: 0%;
	text-transform: capitalize;
	color: #090909;
	margin: 0 0 24px;
}

.bb360-modal-text {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
	margin: 0 0 20px;
}

.bb360-modal-question {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0%;
	color: #090909;
	margin: 0 0 8px;
}

.bb360-modal-choices {
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;
}

.bb360-modal-choice {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 8px;
	border-bottom: 1px solid #EEEEEE;
	cursor: pointer;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #090909;
}

.bb360-modal-choice input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 1px solid #0C1F3D;
	border-radius: 2000px;
	background: #FFF;
	cursor: pointer;
}

.bb360-modal-choice input[type="radio"]:focus {
	outline: none;
	box-shadow: none;
}

.bb360-modal-choice input[type="radio"]:checked {
	background-color: #0C1F3D;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 4L5.5 10L2.5 7' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.bb360-modal-confirm,
.bb360-modal-confirm:hover,
.bb360-modal-confirm:focus,
.bb360-modal-confirm:active {
	width: 100%;
	background: #0C1F3D !important;
	color: #FFF !important;
	border: 1px solid #0C1F3D !important;
	box-shadow: none !important;
	outline: none !important;
	border-radius: 8px;
	padding: 16px 50px;
	font-family: Montserrat;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---- Submission confirmation screen ---- */
.bb360-submitted {
	width: 1109px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid #EEEEEE;
	background: #FFFFFF;
	border-radius: 40px;
	padding: 110px 24px;
}

.bb360-submitted svg {
	margin-bottom: 24px;
}

.bb360-submitted-title {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 62px;
	letter-spacing: 0%;
	text-align: center;
	text-transform: capitalize;
	color: #090909;
	margin: 0 0 12px;
}

.bb360-submitted-text {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0%;
	text-align: center;
	color: #888888;
	margin: 0 0 40px;
}

.bb360-submitted-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.bb360-btn-primary,
.bb360-btn-secondary {
	display: inline-block;
	border-radius: 8px;
	padding: 12px 32px;
	box-shadow: 0px 0px 50px 0px #FFFFFF66;
	font-family: Montserrat;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.bb360-btn-primary {
	background: #0C1F3D;
	border: 1px solid #0C1F3D;
	color: #FFFFFF !important;
}

.bb360-btn-secondary {
	background: transparent;
	border: 1px solid #0C1F3D;
	color: #0C1F3D !important;
}

.woocommerce-message {
	border-top-color: #07BC34;
	font-family: 'Montserrat', sans-serif;
}

.woocommerce-message::before {
	color: #07BC34;
}

.woocommerce-message a.button.wc-forward {
	background: #EA5B04;
	color: #FFF;
	text-align: center;
}

.woocommerce-message a.button.wc-forward:hover {
	background: #090909;
	color: #FFFFFF;
}

.superscript-ms {
	font-family: Lusitana;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #0C1F3D;
	position: relative;
	top: -20px;
}

.superscript-ms-heading {
	font-family: Lusitana;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #0C1F3D;
	position: relative;
	top: -30px;
}

.superscript-ms-coaching {
	font-family: Lusitana;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #090909;
	position: relative;
	top: -10px;
}

.superscript-ms-text {
	font-family: Lusitana;
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #0C1F3D;
	position: relative;
	top: -10px;
}

.superscript--color-ms {
	color: #090909;
	top: -10px;
}

.e-n-accordion-item-title-icon {
	overflow: hidden;
	line-height: 1;
	height: 32px;
	display: flex;
	align-items: center;
}

.faqs_page_ms .e-n-accordion-item-title-icon {
	overflow: hidden;
	line-height: 1;
	height: 32px;
	display: flex;
	align-items: center;
}

.copyright-text-link-ms {
	color: #FFF;
}

.copyright-text-link-ms:hover {
	color: #ea5b04;
}

button.bb360-shop__price-btn:focus {
	background: #ea5b04;
}

.bb360-ma__content .woocommerce-message,
.bb360-ma__notices .woocommerce-message {
	padding: 14px 45px 14px 45px !important;
}

li.desktop-hide-mi {
	display: none !important;
}

.contact-info-ms .elementor-icon-box-content .elementor-icon-box-title:hover,
.contact-info-ms .elementor-icon-box-content .elementor-icon-box-title a:hover,
.contact-info-ms .elementor-icon-box-content .elementor-icon-box-description a:hover {
	color: #EA5B04 !important;
}

/* ============================================================
   Lost Password / Reset Password pages (my-account/lost-password/)
   ============================================================ */
body.woocommerce-lost-password {
	background: #F7F7F7;
}

/* Page heading */
.woocommerce-lost-password h1.entry-title,
.woocommerce-lost-password .page-title,
.woocommerce-lost-password h1 {
	font-family: 'Lusitana', serif;
	font-weight: 700;
	color: #0C1F3D;
	text-align: center;
}

/* Center the content area */
.woocommerce-lost-password .woocommerce {
	max-width: 560px;
	margin: 48px auto 150px;
	padding: 0 20px;
}

/* Notices (sent-email confirmation, errors) */
.woocommerce-lost-password .woocommerce-message,
.woocommerce-lost-password .woocommerce-info,
.woocommerce-lost-password .woocommerce-error {
	border: none;
	border-radius: 10px;
	padding: 14px 18px;
	font-family: Montserrat, sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	margin: 0 0 20px;
	list-style: none;
	background: #ECF3FF;
	color: #090909;
}

.woocommerce-lost-password .woocommerce-message::before,
.woocommerce-lost-password .woocommerce-info::before,
.woocommerce-lost-password .woocommerce-error::before {
	display: none;
}

.woocommerce-lost-password .woocommerce-message {
	background: #EDFBF2;
	color: #1A6B3C;
}

.woocommerce-lost-password .woocommerce-error {
	background: #FEF2F2;
	color: #991B1B;
}

/* Form card */
.woocommerce-lost-password form.woocommerce-ResetPassword,
.woocommerce-lost-password form.lost_reset_password {
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 16px;
	padding: 36px 36px 40px;
}

/* Intro text ("Lost your password? Please enter...") */
.woocommerce-lost-password form.lost_reset_password>p:first-child {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #444444;
	line-height: 1.75;
	margin: 0 0 24px;
}

/* Field rows */
.woocommerce-lost-password form.lost_reset_password .form-row {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 20px;
}

/* Labels — mirrors .bb360-login-card label */
.woocommerce-lost-password form.lost_reset_password label {
	display: block;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 32px;
	text-transform: capitalize;
	color: #090909;
	margin-bottom: 6px;
}

/* Login and register both hide the asterisk; the field is the only one here. */
.woocommerce-lost-password form.lost_reset_password label .required,
.woocommerce-lost-password form.lost_reset_password label .screen-reader-text {
	display: none;
}

/* Inputs — mirrors .bb360-login-card input[type="text"], but padding stays
   10px at every breakpoint rather than following the login card's scale. */
.woocommerce-lost-password form.lost_reset_password input.input-text,
.woocommerce-lost-password form.lost_reset_password .woocommerce-Input {
	width: 100%;
	padding: 10px;
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	backdrop-filter: blur(4px);
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	color: #090909;
	background: #FFFFFF;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
	box-sizing: border-box;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.woocommerce-lost-password form.lost_reset_password input.input-text:focus,
.woocommerce-lost-password form.lost_reset_password .woocommerce-Input:focus {
	border-color: #1e2d4d;
}

/* Password strength meter (reset form) */
.woocommerce-lost-password .woocommerce-password-strength {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	padding: 8px 12px;
	margin-top: 8px;
	background: #ECF3FF;
	color: #090909;
}

.woocommerce-lost-password .woocommerce-password-strength.strong {
	background: #EDFBF2;
	color: #1A6B3C;
}

.woocommerce-lost-password .woocommerce-password-strength.short,
.woocommerce-lost-password .woocommerce-password-strength.bad {
	background: #FEF2F2;
	color: #991B1B;
}

.woocommerce-lost-password .woocommerce-password-hint {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	color: #888888;
}

/* Show-password eye toggle */
.woocommerce-lost-password .show-password-input::after {
	color: #0C1F3D;
}

/* Submit button (Reset password / Save)
   Matches .bb360-login-card button[name="login"] in form-login.php and the
   register button in form-register.php — keep the three in step. */
.woocommerce-lost-password form.lost_reset_password button.woocommerce-Button,
.woocommerce-lost-password form.lost_reset_password button[type="submit"] {
	display: block;
	width: 100%;
	padding: 12px 32px;
	background: #0C1F3D;
	color: #FFF;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	border-radius: 8px;
	border: none;
	box-shadow: 0px 0px 50px 0px #FFFFFF66;
	cursor: pointer;
	transition: background-color 0.2s ease;
	margin-top: 8px;
}

.woocommerce-lost-password form.lost_reset_password button.woocommerce-Button:hover,
.woocommerce-lost-password form.lost_reset_password button[type="submit"]:hover {
	background: #000000;
	color: #FFF;
}

/* Links inside notices / form */
.woocommerce-lost-password .woocommerce a {
	color: #4B83D9;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-lost-password .woocommerce a:hover {
	text-decoration: underline;
}

/* Mobile menu (dropdown appears at ≤1080px) */

/* ═══════════════════════════════════════════════════════════════════════════
   Blog archives — author, category, tag
   Hello Elementor's archive.php renders:
     main#content.site-main > .page-header > h1.entry-title
                            > .page-content > article.post × N
                                              > nav.pagination
   and inside each article, in source order: h2.entry-title, a > img, p.excerpt
   ═══════════════════════════════════════════════════════════════════════════ */

.archive main#content.site-main {
	width: 100%;
	max-width: 1620px;
	margin: 0 auto;
	padding: 64px 20px 100px;
	background: #FFFFFF;
}

/* ─── Archive heading ────────────────────────────────────────────────────── */
/* Markup is `Category: <span>CELLULAR HEALTH</span>` — the prefix is a bare
   text node, so it takes the h1's colour and the term takes the span's. */
.archive .page-header {
	text-align: center;
	margin: 0 0 64px;
	padding: 0;
	border: none;
}

.archive .page-header .entry-title {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 52px;
	line-height: 62px;
	letter-spacing: 0;
	color: #888888;
	margin: 0;
}

.archive .page-header .entry-title span {
	color: #0C1F3D;
}

/* ─── Card grid ──────────────────────────────────────────────────────────── */
.archive .page-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: stretch;
}

.archive .page-content>article.post {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 20px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.archive .page-content>article.post:hover {
	border-color: #0C1F3D;
	box-shadow: 0 18px 40px rgba(12, 31, 61, .08);
	transform: translateY(-2px);
}

/* The thumbnail is the only <a> that is a direct child of the article; the
   title's link is nested in the h2. Pull it above the title. */
.archive .page-content>article.post>a {
	order: -1;
	display: block;
	overflow: hidden;
	line-height: 0;
}

.archive .page-content>article.post>a img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.archive .page-content>article.post:hover>a img {
	transform: scale(1.04);
}

.archive .page-content>article.post .entry-title {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 0;
	color: #090909;
	margin: 0;
	padding: 28px 24px 0;
}

.archive .page-content>article.post .entry-title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.archive .page-content>article.post .entry-title a:hover {
	color: #0C1F3D;
}

.archive .page-content>article.post p {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: #888888;
	margin: 0;
	padding: 12px 24px 28px;
	/* Keep every card's text block the same height regardless of excerpt length. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Push the excerpt to the bottom so cards of differing title length still
   line their text blocks up. */
.archive .page-content>article.post p:last-child {
	margin-top: auto;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
/* nav.pagination is a sibling of .page-content, not a child of it — it sits
   directly under main#content. Scoping it inside the grid would never match. */
.archive main#content.site-main>nav.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 56px;
}

/* WordPress prints an empty .nav-previous on page 1; space-between then keeps
   Next hard right, which is what we want. */
.archive nav.pagination a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 32px;
	background: #0C1F3D;
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 8px;
	transition: background .2s ease;
}

.archive nav.pagination a:hover {
	background: #000000;
	color: #FFFFFF;
}

.archive nav.pagination .meta-nav {
	line-height: 1;
}

/* ============================================================
   Affiliate register <-> login cross-link prompt.
   Appended under the AffiliateWP form; mirrors .bb360-register-prompt
   on the WooCommerce login card so the two read the same.
   ============================================================ */
p.bb360-affwp-prompt {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	color: #888888;
	margin: 24px 0 0;
}

p.bb360-affwp-prompt a {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	color: #0C1F3D;
	text-decoration: none;
}

p.bb360-affwp-prompt a:hover {
	text-decoration: underline;
}

/* ============================================================
   Affiliate / Partner forms (AffiliateWP)
   Registration, login and the affiliate area all render .affwp-form,
   so these styles cover every AffiliateWP page, not just /affiliate-registration/.
   ============================================================ */

/* Page shell — :has() lets the heading pick this up without hardcoding a page ID.
   .affwp-notice covers the logged-out Affiliate Area, which renders only a
   notice (no form, no dashboard). */
main#content:has(.affwp-form),
main#content:has(.affwp-notice) {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 20px 120px;
	background: transparent;
}

main#content:has(.affwp-form) .page-header,
main#content:has(.affwp-notice) .page-header {
	text-align: center;
	margin: 0 0 32px;
	padding: 0;
	border: none;
}

main#content:has(.affwp-form) .page-header .entry-title,
main#content:has(.affwp-notice) .page-header .entry-title {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
	letter-spacing: 0;
	color: #0C1F3D;
	margin: 0;
	text-align: center;
}

/* ─── Form card ──────────────────────────────────────────────────────────── */
.affwp-form {
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 20px;
	padding: 36px;
}

.affwp-form fieldset {
	border: none;
	margin: 0;
	padding: 0;
	/* fieldsets default to min-width:min-content, which lets long inputs
	   push the card wider than its container. */
	min-width: 0;
}

.affwp-form legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 28px;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #888888;
}

.affwp-form p {
	margin: 0 0 20px;
}

/* ─── Labels ─────────────────────────────────────────────────────────────── */
.affwp-form label,
.affwp-form .affwp-field-label {
	display: block;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 32px;
	color: #090909;
	margin-bottom: 6px;
}

.affwp-form .required {
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #EA5B04;
}

/* ─── Fields ─────────────────────────────────────────────────────────────── */
.affwp-form input[type="text"],
.affwp-form input[type="email"],
.affwp-form input[type="url"],
.affwp-form input[type="password"],
.affwp-form input[type="number"],
.affwp-form select,
.affwp-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	/* 16px minimum keeps iOS from zooming the page on focus. */
	font-size: 16px;
	line-height: 1.4;
	color: #090909;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
}

.affwp-form input:focus,
.affwp-form select:focus,
.affwp-form textarea:focus {
	border-color: #0C1F3D;
	box-shadow: 0 0 0 3px rgba(12, 31, 61, 0.06);
}

.affwp-form input::placeholder,
.affwp-form textarea::placeholder {
	color: #BBBBBB;
	font-weight: 400;
}

.affwp-form textarea {
	min-height: 140px;
	line-height: 1.6;
	resize: vertical;
}

/* ─── Checkbox rows (Settings tab) ───────────────────────────────────────── */
/* The label picks up the block styling above, so it drops onto its own line.
   Lay the row out as flex and put the label back inline beside the box. */
.affwp-form p:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.affwp-form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0;
	padding: 0;
	accent-color: #0C1F3D;
	cursor: pointer;
	flex-shrink: 0;
	vertical-align: middle;
}

/* The flex `gap` only applies if the <p> wrapper matched, so space the label
   here too — this is what carries the layout when there is no wrapper. */
.affwp-form input[type="checkbox"]+label,
.affwp-form p:has(> input[type="checkbox"]) label {
	display: inline-block;
	margin: 0 0 0 10px;
	font-size: 16px;
	line-height: 1.4;
	vertical-align: middle;
	cursor: pointer;
}

/* When the flex row DID match, the gap already spaces them — don't double up. */
.affwp-form p:has(> input[type="checkbox"]) label {
	margin-left: 0;
}

/* Fields AffiliateWP pre-fills and locks for a logged-in user */
.affwp-form input:disabled,
.affwp-form textarea:disabled,
.affwp-form input[readonly] {
	background: #F3F4F6;
	color: #6B7280;
	border-color: #EEEEEE;
	cursor: not-allowed;
}

.affwp-form input:disabled:focus,
.affwp-form input[readonly]:focus {
	border-color: #EEEEEE;
	box-shadow: none;
}

/* Spam trap — must never be visible */
.affwp-form input[name="affwp_honeypot"] {
	display: none !important;
}

/* ─── Submit ─────────────────────────────────────────────────────────────── */
.affwp-form input[type="submit"],
.affwp-form button[type="submit"],
.affwp-form .button {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 16px 32px;
	background: #0C1F3D;
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.affwp-form input[type="submit"]:hover,
.affwp-form button[type="submit"]:hover,
.affwp-form .button:hover {
	background: #000000;
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(12, 31, 61, 0.22);
}

.affwp-form input[type="submit"]:focus-visible,
.affwp-form button[type="submit"]:focus-visible {
	outline: 2px solid #0C1F3D;
	outline-offset: 2px;
}

/* ─── Notices / validation errors ────────────────────────────────────────── */
.affwp-errors,
.affwp-notice {
	border: none;
	border-radius: 10px;
	padding: 14px 18px;
	margin: 0 0 20px;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
	/* A long unbroken value (e.g. a pasted URL) must wrap, not overflow. */
	overflow-wrap: anywhere;
}

.affwp-errors {
	background: #FEF2F2;
	color: #991B1B;
}

.affwp-error {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
}

.affwp-notice {
	background: #EDFBF2;
	color: #1A6B3C;
}

/* ─── Affiliate Area, logged out ─────────────────────────────────────────── */
/* Here the notice IS the page ("You're unauthorized… please log in"), so give
   it a card instead of a thin green strip. Scoped with :not() so the inline
   success notice on the forms keeps its green treatment. */
main#content:has(.affwp-notice):not(:has(.affwp-form)):not(:has(#affwp-affiliate-dashboard)) .affwp-notice {
	display: block;
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 20px;
	padding: 48px 32px;
	margin: 0;
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.75;
	color: #444444;
}

/* The link sits mid-sentence, so keep it inline text — a button would break
   the line flow. */
main#content:has(.affwp-notice):not(:has(.affwp-form)):not(:has(#affwp-affiliate-dashboard)) .affwp-notice a {
	color: #0C1F3D;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

main#content:has(.affwp-notice):not(:has(.affwp-form)):not(:has(#affwp-affiliate-dashboard)) .affwp-notice a:hover {
	color: #EA5B04;
}

.affwp-form a {
	color: #4B83D9;
	font-weight: 600;
	text-decoration: none;
}

.affwp-form a:hover {
	text-decoration: underline;
}

.affwp-custom-link-action {
	width: 14px;
	height: 14px;
}

/* ─── Logged-out: login form extras ──────────────────────────────────────── */
/* "Remember me" must sit inline, not inherit the block label styling above. */
.affwp-form .affwp-rememberme {
	display: flex;
	align-items: center;
	gap: 10px;
}

.affwp-form .affwp-rememberme label {
	display: inline;
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
}

.affwp-form .affwp-rememberme input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin: 0;
	padding: 0;
	accent-color: #0C1F3D;
	cursor: pointer;
	flex-shrink: 0;
}

.affwp-form .affwp-lost-password {
	margin-bottom: 20px;
	font-size: 15px;
}

/* ============================================================
   Affiliate Area — logged-in dashboard (AffiliateWP)
   ============================================================ */

/* The dashboard is wider than the auth forms. This rule comes after the
   .affwp-form shell above, so on the Settings tab (which contains an
   .affwp-form) the dashboard width still wins. */
main#content:has(#affwp-affiliate-dashboard) {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 20px 120px;
}

main#content:has(#affwp-affiliate-dashboard) .page-header {
	text-align: center;
	margin: 0 0 32px;
	padding: 0;
	border: none;
}

main#content:has(#affwp-affiliate-dashboard) .page-header .entry-title {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.25;
	color: #0C1F3D;
	margin: 0;
	text-align: center;
	width: 100%;
	max-width: 100%;
}

#affwp-affiliate-dashboard {
	font-family: Montserrat, sans-serif;
	color: #090909;
}

/* Greeting / intro copy above the tabs */
#affwp-affiliate-dashboard>p {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #888888;
	margin: 0 0 24px;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
#affwp-affiliate-dashboard-tabs,
.affwp-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid #EEEEEE;
}

.affwp-tab,
#affwp-affiliate-dashboard-tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.affwp-tab a,
#affwp-affiliate-dashboard-tabs li a {
	display: block;
	padding: 12px 22px;
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0C1F3D;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.affwp-tab a:hover,
#affwp-affiliate-dashboard-tabs li a:hover {
	border-color: #0C1F3D;
	background: #F7F7F7;
	text-decoration: none;
}

.affwp-tab.active a,
.affwp-tab-active a,
#affwp-affiliate-dashboard-tabs li.active a {
	background: #0C1F3D;
	border-color: #0C1F3D;
	color: #FFFFFF;
}

/* ─── Tab panels ─────────────────────────────────────────────────────────── */
.affwp-tab-content,
#affwp-affiliate-dashboard-urls,
#affwp-affiliate-dashboard-stats,
#affwp-affiliate-dashboard-graphs,
#affwp-affiliate-dashboard-creatives,
#affwp-affiliate-dashboard-settings {
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 20px;
	padding: 28px;
	/* The Statistics tab stacks several of these cards — keep them apart. */
	margin-bottom: 24px;
}

.affwp-tab-content:last-child,
#affwp-affiliate-dashboard>div:last-child {
	margin-bottom: 0;
}

/* …and if two tables sit inside the same card, space those too. */
#affwp-affiliate-dashboard .affwp-table+.affwp-table {
	margin-top: 32px;
}

/* AffiliateWP uses different heading levels per panel, so cover them all
   rather than assuming h4/h5. */
#affwp-affiliate-dashboard h2,
#affwp-affiliate-dashboard h3,
#affwp-affiliate-dashboard h4,
#affwp-affiliate-dashboard h5,
.affwp-tab-content h2,
.affwp-tab-content h3,
.affwp-tab-content h4,
.affwp-tab-content h5 {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	color: #0C1F3D;
	margin: 0 0 6px;
	line-height: 1.35;
	letter-spacing: 0;
}

#affwp-affiliate-dashboard h2,
.affwp-tab-content h2 {
	font-size: 22px;
}

#affwp-affiliate-dashboard h3,
#affwp-affiliate-dashboard h4,
.affwp-tab-content h3,
.affwp-tab-content h4 {
	font-size: 20px;
}

#affwp-affiliate-dashboard h5,
.affwp-tab-content h5 {
	font-size: 16px;
}

/* Sub-copy under a heading ("Share this link to earn commissions.") */
#affwp-affiliate-dashboard h2+p,
#affwp-affiliate-dashboard h3+p,
#affwp-affiliate-dashboard h4+p,
#affwp-affiliate-dashboard h5+p {
	font-size: 15px;
	line-height: 1.6;
	color: #888888;
	margin: 0 0 20px;
}

/* The Settings tab renders an .affwp-form — it's already inside a panel,
   so drop the nested card chrome. */
.affwp-tab-content .affwp-form,
#affwp-affiliate-dashboard-settings .affwp-form {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* ─── Tables (referrals, visits, payouts, stats) ─────────────────────────── */
.affwp-table {
	width: 100%;
	border-collapse: collapse;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	margin: 0;
}

/* The theme draws a full grid on the table, rows and cells. Reset every side,
   then add back only the horizontal rules we want. AffiliateWP's own stylesheet
   sets these too, so be explicit rather than relying on the shorthand. */
.affwp-table,
.affwp-table thead,
.affwp-table tbody,
.affwp-table tr,
.affwp-table th,
.affwp-table td {
	/* AffiliateWP's own stylesheet wins on specificity here, so force it. */
	border: 0 !important;
	background-image: none;
}

/* AffiliateWP shades the value row grey — we use a hairline rule instead. */
.affwp-table tbody tr,
.affwp-table tbody tr td,
.affwp-table tbody tr:nth-child(odd) td,
.affwp-table tbody tr:nth-child(even) td {
	background: transparent !important;
}

.affwp-table thead th {
	font-family: Montserrat, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #0C1F3D;
	text-align: left;
	padding: 14px 20px;
	/* !important to survive the border reset above. */
	border-bottom: 1px solid #EEEEEE !important;
	white-space: nowrap;
	background: transparent;
}

.affwp-table tbody td {
	padding: 18px 20px;
	border-bottom: 1px solid #F5F5F5 !important;
	color: #444444;
	vertical-align: middle;
	line-height: 1.5;
	/* Referral URLs are long and unbroken — wrap rather than blow out the column. */
	overflow-wrap: anywhere;
}

.affwp-table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.affwp-table th:first-child,
.affwp-table td:first-child {
	padding-left: 20px;
}

.affwp-table th:last-child,
.affwp-table td:last-child {
	padding-right: 0;
}

.affwp-table tbody tr:last-child td {
	border-bottom: none;
}

/* Row hover only makes sense on real data lists. A single-row stats table (or
   an empty-state message) is not something you hover to pick out. */
.affwp-table tbody tr:not(:only-child):hover td {
	background: #FAFBFC !important;
}

/* Statistics tab: header row = KPI label, single value row = the figure.
   Target the one-row shape rather than a panel ID, so it works regardless of
   which container AffiliateWP wraps it in.
   A row holding links/buttons/inputs is real data (e.g. the custom-links table,
   which also has one row) — not a stat — so exclude it. */
.affwp-table tbody tr:only-child:not(:has(a)):not(:has(button)):not(:has(input)) td {
	font-family: 'Lusitana', serif;
	font-size: 26px;
	line-height: 1.3;
	color: #0C1F3D;
	padding-top: 14px;
	padding-bottom: 18px;
}

/* Custom links / referrals: keep the URL readable and the row actions compact. */
#affwp-affiliate-dashboard .affwp-table td a {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	color: #0C1F3D;
	overflow-wrap: anywhere;
}

/* Fixed square + centred flex so the glyph is optically centred, rather than
   relying on padding that the icon's own line-height keeps throwing off. */
#affwp-affiliate-dashboard .affwp-table td button,
#affwp-affiliate-dashboard .affwp-table td .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	min-height: 0;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0;
	border-radius: 6px;
}

/* The glyph carries its own size, so the padding above alone won't shrink it. */
#affwp-affiliate-dashboard .affwp-table td button svg,
#affwp-affiliate-dashboard .affwp-table td .button svg,
#affwp-affiliate-dashboard .affwp-table td button img,
#affwp-affiliate-dashboard .affwp-table td .button img {
	width: 15px;
	height: 15px;
	display: block;
}

/* …but an empty-state sentence ("You have no referrals…") is not a KPI. */
.affwp-table tbody tr:only-child td[colspan] {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #888888;
	padding: 24px 20px;
	text-align: center;
}

/* Referral status pills (paid / unpaid / rejected / pending) */
.affwp-table .paid,
.affwp-table .unpaid,
.affwp-table .pending,
.affwp-table .rejected {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.affwp-table .paid {
	background: #EDFBF2;
	color: #1A6B3C;
}

.affwp-table .unpaid,
.affwp-table .pending {
	background: #FFF7E6;
	color: #8A5A00;
}

.affwp-table .rejected {
	background: #FEF2F2;
	color: #991B1B;
}

/* ─── Referral URL generator + copy button ───────────────────────────────── */
#affwp-affiliate-dashboard-referral-url,
.affwp-referral-url {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	background: #F7F7F7;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	color: #090909;
	outline: none;
	/* A long referral URL must not push the panel wide. */
	overflow-wrap: anywhere;
}

/* ─── Graphs: date-range filter ──────────────────────────────────────────── */
/* The select and the Filter button are stacked with nothing between them. */
#affwp-affiliate-dashboard select {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	margin-bottom: 16px;
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	color: #090909;
	outline: none;
	transition: border-color 0.2s ease;
}

#affwp-affiliate-dashboard select:focus {
	border-color: #0C1F3D;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/* AffiliateWP ships its own button colours; the ID scope here outranks them. */
#affwp-affiliate-dashboard button,
#affwp-affiliate-dashboard .button,
#affwp-affiliate-dashboard input[type="submit"],
#affwp-affiliate-dashboard input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	background: #0C1F3D;
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid #0C1F3D;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#affwp-affiliate-dashboard button:hover,
#affwp-affiliate-dashboard .button:hover,
#affwp-affiliate-dashboard input[type="submit"]:hover,
#affwp-affiliate-dashboard input[type="button"]:hover {
	background: #000000;
	border-color: #000000;
	color: #FFFFFF;
}

/* "Copy Link" is a secondary action beside the URL field — outline, not solid,
   so it doesn't compete with the primary button below it. */
#affwp-affiliate-dashboard .affwp-copy-to-clipboard,
#affwp-affiliate-dashboard button.affwp-copy-to-clipboard {
	background: #FFFFFF;
	color: #0C1F3D;
	border: 1px solid #0C1F3D;
	white-space: nowrap;
}

#affwp-affiliate-dashboard .affwp-copy-to-clipboard:hover,
#affwp-affiliate-dashboard button.affwp-copy-to-clipboard:hover {
	background: #0C1F3D;
	border-color: #0C1F3D;
	color: #FFFFFF;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.affwp-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.affwp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 10px 14px;
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	background: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #0C1F3D;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.affwp-pagination .page-numbers:hover {
	border-color: #0C1F3D;
	background: #F7F7F7;
}

.affwp-pagination .page-numbers.current {
	background: #0C1F3D;
	border-color: #0C1F3D;
	color: #FFFFFF;
}

/* ─── Creatives ──────────────────────────────────────────────────────────── */
.affwp-creatives {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.affwp-creative {
	border: 1px solid #EEEEEE;
	border-radius: 16px;
	padding: 20px;
	background: #FFFFFF;
}

.affwp-creative img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	margin-bottom: 14px;
}

.affwp-creative textarea {
	min-height: 90px;
	font-size: 13px;
	font-family: monospace;
}

.logged-in ul#menu-1-63e525d .menu-item-1803 {
	display: none;
}

.logged-out ul#menu-1-63e525d .menu-item-1802 {
	display: none;
}

.logged-in ul#menu-1-63e525d .menu-item-1908 {
	display: none;
}

.logged-out ul#menu-1-63e525d .menu-item-1937 {
	display: none;
}

.logged-out ul#menu-1-63e525d .menu-item-2551 {
	display: none;
}

.logged-in ul#menu-1-63e525d .menu-item-2552 {
	display: none;
}

/* ============================================================
   Responsive — widest to narrowest
   Media queries are consolidated here, after all base rules, so
   a narrower breakpoint always wins over a wider one.
   ============================================================ */

@media (max-width: 1682px) {
	.main-menu-center-ms .header-menu-ms nav ul li a {
		font-size: 16px !important;
	}
}

@media (max-width: 1661px) and (min-width: 1568px) {
	.header-mk a.elementor-item {
		font-size: 18px !important;
	}

	.col2-hdr-mk {
		width: 78% !important;
	}

	.inner-col-mk {
		width: 42% !important;
	}
}

@media (max-width: 1650px) and (min-width: 1441px) {
	.coaching360_homepage_ms .elementor-heading-title {
		font-size: 24px !important;
	}
}

@media (max-width: 1920px) and (min-width: 1441px) {

	/* The nav links and the "Become a Brand Partner" button were one rule at
	   14px. Split because they no longer share a size: the links carry the
	   menu and read at 18px, while the button keeps the smaller type that
	   holds its label on one line. */
	.header-mk a.elementor-item {
		font-size: 18px !important;
		margin: 0px 10px !important;
	}

	.header-mk a.elementor-button.elementor-button-link {
		font-size: 14px !important;
		margin: 0px 10px !important;
	}

	.col2-hdr-mk {
		width: 78% !important;
	}

	.inner-col-mk {
		width: 42% !important;
	}
}

/* The tightest part of the 1441–1920 band. "Become a Brand Partner" is the
   longest label in the header, so it runs out of room before the nav links do
   and steps down first. Must stay AFTER the 1441–1920 block above: the two
   selectors are equally specific and both !important, so this only wins by
   coming later. */
@media (max-width: 1474px) and (min-width: 1441px) {
	.header-mk a.elementor-button.elementor-button-link {
		font-size: 12px !important;
	}
}

/* The next rung down. Written max-then-min: the supplied version had these the
   other way round (max-width: 1200px AND min-width: 1431px), a range no
   viewport can satisfy, so the rule never applied. */
@media (max-width: 1431px) and (min-width: 1200px) {

	.header-mk a.elementor-item {
		font-size: 14px !important;
	}

	/* Kept smaller than the links: "Become a Brand Partner" is the longest
	   label in the header and is what runs out of room first. */
	.header-mk a.elementor-button.elementor-button-link {
		font-size: 10px !important;
	}
}

@media (max-width: 1546px) and (min-width: 1441px) {
	.header-menu-ms .elementor-nav-menu .elementor-item {
		font-size: 18px !important;
	}

	.header-ms .elementor-button {
		font-size: 16px !important;
	}

	#menu-1-c45946e ul li a,
	#menu-1-c45946e ul li a,
	#menu-1-bc76b63 ul li a {
		font-size: 16px !important;
	}
}

@media (max-width: 1440px) and (min-width: 1201px) {
	.footer-sub-heading-ms {
		min-width: 158px !important;
	}
}

@media (max-width: 1440px) {
	.bb360-steps {
		width: 90vw;
	}

	.icon-list-coaching-360-ms ul li span {
		font-size: 14px !important;
	}
}

@media (max-width: 1366px) and (min-width: 1080px) {
	.header-menu-ms.menu-mk {
		padding: 0px !important;
	}
}

@media (max-width: 1300px) {
	.text-editor-heading-ms h2 {
		font-size: 24px;
	}

	.text-editor-heading-ms h3 {
		font-size: 20px;
	}
}

@media (max-width: 1280px) and (min-width: 1201px) {
	.header-menu-ms .elementor-nav-menu .elementor-item {
		font-size: 13px !important;
	}

	.header-ms .elementor-button {
		font-size: 13px !important;
	}

	#menu-1-c45946e ul li a,
	#menu-1-c45946e ul li a,
	#menu-1-bc76b63 ul li a {
		font-size: 13px !important;
	}

	ul#menu-1-c45946e li a {
		font-size: 13px !important;
	}
}

@media (max-width: 1200px) and (min-width: 1082px) {
	.footer-sub-heading-ms {
		min-width: 148px !important;
	}
}

@media (max-width: 1200px) {

	.archive .page-content {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}

	.archive .page-header .entry-title {
		font-size: 42px;
		line-height: 52px;
	}

	.archive .page-header {
		margin-bottom: 48px;
	}

	.superscript-ms {
		top: -10px;
	}

	.superscript-ms-heading {
		top: -20px;
	}

	.superscript-ms-coaching {
		top: -10px;
	}

	.superscript-ms-text {
		top: -6px;
	}
}

@media (max-width: 1140px) {

	#gform_page_4_1,
	.bb360-fullwidth,
	.bb360-submitted {
		width: 100% !important;
		max-width: 100%;
	}
}

@media (max-width: 1081px) and (min-width: 768px) {
	.footer-sub-heading-ms {
		min-width: 148px !important;
	}
}

@media (max-width: 1081px) {

	.text-editor-heading-ms h2 {
		font-size: 20px;
	}

	.text-editor-heading-ms h3 {
		font-size: 18px;
	}

	.text-editor-heading-ms p,
	.text-editor-heading-ms ul li {
		font-size: 14px;
	}

	.superscript-ms-heading {
		top: -10px;
	}

	.superscript-ms-coaching {
		top: -6px;
	}

	.superscript-ms-text {
		top: -6px;
	}
}

@media (max-width: 1080px) and (min-width: 767px) {
	.header-menu-ms.menu-mk {
		padding: 0px !important;
	}
}

@media (max-width: 1080px) {

	/* Remove box-shadow + border-radius on the mobile dropdown menu */
	.elementor-46 .elementor-element.elementor-element-c45946e .elementor-nav-menu--main .elementor-nav-menu--dropdown,
	.elementor-46 .elementor-element.elementor-element-c45946e .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		box-shadow: none !important;
		border: none !important;
	}

	.elementor-46 .elementor-element.elementor-element-c45946e .elementor-nav-menu--dropdown {
		border-radius: 0 !important;
		border: none !important;
	}
}

@media (max-width: 1024px) {
	.bb360-submitted {
		padding: 80px 24px;
	}

	.bb360-modal {
		padding: 32px;
	}

	/* Modal scrolls if taller than the screen */
	.bb360-modal {
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}

	.faqs_page_ms .e-n-accordion-item-title-icon {
		overflow: visible !important;
	}
}

@media (max-width: 810px) {

	.coaching-360-ms .elementor-element.elementor-element-c1bea58.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-2572552.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-0e01f07.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-effaa7b.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-2975edf.e-con-full.e-flex.e-con.e-child {
		flex-direction: column;
	}

	.coaching-360-ms .elementor-element.elementor-element-df4cd6e.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-87bcfe3.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-12fdad1.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-4755e94.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-596a6c7.e-con-full.e-flex.e-con.e-child {
		flex-direction: column;
		border: none !important;
		gap: 0px;
	}

	.coaching-360-ms .elementor-element.elementor-element-de58afb.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-3c1aaae.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-352962a.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-675ae8c.e-con-full.e-flex.e-con.e-child,
	.coaching-360-ms .elementor-element.elementor-element-818446a.e-con-full.e-flex.e-con.e-child {
		padding: 0px;
	}
}

@media (max-width: 768px) {
	#gform_page_4_1 {
		padding: 20px;
		border-radius: 24px;
	}

	/* Body / intro copy */
	div#field_4_1 p,
	div#field_4_9 p,
	div#field_4_1 ul li,
	.bb360-submitted-text {
		font-size: clamp(16px, 4vw, 24px);
		line-height: 1.5;
	}

	div#field_4_15 svg {
		margin-top: 0px;
		width: 30px;
		height: 30px;
	}

	div#field_4_1 p,
	div#field_4_9 p {
		margin-bottom: 0px;
	}

	div#field_4_1 svg {
		margin-bottom: 12px;
	}

	div#field_4_1 ul {
		margin-bottom: 40px;
	}

	/* Labels / legends / descriptions */
	div#gform_page_4_2 label,
	legend.gfield_label.gform-field-label,
	label.gfield_label.gform-field-label,
	.gfield_description,
	.gfield_validation_message,
	.validation_message {
		font-size: 16px;
		line-height: 1.5;
	}

	/* Inputs / textareas / select — 16px avoids iOS zoom-on-focus.
	   Choice controls excluded for the same reason as the desktop rule: 16px of
	   padding on a checkbox is not a checkbox. */
	#gform_page_4_2 textarea,
	#gform_page_4_10 textarea,
	#gform_wrapper_4 input:not([type="checkbox"]):not([type="radio"]) {
		font-size: 16px;
		padding: 16px;
	}

	#gform_page_4_8 #input_4_40 {
		font-size: 16px;
		height: 56px;
		padding: 0 16px;
	}

	/* Choice / radio / checkbox label text */
	#gform_page_4_2 .gfield_radio label,
	#gform_page_4_3 .gfield_radio label,
	#gform_page_4_5 .gfield_checkbox label,
	#gform_page_4_6 .gfield_checkbox label,
	#gform_page_4_7 .gfield_checkbox label,
	#gform_page_4_8 .gfield_radio label,
	#gform_page_4_10 .gfield_radio label,
	#gform_page_4_12 .gfield_checkbox label,
	.bb360-modal-choice {
		font-size: 18px;
	}

	/* Two-column grids collapse to a single column */
	#gform_page_4_5 #input_4_28,
	#gform_page_4_10 #input_4_51,
	#gform_page_4_10 #input_4_52 {
		grid-template-columns: 1fr;
	}

	/* Inline Yes/No (and Male/Female) rows wrap & fill */
	#gform_page_4_2 div#input_4_14,
	#gform_page_4_3 div#input_4_17,
	#gform_page_4_10 #input_4_49 {
		flex-wrap: wrap;
	}

	#gform_page_4_2 div#input_4_14 .gchoice,
	#gform_page_4_3 div#input_4_17 .gchoice,
	#gform_page_4_10 #input_4_49 .gchoice {
		flex: 1 1 140px;
	}

	/* Choice card padding + comfortable touch target */
	#gform_page_4_2 .gchoice.gchoice_4_14_0,
	#gform_page_4_2 .gchoice.gchoice_4_14_1,
	#gform_page_4_3 .gchoice.gchoice_4_17_0,
	#gform_page_4_3 .gchoice.gchoice_4_17_1,
	#gform_page_4_5 .gfield_checkbox .gchoice,
	#gform_page_4_6 .gfield_checkbox .gchoice,
	#gform_page_4_7 .gfield_checkbox .gchoice,
	#gform_page_4_8 .gfield_radio .gchoice,
	#gform_page_4_10 .gchoice,
	#gform_page_4_10 #input_4_49 .gchoice {
		padding: 14px 16px;
		min-height: 48px;
	}

	/* Buttons — full-width, finger-friendly */
	input#gform_next_button_4_3,
	#gform_wrapper_4 .gform_previous_button,
	#gform_wrapper_4 .gform_next_button,
	#gform_wrapper_4 .gform_button,
	input#gform_previous_button_4_5,
	input#gform_next_button_4_5 {
		padding: 14px 20px;
		font-size: 16px;
		letter-spacing: 2px;
		min-height: 48px;
	}

	/* Note boxes */
	div#field_4_16>div,
	div#field_4_16>div p,
	div#field_4_29 p,
	div#field_4_33 p,
	div#field_4_37 p,
	div#field_4_42 p,
	div#field_4_57 p {
		font-size: 16px;
		line-height: 1.6;
	}

	/* BMI box stacks */
	.bb360-bmi-box {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Eligibility pill: wrap instead of overflowing the narrow column */
	.bb360-bmi-status {
		max-width: 100%;
		align-items: flex-start;
		padding: 12px 16px;
		border-radius: 16px;
	}

	.bb360-bmi-status span {
		white-space: normal;
		text-align: left;
		line-height: 1.3;
	}

	.bb360-bmi-status svg {
		margin-top: 8px;
	}

	/* Accordion */
	#field_4_61 .accordion-button {
		font-size: 18px;
	}

	/* File upload zone */
	.bb360-upload {
		min-height: 180px;
		padding: 20px;
	}

	.bb360-upload-text {
		font-size: 18px;
	}

	/* Modal */
	.bb360-modal {
		padding: 24px;
		border-radius: 24px;
	}

	.bb360-modal-text,
	.bb360-modal-question {
		font-size: 16px;
		line-height: 1.6;
	}

	.bb360-modal-label {
		font-size: 18px;
		letter-spacing: 2px;
	}

	.bb360-modal-choice {
		gap: 12px;
	}

	/* Confirm & Continue button — trim side padding/tracking so the label fits */
	.bb360-modal-confirm,
	.bb360-modal-confirm:hover,
	.bb360-modal-confirm:focus,
	.bb360-modal-confirm:active {
		padding: 14px 20px;
		font-size: 16px;
		letter-spacing: 2px;
		white-space: normal;
	}

	/* Confirmation screen */
	.bb360-submitted {
		padding: 60px 20px;
		border-radius: 24px;
	}

	.bb360-submitted-actions {
		flex-direction: column;
		width: 100%;
	}

	.bb360-btn-primary,
	.bb360-btn-secondary {
		width: 100%;
		min-height: 48px;
	}

	/* Trim large bottom spacers */
	fieldset#field_4_52,
	fieldset#field_4_62,
	div#field_4_25,
	div#field_4_29,
	div#field_4_33,
	div#field_4_37 {
		margin-bottom: 40px;
	}

	div#field_4_1 h2 {
		text-align: center;
	}

	div#field_4_1 h2,
	div#field_4_9 h2,
	div#field_4_16 h2,
	div#field_4_18 h2,
	div#field_4_27 h2,
	div#field_4_30 h2,
	div#field_4_35 h2,
	div#field_4_39 h2,
	div#field_4_44 h2,
	div#field_4_47 h2,
	div#field_4_54 h2,
	div#field_4_59 h2 {
		font-size: 30px !important;
		line-height: 1.2em;
	}

	input#gform_submit_button_1 {
		padding: 12px 50px 12px 24px;
		font-size: 14px;
	}

	.product_tag-recommended-product .col1-fl-products::before {
		content: "RECOMMENDED\A PRODUCT" !important;
		white-space: pre !important;
		position: absolute !important;
		top: 32px !important;
		left: -90px !important;
		right: auto !important;
		bottom: auto !important;
		z-index: 20 !important;
		width: 300px !important;
		height: auto !important;
		background: #EA5B04 !important;
		color: #FFFFFF !important;
		font-family: 'Montserrat', sans-serif !important;
		font-weight: 600 !important;
		font-size: 14px !important;
		line-height: 20px !important;
		letter-spacing: 0.5px !important;
		text-align: center !important;
		text-transform: uppercase !important;
		transform: rotate(-45deg) !important;
		pointer-events: none !important;
		padding: 6px 0 !important;
		display: block !important;
		min-height: 0 !important;
		max-height: none !important;
		min-width: 0 !important;
		max-width: none !important;
		border-radius: 0px;
	}

	.bb360-modal-title {
		line-height: 52px;
	}

	.gform_confirmation_wrapper_1 .gform_confirmation_message,
	.gform_confirmation_message_1 {
		padding: 30px 20px 30px;
		font-size: 14px;
	}

	.archive main#content.site-main {
		padding: 40px 16px 72px;
	}

	.archive .page-header .entry-title {
		font-size: 32px;
		line-height: 42px;
	}

	.archive .page-content {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.archive .page-content>article.post .entry-title {
		font-size: 22px;
		line-height: 32px;
		padding: 24px 20px 0;
	}

	.archive .page-content>article.post p {
		padding: 10px 20px 24px;
	}

	p.bb360-affwp-prompt {
		font-size: 16px;
		line-height: 26px;
	}

	/* Affiliate / Partner forms */
	main#content:has(.affwp-form),
	main#content:has(.affwp-notice) {
		padding: 40px 16px 72px;
	}

	main#content:has(.affwp-form) .page-header,
	main#content:has(.affwp-notice) .page-header {
		margin-bottom: 24px;
	}

	main#content:has(.affwp-form) .page-header .entry-title,
	main#content:has(.affwp-notice) .page-header .entry-title {
		font-size: 32px;
	}

	/* Affiliate Area, logged out */
	main#content:has(.affwp-notice):not(:has(.affwp-form)):not(:has(#affwp-affiliate-dashboard)) .affwp-notice {
		padding: 32px 20px;
		border-radius: 16px;
		font-size: 16px;
	}

	.affwp-form {
		padding: 24px 20px 28px;
		border-radius: 16px;
	}

	.affwp-form legend {
		font-size: 15px;
		margin-bottom: 22px;
	}

	.affwp-form label,
	.affwp-form .affwp-field-label {
		font-size: 16px;
		line-height: 28px;
	}

	/* Font size stays at 16px — dropping below it makes iOS zoom on focus. */
	.affwp-form input[type="text"],
	.affwp-form input[type="email"],
	.affwp-form input[type="url"],
	.affwp-form input[type="password"],
	.affwp-form input[type="number"],
	.affwp-form select,
	.affwp-form textarea {
		padding: 12px 14px;
	}

	.affwp-form textarea {
		min-height: 120px;
	}

	.affwp-form input[type="submit"],
	.affwp-form button[type="submit"],
	.affwp-form .button {
		padding: 14px 24px;
		font-size: 15px;
		letter-spacing: 2px;
		min-height: 48px;
	}

	/* Affiliate Area — dashboard */
	main#content:has(#affwp-affiliate-dashboard) {
		padding: 40px 16px 72px;
	}

	main#content:has(#affwp-affiliate-dashboard) .page-header {
		margin-bottom: 24px;
	}

	main#content:has(#affwp-affiliate-dashboard) .page-header .entry-title {
		font-size: 32px;
		max-width: 100%;
		width: 100%;
	}

	#affwp-affiliate-dashboard-tabs,
	.affwp-tabs {
		gap: 6px;
		padding-bottom: 16px;
		margin-bottom: 20px;
	}

	.affwp-tab a,
	#affwp-affiliate-dashboard-tabs li a {
		padding: 11px 16px;
		font-size: 12px;
		letter-spacing: 0.5px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* If a table is genuinely too wide, the panel scrolls — NOT the table.
	   (display:block on a <table> makes it shrink to its content instead of
	   filling the card, which collapses the columns.) */
	.affwp-tab-content,
	#affwp-affiliate-dashboard-urls,
	#affwp-affiliate-dashboard-stats,
	#affwp-affiliate-dashboard-graphs,
	#affwp-affiliate-dashboard-creatives,
	#affwp-affiliate-dashboard-settings {
		padding: 20px 16px;
		border-radius: 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#affwp-affiliate-dashboard h3,
	#affwp-affiliate-dashboard h4,
	.affwp-tab-content h3,
	.affwp-tab-content h4 {
		font-size: 18px;
	}

	.affwp-table {
		display: table;
		width: 100%;
		table-layout: auto;
	}

	.affwp-table thead th {
		padding: 12px 14px;
		white-space: nowrap;
	}

	/* Cells wrap so a long referral URL doesn't force a horizontal scroll. */
	.affwp-table tbody td {
		padding: 14px;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.affwp-table tbody tr:only-child:not(:has(a)):not(:has(button)):not(:has(input)) td {
		font-size: 18px;
		padding-top: 12px;
		padding-bottom: 14px;
	}

	.affwp-table tbody tr:only-child td[colspan] {
		font-size: 14px;
		padding: 20px 14px;
	}

	/* Copy button drops below the URL instead of squeezing it. */
	.affwp-copy-to-clipboard {
		display: block;
		width: 100%;
		margin: 12px 0 0;
		min-height: 48px;
	}

	.affwp-creatives {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 767px) {
	li.desktop-hide-mi a {
		background-color: #EA5B04;
		color: #FFFFFF;
		border-radius: 8px !important;
		padding: 16px 20px !important;
		transition: background-color 0.2s ease, color 0.2s ease;
		margin: 0px 20px 20px 20px;
		display: inline-block;
	}

	li.desktop-hide-mi a:hover,
	li.desktop-hide-mi a:focus {
		background-color: #0C1F3D;
		color: #FFFFFF;
	}

	li.desktop-hide-mi {
		display: block !important;
	}

	.header-menu-ms.menu-mk {
		padding: 0px !important;
	}

	/* AffiliateWP stacks tables into label/value rows here. The first-child /
	   last-child padding rules from the desktop table then indent the first and
	   last rows differently from the rest — flatten them so every row lines up. */
	.affwp-table th,
	.affwp-table td,
	.affwp-table th:first-child,
	.affwp-table td:first-child,
	.affwp-table th:last-child,
	.affwp-table td:last-child {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Only the stats KPI rows become label / value pairs. Applying display:flex
	   to every td pulls the cells out of table layout, which drops a data row's
	   later columns onto their own lines. */
	.affwp-table tbody tr:only-child:not(:has(a)):not(:has(button)):not(:has(input)) td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding-top: 12px;
		padding-bottom: 12px;
		line-height: 1.5;
		text-align: left;
	}

	.affwp-table tbody tr:only-child td[colspan] {
		display: block;
		text-align: center;
	}

	/* Data tables stay real tables — just let long URLs wrap and shrink the
	   row-action buttons so the columns keep their shape. */
	#affwp-affiliate-dashboard .affwp-table td a {
		font-size: 13px;
	}

	#affwp-affiliate-dashboard .affwp-table td button,
	#affwp-affiliate-dashboard .affwp-table td .button {
		width: 28px;
		height: 28px;
		padding: 0;
	}

	#affwp-affiliate-dashboard .affwp-table td button svg,
	#affwp-affiliate-dashboard .affwp-table td .button svg {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 600px) {
	.woocommerce-lost-password .woocommerce {
		margin: 20px auto 60px;
		padding: 0 12px;
	}

	.woocommerce-lost-password form.woocommerce-ResetPassword,
	.woocommerce-lost-password form.lost_reset_password {
		padding: 24px 18px 28px;
		border-radius: 12px;
	}

	/* Type steps down like the login card; padding is fixed at 10px above. */
	.woocommerce-lost-password form.lost_reset_password input.input-text,
	.woocommerce-lost-password form.lost_reset_password .woocommerce-Input {
		font-size: 18px;
	}

	.woocommerce-lost-password form.lost_reset_password label {
		font-size: 15px;
	}

	.woocommerce-lost-password form.lost_reset_password button.woocommerce-Button,
	.woocommerce-lost-password form.lost_reset_password button[type="submit"] {
		font-size: 15px;
		letter-spacing: 2px;
	}

	.gform_confirmation_wrapper_1 .gform_confirmation_message,
	.gform_confirmation_message_1 {
		padding: 40px 20px 36px;
		border-radius: 16px;
		font-size: 16px;
		line-height: 26px;
	}

	.gform_confirmation_message_1::before {
		width: 56px;
		height: 56px;
		margin-bottom: 18px;
		background-size: 26px 26px;
	}
}

@media (max-width: 480px) {
	#gform_page_4_1 {
		padding: 16px;
	}

	/* Choice labels a touch smaller */
	#gform_page_4_2 .gfield_radio label,
	#gform_page_4_3 .gfield_radio label,
	#gform_page_4_5 .gfield_checkbox label,
	#gform_page_4_6 .gfield_checkbox label,
	#gform_page_4_7 .gfield_checkbox label,
	#gform_page_4_8 .gfield_radio label,
	#gform_page_4_10 .gfield_radio label,
	#gform_page_4_12 .gfield_checkbox label,
	.bb360-modal-choice {
		font-size: 16px;
	}

	/* Buttons */
	input#gform_next_button_4_3,
	#gform_wrapper_4 .gform_previous_button,
	#gform_wrapper_4 .gform_next_button,
	#gform_wrapper_4 .gform_button,
	input#gform_previous_button_4_5,
	input#gform_next_button_4_5 {
		padding: 12px 16px;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.bb360-modal-label {
		font-size: 16px;
	}

	.bb360-modal-confirm,
	.bb360-modal-confirm:hover,
	.bb360-modal-confirm:focus,
	.bb360-modal-confirm:active {
		padding: 12px 16px;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.bb360-submitted {
		padding: 40px 16px;
	}

	.bb360-steps-label {
		font-size: 12px;
		letter-spacing: 3px;
	}

	.archive .page-header .entry-title {
		font-size: 26px;
		line-height: 36px;
	}

	.archive .page-content>article.post {
		border-radius: 16px;
	}

	/* Stacked, full-width buttons beat two cramped ones side by side. */
	.archive main#content.site-main>nav.pagination {
		flex-direction: column;
		align-items: stretch;
	}

	.archive nav.pagination a {
		justify-content: center;
		letter-spacing: 2px;
	}

	p.bb360-affwp-prompt {
		font-size: 15px;
		line-height: 24px;
	}

	/* Affiliate / Partner forms */
	main#content:has(.affwp-form),
	main#content:has(.affwp-notice) {
		padding: 32px 12px 56px;
	}

	main#content:has(.affwp-form) .page-header .entry-title,
	main#content:has(.affwp-notice) .page-header .entry-title {
		font-size: 26px;
	}

	/* Affiliate Area, logged out */
	main#content:has(.affwp-notice):not(:has(.affwp-form)):not(:has(#affwp-affiliate-dashboard)) .affwp-notice {
		padding: 24px 16px;
		font-size: 15px;
	}

	.affwp-form {
		padding: 20px 16px 24px;
	}

	.affwp-form label,
	.affwp-form .affwp-field-label {
		font-size: 15px;
		line-height: 26px;
	}

	.affwp-form input[type="submit"],
	.affwp-form button[type="submit"],
	.affwp-form .button {
		padding: 14px 18px;
		font-size: 14px;
		letter-spacing: 1.5px;
	}

	/* Affiliate Area — dashboard */
	main#content:has(#affwp-affiliate-dashboard) {
		padding: 32px 12px 56px;
	}

	main#content:has(#affwp-affiliate-dashboard) .page-header .entry-title {
		font-size: 26px;
	}

	/* Tabs stack full-width — easier to hit than a cramped wrap. */
	#affwp-affiliate-dashboard-tabs,
	.affwp-tabs {
		flex-direction: column;
		gap: 8px;
	}

	.affwp-tab,
	#affwp-affiliate-dashboard-tabs li {
		width: 100%;
	}

	.affwp-tab a,
	#affwp-affiliate-dashboard-tabs li a {
		width: 100%;
		justify-content: center;
	}

	.affwp-tab-content,
	#affwp-affiliate-dashboard-urls,
	#affwp-affiliate-dashboard-stats,
	#affwp-affiliate-dashboard-graphs,
	#affwp-affiliate-dashboard-creatives,
	#affwp-affiliate-dashboard-settings {
		padding: 18px 14px;
	}

	#affwp-affiliate-dashboard h4,
	.affwp-tab-content h4 {
		font-size: 18px;
	}

	.affwp-table {
		font-size: 13px;
	}

	.affwp-table tbody tr:only-child:not(:has(a)):not(:has(button)):not(:has(input)) td {
		font-size: 16px;
	}

	.affwp-table tbody tr:only-child td[colspan] {
		font-size: 13px;
	}
}

@media (max-height: 600px) and (max-width: 900px) {
	.bb360-modal-overlay {
		align-items: flex-start;
	}

	.bb360-modal {
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.gform_confirmation_wrapper_1 .gform_confirmation_message,
	.gform_confirmation_message_1 {
		animation: none;
	}

	#gform_wrapper_4 .gform_page,
	#gform_wrapper_5 .gform_page {
		animation: none;
	}

	.bb360-steps-fill,
	.bb360-steps-label {
		transition: none;
	}

	.archive .page-content>article.post,
	.archive .page-content>article.post>a img {
		transition: none;
	}

	.archive .page-content>article.post:hover {
		transform: none;
	}

	.archive .page-content>article.post:hover>a img {
		transform: none;
	}

	.affwp-form input[type="submit"]:hover,
	.affwp-form button[type="submit"]:hover,
	.affwp-form .button:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Smooth step transitions (Beluga forms 4 + 5)
   Companion to bb360SmoothStepIn() in custom.js.
   ------------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
}

/* Outgoing step: fade the WHOLE WRAPPER out while the next page is fetched.
   This must live on the wrapper, not on .gform_page: the bb360-step-in
   keyframes run on .gform_page with fill "both", and a filling CSS animation
   overrides class transitions on the same properties forever — page-level
   fade classes never render. The entrance needs no extra code: each step's
   .gform_page is a freshly inserted element, so the keyframes replay on
   every swap. */
#gform_wrapper_4.bb360-step-leave,
#gform_wrapper_5.bb360-step-leave {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	#gform_wrapper_4.bb360-step-leave,
	#gform_wrapper_5.bb360-step-leave {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Height/weight rows (both forms): bottom-align the inputs so a wrapped
   question label can't push the first box out of line. */
#field_4_21,
#field_4_22,
#field_4_23,
#field_5_13,
#field_5_14,
#field_5_15 {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* ==================================================================
   Follow-up form (weightlossfollowup, GF form 5)
   Mirrors the intake form's design system.
   ================================================================== */

/* Step-1 welcome card + hidden GF chrome */
#gform_page_5_1 {
	border: 1px solid #EEEEEE;
	background: #FFF;
	border-radius: 40px;
	padding: 24px;
	width: 1100px;
	max-width: 100%;
}

#gform_5 .gform_heading,
#gf_progressbar_wrapper_5 {
	display: none !important;
}

span#gform_ajax_spinner_5 {
	display: none;
}

div#field_5_1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

/* Section headings (welcome, medical info, measurements, consent) */
div#field_5_1 h2,
div#field_5_3 h2,
div#field_5_12 h2,
div#field_5_36 h2 {
	font-family: 'Lusitana', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 62px;
	text-transform: capitalize;
	color: #090909;
}

div#field_5_1 p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 30px;
	text-align: center;
	color: #888888;
	margin-bottom: 30px;
}

div#field_5_3 p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 30px;
	color: #888888;
	margin-bottom: 30px;
}

/* Consent text block */
div#field_5_36 p {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: #090909;
}

/* Inputs / textareas (radios and checkboxes keep their native size) */
#gform_wrapper_5 input:not([type="radio"]):not([type="checkbox"]),
#gform_wrapper_5 textarea {
	border: 1px solid #EEEEEE;
	backdrop-filter: blur(4px);
	border-radius: 8px;
	padding: 24px;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
}

#gform_wrapper_5 input,
#gform_wrapper_5 textarea,
#gform_wrapper_5 select,
#gform_wrapper_5 .gchoice,
#gform_wrapper_5 .gchoice label,
#gform_wrapper_5 .gfield_radio label,
#gform_wrapper_5 .gfield_checkbox label {
	cursor: pointer;
}

/* Radio / checkbox choice cards */
#gform_wrapper_5 .gfield_radio .gchoice,
#gform_wrapper_5 .gfield_checkbox .gchoice {
	display: flex;
	align-items: center;
	gap: 20px;
	border: 1px solid #EEEEEE;
	padding: 18px 24px;
	border-radius: 8px;
	backdrop-filter: blur(4px);
	margin-bottom: 12px;
}

#gform_wrapper_5 .gfield_radio label,
#gform_wrapper_5 .gfield_checkbox label {
	margin: 0;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.3;
	color: #090909;
}

/* Short two-option questions sit side by side (sex, health changes, side effects) */
#input_5_7,
#input_5_18,
#input_5_29 {
	display: flex;
	flex-direction: row;
	gap: 18px;
}

#input_5_7 .gchoice,
#input_5_18 .gchoice,
#input_5_29 .gchoice {
	flex: 1 1 140px;
}

/* Height (inches) keeps its slot but hides the label, like the intake form */
div#field_5_14 label {
	visibility: hidden;
}

/* Buttons */
input#gform_next_button_5_2 {
	background: #0C1F3D;
	width: 100%;
	color: #FFF;
	box-shadow: 0px 0px 50px 0px #FFFFFF66;
	border-radius: 8px;
	padding: 12px 32px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
}

#gform_wrapper_5 .gform_previous_button,
#gform_wrapper_5 .gform_next_button,
#gform_wrapper_5 .gform_button {
	box-shadow: 0px 0px 50px 0px #FFFFFF66;
	border: 1px solid #0C1F3D;
	padding: 16px 50px;
	border-radius: 8px;
	font-family: Montserrat;
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	color: #0C1F3D;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#gform_wrapper_5 .gform_next_button,
#gform_wrapper_5 .gform_button {
	background: #0C1F3D;
	color: #FFF;
}

#gform_wrapper_5 .gform_next_button:hover,
#gform_wrapper_5 .gform_button:hover {
	background: #000000;
	color: #FFF;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(12, 31, 61, 0.22);
}

#gform_wrapper_5 .gform_previous_button:hover {
	background: #0C1F3D;
	color: #FFF;
	transform: translateY(-1px);
}

#gform_wrapper_5 .gform-page-footer.gform_page_footer.top_label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

/* Mobile */
@media (max-width: 1140px) {
	#gform_page_5_1 {
		width: 100% !important;
		max-width: 100%;
	}
}

@media (max-width: 1080px) {

	#gform_wrapper_5 input:not([type="radio"]):not([type="checkbox"]),
	#gform_wrapper_5 textarea {
		font-size: 16px;
		padding: 16px;
	}

	#gform_wrapper_5 .gfield_radio label,
	#gform_wrapper_5 .gfield_checkbox label {
		font-size: 18px;
	}

	#gform_wrapper_5 .gfield_radio .gchoice,
	#gform_wrapper_5 .gfield_checkbox .gchoice {
		padding: 14px 16px;
		min-height: 48px;
	}

	#gform_wrapper_5 .gform_previous_button,
	#gform_wrapper_5 .gform_next_button,
	#gform_wrapper_5 .gform_button,
	input#gform_next_button_5_2 {
		padding: 14px 20px;
		font-size: 16px;
		letter-spacing: 2px;
		min-height: 48px;
	}

	div#field_5_1 h2,
	div#field_5_3 h2,
	div#field_5_12 h2,
	div#field_5_36 h2 {
		font-size: 30px !important;
		line-height: 1.2em;
	}

	#input_5_7,
	#input_5_18,
	#input_5_29 {
		flex-wrap: wrap;
	}
}

@media (max-width: 480px) {
	#gform_page_5_1 {
		padding: 16px;
	}

	#gform_wrapper_5 .gform_previous_button,
	#gform_wrapper_5 .gform_next_button,
	#gform_wrapper_5 .gform_button,
	input#gform_next_button_5_2 {
		padding: 12px 16px;
		font-size: 14px;
		letter-spacing: 1px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Header cart icon
   What is left of the slide-out cart, which has been removed: the icon in the
   header and its count badge. The icon is now a plain link to the cart page.
   ══════════════════════════════════════════════════════════════════════════ */

.bb360-cart-link,
.bb360-cart-count {
	font-family: 'Montserrat', sans-serif;
	box-sizing: border-box;
}

.bb360-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #0C1F3D;
	text-decoration: none;
	line-height: 0;
	transition: color .18s ease;
}

.bb360-cart-link:hover {
	color: #EA5B04;
}

.bb360-cart-count {
	position: absolute;
	top: -7px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 20px;
	background: #EA5B04;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Header "Become a Brand Partner" button
   The label steps down as the header runs out of room, so it stays on one
   line instead of wrapping into the nav.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-header-brand-ms a span {
	font-size: 16px;
}

@media (max-width: 1441px) {
	.btn-header-brand-ms a span {
		font-size: 12px !important;
	}
}

@media (max-width: 1341px) {
	.btn-header-brand-ms a span {
		font-size: 10px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Coaching360 block, homepage
   Between 1201px and 1336px the heading and body run out of room and wrap
   awkwardly, so both step down. Bracketed at 1201px because the layout
   changes again below that and the smaller sizes are wrong there.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1336px) and (min-width: 1201px) {
	.coaching_360_section_homepage_ms h3.elementor-heading-title {
		font-size: 18px !important;
	}

	.coaching_360_section_homepage_ms .elementor-widget-text-editor {
		font-size: 14px !important;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   Product loop, homepage — phones and small tablets
   The loop container's rows are sized to the tallest card in the row; at this
   width the cards stack and that leaves dead space under the shorter ones.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	/* Keyed off the widget's class, not the card's. `product-loop-item-*` is on
	   the container inside each loop item, which is a descendant of
	   .elementor-loop-container — so a selector built on it can never reach the
	   container it needs to style. `product-grid-homepage-ms` is on the loop
	   grid widget itself, the actual ancestor. */
	.product-grid-homepage-ms .elementor-widget-container .elementor-loop-container {
		grid-auto-rows: 0fr !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Gravity Forms — brand base
   ──────────────────────────────────────────────────────────────────────────
   Form-agnostic, so every intake questionnaire looks the same. The Beluga
   plugin registers ELEVEN, not the eight this comment used to claim — see
   beluga-health-api.php: 4 and 5 (weight loss + follow-up), 6 and 7 (anti-aging),
   8 and 9 (acne), 10 (facial), 11 (the staging test visit type), 12 (weight-loss
   rapid check-in, defined well down the file at ~2183 rather than with the
   others) and 13 and 14 (TRT + follow-up). Only 4 and 5 had styling, hardcoded
   down to field and page IDs (#gform_page_4_2, .gchoice_4_14_0). The other nine
   fell back to Gravity Forms' own look.

   This is a base layer, deliberately low specificity: the existing ID-keyed
   rules for forms 4 and 5 are more specific and still win, so those two are
   untouched. New and unstyled forms inherit the brand instead of the default.

   ── Which look, and why ──
   The values below are the weight-loss design the client approved on forms 4
   and 5, restated form-agnostically: 24px choice labels, roomy padding, #EEEEEE
   hairlines, white cards. They were a smaller, tighter scale until now, which
   meant the ten forms rendered in two visibly different styles depending on
   which one a patient happened to land on.

   Sizes are clamped rather than fixed at form 4's literal 24px. The approved
   figure is the ceiling, and it holds on desktop; below that the type scales
   down with the viewport instead of staying at 24px until a breakpoint catches
   it. A ten-page medical questionnaire is the wrong place for a horizontal
   scrollbar.
   ══════════════════════════════════════════════════════════════════════════ */

.gform_wrapper.gravity-theme {
	--bbf-ink: #0C1F3D;
	--bbf-body: #3A4453;
	--bbf-muted: #6B7683;
	--bbf-accent: #EA5B04;
	--bbf-line: #D9DFE6;
	--bbf-line-soft: #EDF0F3;
	--bbf-panel: #FAFBFC;
	--bbf-error: #C62828;

	font-family: Montserrat, sans-serif;
	color: var(--bbf-body);
	/* 1100px is the width of the form-4 and form-5 cards (see #gform_page_4_1
	   and #gform_page_5_1). This was 820px, so the questionnaires sat visibly
	   narrower than the two approved ones on the same screen. */
	max-width: 1280px;
	margin-inline: auto;
}

/* ── The card, on every form EXCEPT 4 and 5 ──
   Forms 4 and 5 already draw this from their own page wrapper (#gform_page_4_1
   / .bb360-fullwidth): white panel, hairline border, 40px corners. Those two
   pages stay custom-built, keeping that markup and the display:none /
   display:block toggles that drive their multi-step layout.

   Every other form now sits on a plain page holding nothing but the shortcode,
   so there is no wrapper to inherit a card from and the questionnaire ran edge
   to edge against the page background.

   Excluded by ID rather than left to cascade: the theme filter in functions.php
   now puts forms 4 and 5 on gravity-theme too, so without the :not() this card
   would render inside the one their page already draws — two borders, two sets
   of 40px corners.

   On the wrapper rather than on .gform_page, because these forms show the
   progress bar, and a card that excluded it would leave the bar floating above
   the panel it belongs to. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) {
	box-sizing: border-box;
	border: 1px solid #EEEEEE;
	background: #FFF;
	border-radius: 40px;
	/* Form 4 pads 24px, but that card sits inside a page wrapper contributing
	   its own inset. This one is the only box there is, so it carries the lot. */
	padding: clamp(20px, 3vw, 40px);
	margin-block: clamp(20px, 4vw, 48px);
	/* 800px at the user's request. max-width:100% alongside it because a fixed
	   width alone overflows any viewport narrower than 800px — the wrapper's own
	   max-width is 1280px, which is no help below that. */
	width: 800px;
	max-width: 100%;
}

/* Gravity Forms marks a required field with a span carrying BOTH classes —
   `<span class="gfield_required gfield_required_text">(Required)</span>` — not a
   nested pair. The existing global rule is written as a descendant selector
   (`.gfield_required .gfield_required_text`), which therefore matches nothing,
   and only form 4's compound copy of it ever worked. This is that same rule
   written to match, so "(Required)" is hidden here as it is on form 4.

   The field stays required and still validates; only the inline marker goes. */
.gform_wrapper.gravity-theme .gfield_required_text {
	display: none;
}

/* ── Heading ── */
.gform_wrapper.gravity-theme .gform_title {
	font-family: Lusitana, serif;
	font-weight: 400;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.25;
	color: var(--bbf-ink);
	margin: 0 0 8px;
}

.gform_wrapper.gravity-theme .gform_description {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bbf-muted);
	margin-bottom: 18px;
}

.gform_wrapper.gravity-theme .gform_required_legend {
	font-size: 12px;
	color: var(--bbf-muted);
	margin-bottom: 20px;
}

/* ── Fields ── */
.gform_wrapper.gravity-theme .gform_fields {
	row-gap: 22px;
}

/* Form 4's question text: 18px, regular weight, near-black — not the 14px
   semibold this was. The weight matters as much as the size; these are
   questions being asked, not field labels on an admin screen. */
.gform_wrapper.gravity-theme .gfield_label {
	font-family: Montserrat, sans-serif;
	font-size: clamp(16px, 1.5vw, 18px);
	font-weight: 400;
	line-height: 1.6;
	color: #090909;
	margin-bottom: 10px;
}

.gform_wrapper.gravity-theme .gfield_required {
	color: var(--bbf-accent);
}

.gform_wrapper.gravity-theme .gfield_description {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bbf-muted);
	padding-top: 6px;
}

/* ── Text inputs ── */
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="password"],
.gform_wrapper.gravity-theme input[type="date"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	width: 100%;
	/* Roomy, but not form 4's literal 24px — that padding was set against 24px
	   type, and the type here is 18px. */
	padding: clamp(14px, 1.4vw, 18px);
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	background: #fff;
	backdrop-filter: blur(4px);
	font-family: Montserrat, sans-serif;
	/* 16px floor: below it iOS Safari zooms the page on focus, and the patient
	   is left scrolled sideways mid-questionnaire. */
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.5;
	color: #090909;
	transition: border-color .16s ease, box-shadow .16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gform_wrapper.gravity-theme textarea {
	min-height: 130px;
	resize: vertical;
}

/* ── Date fields ──
   Gravity Forms renders a date field two different ways depending on its
   format setting, and they need opposite treatment:

   1. A single text input with a calendar picker ("mm/dd/yyyy" + icon).
   2. Three separate sub-inputs, MM / DD / YYYY.

   The first rule below used to set `width: 7ch` on `.ginput_container_date
   input` — every date input, both variants — which sized the single picker
   input to two characters and clipped it to "mm/c". The narrow widths now name
   the sub-field classes only, and the default is full width like every other
   field on the form. */
.gform_wrapper.gravity-theme .ginput_container_date input {
	padding: 12px 14px;
	font-size: 16px;
	width: 100%;
	min-width: 0;
}

/* Variant 2 only: boxes sized to the characters they hold. `ch` units tie the
   width to the digits rather than to a pixel guess that breaks at a different
   font size. */
.gform_wrapper.gravity-theme .ginput_container_date input.gfield_date_month,
.gform_wrapper.gravity-theme .ginput_container_date input.gfield_date_day,
.gform_wrapper.gravity-theme .ginput_container_date input[placeholder="MM"],
.gform_wrapper.gravity-theme .ginput_container_date input[placeholder="DD"] {
	width: 7ch;
	flex: 0 0 auto;
	text-align: center;
}

/* "YYYY" is twice the characters. */
.gform_wrapper.gravity-theme .ginput_container_date input.gfield_date_year,
.gform_wrapper.gravity-theme .ginput_container_date input[placeholder="YYYY"] {
	width: 9ch;
	flex: 0 0 auto;
	text-align: center;
}

/* The up/down spinners are what crowded the placeholder out. A date of birth is
   typed, never nudged one year at a time. */
.gform_wrapper.gravity-theme .ginput_container_date input::-webkit-outer-spin-button,
.gform_wrapper.gravity-theme .ginput_container_date input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gform_wrapper.gravity-theme .ginput_container_date input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.gform_wrapper.gravity-theme .ginput_container_date {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* The arrow is drawn here because appearance:none removed the native one. */
.gform_wrapper.gravity-theme select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%230C1F3D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	outline: none;
	border-color: var(--bbf-ink);
	box-shadow: 0 0 0 3px rgba(12, 31, 61, .12);
}

.gform_wrapper.gravity-theme ::placeholder {
	color: #A3ABB5;
}

/* ── Choice controls, every Beluga form ──
   The square tick-box and round radio were written six times over in the
   form-4 section above, once per page ID (4_5, 4_6, 4_7, 4_8, 4_10, 4_12).
   Every page the client never listed — and all of forms 5-11 — therefore fell
   back to a native browser control sitting beside brand-styled labels.

   This is that same control, keyed to nothing but the class Gravity Forms puts
   on every choice input. Specificity is one class, so all six ID-keyed blocks
   still win and the approved pages are untouched; everything else now matches
   them instead of the browser default.

   Square for checkboxes, round for radios — the distinction is what tells a
   customer "pick several" from "pick one", and losing it on a medical intake
   form is worth more than the duplication saved. */
.gform_wrapper .gfield-choice-input {
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
	/* Never below 22px: this is the touch target on a phone. */
	width: clamp(22px, 2vw, 24px);
	height: clamp(22px, 2vw, 24px);
	margin: 0;
	padding: 0;
	border: 1px solid #0C1F3D;
	border-radius: 8px;
	background: #FFF;
	cursor: pointer;
	position: relative;
}

.gform_wrapper input[type="radio"].gfield-choice-input {
	border-radius: 2000px;
}

.gform_wrapper .gfield-choice-input:checked {
	background-color: #0C1F3D;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 4L5.5 10L2.5 7' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

/* The theme draws its own check on top of the background image otherwise. */
.gform_wrapper .gfield-choice-input:checked::after,
.gform_wrapper .gfield-choice-input:checked::before {
	display: none !important;
}

/* Removed on the styled pages, kept here: a keyboard user filling in a long
   medical form needs to see where they are. */
.gform_wrapper .gfield-choice-input:focus-visible {
	outline: 2px solid #EA5B04;
	outline-offset: 2px;
}

/* ── Field width ──
   Gravity Forms has a per-field Size setting (Small / Medium / Large) that
   prints as a class on the input, and gravity-theme styles those at
   `.gform_wrapper.gravity-theme .gfield input.small` — four classes, which
   outranks the `input[type="number"]` rule above and left number fields sitting
   at a couple of hundred pixels while everything around them ran full width.

   Overridden here rather than by changing the Size setting on every field of
   every one of the eleven forms — and a setting that has to be remembered on
   each new field is a setting that will eventually be missed.

   `.ginput_container` is in the selector purely to outrank GF: it adds the
   fifth class, so this wins on specificity alone and needs no !important. That
   matters because GF's stylesheet loads AFTER custom.css here, so an equal-
   specificity rule would lose. */
.gform_wrapper.gravity-theme .gfield .ginput_container input.small,
.gform_wrapper.gravity-theme .gfield .ginput_container input.medium,
.gform_wrapper.gravity-theme .gfield .ginput_container input.large,
.gform_wrapper.gravity-theme .gfield .ginput_container select.small,
.gform_wrapper.gravity-theme .gfield .ginput_container select.medium,
.gform_wrapper.gravity-theme .gfield .ginput_container select.large,
.gform_wrapper.gravity-theme .gfield .ginput_container textarea.small,
.gform_wrapper.gravity-theme .gfield .ginput_container textarea.medium,
.gform_wrapper.gravity-theme .gfield .ginput_container textarea.large {
	width: 100%;
}

/* The date sub-fields are the deliberate exception — MM and DD are two
   characters and must not stretch to the full row. Restated after the block
   above, at matching specificity, so widening the rest does not undo them. */
.gform_wrapper.gravity-theme .gfield .ginput_container_date input.gfield_date_month,
.gform_wrapper.gravity-theme .gfield .ginput_container_date input.gfield_date_day,
.gform_wrapper.gravity-theme .gfield .ginput_container_date input[placeholder="MM"],
.gform_wrapper.gravity-theme .gfield .ginput_container_date input[placeholder="DD"] {
	width: 7ch;
}

.gform_wrapper.gravity-theme .gfield .ginput_container_date input.gfield_date_year,
.gform_wrapper.gravity-theme .gfield .ginput_container_date input[placeholder="YYYY"] {
	width: 9ch;
}

/* ── Radios and checkboxes ──
   Whole-row targets rather than the control alone: these questionnaires are
   long, and on a phone a bare 13px radio is a poor thing to aim at. */
.gform_wrapper.gravity-theme .gfield_radio,
.gform_wrapper.gravity-theme .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* The choice card from forms 4 and 5: white, #EEEEEE hairline, roomy padding.
   align-items stays flex-start rather than form 4's `center` — form 4's choices
   are short ("Yes", "No"), while the anti-aging and acne forms ask about
   symptoms in full sentences, and centring a 24px control against a label that
   has wrapped to three lines floats it in the middle of the block. */
.gform_wrapper.gravity-theme .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.8vw, 24px);
	border: 1px solid #EEEEEE;
	border-radius: 8px;
	background: #fff;
	backdrop-filter: blur(4px);
	/* Comfortable target on a phone, matching the 768px rules for form 4. */
	min-height: 48px;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

/* Border only — the card is already white now that it matches forms 4 and 5. */
.gform_wrapper.gravity-theme .gchoice:hover {
	border-color: var(--bbf-line);
}

.gform_wrapper.gravity-theme .gchoice:has(input:checked) {
	border-color: var(--bbf-accent);
	background: #FFF6F0;
}

/* Alignment only. The control's own size, shape and tick are set once, by
   `.gform_wrapper .gfield-choice-input` further up — this rule used to size it
   to 18px with an accent-color as well, which outranked that block and left the
   choice boxes drawn half by each. Sizing was removed rather than moved: two
   places deciding how big a checkbox is was the bug. */
.gform_wrapper.gravity-theme .gchoice input {
	margin-top: 2px;
	flex-shrink: 0;
}

/* Form 4 sets choice text at 24px, and that is NOT copied here.

   It works there because form 4's choices are single words — "Yes", "No",
   "Male". These forms answer in full sentences: consent wording, medical
   conditions, symptom descriptions. At 24px a consent option wraps to two or
   three lines and reads as a heading rather than a thing to pick.

   18px instead — form 4's own question-label size, so it still belongs to the
   same scale rather than being an invented one. */
.gform_wrapper.gravity-theme .gchoice label {
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.5;
	color: #090909;
	cursor: pointer;
	margin: 0;
}

/* ── Validation ── */
.gform_wrapper.gravity-theme .gform_validation_errors {
	border: 1px solid var(--bbf-error);
	border-radius: 8px;
	background: #FDF2F2;
	box-shadow: none;
	padding: 16px 18px;
}

/* Flex with a gap, not the absolutely-positioned icon Gravity Forms ships. Its
   own layout puts the icon over the start of the heading, which on this banner
   left the text reading "...ere was a problem with your submission". The icon is
   a ::before on the h2, so it becomes the first flex child and the gap keeps it
   clear of the words. */
.gform_wrapper.gravity-theme .gform_validation_errors>h2 {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: Montserrat, sans-serif;
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 600;
	line-height: 1.45;
	color: var(--bbf-error);
	margin: 0;
	padding: 0;
}

.gform_wrapper.gravity-theme .gform_validation_errors>h2 .gform-icon {
	position: static;
	flex-shrink: 0;
	top: auto;
	left: auto;
	margin: 0;
}

.gform_wrapper.gravity-theme .gfield_error .gfield_label {
	color: var(--bbf-error);
}

.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: var(--bbf-error);
}

.gform_wrapper.gravity-theme .validation_message {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bbf-error);
	background: none;
	border: none;
	padding: 6px 0 0;
}

/* ── File upload ── */
.gform_wrapper.gravity-theme .gform_drop_area {
	border: 1.5px dashed var(--bbf-line);
	border-radius: 10px;
	background: var(--bbf-panel);
	padding: 26px 20px;
	text-align: center;
	font-size: 14px;
	color: var(--bbf-muted);
}

/* "Select files" inside the drop area. Gravity Forms gives it its own class,
   `.gform_button_select_files`, which the button rules further down do not
   name — so it fell through to the theme's own button styling and came back
   the theme's pink, the one colour on the page belonging to neither this form
   nor the brand palette.

   Styled as a secondary action rather than a navy slab: it sits inside a field,
   and the primary action on the page is Next. Same shape as the Back button.

   !important on the paint because the theme reaches these with element-level
   selectors (`button`, `input[type="button"]`) carried by the Elementor kit,
   and those specifics have already proved able to take the colour back. */
.gform_wrapper.gravity-theme .gform_button_select_files {
	font-family: Montserrat, sans-serif;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 12px 26px;
	border-radius: 8px;
	background: transparent !important;
	background-image: none !important;
	color: var(--bbf-ink) !important;
	border: 1px solid var(--bbf-line) !important;
	min-height: 44px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(12, 31, 61, .06);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.gform_wrapper.gravity-theme .gform_button_select_files:hover {
	background: #FFF !important;
	border-color: var(--bbf-ink) !important;
	color: var(--bbf-ink) !important;
	box-shadow: 0 6px 16px rgba(12, 31, 61, .12);
}

.gform_wrapper.gravity-theme .gform_button_select_files:focus-visible {
	outline: 2px solid var(--bbf-accent);
	outline-offset: 2px;
}

/* The "Delete" link GF prints beside an uploaded file arrives in the theme's
   pink for the same reason. */
.gform_wrapper.gravity-theme .gform_delete_file,
.gform_wrapper.gravity-theme .gfield_fileupload_filename+button,
.gform_wrapper.gravity-theme .gform_uploaded_files .gform_delete {
	background: transparent !important;
	color: var(--bbf-error) !important;
	border: none !important;
	box-shadow: none;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* "Drop files here or" — GF splits this across spans, and the theme was
   colouring part of it. Stated once on the container so the whole sentence
   reads in one colour. */
.gform_wrapper.gravity-theme .gform_drop_instructions {
	display: block;
	color: var(--bbf-muted);
	margin-bottom: 12px;
}

.gform_wrapper.gravity-theme .gform_fileupload_rules {
	font-size: 12px;
	color: var(--bbf-muted);
}

/* ── Multi-page progress ── */
.gform_wrapper.gravity-theme .gf_progressbar_wrapper {
	margin-bottom: 26px;
}

/* Forms 4 and 5 hide this bar outright and print the custom [bb360_steps]
   indicator instead — a 4px navy track under a "STEP 1 OF 6" caption. That
   shortcode is only on those two pages, so hiding the bar here would leave the
   other nine forms with no progress indicator at all. Restyled to match the
   bb360-steps look instead: same navy, same thin track. */
.gform_wrapper.gravity-theme .gf_progressbar {
	background: #EEEEEE;
	border-radius: 20px;
	overflow: hidden;
}

/* .percentbar_blue is Gravity Forms' own colour class and carries the stock
   blue at the same specificity as a bare .gf_progressbar_percentage, so which
   one won came down to stylesheet order — and GF's loads last. Naming the class
   here is what settles it. GF picks the suffix from the form's progress-bar
   colour setting, so the other stock choices are listed too: change the setting
   in the form editor and the bar must not revert to a stock colour. */
.gform_wrapper.gravity-theme .gf_progressbar_percentage,
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_blue,
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_gray,
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_green,
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_orange,
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_red,
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_custom {
	background: var(--bbf-ink);
	border-radius: 20px;
}

/* The "16%" sitting inside the fill. The bb360-steps indicator states the step
   in words above the track and shows no number, so the figure is dropped rather
   than restyled — and a percentage that reads 16% on step 1 of 6 is a second,
   noisier way of saying what the caption already said. Kept for screen readers
   rather than display:none. */
.gform_wrapper.gravity-theme .gf_progressbar_percentage span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Without the number inside it the fill has nothing to give it height. */
.gform_wrapper.gravity-theme .gf_progressbar,
.gform_wrapper.gravity-theme .gf_progressbar_percentage {
	height: 8px;
}

.gform_wrapper.gravity-theme .gf_progressbar_title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bbf-muted);
}

/* ── Buttons ── */
.gform_wrapper.gravity-theme .gform_footer,
.gform_wrapper.gravity-theme .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 28px;
	padding-top: 0;
}

/* Form 4's button shape — 8px radius, medium weight, uppercase with wide
   tracking — at a smaller scale than form 4's literal 18px/3.2px. Form 4's
   button spans the full width of its column, so it can carry that size; these
   sit inline in an 800px card, where the same figures made Next look like a
   banner. Sized down at the user's request: 16px ceiling, 2.4px tracking. */
.gform_wrapper.gravity-theme .gform_button,
.gform_wrapper.gravity-theme .gform_next_button,
.gform_wrapper.gravity-theme .gform_previous_button {
	font-family: Montserrat, sans-serif;
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	padding: clamp(12px, 1.1vw, 14px) clamp(24px, 2.6vw, 34px);
	border-radius: 8px;
	border: 1px solid var(--bbf-ink);
	background: var(--bbf-ink);
	color: #fff;
	/* Wide enough that Next and Back read as the primary action on the page
	   rather than as inline links. */
	min-width: clamp(130px, 13vw, 160px);
	min-height: 46px;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(12, 31, 61, .14);
	transition: background .18s ease, border-color .18s ease, color .18s ease,
		box-shadow .18s ease, transform .18s ease;
}

.gform_wrapper.gravity-theme .gform_button:hover,
.gform_wrapper.gravity-theme .gform_next_button:hover {
	background: var(--bbf-accent);
	border-color: var(--bbf-accent);
}

/* Secondary: going back is not the action being encouraged. */
.gform_wrapper.gravity-theme .gform_previous_button {
	background: transparent;
	color: var(--bbf-ink);
	border-color: var(--bbf-line);
}

.gform_wrapper.gravity-theme .gform_previous_button:hover {
	border-color: var(--bbf-ink);
	background: var(--bbf-panel);
}

/* ══ Depth ══
   One shadow vocabulary, so the layers read in order: the card sits on the
   page, the choice rows and fields sit on the card, the button sits above
   everything as the thing to press. Each step is a wider, softer shadow in the
   same navy the palette already uses — a grey or black shadow against this
   warm white reads as dirt rather than depth. */

/* The card: broad and soft. It lifts the form off the page without announcing
   itself as a raised object. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) {
	box-shadow: 0 18px 50px rgba(12, 31, 61, .10),
		0 2px 8px rgba(12, 31, 61, .04);
}

/* Fields and choice rows: barely there at rest — enough to separate them from
   the card, not enough to compete with it. */
.gform_wrapper.gravity-theme .gchoice,
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="password"],
.gform_wrapper.gravity-theme input[type="date"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	box-shadow: 0 1px 3px rgba(12, 31, 61, .05);
}

/* A choice row is a button, so it answers the pointer: a little further off the
   card on hover, and further still once chosen. */
.gform_wrapper.gravity-theme .gchoice:hover {
	box-shadow: 0 6px 16px rgba(12, 31, 61, .09);
}

.gform_wrapper.gravity-theme .gchoice:has(input:checked) {
	box-shadow: 0 6px 18px rgba(234, 91, 4, .16);
}

/* Focus keeps its own ring rather than a shadow — the ring is the accessibility
   signal and must not be softened into decoration. Stated after the box-shadow
   rules above so it wins on the focused field. */
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	box-shadow: 0 0 0 3px rgba(12, 31, 61, .12);
}

/* The button lifts on hover and presses back down on click — the shadow
   shrinking as it goes is what sells the press. */
.gform_wrapper.gravity-theme .gform_button:hover,
.gform_wrapper.gravity-theme .gform_next_button:hover {
	box-shadow: 0 6px 16px rgba(234, 91, 4, .24);
	transform: translateY(-1px);
}

.gform_wrapper.gravity-theme .gform_button:active,
.gform_wrapper.gravity-theme .gform_next_button:active,
.gform_wrapper.gravity-theme .gform_previous_button:active {
	box-shadow: 0 2px 6px rgba(12, 31, 61, .18);
	transform: translateY(1px);
}

/* Secondary action, so it sits flatter than Next at every stage. */
.gform_wrapper.gravity-theme .gform_previous_button {
	box-shadow: 0 1px 3px rgba(12, 31, 61, .06);
}

.gform_wrapper.gravity-theme .gform_previous_button:hover {
	box-shadow: 0 6px 16px rgba(12, 31, 61, .12);
	transform: translateY(-1px);
}

/* Anyone who has asked not to be moved gets the colour changes and none of the
   travel. The shadows stay: they are not motion. */
@media (prefers-reduced-motion: reduce) {

	.gform_wrapper.gravity-theme .gform_button,
	.gform_wrapper.gravity-theme .gform_next_button,
	.gform_wrapper.gravity-theme .gform_previous_button,
	.gform_wrapper.gravity-theme .gchoice {
		transition: none;
		transform: none !important;
	}
}

/* ── Responsive ──
   Gravity Forms writes the column spans as inline grid-column values, so the
   single-column stack has to be forced rather than set. */
@media (max-width: 640px) {
	.gform_wrapper.gravity-theme .gform_fields {
		row-gap: 18px;
	}

	.gform_wrapper.gravity-theme .gfield {
		grid-column: 1 / -1 !important;
	}

	/* 16px is the floor below which iOS Safari zooms the page on focus, which
	   on a long questionnaire leaves the customer scrolled sideways. */
	.gform_wrapper.gravity-theme input[type="text"],
	.gform_wrapper.gravity-theme input[type="email"],
	.gform_wrapper.gravity-theme input[type="tel"],
	.gform_wrapper.gravity-theme input[type="url"],
	.gform_wrapper.gravity-theme input[type="number"],
	.gform_wrapper.gravity-theme input[type="password"],
	.gform_wrapper.gravity-theme input[type="date"],
	.gform_wrapper.gravity-theme select,
	.gform_wrapper.gravity-theme textarea {
		font-size: 16px;
	}

	/* Full-width and stacked. Only the visual order is reversed, so the tab
	   order still reaches Back before Next. */
	.gform_wrapper.gravity-theme .gform_footer,
	.gform_wrapper.gravity-theme .gform_page_footer {
		flex-direction: column-reverse;
		gap: 10px;
	}

	.gform_wrapper.gravity-theme .gform_button,
	.gform_wrapper.gravity-theme .gform_next_button,
	.gform_wrapper.gravity-theme .gform_previous_button {
		width: 100%;
		padding: 16px 20px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact Us — SEND MESSAGE button
   ──────────────────────────────────────────────────────────────────────────
   Form 1 runs on Gravity Forms' Orbital theme, not the `gravity-theme` class
   the intake forms use, so neither the form 4 rules nor the shared
   `.gform_wrapper.gravity-theme .gform_button` block above reaches it — it was
   left on Orbital's stock blue pill. These rules give it the same button as the
   rest of the site: navy fill, 8px radius, uppercase Montserrat with wide
   tracking, darkening with a small lift on hover.

   Selectors are ID-based so they outrank Orbital's own `.gform-theme--framework`
   button rules without !important. Orbital also drives its buttons from
   `--gf-ctrl-btn-*` custom properties, which the inline <style> block the form
   prints sets per form; those are reset here rather than fought, so the padding
   and height come from this rule alone.
   ══════════════════════════════════════════════════════════════════════════ */
#gform_wrapper_1 .gform_footer,
#gform_wrapper_1 .gform-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 0;
}

#gform_wrapper_1 .gform_button,
#gform_wrapper_1 #gform_submit_button_1 {
	/* Neutralise Orbital's sizing tokens so they cannot re-inflate the button. */
	--gf-ctrl-btn-size: auto;
	--gf-ctrl-btn-padding-x: 0;
	--gf-ctrl-btn-font-size: inherit;

	box-shadow: 0px 0px 50px 0px #FFFFFF66;
	border: 1px solid #0C1F3D;
	background: #0C1F3D;
	color: #FFF;
	padding: 16px clamp(30px, 4vw, 50px);
	border-radius: 8px;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 24px;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
		box-shadow 0.2s ease;
}

#gform_wrapper_1 .gform_button:hover,
#gform_wrapper_1 #gform_submit_button_1:hover {
	background: #000000;
	color: #FFF;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(12, 31, 61, 0.22);
}

#gform_wrapper_1 .gform_button:active,
#gform_wrapper_1 #gform_submit_button_1:active {
	transform: translateY(1px);
	box-shadow: 0 2px 6px rgba(12, 31, 61, 0.18);
}

#gform_wrapper_1 .gform_button:focus-visible,
#gform_wrapper_1 #gform_submit_button_1:focus-visible {
	outline: 2px solid #0C1F3D;
	outline-offset: 3px;
}

/* Full width on phones, matching how the intake form buttons behave, and the
   tracking eases off so the label does not wrap inside the button. */
@media (max-width: 600px) {

	#gform_wrapper_1 .gform_button,
	#gform_wrapper_1 #gform_submit_button_1 {
		width: 100%;
		padding: 16px 20px;
		letter-spacing: 2.4px;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   Date picker — single-input variant
   ──────────────────────────────────────────────────────────────────────────
   The calendar trigger was dropping onto its own line under the field. The
   container is a wrapping flex row and the input above is set to width:100%,
   so the input alone filled the row and the trigger had nowhere to sit but the
   next one. The input is given a flex basis instead, leaving room beside it.

   Scoped away from forms 4 and 5: those carry their own date rules keyed to
   #gform_wrapper_4 / #gform_wrapper_5 and are the approved layout everything
   else was standardised against — they are deliberately left alone. The :not()
   selectors also raise specificity above the width:100% rule, so no
   !important is needed.

   Applies to the single "mm/dd/yyyy + icon" variant only. The three-box
   MM / DD / YYYY variant keeps its own `ch` widths and flex:0 0 auto, which
   these rules do not touch.
   ══════════════════════════════════════════════════════════════════════════ */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date input.datepicker {
	flex: 1 1 200px;
	width: auto;
	max-width: 260px;
}

/* The trigger itself. Gravity Forms renders it as a button in 2.5+ and as an
   <input type="image"> on older markup; both are matched so the field looks
   the same whichever this install produces. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date .ui-datepicker-trigger,
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date input[type="image"] {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bbf-line, #D9DFE6);
	border-radius: 8px;
	background: var(--bbf-panel, #FAFBFC);
	color: var(--bbf-ink, #0C1F3D);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}

.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date .ui-datepicker-trigger:hover,
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date input[type="image"]:hover {
	border-color: var(--bbf-ink, #0C1F3D);
	background: #fff;
}

.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date .ui-datepicker-trigger:focus-visible,
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date input[type="image"]:focus-visible {
	outline: 2px solid var(--bbf-ink, #0C1F3D);
	outline-offset: 2px;
}

/* The icon inside the trigger, whichever element carries it. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date .ui-datepicker-trigger img,
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date .ui-datepicker-trigger svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* On a phone the field takes the row and the trigger sits beside it rather
   than wrapping under, which is what started this. */
@media (max-width: 600px) {

	.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_date input.datepicker {
		flex: 1 1 auto;
		max-width: none;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   File / image upload — everything except forms 4 and 5
   ──────────────────────────────────────────────────────────────────────────
   The rule near the top of this file hides the native file input on EVERY
   form:

       .ginput_container_fileupload input[type="file"] { position:absolute; … }

   That was written for form 4, which draws its own drop zone and triggers the
   hidden input from it. Every other Beluga form has no such zone, so the
   control was hidden with nothing in its place — the field read as a bare
   label and gave no sign it wanted a file at all.

   Rather than edit that rule and risk form 4's zone, the input is restored
   here for everything else and given an upload area of its own: a dashed
   drop-zone box, a real button, and a line of instruction. Forms 4 and 5 are
   excluded, so their approved layout is untouched — and the :not() selectors
   also carry the specificity needed to overturn the hide above.
   ══════════════════════════════════════════════════════════════════════════ */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload input[type="file"] {
	/* Undo every property of the visually-hidden rule. */
	position: static;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border: 0;
	background: none;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	color: var(--bbf-muted, #5A6678);
	cursor: pointer;
}

/* The area itself: unmistakably a place to drop or choose a file. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 26px 20px 22px;
	border: 2px dashed var(--bbf-line, #D9DFE6);
	border-radius: 10px;
	background: var(--bbf-panel, #FAFBFC);
	text-align: center;
	transition: border-color .18s ease, background .18s ease;
}

.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload:hover,
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload:focus-within {
	border-color: var(--bbf-ink, #0C1F3D);
	background: #FFF;
}

/* The instruction. Decorative only — the field's own label and description
   still carry the real wording, so nothing here is load-bearing for a screen
   reader. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload::before {
	content: "Upload a photo or file";
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .4px;
	color: var(--bbf-ink, #0C1F3D);
}

.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload::after {
	content: "JPG, PNG, HEIC or PDF — make sure the image is clear and legible";
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	color: var(--bbf-muted, #5A6678);
	max-width: 34ch;
	line-height: 1.5;
}

/* The browser's own "Choose file" control, given the same shape as the
   secondary buttons elsewhere on the form. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload input[type="file"]::file-selector-button {
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	padding: 11px 24px;
	margin-right: 12px;
	border-radius: 8px;
	border: 1px solid var(--bbf-ink, #0C1F3D);
	background: var(--bbf-ink, #0C1F3D);
	color: #FFF;
	cursor: pointer;
	transition: background .18s ease, box-shadow .18s ease;
}

.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload input[type="file"]::file-selector-button:hover {
	background: #000;
	box-shadow: 0 6px 16px rgba(12, 31, 61, .18);
}

.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload input[type="file"]:focus-visible {
	outline: 2px solid var(--bbf-accent, #EA5B04);
	outline-offset: 4px;
	border-radius: 8px;
}

/* Multi-file fields draw their own drop area and Select Files button, both
   already styled further up. The dashed box would double the border, so it is
   dropped when that markup is present. */
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload:has(.gform_drop_area) {
	border: 0;
	padding: 0;
	background: none;
}

.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload:has(.gform_drop_area)::before,
.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload:has(.gform_drop_area)::after {
	content: none;
}

@media (max-width: 600px) {

	.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload {
		padding: 20px 14px 18px;
	}

	.gform_wrapper.gravity-theme:not(#gform_wrapper_4):not(#gform_wrapper_5) .ginput_container_fileupload input[type="file"]::file-selector-button {
		padding: 11px 16px;
		letter-spacing: 1.2px;
	}
}

/* Homepage after-hero icon list.

   Elementor's inline list keeps the items on one line and centred, which on a
   phone wraps mid-phrase and leaves the icons ragged. Stacked left-aligned
   rows read better at that width. */

@media (max-width: 767px) {

	.betterbody360-afterhero-ms.elementor-align-center {
		text-align: left !important;
	}

	.betterbody360-afterhero-ms .elementor-inline-items {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left !important;
		width: 100% !important;
		max-width: 100% !important;
		row-gap: 20px !important;
		margin: 0 !important;
	}

	.betterbody360-afterhero-ms .elementor-inline-items .elementor-icon-list-item {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		white-space: normal !important;
		width: 100% !important;
		text-align: left !important;
	}

	.betterbody360-afterhero-ms .elementor-inline-items .elementor-icon-list-icon {
		flex-shrink: 0 !important;
		width: 20px !important;
		display: inline-flex !important;
		justify-content: center !important;
	}

	.betterbody360-afterhero-ms .elementor-inline-items .elementor-icon-list-text {
		text-align: left !important;
		flex: 1 !important;
	}
}

@media (max-width: 1441px) {
	.partner-box-ms {
		word-wrap: break-word;
	}

	.partner-box-ms h3 {
		font-size: 14px !important;
	}
}

@media (max-width: 1201px) {
	.partner-box-ms {
		word-wrap: break-word;
	}

	.partner-box-ms h3 {
		font-size: 12px !important;
	}
}

.col-icon-box-ms .elementor-icon i,
.col-icon-box-ms .elementor-icon svg {
	margin: 16px 0 0 0;
}

@media (max-width: 1440px) {

	.col-icon-box-ms .elementor-icon i,
	.col-icon-box-ms .elementor-icon svg {
		margin: 10px 0 0 0;
	}
}



/* BB360 - "A Leaner, Healthier You" connector lines.
   Scoped to widget-level classes only, so it does not depend on container classes. */
.bb-pill {
	position: relative;
	--a: 40deg;
	--stub: 68px;
	--seg: 112px
}

.bb-pill:before,
.bb-pill:after {
	content: "";
	position: absolute;
	top: 50%;
	height: 2px;
	background: #E8551F
}

[class*="bb-pill-left-"]:after {
	left: 100%;
	width: var(--stub)
}

[class*="bb-pill-left-"]:before {
	left: calc(100% + var(--stub));
	width: var(--seg);
	transform-origin: 0 50%;
	transform: rotate(var(--a))
}

[class*="bb-pill-right-"]:after {
	right: 100%;
	width: var(--stub)
}

[class*="bb-pill-right-"]:before {
	right: calc(100% + var(--stub));
	width: var(--seg);
	transform-origin: 100% 50%;
	transform: rotate(calc(var(--a) * -1))
}

.bb-pill-left-4 {
	--a: -12deg
}

.bb-pill-left-5,
.bb-pill-left-6,
.bb-pill-left-7 {
	--a: -40deg
}

.bb-pill-right-4 {
	--a: 12deg
}

.bb-pill-right-5,
.bb-pill-right-6,
.bb-pill-right-7 {
	--a: -40deg
}

.bb-focus-img img {
	max-height: 700px;
	object-fit: contain
}

@media(max-width:1024px) {

	.bb-pill:before,
	.bb-pill:after {
		display: none
	}

	.bb-focus-img img {
		max-height: 360px
	}
}



/* Strong white glow on banner heading + subtext */
.shadow-ms .elementor-heading-title {
	text-shadow:
		0 0 6px rgba(255, 255, 255, 1),
		0 0 14px rgba(255, 255, 255, 1),
		0 0 28px rgba(255, 255, 255, 0.95),
		0 0 48px rgba(255, 255, 255, 0.85),
		0 0 72px rgba(255, 255, 255, 0.7);
}

/* Dense white haze behind the whole text block */
.shadow-ms {
	position: relative;
	z-index: 1;
}

.shadow-ms::before {
	content: "";
	position: absolute;
	inset: -30px -50px;
	background: radial-gradient(ellipse at center,
			rgba(255, 255, 255, 0.9) 0%,
			rgba(255, 255, 255, 0.65) 50%,
			rgba(255, 255, 255, 0) 80%);
	filter: blur(16px);
	z-index: -1;
	pointer-events: none;
}