/**
 * Site Studio — builder chrome.
 *
 * The application shell only: top bar, breadcrumb, wizard steps, panels, the
 * live-preview stage, the section editor modal. The website being designed
 * lives inside the preview iframe and is styled entirely by the canvas
 * stylesheet and the section variants, so nothing in this file can leak into
 * a customer's site.
 *
 * Loaded ONLY on /build/. It is never enqueued through wp_enqueue_scripts and
 * never appears in the marketing bundles.
 */

/* Brand tokens, taken from assets/css/base.css rather than approximated:
   cyan #00ccf7, gold #FDD000, ink #0b1630, line #e5ebf0. --lsb-brand is the
   fill (buttons, active pills); --lsb-brand-deep is the same hue darkened for
   text and icons, because the brand cyan on white is well under 4.5:1. */
:root {
	--lsb-bg:         #eef2f5;
	--lsb-panel:      #ffffff;
	--lsb-ink:        #0b1630;
	--lsb-muted:      #5a6472;
	--lsb-line:       #e5ebf0;
	--lsb-brand:      #00ccf7;
	--lsb-brand-deep: #0089ab;
	--lsb-brand-hov:  #00b8e0;
	--lsb-brand-soft: #e6faff;
	--lsb-accent:     #fdd000;
	--lsb-warn:       #b45309;
	--lsb-warn-bg:    #fff7ec;
	--lsb-ok:         #0f7a4d;
	--lsb-ok-bg:      #eefaf3;
	--lsb-top-h:      64px;
	--lsb-panel-w:    400px;
	--lsb-radius:     12px;
	--lsb-glow:       0 12px 26px -10px rgba(0, 204, 247, .6);
}

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

html, body { height: 100%; }

.lsb {
	margin: 0;
	font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--lsb-ink);
	background: var(--lsb-bg);
}

.lsb button { font: inherit; }

/* Steps with a live preview lock the shell to the viewport height (the panel
   and stage scroll internally); steps that are just a form or a grid should
   scroll normally with the page, so single-column steps opt out here. */
.lsb:not(:has(.lsb__single)) { overflow: hidden; height: 100%; }

/* --------------------------------------------------------------------------
   Top bar + breadcrumb
   -------------------------------------------------------------------------- */

/* flex-wrap + a fixed height is what put the device toggle on a second row
   that then overlapped the page: the row wrapped but the bar stayed 62px, so
   the overflow rendered straight over the step below. One row that never
   wraps, with the step rail as the only thing allowed to shrink and scroll. */
.lsb__top {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-height: var(--lsb-top-h);
	padding-inline: 1rem;
	background: var(--lsb-panel);
	border-bottom: 1px solid var(--lsb-line);
	flex-wrap: nowrap;
}

.lsb__back {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--lsb-muted);
	text-decoration: none;
	padding: .45rem .7rem;
	border-radius: 8px;
	flex: 0 0 auto;
}

.lsb__back:hover { background: var(--lsb-bg); color: var(--lsb-ink); }

/* The only flexible child: it shrinks and scrolls sideways so the controls to
   its inline-end can never be pushed off the bar. min-width:0 is load-bearing —
   without it a flex item refuses to shrink below its content width. */
.lsb__crumb {
	display: flex;
	align-items: center;
	gap: .15rem;
	flex: 1 1 auto;
	min-width: 0;
	margin-inline-end: .3rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.lsb__crumb::-webkit-scrollbar { display: none; }

.lsb__crumbstep {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--lsb-muted);
	text-decoration: none;
	padding: .35rem .6rem;
	border-radius: 999px;
	white-space: nowrap;
}

a.lsb__crumbstep:hover { background: var(--lsb-bg); }

.lsb__crumbdot {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	border-radius: 50%;
	background: var(--lsb-bg);
	color: var(--lsb-muted);
	font-size: .68rem;
}

.lsb__crumbico { width: 14px; height: 14px; }

/* Ink on brand cyan, not white on brand cyan: #00ccf7 behind #fff is about
   1.9:1, behind the brand ink it is about 9:1. */
.lsb__crumbstep.is-current { color: var(--lsb-ink); background: var(--lsb-brand-soft); }
.lsb__crumbstep.is-current .lsb__crumbdot { background: var(--lsb-brand); color: var(--lsb-ink); }
.lsb__crumbstep.is-done { color: var(--lsb-ink); }
.lsb__crumbstep.is-done .lsb__crumbdot { background: var(--lsb-ok-bg); color: var(--lsb-ok); }
.lsb__crumbstep.is-locked { color: color-mix(in srgb, var(--lsb-muted) 55%, transparent); cursor: default; }

/* This used to read `span:last-child`, which — when the label was still a bare
   text node — matched the dot instead, hiding the number and keeping the word.
   Now the label is a real element, so it can be the thing that goes. */
/* 1520px is measured, not guessed: with every label shown the rail needs about
   1515px before it stops scrolling, so below that the labels come off and the
   icons carry it. The current step keeps its label at every width. */
@media (max-width: 1520px) {
	.lsb__crumbstep:not(.is-current) .lsb__crumblabel { display: none; }
	.lsb__crumbstep:not(.is-current) { padding: .35rem .3rem; }
}

