/* Bump and Beyond base styles — "Quiet Ledger" v1.0 */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/nunitosans-variable.woff2') format('woff2');
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--bb-cream);
	color: var(--bb-ink);
	font-family: var(--bb-font-body);
	font-size: var(--bb-body-size);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 {
	font-family: var(--bb-font-display);
	color: var(--bb-olive-900);
	font-weight: 600;
	margin: 0 0 var(--bb-space-4);
}
h1, .h1 { font-size: var(--bb-h1-size); line-height: 1.08; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--bb-h2-size); line-height: 1.15; }
h3, .h3 { font-size: var(--bb-h3-size); line-height: 1.3; }

p { margin: 0 0 var(--bb-space-4); }

.bb-eyebrow {
	display: inline-block;
	font-family: var(--bb-font-body);
	font-size: var(--bb-eyebrow-size);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bb-olive-700);
	margin-bottom: var(--bb-space-2);
}
.bb-lead { font-size: var(--bb-lead-size); line-height: 1.55; color: var(--bb-muted); }
.bb-small, small { font-size: var(--bb-small-size); line-height: 1.5; }

a { color: var(--bb-olive-900); }

/* ---------- Skip link ---------- */
.skip-link.screen-reader-text {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--bb-olive-900);
	color: var(--bb-cream);
	padding: var(--bb-space-3) var(--bb-space-5);
	z-index: 100000;
	border-radius: 0 0 var(--bb-radius-sm) 0;
	text-decoration: none;
	font-weight: 700;
	transition: top var(--bb-duration-ui) var(--bb-ease);
}
.skip-link.screen-reader-text:focus {
	top: 0;
}
/* The skip-link target is a landmark, not a control: no ring on it. */
.bb-main:focus, .bb-main:focus-visible { outline: none; }

/* ---------- Focus ----------
   Mirrors Hello reset.css's selector list (which paints a black 2px outline +
   white box-shadow at up to 0,3,0 specificity) so the design-system ring wins. */
:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible,
[type="button"]:focus-visible, [type="reset"]:focus-visible, [type="submit"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--bb-under);
	outline-offset: 3px;
	box-shadow: none;
}

/* ---------- Native button reset ----------
   Hello's reset.css paints every <button>/[type=submit] #c36 (pink) on hover/focus.
   Neutralise it to the palette; component classes below override. */
button, [type="button"], [type="reset"], [type="submit"] {
	border-color: var(--bb-olive-900);
	color: var(--bb-olive-900);
	/* Hello uses "transition: all .3s", which also animates the focus ring in. */
	transition: background-color var(--bb-duration-fast) var(--bb-ease), color var(--bb-duration-fast) var(--bb-ease), border-color var(--bb-duration-fast) var(--bb-ease), transform var(--bb-duration-fast) var(--bb-ease);
}
button:hover, button:focus,
[type="button"]:hover, [type="button"]:focus,
[type="reset"]:hover, [type="reset"]:focus,
[type="submit"]:hover, [type="submit"]:focus {
	background-color: var(--bb-sage-100);
	color: var(--bb-olive-900);
}

/* ---------- Buttons ----------
   .bb-btn / .bb-btn-secondary are for plain HTML (header CTA, Woo). They are
   excluded from Elementor widget wrappers: a class typed into a Button widget's
   "CSS Classes" field lands on the outer .elementor-widget div, and styling that
   div painted a second, full-width pill or outline behind the real button. */
.bb-btn:not(.elementor-widget), button.button, input.button, a.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-space-2);
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--bb-radius-pill);
	font-family: var(--bb-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	background: var(--bb-olive-700);
	color: var(--bb-cream);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--bb-duration-fast) var(--bb-ease), transform var(--bb-duration-fast) var(--bb-ease);
}
.bb-btn:not(.elementor-widget):hover, .bb-btn:not(.elementor-widget):focus, button.button:hover, input.button:hover, a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wp-block-button__link:hover {
	background: var(--bb-olive-900);
	color: var(--bb-cream);
}
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--bb-olive-700);
	color: var(--bb-cream);
	padding: 0 24px;
	opacity: .7;
}
.bb-btn:not(.elementor-widget):active, .elementor-button:active, button.button:active, input.button:active, a.button:active {
	transform: translateY(1px);
}
.bb-btn[aria-busy="true"], .button[aria-busy="true"], .elementor-button[aria-busy="true"] {
	opacity: .7;
	pointer-events: none;
}
.elementor-button[aria-disabled="true"], .bb-btn:disabled, .bb-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

