/**
 * Photoframers — bespoke builder.
 *
 * Layout, picker, preview and basket-bar styles for the /builder/ page.
 * Sourced from the original Claude builder.html design with light additions
 * for AJAX feedback ("Added to basket" line) and the cart bespoke-name span.
 */

.breadcrumb {
	padding: var(--sp-5) 0;
	background: var(--cream-50);
	border-bottom: 1px solid var(--ink-100);
	font-size: 13px;
	color: var(--ink-500);
}
.breadcrumb a:hover { color: var(--forest-700); }
.breadcrumb .sep { margin: 0 var(--sp-3); color: var(--ink-300); }
.breadcrumb .current { color: var(--forest-900); }

.builder {
	background: var(--cream-100);
	border-bottom: 1px solid var(--ink-200);
}
.builder-inner {
	display: grid;
	grid-template-columns: 1fr 460px;
}

.preview {
	padding: var(--sp-10) var(--sp-8);
	display: flex;
	flex-direction: column;
	position: relative;
	background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 100%);
}
.preview-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--sp-8);
}
.preview-head .label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--brass-600);
	text-transform: uppercase;
}
.preview-head h2 {
	font-family: var(--font-display);
	font-size: 36px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--forest-900);
	margin-top: var(--sp-2);
	font-weight: 400;
}
.preview-head h2 em { font-style: italic; }
.preview-head .view-tabs {
	display: flex;
	gap: 4px;
	background: var(--paper);
	border-radius: var(--r-md);
	padding: 4px;
}
.preview-head .view-tabs button {
	padding: 6px 12px;
	font-size: 12px;
	border-radius: var(--r-sm);
	color: var(--ink-500);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.preview-head .view-tabs button.active {
	background: var(--forest-700);
	color: var(--cream-50);
}

.preview-stage {
	flex: 1;
	min-height: 460px;
	max-height: 640px;
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.4), transparent 60%),
		radial-gradient(circle at 70% 75%, rgba(216, 184, 123, 0.15), transparent 50%),
		var(--cream-50);
	border: 1px solid var(--cream-300);
}

#livePreview {
	position: relative;
	width: 420px;
	height: 594px;
	transition:
		width 0.3s cubic-bezier(0.3, 0.7, 0.3, 1),
		height 0.3s cubic-bezier(0.3, 0.7, 0.3, 1);
	filter:
		drop-shadow(0 8px 12px rgba(20, 30, 25, 0.16))
		drop-shadow(0 28px 40px rgba(20, 30, 25, 0.14));
}

.preview-rulers {
	position: absolute;
	inset: var(--sp-8);
	pointer-events: none;
}
.ruler-tag {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brass-600);
	background: var(--cream-50);
	padding: 3px 8px;
	border-radius: var(--r-full);
	border: 1px solid var(--cream-300);
}
.ruler-tag.w { bottom: var(--sp-3); left: 50%; transform: translateX(-50%); }
.ruler-tag.h { top: 50%; right: var(--sp-3); transform: translateY(-50%); }
.ruler-tag.scale { top: var(--sp-3); right: var(--sp-3); }
.ruler-tag.depth { top: var(--sp-3); left: var(--sp-3); }

.config {
	background: var(--paper);
	border-left: 1px solid var(--ink-200);
	display: flex;
	flex-direction: column;
}
.config-head {
	padding: var(--sp-6) var(--sp-8);
	border-bottom: 1px solid var(--ink-100);
}
.config-head .step-prog {
	display: flex;
	gap: 4px;
	margin-bottom: var(--sp-3);
}
.step-prog .bar {
	flex: 1;
	height: 3px;
	background: var(--ink-100);
	border-radius: 2px;
	position: relative;
}
.step-prog .bar.done { background: var(--forest-700); }
.step-prog .bar.current {
	background: linear-gradient(to right, var(--forest-700) 50%, var(--ink-100) 50%);
}
.config-head .step-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--ink-500);
	text-transform: uppercase;
}
.config-head h3 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--forest-900);
	margin: var(--sp-3) 0 0;
}
.config-head .sub {
	font-size: 14px;
	color: var(--ink-500);
	margin-top: 6px;
}

.config-body {
	flex: 1;
	padding: var(--sp-6) var(--sp-8);
	overflow-y: auto;
}

.step {
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--ink-100);
}
.step:last-child { border-bottom: 0; }
.step-title {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}
.step-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--forest-700);
	color: var(--cream-50);
	font-family: var(--font-mono);
	font-size: 11px;
	display: grid;
	place-items: center;
	font-weight: 600;
}
.step-name {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--forest-900);
	flex: 1;
}
.step-value {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-500);
}

.type-pick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
}
.type-card {
	border: 1.5px solid var(--ink-200);
	background: var(--paper);
	border-radius: var(--r-md);
	padding: var(--sp-4);
	cursor: pointer;
}
.type-card.active { border-color: var(--forest-700); background: var(--forest-50); }
.type-card .nm {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--forest-900);
	margin-bottom: 4px;
}
.type-card .dm {
	font-size: 12px;
	color: var(--ink-500);
	line-height: 1.4;
}

.size-inputs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--sp-3);
	align-items: center;
}
.size-input-wrap { position: relative; }
.size-input-wrap label {
	position: absolute;
	top: -8px;
	left: 10px;
	background: var(--paper);
	padding: 0 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-500);
}
.size-input-wrap input {
	width: 100%;
	height: 52px;
	background: var(--paper);
	border: 1.5px solid var(--ink-200);
	border-radius: var(--r-md);
	padding: 0 var(--sp-3);
	padding-right: 40px;
	font-family: var(--font-mono);
	font-size: 16px;
	color: var(--forest-900);
}
.size-input-wrap input:focus {
	outline: 0;
	border-color: var(--forest-700);
}
.size-input-wrap .unit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-500);
}
/* Unit shown inline in the size label (not the absolute input-suffix variant) */
.size-input-wrap label .size-unit { position: static; transform: none; right: auto; top: auto; font-family: inherit; font-size: inherit; color: inherit; }
/* Units toggle (mm / cm / inch) */
.size-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.size-hint-row .size-hint { margin: 0; flex: 1 1 auto; }
.pfm-fb .size-toggle { display: inline-flex; gap: 2px; background: #eef4f3; border-radius: 999px; padding: 3px; flex: 0 0 auto; margin: 0; }
.pfm-fb .size-toggle button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; min-width: 44px; border: 0; background: transparent; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--pfm-muted, #657273); line-height: 1; }
.pfm-fb .size-toggle button.active { background: var(--pfm-teal, #00B997); color: #fff; }
.size-times {
	color: var(--ink-400);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 24px;
}
.size-mode {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	flex-wrap: wrap;
}
.size-mode-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-500);
}
.size-mode-pick {
	display: inline-flex;
	gap: 4px;
	background: var(--cream-50);
	border-radius: var(--r-md);
	padding: 3px;
}
.size-mode-pick button {
	padding: 6px 12px;
	font-size: 12px;
	border-radius: var(--r-sm);
	color: var(--ink-500);
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.size-mode-pick button.active {
	background: var(--paper);
	color: var(--forest-900);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.size-toggle {
	display: flex;
	gap: 4px;
	background: var(--cream-50);
	border-radius: var(--r-md);
	padding: 4px;
	margin-top: var(--sp-4);
}
.size-toggle button {
	flex: 1;
	padding: 8px;
	font-size: 12px;
	border-radius: var(--r-sm);
	color: var(--ink-500);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.size-toggle button.active {
	background: var(--paper);
	color: var(--forest-900);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.size-presets {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: var(--sp-3);
}
.size-preset {
	padding: 6px 10px;
	border: 1px solid var(--ink-200);
	background: var(--paper);
	border-radius: var(--r-full);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-700);
	cursor: pointer;
}
.size-preset:hover { border-color: var(--forest-300); color: var(--forest-700); }
.size-preset.active {
	background: var(--forest-700);
	color: var(--cream-50);
	border-color: var(--forest-700);
}

.pf-builder .moulding-pick {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-2);
}
.pf-builder .moulding-opt {
	aspect-ratio: 1;
	border: 1.5px solid transparent;
	border-radius: var(--r-md);
	background: var(--cream-50);
	padding: 8px;
	cursor: pointer;
	display: grid;
	place-items: center;
	position: relative;
}
.pf-builder .moulding-opt .pf-frame {
	width: 100%;
	height: 100%;
	--mat-w: 4px;
	--frame-bevel: 2px;
}
.pf-builder .moulding-opt.active {
	border-color: var(--forest-700);
	background: var(--paper);
}
.moulding-opt-label {
	margin-top: var(--sp-3);
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--ink-700);
}
.moulding-opt-label .pr {
	font-family: var(--font-mono);
	color: var(--ink-500);
}

.mount-pick {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 5px;
}
.mount-opt {
	aspect-ratio: 1;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid var(--paper);
	box-shadow: inset 0 0 0 1px var(--ink-200);
	position: relative;
}
.mount-opt.active {
	box-shadow: inset 0 0 0 1.5px var(--forest-700), 0 0 0 1.5px var(--paper);
	transform: scale(1.06);
}
.mount-width {
	margin-top: var(--sp-4);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}
.mount-width label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--ink-500);
	text-transform: uppercase;
}
.mount-width input[type="range"] {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	background: var(--ink-100);
	border-radius: 2px;
	outline: 0;
}
.mount-width input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--forest-700);
	cursor: pointer;
}
.mount-width .val {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--forest-900);
	min-width: 44px;
	text-align: right;
}