.lsb__savebtn {
	appearance: none;
	flex: 0 0 auto;
	background: none;
	border: 1.5px solid var(--lsb-line);
	border-radius: 999px;
	padding: .4rem .9rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--lsb-muted);
	cursor: pointer;
	white-space: nowrap;
}

.lsb__savebtn:hover { border-color: var(--lsb-brand); color: var(--lsb-brand-deep); background: var(--lsb-brand-soft); }

.lsb__devices {
	display: flex;
	gap: .2rem;
	padding: .2rem;
	background: var(--lsb-bg);
	border-radius: 999px;
	flex: 0 0 auto;
}

.lsb__devices--inline { display: inline-flex; margin: 1.4rem 0; }

.lsb__device {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	border: 0;
	background: none;
	font-size: .82rem;
	font-weight: 600;
	color: var(--lsb-muted);
	padding: .38rem .8rem;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.lsb__device-ico { width: 15px; height: 15px; flex: none; }

/* Below this the labels cost more than they explain — the icons carry it. */
@media (max-width: 1240px) {
	.lsb__device span { display: none; }
	.lsb__device { padding: .38rem .55rem; }
}

.lsb__device:hover { color: var(--lsb-ink); }

.lsb__device.is-active {
	background: var(--lsb-panel);
	color: var(--lsb-ink);
	box-shadow: 0 1px 3px rgba(15, 27, 33, .14);
}

.lsb__devices--inline .lsb__device.is-active { background: var(--lsb-bg); box-shadow: none; }

/* --------------------------------------------------------------------------
   Two-column layout (details, look, header, pages, footer)
   -------------------------------------------------------------------------- */

.lsb__layout {
	display: grid;
	grid-template-columns: var(--lsb-panel-w) 1fr;
	height: calc(100vh - var(--lsb-top-h));
}

.lsb__panel {
	background: var(--lsb-panel);
	border-inline-end: 1px solid var(--lsb-line);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
}

.lsb__stage {
	display: grid;
	place-items: start center;
	overflow: auto;
	padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   Single-column layout (category, size, review)
   -------------------------------------------------------------------------- */

.lsb__single {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

.lsb__single--wide { max-width: 1180px; }

.lsb__intro { margin-bottom: 2rem; }
.lsb__intro--panel { margin-bottom: 1.4rem; }

.lsb__h1 {
	font-size: 1.7rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	letter-spacing: -.01em;
}

.lsb__intro--panel .lsb__h1 { font-size: 1.25rem; }

.lsb__lead { color: var(--lsb-muted); margin: 0; font-size: .98rem; max-width: 60ch; }
.lsb__intro--panel .lsb__lead { font-size: .88rem; }

/* --------------------------------------------------------------------------
   Buttons + nav row
   -------------------------------------------------------------------------- */

.lsb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	appearance: none;
	border: 1.5px solid transparent;
	border-radius: 8px;
	padding: .7rem 1.2rem;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* Matches the marketing button in base.css: brand cyan, white text, the same
   cyan glow and lift, so the builder reads as the same product. */
.lsb__btn--primary { background: var(--lsb-brand); color: #fff; box-shadow: var(--lsb-glow); }
.lsb__btn--primary:hover { background: var(--lsb-brand-hov); transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(0, 204, 247, .75); }
.lsb__btn--primary[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; transform: none; }

.lsb__btn--ghost { background: var(--lsb-panel); border-color: var(--lsb-line); color: var(--lsb-ink); }
.lsb__btn--ghost:hover { border-color: var(--lsb-brand); color: var(--lsb-brand-deep); background: var(--lsb-brand-soft); }

@media (prefers-reduced-motion: reduce) {
	.lsb__btn--primary:hover { transform: none; }
}

/* Sticky, not "at the end of whatever we just rendered". Back used to sit
   below a long list of options — on the size step it was most of a screen
   past the fold — so the one control that undoes a wrong turn was the one
   control you had to go looking for. It now rides the bottom of its own
   scroll container on every step.

   In the sidebar the bar is full-bleed, so the negative inline margins undo
   .lsb__panel's padding rather than leaving a gutter of panel either side. */
.lsb__navrow {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	margin-top: auto;
	margin-inline: -1.1rem;
	padding: .85rem 1.1rem;
	background: var(--lsb-panel);
	border-top: 1px solid var(--lsb-line);
}

/* Single-column steps scroll the page itself and sit on the app background,
   so the bar matches that instead of the sidebar's white. */
.lsb__single .lsb__navrow {
	margin-inline: 0;
	padding-inline: 0;
	background: linear-gradient(to top, var(--lsb-bg) 72%, rgba(238, 242, 245, 0));
	border-top: 0;
	padding-block: 1.1rem;
	margin-top: 1.6rem;
}

.lsb__navrow--wide { max-width: 100%; }

/* One lone button (a step that advances on selection, so it only needs a way
   back) — space-between would pin it to the edge of a full-width step. */
.lsb__navrow--centered { justify-content: center; }

.lsb__err {
	color: var(--lsb-warn);
	background: var(--lsb-warn-bg);
	border-radius: 8px;
	padding: .6rem .8rem;
	font-size: .88rem;
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Step 1 — category grid
   -------------------------------------------------------------------------- */

.lsb__catgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .7rem;
}

.lsb__cattile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	text-align: center;
	background: var(--lsb-panel);
	border: 1.5px solid var(--lsb-line);
	border-radius: var(--lsb-radius);
	padding: 1.4rem .8rem;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.lsb__cattile:hover { border-color: var(--lsb-brand); transform: translateY(-2px); }

.lsb__cattile.is-on {
	border-color: var(--lsb-brand);
	background: color-mix(in srgb, var(--lsb-brand) 6%, var(--lsb-panel));
	box-shadow: 0 0 0 3px rgba(0, 169, 207, .14);
}

.lsb__cattile-icon {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--lsb-bg);
	color: var(--lsb-brand);
}

.lsb__cattile-icon svg { width: 1.3rem; height: 1.3rem; }

.lsb__cattile-label { font-size: .86rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Step 2 — size grid
   -------------------------------------------------------------------------- */

.lsb__sizegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .8rem;
}

.lsb__sizetile {
	text-align: start;
	background: var(--lsb-panel);
	border: 1.5px solid var(--lsb-line);
	border-radius: var(--lsb-radius);
	padding: 1.2rem;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}

.lsb__sizetile:hover { border-color: var(--lsb-brand); transform: translateY(-2px); }

.lsb__sizetile.is-on {
	border-color: var(--lsb-brand);
	box-shadow: 0 0 0 3px rgba(0, 169, 207, .14);
}

.lsb__sizetile-n { font-size: 1.7rem; line-height: 1; }
.lsb__sizetile-label { font-size: .82rem; color: var(--lsb-muted); margin-inline-start: .3rem; }
.lsb__sizetile-hint { display: block; margin-top: .5rem; font-size: .84rem; color: var(--lsb-ink); }
.lsb__sizetile-pages { display: block; margin-top: .4rem; font-size: .76rem; color: var(--lsb-muted); }

/* --------------------------------------------------------------------------
   Forms (details step, section editor)
   -------------------------------------------------------------------------- */

.lsb__form { display: grid; gap: .9rem; }

.lsb__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.lsb__field { display: grid; gap: .35rem; }

.lsb__flabel { font-size: .82rem; font-weight: 600; }
.lsb__opt { font-weight: 400; color: var(--lsb-muted); }

.lsb__field input,
.lsb__field textarea,
.lsb__field select {
	width: 100%;
	font: inherit;
	font-size: .92rem;
	color: var(--lsb-ink);
	background: #fff;
	border: 1.5px solid var(--lsb-line);
	border-radius: 8px;
	padding: .6rem .7rem;
}

.lsb__field textarea { resize: vertical; min-height: 4rem; }

.lsb__field input:focus,
.lsb__field textarea:focus,
.lsb__field select:focus {
	outline: none;
	border-color: var(--lsb-brand);
	box-shadow: 0 0 0 3px rgba(0, 169, 207, .14);
}

.lsb__savehint {
	font-size: .78rem;
	color: var(--lsb-ok);
	min-height: 1em;
	margin: 0;
}

.lsb__savehint[data-state="error"] { color: var(--lsb-warn); }

/* --------------------------------------------------------------------------
   Step 4 — look & feel
   -------------------------------------------------------------------------- */

.lsb__lookgroup { margin-bottom: 1.5rem; }

.lsb__lookhead {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lsb-muted);
	margin: 0 0 .6rem;
}

.lsb__paletterow { display: flex; flex-wrap: wrap; gap: .5rem; }

.lsb__palette {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 3.4rem;
	height: 2.2rem;
	border-radius: 7px;
	overflow: hidden;
	border: 2px solid var(--lsb-line);
	cursor: pointer;
	padding: 0;
}

.lsb__palette > span { display: block; }
.lsb__palette.is-on { border-color: var(--lsb-ink); }

.lsb__pillrow { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Tighter than they were: fully-round 999px pills at .4/.85 padding read as
   loose chips and ate the sidebar's vertical space. A small radius and less
   padding fit more per row and look like controls rather than tags. */
.lsb__pill {
	appearance: none;
	background: var(--lsb-panel);
	border: 1.5px solid var(--lsb-line);
	border-radius: 7px;
	padding: .3rem .62rem;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lsb-ink);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.lsb__pill:hover { border-color: var(--lsb-brand); background: var(--lsb-brand-soft); }

.lsb__pill.is-on {
	background: var(--lsb-ink);
	border-color: var(--lsb-ink);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Shared: collapsible section types + variant gallery
   -------------------------------------------------------------------------- */

.lsb__group { margin-bottom: 1.6rem; }

.lsb__grouphead {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lsb-muted);
	margin: 0 0 .7rem;
}

.lsb__subhead {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lsb-muted);
	margin: 1rem 0 .5rem;
}

.lsb__subhead:first-of-type { margin-top: 0; }

.lsb__type {
	margin-bottom: .5rem;
	border: 1px solid var(--lsb-line);
	border-radius: 10px;
	overflow: hidden;
}

.lsb__typehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .55rem .7rem;
	cursor: pointer;
	list-style: none;
	background: var(--lsb-panel);
}

.lsb__typehead::-webkit-details-marker { display: none; }
.lsb__typehead:hover { background: var(--lsb-bg); }
.lsb__type[open] .lsb__typehead { border-bottom: 1px solid var(--lsb-line); }

.lsb__typename { font-weight: 600; font-size: .92rem; }

.lsb__count {
	font-size: .72rem;
	font-weight: 700;
	color: var(--lsb-muted);
	background: var(--lsb-bg);
	border-radius: 999px;
	padding: .1rem .5rem;
}

.lsb__variants {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .55rem;
	padding: .55rem;
}

.lsb__variants--slot { grid-template-columns: 1fr; padding: 0; }

.lsb__variant {
	appearance: none;
	text-align: start;
	cursor: pointer;
	background: var(--lsb-panel);
	border: 1.5px solid var(--lsb-line);
	border-radius: 10px;
	padding: .4rem;
	display: grid;
	gap: .4rem;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.lsb__variant:hover {
	border-color: var(--lsb-brand);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -14px rgba(15, 27, 33, .6);
}

.lsb__variant.is-picked {
	border-color: var(--lsb-brand);
	box-shadow: 0 0 0 3px rgba(0, 169, 207, .18);
}

/* Live miniature of the real design, not a screenshot — see preview.php.
   The frame renders at a real desktop viewport and is scaled down, so what
   the tile shows is the actual layout rather than a squeezed mobile one. */
.lsb__thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 6px;
	background: var(--lsb-bg);
	pointer-events: none;
}

.lsb__thumb--wide { aspect-ratio: 16 / 6; }

/* The factor is measured and written by site-builder.js at runtime, never
   hardcoded — a fixed scale only fits one panel width and clips every other. */
.lsb__thumbframe {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1280px;
	height: 800px;
	border: 0;
	transform: scale(var(--lsb-thumb-scale, .105));
	transform-origin: top left;
}

.lsb__vlabel { font-size: .78rem; line-height: 1.35; color: var(--lsb-muted); }

.lsb__hint { font-size: .8rem; color: var(--lsb-muted); margin: .8rem 0 0; }
.lsb__hint--empty { text-align: center; padding: 1rem 0; }

/* --------------------------------------------------------------------------
   Step 6 — page tabs + section list
   -------------------------------------------------------------------------- */

.lsb__pagetabs {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin-bottom: 1.3rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--lsb-line);
}