.bb-btn-secondary:not(.elementor-widget) {
	background: transparent;
	color: var(--bb-olive-900);
	border: 1.5px solid var(--bb-olive-900);
}
.bb-btn-secondary:not(.elementor-widget):hover { background: var(--bb-sage-100); color: var(--bb-olive-900); }

/* Elementor Button widget: design-system defaults that stay editable.
   (0,2,1) beats Elementor's global-default rule (the kit's Accent = peach,
   which would give 1.2:1 cream-on-peach) but loses to any per-widget style
   set in the editor. Put "bb-btn-secondary" in the widget's CSS Classes
   field for the secondary style. No !important anywhere. */
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-space-2);
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--bb-radius-pill);
	font-family: var(--bb-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	transition: background var(--bb-duration-fast) var(--bb-ease), transform var(--bb-duration-fast) var(--bb-ease);
}
body .elementor-widget-button .elementor-button {
	background-color: var(--bb-olive-700);
	color: var(--bb-cream);
}
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus {
	background-color: var(--bb-olive-900);
	color: var(--bb-cream);
}
body .elementor-widget-button.bb-btn-secondary .elementor-button {
	background-color: transparent;
	color: var(--bb-olive-900);
	border: 1.5px solid var(--bb-olive-900);
}
body .elementor-widget-button.bb-btn-secondary .elementor-button:hover {
	background-color: var(--bb-sage-100);
	color: var(--bb-olive-900);
}

.bb-link, .bb-text-link {
	color: var(--bb-olive-900);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.bb-link:hover, .bb-text-link:hover { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Forms ---------- */
label, .woocommerce form .form-row label {
	display: block;
	font-size: var(--bb-small-size);
	font-weight: 700;
	color: var(--bb-ink);
	margin-bottom: var(--bb-space-1);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], textarea, select,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
	min-height: 48px;
	width: 100%;
	border: 1.5px solid var(--bb-field);
	border-radius: var(--bb-radius-sm);
	background: var(--bb-white);
	padding: 0 16px;
	font-size: 1rem;
	font-family: var(--bb-font-body);
	color: var(--bb-ink);
}
textarea { padding: 12px 16px; min-height: 96px; }
input:focus, textarea:focus, select:focus {
	border-color: var(--bb-under);
}
.bb-field-error input, .woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--bb-over);
}
.bb-field-error-message, .woocommerce form .form-row .woocommerce-invalid-message {
	color: var(--bb-over);
	font-size: var(--bb-small-size);
	margin-top: var(--bb-space-1);
}
.bb-optional-label::after {
	content: " (optional)";
	font-weight: 400;
	color: var(--bb-muted);
}

/* ---------- Cards ---------- */
.bb-card {
	background: var(--bb-white);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-md);
	padding: var(--bb-space-6);
}
@media (max-width: 767px) {
	.bb-card { padding: var(--bb-space-5); }
}
.bb-card-featured {
	background: var(--bb-peach-100);
	color: var(--bb-olive-900);
	box-shadow: var(--bb-shadow-md);
	border-color: transparent;
	position: relative;
}
.bb-badge {
	display: inline-block;
	background: var(--bb-olive-900);
	color: var(--bb-cream);
	border-radius: var(--bb-radius-pill);
	font-size: var(--bb-small-size);
	font-weight: 700;
	padding: 4px 14px;
}

/* ---------- Sections ---------- */
.bb-section {
	padding-block: var(--bb-section-padding);
}
@media (max-width: 1024px) {
	.bb-section { padding-block: var(--bb-section-padding-tablet); }
}
@media (max-width: 767px) {
	.bb-section { padding-block: var(--bb-section-padding-mobile); }
}
.bb-section-sage { background: var(--bb-sage-100); }
.bb-container {
	max-width: var(--bb-container-width);
	margin-inline: auto;
	padding-inline: var(--bb-gutter);
}
@media (max-width: 767px) {
	.bb-container { padding-inline: var(--bb-gutter-mobile); }
}

/* ---------- Header ---------- */
/* Hello's theme.css boxes .site-header/.site-footer (max-width 1140px,
   10px side padding). Ours are full-bleed; the inner wrappers set the width. */
