/**
 * JASERIE Bundle Builder.
 *
 * Palette is the FlyHugz reference module's own, not JASERIE's. That is a
 * deliberate, owner-approved exception recorded in DESIGN.md on 2026-08-06 and
 * scoped to this widget. Everything else on the site still takes colour from
 * DESIGN.md, so do not lift these values into other components.
 *
 * Montserrat is already the JASERIE body font, so no webfont is loaded here.
 */

.jbb {
	--jbb-navy: #0a1b38;
	--jbb-navy2: #16345f;
	--jbb-coral: #ff6b6b;
	--jbb-coral2: #ff8a5b;
	--jbb-coral-dk: #e85d48;
	--jbb-cream: #f7f4ef;
	--jbb-cream2: #fbeee6;
	--jbb-text: #2d3436;
	--jbb-muted: #6f7585;
	--jbb-line: #e8e2d6;
	--jbb-gold: #ffb43b;
	--jbb-green: #1f8a5b;
	--jbb-green-lt: #7ed0a4;
	--jbb-live-bg: #eef7f1;
	--jbb-live-text: #5a8a6f;
	--jbb-white: #fff;

	box-sizing: border-box;
	/* Fills whatever column it is dropped into. A page builder already controls
	   the column width, so a fixed width here only ever fought with it. Pass
	   max_width="480px" on the shortcode to cap it. */
	width: 100%;
	max-width: var(--jbb-max-width, 100%);
	margin: 0 auto;
	color: var(--jbb-text);
	font-family: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

.jbb *,
.jbb *::before,
.jbb *::after {
	box-sizing: inherit;
}

/* Own visually-hidden helper. Themes define .screen-reader-text, but this
   widget also renders inside Elementor templates and standalone previews where
   that class may not exist, and an undefined one puts the label text visibly
   on top of the checkbox. */
.jbb__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Rounded on all four sides, with nothing above the urgency strip. overflow
   hidden lets that strip inherit the card's top corners instead of needing its
   own radius that has to be kept in sync. */
.jbb__card {
	background: var(--jbb-white);
	border: 1px solid var(--jbb-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(10, 27, 56, 0.12);
}

.jbb__body {
	padding: 12px;
}

/* WooCommerce injects its own "View cart" link after an add-to-cart event.
   It lands inside this widget, unstyled, directly under the call to action.
   The side cart opens on the same event and is the intended destination. */
.jbb .added_to_cart,
.jbb__card .added_to_cart {
	display: none !important;
}

/* ---------------------------------------------------------------- heading */

.jbb__head {
	text-align: center;
	margin-bottom: 12px;
}

.jbb__title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--jbb-navy);
}

.jbb__subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--jbb-muted);
}

/* --------------------------------------------------------------- urgency */

.jbb__urg {
	margin: 0;
	padding: 11px 14px;
	background: var(--jbb-cream2);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.jbb__urg-hl {
	font-weight: 800;
	color: var(--jbb-coral-dk);
}

.jbb__cd {
	margin-left: 4px;
	font-weight: 800;
	color: var(--jbb-coral-dk);
	white-space: nowrap;
}

/* ----------------------------------------------------------------- tiers */

.jbb__tiers {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jbb__tier {
	position: relative;
	border: 2px solid var(--jbb-line);
	border-radius: 12px;
	background: var(--jbb-white);
	transition: border-color 0.15s ease, background-color 0.15s ease,
		box-shadow 0.15s ease, transform 0.15s ease;
}

/* Desktop hover, matching the reference: the row you are pointing at warms and
   lifts slightly, so the whole ladder feels selectable rather than static.
   Hover only, so it never fires on touch where there is no pointer. */
@media (hover: hover) and (pointer: fine) {
	.jbb__tier:not(.is-selected):not(.is-soldout):hover {
		border-color: var(--jbb-coral2);
		background: var(--jbb-cream2);
		box-shadow: 0 6px 18px rgba(10, 27, 56, 0.1);
		transform: translateY(-1px);
	}

	.jbb__tier:not(.is-selected):not(.is-soldout):hover .jbb__radio {
		border-color: var(--jbb-coral2);
	}
}

.jbb__tier.is-flagged {
	margin-top: 10px;
}

.jbb__tier.is-selected {
	border-color: var(--jbb-coral);
	background: linear-gradient(180deg, var(--jbb-white) 0%, var(--jbb-cream2) 100%);
}

.jbb__tier.is-soldout {
	opacity: 0.55;
}

.jbb__flag {
	position: absolute;
	top: -11px;
	right: 12px;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--jbb-navy);
	color: var(--jbb-white);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jbb__flag--value {
	background: var(--jbb-coral);
}

.jbb__ribbon {
	position: absolute;
	top: -11px;
	left: 12px;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--jbb-gold);
	color: var(--jbb-navy);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jbb__trow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px;
	cursor: pointer;
}

.jbb__tier.is-soldout .jbb__trow {
	cursor: not-allowed;
}

/* The native control stays in the accessibility tree and keeps keyboard
   support; the painted circle next to it is what people actually see. */
.jbb__radio-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.jbb__radio {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--jbb-line);
	border-radius: 50%;
	background: var(--jbb-white);
}