.pill-pick {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.pill-opt {
	padding: 8px 12px;
	border: 1.5px solid var(--ink-200);
	background: var(--paper);
	border-radius: var(--r-full);
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}
.pill-opt:hover { border-color: var(--forest-300); }
.pill-opt.active {
	border-color: var(--forest-700);
	background: var(--forest-50);
	color: var(--forest-900);
}
.pill-opt .pr {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-500);
}
.pill-opt.active .pr { color: var(--forest-700); }

.config-foot {
	background: var(--cream-50);
	border-top: 1px solid var(--ink-100);
	padding: var(--sp-5) var(--sp-8);
}
.config-foot .breakdown {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sp-2);
	font-size: 12px;
	color: var(--ink-500);
	margin-bottom: var(--sp-3);
}
.config-foot .breakdown .pr { font-family: var(--font-mono); color: var(--ink-700); }
.config-foot .total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--ink-200);
	margin-bottom: var(--sp-4);
}
.config-foot .total .l {
	font-size: 14px;
	color: var(--forest-900);
	font-weight: 600;
}
.config-foot .total .l small {
	display: block;
	font-size: 11px;
	font-family: var(--font-mono);
	color: var(--ink-500);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 2px;
}
.config-foot .total .v {
	font-family: var(--font-display);
	font-size: 36px;
	color: var(--forest-900);
	font-weight: 400;
	letter-spacing: -0.02em;
}
.config-foot .actions {
	display: flex;
	gap: var(--sp-2);
}
.config-foot .actions .btn { flex: 1; height: 52px; }
.config-foot .actions .icon-btn-sq {
	width: 52px;
	height: 52px;
	background: var(--paper);
	border: 1.5px solid var(--ink-200);
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	color: var(--forest-700);
	cursor: pointer;
}
.delivery-est {
	text-align: center;
	font-size: 12px;
	color: var(--ink-500);
	margin-top: var(--sp-3);
}
.delivery-est strong { color: var(--forest-700); font-weight: 600; }

