/* Shared visual language, sampled from the original light editor demo.
   The dark reference is intentionally not a consumer of this stylesheet. */
:root {
  --wf-canvas: #fafafa;
  --wf-page: #f0f0f2;
  --wf-block: #dddde2;
  --wf-block-strong: #cfcfd8;
  --wf-chrome: #d9d9df;
  --wf-hero: #e5e5e9;
  --wf-ink: #35353e;
  --wf-muted: #6c6c75;
  --wf-border: #b8b8c3;
  --wf-edit: #6861d8;
  --wf-radius-block: 5px;
  --wf-radius-control: 6px;
  --wf-radius-surface: 10px;
}
.editor-demo,
.search-demo,
.cro-demo {
  background: var(--wf-canvas);
  color: var(--wf-ink);
  font-family: "Public Sans", sans-serif;
}
.wireframe-scene {
  position: absolute;
  inset: 0;
  transform: translateY(5px) scale(0.873239);
  transform-origin: 167px 0;
}
.cro-demo .wireframe-scene {
  transform: translateY(6px) scale(0.826667);
}
.search-demo .browser {
  background: var(--wf-page);
  border: 0;
  border-radius: var(--wf-radius-surface);
  mask-image: linear-gradient(#000 0%, #000 76%, transparent 100%);
}
.search-demo .browser-chrome {
  background: var(--wf-chrome);
  border: 0;
}
.search-demo .address {
  background: var(--wf-hero);
  color: var(--wf-muted);
  border-radius: 1px;
}
.search-demo .search-input {
  background: #fdfdfd;
  border-color: var(--wf-border);
  border-radius: var(--wf-radius-control);
  box-shadow: 0 1px 3px #35353e08;
}
.search-demo .engine {
  color: var(--wf-muted);
}
.search-demo .wire-line {
  background: var(--wf-block);
  border-radius: 2px;
}
.search-demo .wire-line.title {
  background: var(--wf-block-strong);
}
.search-demo .source-card {
  border-color: #d4d4dd;
  border-radius: var(--wf-radius-control);
  background: #eaeaf0;
}
.search-demo .brand-result::before {
  background: #e9e9ef;
  border-radius: var(--wf-radius-control);
}
.search-demo .site-icon,
.search-demo .related-sources .wire-line {
  background: var(--wf-block);
}
.search-demo .brand-icon {
  background: var(--wf-block-strong);
  color: var(--wf-muted);
  border-radius: 4px;
}
.search-demo .submit {
  background: var(--wf-block);
  color: var(--wf-muted);
  border-radius: 4px;
}
.cro-demo .store-nav {
  display: grid;
  grid-template-columns: 40px 1fr 12px;
  gap: 18px;
  margin: 0 -14px;
  padding: 0 14px;
  background: #eaeaec;
  border-bottom: .5px solid #dddde2;
}
.cro-demo .store-nav b {
  width: 40px;
  height: 9px;
  margin: 0;
  background: var(--wf-block-strong);
}
.cro-demo .store-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cro-demo .store-nav-links span {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--wf-chrome);
}
.cro-demo .store-nav svg { margin: 0; width: 10px; height: 10px; }
.cro-demo .store-nav > span,
.cro-demo .store-nav svg {
  background: var(--wf-chrome);
}
.cro-demo .breadcrumbs {
  background: #eaeaec;
}
.cro-demo .breadcrumbs i,
.cro-demo .breadcrumbs i:last-child {
  background: var(--wf-chrome);
}
.cro-demo .product-visual {
  background: var(--wf-hero);
  border-radius: var(--wf-radius-block);
  box-shadow: inset 0 0 0 0.5px #cfcfd84d;
}
.cro-demo .image-placeholder {
  stroke: #c5c5cd;
}
.cro-demo .image-indicator i {
  background: var(--wf-block);
  border-radius: 3px;
}
.cro-demo .image-indicator i:first-child {
  outline-color: var(--wf-border);
}
.cro-demo .product-title i {
  background: var(--wf-block-strong);
  height: 11px;
  border-radius: 3px;
}
.cro-demo .eyeline i {
  background: var(--wf-chrome);
  border-radius: 3px;
}
.cro-demo .rating i,
.cro-demo .rating b {
  background: var(--wf-block-strong);
}
.cro-demo .product-info .wire-line,
.cro-demo .description .wire-line {
  background: var(--wf-block);
}
.cro-demo .description .title {
  background: var(--wf-block-strong);
}
.cro-demo .swatches {
  border-color: #dddde2;
}
.cro-demo .swatches i {
  background: var(--wf-block);
  border-radius: 3px;
}
.cro-demo .swatches i:first-child {
  background: var(--wf-block-strong);
}
.cro-demo .swatches i:nth-child(2) {
  background: var(--wf-chrome);
}
.cro-demo .swatches i:last-child {
  background: var(--wf-hero);
}
.cro-demo .description {
  border-color: #dddde2;
}
.cro-demo .purchase {
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-control);
  box-shadow: inset 0 1px 0 #ffffff80;
}
.cro-demo .selection,
.cro-demo .detail-selection,
.cro-demo .selection > i {
  border-color: var(--wf-edit);
}
.cro-demo .selection > span,
.cro-demo .detail-selection > span {
  background: var(--wf-edit);
  border-radius: 2px 2px 0 0;
}
.cro-demo .trust {
  color: var(--wf-muted);
}
.cro-demo .analysis-status {
  display: none;
}
.cro-demo .conversion-chart {
  background: var(--wf-page);
  border-color: #ceced6;
  border-radius: var(--wf-radius-surface);
  width: 203px;
  left: 112px;
  top: 258px;
  color: var(--wf-ink);
}
.cro-demo .chart-heading {
  font-size: 10px;
}
.cro-demo .chart-heading > span {
  font-size: 13px;
  color: var(--wf-muted);
}
.cro-demo .chart-note,
.cro-demo .chart-axis {
  color: var(--wf-muted);
}
.cro-demo .chart-grid {
  stroke: var(--wf-block);
}
.cro-demo .chart-area {
  fill: var(--wf-block);
}
.cro-demo .chart-line {
  stroke: #7c7c89;
  stroke-width: 1.3;
}
.search-demo:not(.cro-demo) .browser {
  background: transparent;
  border-radius: 0;
}
.search-demo:not(.cro-demo) .browser-content {
  padding-top: 45px;
}
.cro-demo .chart-end {
  fill: #7c7c89;
  stroke: var(--wf-page);
}