.jbb__tier.is-selected .jbb__radio {
	border-color: var(--jbb-coral);
	box-shadow: inset 0 0 0 4px var(--jbb-coral);
}

.jbb__radio-input:focus-visible + .jbb__radio {
	outline: 2px solid var(--jbb-navy2);
	outline-offset: 2px;
}

.jbb__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--jbb-cream);
}

.jbb__tinfo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

/* Inline flow, not flex. The reference puts the savings badge immediately
   after the last word of the name, so a name long enough to wrap keeps the
   badge tucked against it instead of dropping it onto a line of its own. */
.jbb__tline1 {
	display: block;
	line-height: 1.3;
}

.jbb__tname {
	font-size: 16px;
	font-weight: 800;
	color: var(--jbb-navy);
	letter-spacing: -0.01em;
}

.jbb__tbadge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	position: relative;
	top: -1px;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--jbb-coral);
	color: var(--jbb-white);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
}

.jbb__tsub {
	font-size: 12px;
	color: var(--jbb-muted);
}

.jbb__tsoldout,
.jbb__asoldout {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--jbb-coral-dk);
}

/* The three price lines stack. They are spans inside a span, so without an
   explicit display they run together on one line, and the resulting wide block
   squeezes the tier name until it wraps one word per line. */
.jbb__tprices {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

.jbb__twas,
.jbb__tprice,
.jbb__tper {
	display: block;
}

.jbb__twas {
	font-size: 12px;
	color: var(--jbb-muted);
	text-decoration: line-through;
}

.jbb__tprice {
	font-size: 18px;
	font-weight: 800;
	color: var(--jbb-navy);
	letter-spacing: -0.02em;
}

.jbb__tper {
	font-size: 11px;
	font-weight: 700;
	color: var(--jbb-green);
}

/* ------------------------------------------------------------------- cta */

/* The gradient runs left to right across the bar rather than corner to corner,
   which is what makes it read as a gradient at this aspect ratio. A 135deg
   ramp on something 3px tall per unit of width is just a flat colour. */
.jbb__cta {
	display: block;
	width: 100%;
	margin: 14px 0 0;
	padding: 15px 16px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(100deg, #061223 0%, var(--jbb-navy) 38%, var(--jbb-navy2) 100%);
	color: var(--jbb-white);
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	box-shadow: 0 8px 20px rgba(10, 27, 56, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.jbb__cta:hover {
		filter: brightness(1.12);
		transform: translateY(-2px);
		box-shadow: 0 14px 28px rgba(10, 27, 56, 0.34);
	}
}

.jbb__cta:active {
	transform: translateY(0);
	box-shadow: 0 6px 14px rgba(10, 27, 56, 0.26);
}

.jbb__cta:disabled {
	cursor: wait;
	filter: grayscale(0.4);
	transform: none;
}

.jbb__cta-main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.jbb__cta-label,
.jbb__cta-total {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.jbb__cta-bar {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.35);
}

.jbb__cta-per {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	opacity: 0.9;
}

.jbb__cta-pereach {
	font-weight: 600;
	opacity: 0.8;
}

.jbb__cta-guar {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	opacity: 0.75;
}

.jbb__error {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--jbb-cream2);
	color: var(--jbb-coral-dk);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

/* ------------------------------------------------------------ live count */

/* Reference values, taken from the FlyHugz module: pale green panel, mid-green
   text, 10.5px semibold. */
.jbb__live {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 8px 0 0;
	padding: 7px;
	border-radius: 10px;
	background: var(--jbb-live-bg);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--jbb-live-text);
}

.jbb__live b {
	color: var(--jbb-live-text);
	font-weight: 700;
}

.jbb__dot {
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--jbb-green);
	animation: jbb-pulse 1.4s ease-in-out infinite;
}

@keyframes jbb-pulse {
	0%,
	100% {
		background: var(--jbb-green);
	}

	50% {
		background: var(--jbb-green-lt);
	}
}

/* Anyone who has asked the browser to stop moving things means it. */
@media (prefers-reduced-motion: reduce) {
	.jbb__dot {
		animation: none;
	}
}

/* -------------------------------------------------------------- kit strip */

.jbb__kit {
	margin-top: 16px;
}

.jbb__kithead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.jbb__kitline {
	flex: 1 1 auto;
	height: 1px;
	background: var(--jbb-line);
}

.jbb__kittitle {
	font-size: 14px;
	font-weight: 800;
	color: var(--jbb-navy);
	white-space: nowrap;
}

.jbb__kittag {
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--jbb-cream);
	color: var(--jbb-green);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
}