.pf-builder-feedback {
	margin-top: var(--sp-3);
	min-height: 18px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-500);
	text-align: center;
	transition: color 0.15s;
}
.pf-builder-feedback.is-ok { color: var(--forest-700); }
.pf-builder-feedback.is-err { color: var(--red-500, #b3514a); }

.pf-bespoke-name { font-weight: 600; color: var(--forest-900); }

.help-band {
	background: var(--paper-warm, var(--cream-50));
	padding: var(--sp-16) 0;
	border-bottom: 1px solid var(--ink-100);
}
.help-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-10);
}
.help-item .nm {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--forest-900);
	margin-bottom: var(--sp-2);
}
.help-item .nm em { font-style: italic; }
.help-item p {
	margin: 0;
	font-size: 14px;
	color: var(--ink-500);
	line-height: 1.55;
}
.help-item .link {
	font-size: 13px;
	color: var(--forest-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: var(--sp-3);
	display: inline-block;
}

@media (max-width: 1024px) {
	.builder-inner { grid-template-columns: 1fr; }
	.preview { padding: var(--sp-8) var(--sp-6); }
	.preview-stage { aspect-ratio: 4 / 3; min-height: 360px; }
	#livePreview { max-width: 60%; }
	.config { border-left: 0; border-top: 1px solid var(--ink-200); }
	.help-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

@media (max-width: 768px) {
	.builder { min-height: 0; }
	.builder-inner { min-height: 0; }
	.preview { padding: var(--sp-6) var(--sp-4); }
	.preview-head { flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
	.preview-head h2 { font-size: 26px; }
	.preview-head .view-tabs { font-size: 11px; }
	.preview-head .view-tabs button { padding: 5px 8px; font-size: 11px; }
	.preview-stage { min-height: 300px; aspect-ratio: 1; }
	#livePreview {
		max-width: 70%;
		max-height: 70%;
		width: auto !important;
		height: auto !important;
	}
	.preview-rulers .ruler-tag { font-size: 9px; padding: 2px 6px; }
	.config-head { padding: var(--sp-5) var(--sp-5); }
	.config-head h3 { font-size: 22px; }
	.config-body { padding: var(--sp-5); }
	.config-foot { padding: var(--sp-4) var(--sp-5); }
	.config-foot .total .v { font-size: 28px; }
	.size-inputs { grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); }
	.size-input-wrap input { font-size: 14px; height: 48px; }
	.pf-builder .moulding-pick { grid-template-columns: repeat(4, 1fr); }
	.mount-pick { grid-template-columns: repeat(6, 1fr); }
	.pill-opt { font-size: 12px; padding: 6px 10px; }
	.type-pick { gap: var(--sp-2); }
	.type-card { padding: var(--sp-3); }
	.type-card .nm { font-size: 15px; }
	.help-band { padding: var(--sp-10) 0; }
	.help-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 480px) {
	.pf-builder .moulding-pick { grid-template-columns: repeat(3, 1fr); }
	.mount-pick { grid-template-columns: repeat(5, 1fr); }
	.size-presets .size-preset { font-size: 10px; padding: 4px 8px; }
}

/* === Frame visualizer primitives (ported from old theme tokens.css) ===
   These rules paint the live frame preview inside #livePreview (which also
   carries the .pf-frame class). Without these, the .pf-moulding/.pf-mat/.pf-art
   children remain unpositioned and the preview renders as a flat rectangle. */
.pf-frame {
  position: relative;
  display: block;
  --frame-bevel: 14px;
  --mat-w: 28px;
  --bevel-w: 4px;
  --moulding: var(--forest-900, #151919);
  --moulding-hi: var(--forest-700, #2a3530);
  --moulding-lo: #050a07;
  --mat: var(--cream-50, #FBFDFC);
  --mat-core: #f8f5ed;
  filter:
    drop-shadow(0 4px 6px rgba(20,30,25,0.14))
    drop-shadow(0 16px 28px rgba(20,30,25,0.12));
  transition: --mat 0.18s ease;
}
.pf-frame .pf-moulding {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--moulding-hi) 0%, var(--moulding) 45%, var(--moulding-lo) 100%);
  border-radius: 1px;
}
.pf-frame .pf-mat {
  position: absolute;
  inset: var(--frame-bevel);
  background: var(--mat);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.18),
    inset 0 -1px 1px rgba(0,0,0,0.04);
}
.pf-frame .pf-art {
  position: absolute;
  inset: calc(var(--frame-bevel) + var(--mat-w));
  background: var(--ink-100, #e9ebec);
  overflow: hidden;
}
.pf-frame .pf-art img { width: 100%; height: 100%; object-fit: cover; }

/* Variant fills — driven by data-frame slug */
.pf-frame[data-frame="oak"],
.pf-frame[data-frame="devon-oak"] {
  --moulding-hi: #d8b988;
  --moulding: #c19a5e;
  --moulding-lo: #8f6a39;
}
.pf-frame[data-frame="walnut"] {
  --moulding-hi: #8d6443;
  --moulding: #6b4a30;
  --moulding-lo: #3e2916;
}
.pf-frame[data-frame="white"] {
  --moulding-hi: #ffffff;
  --moulding: #efeae0;
  --moulding-lo: #c8c2b3;
}
.pf-frame[data-frame="natural"] {
  --moulding-hi: #ead7b6;
  --moulding: #d6bf95;
  --moulding-lo: #a8906a;
}
.pf-frame[data-frame="forest"] {
  --moulding-hi: #2e5645;
  --moulding: #1f3a2c;
  --moulding-lo: #0d1d15;
}
.pf-frame[data-frame="brass"],
.pf-frame[data-frame="gold"] {
  --moulding-hi: #e0c184;
  --moulding: #b8965a;
  --moulding-lo: #7e6336;
}
.pf-frame[data-frame="black"] {
  --moulding-hi: #3a3a3a;
  --moulding: #1a1a1a;
  --moulding-lo: #060606;
}

/* Wood-grain overlay (subtle striations) on natural-wood profiles */
.pf-frame[data-frame="oak"] .pf-moulding,
.pf-frame[data-frame="devon-oak"] .pf-moulding,
.pf-frame[data-frame="walnut"] .pf-moulding,
.pf-frame[data-frame="natural"] .pf-moulding {
  background-image:
    repeating-linear-gradient(
      92deg,
      transparent 0 3px,
      rgba(0,0,0,0.05) 3px 4px,
      transparent 4px 9px,
      rgba(0,0,0,0.03) 9px 10px
    ),
    linear-gradient(135deg, var(--moulding-hi) 0%, var(--moulding) 45%, var(--moulding-lo) 100%);
}

/* Outer rebate hairline */
.pf-frame .pf-mat::before {
  content: ""; position: absolute; inset: -2px;
  border: 1px solid rgba(0,0,0,0.18);
  pointer-events: none;
}
/* Bevel cut ring — exposes the white core of the mountboard at the inner window */
.pf-frame .pf-mat::after {
  content: ""; position: absolute;
  inset: calc(var(--mat-w) - var(--bevel-w));
  background: var(--mat-core);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,0,0,0.10);
  pointer-events: none;
}

/* No-mount option */
.pf-frame[data-mat="none"] .pf-mat { display: none; }
.pf-frame[data-mat="none"] .pf-art { inset: var(--frame-bevel); }

/* === Builder button primitives (mint design system) ===
   The old theme's .btn / .btn-primary / .btn-secondary base rules lived in
   tokens.css, which wasn't ported. Scope these to .pf-builder so they only
   affect the bespoke builder and don't conflict with .pfm-btn or Woo buttons. */
.pf-builder .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.05s;
  white-space: nowrap;
  text-decoration: none;
}
.pf-builder .btn:active { transform: translateY(1px); }