.site-header.bb-header,
.site-footer.bb-footer {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}
.bb-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 900;
	background: var(--bb-cream);
	height: var(--bb-header-height);
	display: flex;
	align-items: center;
	border-bottom: 1px solid transparent;
	transition: border-color var(--bb-duration-ui) var(--bb-ease);
}
.bb-header.bb-scrolled {
	border-bottom-color: var(--bb-line);
}
@media (max-width: 767px) {
	.bb-header { height: var(--bb-header-height-mobile); }
}
.bb-header-inner {
	max-width: var(--bb-container-width);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--bb-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-space-5);
}
@media (max-width: 767px) {
	.bb-header-inner { padding-inline: var(--bb-gutter-mobile); }
}
.bb-wordmark {
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--bb-olive-900);
	white-space: nowrap;
	text-decoration: none;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.bb-wordmark:hover { color: var(--bb-olive-900); }
.bb-nav-primary {
	display: flex;
	align-items: center;
	gap: var(--bb-space-5);
}
.bb-nav-primary ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--bb-space-5);
	margin: 0;
	padding: 0;
}
.bb-nav-primary a {
	font-family: var(--bb-font-body);
	font-weight: 600;
	color: var(--bb-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.bb-nav-primary a:hover { color: var(--bb-olive-700); }

.bb-header-actions {
	display: flex;
	align-items: center;
	gap: var(--bb-space-4);
}
.bb-account-link {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--bb-olive-900);
	text-decoration: none;
	flex-shrink: 0;
}
.bb-account-link:hover { background: var(--bb-sage-100); }

.bb-header .bb-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0; /* Hello's reset adds .5rem 1rem, which squashed the icon to 12px */
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--bb-olive-900);
	flex-shrink: 0;
	transition: background-color var(--bb-duration-fast) var(--bb-ease);
}
.bb-header .bb-menu-toggle:hover,
.bb-header .bb-menu-toggle:focus,
.bb-header .bb-menu-toggle[aria-expanded="true"] {
	background: var(--bb-sage-100);
	color: var(--bb-olive-900);
}
.bb-menu-toggle svg { width: 24px; height: 24px; flex-shrink: 0; }
.bb-menu-toggle .bb-icon-close { display: none; }
.bb-menu-toggle[aria-expanded="true"] .bb-icon-open { display: none; }
.bb-menu-toggle[aria-expanded="true"] .bb-icon-close { display: block; }

@media (max-width: 767px) {
	.bb-nav-primary { display: none; }
	.bb-header .bb-menu-toggle { display: inline-flex; }
	.bb-header-actions .bb-btn.bb-cta-desktop { display: none; }
	/* 176px wordmark + 2 x 44px targets must fit 280px (320 - 2 x 20 gutter).
	   The desktop 24/16px gaps overflowed by 4px at 320. Targets stay 44x44. */
	.bb-header-inner { gap: var(--bb-space-3); }
	.bb-header-actions { gap: var(--bb-space-2); }
}
@media (max-width: 359px) {
	.bb-header-inner { gap: var(--bb-space-2); }
	.bb-header-actions { gap: var(--bb-space-1); }
}

.bb-mobile-panel {
	position: fixed;
	inset: 0;
	top: var(--bb-header-height-mobile);
	background: var(--bb-cream);
	z-index: 899;
	padding: var(--bb-space-5) var(--bb-gutter-mobile);
	display: none;
	overflow-y: auto;
}
.bb-mobile-panel.bb-open { display: block; }
@media (min-width: 768px) {
	.bb-mobile-panel, .bb-mobile-panel.bb-open { display: none; }
}
.bb-mobile-panel ul {
	list-style: none;
	margin: 0 0 var(--bb-space-5);
	padding: 0;
}
.bb-mobile-panel li { border-bottom: 1px solid var(--bb-line); }
.bb-mobile-panel a:not(.bb-btn) {
	display: flex;
	align-items: center;
	min-height: 56px;
	font-family: var(--bb-font-body);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--bb-ink);
	text-decoration: none;
}
.bb-mobile-panel .bb-btn { width: 100%; }
body.bb-menu-open { overflow: hidden; }