.jbb__addons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jbb__addon {
	border: 1px solid var(--jbb-line);
	border-radius: 10px;
	background: var(--jbb-white);
}

.jbb__addon.is-collapsed {
	display: none;
}

.jbb__addon.is-expanded {
	display: block;
}

.jbb__addon.is-soldout {
	opacity: 0.55;
}

.jbb__arow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
}

.jbb__check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.jbb__check {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--jbb-line);
	border-radius: 5px;
	background: var(--jbb-white);
	cursor: pointer;
}

.jbb__check-input:checked + .jbb__check {
	border-color: var(--jbb-coral);
	background: var(--jbb-coral);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.jbb__check-input:focus-visible + .jbb__check {
	outline: 2px solid var(--jbb-navy2);
	outline-offset: 2px;
}

.jbb__athumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--jbb-cream);
}

.jbb__ainfo {
	flex: 1 1 auto;
	min-width: 0;
}

/* Inline flow, not flex.
 *
 * As a flex row the product name was its own flex item, so on a narrow screen
 * it shrank to min-content and printed one word per line beside the stepper.
 * In normal inline flow the name simply wraps and the stepper sits after it. */
.jbb__aname {
	display: block;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--jbb-navy);
}

.jbb__aname > .jbb__stepper {
	vertical-align: middle;
	margin-left: 8px;
}

.jbb__abadge {
	display: inline-block;
	margin-top: 3px;
	padding: 2px 7px;
	border-radius: 20px;
	background: var(--jbb-cream2);
	color: var(--jbb-coral-dk);
	font-size: 10px;
	font-weight: 800;
}

.jbb__adesc {
	margin-top: 2px;
	font-size: 12px;
	color: var(--jbb-muted);
}

/* --------------------------------------------------------------- stepper */

/* One outlined pill holding minus, number and plus, as in the reference.
   The declarations are scoped under .jbb and marked important because the
   JASERIE theme paints every bare button with its own background colour using
   !important, which turned the two steps into tan blobs either side of a
   floating input. */
.jbb .jbb__stepper {
	display: inline-flex;
	align-items: center;
	height: 28px;
	border: 1px solid var(--jbb-line);
	border-radius: 9px;
	background: var(--jbb-white);
	overflow: hidden;
}