.lsb__pagetab {
	font-size: .82rem;
	font-weight: 600;
	color: var(--lsb-muted);
	text-decoration: none;
	padding: .4rem .75rem;
	border-radius: 999px;
}

.lsb__pagetab:hover { background: var(--lsb-bg); color: var(--lsb-ink); }
.lsb__pagetab.is-on { background: var(--lsb-ink); color: #fff; }

.lsb__sectionlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
	/* Rows must never widen the panel — a horizontal scrollbar here hides the
	   right-hand action icons on a narrow screen. */
	min-width: 0;
}

.lsb__sectionlist > li { min-width: 0; max-width: 100%; }

.lsb__secrow {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .5rem;
	border: 1px solid var(--lsb-line);
	border-radius: 9px;
	background: var(--lsb-panel);
	min-width: 0;
	overflow: hidden;
}

.lsb__secrow-info { flex: 1 1 auto; min-width: 0; }
/* min-width:0 on the flex item is what actually lets the text shrink; without
   it the row insists on its content width and pushes the action icons out of
   the panel, taking the Remove and Duplicate buttons off-screen. */
.lsb__secrow-type { font-size: .86rem; font-weight: 600; display: block; }
.lsb__secrow-variant { font-size: .74rem; color: var(--lsb-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lsb__secrow-actions { display: flex; gap: 0; flex: 0 0 auto; }

.lsb__iconbtn {
	appearance: none;
	background: none;
	border: 0;
	width: 1.72rem;
	height: 1.72rem;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 6px;
	cursor: pointer;
	color: var(--lsb-muted);
}

.lsb__iconbtn:hover { background: var(--lsb-bg); color: var(--lsb-ink); }
.lsb__iconbtn:disabled { opacity: .3; cursor: default; }
.lsb__iconbtn:disabled:hover { background: none; }
.lsb__iconbtn svg { width: 1rem; height: 1rem; }
.lsb__iconbtn--danger:hover { background: var(--lsb-warn-bg); color: var(--lsb-warn); }

/* --------------------------------------------------------------------------
   Section editor modal
   -------------------------------------------------------------------------- */

.lsb__editor {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center end;
}

.lsb__editor[hidden] { display: none; }

.lsb__editor-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 27, 33, .45);
}