/* ---------- Footer ---------- */
.bb-footer {
	background: var(--bb-olive-900);
	color: var(--bb-cream);
	padding-block: var(--bb-space-9) var(--bb-space-6);
}
@media (max-width: 767px) {
	.bb-footer { padding-block: var(--bb-space-8) var(--bb-space-5); }
}
.bb-footer a { color: var(--bb-cream); text-decoration: none; }
.bb-footer a:hover { color: var(--bb-peach-100); } /* underline draw moved to bb-motion.css (background-size technique) */
/* Under-blue ring is 1.95:1 on olive-900; peach is 11.3:1. */
.bb-footer :focus-visible,
.bb-footer a:focus-visible,
.bb-footer button:focus-visible { outline-color: var(--bb-peach-100); }
.bb-footer-email {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.bb-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--bb-space-6);
}
@media (max-width: 767px) {
	.bb-footer-grid { grid-template-columns: 1fr; }
}
.bb-footer-grid .bb-footer-heading {
	color: var(--bb-peach-100);
	font-family: var(--bb-font-body);
	font-size: var(--bb-small-size);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	margin-bottom: var(--bb-space-4);
}
.bb-footer-wordmark {
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	white-space: nowrap;
	display: block;
	margin-bottom: var(--bb-space-2);
}
.bb-footer-tagline { color: var(--bb-peach-100); margin-bottom: var(--bb-space-3); }
.bb-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.bb-footer-grid li a {
	display: flex;
	align-items: center;
	min-height: 44px;
}
.bb-footer-bottom {
	margin-top: var(--bb-space-8);
	padding-top: var(--bb-space-5);
	border-top: 1px solid rgba(255, 253, 248, .18);
	font-size: var(--bb-small-size);
	color: var(--bb-peach-100);
}
/* Instagram slot reserved for later:
<a href="#" class="bb-social-link" aria-label="Instagram">...</a>
*/

/* ---------- Price display ---------- */
.bb-price-free { font-family: var(--bb-font-display); font-weight: 600; font-size: 2.5rem; color: var(--bb-olive-900); }
.bb-price-sale {
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 2.5rem;
	color: var(--bb-olive-900);
}
.bb-price-regular {
	text-decoration: line-through;
	color: var(--bb-muted);
	font-size: 1.125rem;
	margin-left: var(--bb-space-2);
}
.bb-price-early-access {
	display: inline-block;
	font-size: var(--bb-small-size);
	font-weight: 700;
	color: var(--bb-olive-700);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-left: var(--bb-space-2);
}

/* ---------- WooCommerce checkout ---------- */
.woocommerce-checkout #payment { background: var(--bb-sage-100); border-radius: var(--bb-radius-md); }
.woocommerce form .form-row { margin-bottom: var(--bb-space-4); }
.woocommerce-checkout-review-order-table { border-collapse: collapse; }

/* ---------- FAQ accordion (plain <details>; Elementor's widget is styled below) ---------- */
.bb-faq:not(.elementor-widget) details {
	border-bottom: 1px solid var(--bb-line);
}
.bb-faq:not(.elementor-widget) summary {
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	font-family: var(--bb-font-body);
	cursor: pointer;
	list-style: none;
	padding-block: var(--bb-space-3);
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq:not(.elementor-widget) summary::after {
	/* drawn plus; the vertical stroke folds away when open */
	content: '';
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	margin-left: var(--bb-space-4);
	background:
		linear-gradient(var(--bb-olive-700), var(--bb-olive-700)) center / 14px 1.75px no-repeat,
		linear-gradient(var(--bb-olive-700), var(--bb-olive-700)) center / 1.75px 14px no-repeat;
}
.bb-faq:not(.elementor-widget) details[open] summary::after {
	background: linear-gradient(var(--bb-olive-700), var(--bb-olive-700)) center / 14px 1.75px no-repeat;
}

/* ---------- Browser surfaces (sitewide) ---------- */
::selection { background: var(--bb-peach-100); color: var(--bb-ink); }
html {
	caret-color: var(--bb-olive-700);
	accent-color: var(--bb-olive-700);
	scrollbar-color: var(--bb-olive-500) var(--bb-sage-100);
	scrollbar-width: thin;
}
a { text-underline-offset: 0.2em; }
.bb-footer ::selection, .bb-cta-final ::selection { background: var(--bb-peach-100); color: var(--bb-olive-900); }

/* =====================================================================
   Elementor page layout: one container, one rhythm
   Every Elementor page section is `.bb-section` (full-bleed background)
   holding a `.bb-container` (1200px, 24/20px gutter), so section content
   lines up with the header and footer. Elementor's own container spacing
   (10px padding, 20px widget gap, zeroed widget margins) is neutralised
   here, and spacing is set per widget with two custom properties:
   --bb-mt (space above) and --bb-mb (space below).
   ===================================================================== */
/* Not inherited, so a container's own spacing never leaks into its children. */
@property --bb-mt { syntax: '*'; inherits: false; }
@property --bb-mb { syntax: '*'; inherits: false; }
.e-con.bb-section {
	padding-inline: 0;
	--row-gap: 0px; --column-gap: 0px; --gap: 0px;
	--widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
}
.bb-section .e-con {
	--row-gap: 0px; --column-gap: 0px; --gap: 0px;
	--widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
}
.e-con.bb-container {
	width: 100%;
	max-width: var(--bb-container-width);
	margin-inline: auto;
	padding-inline: var(--bb-gutter);
}
@media (max-width: 767px) {
	.e-con.bb-container { padding-inline: var(--bb-gutter-mobile); }
}
.bb-section .e-con > .elementor-widget.elementor-widget,
.bb-section .e-con > .e-con.e-con {
	margin-block: var(--bb-mt, 0px) var(--bb-mb, 0px);
}
/* Measure helpers: narrow content stays left-aligned to the container edge. */
.bb-measure > * { max-width: 46rem; }

/* Headings rendered by the Heading widget. Elementor's kit rule colours them
   Primary (olive-700) at line-height 1; the design system wants olive-900
   ink with real line heights. Per-widget editor styles still win. */
.elementor-widget-heading .elementor-heading-title {
	color: var(--bb-olive-900);
	font-family: var(--bb-font-display);
	font-weight: 600;
	text-wrap: balance;
}
.elementor-widget-heading h1.elementor-heading-title { font-size: var(--bb-h1-size); line-height: 1.08; letter-spacing: -0.02em; }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--bb-h2-size); line-height: 1.15; letter-spacing: -0.01em; }
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--bb-h3-size); line-height: 1.3; }
.bb-section .elementor-widget-text-editor { text-wrap: pretty; }
.bb-section .elementor-widget-text-editor > p:last-child { margin-bottom: 0; }

