/* WP EasyCart Admin — Products › Add product, the product builder ( 6.0.7 ). Accent follows the admin colorizer ( --ec-brand ). */
.ecpb { --ecpb-accent: var(--ec-brand, var(--ecv2-primary, #2271b1)); --ecpb-soft: var(--ec-brand-soft, var(--ecv2-primary-light, #e8f0fa)); max-width:1180px; padding-bottom:24px; }
.ecpb-crumb { font-size:12.5px; color:var(--ecv2-g500); margin:4px 0 6px; }
.ecpb-crumb a { color:var(--ecv2-g600); text-decoration:none; }
.ecpb-crumb a:hover, .ecpb-crumb a:focus-visible { color:var(--ecpb-accent); text-decoration:underline; }
.ecpb-head h1 { margin:0 0 4px; font-size:22px; font-weight:700; line-height:1.25; color:var(--ecv2-g900); }
.ecpb-intro { margin:0 0 16px; font-size:13.5px; color:var(--ecv2-g600); max-width:68ch; }
.ecpb-loading { color:var(--ecv2-g500); }

/* layout: the steps, the preview beside them */
.ecpb-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.ecpb-side { position:sticky; top:46px; }
@media ( max-width: 960px ) { .ecpb-grid { grid-template-columns:minmax(0,1fr); } .ecpb-side { position:static; order:-1; } }
.ecpb-card { background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r, 8px); padding:6px 18px; }

/* steps */
.ecpb-steps { list-style:none; margin:0; padding:0; }
.ecpb-step { display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:16px 0; margin:0; }
.ecpb-step + .ecpb-step { border-top:1px solid var(--ecv2-g100); }
.ecpb-step-n { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; background:var(--ecv2-g100); color:var(--ecv2-g600); }
.ecpb-step.is-done .ecpb-step-n { background:#dcfce7; color:#166534; }
.ecpb-step.is-warn .ecpb-step-n { background:#fef3c7; color:#92400e; }
.ecpb-step-b { min-width:0; display:flex; flex-direction:column; gap:10px; }
.ecpb-step-t { margin:3px 0 0; font-size:14.5px; font-weight:700; line-height:1.3; color:var(--ecv2-g900); }
.ecpb-step-hint { margin:-6px 0 0; font-size:13px; line-height:1.45; color:var(--ecv2-g600); }
.ecpb-hint { margin:0; font-size:12.5px; line-height:1.45; color:var(--ecv2-g500); }
.ecpb-muted { font-size:12.5px; color:var(--ecv2-g500); }
.ecpb-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ecpb-row.is-tight { gap:6px; }
.ecpb-row.is-fields { align-items:flex-end; gap:12px; }
.ecpb-field { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ecv2-g600); }
.ecpb-field.is-grow { flex:1 1 220px; min-width:0; }
.ecpb-tier { margin:6px 0 0; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ecv2-g500); }

/* fields */
.ecpb .ecpb-input, .ecpb .ecpb-select { min-height:36px; padding:6px 10px; border:1px solid var(--ecv2-g300); border-radius:6px; font-size:14px; line-height:1.4; background:#fff; color:var(--ecv2-g900); box-shadow:none; max-width:100%; }
.ecpb .ecpb-input:focus, .ecpb .ecpb-select:focus { border-color:var(--ecpb-accent); outline:2px solid var(--ecpb-soft); outline-offset:0; }
.ecpb .ecpb-input[aria-invalid="true"] { border-color:#b91c1c; }
.ecpb .ecpb-input.is-num { width:96px; }
.ecpb .ecpb-input.is-small { width:64px; }
.ecpb .ecpb-kq { width:100%; min-height:44px; font-size:15px; }
.ecpb-money { display:inline-flex; align-items:center; gap:4px; }
.ecpb-sym { font-size:13px; color:var(--ecv2-g600); }
.ecpb-error { margin:0; font-size:12.5px; color:#b91c1c; }

/* chips and pills */
.ecpb-chip { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 12px; border:1px solid var(--ecv2-g300); border-radius:999px; background:#fff; color:var(--ecv2-g800); font-size:13px; cursor:pointer; }
.ecpb-chip:hover, .ecpb-chip:focus-visible { border-color:var(--ecpb-accent); color:var(--ecv2-g900); }
.ecpb-chip[aria-pressed="true"] { border-color:var(--ecpb-accent); background:var(--ecpb-soft); color:var(--ecv2-g900); box-shadow:inset 0 0 0 1px var(--ecpb-accent); }
.ecpb-tag, .ecpb-chip-plan { display:inline-block; padding:0 6px; border-radius:4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--ecv2-plan-bg, #ede9fe); color:var(--ecv2-plan-fg, #5b21b6); line-height:1.7; }
.ecpb-pill { display:inline-block; padding:3px 10px; border-radius:999px; background:#dcfce7; color:#166534; font-size:12.5px; font-weight:600; }
.ecpb-link { background:none; border:0; padding:0; color:var(--ecpb-accent); font-size:13px; text-decoration:underline; cursor:pointer; }
.ecpb-link:hover, .ecpb-link:focus-visible { color:var(--ecv2-g900); }
.ecpb-link:disabled { color:var(--ecv2-g400); cursor:default; text-decoration:none; }
.ecpb-val { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:3px 4px 3px 10px; border:1px solid var(--ecv2-g200); border-radius:6px; background:var(--ecv2-g50, #f8fafc); font-size:13px; color:var(--ecv2-g800); }
.ecpb-val.is-new { border-style:dashed; }
.ecpb-val small { color:var(--ecv2-g500); }
.ecpb-val .x { width:22px; height:22px; border:0; border-radius:4px; background:none; color:var(--ecv2-g500); font-size:16px; line-height:1; cursor:pointer; }
.ecpb-val .x:hover, .ecpb-val .x:focus-visible { background:var(--ecv2-g200); color:var(--ecv2-g900); }

/* segmented choice */
.ecpb-seg { display:inline-flex; flex-wrap:wrap; border:1px solid var(--ecv2-g300); border-radius:7px; overflow:hidden; }
.ecpb-seg button { min-height:34px; padding:5px 12px; border:0; background:#fff; color:var(--ecv2-g700); font-size:13px; cursor:pointer; }
.ecpb-seg button + button { border-left:1px solid var(--ecv2-g300); }
.ecpb-seg button[aria-pressed="true"] { background:var(--ecpb-soft); color:var(--ecv2-g900); font-weight:600; box-shadow:inset 0 -2px 0 var(--ecpb-accent); }
.ecpb-seg button:disabled { color:var(--ecv2-g400); cursor:not-allowed; }
.ecpb-seg button:focus-visible { outline:2px solid var(--ecpb-accent); outline-offset:-2px; }

/* the kind */
.ecpb-kindbar { display:flex; align-items:center; gap:10px; }
.ecpb-kindpill { display:inline-block; padding:4px 12px; border-radius:999px; background:var(--ecpb-soft); color:var(--ecv2-g900); font-weight:600; font-size:13.5px; }
.ecpb-setup p { margin:0; font-size:13px; color:var(--ecv2-g700); }
.ecpb-setup-list { margin:4px 0 0 18px; padding:0; list-style:disc; font-size:13px; line-height:1.5; color:var(--ecv2-g700); }
.ecpb-setup-list li { margin:0; }
.ecpb-kres { display:flex; flex-direction:column; gap:6px; }
.ecpb-kres-i { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; width:100%; padding:10px 12px; border:1px solid var(--ecv2-g200); border-radius:7px; background:#fff; text-align:left; cursor:pointer; font-size:13.5px; color:var(--ecv2-g900); }
.ecpb-kres-i span { font-size:12px; color:var(--ecv2-g500); }
.ecpb-kres-i:hover, .ecpb-kres-i:focus-visible { border-color:var(--ecpb-accent); background:var(--ecpb-soft); }
.ecpb-kres-i.is-top { border-color:var(--ecpb-accent); }
.ecpb-guide { padding:12px 14px; border:1px solid var(--ecv2-g200); border-radius:8px; background:var(--ecv2-g50, #f8fafc); display:flex; flex-direction:column; gap:8px; }
.ecpb-guide-h { margin:0; font-size:13px; color:var(--ecv2-g800); }
.ecpb-guide-qs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ecpb-guide-qs li { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; font-size:13px; color:var(--ecv2-g700); }
.ecpb-guide-qs li.is-done b { color:var(--ecv2-g900); }
.ecpb-guide-qs li.is-now { flex-direction:column; align-items:flex-start; }

/* notes */
.ecpb-note { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; border-radius:7px; font-size:13px; line-height:1.45; background:var(--ecv2-g50, #f8fafc); border:1px solid var(--ecv2-g200); color:var(--ecv2-g700); }
.ecpb-note.is-info { background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; margin:0 0 14px; }
.ecpb-note.is-warn { background:#fffbeb; border-color:#fde68a; color:#78350f; }
.ecpb-note.is-gap { background:#fff; border-style:dashed; color:var(--ecv2-g600); }
.ecpb-note.is-lock { background:#faf5ff; border-color:#e9d5ff; color:#4c1d95; }
.ecpb-note.is-lock > span:not(.ecpb-chip-plan) { flex:1 1 200px; }

/* versions */
.ecpb-opt { padding:10px 12px; border:1px solid var(--ecv2-g200); border-radius:8px; display:flex; flex-direction:column; gap:8px; }
.ecpb-opt-top { justify-content:space-between; }
.ecpb .ecpb-opt-name { flex:1 1 160px; font-weight:600; }
.ecpb-vals { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ecpb .ecpb-addval { flex:1 1 140px; min-height:30px; padding:3px 8px; font-size:13px; }
.ecpb-swatch { position:relative; width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.2); overflow:hidden; cursor:pointer; flex:none; }
.ecpb-swatch input { position:absolute; inset:-6px; width:30px; height:30px; padding:0; border:0; opacity:0; cursor:pointer; }
.ecpb-vcount { margin:0; font-size:13px; color:var(--ecv2-g700); }
.ecpb-varlist { display:flex; flex-wrap:wrap; gap:4px; }
.ecpb-varlist span { padding:2px 8px; border-radius:4px; background:var(--ecv2-g100); font-size:12px; color:var(--ecv2-g700); }

/* pages, photo, file */
.ecpb-pres ul { list-style:none; margin:0; padding:0; max-height:220px; overflow:auto; border:1px solid var(--ecv2-g200); border-radius:7px; }
.ecpb-pres li { margin:0; padding:6px 10px; }
.ecpb-pres li + li { border-top:1px solid var(--ecv2-g100); }
.ecpb-pres small { color:var(--ecv2-g500); }
.ecpb-check { display:inline-flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ecv2-g800); cursor:pointer; }
.ecpb-check input { margin:2px 0 0; }
.ecpb-check.is-off { color:var(--ecv2-g500); cursor:default; }
.ecpb-photo { display:flex; align-items:center; gap:10px; }
.ecpb-thumb { width:52px; height:52px; border-radius:6px; overflow:hidden; border:1px solid var(--ecv2-g200); flex:none; }
.ecpb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ecpb-file { padding:4px 10px; border-radius:6px; background:var(--ecv2-g100); font-size:13px; overflow-wrap:anywhere; }

/* switch */
.ecpb-switch { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--ecv2-g800); cursor:pointer; }
.ecpb-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.ecpb-switch-ui { position:relative; width:36px; height:20px; border-radius:999px; background:var(--ecv2-g300); transition:background .15s; flex:none; }
.ecpb-switch-ui::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.ecpb-switch input:checked + .ecpb-switch-ui { background:var(--ecpb-accent); }
.ecpb-switch input:checked + .ecpb-switch-ui::after { transform:translateX(16px); }
.ecpb-switch input:focus-visible + .ecpb-switch-ui { outline:2px solid var(--ecpb-accent); outline-offset:2px; }

/* the preview */
.ecpb-pv { background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r, 8px); overflow:hidden; }
.ecpb-pv-h { display:flex; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--ecv2-g100); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ecv2-g500); }
.ecpb-pv-h b { font-weight:700; }
.ecpb-pv-b { padding:14px; display:flex; flex-direction:column; gap:8px; }
.ecpb-pv-photo { aspect-ratio:4 / 3; max-width:100%; border-radius:6px; background:var(--ecv2-g100); color:var(--ecv2-g400); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ecpb-pv-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.ecpb-pv-title { font-size:17px; font-weight:700; line-height:1.3; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpb-pv-price { font-size:16px; font-weight:600; color:var(--ecv2-g900); font-variant-numeric:tabular-nums; }
.ecpb-pv-price s { margin-left:6px; font-weight:400; color:var(--ecv2-g500); }
.ecpb-pv-small { margin:0; font-size:12.5px; line-height:1.45; color:var(--ecv2-g600); }
.ecpb-pv-opt .l { margin:0 0 4px; font-size:12.5px; color:var(--ecv2-g700); }
.ecpb-pv-opt .ecpb-select { width:100%; }
.ecpb-pv-sw { display:flex; flex-wrap:wrap; gap:6px; }
.ecpb-pv-sw button { width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.2); cursor:pointer; padding:0; }
.ecpb-pv-sw button[aria-pressed="true"] { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ecpb-accent); }
.ecpb-pv-input { height:32px; border:1px solid var(--ecv2-g300); border-radius:5px; background:#fff; }
.ecpb-pv-add { margin-top:4px; padding:10px; border-radius:6px; background:var(--ecv2-g900); color:#fff; text-align:center; font-size:13.5px; font-weight:600; }
.ecpb-pv-add.is-quiet { background:var(--ecv2-g100); color:var(--ecv2-g600); }
.ecpb-pv-why { margin:0; font-size:12.5px; color:var(--ecv2-g500); }

/* the bar: stuck to the foot of the content column while the page scrolls */
.ecpb-bar { position:sticky; bottom:0; z-index:20; margin:16px 0 0; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r, 8px); box-shadow:0 -2px 10px rgba(15,23,42,.06); }
.ecpb-bar-in { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px 16px; }
.ecpb-bar .ecv2-btn:disabled { opacity:.5; cursor:not-allowed; }
.ecpb-bar-note { margin:0; font-size:12.5px; color:var(--ecv2-g500); flex:1 1 220px; }
.ecpb-created { margin:0 0 14px; }

@media ( max-width: 600px ) {
	.ecpb-card { padding:4px 12px; }
	.ecpb-step { grid-template-columns:24px minmax(0,1fr); gap:10px; }
	.ecpb-bar-in { padding:10px 16px; }
}

/* 6.0.7 review: version options from the store's saved option sets, extras ( saved modifiers ), the option set builder. */
.ecpb-addopt { display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.ecpb-addopt-h { margin:0; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ecv2-g500); }
.ecpb-reuse { max-width:420px; }
.ecpb .ecpb-reuse .ecpb-select { width:100%; }
.ecpb-builder-link { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
.ecpb-opt.is-saved { background:var(--ecv2-g50, #f8fafc); }
.ecpb-opt-saved { flex:1 1 auto; font-size:14px; color:var(--ecv2-g900); }
.ecpb-tag { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--ecpb-soft, #eef2ff); color:var(--ecv2-g700); font-size:11.5px; font-weight:600; }
.ecpb-val.is-saved, .ecpb-val.is-more { padding-right:10px; background:#fff; }
.ecpb-val.is-more { color:var(--ecv2-g500); }
.ecpb-dot { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex:none; }
.ecpb-mods { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ecpb-mods li { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:8px 12px; border:1px solid var(--ecv2-g200); border-radius:8px; }
.ecpb-mod-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ecpb-mod-text b { font-size:13.5px; color:var(--ecv2-g900); }
.ecpb-mod-text span { font-size:12px; color:var(--ecv2-g500); overflow-wrap:anywhere; }
.ecpb-mods-new { align-self:flex-end; }

/* 6.0.7 review, second round ( Matt ): placeholders that read, the kind's parts as switch cards, a photo tile and the price in a row of
   its own, the page address and SKU from the name, searchable lists for saved option sets, modifiers and categories, stock for each
   variation. */
.ecpb .ecpb-input::placeholder { color:var(--ecv2-g500, #6b7280); opacity:1; }

/* what the kind sets up */
.ecpb-feats-h { margin:2px 0 0; font-size:13px; color:var(--ecv2-g700); }
.ecpb-feats { display:grid; grid-template-columns:repeat( auto-fit, minmax( 240px, 1fr ) ); gap:10px; }
.ecpb-feat { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:64px; padding:12px 14px; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.ecpb-feat:hover { border-color:var(--ecv2-g400); }
.ecpb-feat:focus-within { outline:2px solid var(--ecpb-accent); outline-offset:1px; }
.ecpb-feat.is-on { border-color:var(--ecpb-accent); background:var(--ecpb-soft); box-shadow:inset 0 0 0 1px var(--ecpb-accent); }
.ecpb-feat-ico { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--ecv2-g100); color:var(--ecv2-g500); }
.ecpb-feat.is-on .ecpb-feat-ico { background:#fff; color:var(--ecpb-accent); }
.ecpb-feat-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ecpb-feat-t b { font-size:13.5px; color:var(--ecv2-g900); }
.ecpb-feat-t > span { font-size:12.5px; line-height:1.4; color:var(--ecv2-g600); }
.ecpb-feat .ecpb-switch-ui { width:40px; height:22px; }
.ecpb-feat .ecpb-switch-ui::after { width:18px; height:18px; }
.ecpb-feat .ecpb-switch input:checked + .ecpb-switch-ui::after { transform:translateX(18px); }
.ecpb-feat .ecpb-switch input:focus-visible + .ecpb-switch-ui { outline:none; }
.ecpb-feats-facts { color:var(--ecv2-g600); }

/* name, page address, price, SKU and photo */
.ecpb-namegrid { display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:start; }
.ecpb-namegrid-photo { display:flex; flex-direction:column; gap:6px; }
.ecpb-namegrid-f { display:flex; flex-direction:column; gap:10px; min-width:0; }
.ecpb .ecpb-ptile { width:150px; aspect-ratio:1 / 1; max-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px; border:2px dashed var(--ecv2-g300); border-radius:10px; background:var(--ecv2-g50, #f8fafc); color:var(--ecv2-g500); text-align:center; cursor:pointer; font:inherit; }
.ecpb .ecpb-ptile:hover, .ecpb .ecpb-ptile:focus-visible { border-color:var(--ecpb-accent); background:var(--ecpb-soft); color:var(--ecpb-accent); outline:none; }
.ecpb-ptile b { font-size:13.5px; color:var(--ecv2-g800); }
.ecpb-ptile span { font-size:11.5px; line-height:1.35; color:var(--ecv2-g500); }
.ecpb .ecpb-ptile.has-img { padding:0; border:1px solid var(--ecv2-g200); background:#fff; overflow:hidden; cursor:default; }
.ecpb-ptile.has-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ecpb-ptile-acts { display:flex; flex-wrap:wrap; gap:4px 12px; }
.ecpb .ecpb-input.is-name { width:100%; min-height:42px; font-size:16px; }
.ecpb-name { width:100%; }
.ecpb-url { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; margin:-4px 0 0; font-size:12.5px; color:var(--ecv2-g500); overflow-wrap:anywhere; }
.ecpb-url-v { color:var(--ecv2-g600); }
.ecpb-url-v b { color:var(--ecv2-g900); font-weight:600; }
.ecpb-url-empty { font-style:italic; }
.ecpb-url.is-edit { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:-4px 0 0; font-size:12.5px; color:var(--ecv2-g600); }
.ecpb .ecpb-input.ecpb-slug { min-height:30px; padding:3px 8px; font-size:13px; width:min( 280px, 100% ); }
.ecpb-prices { gap:14px; }
.ecpb-price > span:first-child { font-size:13px; font-weight:600; color:var(--ecv2-g800); }
.ecpb .ecpb-input.is-price { width:140px; min-height:44px; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.ecpb-money.is-price .ecpb-sym { font-size:16px; font-weight:600; color:var(--ecv2-g700); }
.ecpb-compare .ecpb-input.is-price { font-weight:400; color:var(--ecv2-g700); }
.ecpb-sku { max-width:340px; }
.ecpb-sku .ecpb-input { width:100%; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; letter-spacing:.02em; }
.ecpb-sku-note { font-size:12px; color:var(--ecv2-g500); }
.ecpb-sku-note.is-bad { color:#b91c1c; }
@media ( max-width: 600px ) {
	.ecpb-namegrid { grid-template-columns:minmax(0,1fr); }
	.ecpb .ecpb-ptile { width:100%; aspect-ratio:auto; min-height:110px; }
	.ecpb-ptile.has-img { max-width:150px; aspect-ratio:1 / 1; }
}

/* searchable lists */
.ecpb-combo { display:flex; flex-direction:column; gap:4px; max-width:520px; }
.ecpb-combo-l { font-size:12.5px; color:var(--ecv2-g600); }
.ecpb-combo-w { position:relative; }
.ecpb-combo-ico { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ecv2-g500); pointer-events:none; }
.ecpb .ecpb-input.ecpb-combo-in { width:100%; padding-left:32px; }
.ecpb-combo-list { position:absolute; z-index:40; left:0; right:0; top:calc( 100% + 4px ); max-height:320px; overflow:auto; margin:0; padding:4px; list-style:none; background:#fff; border:1px solid var(--ecv2-g200); border-radius:8px; box-shadow:0 10px 28px rgba(15,23,42,.14); }
.ecpb-combo-o { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:0; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; color:var(--ecv2-g800); }
.ecpb-combo-o b { color:var(--ecv2-g900); font-weight:600; }
.ecpb-combo-o span { flex:1 1 160px; min-width:0; color:var(--ecv2-g500); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ecpb-combo-o small { color:var(--ecv2-g500); font-size:11.5px; }
.ecpb-combo-o:hover, .ecpb-combo-o.is-active { background:var(--ecpb-soft); }
.ecpb-combo-o.is-active { box-shadow:inset 0 0 0 1px var(--ecpb-accent); }
.ecpb-combo-o.is-new b { color:var(--ecpb-accent); }
.ecpb-combo-h { margin:0; padding:6px 10px; font-size:11.5px; color:var(--ecv2-g500); }
.ecpb-chip small { color:var(--ecv2-g500); font-size:11px; }
.ecpb-val.is-new small { color:var(--ecv2-g500); font-size:11px; }

/* 6.0.7 review, Matt's third look: the head as a V6 page card with the steps, photos as a gallery, more pricing in the editor, the
   description with AI, choices added with Add and moved, photos for each choice, Each variation, tax codes searched, switch cards
   for where it shows, modifiers drawn as the product page draws them. */
.ecpb-head { display:flex; flex-direction:column; gap:12px; margin:4px 0 16px; padding:16px 18px; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r, 8px); }
.ecpb-head-top { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; }
.ecpb-head-ico { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--ecpb-soft); color:var(--ecpb-accent); }
.ecpb-head-t { min-width:0; }
.ecpb-head .ecpb-crumb { margin:0 0 2px; }
.ecpb-head h1 { margin:0 0 2px; }
.ecpb-head .ecpb-intro { margin:0; }
.ecpb-progress { display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:180px; }
.ecpb-prog-t { font-size:12.5px; color:var(--ecv2-g600); text-align:right; }
.ecpb-prog-t b { color:var(--ecv2-g900); font-weight:700; }
.ecpb-prog-bar { position:relative; display:block; width:180px; height:6px; border-radius:999px; background:var(--ecv2-g100); overflow:hidden; }
.ecpb-prog-bar span { position:absolute; left:0; top:0; bottom:0; border-radius:inherit; background:var(--ecpb-accent); transition:width .25s; }
.ecpb-track { padding-top:12px; border-top:1px solid var(--ecv2-g100); overflow-x:auto; }
.ecpb-trk-l { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.ecpb-trk-l li { margin:0; }
.ecpb .ecpb-trk { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px 2px 3px; border:1px solid var(--ecv2-g200); border-radius:999px; background:#fff; color:var(--ecv2-g700); font-size:12.5px; text-decoration:none; white-space:nowrap; }
.ecpb .ecpb-trk:hover, .ecpb .ecpb-trk:focus-visible { border-color:var(--ecpb-accent); color:var(--ecv2-g900); outline:none; }
.ecpb .ecpb-trk:focus-visible { box-shadow:0 0 0 2px var(--ecpb-soft); }
.ecpb-trk-n { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--ecv2-g100); color:var(--ecv2-g600); }
.ecpb-trk.is-done .ecpb-trk-n { background:#dcfce7; color:#166534; }
.ecpb-trk.is-warn { border-color:#fde68a; }
.ecpb-trk.is-warn .ecpb-trk-n { background:#fef3c7; color:#92400e; }
.ecpb-step-t:focus { outline:none; }
@media ( max-width: 700px ) {
	.ecpb-head-top { grid-template-columns:auto minmax(0,1fr); }
	.ecpb-progress { grid-column:1 / -1; align-items:flex-start; }
	.ecpb-prog-t { text-align:left; }
	.ecpb-trk-l { flex-wrap:nowrap; }
}

/* photos */
.ecpb-ptile { position:relative; }
.ecpb-ptile-main { position:absolute; left:6px; bottom:6px; padding:1px 7px; border-radius:999px; background:rgba(15,23,42,.72); color:#fff; font-size:11px; font-weight:600; }
.ecpb-thumbs { display:flex; flex-wrap:wrap; gap:6px; }
.ecpb-thumb { position:relative; width:44px; height:44px; border-radius:7px; border:1px solid var(--ecv2-g200); background:var(--ecv2-g50, #f8fafc); overflow:hidden; }
.ecpb-thumb.is-main { box-shadow:0 0 0 2px var(--ecpb-accent); border-color:transparent; }
.ecpb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ecpb .ecpb-thumb .x, .ecpb .ecpb-thumb-main { position:absolute; top:2px; width:18px; height:18px; padding:0; border:0; border-radius:50%; background:rgba(15,23,42,.72); color:#fff; font-size:12px; line-height:18px; text-align:center; cursor:pointer; opacity:0; }
.ecpb .ecpb-thumb .x { right:2px; }
.ecpb .ecpb-thumb-main { left:2px; font-size:10px; }
.ecpb-thumb:hover .x, .ecpb-thumb:hover .ecpb-thumb-main, .ecpb .ecpb-thumb .x:focus-visible, .ecpb .ecpb-thumb-main:focus-visible { opacity:1; }
.ecpb .ecpb-thumb.is-add, .ecpb .ecpb-thumb.is-lock { display:flex; align-items:center; justify-content:center; gap:2px; border:2px dashed var(--ecv2-g300); color:var(--ecv2-g600); font-size:20px; line-height:1; cursor:pointer; padding:0; }
.ecpb .ecpb-thumb.is-add:hover, .ecpb .ecpb-thumb.is-add:focus-visible { border-color:var(--ecpb-accent); color:var(--ecpb-accent); background:var(--ecpb-soft); outline:none; }
.ecpb .ecpb-thumb.is-lock { flex-direction:column; border-color:#e9d5ff; background:#faf5ff; color:#5b21b6; font-size:15px; }
.ecpb .ecpb-thumb.is-lock span { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ecpb-thumbs.is-small .ecpb-thumb { width:38px; height:38px; }
@media ( hover: none ) { .ecpb .ecpb-thumb .x, .ecpb .ecpb-thumb-main { opacity:1; } }

/* more pricing in the editor */
.ecpb-pmore { display:flex; flex-direction:column; gap:6px; margin-top:-2px; }
.ecpb-pmore-h { margin:0; font-size:12px; color:var(--ecv2-g500); }
/* 6.0.7 review, Matt: they looked clickable. Words with an icon, a dotted underline and a note on hover or focus; on Free a Pro one
   is still a button to the plans, as its tag says. */
.ecpb-pmore-l { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; list-style:none; }
.ecpb-pmore-l > li { position:relative; margin:0; }
.ecpb .ecpb-pm { display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:0; border:0; background:none; color:var(--ecv2-g600); font-size:12.5px; cursor:help; }
.ecpb .ecpb-pm-t { text-decoration:underline dotted var(--ecv2-g400); text-underline-offset:3px; }
.ecpb .ecpb-pm svg { color:var(--ecv2-g400); }
.ecpb .ecpb-pm:focus-visible { outline:2px solid var(--ecpb-accent); outline-offset:2px; border-radius:3px; }
.ecpb .ecpb-pm.is-pro { cursor:pointer; color:#4c1d95; font:inherit; font-size:12.5px; }
.ecpb .ecpb-pm.is-pro .ecpb-pm-t { text-decoration-color:#a78bfa; }
.ecpb .ecpb-pm.is-pro:hover .ecpb-pm-t { text-decoration-style:solid; }
.ecpb-pm-tip { position:absolute; left:0; bottom:calc( 100% + 6px ); z-index:20; width:max-content; max-width:260px; padding:7px 10px; border-radius:6px; background:var(--ecv2-g900, #0f172a); color:#fff; font-size:12px; line-height:1.4; box-shadow:0 4px 14px rgba( 15, 23, 42, .18 ); opacity:0; visibility:hidden; transition:opacity .12s ease; pointer-events:none; }
.ecpb-pmore-l > li:hover .ecpb-pm-tip, .ecpb-pm:focus-visible + .ecpb-pm-tip, .ecpb-opin:hover .ecpb-pm-tip, .ecpb-opin:focus-visible .ecpb-pm-tip { opacity:1; visibility:visible; }
.ecpb-pm .ecpb-chip-plan { margin-left:2px; }

/* description */
.ecpb .ecpb-desc { width:100%; max-width:none; min-height:110px; resize:vertical; line-height:1.5; }
.ecpb-ai-row { align-items:center; }
.ecpb .ecpb-ai { display:inline-flex; align-items:center; gap:6px; }
.ecpb .ecpb-ai svg { color:#7c3aed; }
.ecpb .ecpb-ai[aria-busy="true"] svg { animation:ecpb-spin 1.2s linear infinite; }
@keyframes ecpb-spin { to { transform:rotate(360deg); } }
@media ( prefers-reduced-motion: reduce ) { .ecpb .ecpb-ai[aria-busy="true"] svg { animation:none; } }

/* versions: move, add, drag */
.ecpb-omove { display:inline-flex; gap:2px; }
/* The option whose choices have their own photos stays first: said, not two arrows that do nothing ( 6.0.7 review, Matt ). */
.ecpb-opin { position:relative; display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:0 8px; border-radius:999px; background:var(--ecpb-soft, #eef2ff); color:var(--ecv2-g700); font-size:12px; cursor:help; }
.ecpb-opin:focus-visible { outline:2px solid var(--ecpb-accent); outline-offset:1px; }
.ecpb-opin .ecpb-pm-tip { left:auto; right:0; }
/* A choice: its name is a button that renames it. */
.ecpb .ecpb-val-t { padding:1px 2px; border-radius:4px; cursor:text; }
.ecpb .ecpb-val-t:hover { background:var(--ecv2-g200); }
.ecpb .ecpb-val-t:focus-visible { outline:2px solid var(--ecpb-accent); outline-offset:1px; }
.ecpb .ecpb-val.is-edit { padding:2px 4px 2px 6px; background:#fff; border-color:var(--ecpb-accent); }
.ecpb .ecpb-val .ecpb-val-in { min-height:24px; width:auto; padding:1px 6px; font-size:13px; }
.ecpb-addhint.is-warn { color:#b45309; }
/* Price and weight boxes carry the currency and the unit. */
.ecpb-cell-unit { display:inline-flex; align-items:center; gap:4px; }
.ecpb-cell-unit > span { font-size:12.5px; color:var(--ecv2-g500); }
.ecpb .ecpb-ibtn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--ecv2-g200); border-radius:6px; background:#fff; color:var(--ecv2-g700); cursor:pointer; }
.ecpb .ecpb-ibtn:hover, .ecpb .ecpb-ibtn:focus-visible { border-color:var(--ecpb-accent); color:var(--ecpb-accent); outline:none; }
.ecpb .ecpb-ibtn:disabled { color:var(--ecv2-g300); border-color:var(--ecv2-g100); cursor:default; }
.ecpb-addrow { display:flex; gap:6px; align-items:center; }
.ecpb .ecpb-addrow .ecpb-addval { flex:1 1 auto; min-height:32px; }
.ecpb-addhint { margin-top:-4px; }
.ecpb-val[draggable="true"] { cursor:grab; }
.ecpb-val.is-dragging { opacity:.4; }
.ecpb-val.is-over { box-shadow:inset 3px 0 0 var(--ecpb-accent); }

/* photos for each choice */
.ecpb .ecpb-vimg-on { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:3px 10px; border:1px dashed var(--ecv2-g300); border-radius:7px; background:#fff; color:var(--ecv2-g700); font-size:12.5px; cursor:pointer; }
.ecpb .ecpb-vimg-on:hover, .ecpb .ecpb-vimg-on:focus-visible { border-color:var(--ecpb-accent); color:var(--ecpb-accent); outline:none; }
.ecpb .ecpb-vimg-on.is-pro { border-style:solid; border-color:#e9d5ff; background:#faf5ff; color:#4c1d95; }
.ecpb-vimg { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:7px; background:var(--ecv2-g50, #f8fafc); }
.ecpb-vimg-top { justify-content:space-between; }
.ecpb-vimg-top b { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ecv2-g900); }
.ecpb-vimg-row { display:grid; grid-template-columns:minmax(80px,160px) minmax(0,1fr); gap:10px; align-items:center; }
.ecpb-vimg-n { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ecv2-g800); overflow-wrap:anywhere; }
.ecpb-dot { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex:none; }

/* each variation */
.ecpb-vt { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--ecv2-g200); border-radius:8px; }
.ecpb-vt:focus { outline:2px solid var(--ecpb-soft); }
.ecpb-vt-head { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.ecpb-vt-head b { font-size:13.5px; color:var(--ecv2-g900); }
.ecpb-vt-fill { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; padding:8px 10px; border-radius:7px; background:var(--ecv2-g50, #f8fafc); font-size:12.5px; color:var(--ecv2-g700); }
.ecpb .ecpb-select.is-small { min-height:30px; padding:3px 8px; font-size:13px; }
.ecpb .ecpb-vt-fill .ecpb-input.is-small { width:80px; min-height:30px; }
.ecpb-vt-wrap { max-height:420px; overflow:auto; border:1px solid var(--ecv2-g200); border-radius:7px; }
.ecpb-vt-t { width:100%; border-collapse:collapse; font-size:13px; }
.ecpb-vt-t th, .ecpb-vt-t td { padding:4px 6px; text-align:left; border-bottom:1px solid var(--ecv2-g100); vertical-align:middle; }
.ecpb-vt-t thead th { position:sticky; top:0; z-index:1; background:var(--ecv2-g50, #f8fafc); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ecv2-g500); white-space:nowrap; }
.ecpb-vt-t tbody th { font-weight:500; color:var(--ecv2-g800); min-width:84px; overflow-wrap:anywhere; }
.ecpb .ecpb-vt-t .ecpb-input { min-height:30px; padding:3px 7px; font-size:13px; }
.ecpb .ecpb-vt-t .ecpb-input.is-num { width:70px; }
.ecpb .ecpb-vt-t .ecpb-input.is-sku { width:100%; min-width:120px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; }
.ecpb-vt-t tr.is-off th, .ecpb-vt-t tr.is-off .ecpb-input { color:var(--ecv2-g400); }
.ecpb-vt-t tr:last-child th, .ecpb-vt-t tr:last-child td { border-bottom:0; }
.ecpb-switch.is-small .ecpb-switch-ui { width:30px; height:17px; }
.ecpb-switch.is-small .ecpb-switch-ui::after { width:13px; height:13px; }
.ecpb-switch.is-small input:checked + .ecpb-switch-ui::after { transform:translateX(13px); }

/* tax codes */
.ecpb-taxcode { margin:0; font-size:13px; color:var(--ecv2-g700); }
.ecpb-taxcode b { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:var(--ecv2-g900); }

/* where it shows */
.ecpb-shows .ecpb-feat { min-height:58px; }
.ecpb-cats-h { margin:6px 0 0; }

/* the preview: photos, reviews, description, modifiers as the product page draws them */
.ecpb-pv-thumbs { display:flex; gap:4px; margin-top:-2px; }
.ecpb-pv-thumbs img { width:36px; height:36px; border-radius:4px; object-fit:cover; }
.ecpb-pv-rev { margin:-4px 0 0; font-size:12px; color:var(--ecv2-g500); }
.ecpb-pv-rev span { margin-right:6px; color:#f59e0b; letter-spacing:1px; }
.ecpb-pv-desc { margin:0; font-size:12.5px; line-height:1.5; color:var(--ecv2-g700); }
.ecpb-pv-req { color:#b91c1c; }
.ecpb-pv-mod .ecpb-select { pointer-events:none; }
.ecpb-pv-p { color:var(--ecv2-g500); font-size:12px; white-space:nowrap; }
.ecpb-pv-list { display:flex; flex-direction:column; gap:5px; }
.ecpb-pv-li { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ecv2-g800); }
.ecpb-pv-li.is-grid { justify-content:space-between; }
.ecpb-pv-box, .ecpb-pv-radio { width:16px; height:16px; flex:none; border:1.5px solid var(--ecv2-g400); background:#fff; }
.ecpb-pv-box { border-radius:3px; }
.ecpb-pv-radio { border-radius:50%; }
.ecpb-pv-radio.is-on { border-color:var(--ecv2-g900); box-shadow:inset 0 0 0 3px #fff; background:var(--ecv2-g900); }
.ecpb-pv-qty { min-width:40px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ecv2-g300); border-radius:4px; font-size:12px; color:var(--ecv2-g500); }
.ecpb-pv-swi { width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.2); background-size:cover; background-position:center; }
.ecpb-pv-swi.is-on { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ecv2-g900); }
.ecpb-pv-input { display:flex; align-items:center; padding:0 8px; font-size:12px; color:var(--ecv2-g400); }
.ecpb-pv-input.is-area { height:56px; }
.ecpb-pv-input.is-num { width:72px; }
.ecpb-pv-file { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ecv2-g500); }
.ecpb-pv-file span { padding:4px 10px; border:1px solid var(--ecv2-g300); border-radius:4px; background:var(--ecv2-g50, #f8fafc); color:var(--ecv2-g700); }
.ecpb-pv-dims { display:flex; align-items:center; gap:6px; color:var(--ecv2-g500); }
.ecpb-pv-dims .ecpb-pv-input { width:64px; }

/* Quick start ( 6.0.7 review, Matt: existing users want to build a product without answering questions; D1–D4 ): Like one of your
   products, Your usual and Start blank above the question; after one, a line under the kind says where it started and the rest of
   the setup is one summary line whose parts open their steps. */
.ecpb-quick { padding:14px 18px 16px; }
.ecpb-quick-h { display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:14.5px; font-weight:700; color:var(--ecv2-g900); }
.ecpb-quick-h svg { color:var(--ecpb-accent); }
.ecpb-quick-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 18px; margin-top:12px; align-items:start; }
.ecpb-quick-part { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ecpb-quick-part > .ecpb-combo-l { margin:0; }
.ecpb-quick-usual { gap:4px; }
.ecpb-quick-like .ecpb-combo { max-width:none; }
.ecpb .ecpb-again { align-self:flex-start; max-width:100%; }
.ecpb-usual-l { display:flex; flex-direction:column; gap:6px; }
.ecpb .ecpb-usual { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:44px; padding:7px 12px; border:1px solid var(--ecv2-g300); border-radius:8px; background:#fff; color:var(--ecv2-g800); font-size:13px; line-height:1.35; text-align:left; cursor:pointer; }
.ecpb .ecpb-usual b { font-weight:600; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpb .ecpb-usual small { font-size:12px; color:var(--ecv2-g600); }
.ecpb .ecpb-usual:hover, .ecpb .ecpb-usual:focus-visible { border-color:var(--ecpb-accent); background:var(--ecpb-soft); outline:none; }
.ecpb .ecpb-usual:focus-visible { box-shadow:0 0 0 2px var(--ecpb-accent); }
.ecpb-quick-blank { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:12px; border-top:1px solid var(--ecv2-g100); }
.ecpb-quick-busy { color:var(--ecv2-g600); }
.ecpb-quick-or { margin:14px 2px 8px; font-size:13px; color:var(--ecv2-g600); }
.ecpb-skip { margin-top:-4px; }
.ecpb-quickbar { flex-wrap:wrap; gap:8px 10px; }
.ecpb-qsrc { font-size:13px; font-weight:600; color:var(--ecv2-g700); }
.ecpb-left { margin-top:2px; }
.ecpb-qnote { color:var(--ecv2-g600); }
.ecpb-mods-own .ecpb-tag { margin-left:auto; }
/* Everything else after a quick start ( 6.0.7 review ): a card for each part, changed in place. */
.ecpb-rest { display:grid; grid-template-columns:repeat( auto-fill, minmax( 230px, 1fr ) ); gap:10px; }
.ecpb-rc { display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px 14px; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; }
.ecpb-rc.is-wide { grid-column:1 / -1; }
.ecpb-rc.is-warn { border-color:#fde68a; background:#fffbeb; }
.ecpb-rc-h { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:700; line-height:1.3; color:var(--ecv2-g900); }
.ecpb-rc-h svg { flex:none; color:var(--ecpb-accent); }
.ecpb-rc .ecpb-hint.is-warn { color:#92400e; }
.ecpb-rc-facts { margin:0; font-size:12.5px; }
.ecpb .ecpb-rc-more { align-self:flex-start; font-size:12.5px; }
.ecpb .ecpb-rc > .ecpb-input { width:100%; }
.ecpb-rc .ecpb-combo { max-width:none; }
.ecpb-qsum-more { margin-top:4px; }
.ecpb-minis { display:flex; flex-direction:column; gap:7px; }
.ecpb-minis.is-row { flex-direction:row; flex-wrap:wrap; gap:8px 18px; }
.ecpb-minis.is-row .ecpb-mini { flex:1 1 200px; }
.ecpb-mini { display:flex; align-items:flex-start; gap:9px; min-width:0; cursor:pointer; font-size:13px; line-height:1.35; color:var(--ecv2-g800); }
.ecpb-mini .ecpb-switch { flex:none; padding-top:1px; }
.ecpb-mini-t { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ecpb-mini-t b { font-weight:600; color:var(--ecv2-g900); }
.ecpb-mini-t small { font-size:12px; line-height:1.35; color:var(--ecv2-g500); }
@media ( max-width: 700px ) {
	.ecpb-quick-grid { grid-template-columns:minmax(0,1fr); }
}

/* 6.0.7 review, the builder on the Free plan ( Matt ): every Pro marker the purple plan chip, Pro parts presses to the plans ( never a
   switch that seems to work or a greyed word ), a variation set's controls after its choices in the focus order, and a Create that
   says what is missing. */
.ecpb .ecpb-chip-plan { flex:none; padding:0 6px; border-radius:4px; background:#ede9fe; color:#5b21b6; font-size:10.5px; font-weight:700; line-height:1.7; letter-spacing:.04em; text-transform:uppercase; vertical-align:1px; white-space:nowrap; text-decoration:none; }
.ecpb-chip .ecpb-chip-plan, .ecv2-btn .ecpb-chip-plan, .ecpb-link .ecpb-chip-plan, .ecpb-seg .ecpb-chip-plan { margin-left:2px; }
.ecpb-kres-i b .ecpb-chip-plan { margin-left:6px; }
.ecpb-chip.is-pro { border-color:#ddd6fe; }
.ecpb-chip.is-pro:hover, .ecpb-chip.is-pro:focus-visible, .ecpb-kres-i.is-pro:hover, .ecpb-kres-i.is-pro:focus-visible { border-color:#a78bfa; background:#faf5ff; }
.ecpb .ecpb-link.is-pro { display:inline-flex; align-items:center; gap:4px; }
/* What it does: a locked part is a button to the plans, its switch drawn as a lock. */
.ecpb .ecpb-feat.is-locked { width:100%; margin:0; font:inherit; text-align:left; color:inherit; border-color:#e9d5ff; background:#faf5ff; }
.ecpb .ecpb-feat.is-locked:hover { border-color:#a78bfa; }
.ecpb .ecpb-feat.is-locked:focus-visible { outline:2px solid var(--ecpb-accent); outline-offset:1px; }
.ecpb .ecpb-feat.is-locked .ecpb-feat-ico { background:#fff; color:#7c3aed; }
.ecpb-feat-lock { display:inline-flex; align-items:center; justify-content:center; width:40px; height:22px; border-radius:999px; background:#ede9fe; color:#5b21b6; flex:none; }
.ecpb-feat-lock.is-small { width:30px; height:17px; margin-top:1px; }
.ecpb .ecpb-mini.is-locked { padding:0; border:0; background:none; font:inherit; text-align:left; }
.ecpb .ecpb-mini.is-locked:focus-visible { outline:2px solid var(--ecpb-accent); outline-offset:2px; border-radius:4px; }
.ecpb-mini.is-locked .ecpb-mini-t b { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; }
/* A choice that needs Pro in a row of choices: its words in the plan's colour with the chip, a press opens the plans. */
.ecpb .ecpb-seg button.is-pro { display:inline-flex; align-items:center; gap:4px; color:#4c1d95; background:#faf5ff; }
.ecpb .ecpb-seg button.is-pro:hover { background:#f3e8ff; }
.ecpb .ecv2-btn.ecpb-btn-pro { border-color:#ddd6fe; }
.ecpb .ecv2-btn.ecpb-btn-pro:hover, .ecpb .ecv2-btn.ecpb-btn-pro:focus-visible { border-color:#a78bfa; background:#faf5ff; }

/* A variation set: the name, choices and Add a value box in the focus order first, its controls ( Shown as, up / down, Remove ) drawn
   beside the name. */
.ecpb .ecpb-opt.is-list { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:10px; }
.ecpb-opt.is-list > * { grid-column:1 / -1; }
.ecpb .ecpb-opt.is-list > .ecpb-opt-name { grid-column:1; grid-row:1; width:100%; }
.ecpb-opt.is-list > .ecpb-opt-tools { grid-column:2; grid-row:1; }
.ecpb-opt-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 8px; min-height:36px; }
@media ( max-width: 600px ) {
	.ecpb-opt.is-list > .ecpb-opt-tools { grid-column:1 / -1; grid-row:2; justify-content:flex-start; min-height:0; }
}

/* Create: never truly disabled. While something is missing the buttons are muted but readable, say what is missing on hover or
   focus, and a press marks every missing field; the reason under them reads at 4.5:1 or more. */
.ecpb-bar-acts { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.ecpb .ecpb-bar .ecv2-btn[aria-disabled="true"], .ecpb .ecpb-bar .ecv2-btn[aria-disabled="true"]:hover { opacity:1; background:var(--ecv2-g100, #f3f4f6); border-color:var(--ecv2-g300, #d1d5db); color:var(--ecv2-g600, #4b5563); box-shadow:none; cursor:not-allowed; }
.ecpb .ecpb-bar .ecpb-link[aria-disabled="true"] { color:var(--ecv2-g600, #4b5563); cursor:not-allowed; }
.ecpb .ecpb-bar .ecv2-btn[aria-busy="true"] { cursor:progress; }
.ecpb .ecpb-bar-note { font-size:13px; color:var(--ecv2-g700, #374151); }
.ecpb .ecpb-bar-note.is-alert { color:#b91c1c; font-weight:600; }
.ecpb-bar-tip { position:absolute; left:0; bottom:calc( 100% + 8px ); z-index:30; display:flex; flex-direction:column; gap:2px; width:max-content; max-width:min( 340px, 90vw ); padding:8px 11px; border-radius:6px; background:var(--ecv2-g900, #0f172a); color:#fff; font-size:12.5px; line-height:1.4; box-shadow:0 4px 14px rgba( 15, 23, 42, .18 ); opacity:0; visibility:hidden; transition:opacity .12s ease; pointer-events:none; }
.ecpb-bar-tip b { font-weight:700; }
.ecpb-bar-acts:hover .ecpb-bar-tip, .ecpb-bar-acts:focus-within .ecpb-bar-tip { opacity:1; visibility:visible; }
.ecpb-miss { font-weight:600; }
.ecpb-name + .ecpb-miss { margin-top:-6px; }