.lsb__editor-panel {
	position: relative;
	width: min(440px, 100vw);
	height: 100%;
	background: var(--lsb-panel);
	display: flex;
	flex-direction: column;
	box-shadow: -20px 0 50px -30px rgba(0, 0, 0, .5);
}

.lsb__editor-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.2rem;
	border-bottom: 1px solid var(--lsb-line);
}

.lsb__editor-title { font-size: 1rem; font-weight: 700; margin: 0; }

.lsb__editor-x {
	appearance: none;
	background: none;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: var(--lsb-muted);
	padding: .2rem .5rem;
}

.lsb__editor-body { flex: 1 1 auto; overflow-y: auto; padding: 1.2rem; display: grid; gap: 1rem; align-content: start; }

.lsb__editor-foot {
	display: flex;
	justify-content: flex-end;
	gap: .6rem;
	padding: 1rem 1.2rem;
	border-top: 1px solid var(--lsb-line);
}

/* ---- field renderers built by JS inside the editor ------------------------ */

.lsb__ffield { display: grid; gap: .35rem; }
.lsb__ffield-label { font-size: .82rem; font-weight: 600; }

.lsb__ffield input,
.lsb__ffield textarea,
.lsb__ffield select {
	width: 100%;
	font: inherit;
	font-size: .92rem;
	border: 1.5px solid var(--lsb-line);
	border-radius: 8px;
	padding: .55rem .65rem;
	background: #fff;
}