.pf-builder .btn-primary {
  background: var(--pfm-teal, #00B997);
  color: #ffffff;
  border-color: var(--pfm-teal, #00B997);
  font-weight: 800;
}
.pf-builder .btn-primary:hover {
  background: var(--pfm-teal-dark, #009B80);
  border-color: var(--pfm-teal-dark, #009B80);
}

.pf-builder .btn-ink {
  background: #101414;
  color: #fff;
  border-color: #101414;
}
.pf-builder .btn-ink:hover { background: #2a3530; border-color: #2a3530; }

.pf-builder .btn-secondary {
  background: transparent;
  color: var(--pfm-teal-dark, #009B80);
  border-color: var(--pfm-teal, #00B997);
}
.pf-builder .btn-secondary:hover {
  background: var(--pfm-teal, #00B997);
  color: #fff;
}

.pf-builder .btn-ghost {
  background: transparent;
  color: #303a3a;
  border-color: transparent;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.pf-builder .btn-ghost:hover { background: var(--pfm-mint, #e9fbf7); color: var(--pfm-teal-dark, #009B80); }

/* The Add to basket CTA — wider primary with arrow */
.pf-builder #pf-add-to-basket {
  width: 100%;
  height: 56px;
  font-size: 14px;
}

/* Heart / save-for-later square button next to the CTA */
.pf-builder .btn-save,
.pf-builder .save-for-later,
.pf-builder .btn-icon {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--pfm-line, #e2eeee);
  background: #fff;
  border-radius: 6px;
  color: var(--pfm-teal-dark, #009B80);
}
.pf-builder .btn-save:hover,
.pf-builder .save-for-later:hover,
.pf-builder .btn-icon:hover { background: var(--pfm-mint, #e9fbf7); }

/* === Frame Builder Design 02 (appended ) === */
/* =========================================================================
   Frame Builder — Design 02 (mint theme)
   Full restyle. Replaces the old `.builder` / `.preview` / `.config` layout.
   ========================================================================= */

.pfm-fb {
  padding: 36px 0 60px;
  background: var(--pfm-soft, #f6fbfa);
}
.pfm-fb .pfm-container { width: min(1480px, 94vw); margin: 0 auto; }

/* ---------- 5-step stepper ---------- */
.pfm-fb-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin: 0 0 14px;
  padding: 0;
}
.pfm-fb-step {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.pfm-fb-step::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 24px;
  width: 16px;
  height: 1px;
  background: var(--pfm-line, #e2eeee);
}
.pfm-fb-step:last-child::after { display: none; }
.pfm-fb-step .num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee);
  color: #8a9999;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.pfm-fb-step.is-active .num {
  background: var(--pfm-teal, #00B997);
  border-color: var(--pfm-teal, #00B997);
  color: #fff;
}
.pfm-fb-step .lbl { display: flex; flex-direction: column; line-height: 1.2; }
.pfm-fb-step .lbl strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #151919;
}
.pfm-fb-step .lbl small { font-size: 12px; color: var(--pfm-muted, #657273); margin-top: 2px; }

/* ---------- Layout grid (preview left, cards right; review/trust/cta span both) ---------- */
.pfm-fb-form { display: block; }
.pfm-fb-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: start;
}
.pfm-fb-review,
.pfm-fb-trust,
.pfm-fb-cta { grid-column: 1 / -1; }

/* ---------- LEFT: Preview ---------- */
.pfm-fb-preview {
  position: relative;
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 580px;
}
.pfm-fb-preview-tag {
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(150, 160, 160, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 4px;
  z-index: 2;
}
.pfm-fb-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 8px 12px 18px;
}
.pfm-fb-stage #livePreview {
  width: clamp(260px, 70%, 420px);
  aspect-ratio: 5 / 7;
  height: auto;
}

.pfm-fb-stage-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pfm-line, #e2eeee);
  flex-wrap: wrap;
}
.pfm-fb-stage-controls .zoom-control {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--pfm-muted, #657273);
  flex: 1; min-width: 220px;
}
.pfm-fb-stage-controls .zoom-control .lbl { font-weight: 600; color: #151919; }
.pfm-fb-stage-controls .zoom-control input[type=range] {
  flex: 1;
  accent-color: var(--pfm-teal, #00B997);
  max-width: 220px;
}
.pfm-fb-stage-controls .zoom-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--pfm-line, #e2eeee);
  background: #fff;
  color: #151919;
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.pfm-fb-stage-controls .view-toggle { display: flex; gap: 16px; align-items: center; }
.pfm-fb-stage-controls .view-toggle button {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0;
  font-size: 13px; color: var(--pfm-muted, #657273); cursor: pointer;
  padding: 6px 4px;
}
.pfm-fb-stage-controls .view-toggle button.active { color: #151919; font-weight: 600; }
.pfm-fb-stage-controls .view-toggle .dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--pfm-teal, #00B997);
  display: inline-block;
  position: relative;
}
.pfm-fb-stage-controls .view-toggle .dot::after {
  content: ""; position: absolute; inset: 2px;
  background: var(--pfm-teal, #00B997);
  border-radius: 50%;
}
.pfm-fb-stage-controls .view-toggle button:not(.active) .dot {
  border-color: var(--pfm-line, #cad3d3);
}
.pfm-fb-stage-controls .view-toggle button:not(.active) .dot::after { display: none; }
.pfm-fb-stage-controls .view-toggle .square {
  width: 14px; height: 14px;
  border: 1.5px dashed #9aa3a3;
  border-radius: 3px;
  display: inline-block;
}

/* ---------- RIGHT: Stack of cards ---------- */
.pfm-fb-cards { display: flex; flex-direction: column; gap: 18px; }
.pfm-fb-card {
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 14px;
  padding: 22px 24px;
}
.pfm-fb-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.pfm-fb-card__head h2,
.pfm-fb-card__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #151919;
  text-transform: uppercase;
}
.pfm-fb-card__head h2 .num,
.pfm-fb-card__head h3 .num {
  color: #151919;
  font-weight: 800;
  margin-right: 4px;
}
.pfm-fb-card__head .link {
  color: var(--pfm-teal, #00B997);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.pfm-fb-card__head .link:hover { color: var(--pfm-teal-dark, #009B80); text-decoration: underline; }

.card-selected {
  font-size: 14px;
  color: #2a3535;
  margin: -4px 0 14px;
  font-weight: 500;
}

/* ---------- SIZE card ---------- */
.size-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f4f7f7;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 16px;
}
.size-mode-tabs .tab {
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  color: var(--pfm-muted, #657273);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.size-mode-tabs .tab.active {
  background: #fff;
  color: var(--pfm-teal-dark, #009B80);
  box-shadow: 0 1px 3px rgba(20, 30, 25, 0.08);
}
.size-hint { display: block; font-size: 13px; color: var(--pfm-muted, #657273); margin-bottom: 10px; }
.size-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.size-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.size-input-wrap label {
  position: static;          /* cancel the abandoned floating-label (was position:absolute; top:-8px with a transparent bg) */
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pfm-muted, #657273);
}
.size-input-wrap input[type=number] {
  height: 46px;
  border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #151919;
  background: #fff;
}
.size-input-wrap input[type=number]:focus {
  outline: 0;
  border-color: var(--pfm-teal, #00B997);
  box-shadow: 0 0 0 3px rgba(0,185,151,0.15);
}
.link.link-help { display: inline-block; margin-top: 4px; color: var(--pfm-teal, #00B997); font-size: 13px; font-weight: 600; text-decoration: none; }
.link.link-help:hover { text-decoration: underline; }

.size-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.size-presets .size-preset {
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #151919;
  cursor: pointer;
}
.size-presets .size-preset.active {
  background: var(--pfm-teal, #00B997);
  border-color: var(--pfm-teal, #00B997);
  color: #fff;
}
.size-presets .size-preset:hover:not(.active) { border-color: var(--pfm-teal, #00B997); }

/* ---------- FRAME card — profile swatches ---------- */
.frame-swatch-row {
  display: flex;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 4px;
}
.frame-swatch {
  flex: 0 0 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, transform 0.05s;
}
.frame-swatch:hover { border-color: var(--pfm-line, #e2eeee); }
.frame-swatch.active { border-color: var(--pfm-teal, #00B997); }
.frame-swatch .pf-frame {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}
.frame-swatch-row .row-next {
  flex: 0 0 36px;
  height: 80px;
  border: 1px solid var(--pfm-line, #e2eeee);
  background: #fff;
  border-radius: 8px;
  color: var(--pfm-muted, #657273);
  font-size: 18px;
  cursor: pointer;
}
.frame-swatch-row .row-next:hover { color: var(--pfm-teal, #00B997); border-color: var(--pfm-teal, #00B997); }

/* ---------- MOUNT card — circle swatches ---------- */
.mount-circle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-height: 340px;
  overflow-y: auto;
  padding: 2px 2px 6px;
}

/* ===== Mount picker v2: core tabs + colour-family groups ===== */
.pfm-mount-cores { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.pfm-core-tab {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  border: 1px solid var(--pfm-line, #cad3d3); background: #fff; border-radius: 999px;
  padding: 7px 16px; font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  color: var(--pfm-text, #2a2f2f); transition: background .12s, border-color .12s, color .12s;
}
.pfm-core-tab:hover { border-color: var(--pfm-teal, #0f9f8c); }
.pfm-core-tab.active { background: var(--pfm-teal, #0f9f8c); border-color: var(--pfm-teal, #0f9f8c); color: #fff; }
.mount-circle-row[data-mount-grid] { display: block; max-height: 480px; }
.mount-circle-row[data-mount-grid] > .mount-circle.is-none { margin: 0 0 10px; }
.pfm-mount-fam { margin: 2px 0 12px; }
.pfm-mount-fam__label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--pfm-muted, #657273); margin: 8px 0 8px;
}
.pfm-mount-fam__n { opacity: .55; font-weight: 600; margin-left: 3px; }
.pfm-mount-fam__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Double-accent inner-colour picker: scrollable grid (was overflowing with the full set) */
.accent-swatches { display: flex; flex-wrap: wrap; gap: 10px; max-height: 300px; overflow-y: auto; padding: 2px 2px 6px; }
.pfm-mount-substep { font-size: 12px; font-weight: 600; color: var(--pfm-muted, #657273); margin: 6px 0 8px; }

/* ===== Builder frame picker: search + range groups (full moulding catalogue) ===== */
.pfm-frame-search { width: 100%; padding: 10px 12px; border: 1px solid var(--pfm-line, #cad3d3); border-radius: 10px; font: inherit; font-size: 14px; margin: 0 0 12px; }
.pfm-frame-search:focus-visible { outline: 0; border-color: var(--pfm-teal, #0f9f8c); box-shadow: 0 0 0 3px rgba(15,159,140,.15); }
[data-frame-grid][data-grouped] { display: block; max-height: 460px; overflow-y: auto; padding: 2px; }
.pfm-frame-fam { margin: 2px 0 14px; }
.pfm-frame-fam__label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pfm-muted, #657273); margin: 8px 0 8px; position: sticky; top: 0; background: #fff; padding: 2px 0; }
.pfm-frame-fam__n { opacity: .55; font-weight: 600; margin-left: 3px; }
.pfm-frame-fam__row { display: flex; flex-wrap: wrap; gap: 10px; }
.pfm-frame-fam__row .moulding-opt { flex: 0 0 72px; width: 72px; max-width: 72px; }
.mount-circle {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--mount-color, #fff);
  border: 1px solid var(--pfm-line, #cad3d3);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.05s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.mount-circle:hover { transform: scale(1.05); }
.mount-circle.active {
  border-color: var(--pfm-teal, #00B997);
  box-shadow: 0 0 0 2px var(--pfm-teal, #00B997), inset 0 0 0 2px #fff;
}
.mount-circle.is-none {
  background: #fff;
  border-style: dashed;
}
.mount-circle.is-none .none-x {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pfm-muted, #657273);
}

.mount-width-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pfm-line, #e2eeee);
  font-size: 12px;
  color: var(--pfm-muted, #657273);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mount-width-row label { font-weight: 700; flex-shrink: 0; }
.mount-width-row input[type=range] { flex: 1; accent-color: var(--pfm-teal, #00B997); }
.mount-width-row .val { font-weight: 700; color: #151919; min-width: 60px; text-align: right; text-transform: none; letter-spacing: 0; }

/* ---------- GLAZING card — 4 cards ---------- */
.glazing-card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.glazing-card {
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 10px;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.05s;
  min-height: 110px;
  justify-content: center;
}
.glazing-card:hover { border-color: var(--pfm-teal, #00B997); }
.glazing-card.active {
  border-color: var(--pfm-teal, #00B997);
  background: rgba(0, 185, 151, 0.04);
}
.glazing-card .g-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 22px;
  color: var(--pfm-muted, #657273);
  line-height: 1;
}
.glazing-card.active .g-icon { color: var(--pfm-teal, #00B997); }
.glazing-card .g-name {
  font-size: 12px;
  font-weight: 700;
  color: #151919;
  line-height: 1.3;
}
.glazing-card.active .g-name { color: var(--pfm-teal-dark, #009B80); }
.glazing-card .g-sub {
  font-size: 11px;
  color: var(--pfm-muted, #657273);
  line-height: 1.3;
}
.glazing-card .g-mod {
  font-size: 11px;
  font-weight: 700;
  color: #151919;
  margin-top: 2px;
}
.glazing-card .g-mod--free { color: var(--pfm-muted, #657273); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- REVIEW (full-width card) ---------- */
.pfm-fb-review {
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 6px;
}
.pfm-fb-review__head h2,
.pfm-fb-review__head h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #151919;
}
.pfm-fb-review__head h2 .num,
.pfm-fb-review__head h3 .num { margin-right: 4px; }
.pfm-fb-review__grid {
  display: grid;
  grid-template-columns: 70px 1.2fr 1.2fr 1.2fr 1.4fr auto;
  gap: 24px;
  align-items: center;
}
.review-thumb { width: 70px; height: 88px; display: grid; place-items: center; }
.review-thumb .pf-frame { width: 100%; height: 100%; }
.review-cell { display: flex; flex-direction: column; gap: 2px; }
.review-cell small {
  font-size: 12px;
  color: var(--pfm-muted, #657273);
  font-weight: 500;
}
.review-cell strong { font-size: 14px; font-weight: 600; color: #151919; }
.review-price { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.review-price strong {
  font-size: 26px;
  font-weight: 800;
  color: #151919;
  font-family: Poppins, Inter, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1;
}
.review-price small {
  font-size: 11px;
  color: var(--pfm-muted, #657273);
  line-height: 1.4;
  margin-top: 2px;
}

/* ---------- TRUST STRIP ---------- */
.pfm-fb-trust {
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 14px;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  font-size: 13px;
  color: #151919;
}
.pfm-fb-trust > div {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
}
.pfm-fb-trust svg,
.pfm-fb-trust .pfm-svg { color: var(--pfm-teal, #00B997); font-size: 18px; }
.pfm-fb-trust span { font-weight: 500; }

/* === Builder summary -> right column + vertical (fixes sticky-preview overlap). 20260601 === */
.review-thumb { display: none; }                 /* gallery lives in the preview now */
@media (min-width: 981px) {
  .pfm-fb-review,
  .pfm-fb-trust,
  .pfm-fb-cta { grid-column: 2; }
  .pfm-fb-review__grid { display: flex; flex-direction: column; gap: 0; }
  .pfm-fb-review__grid .review-cell {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pfm-line, #eef4f4);
  }
  .pfm-fb-review__grid .review-cell strong { text-align: right; }
  .pfm-fb-review__grid .review-price {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-top: 14px;
  }
  .pfm-fb-trust { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .pfm-fb-trust > div { justify-content: flex-start; }
}

/* ---------- CTA ---------- */
.pfm-fb-cta {
  width: 100%;
  height: 64px;
  background: var(--pfm-teal, #00B997);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.15s, transform 0.05s;
}
.pfm-fb-cta:hover { background: var(--pfm-teal-dark, #009B80); }
.pfm-fb-cta:active { transform: translateY(1px); }
.pfm-fb-cta .lock { font-size: 18px; }
.pfm-fb-cta:disabled { opacity: 0.6; cursor: wait; }

/* === Phase 2 fixes: full-width + persistent CTA === */
/* Force full-width regardless of any earlier width cap. */
.pfm-builder-page .pfm-container,
.pfm-fb .pfm-container { width: min(1480px, 94vw) !important; }
/* CTA: compact button in normal flow under the review/order summary
   (not a full-width sticky banner), right-aligned like eframe. */
.pfm-fb-cta {
  position: static;
  width: 100%;
  max-width: 440px;
  height: 54px;
  margin: 18px 0 0 auto;
  background: #00b997;
  box-shadow: 0 10px 26px rgba(0, 155, 128, 0.28);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.pfm-fb-cta:hover { background: #009b80; }
/* Upload-your-photo pill. */
.pfm-fb-upload {
  position: static !important;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  background: #00b997 !important;
  color: #fff !important;
}

/* === Mount styles: No mount / Single / Double (accent) === */
.pfm-mount-style { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.mount-style-opt {
  flex: 1 1 auto; min-width: 92px; padding: 10px 12px;
  border: 1px solid var(--pfm-line, #e2eeee); border-radius: 8px;
  background: #fff; color: var(--pfm-text, #151919);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.mount-style-opt:hover { border-color: var(--pfm-teal, #00B997); }
.mount-style-opt.active {
  border-color: var(--pfm-teal, #00B997);
  box-shadow: 0 0 0 1px var(--pfm-teal, #00B997);
  color: var(--pfm-teal-dark, #009B80);
}
.pfm-mount-substep { font-weight: 700; font-size: 13px; margin: 0 0 8px; }
.accent-pick[hidden] { display: none; }
.accent-pick .accent-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
/* "No mount" hides the colour, accent and width controls */
[data-section="mount"].is-none-mount .mat-pick,
[data-section="mount"].is-none-mount .accent-pick,
[data-section="mount"].is-none-mount .pfm-mount-cores,
[data-section="mount"].is-none-mount .mount-width-row { display: none; }

/* === On-the-wall view === */
.pfm-fb-stage { position: relative; }
.pfm-fb-preview-head {
  /* Float the upload button as a top-left overlay (it sits in the empty side
     margin) instead of a full-width row that pushed the frame ~47px down. */
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap;
}
.pfm-fb-preview-tag { display: none; }
.pfm-fb-viewmode {
  display: inline-flex; gap: 4px; padding: 3px;
  background: #fff; border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 999px;
}
/* the duplicate toggle that used to overlay the image is hidden; header copy is used */
.pfm-fb-stage .pfm-fb-viewmode { display: none; }
.pfm-fb-viewmode__btn {
  border: 0; background: transparent; padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--pfm-muted, #657273);
}
.pfm-fb-viewmode__btn.active { background: var(--pfm-teal, #00B997); color: #fff; }
.pfm-fb-wall-canvas {
  display: none; position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%; border-radius: 6px;
}
.pfm-fb-stage.is-wall-view .pfm-fb-wall-canvas { display: block; }
.pfm-fb-stage.is-wall-view .pfm-fb-canvas { visibility: hidden; }

/* Moulding photo view + gallery thumbnails (real product photos). 20260601 */
.pfm-fb-photo {
  display: none; position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; object-fit: contain; background: #fff;
}
.pfm-fb-stage.is-photo-view .pfm-fb-canvas,
.pfm-fb-stage.is-photo-view .pfm-fb-wall-canvas { visibility: hidden; }
.pfm-fb-stage.is-photo-view .pfm-fb-photo { display: block; }
.pfm-fb-gallery {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 16px 0 2px;
}
.pfm-fb-gallery .thumb {
  width: 58px; height: 58px; padding: 3px;
  border: 1.5px solid var(--pfm-line, #e2eeee);
  border-radius: 9px; background: #fff; cursor: pointer;
  transition: border-color .15s;
}
.pfm-fb-gallery .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
.pfm-fb-gallery .thumb:hover { border-color: var(--pfm-teal, #00B997); }
.pfm-fb-gallery .thumb.active { border-color: var(--pfm-teal, #00B997); box-shadow: inset 0 0 0 1px var(--pfm-teal, #00B997); }

/* ===== Builder: pure gallery + homepage background + inline zoom. 20260601 ===== */
/* Match the homepage canvas (warm beige fading to off-white) */
body.pfm-builder-page.pfm-theme { background: linear-gradient(to bottom, #f1e8d6 0, #f6f0e6 280px, #fdfcf9 820px) no-repeat #fdfcf9 !important; }
body.pfm-builder-page .pfm-fb { background: transparent !important; }
/* Kill the gap above the top strip: stray inline content at the body top creates
   a ~24px line box above the header — collapse it (font-size 0), restore on the
   real element children so nothing else shrinks. */
body.pfm-builder-page { font-size: 0 !important; }
body.pfm-builder-page > * { font-size: 15px; }
/* Pure gallery: drop the leftover view/zoom controls */
.pfm-fb-stage-controls,
.pfm-fb-preview-head .pfm-fb-viewmode { display: none !important; }
.pfm-fb-gallery .thumb.is-frame img { object-fit: cover; }
/* Inline zoom — magnify in the same window, no lightbox */
.pfm-fb-stage .pfm-fb-canvas, .pfm-fb-stage .pfm-fb-photo { cursor: zoom-in; }
.pfm-fb-stage.is-zoomed { overflow: hidden; }
.pfm-fb-stage.is-zoomed .pfm-fb-canvas,
.pfm-fb-stage.is-zoomed .pfm-fb-photo { transform: scale(2); cursor: zoom-out; transition: transform .12s ease; }
/* Never show the legacy blue-art preview box (the canvas is the preview) */
body.pfm-builder-page #livePreview { display: none !important; }

/* === eFrame-style frame summary card + "Choose your frame" modal. 20260601 === */
.pfm-frame-card {
  display: flex; gap: 14px; align-items: center;
  background: #faf8f4; border: 1px solid var(--pfm-line, #e2eeee);
  border-radius: 12px; padding: 14px; margin: 4px 0 12px;
}
.pfm-frame-card__img { width: 120px; height: 108px; object-fit: contain; flex: 0 0 auto; }
.pfm-frame-card__meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 13px; }
.pfm-frame-card__meta > div { display: contents; }
.pfm-frame-card__meta dt { color: var(--pfm-muted, #657273); }
.pfm-frame-card__meta dd { margin: 0; font-weight: 600; color: #151919; }
.pfm-frame-change-btn {
  width: 100%; padding: 13px; border: 1px solid var(--pfm-line, #cfe0e0);
  background: #fff; border-radius: 10px; font-weight: 700; font-size: 14px;
  color: var(--pfm-teal, #00B997); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.pfm-frame-change-btn:hover { background: var(--pfm-teal, #00B997); color: #fff; border-color: var(--pfm-teal, #00B997); }

body.pfm-modal-open { overflow: hidden; }
.pfm-frame-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.pfm-frame-modal[hidden] { display: none; }
.pfm-frame-modal__backdrop { position: absolute; inset: 0; background: rgba(20,28,28,.5); }
.pfm-frame-modal__panel {
  /* Stable height (was max-height only) so the panel does NOT grow/shrink as the
     results change — Loading / empty / full all keep the same size; the results
     list scrolls inside. Prevents the open-flash + shrink-on-type jump. */
  position: relative; z-index: 1; width: min(720px, 94vw); height: min(760px, 88vh);
  background: #fff; border-radius: 16px; padding: 24px; display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0,0,0,.3);
}
.pfm-frame-modal__close {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px;
  border: 0; background: #f1f1f1; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: #333;
}
.pfm-frame-modal__title { text-align: center; margin: 0 0 18px; font-size: 26px; }
.pfm-frame-modal__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pfm-frame-modal__filters select, .pfm-frame-modal__filters input {
  padding: 12px 14px; border: 1px solid var(--pfm-line, #d8e4e4); border-radius: 10px; font-size: 14px; background: #fff;
}
.pfm-frame-modal__filters input { grid-column: 1 / -1; }
.pfm-frame-modal__results { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px; flex: 1; }
.pfm-fm-state { margin: auto; padding: 40px; text-align: center; color: var(--pfm-muted, #657273); }
.pfm-fm-card {
  display: flex; gap: 16px; align-items: center; text-align: left;
  background: #faf9f6; border: 1px solid transparent; border-radius: 12px; padding: 12px 16px;
  cursor: pointer; width: 100%; transition: border-color .12s, background .12s;
}
.pfm-fm-card:hover { border-color: var(--pfm-teal, #00B997); background: #fff; }
.pfm-fm-card__img { width: 190px; height: 140px; object-fit: contain; flex: 0 0 auto; }
.pfm-fm-card__meta { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--pfm-muted, #657273); }
.pfm-fm-card__meta strong { font-size: 15px; color: #151919; margin-bottom: 3px; }
.pfm-fm-card__meta b { color: #151919; font-weight: 600; }
.pfm-fm-card__ref { margin-top: 3px; font-size: 12px; }
.pfm-fm-card__select {
  flex: 0 0 auto; align-self: center; padding: 9px 20px; border-radius: 8px;
  background: var(--pfm-teal, #00B997); color: #fff; font-weight: 700; font-size: 13px;
}
.pfm-frame-modal__foot { text-align: center; padding-top: 12px; }
/* Sizing help popup — content-sized (overrides the fixed-height results panel) */
.pfm-help-modal__panel { height: auto; max-height: 88vh; width: min(520px, 92vw); overflow-y: auto; }
.pfm-help-body { margin-top: 4px; }
.pfm-help-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #2a3231; }
.pfm-help-body p:last-child { margin-bottom: 0; }
.pfm-help-body strong { color: #151919; }
.pfm-help-eg { background: #f3f8f7; border: 1px solid var(--pfm-line, #e2eeee); border-radius: 10px; padding: 12px 14px; color: #151919; }
/* Full-frame zoom lightbox (click the preview) — whole frame, large + centred */
.pfm-fb-zoom { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; }
.pfm-fb-zoom[hidden] { display: none; }
.pfm-fb-zoom__backdrop { position: absolute; inset: 0; background: rgba(243,242,239,.93); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pfm-fb-zoom__canvas { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; box-shadow: 0 24px 80px rgba(40,36,30,.28); }
.pfm-fb-zoom__close { position: absolute; top: 20px; right: 24px; z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: #222; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.22); }
.pfm-fb-zoom__close:hover { background: #f1f1f1; }
@media (max-width: 600px) { .pfm-fb-zoom__close { top: 12px; right: 12px; } }
.pfm-fb-zoom__img { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; background: #fff; box-shadow: 0 24px 80px rgba(40,36,30,.28); }
.pfm-fb-zoom__img[hidden], .pfm-fb-zoom__canvas[hidden] { display: none; }
.pfm-fb-zoom__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 50px; height: 50px; border: 0; border-radius: 50%; background: #fff; color: #222; font-size: 30px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(0,0,0,.22); transition: background .15s, color .15s; }
.pfm-fb-zoom__nav:hover { background: var(--pfm-teal, #0f9f8c); color: #fff; }
.pfm-fb-zoom__prev { left: 3vw; }
.pfm-fb-zoom__next { right: 3vw; }
@media (max-width: 600px) { .pfm-fb-zoom__nav { width: 42px; height: 42px; font-size: 24px; } .pfm-fb-zoom__prev { left: 8px; } .pfm-fb-zoom__next { right: 8px; } }
.pfm-frame-modal__more { padding: 10px 24px; border: 1px solid var(--pfm-line, #cfe0e0); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; }
@media (max-width: 560px) {
  .pfm-fm-card { flex-wrap: wrap; }
  .pfm-fm-card__img { width: 90px; height: 70px; }
  .pfm-fm-card__select { width: 100%; }
}

/* ---------- Feedback ---------- */
.pfm-fb-feedback {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}
.pfm-fb-feedback.is-success {
  display: block;
  background: rgba(0,185,151,0.1);
  color: var(--pfm-teal-dark, #009B80);
  border: 1px solid var(--pfm-teal, #00B997);
}
.pfm-fb-feedback.is-error {
  display: block;
  background: #fde8e8;
  color: #a73838;
  border: 1px solid #f3b9b9;
}

/* ---------- Hide legacy markup if any leftover ---------- */
.pfm-fb .builder-hero,
.pfm-fb .preview-head,
.pfm-fb .preview-rulers,
.pfm-fb .config-head,
.pfm-fb .config-foot,
.pfm-fb .step-title,
.pfm-fb .moulding-opt-label,
.pfm-fb .type-pick,
.pfm-fb .builder-inner > .preview > .preview-head,
.pfm-fb .step .step-row,
.pfm-fb .pf-builder-feedback ~ .config-foot { display: none !important; }

/* ---------- Override legacy .pf-builder .moulding-opt etc. (higher specificity) ---------- */
.pfm-fb .pfm-fb-card .moulding-opt,
.pfm-fb .pfm-fb-card .frame-swatch {
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  border: 2px solid transparent;
}
.pfm-fb .pfm-fb-card .moulding-opt.active,
.pfm-fb .pfm-fb-card .frame-swatch.active {
  border-color: var(--pfm-teal, #00B997);
  background: #fff;
  box-shadow: none;
}
.pfm-fb .pfm-fb-card .mat-opt,
.pfm-fb .pfm-fb-card .mount-circle {
  width: 68px; height: 68px;
  border-radius: 10px;
  background-color: var(--mount-color, var(--swatch-color, #fff));
  background-size: cover;
  background-position: center 56%;
  background-repeat: no-repeat;
}
.pfm-fb .pfm-fb-card .mat-opt.active,
.pfm-fb .pfm-fb-card .mount-circle.active {
  border: 1px solid var(--pfm-teal, #00B997) !important;
  box-shadow: 0 0 0 2px var(--pfm-teal, #00B997), inset 0 0 0 2px #fff !important;
}
.pfm-fb .pfm-fb-card .pill-pick,
.pfm-fb .pfm-fb-card .glazing-card-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.pfm-fb .pfm-fb-card .pill-opt,
.pfm-fb .pfm-fb-card .glazing-card {
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pfm-line, #e2eeee) !important;
  border-radius: 10px !important;
  padding: 14px 8px 12px !important;
  text-align: center;
  min-height: 110px;
}
.pfm-fb .pfm-fb-card .pill-opt.active,
.pfm-fb .pfm-fb-card .glazing-card.active {
  border-color: var(--pfm-teal, #00B997) !important;
  background: rgba(0, 185, 151, 0.04) !important;
  color: #151919;
}
.pfm-fb .pfm-fb-card .pill-opt span.pr,
.pfm-fb .pfm-fb-card .glazing-card .g-mod { color: var(--pfm-muted, #657273); }

/* Reset the global .moulding-pick grid layout inside our card */
.pfm-fb .pfm-fb-card .moulding-pick {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px !important;
  grid-template-columns: none !important;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
  .pfm-fb-stepper {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    overflow-x: auto;
  }
  .pfm-fb-step::after { display: none; }
  .pfm-fb-step .lbl strong { font-size: 11px; }
  .pfm-fb-step .lbl small { display: none; }

  .pfm-fb-grid { grid-template-columns: 1fr; }
  .pfm-fb-preview { min-height: 420px; }

  .glazing-card-row { grid-template-columns: 1fr 1fr; }
  .size-presets { grid-template-columns: repeat(3, 1fr); }

  .pfm-fb-review__grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .review-thumb { grid-column: span 2; justify-self: start; }
  .review-price { grid-column: span 2; text-align: left; }
  .pfm-fb-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pfm-fb-step .lbl { display: none; }
  .pfm-fb-step { justify-content: center; }
  .size-mode-tabs { grid-template-columns: 1fr 1fr; }
}

/* === Preview size fix (appended 20260530_122711) === */

/* === Preview-panel size fix (Design 02 ask: bigger frame visualizer) === */
.pfm-fb .pfm-fb-preview {
  min-height: 760px;
  padding: 56px 28px 28px;
}
.pfm-fb .pfm-fb-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 28px;
}
/* Stronger selectors than legacy `#livePreview { width: 420px; height: 594px }` */
.pfm-fb .pfm-fb-stage #livePreview,
.pfm-fb-preview .pfm-fb-stage #livePreview {
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
  aspect-ratio: 5 / 7;
}
@media (max-width: 980px) {
  .pfm-fb .pfm-fb-preview { min-height: 540px; padding: 48px 18px 20px; }
  .pfm-fb .pfm-fb-stage #livePreview,
  .pfm-fb-preview .pfm-fb-stage #livePreview {
    max-width: 320px !important;
  }
}

/* === FB tweaks: wider preview + smaller glazing icons (20260530_123207) === */

/* === Design 02 tweaks: wider preview, clipped zoom, smaller glazing icons === */

/* (1) Stop the right column from squeezing the left.
   `minmax(0, …fr)` lets both tracks shrink below their min-content so the
   fractional ratio (preview ~42% / config ~58%) actually wins. */
.pfm-fb .pfm-fb-grid {
  grid-template-columns: minmax(460px, 1.4fr) minmax(0, 1fr) !important;
  gap: 28px !important;
}

/* (2) Give the preview panel more room and clip the zoom transform so
   the scaled #livePreview never bleeds outside the white card. */
.pfm-fb .pfm-fb-preview {
  min-height: 800px;
  padding: 56px 32px 32px;
  overflow: hidden;
}
.pfm-fb .pfm-fb-stage {
  overflow: hidden;            /* clip the scale() transform */
  border-radius: 8px;
  position: relative;
}
.pfm-fb .pfm-fb-stage #livePreview,
.pfm-fb-preview .pfm-fb-stage #livePreview {
  max-width: 460px !important;
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(.3,.7,.3,1);
}

/* === Builder: sticky preview + photoreal canvas (Phase 2, 20260530) === */
@media (min-width: 981px) {
  .pfm-fb .pfm-fb-grid { align-items: start; }
  .pfm-fb .pfm-fb-preview {
    position: sticky;
    top: 88px;
    align-self: start;
    min-height: 600px;   /* override the 800px above so it fits a viewport and can stick */
    overflow: visible;   /* let the canvas drop-shadow show */
    padding: 22px 28px 26px;  /* tighter top space above the Frame / On the wall toggle */
  }
}
.pfm-fb .pfm-fb-stage.has-canvas { overflow: visible; }
.pfm-fb .pfm-fb-stage.has-canvas #livePreview { display: none; }
.pfm-fb-canvas {
  display: block;
  margin: auto;
  max-width: 100%;
  border-radius: 2px;
  box-shadow: 0 26px 55px rgba(40, 28, 16, 0.28);
}

/* (3) Glazing icon block: shrink from 32×32 / 22px font to a compact 24×24 / 16px,
   and use real SVG icons instead of emoji glyphs (smaller + cleaner look). */
.pfm-fb .pfm-fb-card .glazing-card { padding: 12px 8px 10px !important; min-height: 96px; }
.pfm-fb .pfm-fb-card .glazing-card .g-icon {
  width: 22px;
  height: 22px;
  font-size: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
  color: #4a5959;
  opacity: 0.7;
}
.pfm-fb .pfm-fb-card .glazing-card.active .g-icon { opacity: 1; color: var(--pfm-teal, #00B997); }
.pfm-fb .pfm-fb-card .glazing-card .g-name { font-size: 12px; line-height: 1.25; }
.pfm-fb .pfm-fb-card .glazing-card .g-sub { font-size: 10.5px; line-height: 1.25; }
.pfm-fb .pfm-fb-card .glazing-card .g-mod { font-size: 11px; margin-top: 1px; }

/* Hide the emoji glyph and inject SVG via CSS background-image so we don't have
   to change PHP. Keep span ::after so existing structure works. */
.pfm-fb .pfm-fb-card .glazing-card .g-icon { font-size: 0 !important; }
.pfm-fb .pfm-fb-card .glazing-card .g-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  /* Default: standard clear glass — vertical rectangle with diagonal stroke */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='3' width='12' height='18' rx='1'/><line x1='8' y1='6' x2='16' y2='18'/></svg>");
}
.pfm-fb .pfm-fb-card .glazing-card[data-slug="conservation"] .g-icon::before,
.pfm-fb .pfm-fb-card .glazing-card[data-slug="low-reflection"] .g-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='5' width='14' height='14' rx='1'/><path d='M9 9l1 1m4 4l1 1M14 9l1-1m-6 6l-1 1'/></svg>");
}
.pfm-fb .pfm-fb-card .glazing-card[data-slug="museum"] .g-icon::before,
.pfm-fb .pfm-fb-card .glazing-card[data-slug="museum-glass"] .g-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8l8-4 8 4v2H4V8z'/><path d='M6 10v8M10 10v8M14 10v8M18 10v8'/><path d='M3 20h18'/></svg>");
}
.pfm-fb .pfm-fb-card .glazing-card[data-slug="acrylic"] .g-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z'/><path d='M12 3v18M4 7.5L20 16.5M20 7.5L4 16.5' opacity='0.5'/></svg>");
}
.pfm-fb .pfm-fb-card .glazing-card[data-slug="none"] .g-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

/* === Builder polish (20260530_140432) === */

/* === Frame swatch with real photo === */
.pfm-fb .pfm-fb-card .frame-swatch.has-photo {
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
}
.pfm-fb .pfm-fb-card .frame-swatch.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.pfm-fb .pfm-fb-card .frame-swatch.has-photo.active {
  padding: 2px !important;
  border-color: var(--pfm-teal, #00B997);
}
.pfm-fb .pfm-fb-card .frame-swatch.has-photo.active img { border-radius: 4px; }

/* === Inline help panel that drops below "Need help measuring?" === */
.pfm-fb-card .pfm-help-panel {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--pfm-mint, #e9fbf7);
  border-left: 3px solid var(--pfm-teal, #00B997);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #2a3535;
  display: none;
}
.pfm-fb-card .pfm-help-panel.is-open { display: block; animation: pfm-help-in 0.22s ease; }
.pfm-fb-card .pfm-help-panel strong { display: block; color: var(--pfm-teal-dark, #009B80); margin-bottom: 6px; font-weight: 800; }
.pfm-fb-card .pfm-help-panel ul { margin: 6px 0 0; padding-left: 20px; }
.pfm-fb-card .pfm-help-panel li { margin-bottom: 4px; }
@keyframes pfm-help-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Make .link clearly clickable */
.pfm-fb-card .link { cursor: pointer; }

/* Smooth scroll target offset for sticky header */
.pfm-fb-card { scroll-margin-top: 90px; }