/* Section headings: more room below the H2 block than inside it, and the
   section padding supplies the (larger) space above. */
.bb-section .bb-h2 { --bb-mb: var(--bb-space-7); }
.bb-section .bb-h2 .elementor-heading-title { max-width: 22ch; }

/* ---------- Shared components for Elementor pages ---------- */
/* Text links with a drawn chevron (no unicode arrows). */
/* Links in Elementor text (the kit's `.elementor-kit-5 a` rule would otherwise
   strip the underline). Arrow links drop the underline: the chevron carries it. */
.bb-section a.bb-link, .bb-section a.bb-text-link {
	color: var(--bb-olive-900);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.bb-section a.bb-link:hover, .bb-section a.bb-text-link:hover { color: var(--bb-olive-900); text-decoration-thickness: 2px; }
.bb-section a.bb-link.bb-arrow-right, .bb-section a.bb-link.bb-arrow-down { text-decoration: none; }
.bb-section a.bb-link.bb-arrow-right:hover, .bb-section a.bb-link.bb-arrow-down:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.bb-cta-final a.bb-link, .bb-cta-final a.bb-text-link { color: var(--bb-cream); }

/* Stand-alone links (arrow links, or a link that is a text widget's only
   content) get a 44px target; links inside a sentence stay inline. */
.bb-link.bb-arrow-right, .bb-link.bb-arrow-down,
.bb-early-link a.bb-link, a.bb-faq-final-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}
.bb-link.bb-arrow-right, .bb-link.bb-arrow-down { gap: 10px; }
.bb-link.bb-arrow-right::after, .bb-link.bb-arrow-down::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transition: transform var(--bb-duration-fast) var(--bb-ease);
	flex-shrink: 0;
}
.bb-link.bb-arrow-right::after { transform: rotate(-45deg); }
.bb-link.bb-arrow-right:hover::after { transform: translateX(3px) rotate(-45deg); }
.bb-link.bb-arrow-down::after { transform: translateY(-2px) rotate(45deg); }
.bb-link.bb-arrow-down:hover::after { transform: translateY(1px) rotate(45deg); }