.lsb__ffield input:focus, .lsb__ffield textarea:focus, .lsb__ffield select:focus {
	outline: none; border-color: var(--lsb-brand); box-shadow: 0 0 0 3px rgba(0, 169, 207, .14);
}

.lsb__ffield--bool { flex-direction: row; align-items: center; display: flex; gap: .5rem; }
.lsb__ffield--bool input { width: auto; }

.lsb__fnote {
	font-size: .8rem;
	color: var(--lsb-muted);
	background: var(--lsb-bg);
	border-radius: 8px;
	padding: .6rem .7rem;
}

.lsb__frepeater { display: grid; gap: .7rem; }

.lsb__frow {
	border: 1px solid var(--lsb-line);
	border-radius: 8px;
	padding: .7rem;
	display: grid;
	gap: .6rem;
	position: relative;
}

.lsb__frow-remove {
	position: absolute;
	top: .4rem;
	inset-inline-end: .4rem;
	appearance: none;
	background: none;
	border: 0;
	color: var(--lsb-muted);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}

.lsb__frow-remove:hover { color: var(--lsb-warn); }

.lsb__faddrow {
	justify-self: start;
	background: none;
	border: 1.5px dashed var(--lsb-line);
	border-radius: 8px;
	padding: .5rem .9rem;
	font-size: .84rem;
	font-weight: 600;
	color: var(--lsb-muted);
	cursor: pointer;
}

.lsb__faddrow:hover { border-color: var(--lsb-brand); color: var(--lsb-brand); }

/* --------------------------------------------------------------------------
   Preview stage
   -------------------------------------------------------------------------- */

.lsb__frame {
	width: 100%;
	max-width: 100%;
	height: 100%;
	background: #fff;
	border-radius: var(--lsb-radius);
	box-shadow: 0 24px 60px -40px rgba(15, 27, 33, .8);
	overflow: hidden;
	transition: max-width .32s cubic-bezier(.2, .7, .3, 1);
}

/* Real viewport widths, not a scaled-down desktop render: the customer has to
   see the actual mobile layout, media queries and all. */
.lsb__frame[data-size="tablet"] { max-width: 834px; }
.lsb__frame[data-size="mobile"] { max-width: 420px; }

.lsb__frame[data-size="tablet"],
.lsb__frame[data-size="mobile"] {
	height: calc(100% - 2rem);
	border: 10px solid #1b262c;
	border-radius: 26px;
}

.lsb__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   Step 7 — review
   -------------------------------------------------------------------------- */

.lsb__checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }

.lsb__checkitem {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .9rem;
	border-radius: 9px;
	font-size: .88rem;
}

.lsb__checkitem--warn { background: var(--lsb-warn-bg); color: var(--lsb-warn); }
.lsb__checkitem--info { background: var(--lsb-bg); color: var(--lsb-ink); }
.lsb__checkitem span { flex: 1 1 auto; }
.lsb__checkitem a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.lsb__checkicon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

.lsb__allclear {
	display: flex;
	align-items: center;
	gap: .6rem;
	background: var(--lsb-ok-bg);
	color: var(--lsb-ok);
	padding: .8rem 1rem;
	border-radius: 9px;
	font-weight: 600;
	margin: 0 0 1.5rem;
}

.lsb__reviewpages { display: grid; gap: 2rem; }

.lsb__reviewpage-title { font-size: 1rem; margin: 0 0 .6rem; }
.lsb__reviewpage-title em { font-style: normal; font-size: .7rem; text-transform: uppercase; color: var(--lsb-muted); background: var(--lsb-bg); border-radius: 999px; padding: .1rem .5rem; margin-inline-start: .4rem; }

.lsb__reviewpage .lsb__frame { height: 70vh; }

/* ---- plan panel ----------------------------------------------------------- */

.lsb__planpanel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding: 1.3rem 1.5rem;
	background: var(--lsb-panel);
	border: 1.5px solid var(--lsb-line);
	border-radius: var(--lsb-radius);
}

.lsb__planpanel-info { display: grid; gap: .2rem; margin-inline-end: auto; }

.lsb__planpanel-label { font-size: .78rem; color: var(--lsb-muted); }
.lsb__planpanel-name { font-size: 1.15rem; }
.lsb__planpanel-blurb { font-size: .85rem; color: var(--lsb-muted); max-width: 46ch; }

