/* Self-hosted Inter — no external request to Google. Files live in ../fonts/inter/ */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'),
	     url('../fonts/inter/inter-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2'),
	     url('../fonts/inter/inter-latin-500-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2'),
	     url('../fonts/inter/inter-latin-600-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2'),
	     url('../fonts/inter/inter-latin-700-normal.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/montserrat/montserrat-latin-700-normal.woff2') format('woff2'),
	     url('../fonts/montserrat/montserrat-latin-700-normal.woff') format('woff'); }

.lpf-finder {
	--lpf-accent: #009459;
	--lpf-ink: #1a241f;
	--lpf-muted: #6b7a72;
	--lpf-line: #dfe7e2;
	--lpf-surface: #f7faf8;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--lpf-ink);
	max-width: 100%;
	box-sizing: border-box;
}
.lpf-finder * { box-sizing: border-box; }

.lpf-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.lpf-tab {
	font: inherit;
	font-size: 0.83rem;
	padding: 9px 16px;
	border-radius: 3px;
	border: 1px solid #cccccc;
	background: transparent;
	color: #cccccc;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.lpf-tab:hover { border-color: var(--lpf-accent); color: var(--lpf-accent); }
.lpf-tab[aria-pressed="true"] {
	background: rgba(0, 148, 89, .8);
	border-color: var(--lpf-accent);
	color: #fff;
}

.lpf-blurb { color: var(--lpf-muted); margin: 0 0 16px; max-width: 68ch; }
.lpf-status { color: var(--lpf-muted); font-size: 0.9rem; }
.lpf-note { color: var(--lpf-muted); font-size: 0.78rem; margin-top: 12px; }

.lpf-tablewrap { overflow-x: auto; border: 1px solid var(--lpf-line); border-radius: 8px; }
.lpf-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.lpf-table th, .lpf-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--lpf-line);
	white-space: nowrap;
}
.lpf-table tbody td { font-weight: 600; }
.lpf-table thead th {
	background: var(--lpf-surface);
	font-weight: 600;
	color: var(--lpf-ink);
	position: sticky;
	top: 0;
}
.lpf-th-sortable { cursor: pointer; user-select: none; }
.lpf-th-sortable:hover { color: var(--lpf-accent); }
.lpf-th-sortable.is-sorted { color: var(--lpf-accent); }
.lpf-th-sortable:focus-visible { outline: 2px solid var(--lpf-accent); outline-offset: -2px; }
.lpf-table tbody tr:last-child td { border-bottom: none; }
.lpf-th-action { width: 1%; }
.lpf-action-cell { text-align: right; white-space: nowrap; }

.lpf-ptrow { cursor: pointer; }
.lpf-ptrow:hover td { background: var(--lpf-surface); }
.lpf-chev {
	display: inline-block;
	font-size: 1.38rem;
	color: var(--lpf-accent);
	font-weight: 700;
	transition: transform .2s;
}

