.wf {
  /* Scoped to .wf so the configurator cannot affect a host page. */
  --wf-face: #D9E8A0; /* the material's face colour; the shop overrides it per material */
  --green: #00a651;
  --green-dark: #007a3c;
  --cream: #ededa5;
  --cream-soft: #f7f7dc;
  --ink: #1d2a22;
  --muted: #5b6b61;
  --line: #d9dcc4;
  --surface: #ffffff;
  --page: #fbfbf2;
  --fail: #b3261e;
  --fail-soft: #fdecea;
  --radius: 10px;
  color-scheme: light;
}

.wf, .wf * { box-sizing: border-box; }

.wf {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.45;
}

.wf .wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.wf .site-header{
  background: #fff;
  border-bottom: 6px solid var(--green);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}
.wf .header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.wf .site-logo{ display: block; line-height: 0; }
.wf .site-logo img{ width: 260px; max-width: 100%; height: auto; }
.wf .header-end{
  display: flex;
  align-items: center;
  gap: 18px;
}
.wf .site-strapline{
  display: grid;
  text-align: right;
  gap: 2px;
}
.wf .cart-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--cream-soft);
  color: var(--green-dark);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wf .cart-pill:hover{ border-color: var(--green); }
.wf .cart-pill.has-items{ background: var(--green); border-color: var(--green); color: #fff; }
.wf .cart-pill.bump{ animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .wf .cart-pill.bump{ animation: none; }}

.wf .toast{
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font-weight: 600;
}
.wf .toast[hidden]{ display: none; }
.wf .site-strapline strong{ color: var(--green-dark); font-size: 1.1rem; }
.wf .site-strapline span{ color: var(--muted); font-size: .875rem; }
@media (max-width: 640px) {
  .wf .site-logo img{ width: 170px; }
  .wf .header-row{ flex-wrap: nowrap; }
  .wf .site-strapline{ display: none; }
  .wf .site-strapline{ text-align: left; }
  .wf .site-strapline span{ display: none; }}

/* The configurator is its own .wf root in a shop, and sits inside the page's
   .wf on the standalone page, so each rule names both. */
.wf.configurator,
.wf .configurator{
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 48px;
  align-items: start;
}
.wf .options-column{ min-width: 0; }
.wf .host-slot-top{ margin-bottom: 16px; }
.wf .host-slot-bottom{ margin-top: 16px; }

/* In a shop: the product on the left and the choices on the right, as on its
   other product pages. One sign stays in view while the options are changed. */
.wf.configurator.is-embedded{
  /* The shop's own page colour and typeface, not the standalone page's. */
  background: transparent;
  font-family: inherit;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 32px;
  padding-top: 0;
}
.wf.configurator.is-embedded .preview-column{ order: -1; min-width: 0; }
.wf.configurator.is-embedded:not([data-mode="range"]) .preview-column{ position: sticky; top: 16px; }

@media (max-width: 760px) {
  .wf.configurator,
  .wf .configurator{ grid-template-columns: 1fr; gap: 20px; }
  /* One sign: show it first. Whole building: keep the floor range above the long list. */
  .wf.configurator:not([data-mode="range"]) .preview-column,
  .wf .configurator:not([data-mode="range"]) .preview-column{ order: -1; }
  .wf.configurator.is-embedded[data-mode="range"] .preview-column{ order: 0; }
  .wf.configurator.is-embedded .preview-column{ position: static; }}

.wf /* Options ---------------------------------------------------------------- */
.options{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 20px 20px;
}
.wf .reset-link{
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--green-dark);
}
.wf .reset-link::before{ content: "↺ "; }

.wf fieldset{
  border: 0;
  margin: 20px 0 0;
  padding: 0;
  min-width: 0;
}
.wf fieldset[hidden]{ display: none; }

.wf legend{
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
}