.lsb__pillrow em {
	font-style: normal;
	font-size: .7rem;
	font-weight: 700;
	color: var(--lsb-ok);
	margin-inline-start: .3rem;
}

.lsb__planpanel-price { display: flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.lsb__planpanel-price strong { font-size: 1.5rem; }
.lsb__planpanel-price span { font-size: .85rem; color: var(--lsb-muted); }

@media (max-width: 700px) {
	.lsb__planpanel { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   Narrow screens — the builder itself has to work on a phone
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.lsb__layout { grid-template-columns: 1fr; grid-template-rows: 50vh 1fr; height: auto; min-height: calc(100vh - var(--lsb-top-h)); }
	.lsb__panel { border-inline-end: 0; border-bottom: 1px solid var(--lsb-line); }
	.lsb__stage { padding: .75rem; }
	.lsb__devices:not(.lsb__devices--inline) { display: none; }
	.lsb__row2 { grid-template-columns: 1fr; }
	.lsb__editor-panel { width: 100vw; }

	/* The panel is only 50vh here, so a bar stuck to the bottom of *it* lands
	   halfway up the screen on top of the controls. Pin it to the viewport
	   instead — the usual mobile action bar — and reserve the space it covers
	   so the last control is still reachable. */
	.lsb__navrow {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		margin-inline: 0;
		padding: .7rem 1rem;
		box-shadow: 0 -6px 20px -12px rgba(11, 22, 48, .55);
	}

	.lsb__single .lsb__navrow {
		background: var(--lsb-panel);
		border-top: 1px solid var(--lsb-line);
		padding-block: .7rem;
		margin-top: 0;
	}

	.lsb__panel { padding-bottom: 4.5rem; }
	.lsb__single { padding-bottom: 5.5rem; }
}

/* --------------------------------------------------------------------------
   Photo fields + the photo library
   -------------------------------------------------------------------------- */

.lsb__photos { display: grid; gap: .6rem; }

.lsb__photostrip {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.lsb__photostrip:empty { display: none; }

.lsb__phototile {
	position: relative;
	width: 78px;
	height: 62px;
	border: 1.5px solid var(--lsb-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--lsb-bg);
}

.lsb__phototile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lsb__phototile-x {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 27, 33, .72);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.lsb__phototile-x:hover { background: var(--lsb-warn); }

.lsb__photoactions { display: flex; flex-wrap: wrap; gap: .4rem; }

.lsb__photobtn {
	appearance: none;
	background: var(--lsb-ink);
	color: #fff;
	border: 1.5px solid var(--lsb-ink);
	border-radius: 8px;
	padding: .45rem .8rem;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
}

.lsb__photobtn:hover { background: #000; }
.lsb__photobtn:disabled { opacity: .4; cursor: default; }

.lsb__photobtn--ghost {
	background: none;
	color: var(--lsb-ink);
	border-color: var(--lsb-line);
}

.lsb__photobtn--ghost:hover { background: none; border-color: var(--lsb-brand); color: var(--lsb-brand); }

.lsb__fnote.is-error { color: var(--lsb-warn); background: var(--lsb-warn-bg); }

/* ---- library modal ---- */

.lsb__editor--center { place-items: center; }

.lsb__editor-panel--wide {
	width: min(720px, 100vw);
	height: auto;
	max-height: min(80vh, 640px);
	border-radius: var(--lsb-radius);
}

.lsb__libgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: .6rem;
}

.lsb__libcell { position: relative; }

.lsb__libpick {
	display: block;
	width: 100%;
	padding: 0;
	appearance: none;
	border: 1.5px solid var(--lsb-line);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: var(--lsb-bg);
}

.lsb__libpick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lsb__libpick:hover { border-color: var(--lsb-brand); }

.lsb__libdel {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 27, 33, .72);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.lsb__libdel:hover { background: var(--lsb-warn); }

/* ==========================================================================
   Fixes from the first full QA pass
   ========================================================================== */

/* ---- the section editor must not hide what it is editing ----------------- *
   It used to be a full-height drawer over the right-hand side, which covered
   the very preview the person was editing against — so there was no live
   feedback at the moment it matters most. Now it sits over the control panel
   instead, leaving the website visible the whole time. */

.lsb__editor { place-items: stretch start; }

.lsb__editor-backdrop {
	/* No dimming: the preview behind is the point, and greying it out made
	   the live updates hard to read. A shadow separates the panel instead. */
	background: transparent;
}

.lsb__editor-panel {
	width: min(var(--lsb-panel-w), 100vw);
	margin-block-start: var(--lsb-top-h);
	height: calc(100vh - var(--lsb-top-h));
	box-shadow: 14px 0 40px -26px rgba(15, 27, 33, .55);
	border-inline-end: 1px solid var(--lsb-line);
}

/* The photo library is a genuine dialog — it is a grid to choose from, not
   something you watch the preview while using — so it stays centred. */
.lsb__editor--center { place-items: center; }
.lsb__editor--center .lsb__editor-backdrop { background: rgba(15, 27, 33, .45); }

.lsb__editor--center .lsb__editor-panel {
	margin-block-start: 0;
	height: auto;
	border-inline-end: 0;
}

/* ---- field help ---------------------------------------------------------- */

.lsb__ffield-help {
	font-size: .78rem;
	line-height: 1.45;
	color: var(--lsb-muted);
}

/* ---- busy states, so a slow action never reads as a dead control --------- */

.lsb__catgrid.is-working,
.lsb__sizegrid.is-working { pointer-events: none; }

.lsb__catgrid.is-working .lsb__cattile:not(.is-on),
.lsb__sizegrid.is-working .lsb__sizetile:not(.is-on) { opacity: .45; }

[aria-busy="true"] { position: relative; }

.lsb__cattile[aria-busy="true"],
.lsb__sizetile[aria-busy="true"] {
	border-color: var(--lsb-brand);
	box-shadow: 0 0 0 3px rgba(0, 169, 207, .18);
}

.lsb__btn[aria-busy="true"],
.lsb__btn:disabled { opacity: .75; cursor: progress; }

/* ---- placeholder photos should invite a replacement ---------------------- *
   Inside the preview these are neutral grey blocks, which reads as "broken"
   rather than "yours to fill". The hint only exists in the builder — the
   delivered site never loads this stylesheet. */

.lsb__frame { position: relative; }

.lsb__photohint {
	position: absolute;
	inset-block-end: .75rem;
	inset-inline-start: .75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .8rem;
	background: var(--lsb-ink);
	color: #fff;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	pointer-events: none;
	opacity: .92;
}

.lsb__photohint[hidden] { display: none; }

/* ---- step counter + autosave indicator ----------------------------------- */

.lsb__stepcount {
	flex: 0 0 auto;
	margin: 0;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lsb-muted);
	white-space: nowrap;
}

.lsb__autosave {
	flex: 0 0 auto;
	min-width: 4.5rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--lsb-muted);
	white-space: nowrap;
}

.lsb__autosave.is-ok  { color: var(--lsb-ok); }
.lsb__autosave.is-bad { color: var(--lsb-warn); }

@media (max-width: 1240px) {
	.lsb__stepcount { display: none; }
}

/* ---- arriving with an industry already in mind --------------------------- */

/* Shown only to somebody who already has a design in progress: the industry
   they came from is highlighted, but choosing it would restart their pages, so
   the tile is marked as a suggestion rather than silently selected. */
.lsb__lead--note {
	margin-top: .7rem;
	padding: .7rem .9rem;
	background: color-mix(in srgb, var(--lsb-brand) 9%, transparent);
	border-inline-start: 3px solid var(--lsb-brand);
	font-size: .92rem;
	color: var(--lsb-ink);
}

.lsb__cattile.is-suggested {
	border-color: var(--lsb-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lsb-brand) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Custom palette — the "bring your own brand colours" control
   -------------------------------------------------------------------------- */

.lsb__palette--custom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	width: auto;
	padding-inline: .55rem;
	background: var(--lsb-panel);
	color: var(--lsb-muted);
	font-size: .74rem;
	font-weight: 700;
}

.lsb__palette--custom:hover { border-color: var(--lsb-brand); color: var(--lsb-brand-deep); }
.lsb__palette--custom.is-on { border-color: var(--lsb-ink); color: var(--lsb-ink); }
.lsb__palette-plus { font-size: 1rem; line-height: 1; }

.lsb__custom {
	margin-top: .8rem;
	padding: .8rem;
	background: var(--lsb-bg);
	border-radius: 10px;
	display: grid;
	gap: .55rem;
}

.lsb__customnote { margin: 0 0 .1rem; font-size: .78rem; color: var(--lsb-muted); }

.lsb__customrow {
	display: grid;
	grid-template-columns: 2rem 1fr 5.6rem;
	align-items: center;
	gap: .55rem;
}

/* The native swatch is a button with a chunky default frame in every engine;
   stripping the padding and its inner border is what makes it read as a chip. */
.lsb__swatchinput {
	appearance: none;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	border: 1.5px solid var(--lsb-line);
	border-radius: 7px;
	background: none;
	cursor: pointer;
}

.lsb__swatchinput::-webkit-color-swatch-wrapper { padding: 2px; }
.lsb__swatchinput::-webkit-color-swatch { border: 0; border-radius: 5px; }
.lsb__swatchinput::-moz-color-swatch { border: 0; border-radius: 5px; }

.lsb__customlabel { display: flex; flex-direction: column; min-width: 0; }
.lsb__customlabel strong { font-size: .82rem; font-weight: 700; }
.lsb__customlabel em { font-size: .72rem; font-style: normal; color: var(--lsb-muted); }

.lsb__hexinput {
	inline-size: 100%;
	padding: .34rem .45rem;
	border: 1.5px solid var(--lsb-line);
	border-radius: 7px;
	font: 600 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--lsb-ink);
	background: var(--lsb-panel);
	text-transform: lowercase;
}