/* Plan cards (Home "Start free" + Pricing). */
.bb-pricing-cards {
	display: grid; /* beats .e-con's display:var(--display) now that bb-* prints last */
	grid-template-columns: 5fr 6fr;
	gap: var(--bb-space-6);
	align-items: stretch;
	padding-top: 14px; /* room for the badge that straddles the paid card's top edge */
}
@media (max-width: 860px) { .bb-pricing-cards { grid-template-columns: 1fr; gap: var(--bb-space-7); } }
.e-con.bb-plan-card {
	display: flex;
	flex-direction: column;
	padding: var(--bb-space-6);
	border-radius: var(--bb-radius-md);
}
@media (max-width: 767px) { .e-con.bb-plan-card { padding: var(--bb-space-5); } }
.e-con.bb-plan-free { background: var(--bb-white); border: 1px solid var(--bb-line); box-shadow: none; }
.e-con.bb-plan-dash { position: relative; background: var(--bb-peach-100); border: 1px solid transparent; }
/* Badge sits on the card's top edge, so it can never collide with the title. */
.bb-section .e-con > .elementor-widget.bb-card-badge-wrap {
	position: absolute;
	top: 0;
	left: var(--bb-space-6);
	transform: translateY(-50%);
	width: auto;
	margin: 0;
	z-index: 1;
}
@media (max-width: 767px) { .bb-section .e-con > .elementor-widget.bb-card-badge-wrap { left: var(--bb-space-5); } }
.bb-badge { line-height: 1.4; padding: 5px 14px; font-size: 0.8125rem; letter-spacing: .01em; }
.bb-card-title { --bb-mb: var(--bb-space-2); }
.bb-card-title .elementor-heading-title { font-size: 1.375rem; line-height: 1.25; }
.bb-card-price { --bb-mb: var(--bb-space-5); }
.bb-card-price .bb-price-free, .bb-card-price .bb-price-sale { line-height: 1.1; }
.bb-card-price .bb-price-regular { margin-left: var(--bb-space-3); }
.bb-card-price .bb-price-early-access { display: block; margin: var(--bb-space-1) 0 0; font-size: 0.8125rem; letter-spacing: .06em; }
.bb-plan-dash .bb-price-early-access { color: var(--bb-olive-900); }
.bb-plan-dash .bb-price-regular { color: var(--bb-olive-900); opacity: 1; }
.bb-price-free, .bb-price-sale, .bb-price-regular { font-variant-numeric: tabular-nums lining-nums; }
.bb-plan-list-wrap { --bb-mb: var(--bb-space-6); }
.bb-plan-list { list-style: none; margin: 0; padding: 0; }
.bb-plan-list li {
	display: flex;
	gap: var(--bb-space-3);
	align-items: baseline;
	padding-block: 10px;
	border-top: 1px solid var(--bb-line);
	line-height: 1.5;
}
.bb-plan-list li::before {
	/* drawn tick, one stroke weight across the site */
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 5px;
	border-left: 1.75px solid var(--bb-olive-700);
	border-bottom: 1.75px solid var(--bb-olive-700);
	transform: translateY(-3px) rotate(-45deg);
}
.bb-plan-dash .bb-plan-list li { border-top-color: rgba(38, 49, 28, .16); }
.bb-plan-dash .bb-plan-list li::before { border-color: var(--bb-olive-900); }
.bb-card-btn { --bb-mt: auto; }
.bb-pricing-note { --bb-mt: var(--bb-space-5); color: var(--bb-muted); }
.bb-section-sage .bb-pricing-note { color: var(--bb-muted); } /* 5.49:1 on sage */

/* FAQ accordion (Elementor nested-accordion): hairline list, question left,
   Elementor's own SVG plus/minus on the right, 56px rows. */
