/* =====================================================================
   CF Configurator: wizard + desktop stage. Loaded only on configurator
   product pages. Consumes the theme tokens (construct-family
   assets/css/main.css :root) with fallbacks, so it also renders without the
   theme. Look: a workshop drawing. Mono labels, hairlines, a fine grid
   behind the live drawing, coral only for the current step and actions.
   Accent for fills and small text on light backgrounds: --coral-ink
   (#D02B2B, white text 5.17:1); --coral stays decorative.
   Breakpoints: 921 px = gallery and summary side by side (theme), so the
   stage sits under the gallery and the price bar is off; 600 px = compact
   stepper; 480 px = single-column cards.
   ===================================================================== */

.cf-cfg,.cf-cfg-stage{
  --cfg-ink:var(--ink,#1B1D1F);
  --cfg-anth:var(--anthracite,#262B2F);
  --cfg-anth-2:var(--anthracite-2,#1E2226);
  --cfg-steel:var(--steel,#5D656B);
  --cfg-steel-light:var(--steel-light,#AEB4B8);
  --cfg-line:var(--line,#E4E0DA);
  --cfg-edge:#7E868C;            /* control borders: 3.7:1 on white (WCAG 1.4.11) */
  --cfg-mist:var(--mist,#F3F1ED);
  --cfg-paper:var(--paper,#FFFFFF);
  --cfg-accent:var(--coral-ink,#D02B2B);
  --cfg-accent-hover:var(--coral-ink-hover,#B42020);
  --cfg-coral:var(--coral,#FF4E4E);
  --cfg-tint:#FFF4F1;
  --cfg-ok:#1F7A4D;
  --cfg-ok-tint:#EEF6F1;
  --cfg-err:#B42020;
  --cfg-display:var(--display,"Archivo",system-ui,sans-serif);
  --cfg-body:var(--body,"Inter",system-ui,sans-serif);
  --cfg-mono:var(--mono,"JetBrains Mono",ui-monospace,monospace);
  --cfg-radius:4px;
  --cfg-ease:cubic-bezier(.2,.7,.2,1);
  --cfg-sticky-top:calc(88px + var(--wp-admin--admin-bar--height,0px));
  font-family:var(--cfg-body);color:var(--cfg-ink);line-height:1.5;
}
.cf-cfg{margin:28px 0 12px}
.cf-cfg *,.cf-cfg *::before,.cf-cfg *::after,.cf-cfg-stage *,.cf-cfg-stage *::before,.cf-cfg-stage *::after{box-sizing:border-box}
.cf-cfg [hidden],.cf-cfg-stage[hidden],.cf-cfg-stage [hidden]{display:none !important}
.cf-cfg :where(p,dl,dd,ul,ol,figure),.cf-cfg-stage :where(p,dl,dd,ul,ol,figure){margin:0}
.cf-cfg-icon{display:block;width:24px;height:24px;flex:none}

/* ---------- heading, intro, preview banner ---------- */
.cf-cfg-title{display:flex;align-items:center;gap:.7em;margin:0 0 8px;font-family:var(--cfg-mono);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--cfg-steel)}
.cf-cfg-title::before{content:"";width:26px;height:1px;background:var(--cfg-coral)}
.cf-cfg-intro{color:var(--cfg-steel);margin:0 0 22px;font-size:.98rem;max-width:60ch}
.cf-cfg-preview-banner{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:6px 0 14px;padding:10px 14px;border:1px dashed var(--coral-ink,#D02B2B);border-radius:4px;background:#FFF4F1;color:var(--ink,#1B1D1F);font-family:var(--mono,"JetBrains Mono",ui-monospace,monospace);font-size:.74rem;letter-spacing:.04em}
.cf-cfg-preview-banner a{color:var(--coral-ink,#D02B2B);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cf-cfg-preview-sep{color:var(--steel,#5D656B)}
@media(max-width:599px){.cf-cfg-preview-sep{display:none}.cf-cfg-preview-banner a{flex-basis:100%}}

/* ---------- added-to-cart panel ---------- */
.cf-cfg-added{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--cfg-line);border-left:3px solid var(--cfg-ok);background:var(--cfg-ok-tint);padding:16px 18px;margin:0 0 22px;border-radius:var(--cfg-radius)}
.cf-cfg-added-icon{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--cfg-ok);color:#fff;align-items:center;justify-content:center;flex:none}
.cf-cfg-added-icon .cf-cfg-icon{width:18px;height:18px;stroke-width:2.4}
.cf-cfg-added-title{font-family:var(--cfg-display);font-weight:700;margin-bottom:2px}
.cf-cfg-added-text{color:var(--cfg-steel);font-size:.92rem}
.cf-cfg-added-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px}

/* ---------- stepper: numbered dots, done = check + chosen value, click to edit ---------- */
.cf-cfg-stepper{margin:0 0 26px}
.cf-cfg-stepper-list{list-style:none;margin:0;padding:0;display:flex}
.cf-cfg-stepper-item{position:relative;flex:1 1 0;min-width:0}
.cf-cfg-stepper-item:not(:first-child)::before{content:"";position:absolute;top:16px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;background:var(--cfg-line);border-radius:1px;transition:background-color .2s ease}
.cf-cfg-stepper-item.is-after-done::before{background:var(--cfg-ink)}
.cf-cfg-stepper-btn{width:100%;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 2px 2px;background:none;border:0;border-radius:var(--cfg-radius);text-align:center;cursor:pointer;color:var(--cfg-steel);font:inherit}
.cf-cfg-stepper-btn:focus-visible{outline:2px solid var(--cfg-accent);outline-offset:3px}
.cf-cfg-stepper-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--cfg-paper);border:1.5px solid var(--cfg-edge);color:var(--cfg-steel);font-family:var(--cfg-mono);font-size:.8rem;font-weight:600;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.cf-cfg-stepper-check{position:absolute;width:18px;height:18px;stroke-width:2.4;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s var(--cfg-ease)}
.cf-cfg-stepper-text{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%}
.cf-cfg-stepper-label{font-family:var(--cfg-display);font-weight:700;font-size:.82rem;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.cf-cfg-stepper-val{min-height:calc(.72rem * 1.3);font-size:.72rem;line-height:1.3;color:var(--cfg-steel);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-cfg-stepper-item.is-done .cf-cfg-stepper-dot{background:var(--cfg-ink);border-color:var(--cfg-ink);color:#fff}
.cf-cfg-stepper-item.is-done .cf-cfg-stepper-n{opacity:0}
.cf-cfg-stepper-item.is-done .cf-cfg-stepper-check{opacity:1;transform:none}
.cf-cfg-stepper-item.is-done .cf-cfg-stepper-btn{color:var(--cfg-ink)}
.cf-cfg-stepper-item.is-done .cf-cfg-stepper-btn:hover .cf-cfg-stepper-dot{background:var(--cfg-accent);border-color:var(--cfg-accent)}
.cf-cfg-stepper-item.is-done .cf-cfg-stepper-btn:hover .cf-cfg-stepper-label{text-decoration:underline;text-underline-offset:3px}
.cf-cfg-stepper-item.is-current .cf-cfg-stepper-dot{border:2px solid var(--cfg-accent);color:var(--cfg-ink);box-shadow:0 0 0 4px var(--cfg-tint)}
.cf-cfg-stepper-item.is-current .cf-cfg-stepper-btn{color:var(--cfg-ink);cursor:default}
.cf-cfg-stepper-item.is-locked .cf-cfg-stepper-btn{cursor:not-allowed}
.cf-cfg-stepper-item.is-locked .cf-cfg-stepper-dot{border-style:dashed;background:var(--cfg-mist)}
.cf-cfg-stepper-item.is-todo .cf-cfg-stepper-val{color:var(--cfg-accent);font-weight:600}
/* 600 px and up: a label too long for its item (.is-long, set by fitStepper) wraps onto the value line, same height */
@media(min-width:600px){
  .cf-cfg-stepper-text{min-height:calc(.82rem * 1.2 + .72rem * 1.3)}
  .cf-cfg-stepper-item.is-long .cf-cfg-stepper-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;line-height:1.15;text-wrap:balance}
  .cf-cfg-stepper-item.is-long .cf-cfg-stepper-val{display:none}
}
/* Phones: every item keeps the same width (so each connector runs exactly from
   the previous dot's edge to this dot's edge, MF-3) and only the current label
   shows, on one line under its dot. It may be wider than its item: it overflows
   centred, and the script (fitStepper) slides it back inside the stepper
   when it would pass an edge. Dots sit above the connectors. */
@media(max-width:599px){
  .cf-cfg-stepper{margin-bottom:22px}
  .cf-cfg-stepper-val{display:none}
  .cf-cfg-stepper-dot{z-index:1;width:30px;height:30px;font-size:.74rem}
  .cf-cfg-stepper-item:not(:first-child)::before{top:14px;left:calc(-50% + 18px);right:calc(50% + 18px)}
  .cf-cfg-stepper-item.is-current .cf-cfg-stepper-text{width:max-content;max-width:none}
  .cf-cfg-stepper-item.is-current .cf-cfg-stepper-label{max-width:none;overflow:visible}
  /* non-current labels: visually hidden but still the button's accessible name (WCAG 4.1.2; the number is aria-hidden) */
  .cf-cfg-stepper-item:not(.is-current) .cf-cfg-stepper-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}

/* ---------- steps ---------- */
.cf-cfg-step{padding-top:22px;margin-top:6px;border-top:1px solid var(--cfg-line)}
.cf-cfg--js .cf-cfg-step{padding-top:0;margin-top:0;border-top:0}
.cf-cfg--js .cf-cfg-step.is-entering{animation:cf-cfg-in .22s var(--cfg-ease)}
@keyframes cf-cfg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cf-cfg-step-title{display:flex;flex-direction:column;margin:0 0 18px;font-family:var(--cfg-display);font-weight:800;font-size:1.5rem;line-height:1.12;letter-spacing:-.02em;scroll-margin-top:110px}
.cf-cfg-step-title:focus{outline:none}
.cf-cfg-step-title:focus-visible{outline:2px solid var(--cfg-accent);outline-offset:6px;border-radius:2px}
.cf-cfg-step-count{display:block;margin-bottom:6px;font-family:var(--cfg-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cfg-steel)}
.cf-cfg-step-count:empty{display:none}
.cf-cfg fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}
.cf-cfg-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;margin:0 0 10px;font-family:var(--cfg-mono);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cfg-ink)}
.cf-cfg-unit-legend{letter-spacing:.06em;text-transform:none;font-weight:400;color:var(--cfg-steel)}
.cf-cfg-req{display:inline-flex;padding:2px 7px;border-radius:2px;background:var(--cfg-tint);color:var(--cfg-accent);font-size:.62rem;letter-spacing:.12em}
.cf-cfg-group-desc,.cf-cfg-group-note,.cf-cfg-hint{font-size:.88rem;color:var(--cfg-steel);margin:0 0 12px;max-width:62ch}
.cf-cfg-group-note{margin:12px 0 0;font-size:.82rem}
.cf-cfg-hint{margin:7px 0 0;font-size:.84rem}
.cf-cfg-sub{display:flex;align-items:center;gap:10px;margin:20px 0 10px;font-size:.84rem;font-weight:600;color:var(--cfg-ink)}
.cf-cfg-sub::after{content:"";flex:1;height:1px;background:var(--cfg-line)}
.cf-cfg-group>.cf-cfg-sub:first-of-type{margin-top:4px}
.screen-reader-text+.cf-cfg-sub,.cf-cfg-legend.screen-reader-text+.cf-cfg-group-desc{margin-top:0}

/* ---------- dimensions ---------- */
.cf-cfg-dims-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:420px){.cf-cfg-dims-grid{grid-template-columns:1fr;gap:14px}}
.cf-cfg-field-label,.cf-cfg-field>label{display:block;margin-bottom:7px;font-weight:600;font-size:.92rem}
.cf-cfg-input-wrap{position:relative;display:flex;align-items:center}
.cf-cfg .cf-cfg-dim,.cf-cfg .cf-cfg-measured-input{width:100%;min-height:56px;margin:0;padding:12px 64px 12px 16px;font-family:var(--cfg-mono);font-size:1.25rem;font-weight:500;letter-spacing:.02em;color:var(--cfg-ink);background:var(--cfg-paper);border:1.5px solid var(--cfg-edge);border-radius:var(--cfg-radius);box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease}
.cf-cfg--js .cf-cfg-dims .cf-cfg-dim{padding-left:52px;padding-right:98px}
.cf-cfg .cf-cfg-dim:focus,.cf-cfg .cf-cfg-measured-input:focus{border-color:var(--cfg-ink);box-shadow:0 0 0 3px rgba(27,29,31,.1);outline:none}
.cf-cfg .cf-cfg-dim:focus-visible{outline:2px solid var(--cfg-accent);outline-offset:2px}
.cf-cfg-unit{position:absolute;right:16px;font-family:var(--cfg-mono);font-size:.8rem;color:var(--cfg-steel);pointer-events:none}
.cf-cfg--js .cf-cfg-dims .cf-cfg-unit{right:56px}
.cf-cfg-valid{position:absolute;right:46px;top:50%;width:7px;height:12px;margin-top:-8px;border:solid transparent;border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.cf-cfg--js .cf-cfg-dims .cf-cfg-valid{right:86px}
.cf-cfg-field.is-valid .cf-cfg-valid{border-color:var(--cfg-ok)}
.cf-cfg-field.is-invalid .cf-cfg-dim{border-color:var(--cfg-err);box-shadow:inset 0 0 0 1px var(--cfg-err)}
.cf-cfg .cf-cfg-nudge{position:absolute;top:6px;bottom:6px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:40px;padding:0;background:var(--cfg-mist);border:0;border-radius:3px;color:var(--cfg-ink);cursor:pointer;transition:background-color .15s ease}
.cf-cfg .cf-cfg-nudge[data-nudge^="-"]{left:6px}
.cf-cfg .cf-cfg-nudge:not([data-nudge^="-"]){right:6px}
.cf-cfg .cf-cfg-nudge:hover{background:var(--cfg-line)}
.cf-cfg .cf-cfg-nudge .cf-cfg-icon{width:18px;height:18px;stroke-width:2}
.cf-cfg-error{display:flex;gap:8px;margin:7px 0 0;font-size:.88rem;font-weight:500;color:var(--cfg-err)}
.cf-cfg-error::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--cfg-err);color:#fff;font-size:.72rem;font-weight:700}
.cf-cfg-fix{margin-top:8px}
.cf-cfg-derived{display:flex;gap:12px;align-items:flex-start;margin:-8px 0 18px;padding:12px 14px;background:var(--cfg-ok-tint);border:1px solid #D2E6DA;border-radius:var(--cfg-radius);min-height:50px}
.cf-cfg-derived-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--cfg-ok);color:#fff;flex:none}
.cf-cfg-derived-icon .cf-cfg-icon{width:14px;height:14px;stroke-width:2.6}
.cf-cfg-derived-body{min-width:0}
.cf-cfg-derived-text,.cf-cfg-derived-calc{font-family:var(--cfg-mono);font-size:.8rem;letter-spacing:.01em;line-height:1.55;padding-top:2px}
.cf-cfg-derived-calc{color:var(--cfg-ink);font-weight:600}
.cf-cfg-derived-calc:empty{display:none}
.cf-cfg-why{font-size:.86rem}
.cf-cfg summary,.cf-cfg-stage summary{list-style:none;cursor:pointer}
.cf-cfg summary::-webkit-details-marker,.cf-cfg-stage summary::-webkit-details-marker{display:none}
.cf-cfg summary::after,.cf-cfg-stage summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 0 10px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.cf-cfg details[open]>summary::after,.cf-cfg-stage details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.cf-cfg summary:focus-visible,.cf-cfg-stage summary:focus-visible{outline:2px solid var(--cfg-accent);outline-offset:2px}
.cf-cfg-why summary,.cf-cfg-measured summary{display:inline-flex;align-items:center;min-height:32px;font-weight:600;text-decoration:underline;text-decoration-color:var(--cfg-coral);text-underline-offset:3px}
.cf-cfg-why p{color:var(--cfg-steel);padding:2px 0 4px;max-width:58ch}
.cf-cfg-help{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:4px 22px}
.cf-cfg .cf-cfg-help-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cfg-ink);font-size:.92rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--cfg-coral);text-decoration-thickness:2px;text-underline-offset:4px}
.cf-cfg .cf-cfg-help-link:hover{color:var(--cfg-accent)}
.cf-cfg-help-link .cf-cfg-icon{width:20px;height:20px;color:var(--cfg-steel)}

/* sizes as chips (typical-size products) */
.cf-cfg-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.cf-cfg-chip{position:relative;display:flex}
.cf-cfg-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cf-cfg-chip span{display:inline-flex;flex:1;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid var(--cfg-line);border-radius:var(--cfg-radius);background:var(--cfg-paper);font-family:var(--cfg-mono);font-size:.88rem;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.cf-cfg-chip:hover span{border-color:var(--cfg-edge)}
.cf-cfg-chip input:checked+span{background:var(--cfg-ink);border-color:var(--cfg-ink);color:#fff}
.cf-cfg-chip input:focus-visible+span{outline:2px solid var(--cfg-accent);outline-offset:2px}
.cf-cfg-sizes.is-invalid .cf-cfg-chip span{border-color:var(--cfg-err)}
.cf-cfg-measured{margin:-10px 0 18px;font-size:.92rem}
.cf-cfg-measured-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 0}
.cf-cfg-measured-body>p{grid-column:1/-1}
.cf-cfg-measured-out:empty{display:none}

/* ---------- messages, banners ---------- */
.cf-cfg-msgs:empty{display:none}
.cf-cfg-msg,.cf-cfg-banner{margin:0 0 16px;padding:12px 14px 12px 16px;border:1px solid var(--cfg-line);border-left:3px solid var(--cfg-anth);border-radius:var(--cfg-radius);background:var(--cfg-paper);font-size:.92rem}
.cf-cfg-msg p+*{margin-top:8px}
.cf-cfg-msg .cf-cfg-link{display:inline-flex}
.cf-cfg-msg--error{border-left-color:var(--cfg-err)}
.cf-cfg-msg--change,.cf-cfg-banner{border-left-color:var(--cfg-coral);background:var(--cfg-tint)}
.cf-cfg-msg[tabindex]:focus{outline:2px solid var(--cfg-accent);outline-offset:2px}

/* ---------- option cards (pictogram + text + price) ---------- */
.cf-cfg-opts{display:grid;gap:10px}
.cf-cfg-opts--cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.cf-cfg-opts+.cf-cfg-opts{margin-top:10px}
.cf-cfg-opt{position:relative;min-width:0}
.cf-cfg-opt{container-type:inline-size}
.cf-cfg-opt-label{position:relative;display:grid;grid-template-columns:20px 44px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;gap:6px 12px;height:100%;min-height:64px;margin:0;padding:14px;border:1.5px solid var(--cfg-line);border-radius:var(--cfg-radius);background:var(--cfg-paper);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.cf-cfg-opt--card .cf-cfg-opt-input,.cf-cfg-opt--card .cf-cfg-opt-pic{grid-row:1 / span 2}
.cf-cfg-opt--card .cf-cfg-opt-price{grid-column:3;grid-row:2;text-align:left;padding-top:0}
@container (min-width:430px){
  .cf-cfg-opt--card .cf-cfg-opt-label{grid-template-columns:20px 44px minmax(0,1fr) auto}
  .cf-cfg-opt--card .cf-cfg-opt-price{grid-column:4;grid-row:1;text-align:right;padding-top:3px}
}
.cf-cfg-opt-label:hover{border-color:var(--cfg-edge)}
.cf-cfg .cf-cfg-opt-input{appearance:none;-webkit-appearance:none;position:relative;width:20px;height:20px;margin:12px 0 0;border:1.5px solid var(--cfg-edge);border-radius:50%;background:var(--cfg-paper);cursor:pointer;flex:none;transition:border-color .15s ease,background-color .15s ease}
.cf-cfg .cf-cfg-opt-input[type="checkbox"]{border-radius:3px}
.cf-cfg .cf-cfg-opt-input:checked{border-color:var(--cfg-ink);background:var(--cfg-ink)}
.cf-cfg .cf-cfg-opt-input[type="radio"]:checked{background:radial-gradient(circle,#fff 0 3.5px,var(--cfg-ink) 4px)}
.cf-cfg .cf-cfg-opt-input[type="checkbox"]:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cf-cfg .cf-cfg-opt-input:focus-visible{outline:2px solid var(--cfg-accent);outline-offset:2px}
.cf-cfg-opt-pic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--cfg-radius);background:var(--cfg-mist);color:var(--cfg-anth);transition:background-color .15s ease,color .15s ease}
.cf-cfg-opt-pic .cf-cfg-icon{width:28px;height:28px;stroke-width:1.5}
.cf-cfg-opt-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding-top:2px}
.cf-cfg-opt-name{font-weight:600;font-size:.95rem;line-height:1.3}
.cf-cfg-opt-desc{display:flex;flex-direction:column;gap:3px;font-size:.84rem;line-height:1.42;color:var(--cfg-steel)}
.cf-cfg-opt-help:empty,.cf-cfg-opt-tag:empty,.cf-cfg-opt-reason:empty,.cf-cfg-opt-price:empty,.cf-cfg-opt-desc:empty{display:none}
.cf-cfg-opt-tag{display:inline-block;align-self:flex-start;max-width:100%;padding:2px 7px;border-radius:2px;background:var(--cfg-mist);font-family:var(--cfg-mono);font-size:.7rem;line-height:1.5;color:var(--cfg-ink)}
.cf-cfg-opt-reason{font-weight:500;color:var(--cfg-ink)}
.cf-cfg-opt-price{padding-top:3px;font-family:var(--cfg-mono);font-size:.86rem;font-weight:600;white-space:nowrap;color:var(--cfg-ink);text-align:right}
.cf-cfg-badge{display:inline-block;margin:2px 0;padding:3px 7px;border-radius:2px;background:var(--cfg-accent);color:#fff;font-family:var(--cfg-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.cf-cfg--js .cf-cfg-opt.is-selected .cf-cfg-opt-label,.cf-cfg:not(.cf-cfg--js) .cf-cfg-opt:has(.cf-cfg-opt-input:checked) .cf-cfg-opt-label{border-color:var(--cfg-ink);box-shadow:inset 0 0 0 1px var(--cfg-ink);background:#FCFBF9}
.cf-cfg--js .cf-cfg-opt.is-selected .cf-cfg-opt-pic,.cf-cfg:not(.cf-cfg--js) .cf-cfg-opt:has(.cf-cfg-opt-input:checked) .cf-cfg-opt-pic{background:var(--cfg-ink);color:#fff}
/* Keyboard focus ring on the card, after the selected rules and more specific
   than them, so selecting never replaces it. In a radio group the focused tile
   is the checked one, and a colour tile's radio is invisible (opacity 0), so
   this ring is its only focus indicator (WCAG 2.4.7, MF-4). */
.cf-cfg .cf-cfg-opt .cf-cfg-opt-label:has(.cf-cfg-opt-input:focus-visible){box-shadow:0 0 0 2px var(--cfg-paper),0 0 0 4px var(--cfg-accent)}
.cf-cfg .cf-cfg-opt.is-selected .cf-cfg-opt-label:has(.cf-cfg-opt-input:focus-visible),.cf-cfg .cf-cfg-opt:has(.cf-cfg-opt-input:checked) .cf-cfg-opt-label:has(.cf-cfg-opt-input:focus-visible){box-shadow:inset 0 0 0 1px var(--cfg-ink),0 0 0 2px var(--cfg-paper),0 0 0 4px var(--cfg-accent)}
.cf-cfg-opt.is-recommended:not(.is-selected) .cf-cfg-opt-label{border-color:var(--cfg-accent)}
.cf-cfg-opt.is-disabled .cf-cfg-opt-label{background:var(--cfg-mist);border-style:dashed;cursor:not-allowed}
.cf-cfg-opt.is-disabled .cf-cfg-opt-name{color:var(--cfg-steel)}
.cf-cfg-opt.is-disabled .cf-cfg-opt-pic{background:transparent;color:var(--cfg-steel-light)}
.cf-cfg-opt.is-disabled .cf-cfg-opt-help{display:none}
.cf-cfg-opt.is-disabled .cf-cfg-opt-input{border-style:dashed;background:transparent}
/* unavailable options go after the available ones (they cannot take focus, so the focus order is unchanged) and take less room */
.cf-cfg--js .cf-cfg-opt.is-disabled{order:1}
.cf-cfg-opt.is-disabled .cf-cfg-opt-label{min-height:0;padding-top:11px;padding-bottom:11px}
.cf-cfg-opt.is-disabled .cf-cfg-opt-pic{height:32px}
.cf-cfg-opt.is-disabled .cf-cfg-opt-input{margin-top:6px}
.cf-cfg-group.is-invalid .cf-cfg-opt:not(.is-disabled) .cf-cfg-opt-label{border-color:var(--cfg-err)}
.cf-cfg-opt--none .cf-cfg-opt-label{min-height:56px;align-items:center}
.cf-cfg-opt--none .cf-cfg-opt-input{margin-top:0}
.cf-cfg-opt--none .cf-cfg-opt-text{padding-top:0}
.cf-cfg-opt--none .cf-cfg-opt-pic{width:36px;height:36px;background:transparent}
.cf-cfg-opt--none .cf-cfg-opt-pic .cf-cfg-icon{width:22px;height:22px}
@media(max-width:479px){
  .cf-cfg-opt-label{grid-template-columns:20px 40px minmax(0,1fr);padding:12px}
  .cf-cfg-opt-pic{width:40px;height:40px}
  .cf-cfg-opt-pic .cf-cfg-icon{width:26px;height:26px}
}
.cf-cfg-group .cf-cfg-error{margin:0 0 12px}

/* ---------- colour tiles: a slat sample per colour (wood grain and metallic sheen in CSS) ---------- */
.cf-cfg-opts--tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(max-width:479px){.cf-cfg-opts--tiles{grid-template-columns:1fr 1fr;gap:8px}}
.cf-cfg-opt--swatch .cf-cfg-opt-label{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:8px 8px 12px}
.cf-cfg-opt--swatch .cf-cfg-opt-input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:var(--cfg-radius);background:none;opacity:0}
.cf-cfg-opt--swatch .cf-cfg-opt-input:checked{background:none}
.cf-cfg-swatch{position:relative;display:block;aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:var(--cf-cfg-sw,#8A9196);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cf-cfg-swatch::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 1px,rgba(255,255,255,0) 1px 7px,rgba(0,0,0,.16) 7px 8px),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.1))}
.cf-cfg-swatch-box{position:absolute;left:0;right:0;top:0;height:22%;background:inherit;box-shadow:0 1px 0 rgba(0,0,0,.25);z-index:1}
.cf-cfg-opt--swatch[data-scope="slats"] .cf-cfg-swatch-box{background:#ECECE8}
.cf-cfg-opt--swatch[data-finish="wood"] .cf-cfg-swatch::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(97deg,rgba(0,0,0,0) 0 5px,rgba(0,0,0,.13) 5px 6px,rgba(255,255,255,.06) 6px 11px,rgba(0,0,0,.06) 11px 12px),repeating-linear-gradient(83deg,rgba(255,255,255,0) 0 17px,rgba(255,255,255,.08) 17px 20px),linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,0) 35%,rgba(0,0,0,.1) 70%,rgba(255,255,255,.06))}
.cf-cfg-opt--swatch[data-finish="metal"] .cf-cfg-swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.5),rgba(255,255,255,0) 32%,rgba(0,0,0,.1) 58%,rgba(255,255,255,.28) 92%)}
.cf-cfg-opt--swatch[data-finish="wood"] .cf-cfg-swatch-box{background:var(--cf-cfg-sw)}
.cf-cfg-opt--swatch[data-scope="slats"][data-finish] .cf-cfg-swatch-box{background:#ECECE8}
.cf-cfg-opt--swatch .cf-cfg-opt-text{padding:0 4px;gap:1px}
.cf-cfg-opt--swatch .cf-cfg-opt-name{display:flex;flex-direction:column;font-size:.88rem}
.cf-cfg-opt-code{font-family:var(--cfg-mono);font-size:.7rem;font-weight:500;letter-spacing:.04em;color:var(--cfg-steel)}
.cf-cfg-opt--swatch .cf-cfg-opt-desc{font-size:.76rem}
.cf-cfg-opt--swatch .cf-cfg-opt-price{padding:0 4px;text-align:left;font-size:.8rem;color:var(--cfg-steel)}
.cf-cfg-tick{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--cfg-ink);color:#fff;box-shadow:0 0 0 2px #fff;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s var(--cfg-ease)}
.cf-cfg-tick .cf-cfg-icon{width:16px;height:16px;stroke-width:2.6}
.cf-cfg--js .cf-cfg-opt--swatch.is-selected .cf-cfg-tick,.cf-cfg:not(.cf-cfg--js) .cf-cfg-opt--swatch:has(.cf-cfg-opt-input:checked) .cf-cfg-tick{opacity:1;transform:none}
.cf-cfg-opt--swatch.is-selected .cf-cfg-opt-label{background:var(--cfg-paper)}
.cf-cfg-opt--swatch.is-selected .cf-cfg-opt-price{color:var(--cfg-ink)}

/* quantities */
.cf-cfg-qty{display:flex;align-items:center;gap:6px;padding:10px 0 2px 92px}
@media(max-width:479px){.cf-cfg-qty{padding-left:84px}}
.cf-cfg-qty-label{margin-right:6px;font-size:.84rem;color:var(--cfg-steel)}
.cf-cfg .cf-cfg-qty-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1.5px solid var(--cfg-edge);border-radius:var(--cfg-radius);background:var(--cfg-paper);color:var(--cfg-ink);cursor:pointer}
.cf-cfg .cf-cfg-qty-btn .cf-cfg-icon{width:18px;height:18px;stroke-width:2}
.cf-cfg .cf-cfg-qty-btn:hover{border-color:var(--cfg-ink);background:var(--cfg-mist)}
.cf-cfg .cf-cfg-qty-input{width:58px;height:44px;margin:0;padding:0 4px;text-align:center;font-family:var(--cfg-mono);font-size:1rem;color:var(--cfg-ink);border:1.5px solid var(--cfg-edge);border-radius:var(--cfg-radius);background:var(--cfg-paper)}
.cf-cfg-field--qty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 6px;padding:12px 14px;border:1px solid var(--cfg-line);border-radius:var(--cfg-radius)}
.cf-cfg-field--qty .cf-cfg-field-label{margin:0}
.cf-cfg-field--qty .cf-cfg-qty{padding:0}

/* ---------- buttons and links ---------- */
.cf-cfg button.button.cf-cfg-btn-primary,.cf-cfg a.button.cf-cfg-btn-primary,.cf-cfg-stage button.button.cf-cfg-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:.85em 1.5em;background:var(--cfg-accent);border:1.5px solid var(--cfg-accent);border-radius:2px;color:#fff;font-family:var(--cfg-display);font-weight:700;font-size:.98rem;line-height:1.2;text-align:center;text-decoration:none;transition:background-color .15s ease,border-color .15s ease}
.cf-cfg button.button.cf-cfg-btn-primary:hover,.cf-cfg a.button.cf-cfg-btn-primary:hover,.cf-cfg-stage button.button.cf-cfg-btn-primary:hover{background:var(--cfg-accent-hover);border-color:var(--cfg-accent-hover);color:#fff}
.cf-cfg .button[aria-disabled="true"]{opacity:.55}
.cf-cfg .button.loading{opacity:.7;cursor:progress}
.cf-cfg .cf-cfg-btn-secondary,.cf-cfg .button.cf-cfg-again{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.8em 1.3em;background:transparent;border:1.5px solid var(--cfg-ink);border-radius:2px;color:var(--cfg-ink);font-family:var(--cfg-display);font-weight:700;font-size:.94rem;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.cf-cfg .cf-cfg-btn-secondary:hover,.cf-cfg .button.cf-cfg-again:hover{background:var(--cfg-ink);color:#fff}
.cf-cfg .cf-cfg-link,.cf-cfg .cf-cfg-link-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;background:none;border:0;color:var(--cfg-ink);font:inherit;font-size:.92rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--cfg-coral);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.cf-cfg .cf-cfg-link:hover,.cf-cfg .cf-cfg-link-btn:hover{color:var(--cfg-accent)}
.cf-cfg .cf-cfg-link .cf-cfg-icon,.cf-cfg .cf-cfg-link-btn .cf-cfg-icon{width:20px;height:20px;color:var(--cfg-steel)}
.cf-cfg button:focus-visible,.cf-cfg a:focus-visible,.cf-cfg-stage button:focus-visible{outline:2px solid var(--cfg-accent);outline-offset:2px}

/* ---------- step navigation ---------- */
.cf-cfg-nav{display:flex;align-items:center;gap:12px;margin-top:8px;padding-top:20px;border-top:1px solid var(--cfg-line)}
.cf-cfg .cf-cfg-nav .cf-cfg-next{margin-left:auto}
.cf-cfg .cf-cfg-nav .cf-cfg-next::after{content:"→";font-family:var(--cfg-mono);font-weight:400}
@media(max-width:420px){
  .cf-cfg .cf-cfg-nav .cf-cfg-back{padding-left:1em;padding-right:1em}
  .cf-cfg .cf-cfg-nav .cf-cfg-next{flex:1}
}

/* ---------- summary step ---------- */
.cf-cfg-figure--summary{display:none}
.cf-cfg-summary{display:grid;gap:22px;margin-bottom:18px}
@media(min-width:1180px){.cf-cfg-summary{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.cf-cfg-summary-list{margin:0;padding:0}
.cf-cfg-summary-list>div{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);align-items:baseline;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--cfg-line)}
.cf-cfg-summary-list>div:first-child{border-top:1px solid var(--cfg-line)}
.cf-cfg-summary-list dt{padding-top:2px;font-family:var(--cfg-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cfg-steel)}
.cf-cfg-summary-list dd{margin:0;font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.cf-cfg-summary-list--edit dd{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px}
.cf-cfg-dd-val{min-width:0}
.cf-cfg .cf-cfg-edit{flex:none;min-height:32px;padding:0 2px;background:none;border:0;color:var(--cfg-ink);font:inherit;font-size:.78rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--cfg-coral);text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.cf-cfg .cf-cfg-edit:hover{color:var(--cfg-accent)}
.cf-cfg-summary-list--mini>div{grid-template-columns:minmax(80px,38%) minmax(0,1fr);padding:7px 0}
.cf-cfg-summary-list--mini>div:first-child{border-top:0}
.cf-cfg-summary-price{padding:16px 18px;background:var(--cfg-mist);border-radius:var(--cfg-radius)}
.cf-cfg-total{display:flex;flex-direction:column;gap:2px}
.cf-cfg-total-label{font-family:var(--cfg-mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cfg-steel)}
.cf-cfg-total-value{font-family:var(--cfg-display);font-weight:800;font-size:2.15rem;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--cfg-ink)}
.cf-cfg-total-note,.cf-cfg-total-extra{font-size:.8rem;line-height:1.45;color:var(--cfg-steel)}
.cf-cfg-total-extra:empty{display:none}
.cf-cfg-total[data-state="partial"] .cf-cfg-total-note{color:var(--cfg-accent);font-weight:600}
.cf-cfg-total[data-state="none"] .cf-cfg-total-value{color:var(--cfg-steel-light)}
.cf-cfg-breakdown{margin-top:12px;padding-top:4px;border-top:1px solid var(--cfg-line);font-size:.88rem}
.cf-cfg-breakdown>summary,.cf-cfg-stage-details>summary{display:flex;align-items:center;min-height:40px;font-weight:600}
.cf-cfg-breakdown-table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:.88rem}
.cf-cfg-breakdown-table th,.cf-cfg-breakdown-table td{padding:7px 0;border:0;border-bottom:1px solid var(--cfg-line);background:none;vertical-align:top}
.cf-cfg-breakdown-table th{padding-right:12px;font-weight:400;text-align:left}
.cf-cfg-breakdown-table td{text-align:right;white-space:nowrap;font-family:var(--cfg-mono);font-size:.82rem;font-variant-numeric:tabular-nums}
.cf-cfg-breakdown-table tr.is-total th,.cf-cfg-breakdown-table tr.is-total td{font-family:var(--cfg-display);font-weight:800;font-size:1rem;border-bottom:2px solid var(--cfg-ink)}
.cf-cfg-breakdown-table tr.is-service th,.cf-cfg-breakdown-table tr.is-service td{color:var(--cfg-steel)}
.cf-cfg-breakdown-table tr:last-child th,.cf-cfg-breakdown-table tr:last-child td{border-bottom:0}
.cf-cfg-trust{list-style:none;margin:6px 0 4px;padding:14px 16px;display:grid;gap:10px;border:1px solid var(--cfg-line);border-radius:var(--cfg-radius);font-size:.86rem;color:var(--cfg-steel)}
.cf-cfg-trust:not(:has(>li:not([hidden]))){display:none}
.cf-cfg-trust li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.cf-cfg-trust .cf-cfg-icon{width:20px;height:20px;color:var(--cfg-ink)}
.cf-cfg-trust strong{color:var(--cfg-ink)}
.cf-cfg-trust .cf-cfg-link{min-height:24px;font-size:.86rem}
.cf-cfg-ctas{display:flex;flex-direction:column;gap:10px;margin:18px 0 6px}
.cf-cfg-ctas>*{width:100%}
.cf-cfg-cta-error{margin:6px 0;font-size:.9rem;font-weight:500;color:var(--cfg-err)}
.cf-cfg-share{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin-top:6px}
.cf-cfg-copy-status{flex-basis:100%;font-size:.86rem;color:var(--cfg-ok)}
.cf-cfg-copy-status:empty{display:none}
.cf-cfg-copy-fallback{flex-basis:100%}
.cf-cfg-copy-input{width:100%;min-height:44px;padding:8px 10px;font-family:var(--cfg-mono);font-size:.8rem;border:1.5px solid var(--cfg-edge);border-radius:2px}

/* ---------- the live drawing (stage, summary on phones, bottom sheet, bar thumbnail) ---------- */
.cf-cfg-figure{position:relative;margin:0;border-radius:var(--cfg-radius);background:linear-gradient(180deg,#FAF9F7,#F1EFEA);overflow:hidden}
.cf-cfg-svg{display:block;width:100%;height:auto;aspect-ratio:4/3}
.cf-cfg-svg-gridline{fill:none;stroke:rgba(27,29,31,.055);stroke-width:1}
.cf-cfg-svg-ground{stroke:#B9B4AC;stroke-width:1.2}
.cf-cfg-svg-person{fill:#CDD1D4}
.cf-cfg-svg-curtain{stroke:rgba(0,0,0,.3);stroke-width:.6;transition:fill .2s ease}
.cf-cfg-svg-box,.cf-cfg-svg-guide,.cf-cfg-svg-bottom{stroke:rgba(0,0,0,.32);stroke-width:.6;transition:fill .2s ease}
.cf-cfg-svg-sheen{pointer-events:none}
.cf-cfg-svg-window{stroke:#8C969C;stroke-width:1.4}
.cf-cfg-svg-mullion{fill:none;stroke:#8C969C;stroke-width:1.4}
.cf-cfg-svg-slats{fill:none;stroke:rgba(0,0,0,.22);stroke-width:.6}
.cf-cfg-svg.is-light .cf-cfg-svg-slats{stroke:rgba(0,0,0,.14)}
.cf-cfg-svg.is-dark .cf-cfg-svg-slats{stroke:rgba(255,255,255,.12)}
.cf-cfg-svg-joints{fill:none;stroke:rgba(0,0,0,.42);stroke-width:1}
.cf-cfg-svg.is-dark .cf-cfg-svg-joints{stroke:rgba(255,255,255,.2)}
.cf-cfg-svg-motor{fill:none;stroke:var(--cfg-accent);stroke-width:1.2;stroke-dasharray:3 2}
.cf-cfg-svg-rail{fill:none;stroke:var(--cfg-anth);stroke-width:1.4}
.cf-cfg-svg-woodbase{fill:var(--cfg-wood,#8A6A47)}
.cf-cfg-svg-grain{fill:none;stroke:rgba(0,0,0,.22);stroke-width:.7}
.cf-cfg-svg-dimline{fill:none;stroke:var(--cfg-accent);stroke-width:.9}
.cf-cfg-svg-dimline--c{stroke:var(--cfg-steel);stroke-width:.8}
.cf-cfg-svg-pill{fill:#FAF9F7}
.cf-cfg-svg-dim{font-family:var(--cfg-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;fill:var(--cfg-accent)}
.cf-cfg-svg-dim--c{font-size:9px;font-weight:500;fill:var(--cfg-steel)}
.cf-cfg-svg-scale{font-family:var(--cfg-mono);font-size:8.5px;fill:var(--cfg-steel)}
.cf-cfg-svg.is-mini .cf-cfg-svg-dims,.cf-cfg-svg.is-mini .cf-cfg-svg-motor,.cf-cfg-svg.is-mini .cf-cfg-svg-person,.cf-cfg-svg.is-mini .cf-cfg-svg-bg,.cf-cfg-svg.is-mini .cf-cfg-svg-ground{display:none}
.cf-cfg-figure-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:0 12px 10px}
.cf-cfg-figure-foot:not(:has(.cf-cfg-figure-cap)):has(.cf-cfg-badges:empty){display:none}
.cf-cfg-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto}
.cf-cfg-badges:empty{display:none}
.cf-cfg-badge-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 6px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--cfg-line);font-family:var(--cfg-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--cfg-ink);animation:cf-cfg-pop .2s var(--cfg-ease)}
.cf-cfg-badge-chip .cf-cfg-icon{width:16px;height:16px;color:var(--cfg-accent)}
@keyframes cf-cfg-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cf-cfg-figure-cap{font-family:var(--cfg-mono);font-size:.64rem;letter-spacing:.04em;color:var(--cfg-steel)}

/* ---------- desktop stage (under the gallery, sticky) ----------
   .cf-cfg-product-top wraps gallery, summary and stage and closes before the
   tabs (CF_Cfg_Frontend::open_top / close_top). It contains the floats, so it is
   the stage's sticky range: the stage stops at the end of the configurator and
   never rides over the description (MF-1). */
.cf-cfg-product-top{display:flow-root}
.cf-cfg-stage{display:none}
.cf-cfg-stage-body{padding:16px 18px 18px}
.cf-cfg-stage-title{font-family:var(--cfg-display);font-weight:700;font-size:.95rem;line-height:1.25}
.cf-cfg-spec{margin:4px 0 0;font-family:var(--cfg-mono);font-size:.76rem;line-height:1.5;color:var(--cfg-steel)}
.cf-cfg-spec:empty{display:none}
.cf-cfg-total--stage{margin-top:14px;padding-top:14px;border-top:1px solid var(--cfg-line)}
.cf-cfg-stage .cf-cfg-total-value{font-size:2.3rem}
.cf-cfg-stage-details{margin-top:8px;font-size:.88rem}
.cf-cfg-stage .cf-cfg-summary-list--mini{margin-top:12px;border-top:1px solid var(--cfg-line)}
.cf-cfg-stage .cf-cfg-go-summary{width:100%;margin-top:14px}
.cf-cfg-stage[data-step="summary"] .cf-cfg-go-summary,.cf-cfg-stage[data-step="summary"] .cf-cfg-stage-details{display:none}
@media(min-width:921px){
  body.cf-cfg-product.woocommerce div.product .woocommerce-product-gallery{width:40%;float:left;position:relative}
  body.cf-cfg-product.woocommerce div.product .summary.entry-summary{width:56%}
  body.cf-cfg-product.woocommerce div.product .cf-cfg-stage{display:block;float:left;clear:left;width:40%;margin:0 0 32px;position:sticky;top:var(--cfg-sticky-top);border:1px solid var(--cfg-line);border-radius:var(--cfg-radius);background:var(--cfg-paper);box-shadow:0 18px 40px -28px rgba(27,29,31,.35)}
  body.cf-cfg-product.woocommerce div.product .cf-cfg-stage[hidden]{display:none !important}
  body.cf-cfg-product.woocommerce div.product .cf-cfg-stage.cf-cfg-stage--boot[hidden]{display:block !important;visibility:hidden}
  .cf-cfg-stage .cf-cfg-figure{border-radius:var(--cfg-radius) var(--cfg-radius) 0 0}
  .cf-cfg-bar,.cf-cfg-scrim{display:none !important}
}
@media(min-width:921px) and (max-height:820px){
  .cf-cfg-stage .cf-cfg-svg{aspect-ratio:16/10}
  .cf-cfg-stage .cf-cfg-total-value{font-size:1.9rem}
  .cf-cfg-stage .cf-cfg-figure-cap{display:none}
  .cf-cfg-stage .cf-cfg-figure-foot{min-height:0}
}
@media(max-width:920px){
  .cf-cfg-figure--summary{display:block;max-width:480px;margin:0 auto 18px}
}

/* ---------- no-JS fallback ---------- */
.cf-cfg-nojs{margin-top:20px;padding:16px;background:var(--cfg-mist);border-radius:var(--cfg-radius)}
.cf-cfg-nojs p{margin-bottom:12px;font-size:.92rem}
.cf-cfg--js .cf-cfg-nojs{display:none}


/* ---------- boot state: .cf-cfg--boot is set by an inline script in the template
   before first paint (JS on, deferred wizard not run yet). The form is laid out
   like the wizard's first step and the room of the script-only parts is reserved
   (visibility:hidden), so the switch to .cf-cfg--js moves nothing (CLS). ---------- */
.cf-cfg--boot .cf-cfg-nojs{display:none}
.cf-cfg--boot .cf-cfg-step:not([data-step="1"]){display:none}
.cf-cfg--boot .cf-cfg-step{padding-top:0;margin-top:0;border-top:0}
.cf-cfg.cf-cfg--boot>.cf-cfg-stepper[hidden]{display:block !important;visibility:hidden}
.cf-cfg.cf-cfg--boot .cf-cfg-step .cf-cfg-derived[hidden]{display:flex !important}
.cf-cfg.cf-cfg--boot .cf-cfg-step .cf-cfg-measured[hidden]{display:block !important;visibility:hidden}
.cf-cfg.cf-cfg--boot .cf-cfg-step .cf-cfg-nav[hidden]{display:flex !important;visibility:hidden}
.cf-cfg--boot .cf-cfg-dims .cf-cfg-dim{padding-left:52px;padding-right:98px}
.cf-cfg--boot .cf-cfg-dims .cf-cfg-unit{right:56px}
.cf-cfg--boot .cf-cfg-dims .cf-cfg-valid{right:86px}

/* ---------- phones and tablets: price bar that opens into a bottom sheet ---------- */
.cf-cfg-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;color:#fff;pointer-events:none}
.cf-cfg-bar>*{pointer-events:auto}
.cf-cfg-bar-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:var(--cfg-anth);box-shadow:0 -10px 28px -14px rgba(0,0,0,.45)}
.cf-cfg-bar-row>*{max-width:var(--maxw,1240px)}
.cf-cfg-bar-thumb{flex:none;width:58px;height:44px;border-radius:3px;background:#F1EFEA;overflow:hidden}
.cf-cfg-bar-thumb .cf-cfg-svg{width:100%;height:100%;aspect-ratio:auto}
.cf-cfg-bar-total{display:flex;flex-direction:column;flex:1;min-width:0;margin:0;line-height:1.2}
.cf-cfg-bar-label{font-family:var(--cfg-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cfg-steel-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-cfg-bar-value{font-family:var(--cfg-display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cf-cfg-bar-dims{font-size:1rem}
.cf-cfg .cf-cfg-bar-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 14px;background:transparent;border:1.5px solid rgba(255,255,255,.7);border-radius:2px;color:#fff;font-family:var(--cfg-display);font-weight:700;font-size:.88rem;cursor:pointer}
.cf-cfg .cf-cfg-bar-toggle .cf-cfg-icon{width:18px;height:18px;stroke-width:2;transform:rotate(180deg);transition:transform .2s var(--cfg-ease)}
.cf-cfg .cf-cfg-bar-toggle[aria-expanded="true"] .cf-cfg-icon{transform:none}
.cf-cfg .cf-cfg-bar-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cf-cfg-sheet{max-height:min(72vh,620px);overflow:auto;overscroll-behavior:contain;padding:10px 16px 16px;background:var(--cfg-paper);color:var(--cfg-ink);border-radius:14px 14px 0 0;box-shadow:0 -18px 40px -18px rgba(0,0,0,.45);transform:translateY(16px);opacity:0;transition:transform .22s var(--cfg-ease),opacity .18s ease}
.cf-cfg-sheet::before{content:"";display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--cfg-line)}
.cf-cfg-bar.is-open .cf-cfg-sheet{transform:none;opacity:1}
.cf-cfg-sheet .cf-cfg-figure{max-width:420px;margin:0 auto}
.cf-cfg-sheet-spec{text-align:center;margin:10px 0 6px}
.cf-cfg-sheet .cf-cfg-breakdown-table{margin-top:6px}
.cf-cfg-sheet-note{display:block;margin-top:8px}
.cf-cfg-sheet .cf-cfg-go-summary{width:100%;margin-top:14px}
.cf-cfg-scrim{position:fixed;inset:0;z-index:54;background:rgba(27,29,31,.42);opacity:0;transition:opacity .2s ease}
.cf-cfg-scrim.is-on{opacity:1}
body.cf-cfg-bar-on .site-footer,body.cf-cfg-bar-on footer{padding-bottom:var(--cf-cfg-bar-h,0)}
/* .has-dock: the theme's floating button (data-cf-cfg-dock) sits at the right end
   of the row; reserve its 44 px + a 12 px gap (README §10.1, MF-2) */
.cf-cfg-bar.has-dock .cf-cfg-bar-row{padding-right:72px}
/* narrow phones with the docked button: the label and the price keep their room, the thumbnail goes (the sheet has the drawing) */
@media(max-width:399px){
  .cf-cfg-bar-row{gap:10px}
  .cf-cfg-bar.has-dock .cf-cfg-bar-thumb{display:none}
  .cf-cfg .cf-cfg-bar-toggle{padding:0 10px 0 12px}
}
@media(max-width:359px){.cf-cfg-bar-label{letter-spacing:.06em}}
@media(min-width:600px) and (max-width:920px){
  .cf-cfg-bar-row{padding-left:max(16px,calc((100% - 720px)/2));padding-right:max(16px,calc((100% - 720px)/2))}
  .cf-cfg-bar.has-dock .cf-cfg-bar-row{padding-right:calc(max(16px,calc((100% - 720px)/2)) + 56px)}
  .cf-cfg-sheet{max-width:720px;margin:0 auto}
}

/* WooCommerce's gallery zoom trigger (z-index 99) would draw over the bottom sheet and the fixed header. */
body.cf-cfg-product.woocommerce div.product div.images .woocommerce-product-gallery__trigger{z-index:5}

/* ---------- product price line (product page) ---------- */
.cf-cfg-price-for{display:block;margin-top:4px;font-family:var(--body,"Inter",system-ui,sans-serif);font-size:.84rem;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--steel,#5D656B)}
.cf-cfg-price-quote{font-family:var(--display,"Archivo",system-ui,sans-serif);font-weight:700;color:var(--ink,#1B1D1F)}

@media(prefers-reduced-motion:reduce){
  .cf-cfg *,.cf-cfg *::before,.cf-cfg *::after,.cf-cfg-stage *,.cf-cfg-stage *::before,.cf-cfg-stage *::after{transition:none !important;animation:none !important}
}

/* Focused controls clear the theme's fixed header (72 px) when the browser scrolls them into view (WCAG 2.4.11). */
html:has(body.cf-cfg-product){scroll-padding-top:96px}