.lsb__hexinput:focus-visible { outline: 2px solid var(--lsb-brand); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   "Applying…" — every mutation reports itself
   -------------------------------------------------------------------------- */

/* A determinate-looking sliver across the top of the app. Cheap, always in the
   same place, and it does not move the layout while it runs. */
.lsb__progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	z-index: 90;
	background: transparent;
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease;
}

body.is-applying .lsb__progress { opacity: 1; }

.lsb__progress::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 38%;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--lsb-brand), transparent);
	animation: lsb-slide 1.05s ease-in-out infinite;
}

@keyframes lsb-slide {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(340%); }
}

/* The preview is the thing that visibly changes, so it is the thing that shows
   it is working. These two never nest — .lsb__stage is the panel steps,
   .lsb__reviewpages is review — so the opacities cannot compound. */
body.is-applying .lsb__stage,
body.is-applying .lsb__reviewpages {
	opacity: .55;
	transition: opacity .18s ease;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.lsb__progress::before { animation: none; inline-size: 100%; }
	body.is-applying .lsb__stage,
	body.is-applying .lsb__reviewpages { opacity: .8; }
}

/* --------------------------------------------------------------------------
   Review — the plan leads the step
   -------------------------------------------------------------------------- */

/* Brand-tinted and sitting above the previews rather than buried under them:
   this is the decision the step exists to collect. */