.lpf-btn {
	font: inherit;
	border-radius: 6px;
	border: 1px solid var(--lpf-accent);
	background: #fff;
	color: var(--lpf-accent);
	padding: 7px 14px;
	cursor: pointer;
	white-space: nowrap;
}
.lpf-btn:hover { background: var(--lpf-accent); color: #fff; }
.lpf-btn-primary { background: var(--lpf-accent); color: #fff; }
.lpf-btn-primary:hover { opacity: .9; }
.lpf-btn-sm { font-size: 0.82rem; padding: 6px 12px; }
.lpf-btn-muted { border-color: var(--lpf-muted); color: var(--lpf-muted); }
.lpf-btn-muted:hover { background: var(--lpf-muted); border-color: var(--lpf-muted); color: #fff; }

.lpf-cfgcell { background: #fbfdfb; padding: 18px !important; white-space: normal; }
.lpf-cfg { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.lpf-cfg-axes { display: flex; flex-wrap: wrap; gap: 20px; flex: 1 1 260px; }
.lpf-cfg-axis-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lpf-muted); margin-bottom: 6px; }
.lpf-cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lpf-chip {
	font: inherit;
	font-size: 0.85rem;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--lpf-line);
	background: #fff;
	cursor: pointer;
}
.lpf-chip.is-selected { border-color: var(--lpf-accent); background: var(--lpf-accent); color: #fff; }

.lpf-cfg-result { flex: 0 0 220px; padding-left: 14px; border-left: 1px solid var(--lpf-line); }
.lpf-cfg-hint { color: var(--lpf-muted); font-size: 0.86rem; margin: 0; }
.lpf-cfg-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size: 0.88rem; }
.lpf-cfg-sku { color: var(--lpf-muted); }
.lpf-cfg-price { font-weight: 600; }

.lpf-cfg-divider { border: none; border-top: 1px solid var(--lpf-line); margin: 20px 0; }
.lpf-tcfg-drawbox { background: linear-gradient(180deg, #fbfdfb, #f3f7f2); }
.lpf-tcfg-draw-svg svg { width: 100%; height: 46px; display: block; }
.lpf-tcfg-draw-icon { font-size: 1.6rem; line-height: 1; }
.lpf-tcfg-dl { display: inline-flex; align-self: center; gap: 4px; font-size: 0.72rem; font-weight: 700; color: var(--lpf-accent); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: none; }
.lpf-tcfg-dl:hover { text-decoration: underline; }

.lpf-tcfg-step { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lpf-accent); font-weight: 700; margin: 0 0 12px; }
.lpf-tcfg-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.lpf-tcfg-box { flex: 1 1 160px; max-width: 200px; background: #fff; border: 1px solid var(--lpf-line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; min-width: 0; }
.lpf-tcfg-box.is-on { border-color: var(--lpf-accent); box-shadow: 0 0 0 2px rgba(0,148,89,.15); }
.lpf-tcfg-box-icon { width: 26px; height: 26px; margin: 0 auto; color: var(--lpf-accent); }
.lpf-tcfg-box-icon svg { width: 100%; height: 100%; display: block; }
.lpf-tcfg-box-label { font-size: 0.8rem; font-weight: 600; line-height: 1.3; min-width: 0; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
.lpf-tcfg-yn { display: inline-flex; align-self: center; border: 1px solid var(--lpf-line); border-radius: 8px; overflow: hidden; }
.lpf-yn-btn { font: inherit; font-size: 0.76rem; font-weight: 700; padding: 6px 12px; border: 0; background: #fff; color: var(--lpf-muted); cursor: pointer; }
.lpf-yn-btn + .lpf-yn-btn { border-left: 1px solid var(--lpf-line); }
.lpf-yn-btn.is-selected { background: var(--lpf-accent); color: #fff; }

.lpf-tcfg-details { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.lpf-tcfg-group { border: 1px solid var(--lpf-line); border-left: 3px solid var(--lpf-accent); border-radius: 10px; background: var(--lpf-surface); padding: 14px 16px; }
.lpf-tcfg-group-head { font-weight: 700; font-size: 0.86rem; margin-bottom: 10px; }

.lpf-tcfg-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--lpf-line); display: flex; flex-direction: column; gap: 12px; }
.lpf-tcfg-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.lpf-tcfg-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 700; color: var(--lpf-ink); }
.lpf-tcfg-field input, .lpf-tcfg-field select, .lpf-tcfg-field textarea {
	font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--lpf-line); border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box;
}
.lpf-tcfg-field textarea { min-height: 90px; resize: vertical; }
.lpf-tcfg-field textarea[data-app="notes"] { resize: none; overflow: hidden; min-height: 150px; }
.lpf-tcfg-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lpf-tcfg-status { font-size: 0.84rem; margin: 0; }
.lpf-tcfg-status.is-success { color: var(--lpf-accent); font-weight: 600; }
.lpf-tcfg-status.is-error { color: #b3261e; font-weight: 600; }

.lpf-tcfg-summary { font-size: 0.86rem; color: var(--lpf-muted); margin: 14px 0 0; }
.lpf-tcfg-summary b { color: var(--lpf-ink); }
.lpf-tcfg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.lpf-modal-backdrop {
	position: fixed; inset: 0; background: rgba(16,26,21,.5);
	opacity: 0; visibility: hidden; transition: .2s; z-index: 100000;
}
.lpf-modal-backdrop.show { opacity: 1; visibility: visible; }
.lpf-modal-panel {
	/* The modal is appended to <body>, not inside .lpf-finder, so the color/
	   spacing variables need redeclaring here or every var() below them
	   silently resolves to nothing (invisible borders, blank-looking fields). */
	--lpf-accent: #009459;
	--lpf-ink: #1a241f;
	--lpf-muted: #6b7a72;
	--lpf-line: #dfe7e2;
	--lpf-surface: #f7faf8;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--lpf-ink);
	position: fixed; left: 50%; top: 50%; transform: translate(-50%,-48%);
	opacity: 0; visibility: hidden; transition: .2s;
	width: min(960px, 96vw); max-height: 92vh; overflow: auto;
	background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); z-index: 100001;
	box-sizing: border-box;
}
.lpf-modal-panel * { box-sizing: border-box; }
.lpf-modal-panel.show { opacity: 1; visibility: visible; transform: translate(-50%,-50%); }
.lpf-modal-head { padding: 14px 20px; border-bottom: 1px solid var(--lpf-line); display: flex; align-items: center; justify-content: space-between; }
.lpf-modal-title { margin: 0; } /* intentionally no font-family/colour here — inherits the theme's own heading style */
.lpf-modal-panel .lpf-modal-title { font-size: 24px !important; line-height: 1.2 !important; }
.lpf-modal-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--lpf-muted); }
.lpf-modal-body { padding: 16px 20px; }
.lpf-modal-body svg { width: 100%; height: auto; border: 1px solid var(--lpf-line); border-radius: 8px; display: block; }
.lpf-modal-foot { padding: 0 20px 18px; display: flex; gap: 10px; justify-content: flex-end; }

.lpf-modal-panel-sm { width: min(420px, 92vw); }
.lpf-drawreq-form { display: flex; flex-direction: column; gap: 12px; }
.lpf-drawreq-form input { font: inherit; padding: 8px 10px; border: 1px solid var(--lpf-line); border-radius: 8px; width: 100%; box-sizing: border-box; }

/* Defensive reset: page builders (Divi included) often apply broad, high-
   specificity styling to every <input>/<select>/<textarea> on the page.
   Without this, their sizing/padding wins over ours and fields can end up
   oversized or borderless. Scoped to just our own containers, and !important
   because that's genuinely the reliable way to survive an unknown host theme. */
.lpf-finder input[type="text"],
.lpf-finder input[type="email"],
.lpf-finder input[type="number"],
.lpf-finder input[type="file"],
.lpf-finder select,
.lpf-finder textarea:not([data-app="notes"]),
.lpf-modal-panel input[type="text"],
.lpf-modal-panel input[type="email"],
.lpf-modal-panel input[type="number"],
.lpf-modal-panel select,
.lpf-modal-panel textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	font-family: inherit !important;
	font-size: 0.86rem !important;
	line-height: 1.4 !important;
	height: auto !important;
	min-height: 0 !important;
	border: 1px solid #dfe7e2 !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #1a241f !important;
	box-shadow: none !important;
}
/* The requirements textarea gets the same box-sizing/padding/border/colour
   treatment above (it's not excluded there) but NOT the forced height —
   that field's height is driven entirely by JS (auto-grow to fit content),
   and an !important height here would silently defeat that every time. */
.lpf-finder textarea[data-app="notes"] {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	font-family: inherit !important;
	font-size: 0.86rem !important;
	line-height: 1.4 !important;
	border: 1px solid #dfe7e2 !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #1a241f !important;
	box-shadow: none !important;
}
.lpf-finder textarea:not([data-app="notes"]),
.lpf-modal-panel textarea { min-height: 90px !important; resize: vertical !important; }
.lpf-finder button,
.lpf-finder a.lpf-btn,
.lpf-modal-panel button,
.lpf-modal-panel a.lpf-btn { box-sizing: border-box !important; font-family: 'Montserrat', sans-serif !important; text-transform: uppercase !important; font-weight: 700 !important; }

@media (max-width: 640px) {
	.lpf-table thead { display: none; }
	.lpf-table, .lpf-table tbody, .lpf-table tr, .lpf-table td { display: block; width: 100%; }
	.lpf-table tr { border-bottom: 1px solid var(--lpf-line); padding: 10px 0; }
	.lpf-table td { border-bottom: none; white-space: normal; padding: 4px 14px; }
	.lpf-cfg-result { border-left: none; padding-left: 0; border-top: 1px solid var(--lpf-line); padding-top: 12px; }
}

.lpf-col-link { color: var(--lpf-accent); font-weight: 600; text-decoration: none; }
.lpf-col-link:hover { text-decoration: underline; }

.lpf-tcfg-optin { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 400; color: var(--lpf-muted); cursor: pointer; }
.lpf-tcfg-optin input[type="checkbox"] { width: auto !important; flex: 0 0 auto; }

.lpf-single-builder-body { margin-top: 16px; }

.lpf-tcfg-view-link { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.lpf-ts{margin:12px 0}
.lpf-ts:empty{display:none}