.elementor-widget-n-accordion.bb-home-faq,
.elementor-widget-n-accordion.bb-faq {
	--n-accordion-border-width: 0px;
	--n-accordion-item-title-space-between: 0px;
	--n-accordion-item-title-distance-from-content: 0px;
	--n-accordion-padding: 0px;
	--n-accordion-icon-size: 14px;
	--n-accordion-title-icon-order: 1;
	--n-accordion-title-flex-grow: 1;
	--n-accordion-title-justify-content: space-between;
	--n-accordion-title-normal-color: var(--bb-olive-900);
	--n-accordion-title-hover-color: var(--bb-olive-700);
	--n-accordion-title-active-color: var(--bb-olive-900);
	--n-accordion-icon-normal-color: var(--bb-olive-700);
	--n-accordion-icon-hover-color: var(--bb-olive-900);
	--n-accordion-icon-active-color: var(--bb-olive-900);
	border-top: 1px solid var(--bb-line);
}
.elementor-widget-n-accordion.bb-home-faq .e-n-accordion-item,
.elementor-widget-n-accordion.bb-faq .e-n-accordion-item { border-bottom: 1px solid var(--bb-line); }
.elementor-widget-n-accordion.bb-home-faq .e-n-accordion-item-title,
.elementor-widget-n-accordion.bb-faq .e-n-accordion-item-title {
	min-height: 60px;
	padding: var(--bb-space-4) 0;
	gap: var(--bb-space-5);
	justify-content: space-between;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.elementor-widget-n-accordion.bb-home-faq .e-n-accordion-item-title-header,
.elementor-widget-n-accordion.bb-faq .e-n-accordion-item-title-header { flex: 1; }
.elementor-widget-n-accordion.bb-home-faq .e-n-accordion-item-title-text,
.elementor-widget-n-accordion.bb-faq .e-n-accordion-item-title-text {
	margin: 0;
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.35;
	color: inherit;
	text-wrap: pretty;
}
.elementor-widget-n-accordion.bb-home-faq .e-n-accordion-item-title-icon,
.elementor-widget-n-accordion.bb-faq .e-n-accordion-item-title-icon {
	width: 28px;
	height: 28px;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--bb-line);
	transition: background-color var(--bb-duration-fast) var(--bb-ease);
}
.elementor-widget-n-accordion.bb-home-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon,
.elementor-widget-n-accordion.bb-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon { background: var(--bb-sage-100); }
.bb-section-sage .elementor-widget-n-accordion.bb-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon { background: var(--bb-white); }
.elementor-widget-n-accordion.bb-home-faq .e-n-accordion-item > .e-con,
.elementor-widget-n-accordion.bb-faq .e-n-accordion-item > .e-con {
	border: 0;
	padding: 0 48px var(--bb-space-5) 0;
	background: transparent;
}
.elementor-widget-text-editor.bb-faq-answer { color: var(--bb-ink); max-width: 62ch; }

/* Two-column FAQ block: heading (+ link) left, questions right. */
.e-con.bb-faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	grid-template-rows: auto auto 1fr; /* keep the heading and its link together */
	column-gap: var(--bb-space-8);
	align-items: start;
}
.bb-faq-layout > .elementor-widget-heading { grid-column: 1; grid-row: 1; }
.bb-faq-layout > .elementor-widget-n-accordion { grid-column: 2; grid-row: 1 / span 3; }
.bb-faq-layout > .elementor-widget-text-editor { grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
	.e-con.bb-faq-layout { grid-template-columns: 1fr; }
	.bb-faq-layout > .elementor-widget-heading,
	.bb-faq-layout > .elementor-widget-n-accordion,
	.bb-faq-layout > .elementor-widget-text-editor { grid-column: 1; grid-row: auto; }
	.bb-faq-layout > .elementor-widget-n-accordion { --bb-mb: var(--bb-space-4); }
}

/* Final CTA band (olive-900): heading left, button right, on the same
   container edge as everything else. */
.e-con.bb-cta-final {
	background: var(--bb-olive-900);
	box-shadow: inset 0 -1px 0 rgba(255, 253, 248, .16); /* seam against the same-colour footer */
}
.e-con.bb-cta-final-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-space-5) var(--bb-space-7);
}
.bb-cta-final .elementor-heading-title { color: var(--bb-cream); max-width: 20ch; }
.bb-cta-final :focus-visible,
.bb-cta-final a:focus-visible { outline-color: var(--bb-peach-100); }
@media (max-width: 767px) {
	.e-con.bb-cta-final-inner { flex-direction: column; align-items: flex-start; }
}
/* Cream button for dark bands. Class goes on the Button widget; the visible
   <a> is styled, never the wrapper. 13.43:1 olive-900 on cream. */
body .elementor-widget-button.bb-btn-oncream .elementor-button {
	background-color: var(--bb-cream);
	color: var(--bb-olive-900);
}
body .elementor-widget-button.bb-btn-oncream .elementor-button:hover,
body .elementor-widget-button.bb-btn-oncream .elementor-button:focus {
	background-color: var(--bb-peach-100);
	color: var(--bb-olive-900);
}

/* Shared hero for inner pages. */
.e-con.bb-pg-hero { padding-block: var(--bb-space-8) var(--bb-space-8); }
@media (max-width: 767px) { .e-con.bb-pg-hero { padding-block: var(--bb-space-6) var(--bb-space-7); } }
.bb-pg-hero-h1 .elementor-heading-title {
	font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4rem);
	letter-spacing: -0.03em;
	max-width: 17ch;
}
.bb-pg-lead { --bb-mt: var(--bb-space-5); max-width: 52ch; }