.lsb__planpanel--lead {
	margin-top: 1.4rem;
	margin-bottom: .4rem;
	align-items: stretch;
	gap: 1.25rem;
	background: linear-gradient(135deg, var(--lsb-brand-soft), var(--lsb-panel) 62%);
	border-color: color-mix(in srgb, var(--lsb-brand) 35%, var(--lsb-line));
	box-shadow: 0 10px 30px -22px rgba(11, 22, 48, .5);
}

.lsb__planpanel--lead .lsb__planpanel-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .7rem;
	color: var(--lsb-brand-deep);
}

.lsb__planpanel--lead .lsb__planpanel-label .lsb__ico { width: 14px; height: 14px; }
.lsb__planpanel--lead .lsb__planpanel-name { font-size: 1.32rem; font-weight: 700; }

/* Cycle toggle, price and the action in one column so the eye runs
   choose → cost → go rather than hunting across the panel. */
.lsb__planpanel-buy {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: .6rem;
	flex: 0 0 auto;
}

.lsb__planpanel-buy .lsb__btn { width: 100%; justify-content: center; }
.lsb__planpanel-buy .lsb__ico { width: 15px; height: 15px; }

.lsb__planpanel-price { display: flex; align-items: baseline; gap: .25rem; }
.lsb__planpanel-price strong { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.lsb__planpanel-price span { font-size: .85rem; color: var(--lsb-muted); }

/* The repeat at the foot of the step: price beside the button, Back opposite. */
.lsb__navprice { margin-inline-start: auto; display: flex; align-items: baseline; gap: .2rem; }
.lsb__navprice strong { font-size: 1.05rem; font-weight: 700; }
.lsb__navprice span { font-size: .8rem; color: var(--lsb-muted); }

/* Checklist rows read as a list of things to fix, so give them an obvious
   state colour and a real target rather than a bare underlined "Fix it". */
.lsb__checkitem--warn { border-inline-start: 3px solid var(--lsb-warn); }
.lsb__checkitem--info { border-inline-start: 3px solid var(--lsb-brand); }

@media (max-width: 760px) {
	.lsb__planpanel--lead { flex-direction: column; align-items: stretch; }
	.lsb__planpanel-buy { align-items: stretch; }
	.lsb__navprice { margin-inline-start: 0; }
}

/* The inline toggle sits on the app background, where a --lsb-bg track is the
   same colour as the page and the control vanished into it. Panel-white track
   with a border, and the active chip inverts to the app grey. */
.lsb__devicebar {
	display: flex;
	align-items: center;
	gap: .8rem;
	flex-wrap: wrap;
	margin: 1.6rem 0 .3rem;
}

.lsb__devicebar-label {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--lsb-muted);
}

.lsb__devices--inline {
	margin: 0;
	background: var(--lsb-panel);
	border: 1px solid var(--lsb-line);
}

.lsb__devices--inline .lsb__device.is-active {
	background: var(--lsb-ink);
	color: #fff;
	box-shadow: none;
}

.lsb__devices--inline .lsb__device.is-active .lsb__device-ico { color: var(--lsb-brand); }

/* The labels here are never hidden — this bar has a whole row to itself. */
@media (max-width: 1240px) {
	.lsb__devices--inline .lsb__device span { display: inline; }
	.lsb__devices--inline .lsb__device { padding: .38rem .8rem; }
}

/* --------------------------------------------------------------------------
   Phones — the step rail needs a row of its own
   -------------------------------------------------------------------------- */

/* At 390px the rail was being crushed to 8px of a 367px scroll width by the
   back link and the save button, so progress was invisible on a phone. Wrap is
   safe HERE, unlike the original bug, because the height goes auto with it —
   what overlapped the page before was wrapping inside a fixed 62px bar. */
@media (max-width: 700px) {
	.lsb__top {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: .5rem;
		row-gap: .4rem;
	}

	.lsb__crumb {
		flex: 1 0 100%;
		order: 3;
		margin-inline-end: 0;
		justify-content: space-between;
	}

	.lsb__savebtn { margin-inline-start: auto; }

	/* Icons only — eight labelled steps will never fit a phone row. */
	.lsb__crumbstep .lsb__crumblabel { display: none; }
	.lsb__crumbstep.is-current .lsb__crumblabel { display: inline; }
	.lsb__crumbstep { padding: .3rem .28rem; }
}