.jbb .jbb__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--jbb-muted) !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.jbb .jbb__step:hover {
	background: var(--jbb-cream) !important;
	color: var(--jbb-navy) !important;
}

.jbb .jbb__step:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.jbb .jbb__qty {
	width: 32px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--jbb-navy);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.jbb__qty::-webkit-outer-spin-button,
.jbb__qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.jbb__aprice {
	flex: 0 0 auto;
	text-align: right;
}

.jbb__aretail {
	font-size: 11px;
	color: var(--jbb-muted);
	text-decoration: line-through;
}

.jbb__asale {
	font-size: 15px;
	font-weight: 800;
	color: var(--jbb-coral-dk);
}

.jbb__aper {
	font-size: 11px;
	font-weight: 700;
	color: var(--jbb-green);
}

.jbb__seemore {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--jbb-navy);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	text-decoration: underline;
	cursor: pointer;
}

.jbb-admin-warning {
	padding: 10px 12px;
	border: 1px solid #d63638;
	border-radius: 8px;
	background: #fcf0f1;
	color: #8a1f21;
	font-size: 14px;
	font-weight: 600;
}

/* -------------------------------------------------------------- narrow */

/* Mobile.
 *
 * Every size below was measured off the FlyHugz module at 390px rather than
 * guessed, because the desktop scale shrunk badly on a phone: tier names broke
 * to one word per line and the kit row's name, badge and stepper fought for the
 * same 180px. */
@media (max-width: 480px) {
	.jbb {
		font-size: 15px;
	}

	.jbb__body {
		padding: 9px;
	}

	.jbb__tier {
		border-width: 2px;
		border-radius: 11px;
	}

	.jbb__trow {
		gap: 8px;
		padding: 8px 9px;
	}

	.jbb__thumb {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.jbb__tname {
		font-size: 13px;
	}

	.jbb__tsub {
		font-size: 9.5px;
	}

	.jbb__tbadge {
		margin-left: 5px;
		padding: 2px 6px;
		border-radius: 6px;
		font-size: 8.5px;
	}

	.jbb__tprice {
		font-size: 15px;
	}

	.jbb__twas {
		font-size: 10.5px;
	}

	.jbb__tper {
		font-size: 9.5px;
	}

	.jbb__cta {
		padding: 14px 16px;
		border-radius: 13px;
	}

	.jbb__cta-label,
	.jbb__cta-total {
		font-size: 15px;
	}

	.jbb__live {
		padding: 5px 7px;
		font-size: 10px;
	}

	.jbb__kittitle {
		font-size: 11.5px;
	}

	/* The kit row is the piece that broke hardest on a phone. Fixed-width
	   thumbnail and price column, everything else to the flexible middle,
	   and min-width:0 on that middle so a long product name wraps normally
	   instead of collapsing to one word per line. */
	.jbb__arow {
		gap: 8px;
		padding: 9px 8px;
	}

	.jbb__athumb {
		width: 38px;
		height: 38px;
		border-radius: 9px;
	}

	.jbb__check {
		width: 18px;
		height: 18px;
	}

	.jbb__ainfo {
		flex: 1 1 auto;
		min-width: 0;
	}

	.jbb__aname {
		gap: 5px;
		font-size: 11px;
		line-height: 1.25;
	}

	.jbb__abadge {
		padding: 2px 7px;
		font-size: 8.5px;
	}

	.jbb__adesc {
		font-size: 10.5px;
	}

	.jbb__aprice {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.jbb__aretail {
		font-size: 10px;
	}

	.jbb__asale {
		font-size: 13px;
	}

	.jbb__aper {
		font-size: 9px;
	}

	.jbb .jbb__stepper {
		height: 24px;
	}

	.jbb .jbb__step {
		width: 22px;
		font-size: 13px;
	}

	.jbb .jbb__qty {
		width: 28px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jbb__tier,
	.jbb__cta {
		transition: none;
	}
}