/* ---------- Plain (non-Elementor) pages: legal, contact, Woo shortcodes ----------
   Hello's theme.css gives .site-main 1140px and 10px gutters with no vertical
   rhythm. Match the design-system container and gutters, then give prose pages
   a centred, readable measure. */
body:not([class*="elementor-page-"]) .site-main {
	max-width: var(--bb-container-width);
	padding-inline: var(--bb-gutter);
	padding-block: var(--bb-space-8) var(--bb-space-9);
}
body.page:not([class*="elementor-page-"]):not(.woocommerce-page) .site-main {
	max-width: calc(46rem + 2 * var(--bb-gutter)); /* ~70ch at 17px */
}
@media (max-width: 767px) {
	body:not([class*="elementor-page-"]) .site-main {
		padding-inline: var(--bb-gutter-mobile);
		padding-block: var(--bb-space-6) var(--bb-space-8);
	}
}
/* Elementor pages that still show Hello's page title (cart, my-account). */
body[class*="elementor-page-"] .site-main > .page-header {
	max-width: var(--bb-container-width);
	margin-inline: auto;
	padding-inline: var(--bb-gutter);
	padding-top: var(--bb-space-8);
}
@media (max-width: 767px) {
	body[class*="elementor-page-"] .site-main > .page-header {
		padding-inline: var(--bb-gutter-mobile);
		padding-top: var(--bb-space-6);
	}
}
.page-header .entry-title { max-width: none; padding-inline: 0; margin-bottom: var(--bb-space-6); }

.page-content > h2 { margin-top: var(--bb-space-7); }
.page-content > h3 { margin-top: var(--bb-space-6); }
.page-content > h2:first-child, .page-content > h3:first-child { margin-top: 0; }
.page-content > p, .page-content > ul, .page-content > ol, .page-content > blockquote { max-width: 70ch; }
.page-content > ul, .page-content > ol { margin: 0 0 var(--bb-space-4); padding-left: 1.25em; }
.page-content > ul li, .page-content > ol li { margin-bottom: var(--bb-space-2); }
.page-content > p a, .page-content > ul a, .page-content > ol a,
.woocommerce-page .site-main p a:not(.button) {
	color: var(--bb-olive-900);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.page-content > p a:hover, .page-content > ul a:hover, .page-content > ol a:hover,
.woocommerce-page .site-main p a:not(.button):hover { text-decoration-thickness: 2px; }

/* ---------- WooCommerce notices (replace Woo's blue/green/red + grey) ---------- */
.woocommerce-info, .woocommerce-message, .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
	background: var(--bb-sage-100);
	color: var(--bb-ink);
	border: 1px solid var(--bb-under); /* hairline in the signal colour; Woo's icon carries the type */
	border-radius: var(--bb-radius-sm);
	font-size: 1rem;
}
.woocommerce-info::before { color: var(--bb-under); }
.woocommerce-message { border-color: var(--bb-olive-700); }
.woocommerce-message::before { color: var(--bb-olive-700); }
.woocommerce-error { border-color: var(--bb-over); }
.woocommerce-error::before { color: var(--bb-over); }
/* Hidden country field: Woo still prints its label row. */
#billing_country_field, #shipping_country_field { display: none; }
/* Cart: 44px remove target, readable coupon field. */
.woocommerce a.remove {
	width: 44px;
	height: 44px;
	line-height: 44px;
	font-size: 1.5rem;
	color: var(--bb-over) !important; /* Woo sets its red with !important */
}
.woocommerce a.remove:hover { background: var(--bb-sage-100); color: var(--bb-over) !important; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 12rem; min-height: 48px; }
/* Sold-individually items leave the quantity cell empty; on mobile its floated
   "Quantity:" label then overlapped the Subtotal row. */
.woocommerce table.shop_table_responsive tr td.product-quantity::after { content: ""; display: table; clear: both; }
.woocommerce form .show-password-input,
.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input:focus { background: transparent; border: 0; }

/* Free label: compact in tables and cart lines, large on product pages. */
.woocommerce table .bb-price-free,
.woocommerce-checkout-review-order-table .bb-price-free,
.cart_totals .bb-price-free { font-size: 1.125rem; }
.bb-price-free-inline { font-weight: 700; color: var(--bb-olive-900); }
.woocommerce table .bb-price-sale,
.woocommerce-checkout-review-order-table .bb-price-sale { font-size: 1.125rem; }