.wf .segmented{
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.wf .segmented label{
  flex: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.wf .segmented input{
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.wf .segmented label:has(input){
  padding: 9px 8px;
}
.wf .segmented label + label{ border-left: 1px solid var(--line); }
.wf .segmented label:has(input:checked){
  background: var(--green);
  color: #fff;
  font-weight: 600;
}
.wf .segmented label:has(input:focus-visible){
  outline: 3px solid var(--green-dark);
  outline-offset: -3px;
}

.wf .stepper{
  display: flex;
  align-items: stretch;
  gap: 0;
  width: fit-content;
}
.wf .stepper button{
  width: 48px;
  font-size: 1.4rem;
  border: 1px solid var(--line);
  background: var(--cream-soft);
  color: var(--ink);
  cursor: pointer;
}
.wf .stepper button:first-child{ border-radius: 8px 0 0 8px; }
.wf .stepper button:last-child{ border-radius: 0 8px 8px 0; }
.wf .stepper button:hover{ background: var(--cream); }
.wf .stepper input{
  width: 90px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  border: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  padding: 8px 4px;
  -moz-appearance: textfield;
}
.wf .stepper input::-webkit-inner-spin-button,
.wf .stepper input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }

.wf input[type="text"].short{
  width: 90px;
  font-size: 1.2rem;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-transform: uppercase;
}

.wf input:focus-visible, .wf button:focus-visible{
  outline: 3px solid var(--green-dark);
  outline-offset: 1px;
}

.wf .check{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  cursor: pointer;
}
.wf .check input{ accent-color: var(--green); width: 18px; height: 18px; }

.wf .hint{
  color: var(--muted);
  font-size: .875rem;
  margin: 6px 0 0;
}

.wf .primary{
  margin-top: 16px;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
}

.wf /* Preview ---------------------------------------------------------------- */
.preview-stage{
  background:
    linear-gradient(135deg, #e9eadf 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(225deg, #e9eadf 25%, transparent 25%) 0 0 / 24px 24px,
    #f1f2e8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 5vw, 48px);
  display: grid;
  place-items: center;
  min-height: 220px;
}
/* In a shop: a plain backdrop, light enough to sit on its page and dark
   enough that a white sign still shows its edge. */
.wf.is-embedded .preview-stage,
.wf.is-embedded .sign-card-art{ background: #f3f4f1; }
.wf .preview-stage svg{
  width: calc(var(--sign-scale, 1) * 100%);
  height: auto;
  transition: width .15s ease;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
}

.wf .preview-meta{
  margin: 10px 2px 0;
  color: var(--muted);
  min-height: 1.45em;
}
.wf .preview-meta strong{ color: var(--ink); }

.wf .compliance{
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 20px;
}
.wf .compliance[open]{ padding-bottom: 12px; }
.wf .compliance:empty{ display: none; }
.wf .compliance > summary{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wf .compliance > summary{ list-style: none; }
.wf .compliance > summary::-webkit-details-marker{ display: none; }
.wf .compliance > summary::before{
  content: "▸";
  color: var(--muted);
  transition: transform .15s;
}
.wf .compliance[open] > summary::before{ transform: rotate(90deg); }
.wf .compliance > summary.pass{ color: var(--green-dark); }
.wf .compliance > summary.fail{ color: var(--fail); }
.wf .summary-hint{
  margin-left: auto;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--muted);
}
.wf .compliance[open] > summary{ margin-bottom: 8px; }
.wf .checks{
  list-style: none;
  margin: 0;
  padding: 0;
}
.wf .checks li{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 7px 0 7px 26px;
  border-top: 1px solid #eef0e2;
  position: relative;
}
.wf .checks li::before{
  position: absolute;
  left: 0;
  font-weight: 700;
}
.wf .checks li.pass::before{ content: "✓"; color: var(--green); }
.wf .checks li.fail::before{ content: "✕"; color: var(--fail); }
.wf .checks li.fail{ background: var(--fail-soft); }
.wf .clause{
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}
.wf .detail{
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.wf .install-note{
  color: var(--muted);
  font-size: .875rem;
  margin: 14px 2px 0;
}

.wf .preview[aria-busy="true"]{ opacity: .6; transition: opacity .2s .2s; }

.wf label[for]{ cursor: pointer; }

.wf .range-fields{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.wf .range-fields label{
  display: block;
  font-size: .875rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.wf /* Building set ----------------------------------------------------------- */
.set-summary{
  border-radius: var(--radius);
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  background: var(--surface);
}
.wf .set-summary.fail{ border-left-color: var(--fail); }
.wf .set-summary h2{ font-size: 1.05rem; margin: 0 0 4px; }
.wf .set-summary.pass h2{ color: var(--green-dark); }
.wf .set-summary.fail h2{ color: var(--fail); }
.wf .set-summary p{ margin: 0; color: var(--muted); }
.wf .set-summary p strong{ color: var(--ink); }
.wf .set-summary .note{ margin-top: 6px; }

.wf .sign-set{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.wf .sign-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wf .sign-card.has-problem{ border-color: var(--fail); box-shadow: 0 0 0 1px var(--fail); }
.wf .sign-card.is-skipped .sign-card-art{ opacity: .35; }

.wf .sign-card-art{
  background: #f1f2e8;
  padding: 16px;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
}
.wf .sign-card-art svg{
  width: calc(var(--sign-scale, 1) * 100%);
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16));
}

.wf .sign-card-body{
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.wf .sign-card-title{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.wf .size{
  color: var(--muted);
  font-size: .8125rem;
  white-space: nowrap;
}
.wf .size.widened{
  color: var(--ink);
  background: var(--cream);
  border-radius: 4px;
  padding: 0 5px;
}
.wf .problem{
  margin: 0;
  color: var(--fail);
  font-size: .875rem;
  font-weight: 600;
}

.wf .qty{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .875rem;
  color: var(--muted);
  margin-top: auto;
}
.wf .qty input{
  width: 72px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.wf .sign-card details{
  font-size: .8125rem;
  border-top: 1px solid #eef0e2;
  padding-top: 6px;
}
.wf .sign-card summary{
  cursor: pointer;
  color: var(--muted);
}
.wf .sign-card .checks{ margin-top: 6px; }
.wf .sign-card .checks li{ padding: 5px 0 5px 20px; }
.wf .sign-card .detail{ margin-left: 0; }

.wf .error{
  color: var(--fail);
  font-weight: 600;
  margin: 0;
}

.wf /* Flat rows ------------------------------------------------------------- */
.flat-rows{
  display: grid;
  gap: 10px;
}
.wf .flat-row{
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px 12px;
  background: var(--cream-soft);
  display: grid;
  gap: 8px;
}
.wf .flat-row-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wf .flat-row-label{
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
}
.wf .flat-numbers{
  display: flex;
  gap: 10px;
  align-items: center;
}
.wf .flat-numbers label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
}
.wf .flat-numbers input{
  width: 76px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.wf .segmented.arrows{ background: #fff; }
.wf .segmented.arrows label:has(input){
  padding: 5px 4px;
  font-size: 1.15rem;
  line-height: 1.4;
}
.wf .segmented.arrows label:last-child{ font-size: .8125rem; align-content: center; }

.wf .secondary{
  margin-top: 10px;
  background: #fff;
  color: var(--green-dark);
  border: 1px dashed var(--green);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
}
.wf .secondary:hover{ background: var(--cream-soft); }
.wf .secondary[hidden], .wf .link-button[hidden], .wf .install-note[hidden]{ display: none; }

.wf .link-button{
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--fail);
  font-size: .8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.wf /* Mode tiles ------------------------------------------------------------ */
.mode-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wf .mode-tiles label{
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.wf .mode-tiles input{
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.wf .mode-tiles strong{ font-size: .95rem; }
.wf .mode-tiles span{ font-size: .75rem; color: var(--muted); line-height: 1.3; }
.wf .mode-tiles label:hover{ border-color: var(--green); }
.wf .mode-tiles label:has(input:checked){
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.wf .mode-tiles label:has(input:checked) span{ color: #e3f5ea; }
.wf .mode-tiles label:has(input:focus-visible){
  outline: 3px solid var(--green-dark);
  outline-offset: 2px;
}

.wf /* Building flat numbering ------------------------------------------------ */
.building-flats{ margin-top: 12px; }
.wf .building-flats[hidden]{ display: none; }
.wf .field-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-items: end; /* keep boxes level when a label wraps */
}
.wf .field-grid label,
.wf .select-label{
  display: grid;
  gap: 4px;
  font-size: .8125rem;
  color: var(--muted);
}
.wf .field-grid small{ font-size: inherit; opacity: .8; }
.wf .field-grid input,
.wf .select-label select{
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  width: 100%;
}
.wf .field-grid input{ font-weight: 600; }
.wf .select-label{ margin-top: 12px; }

.wf /* Per-floor flat editor in building cards -------------------------------- */
.flat-editor{
  font-size: .875rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
}
.wf .flat-editor > summary{
  cursor: pointer;
  color: var(--green-dark);
  font-weight: 600;
}
.wf .flat-editor.is-custom{ border-color: var(--green); background: #f3fbf6; }
.wf .flat-editor[open]{ padding-bottom: 10px; }
.wf .flat-editor[open] > summary{ margin-bottom: 8px; }
.wf .flat-editor .flat-row{ padding: 8px; background: #fff; min-width: 0; }
.wf /* Narrow cards: the two number boxes share the row equally instead of overflowing it. */
.flat-editor .flat-numbers{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
}
.wf .flat-editor .flat-numbers label{ display: contents; }
.wf .flat-editor .flat-numbers-word{ display: none; } .wf /* the row is already labelled */
.flat-editor .flat-numbers input{ width: 100%; min-width: 0; padding: 6px 4px; }
.wf .flat-editor .secondary{ margin-top: 8px; }
.wf .flat-editor:has([data-no-flats]:checked) :is([data-flat-rows], [data-add-row]){ display: none; }
.wf .flat-editor .check{ margin: 0 0 8px; }
.wf .link-button.reset{ color: var(--green-dark); margin-top: 6px; }
.wf .set-summary .problem{ margin-top: 6px; }

.wf /* Add to cart ------------------------------------------------------------ */
.cart-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
}
.wf .cart-bar .hint{ flex-basis: 100%; margin: 0; }
/* Changing a sign from the shop's basket: "Add as new" beside "Update sign". */
.wf .cart-bar .secondary.cart-button{ width: auto; margin: 0; padding: 10px 16px; border-style: solid; }
.wf .cart-qty{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.wf .cart-qty input{
  width: 72px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.wf .primary.cart-button{
  margin-top: 0;
  padding: 11px 22px;
  font-size: 1rem;
  cursor: pointer;
}
.wf .primary.cart-button:hover:not(:disabled){ background: var(--green-dark); }
.wf .primary.cart-button:disabled{ background: #a9b8ae; cursor: not-allowed; }
.wf .cart-bar.building{
  justify-content: space-between;
  border-top: 1px solid #eef0e2;
  padding-top: 12px;
}
.wf .cart-bar.building .check{ margin: 0; font-weight: 600; }

.wf .select-sign{ display: inline-flex; align-self: center; cursor: pointer; }
.wf .select-sign input{ width: 18px; height: 18px; accent-color: var(--green); margin: 0; cursor: pointer; }
.wf .select-sign input:disabled{ cursor: not-allowed; }
.wf .sign-card-title{ justify-content: flex-start; }
.wf .sign-card-title .size{ margin-left: auto; }
.wf .sign-card.is-selected{ border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.wf .sign-card.has-problem.is-selected{ border-color: var(--fail); }

.wf /* Text for screen readers only */
.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The sign's face and wording take the material's colour. CSS beats the fill
   attribute, so the shop can recolour a preview without redrawing it. */
.wf svg path.border,
.wf svg path.ink { fill: var(--wf-face); }