/* The ecommerce reference sets the scale; soften its editable blocks equally. */
.editor-stage .framer-3yfjdu {
  border-radius: var(--wf-radius-surface) !important;
}
.editor-stage
  :is(
    .framer-bw01m4,
    .framer-i3jm1t,
    .framer-1kujzju,
    .framer-834ekd,
    .framer-1gu9r7r,
    .framer-1n3kbqu,
    .framer-f2bo48,
    .framer-1w1uy67,
    .framer-5q1177
  ) {
  border-radius: 4px;
  box-shadow: inset 0 0 0 0.5px #cfcfd84d;
}
.editor-stage [data-border="true"] {
  --border-color: var(--wf-border) !important;
  border-radius: 3px;
}
.editor-demo .edit-selection,
.cro-demo .selection,
.cro-demo .detail-selection {
  border-radius: 5px;
}
.editor-demo .edit-label,
.cro-demo .selection > span,
.cro-demo .detail-selection > span {
  border-radius: 3px 3px 0 0;
}
.cro-demo .store-nav b,
.cro-demo .store-nav > span,
.cro-demo .breadcrumbs i {
  border-radius: 2px;
}
.search-demo .engine-underline {
  border-radius: 2px;
}
.cro-demo .conversion-chart {
  box-shadow: 0 2px 6px #35353e0a;
}