/* Cable studio — one connection, one guide, one persistent action. */ html:has(.cs-active),body.cs-page{height:100%;overflow:hidden!important;scrollbar-gutter:auto} body.cs-page>footer,body.cs-page .poz-footer,body.cs-page .poz-quick-aware,body.cs-page .pzcf-method,body.cs-page .pz-brand-profile{display:none!important} #main.pzcf.cs-active{--cs-accent:#007a70;--cfg-accent:#007a70;--cs-ink:#1d1d1f;--cs-muted:#6e6e73;--cs-border:#dedee4;position:fixed;inset:64px 0 0;margin:0!important;padding:0!important;max-width:none!important;background:#f5f5f7;color:var(--cs-ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;z-index:2;overflow:hidden} #main.cs-active *{box-sizing:border-box}#main.cs-active [hidden]{display:none!important} #main.cs-active>section:not(.pzcf-work){display:none!important} #main.cs-active .pzcf-work,#main.cs-active .pzcf-shell{height:100%;max-width:none;width:100%;padding:0!important;margin:0!important;opacity:1!important;transform:none!important} #main.cs-active .pzcf-app{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:14px;height:100%;border:0;background:none;box-shadow:none;border-radius:0;padding:18px 24px 6px;overflow:hidden} #main.cs-active h1,#main.cs-active h2,#main.cs-active h3,#main.cs-active h4,#main.cs-active button,#main.cs-active input,#main.cs-active select,#main.cs-active a{font-family:inherit!important;letter-spacing:normal;text-transform:none;color:inherit} #main.cs-active h1{font-size:27px;line-height:1.15;letter-spacing:-.8px;margin:3px 0 0;font-weight:650} #main.cs-active h2,#main.cs-active h3{font-weight:650;line-height:1.15;letter-spacing:-.65px} #main.cs-active button,#main.cs-active a.cs-primary{touch-action:manipulation;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s;transform:none!important;box-shadow:none;text-decoration:none} #main.cs-active button::before,#main.cs-active button::after,#main.cs-active a::after{display:none!important} #main.cs-active button:disabled{cursor:default;opacity:.4}#main.cs-active :focus-visible{outline:3px solid #007a7070!important;outline-offset:3px} #main.cs-active svg{width:22px;height:22px;flex-shrink:0} #main.cs-active .cs-heading{display:flex;align-items:center;justify-content:space-between;gap:16px} #main.cs-active .cs-heading small{color:var(--cs-muted);font-size:12px} #main.cs-active .cs-tools,#main.cs-active .pzcf-history{display:flex;gap:6px;align-items:center;margin:0;padding:0;border:0} #main.cs-active .cs-tools button{display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:9px;border:1px solid transparent;border-radius:14px;background:transparent;color:#626269} #main.cs-active .cs-tools button span{display:none}#main.cs-active .cs-tools button:hover{background:#e9e9ed;color:var(--cs-ink)} #main.cs-active .cs-nav{border-radius:18px;background:#ffffffba;border:1px solid #fff;overflow:hidden} #main.cs-active .cs-nav ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;gap:0} #main.cs-active .cs-nav li{position:relative;min-width:0;padding:0;margin:0}#main.cs-active .cs-nav li::after,#main.cs-active .cs-nav li::before{display:none} #main.cs-active .cs-nav button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;width:100%;padding:12px;border:0;border-radius:0;background:transparent;color:#6e6e73;font-size:13px;position:relative} #main.cs-active .cs-nav button>span{display:grid;place-items:center;min-width:25px;width:25px;height:25px;border-radius:50%;border:1px solid #d7d7de;font-size:11px;font-weight:500;background:none} #main.cs-active .cs-nav strong{font-size:13px;font-weight:550;white-space:nowrap} #main.cs-active .cs-nav .is-active button{color:var(--cs-accent);background:#e8f3f1;box-shadow:inset 0 -2px var(--cs-accent)} #main.cs-active .cs-nav .is-active button>span,#main.cs-active .cs-nav .is-complete button>span{background:var(--cs-accent);border-color:var(--cs-accent);color:#fff} #main.cs-active .cs-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,44%);gap:22px;min-height:0;overflow:hidden} #main.cs-active .pzcf-stage{display:flex;flex-direction:column;position:relative;top:auto;align-self:stretch;height:100%!important;min-height:0!important;border:1px solid #fff;border-radius:28px;padding:28px;background:radial-gradient(ellipse at 50% 45%,#fff 10%,#f0f2f3 100%);box-shadow:none;overflow:hidden} #main.cs-active .pzcf-stage__grid{display:none} #main.cs-active .cs-preview-head small{font-size:12px;color:#7c8084}#main.cs-active .cs-preview-head h2{font-size:clamp(24px,2.4vw,38px);max-width:560px;margin:6px 0 0;letter-spacing:-1px} #main.cs-active .pzcf-stage__status{position:static;order:1;display:flex;justify-content:center;gap:7px;margin:0 0 12px;padding:0;background:none;color:#5d6867;font-size:11px} #main.cs-active .pzcf-stage__status small{font-size:11px;font-weight:450}#main.cs-active .pzcf-stage__status>span{width:6px;height:6px;box-shadow:none;background:#a4acae} #main.cs-active .pzcf-stage__status>span.is-valid{background:var(--cs-accent)} #main.cs-active .pzcf-stage__connection{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);align-items:center;gap:8px;padding:10px 0;min-height:0;position:relative;inset:auto} #main.cs-active .pzcf-end{display:flex;flex-direction:column;align-items:center;min-width:0;gap:10px;padding:18px 10px;border-radius:22px;border:1px solid transparent;background:transparent;cursor:pointer;position:relative} #main.cs-active .pzcf-end:hover:not([aria-disabled=true]){background:#ffffff9c;border-color:#e0e5e5}#main.cs-active .pzcf-end[aria-disabled=true]{cursor:default} #main.cs-active .pzcf-end__role{position:absolute;left:12px;top:8px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--cs-accent);font-size:12px;border:1px solid #e2e6e6;box-shadow:none} #main.cs-active .pzcf-end__image{width:100%;height:clamp(120px,23vh,270px);max-width:270px;display:grid;place-items:center;margin:0;border:0;background:none;box-shadow:none;border-radius:0} #main.cs-active .pzcf-end__image img{width:100%;height:100%;max-height:100%;object-fit:contain;transform:none!important;mix-blend-mode:multiply;filter:none} #main.cs-active .pzcf-end__image.is-placeholder::before{content:'+';display:grid;place-items:center;width:80px;height:80px;border-radius:50%;border:1px dashed #c6d2d0;background:#ffffff60;font:300 36px/1 system-ui;color:#859b97;box-shadow:none} #main.cs-active .pzcf-end__image::after{display:none} #main.cs-active .pzcf-end>div:last-child{text-align:center;width:100%;max-width:240px}#main.cs-active .pzcf-end small{display:block;font-size:10px;color:#747b7d;letter-spacing:.03em;margin:0 0 5px} #main.cs-active .pzcf-end strong{font-size:clamp(14px,1.4vw,20px);line-height:1.25;color:#282d30;letter-spacing:-.25px;font-weight:600;overflow-wrap:anywhere} #main.cs-active .pzcf-line{position:relative;width:100%;height:4px;align-self:center;inset:auto;transform:none;background:#bcc9c6;border:0;border-radius:2px;margin-bottom:45px;overflow:hidden} #main.cs-active .pzcf-line span{position:absolute;inset:0;background:var(--cs-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}#main.cs-active .is-compatible .pzcf-line span{transform:scaleX(1)}#main.cs-active .pzcf-line i{display:none} #main.cs-active .pzcf-stage__meta{order:2;position:static;display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 1fr;gap:8px;padding:14px;background:#ffffffd9;border:1px solid #fff;border-radius:18px;box-shadow:0 4px 20px #27342e04;inset:auto} #main.cs-active .pzcf-stage__meta>span{display:flex;flex-direction:column;min-width:0;border-radius:9px;padding:4px;cursor:pointer}#main.cs-active .pzcf-stage__meta small{font-size:10px;line-height:1.3;color:#777e7c;letter-spacing:0;text-transform:none}#main.cs-active .pzcf-stage__meta strong{font-size:13px;font-weight:550;line-height:1.4;margin-top:5px;overflow-wrap:anywhere} #main.cs-active .cs-preview-help{order:3;margin:12px 0 0;text-align:center;color:#777d7b;font-size:11px} #main.cs-active .cs-outcome{order:4;display:flex;gap:14px;align-items:center;padding:12px 16px;background:#fff;border-radius:18px;margin-top:12px}#main.cs-active .cs-outcome img{width:60px;height:60px;object-fit:contain}#main.cs-active .cs-outcome div{display:grid;gap:3px;min-width:0}#main.cs-active .cs-outcome small{color:var(--cs-accent);font-size:11px}#main.cs-active .cs-outcome strong{font-size:16px}#main.cs-active .cs-outcome span{font-size:11px;color:var(--cs-muted)} #main.cs-active .pzcf-question{display:flex;flex-direction:column;min-height:0;height:100%;padding:0!important;border:1px solid #ffffffc9;border-radius:28px;background:#ffffffb8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden;box-shadow:0 12px 40px #252d3006} #main.cs-active .cs-start{display:flex;align-items:center;gap:14px;padding:16px 24px 0;flex-shrink:0;color:#6e6e73;font-size:11px} #main.cs-active .pzcf-mode{display:flex;flex:1;max-width:320px;gap:3px;padding:3px;background:#eaecef;border:0;border-radius:12px;min-width:0} #main.cs-active .pzcf-mode button{flex:1;min-height:32px;border:0;border-radius:9px;padding:5px 12px;color:#62676a;background:transparent;font-size:12px;white-space:nowrap} #main.cs-active .pzcf-mode .is-active{background:#fff;color:#25282b;box-shadow:0 1px 5px #2525250d} #main.cs-active .pzcf-question__head{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:20px 24px 16px;flex-shrink:0;margin:0;border-bottom:1px solid #ededf1} #main.cs-active [data-pzcf-step-label]{display:block;color:var(--cs-accent);font-size:11px;letter-spacing:0;font-weight:500} #main.cs-active [data-pzcf-question-title]{font-size:clamp(24px,2.3vw,32px);line-height:1.15;margin:7px 0 9px;letter-spacing:-.8px} #main.cs-active [data-pzcf-question-copy]{font-size:13px;line-height:1.5;color:#727277;margin:0;max-width:480px} #main.cs-active .pzcf-swap{align-self:flex-start;background:transparent;border:0;color:var(--cs-accent);font-size:12px;min-height:30px;padding:4px 0;margin:0} #main.cs-active .pzcf-options{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px 24px!important;scrollbar-width:thin;scrollbar-color:#c7d2d0 transparent;align-content:start} #main.cs-active .pzcf-options--applications{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #main.cs-active .pzcf-option{display:flex;position:relative;align-items:center;gap:12px;min-width:0;min-height:102px;max-height:none;padding:16px 30px 16px 14px!important;border:1px solid #dcdfe1;border-radius:17px;background:#fff;text-align:left;box-shadow:none;overflow:hidden} #main.cs-active .pzcf-option:hover{border-color:#92b9b2;background:#fbfdfc}#main.cs-active .pzcf-option.is-selected{border-color:var(--cs-accent);background:#f0f8f6;box-shadow:inset 0 0 0 1px var(--cs-accent)} #main.cs-active .pzcf-option__visual{flex:none;width:48px;height:48px;border-radius:12px;background:#f5f7f7;color:#507b73;display:grid;place-items:center;margin:0} #main.cs-active .pzcf-option__visual svg{width:27px;height:27px} #main.cs-active .pzcf-option__visual img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:2px;max-height:none} #main.cs-active .pzcf-option__copy{display:block;min-width:0}#main.cs-active .pzcf-option__copy small{display:none}#main.cs-active .pzcf-option__copy strong{font-size:13px;line-height:1.35;font-weight:600;display:block;overflow-wrap:anywhere}#main.cs-active .pzcf-option__copy em{font-size:10px;line-height:1.4;margin-top:5px;color:#777d7b;font-style:normal;display:block} #main.cs-active .pzcf-option__check{position:absolute;top:10px;right:9px;width:16px;height:16px;border:1px solid #dce0df;border-radius:50%;color:transparent;background:none;font:600 10px/1 system-ui;display:grid;place-items:center} #main.cs-active .pzcf-option.is-selected .pzcf-option__check{background:var(--cs-accent);border-color:var(--cs-accent);color:white} #main.cs-active .pzcf-options--connectors{display:block}#main.cs-active .pzcf-choice-search{display:block;height:auto;min-height:0;padding:0 0 14px;margin:0;background:none;border:0;border-radius:0;position:static;box-shadow:none} #main.cs-active .pzcf-choice-search>span{display:none}#main.cs-active .pzcf-choice-search input{width:100%;height:44px;border:1px solid #dcdfe1;background:white;border-radius:13px;padding:10px 14px;font-size:14px;line-height:1.4;box-shadow:none;color:var(--cs-ink)} #main.cs-active .pzcf-choice-grid{display:grid;grid-template-columns:1fr;gap:10px}#main.cs-active .pzcf-options--connectors .pzcf-option{min-height:92px}#main.cs-active .pzcf-options--connectors .pzcf-option__visual{width:70px;height:60px;background:#fff}#main.cs-active .pzcf-options--connectors .pzcf-option__copy strong{font-size:15px} #main.cs-active .cs-details{display:flex;flex-direction:column;gap:20px} #main.cs-active .cs-length>label{display:block;font-size:14px;font-weight:600;margin-bottom:10px}#main.cs-active .cs-length-entry{display:flex;align-items:center;gap:8px;border:1px solid #d9dfde;border-radius:17px;background:white;padding:10px 20px;max-width:210px}#main.cs-active .cs-length-entry input{font-size:32px;font-weight:550;letter-spacing:-.6px;min-width:0;width:100%;height:45px;padding:0;border:0;background:none;box-shadow:none;appearance:textfield;-moz-appearance:textfield}#main.cs-active .cs-length-entry input::-webkit-inner-spin-button{appearance:none}#main.cs-active .cs-length-entry>span{font-size:19px;color:#888f8c}#main.cs-active #cs-length-help{font-size:12px;line-height:1.5;color:var(--cs-muted);margin:12px 0}#main.cs-active #cs-length-error{font-size:12px;color:#b22f35;margin:0 0 8px}#main.cs-active #cs-length-error:empty{display:none} #main.cs-active .cs-length-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}#main.cs-active .cs-length-presets button{border:1px solid #dde1e0;background:white;border-radius:12px;padding:10px 5px;min-height:42px;font-size:13px;font-weight:500}#main.cs-active .cs-length-presets button[aria-pressed=true]{background:#ecf6f3;border-color:var(--cs-accent);color:var(--cs-accent);box-shadow:inset 0 0 0 1px var(--cs-accent)} #main.cs-active .cs-length-all{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;margin:14px 0 0;font-weight:450;color:var(--cs-muted)}#main.cs-active .cs-length-all select{height:40px;min-width:110px;border:1px solid #dce1df;border-radius:11px;padding:7px 28px 7px 12px;background:#fff;font-size:13px;color:var(--cs-ink)} #main.cs-active .pzcf-config-fields{display:grid;grid-template-columns:1fr;gap:22px;margin:0;padding:0}#main.cs-active .pzcf-fieldset{border:0;padding:0;margin:0;background:none;min-width:0}#main.cs-active .pzcf-fieldset legend{float:none;margin:0 0 12px;padding:0;font-size:14px;font-weight:600;color:var(--cs-ink)}#main.cs-active .pzcf-series-row{display:flex;gap:8px}#main.cs-active .pzcf-series-row button{flex:1;min-height:44px;border:1px solid #dce1df;border-radius:13px;background:#fff;font-size:13px;padding:8px}#main.cs-active .pzcf-series-row .is-selected{color:var(--cs-accent);border-color:var(--cs-accent);background:#ecf6f3;box-shadow:inset 0 0 0 1px var(--cs-accent)} #main.cs-active .pzcf-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between}#main.cs-active .pzcf-toggle>span{display:grid;gap:5px}#main.cs-active .pzcf-toggle strong{font-size:13px;font-weight:550}#main.cs-active .pzcf-toggle small{font-size:11px;line-height:1.4;color:var(--cs-muted)}#main.cs-active .pzcf-switch{position:relative;flex:none;width:46px;height:28px;min-height:28px;padding:0;border:0;border-radius:999px;background:#c5cdca;box-shadow:none}#main.cs-active .pzcf-switch::after{content:''!important;display:block!important;position:absolute;top:3px;left:3px;width:22px;height:22px;background:white;border-radius:50%;transform:none;transition:transform .2s;box-shadow:0 1px 4px #0002}#main.cs-active .pzcf-switch.is-selected{background:var(--cs-accent)}#main.cs-active .pzcf-switch.is-selected::after{transform:translateX(18px)} #main.cs-active .cs-dock{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 20px;border:1px solid #fff;border-radius:22px;background:#ffffffdd;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} #main.cs-active .cs-dock-summary{display:grid;gap:4px;min-width:0}#main.cs-active .cs-dock-summary strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#main.cs-active .cs-dock-summary>span{font-size:11px;color:#6e6e73} #main.cs-active .pzcf-question__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;position:static;inset:auto;padding:0!important;margin:0!important;background:none;border:0;flex-shrink:0;box-shadow:none} #main.cs-active .pzcf-button,#main.cs-active .cs-primary,#main.cs-active .cs-dialog footer button,#main.cs-active .cs-review button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px!important;border-radius:999px!important;min-height:44px;line-height:1.3;font-size:14px!important;font-weight:550;text-decoration:none!important;border:1px solid #d9dedc;background:white;color:#343c39;white-space:normal;box-shadow:none} #main.cs-active .pzcf-button--primary,#main.cs-active .cs-primary{background:var(--cs-accent)!important;border-color:var(--cs-accent)!important;color:white!important}#main.cs-active .pzcf-button--primary:hover,#main.cs-active .cs-primary:hover{background:#00685e!important}#main.cs-active [data-pzcf-next]:disabled{background:#e6e8e8!important;border-color:#e6e8e8!important;color:#8c9491!important;opacity:1} #main.cs-active .cs-credits{display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:12px;font-size:9px;line-height:1.3;color:#8a8c91;padding:0 6px}#main.cs-active .cs-credits img{max-height:12px;max-width:65px;width:auto;object-fit:contain} #main.cs-active .cs-review{flex:1;padding:30px 26px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:0;overflow:auto}#main.cs-active .cs-review-mark{width:50px;height:50px;border-radius:50%;background:#e4f2ed;color:var(--cs-accent);display:grid;place-items:center;margin-bottom:15px}#main.cs-active .cs-review h3{font-size:27px;margin:0 0 8px}#main.cs-active .cs-review>p{font-size:13px;line-height:1.5;color:var(--cs-muted);margin:0 0 22px}#main.cs-active .cs-review .cs-review-note{margin:20px 0 0;font-size:12px;max-width:300px} #main.cs-active .cs-dialog{width:min(1080px,calc(100vw - 48px));max-height:calc(100dvh - 48px);height:auto;margin:auto;padding:0;border:1px solid #fff;border-radius:26px;background:#fafafcfc;color:var(--cs-ink);box-shadow:0 25px 100px #20202520;overflow:hidden;flex-direction:column;font:inherit}#main.cs-active .cs-dialog[open]{display:flex}#main.cs-active .cs-dialog::backdrop{background:#272e354a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#main.cs-active .cs-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;border-bottom:1px solid #e3e5e7;flex-shrink:0}#main.cs-active .cs-dialog header small{font-size:11px;color:var(--cs-accent)}#main.cs-active .cs-dialog header h2{font-size:28px;line-height:1.2;margin:4px 0 0}#main.cs-active .cs-dialog header button{display:grid;place-items:center;flex:none;width:42px;height:42px;border:0;border-radius:50%;background:transparent;padding:10px}#main.cs-active .cs-dialog header button>span{display:none}#main.cs-active .cs-dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 28px;scrollbar-width:thin}#main.cs-active .cs-dialog>footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 28px;border-top:1px solid #e3e5e7;flex-shrink:0} #main.cs-active .pzcf-result{display:block;padding:0!important;overflow:visible;min-height:0}#main.cs-active .pzcf-result__hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}#main.cs-active .pzcf-result__hero h3{font-size:26px;line-height:1.18;margin:8px 0 12px;overflow-wrap:anywhere}#main.cs-active .pzcf-result__label{display:block;color:var(--cs-accent);font-size:12px;font-weight:550}#main.cs-active .pzcf-result__sku{font-size:12px;color:#5b6c66;overflow-wrap:anywhere}#main.cs-active .pzcf-result__hero p{font-size:13px;line-height:1.55;color:#707379;margin:12px 0}#main.cs-active .pzcf-result__media{display:grid;place-items:center;width:100%;height:230px;border:0;border-radius:20px;background:white;padding:15px}#main.cs-active .pzcf-result__media img{width:100%;height:100%;object-fit:contain;filter:none;max-height:200px;mix-blend-mode:multiply} #main.cs-active .pzcf-result__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;padding:0;background:none;border:0}#main.cs-active .pzcf-result__facts small{font-size:10px;color:#737b78;display:block;margin-bottom:5px}#main.cs-active .pzcf-result__facts strong{font-size:12px;line-height:1.4;color:#34403a;display:block;overflow-wrap:anywhere} #main.cs-active .pzcf-result__section{margin:26px 0 12px;background:none;border:0;padding:0}#main.cs-active .pzcf-result__bom-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 14px}#main.cs-active .pzcf-result__bom-head span,#main.cs-active .pzcf-result__bom-head p{font-size:11px;color:#6e6e73;margin:3px 0}#main.cs-active .pzcf-result__bom-head h4{font-size:20px;letter-spacing:-.3px;margin:4px 0;font-weight:600}#main.cs-active .pzcf-result__bom-count{font-size:12px;color:#6e6e73;background:none;padding:0;display:flex;align-items:center;gap:8px}#main.cs-active .pzcf-result__bom-count b{font-size:20px;font-weight:500}#main.cs-active .pzcf-result__bom-count small{font-size:10px} #main.cs-active .pzcf-bom{display:grid;gap:0;border:1px solid #dfe3e2;border-radius:18px;overflow:hidden;background:white}#main.cs-active .pzcf-bom__item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:4px 16px;padding:16px;align-items:center;border:0;border-bottom:1px solid #e7e9e8;background:white;border-radius:0}#main.cs-active .pzcf-bom__item:last-child{border-bottom:0}#main.cs-active .pzcf-bom__image{grid-row:1/3;grid-column:1;width:64px;height:64px;background:white}#main.cs-active .pzcf-bom__image img{width:100%;height:100%;object-fit:contain}#main.cs-active .pzcf-bom__sku{grid-column:2;grid-row:1;font-size:12px;color:#658078}#main.cs-active .pzcf-bom__copy{grid-column:2;grid-row:2;min-width:0}#main.cs-active .pzcf-bom__copy strong{font-size:13px;font-weight:550;overflow-wrap:anywhere}#main.cs-active .pzcf-bom__copy p{font-size:11px;color:#727b77;margin:5px 0 0}#main.cs-active .pzcf-bom__qty{grid-column:3;grid-row:1/3;max-width:125px;font-size:12px;font-weight:550;background:none;padding:0;text-align:right;white-space:normal} #main.cs-active .pzcf-result__note{font-size:12px;line-height:1.6;color:#747777;background:none;border:0;padding:0;margin:16px 0}#main.cs-active .pzcf-result__actions{display:block;padding:0;margin:14px 0;background:none;border:0}#main.cs-active .pzcf-result__actions [data-pzcf-enquiry]{display:none!important}#main.cs-active .pzcf-result__source{font-size:12px;color:var(--cs-accent);text-decoration:none} #main.cs-active .cs-catalogue{border-top:1px solid #dfe3e1;padding-top:18px;margin-top:20px}#main.cs-active .cs-catalogue>summary{cursor:pointer;font-size:14px;font-weight:550;min-height:40px;color:var(--cs-accent)} #main.cs-active .pzcf-catalog{padding:15px 0;background:none;border:0}#main.cs-active .pzcf-catalog h4{font-size:22px;line-height:1.2}#main.cs-active .pzcf-catalog p{font-size:12px;line-height:1.5}#main.cs-active .pzcf-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#main.cs-active .pzcf-catalog__filters{flex-wrap:wrap}#main.cs-active .pzcf-product-family{min-width:0}#main.cs-active .pzcf-product-family__image img{object-fit:contain} #main.cs-active .cs-toast{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 20px;background:#293b35;color:white;box-shadow:0 8px 30px #0002;border-radius:15px;font-size:13px;z-index:5} @media(min-width:1700px){#main.cs-active .cs-main{grid-template-columns:minmax(0,1fr) minmax(500px,38%)}#main.cs-active .pzcf-options--connectors .pzcf-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1100px){#main.cs-active .pzcf-app{padding:14px 16px 5px;gap:12px}#main.cs-active .cs-main{grid-template-columns:minmax(0,1fr) minmax(350px,48%);gap:14px}#main.cs-active .pzcf-stage{padding:20px}#main.cs-active .pzcf-options--applications{grid-template-columns:1fr}#main.cs-active .pzcf-option{min-height:88px}#main.cs-active .pzcf-end{padding:16px 4px}#main.cs-active .pzcf-end__role{left:0}#main.cs-active .cs-preview-head h2{font-size:27px}#main.cs-active .cs-start{padding:14px 18px 0;gap:8px}#main.cs-active .pzcf-question__head{padding:18px}#main.cs-active .pzcf-options{padding:14px 16px 22px!important}#main.cs-active .pzcf-stage__connection{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}#main.cs-active .cs-preview-help{font-size:10px}} @media(max-width:800px) and (min-width:701px){#main.cs-active .cs-main{grid-template-columns:minmax(0,1fr) minmax(330px,52%)}#main.cs-active .pzcf-stage{padding:18px 12px}#main.cs-active .cs-preview-head h2{font-size:23px}#main.cs-active .pzcf-end strong{font-size:13px}#main.cs-active .pzcf-stage__meta{grid-template-columns:1fr 1fr;padding:10px}#main.cs-active .pzcf-stage__meta>span:first-child{grid-column:1/-1}#main.cs-active .cs-nav strong{font-size:12px}#main.cs-active .cs-nav button{gap:6px}} @media(max-width:700px){ #main.pzcf.cs-active{inset:64px 0 0}#main.cs-active .pzcf-app{padding:10px 10px 4px;gap:9px}#main.cs-active h1{font-size:21px;letter-spacing:-.5px}#main.cs-active .cs-heading small{font-size:10px}#main.cs-active .cs-tools,#main.cs-active .pzcf-history{gap:0}#main.cs-active .cs-tools button{width:34px;height:38px;min-height:38px;padding:7px;border-radius:10px}#main.cs-active .cs-tools svg{width:20px;height:20px} #main.cs-active .cs-nav{border-radius:13px}#main.cs-active .cs-nav button{min-height:46px;padding:7px 2px;gap:4px;flex-direction:column}#main.cs-active .cs-nav button>span{display:none}#main.cs-active .cs-nav strong{font-size:11px;white-space:normal;line-height:1.25} #main.cs-active .cs-main{display:flex;flex-direction:column;gap:9px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}#main.cs-active .pzcf-stage{flex:none;height:215px!important;min-height:215px!important;border-radius:20px;padding:12px 16px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;gap:6px;overflow:hidden} #main.cs-active .cs-preview-head,#main.cs-active .pzcf-stage__status,#main.cs-active .cs-preview-help,#main.cs-active .cs-outcome{display:none!important}#main.cs-active .pzcf-stage__connection{min-height:0;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:5px;padding:0}#main.cs-active .pzcf-end{padding:0 4px;gap:3px;border-radius:12px}#main.cs-active .pzcf-end__role{width:20px;height:20px;left:0;top:0;font-size:10px}#main.cs-active .pzcf-end__image{height:80px;width:100%;max-width:140px}#main.cs-active .pzcf-end__image.is-placeholder::before{width:46px;height:46px;font-size:25px}#main.cs-active .pzcf-end>div:last-child{max-width:none}#main.cs-active .pzcf-end small{display:none}#main.cs-active .pzcf-end strong{font-size:12px;line-height:1.25;min-height:30px}#main.cs-active .pzcf-line{margin-bottom:25px;height:3px}#main.cs-active .pzcf-stage__meta{display:grid;grid-template-columns:1.3fr .7fr .8fr;padding:7px 10px;border-radius:12px;gap:5px}#main.cs-active .pzcf-stage__meta>span{padding:0}#main.cs-active .pzcf-stage__meta small{font-size:8px}#main.cs-active .pzcf-stage__meta strong{font-size:10px;margin-top:2px} #main.cs-active .pzcf-question{height:auto;min-height:0;flex:none;overflow:visible;border-radius:20px;backdrop-filter:none;-webkit-backdrop-filter:none;background:#ffffffd4}#main.cs-active .cs-start{padding:12px 14px 0}#main.cs-active .pzcf-mode{max-width:none}#main.cs-active .pzcf-mode button{font-size:11px;min-height:30px}#main.cs-active .pzcf-question__head{padding:16px 16px 12px}#main.cs-active [data-pzcf-question-title]{font-size:25px;margin:6px 0 8px}#main.cs-active [data-pzcf-question-copy]{font-size:12px}#main.cs-active .pzcf-options{overflow:visible;flex:none;padding:12px 14px 20px!important}#main.cs-active .pzcf-options--applications{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#main.cs-active .pzcf-option{min-height:106px;padding:12px 20px 12px 10px!important;flex-direction:column;align-items:flex-start;gap:9px;border-radius:14px}#main.cs-active .pzcf-option__visual{width:32px;height:32px;border-radius:9px}#main.cs-active .pzcf-option__visual svg{width:22px;height:22px}#main.cs-active .pzcf-option__copy strong{font-size:12px}#main.cs-active .pzcf-option__copy em{font-size:9px}#main.cs-active .pzcf-options--connectors .pzcf-option{flex-direction:row;align-items:center;min-height:86px;gap:12px;padding:12px 28px 12px 12px!important}#main.cs-active .pzcf-options--connectors .pzcf-option__copy strong{font-size:14px}#main.cs-active .pzcf-options--connectors .pzcf-option__visual{width:60px;height:58px;flex-shrink:0} #main.cs-active .cs-dock{padding:10px 12px;border-radius:18px;gap:10px}#main.cs-active .cs-dock-summary{max-width:120px;gap:3px}#main.cs-active .cs-dock-summary strong{font-size:12px}#main.cs-active .cs-dock-summary span{font-size:10px}#main.cs-active .pzcf-question__actions{gap:7px}#main.cs-active .pzcf-button,#main.cs-active .cs-primary{font-size:12px!important;padding:11px 14px!important;min-height:43px;gap:8px}#main.cs-active .pzcf-button__next-step{display:none}#main.cs-active [data-pzcf-back]{padding:10px!important;font-size:11px!important}#main.cs-active .cs-credits{font-size:7px;gap:6px;padding:0 3px}#main.cs-active .cs-credits img{max-width:40px;max-height:9px}#main.cs-active .cs-review{padding:22px;min-height:260px;overflow:visible}#main.cs-active .cs-review h3{font-size:25px} #main.cs-active .cs-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:22px}#main.cs-active .cs-dialog>header{padding:16px 18px;gap:10px}#main.cs-active .cs-dialog header h2{font-size:23px}#main.cs-active .cs-dialog header small{font-size:10px}#main.cs-active .cs-dialog-body{padding:20px 18px}#main.cs-active .cs-dialog footer{padding:12px;gap:8px}#main.cs-active .cs-dialog footer button{padding:10px 12px!important;font-size:11px!important;min-height:43px}#main.cs-active .cs-dialog footer button svg{display:none}#main.cs-active .pzcf-result__hero{grid-template-columns:1fr;gap:15px}#main.cs-active .pzcf-result__media{grid-row:1;height:180px}#main.cs-active .pzcf-result__media img{max-height:150px}#main.cs-active .pzcf-result__hero h3{font-size:23px}#main.cs-active .pzcf-result__facts{grid-template-columns:1fr 1fr;gap:12px}#main.cs-active .pzcf-result__facts>span:first-child{grid-column:1/-1}#main.cs-active .pzcf-result__bom-count{display:none}#main.cs-active .pzcf-bom__item{grid-template-columns:44px minmax(0,1fr);padding:12px;gap:5px 10px}#main.cs-active .pzcf-bom__image{width:44px;height:50px}#main.cs-active .pzcf-bom__qty{grid-column:2;grid-row:3;text-align:left;max-width:none;color:var(--cs-accent)}#main.cs-active .pzcf-product-grid{grid-template-columns:1fr}#main.cs-active .pzcf-catalog__filters{display:flex;flex-wrap:wrap;gap:8px}#main.cs-active .pzcf-catalog__filters label{flex-basis:100%;min-width:0}#main.cs-active .pzcf-catalog__filters input{max-width:100%}#main.cs-active .pzcf-result__comparison{overflow:auto} } @media(max-width:350px){#main.cs-active h1{font-size:18px}#main.cs-active .cs-tools button{width:30px;padding:5px}#main.cs-active .cs-dock-summary{max-width:84px}#main.cs-active .cs-dock-summary strong{font-size:11px}#main.cs-active .cs-dock{padding:9px}#main.cs-active .pzcf-button,#main.cs-active .cs-primary{padding:10px 11px!important;font-size:11px!important}#main.cs-active .cs-nav strong{font-size:10px}} @media(max-height:650px) and (min-width:701px){#main.cs-active .pzcf-app{padding:8px 14px 4px;gap:8px}#main.cs-active h1{font-size:22px}#main.cs-active .cs-heading small{display:none}#main.cs-active .cs-nav button{min-height:44px}#main.cs-active .pzcf-stage{padding:16px}#main.cs-active .cs-preview-head h2{font-size:23px}#main.cs-active .pzcf-end__image{height:100px}#main.cs-active .cs-preview-help{display:none}#main.cs-active .pzcf-end{gap:5px;padding:8px}#main.cs-active .cs-start{padding-top:10px}#main.cs-active .pzcf-question__head{padding:12px 18px}#main.cs-active [data-pzcf-question-title]{font-size:23px;margin:4px 0}#main.cs-active [data-pzcf-question-copy]{display:none}#main.cs-active .cs-dock{padding:9px 14px}#main.cs-active .pzcf-stage__status{display:none}#main.cs-active .cs-outcome{display:none}} @media(prefers-reduced-motion:reduce){#main.cs-active *,#main.cs-active *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#main.cs-active .pzcf-question,#main.cs-active .cs-dock,#main.cs-active .cs-dialog{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#b8c3bf}} /* Replace inherited legacy display fonts and dark product surfaces within this pilot. */ #main.pzcf.cs-active{--pzcf-display:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--pzcf-body:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--pzcf-mono:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} #main.pzcf.cs-active *,#main.pzcf.cs-active *::before,#main.pzcf.cs-active *::after{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important} #main.cs-active button,#main.cs-active button *,#main.cs-active legend,#main.cs-active .pzcf-result__label,#main.cs-active .pzcf-bom__sku{text-transform:none!important;letter-spacing:normal!important} #main.cs-active .pzcf-stage{color:var(--cs-ink)}#main.cs-active .pzcf-stage::before,#main.cs-active .pzcf-stage::after{display:none!important} #main.cs-active .cs-preview-head h2,#main.cs-active .pzcf-stage__meta strong{color:var(--cs-ink)} #main.cs-active .pzcf-option__visual{position:static;inset:auto;opacity:1}#main.cs-active .pzcf-option__visual::after{display:none}#main.cs-active .pzcf-option__copy{padding-top:0} #main.cs-active .cs-nav li{opacity:1}#main.cs-active .cs-nav button:disabled{opacity:.6} #main.cs-active .pzcf-question__actions .pzcf-button{min-width:0;min-height:44px}#main.cs-active .pzcf-question__actions .pzcf-button--primary{flex:none} #main.cs-active .pzcf-result__section--bom{border:0;border-radius:0;overflow:visible;background:none;box-shadow:none} #main.cs-active .pzcf-result__section--bom .pzcf-result__bom-head{background:none;color:var(--cs-ink);padding:0;margin:0 0 14px;border:0;box-shadow:none} #main.cs-active .pzcf-result__section--bom .pzcf-result__bom-head h4{color:var(--cs-ink);font-size:20px;font-weight:600} #main.cs-active .pzcf-result__section--bom .pzcf-result__bom-head span,#main.cs-active .pzcf-result__section--bom .pzcf-result__bom-head p{color:var(--cs-muted)} #main.cs-active .pzcf-result__facts>span{grid-column:auto;background:none;border:0;padding:0;border-radius:0} #main.cs-active .pzcf-result__source{display:inline-flex;gap:14px;padding:6px 0;background:none;border:0;border-radius:0;box-shadow:none} @media(max-width:700px){#main.cs-active .pzcf-result__facts>span:first-child{grid-column:1/-1}#main.cs-active .cs-dock-summary{flex:1;max-width:none}#main.cs-active .pzcf-question__actions{flex-shrink:0}#main.cs-active .pzcf-question__actions .pzcf-button{min-height:42px}#main.cs-active .pzcf-stage__meta>span:first-child{grid-column:auto}} #main.cs-active .cs-empty{grid-column:1/-1;padding:24px 12px;color:var(--cs-muted);text-align:center} #main.cs-active .pzcf-comparison{border-radius:18px;background:#fff;border:1px solid var(--cs-border);padding:18px;color:var(--cs-ink)} #main.pzcf.cs-active .pzcf-button,#main.pzcf.cs-active .pzcf-button *,#main.pzcf.cs-active .cs-primary,#main.pzcf.cs-active input,#main.pzcf.cs-active select{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;text-transform:none!important;letter-spacing:normal!important} /* The site button contract uses an important cascade layer; scope its override here too. */ @layer poz-button-contract{ #main.cs-active .pzcf-button{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;font-size:14px!important;font-weight:600!important;letter-spacing:normal!important;text-transform:none!important;border-radius:999px!important;transform:none!important;padding:12px 22px!important} #main.cs-active .pzcf-button::after{display:none!important} @media(max-width:700px){#main.cs-active .pzcf-button{font-size:12px!important;padding:11px 14px!important}} } /* Let the connection shrink with the viewport; captions and summary never overlap. */ #main.cs-active .pzcf-question__actions{min-height:0!important} @media(min-width:701px){ #main.cs-active .cs-preview-head,#main.cs-active .pzcf-stage__meta,#main.cs-active .cs-preview-help{flex-shrink:0} #main.cs-active .pzcf-stage__status{display:none} #main.cs-active .pzcf-stage__connection{align-items:stretch} #main.cs-active .pzcf-end{height:100%;min-height:0;padding:12px 8px;overflow:hidden} #main.cs-active .pzcf-end__image{flex:1;min-height:0;height:100%;max-height:270px} #main.cs-active .pzcf-end>div:last-child{flex-shrink:0} #main.cs-active .pzcf-end strong{font-size:16px} } #main.cs-active [data-pzcf-question-title]:focus{outline:none!important} #main.cs-active .pzcf-catalog{background:none;border:0;box-shadow:none;overflow:visible} #main.cs-active .pzcf-catalog__head{min-height:0;padding:18px 0;gap:18px;background:none;color:var(--cs-ink)} #main.cs-active .pzcf-catalog__head h4{color:var(--cs-ink);font-size:25px;margin:4px 0} #main.cs-active .pzcf-catalog__head p{color:var(--cs-muted);font-size:12px;margin:8px 0} #main.cs-active .pzcf-catalog__head>div>span{color:var(--cs-accent);font-size:10px;letter-spacing:0;text-transform:none} #main.cs-active .pzcf-catalog__head>strong{display:none} #main.cs-active .pzcf-catalog__toolbar{position:static;grid-template-columns:1fr;padding:12px 0;background:none;border:0;backdrop-filter:none} #main.cs-active .pzcf-catalog__modes{display:flex;background:#eaecef;padding:4px;border-radius:12px} #main.cs-active .pzcf-catalog__modes button{flex:1;font-size:12px;color:var(--cs-muted);background:transparent;white-space:normal;min-height:40px} #main.cs-active .pzcf-catalog__modes button.is-selected{background:#fff;color:var(--cs-ink);border-radius:9px} #main.cs-active .pzcf-catalog__filters{display:flex;flex-wrap:wrap;gap:6px} #main.cs-active .pzcf-catalog__filters button{font-size:12px;min-height:38px} #main.cs-active .pzcf-catalog__filters label{font-size:11px;letter-spacing:0;text-transform:none} #main.cs-active .pzcf-product-grid{padding:12px 0;gap:12px} #main.cs-active .pzcf-product-family{box-shadow:none;background:#fff;border-color:var(--cs-border)} #main.cs-active .pzcf-product-family:hover{transform:none} #main.cs-active .pzcf-product-family__media{background:white;min-height:150px} #main.cs-active .pzcf-product-family__media::after{display:none} #main.cs-active .pzcf-product-family__media img{filter:none} #main.cs-active .pzcf-product-family__meta span,#main.cs-active .pzcf-product-family__meta b{font-size:10px;letter-spacing:0;text-transform:none} #main.cs-active .pzcf-product-family__variants>div{max-height:none;overflow:visible} @media(max-height:550px) and (min-width:701px){ #main.cs-active .cs-main{overflow:auto;align-items:start;overscroll-behavior:contain} #main.cs-active .pzcf-stage{height:340px!important;min-height:340px!important} #main.cs-active .pzcf-question{height:auto;min-height:340px;overflow:visible} #main.cs-active .pzcf-options{overflow:visible;flex:none} #main.cs-active .pzcf-end__image{height:100%;max-height:160px} #main.cs-active .cs-dock{padding:6px 12px} #main.cs-active .cs-credits{display:none} #main.cs-active .pzcf-app{grid-template-rows:auto auto minmax(0,1fr) auto} } @media(min-width:701px) and (max-height:800px){ #main.cs-active .pzcf-stage{padding:20px} #main.cs-active .cs-preview-head h2{font-size:27px;margin-top:4px} #main.cs-active .cs-preview-help{display:none} #main.cs-active .pzcf-stage__meta{padding:10px 12px} #main.cs-active .pzcf-end{padding:8px 4px;gap:6px} #main.cs-active .pzcf-end small{display:none} #main.cs-active .pzcf-stage__connection{padding:12px 0} #main.cs-active .pzcf-end__image{max-height:220px} } @media(max-height:550px) and (min-width:701px){ #main.cs-active .cs-heading{display:none} #main.cs-active .pzcf-app{grid-template-rows:auto minmax(0,1fr) auto} #main.cs-active .cs-start{padding:8px 12px 0} #main.cs-active .pzcf-question__head{padding:8px 12px} #main.cs-active [data-pzcf-step-label]{display:none} #main.cs-active [data-pzcf-question-title]{font-size:21px} } @media(max-height:550px) and (min-width:701px){ #main.cs-active .cs-heading{display:flex;min-height:28px;height:28px} #main.cs-active .cs-heading h1{font-size:18px;margin:0} #main.cs-active .cs-tools button{width:28px;height:28px;min-height:28px;padding:4px} #main.cs-active .cs-nav button{min-height:38px} #main.cs-active .pzcf-app{grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px} } #main.cs-active .cs-dialog{height:fit-content} #main.cs-active .cs-length>.cs-length-all{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:450;color:var(--cs-muted)} #main.cs-active .cs-length-all select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border-radius:11px;flex:0 0 110px} /* Connection experience: a useful starting point, then a product-led workspace. */ #main.cs-connection{background:#fff} #main.cs-connection .pzcf-app{max-width:1800px;margin-inline:auto!important;padding:16px 30px 6px;gap:12px} #main.cs-connection .cs-heading h1{font-size:22px;font-weight:650;letter-spacing:-.65px} #main.cs-connection .cs-nav{background:transparent;border:0;border-radius:0;border-bottom:1px solid #e7e7eb} #main.cs-connection .cs-nav button{min-height:46px;border-radius:0;background:none!important;box-shadow:none!important;color:#7b7b80} #main.cs-connection .cs-nav button>span{display:none} #main.cs-connection .cs-nav .is-active button{color:var(--cs-ink);box-shadow:inset 0 -2px var(--cs-accent)!important} #main.cs-connection .cs-nav .is-complete button{color:var(--cs-accent)} #main.cs-connection .cs-nav strong{font-weight:550;font-size:13px} #main.cs-connection .cs-main{grid-template-columns:minmax(0,1.12fr) minmax(370px,1fr);gap:clamp(24px,4vw,64px);padding:10px 0;min-height:0} #main.cs-connection .pzcf-stage{border:0;background:#f5f5f7;border-radius:28px;padding:28px;box-shadow:none} #main.cs-connection .cs-preview-head small{font-size:12px;color:#6e6e73} #main.cs-connection .cs-preview-head h2{font-size:clamp(25px,2.5vw,36px);letter-spacing:-1.1px;margin-top:8px} #main.cs-connection .pzcf-stage__connection{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:stretch;gap:4px;grid-auto-flow:row;min-height:0} #main.cs-connection .pzcf-end{grid-column:auto;grid-row:1;gap:10px;justify-content:center;border-radius:20px;padding:14px 10px;min-height:0;max-height:100%;border:1px solid transparent;transition:border-color .2s,background-color .2s} #main.cs-connection .pzcf-end--a{grid-column:1} #main.cs-connection .pzcf-end--b{grid-column:3} #main.cs-connection .pzcf-end.cs-end-active{background:#fff;border-color:#d7e2df} #main.cs-connection .pzcf-end__role{position:static;align-self:center;width:24px;height:24px;flex-shrink:0;border:0;background:#e7e7eb;color:#6e6e73;font-size:11px} #main.cs-connection .cs-end-active .pzcf-end__role{background:#e3f0ed;color:#006b61} #main.cs-connection .pzcf-end__image{height:100%;min-height:0;max-height:260px;flex:1;position:relative} #main.cs-connection .pzcf-end__image img{max-height:100%;max-width:100%;object-fit:contain;transition:opacity .2s} #main.cs-connection .pzcf-end__image.is-placeholder::before{width:62px;height:62px;background:#fff;border:1px solid #d7dedb;color:#788b85;font-size:28px} #main.cs-connection .pzcf-end small{display:block;font-size:10px;margin-bottom:4px;color:#75757a} #main.cs-connection .pzcf-end strong{font-size:15px;line-height:1.3;letter-spacing:-.2px} #main.cs-connection .pzcf-line{grid-column:2;grid-row:1;width:100%;height:2px;margin-bottom:24px;align-self:center;justify-self:center;background:#c5ccca} #main.cs-connection .pzcf-stage__meta{order:2;background:transparent;border:0;border-top:1px solid #e0e1e5;border-radius:0;padding:15px 0 0;gap:14px;grid-template-columns:1.4fr .7fr .7fr} #main.cs-connection .pzcf-stage__meta>span:first-child{grid-column:auto} #main.cs-connection .pzcf-stage__meta small{font-size:10px;color:#74747a} #main.cs-connection .pzcf-stage__meta strong{font-size:12px;margin-top:3px} #main.cs-connection .cs-preview-help{display:none} #main.cs-connection .cs-connection-note{order:3;display:flex;align-items:flex-start;gap:9px;padding-top:16px;color:#6e6e73;flex-shrink:0} #main.cs-connection .cs-connection-note svg{width:16px;height:16px;margin-top:1px;color:var(--cs-accent)} #main.cs-connection .cs-connection-note strong{font-size:11px;font-weight:600;line-height:1.4;color:#45454b} #main.cs-connection .cs-connection-note p{font-size:11px;line-height:1.45;margin:4px 0 0;max-width:370px} #main.cs-connection .pzcf-question{background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-width:0} #main.cs-connection .pzcf-question__head{padding:10px 4px 20px} #main.cs-connection [data-pzcf-step-label]{display:none} #main.cs-connection [data-pzcf-question-title]{font-size:clamp(26px,2.5vw,36px);letter-spacing:-1px;line-height:1.12;margin:0 0 12px} #main.cs-connection [data-pzcf-question-copy]{font-size:13px;line-height:1.55;max-width:440px;color:#6e6e73;margin:0} #main.cs-connection .cs-start{padding:4px 4px 18px;justify-content:flex-start} #main.cs-connection .cs-start>span{display:none} #main.cs-connection .pzcf-mode{border:0;background:#f0f0f3;padding:4px;gap:3px;border-radius:999px} #main.cs-connection .pzcf-mode button{border:0!important;border-radius:999px;min-height:34px;font-size:12px;font-weight:550;padding:7px 18px;color:#6e6e73;background:none} #main.cs-connection .pzcf-mode button.is-active{background:white;color:#1d1d1f;box-shadow:0 1px 5px #00000010} #main.cs-connection .pzcf-options{padding:4px 4px 18px!important;scrollbar-width:thin;scrollbar-color:#d5d5d9 transparent;scroll-padding:6px;min-height:0} #main.cs-connection .pzcf-options--connectors .pzcf-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #main.cs-connection .pzcf-options--connectors .pzcf-option{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 12px 14px!important;min-height:174px;gap:8px;border:1px solid #dedee4;border-radius:18px;background:#fff;justify-content:flex-start} #main.cs-connection .pzcf-options--connectors .pzcf-option:hover{border-color:#a0aaa7;background:#fafcfb} #main.cs-connection .pzcf-options--connectors .pzcf-option.is-selected{border-color:var(--cs-accent);box-shadow:inset 0 0 0 1px var(--cs-accent);background:#f6fbf9} #main.cs-connection .pzcf-options--connectors .pzcf-option__visual{width:100%;height:78px;flex:0 0 78px;background:transparent;border-radius:0;margin:0} #main.cs-connection .pzcf-options--connectors .pzcf-option__visual img{max-width:100%;height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply} #main.cs-connection .pzcf-option__copy{width:100%;min-width:0} #main.cs-connection .pzcf-options--connectors .pzcf-option__copy small{display:none} #main.cs-connection .pzcf-options--connectors .pzcf-option__copy strong{font-size:13px;line-height:1.35;letter-spacing:-.15px} #main.cs-connection .pzcf-options--connectors .pzcf-option__copy em{font-size:10px;font-style:normal;line-height:1.4;color:#6e6e73;margin-top:5px} #main.cs-connection .pzcf-option__check{width:19px;height:19px;top:10px;right:10px;font-size:10px;border-color:#d9dedc} #main.cs-connection .pzcf-choice-search{padding:0 0 16px;margin:0;background:none;border:0;min-height:0;height:auto;gap:7px} #main.cs-connection .pzcf-choice-search>span{font-size:11px;font-weight:500;color:#6e6e73} #main.cs-connection .pzcf-choice-search input{background:#f5f5f7;border:1px solid transparent;border-radius:13px;height:44px;padding:11px 14px;font-size:14px;box-shadow:none} #main.cs-connection .pzcf-choice-search input:focus{background:#fff;border-color:var(--cs-accent)} /* The first choice fills the workspace rather than sitting beside an empty preview. */ #main.cs-connection[data-cs-step=application] .cs-main{display:block;overflow:hidden} #main.cs-connection[data-cs-step=application] .pzcf-stage{display:none} #main.cs-connection[data-cs-step=application] .pzcf-question{height:100%;max-width:1160px;margin:0 auto} #main.cs-connection[data-cs-step=application] .cs-start{justify-content:center;padding:0 0 16px} #main.cs-connection[data-cs-step=application] .pzcf-question__head{text-align:center;padding:0 6px 16px} #main.cs-connection[data-cs-step=application] [data-pzcf-question-copy]{max-width:620px;margin-inline:auto} #main.cs-connection[data-cs-step=application] [data-pzcf-question-title]{font-size:clamp(28px,3.4vw,44px);letter-spacing:-1.4px;margin-bottom:10px} #main.cs-connection .cs-family-bar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 0 18px;padding:0 4px;flex-shrink:0} #main.cs-connection .cs-family-bar button{background:transparent;border:1px solid transparent;border-radius:999px;padding:9px 16px;min-height:38px;font-size:12px;color:#6e6e73;white-space:nowrap} #main.cs-connection .cs-family-bar button[aria-pressed=true]{background:#ededf0;color:#1d1d1f;font-weight:600} #main.cs-connection .cs-family-bar button:hover{color:#1d1d1f;border-color:#dedee4} #main.cs-connection .pzcf-options--applications{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start} #main.cs-connection .pzcf-options--applications .pzcf-option{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:14px;text-align:left;min-height:150px;padding:20px 28px 20px 16px!important;border-radius:20px;background:#f5f5f7;border:1px solid transparent;box-shadow:none} #main.cs-connection .pzcf-options--applications .pzcf-option:hover{background:#ededf0;border-color:#dbdee0} #main.cs-connection .pzcf-options--applications .pzcf-option.is-selected{background:#f1f8f6;border-color:var(--cs-accent);box-shadow:inset 0 0 0 1px var(--cs-accent)} #main.cs-connection .pzcf-options--applications .pzcf-option__visual{width:100px;height:100px;background:none;border-radius:0} #main.cs-connection .pzcf-options--applications .pzcf-option__visual img{position:static;inset:auto;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:none;transform:none} #main.cs-connection .pzcf-options--applications .pzcf-option__copy strong{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.35px} #main.cs-connection .pzcf-options--applications .pzcf-option__copy em{font-size:11px;line-height:1.5;color:#727277;margin-top:7px} #main.cs-connection .cs-dock{background:#fafafa;border:1px solid #ebebee;box-shadow:none;padding:12px 20px;border-radius:20px;min-height:68px} #main.cs-connection .cs-dock-summary strong{font-size:14px;letter-spacing:-.2px} #main.cs-connection .cs-dock-summary span{font-size:11px} #main.cs-connection .cs-credits{opacity:.8} #main.cs-connection .cs-length{padding-bottom:22px;border-bottom:1px solid #e7e7eb} #main.cs-connection .cs-length-entry{background:#f5f5f7;border:1px solid #d8dadb;border-radius:16px;max-width:none;width:100%;padding:8px 16px} #main.cs-connection .cs-length-entry input{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-1px;width:100%;background:transparent;padding:4px 0} #main.cs-connection .cs-length-entry:focus-within{border-color:var(--cs-accent);box-shadow:0 0 0 3px #007a7015} #main.cs-connection .cs-length-presets{grid-template-columns:repeat(4,minmax(0,1fr))} #main.cs-connection .pzcf-config-fields{gap:22px;padding-top:4px} #main.cs-connection .pzcf-toggle{background:#f5f5f7;border-radius:16px;padding:16px} #main.cs-connection .cs-outcome{display:none!important} @media(min-width:701px) and (max-height:800px){ #main.cs-connection .pzcf-app{padding-top:10px;gap:8px} #main.cs-connection .cs-main{padding:4px 0} #main.cs-connection .pzcf-stage{padding:20px} #main.cs-connection .cs-connection-note{display:none} #main.cs-connection .pzcf-question__head{padding-bottom:14px} #main.cs-connection .pzcf-options--applications .pzcf-option{min-height:120px;grid-template-columns:78px 1fr;padding:14px 26px 14px 12px!important} #main.cs-connection .pzcf-options--applications .pzcf-option__visual{width:78px;height:78px} #main.cs-connection[data-cs-step=application] .cs-start{padding-bottom:10px} #main.cs-connection .cs-family-bar{margin-bottom:10px} } @media(max-width:1100px){ #main.cs-connection .pzcf-app{padding-inline:18px} #main.cs-connection .cs-main{gap:24px;grid-template-columns:minmax(0,1fr) minmax(340px,1fr)} #main.cs-connection .pzcf-options--applications{grid-template-columns:repeat(2,minmax(0,1fr))} #main.cs-connection .pzcf-options--applications .pzcf-option{min-height:135px} #main.cs-connection .pzcf-stage{padding:20px} #main.cs-connection .pzcf-stage__connection{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)} #main.cs-connection .pzcf-end{padding:12px 5px} #main.cs-connection .pzcf-end strong{font-size:13px} } @media(max-width:700px){ #main.cs-connection .pzcf-app{padding:10px 14px 5px;gap:7px} #main.cs-connection .cs-heading h1{font-size:18px;letter-spacing:-.55px} #main.cs-connection .cs-tools button{width:30px;min-height:36px;padding:6px} #main.cs-connection .cs-nav button{min-height:40px;padding:8px 2px} #main.cs-connection .cs-nav strong{font-size:10px} #main.cs-connection .cs-main{display:flex;gap:18px;padding:4px 0;overflow:auto} #main.cs-connection .pzcf-stage{display:flex;flex-direction:column;min-height:170px!important;height:170px!important;padding:10px 12px;border-radius:20px;gap:0} #main.cs-connection .pzcf-stage__connection{flex:1;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);padding:0} #main.cs-connection .pzcf-end{padding:4px 6px;gap:3px;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;border-radius:12px;min-height:0;height:100%} #main.cs-connection .pzcf-end__role{position:absolute;left:4px;top:4px;width:18px;height:18px;font-size:9px} #main.cs-connection .pzcf-end__image{height:100%;min-height:0;max-height:76px;width:100%;max-width:none} #main.cs-connection .pzcf-end__image.is-placeholder::before{width:40px;height:40px;font-size:24px} #main.cs-connection .pzcf-end small{display:none} #main.cs-connection .pzcf-end strong{font-size:11px;min-height:28px;display:block} #main.cs-connection .pzcf-stage__meta{padding:7px 0 0;margin-top:7px;gap:8px;flex:none} #main.cs-connection .pzcf-stage__meta strong{font-size:10px;margin-top:2px} #main.cs-connection .pzcf-stage__meta small{font-size:8px} #main.cs-connection .cs-connection-note{display:none} #main.cs-connection .pzcf-question{overflow:visible;height:auto;min-height:0} #main.cs-connection .pzcf-question__head{padding:0 3px 14px} #main.cs-connection [data-pzcf-question-title]{font-size:28px;letter-spacing:-.8px;margin-bottom:8px} #main.cs-connection [data-pzcf-question-copy]{font-size:12px;line-height:1.5} #main.cs-connection .pzcf-options{padding:4px 3px 18px!important;overflow:visible;flex:none} #main.cs-connection .cs-start{padding:0 3px 14px} #main.cs-connection .pzcf-mode button{min-height:34px;padding-inline:18px;font-size:12px} #main.cs-connection[data-cs-step=application] .cs-main{overflow:auto;display:block} #main.cs-connection[data-cs-step=application] .pzcf-question{height:auto} #main.cs-connection[data-cs-step=application] .pzcf-question__head{text-align:left;padding:0 3px 14px} #main.cs-connection[data-cs-step=application] [data-pzcf-question-title]{font-size:32px;letter-spacing:-1px} #main.cs-connection[data-cs-step=application] .cs-start{justify-content:flex-start;padding:0 3px 18px} #main.cs-connection .cs-family-bar{justify-content:flex-start;gap:3px;margin-bottom:14px;padding:0} #main.cs-connection .cs-family-bar button{font-size:11px;min-height:36px;padding:8px 10px} #main.cs-connection .pzcf-options--applications{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} #main.cs-connection .pzcf-options--applications .pzcf-option{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:180px;padding:12px!important;gap:6px;border-radius:16px} #main.cs-connection .pzcf-options--applications .pzcf-option__visual{width:100%;height:82px;flex:none} #main.cs-connection .pzcf-options--applications .pzcf-option__copy strong{font-size:14px;line-height:1.25} #main.cs-connection .pzcf-options--applications .pzcf-option__copy em{font-size:10px;line-height:1.4;margin-top:6px} #main.cs-connection .pzcf-options--connectors .pzcf-option{min-height:164px;padding:16px 10px 12px!important} #main.cs-connection .pzcf-options--connectors .pzcf-option__copy strong{font-size:12px} #main.cs-connection .pzcf-options--connectors .pzcf-option__visual{height:70px;flex-basis:70px} #main.cs-connection .cs-dock{min-height:62px;padding:9px 12px;border-radius:17px;gap:8px} #main.cs-connection .cs-dock-summary strong{font-size:11px} #main.cs-connection .cs-dock-summary span{font-size:9px} #main.cs-connection .cs-length-entry input{font-size:30px} } @media(min-width:701px) and (max-height:550px){ #main.cs-connection .cs-main{overflow:auto;align-items:start} #main.cs-connection .pzcf-stage{height:330px!important;min-height:330px!important} #main.cs-connection .pzcf-question{height:auto;min-height:330px} #main.cs-connection .pzcf-options{overflow:visible;flex:none} #main.cs-connection[data-cs-step=application] .cs-main{overflow:auto} #main.cs-connection[data-cs-step=application] .pzcf-question{height:auto;min-height:0} #main.cs-connection .cs-family-bar button{min-height:32px;padding-block:6px} #main.cs-connection .cs-dock{min-height:50px;padding-block:5px} #main.cs-connection .cs-heading h1{font-size:17px} } /* Constrain intrinsic image sizes: site-wide image rules must not crop products. */ #main.pzcf.cs-active.cs-connection{background:#fff} #main.cs-connection .pzcf-work::before,#main.cs-connection .pzcf-work::after{display:none!important} #main.cs-connection .pzcf-question__head{border:0} #main.cs-connection .pzcf-options{margin:0} #main.cs-connection .pzcf-option__visual{display:block;overflow:hidden} #main.cs-connection .pzcf-option__visual img{height:100%!important;max-height:100%!important;min-height:0!important;min-width:0;max-width:100%;width:100%;object-fit:contain!important;opacity:1} #main.cs-connection .pzcf-choice-search>span{display:block} @media(max-width:700px){ #main.cs-connection .pzcf-options--applications .pzcf-option{min-height:152px} #main.cs-connection .pzcf-options--applications .pzcf-option__visual{height:66px} #main.cs-connection .cs-family-bar{margin-bottom:8px} #main.cs-connection[data-cs-step=application] .cs-start{padding-bottom:14px} } #main.cs-connection .pzcf-result__facts small,#main.cs-connection .pzcf-result__bom-head span{font-size:11px;letter-spacing:0;text-transform:none;font-weight:450;color:#6e6e73} #main.cs-connection .pzcf-result__hero>div>p{font-size:14px;line-height:1.55} #main.cs-connection .pzcf-result__label{background:#eaf4f1;border:0;padding:6px 10px;border-radius:999px;display:inline-block;font-size:11px;font-weight:550} #main.cs-connection .pzcf-result__media{background:#f5f5f7;border-radius:20px} #main.cs-connection .pzcf-result__media::before,#main.cs-connection .pzcf-result__media::after{display:none!important} #main.cs-connection .pzcf-result__media img{mix-blend-mode:multiply} #main.cs-connection .cs-dialog>header{background:transparent} #main.cs-connection .cs-dialog-body{scrollbar-width:thin} .cs-active .cs-helper-link{appearance:none;border:0;background:none;color:#087c76;font:inherit;font-size:13px;line-height:1.5;text-align:left;padding:10px 0;min-height:44px;cursor:pointer;text-decoration:none;display:block}.cs-active .cs-helper-link:hover{text-decoration:underline;text-underline-offset:4px}.cs-active .cs-helper-link:focus-visible{outline:2px solid #087c76;outline-offset:4px;border-radius:6px}.cs-active .cs-length-all{width:100%;text-align:left;padding:15px 18px;border:1px solid #d9dfdf;border-radius:16px;background:#fff;color:#087c76;font:inherit;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;cursor:pointer}.cs-active .cs-length-all::after{content:'+';font-size:22px;font-weight:400}.cs-active .cs-help-dialog{box-sizing:border-box;width:min(780px,calc(100vw - 40px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid #fff9;border-radius:28px;background:rgba(252,253,253,.96);color:#1d2528;box-shadow:0 24px 90px #172c3430;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);font-family:inherit;overflow:hidden}.cs-active .cs-help-dialog[open]{display:flex;flex-direction:column}.cs-help-dialog::backdrop{background:#172c3438;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.cs-active .cs-help-dialog header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:26px 28px 20px;flex:none}.cs-active .cs-help-dialog header small{font-size:12px;color:#6e7679;display:block;margin-bottom:8px}.cs-active .cs-help-dialog h2{font-family:inherit;font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.035em;margin:0;color:#1d2528}.cs-active .cs-help-dialog header button{width:44px;height:44px;border-radius:50%;border:0;background:#edf0ef;display:grid;place-items:center;flex-shrink:0;color:#46504f}.cs-active .cs-help-dialog header button span{display:none}.cs-active .cs-help-dialog svg{width:22px;height:22px}.cs-active .cs-help-body{padding:0 28px 24px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.cs-active .cs-help-body>p{font-size:15px;line-height:1.55;color:#6e7679;margin:0 0 22px}.cs-active .cs-help-dialog footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;border-top:1px solid #e2e6e5;flex:none;background:#fff9}.cs-active .cs-help-dialog footer p{font-size:12px;color:#6e7679;margin:0}.cs-active .cs-help-dialog footer button{display:flex;gap:8px;align-items:center;justify-content:center;background:#087c76;color:white;border:0;border-radius:24px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;padding:13px 22px;min-height:44px;cursor:pointer}.cs-active .cs-help-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cs-active .cs-help-option{display:flex;align-items:center;gap:12px;position:relative;min-width:0;min-height:100px;border:1px solid #d8dedd;background:white;border-radius:18px;padding:16px 28px 16px 14px;text-align:left;color:inherit;font:inherit;cursor:pointer}.cs-active .cs-help-option img{width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply;flex-shrink:0}.cs-active .cs-help-option strong{font-size:14px;font-weight:600;display:block;line-height:1.35}.cs-active .cs-help-option small{display:block;font-size:12px;color:#6e7679;line-height:1.4;margin-top:5px}.cs-active .cs-help-option i{position:absolute;top:10px;right:10px;color:#087c76;opacity:0;font-style:normal}.cs-active .cs-help-option[aria-pressed=true] i{opacity:1}.cs-active .cs-help-option[aria-pressed=true],.cs-active .cs-help-lengths button[aria-pressed=true],.cs-active .cs-help-series button[aria-pressed=true]{border-color:#087c76;box-shadow:inset 0 0 0 1px #087c76;background:#f4faf9}.cs-active .cs-help-lengths{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:20px}.cs-active .cs-help-lengths button{min-height:48px;border:1px solid #d8dedd;background:#fff;border-radius:12px;color:inherit;font:inherit;font-size:14px;cursor:pointer}.cs-active .cs-help-series{display:flex;flex-wrap:wrap;gap:12px}.cs-active .cs-help-series button{flex:1;min-width:100px;text-align:left;border:1px solid #d8dedd;border-radius:16px;padding:18px;background:#fff;color:inherit;cursor:pointer;font:inherit}.cs-active .cs-help-series strong{display:block;font-size:16px;font-weight:600}.cs-active .cs-help-series span{display:block;font-size:13px;line-height:1.5;color:#6e7679;margin-top:8px}.cs-active .cs-inline-length{margin:0;padding:0;background:transparent;border:0}.cs-active .cs-inline-length label{display:block;font-size:14px;font-weight:600;margin-bottom:10px}.cs-active .cs-inline-length .cs-length-entry{max-width:240px}.cs-active .cs-inline-length [role=status]{color:#b23b3b;font-size:13px;margin:8px 0}.cs-active .cs-review-edit{border:1px solid #e1e5e4;background:#f7f9f8;border-radius:18px;margin:0 0 24px;padding:0;overflow:clip}.cs-active .cs-review-edit summary{display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;padding:18px 20px;font-size:15px;font-weight:600;min-height:56px;list-style:none}.cs-active .cs-review-edit summary::-webkit-details-marker{display:none}.cs-active .cs-review-edit summary span{font-size:22px;font-weight:400;transition:rotate .2s}.cs-active .cs-review-edit[open] summary span{rotate:45deg}.cs-active .cs-review-fields{padding:0 20px 20px;display:grid;gap:22px}.cs-active .cs-review-fields fieldset{padding:0;margin:0;border:0;min-width:0}.cs-active .cs-review-fields legend{font-size:14px;font-weight:600;margin-bottom:12px}.cs-active .cs-help-dialog button:focus-visible,.cs-active .cs-review-edit button:focus-visible,.cs-active .cs-review-edit summary:focus-visible{outline:2px solid #087c76;outline-offset:3px}.cs-active .cs-help-dialog button,.cs-active .cs-review-edit button{transition:background .16s,border-color .16s,box-shadow .16s}.cs-active .cs-length-entry input[type=text]{width:100%;min-width:0;appearance:none;border:0;box-shadow:none;background:transparent;color:#1d2528;font-family:inherit;font-size:22px;font-weight:500;line-height:1.3;padding:12px 14px;outline:none}.cs-active .cs-length-entry:focus-within{outline:2px solid #087c76;outline-offset:3px} @media(max-width:600px){.cs-active .cs-help-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:22px}.cs-active .cs-help-dialog header{padding:20px 18px 16px;gap:12px}.cs-active .cs-help-dialog h2{font-size:23px}.cs-active .cs-help-body{padding:0 18px 20px}.cs-active .cs-help-dialog footer{padding:14px 18px}.cs-active .cs-help-options{grid-template-columns:1fr}.cs-active .cs-help-option{min-height:88px}.cs-active .cs-help-lengths{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-active .cs-help-series{gap:8px}.cs-active .cs-help-series button{padding:14px;min-width:86px}.cs-active .cs-review-fields{padding:0 14px 18px}.cs-active .cs-help-dialog footer p{max-width:175px}} @media(prefers-reduced-motion:reduce){.cs-active .cs-help-dialog *,.cs-active .cs-review-edit *{transition:none!important}} [data-pzcf-root].cs-active .cs-help-dialog footer button,[data-pzcf-root].cs-active .cs-help-dialog footer button span,[data-pzcf-root].cs-active .cs-help-dialog footer button svg{color:#fff} [data-pzcf-root].cs-active .cs-help-dialog h2{font-family:inherit;font-weight:600;line-height:1.15} [data-pzcf-root].cs-active .cs-help-dialog footer button{font-family:inherit;font-weight:600;font-size:14px;line-height:1.2} [data-pzcf-root].cs-active .cs-inline-length .cs-length-entry{max-width:240px} #main.cs-active .cs-length-entry input:focus,#main.cs-active .cs-length-entry input:focus-visible{outline:none!important;box-shadow:none!important} #main.cs-active .cs-length-entry:focus-within{outline:none;box-shadow:0 0 0 3px #087c7626;border-color:#087c76} #main.cs-active .cs-inline-length .cs-length-entry{max-width:240px} #main.cs-active .cs-help-dialog footer button,#main.cs-active .cs-help-dialog footer button span,#main.cs-active .cs-help-dialog footer button svg{color:#fff} /* Connection-first product configurator. One canvas and one scrolling surface. */ #main.cs-active.cs-shop{background:#fff;--cs-accent:#007b73;--cs-ink:#202124;--cs-muted:#727578} #main.cs-active.cs-shop .pzcf-app{max-width:1600px;padding:0 40px 5px;gap:0;grid-template-rows:auto minmax(0,1fr) auto auto} #main.cs-active.cs-shop .cs-heading{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;min-height:88px;padding:14px 0;border-bottom:1px solid #e9ebeb;background:#fff} #main.cs-active.cs-shop .cs-heading h1{font-size:19px;font-weight:600;letter-spacing:-.5px;margin:0} #main.cs-active.cs-shop .cs-tools{justify-content:flex-end} #main.cs-active.cs-shop .cs-tools button{width:36px;height:36px;min-height:36px;border-radius:50%;color:#6b7072} #main.cs-active.cs-shop .cs-chapters{display:flex;gap:32px;align-items:center} #main.cs-active.cs-shop .cs-chapters button{position:relative;display:flex;align-items:center;gap:9px;padding:10px 0;min-height:44px;background:none;border:0;color:#7d8283;font-size:13px;white-space:nowrap} #main.cs-active.cs-shop .cs-chapters button span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1px solid #dbe0df;font-size:11px;font-weight:500} #main.cs-active.cs-shop .cs-chapters strong{font-size:13px;font-weight:500} #main.cs-active.cs-shop .cs-chapters [aria-current=step]{color:#007b73} #main.cs-active.cs-shop .cs-chapters [aria-current=step] span{color:white;background:#007b73;border-color:#007b73} #main.cs-active.cs-shop .cs-chapters [data-complete=true] span{border-color:#8dafaa;color:#007b73} #main.cs-active.cs-shop .cs-chapters button:disabled{opacity:.55} #main.cs-active.cs-shop .cs-main{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(360px,.87fr);align-items:start;gap:clamp(36px,5vw,90px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d5dbd9 transparent;padding:36px 14px 40px 0;scroll-padding-top:24px} #main.cs-active.cs-shop .pzcf-question{overflow:visible;height:auto;min-height:0;display:block;padding:0;margin:0;width:100%} #main.cs-active.cs-shop .pzcf-options{overflow:visible;min-height:0;height:auto;max-height:none;flex:none;padding:0 3px 28px!important;overscroll-behavior:auto} #main.cs-active.cs-shop .pzcf-question__head{padding:0 3px 28px;text-align:left} #main.cs-active.cs-shop [data-pzcf-question-title]{font-size:clamp(30px,3.1vw,44px);line-height:1.09;letter-spacing:-1.5px;margin:0 0 14px;font-weight:650} #main.cs-active.cs-shop [data-pzcf-question-copy]{font-size:15px;line-height:1.55;color:#73777a;max-width:440px;margin:0} #main.cs-active.cs-shop .cs-helper-link{font-size:13px;color:#007b73;min-height:36px;padding:8px 0 0;line-height:1.5} #main.cs-active.cs-shop .cs-connection-tabs{display:flex;gap:22px;align-items:center;padding:0 3px 24px} #main.cs-active.cs-shop .cs-connection-tabs button{display:flex;align-items:center;gap:8px;background:none;border:0;color:#7a7e80;font-size:12px;padding:8px 0;min-height:36px} #main.cs-active.cs-shop .cs-connection-tabs span{width:18px;height:18px;border:1px solid #d9dedc;border-radius:50%;font-size:10px;display:grid;place-items:center} #main.cs-active.cs-shop .cs-connection-tabs [aria-current=step]{color:#007b73;font-weight:600} #main.cs-active.cs-shop .cs-connection-tabs [aria-disabled=true]{opacity:.45;cursor:default} #main.cs-active.cs-shop .pzcf-stage{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;height:clamp(380px,calc(100dvh - 300px),620px)!important;min-height:360px!important;padding:22px 0;background:#fff;border:0;border-radius:0;overflow:visible;isolation:isolate;gap:0} #main.cs-active.cs-shop .cs-preview-head{text-align:center;padding:0 24px 12px} #main.cs-active.cs-shop .cs-preview-head small{font-size:11px;letter-spacing:.03em;color:#8b9091} #main.cs-active.cs-shop .cs-preview-head h2{font-size:25px;letter-spacing:-.8px;font-weight:600;margin:7px 0 0} #main.cs-active.cs-shop .pzcf-stage__connection{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:0;padding:12px 0 20px;align-items:center;flex:1;min-height:0} #main.cs-active.cs-shop .pzcf-end{height:100%;max-height:350px;padding:14px 14px 18px;gap:12px;background:#fff;border:1px solid transparent;border-radius:24px;display:flex;align-items:center;justify-content:center;position:relative} #main.cs-active.cs-shop .pzcf-end.cs-end-active{background:#fff;border-color:#bdcdca;box-shadow:0 8px 30px #183c3307} #main.cs-active.cs-shop .pzcf-end:hover:not([aria-disabled=true]){border-color:#9cbcb6;background:#fff} #main.cs-active.cs-shop .pzcf-end__role{position:absolute;top:13px;left:14px;align-self:auto;background:none;color:#9aa3a0;border:0;width:22px;height:22px;font-size:12px} #main.cs-active.cs-shop .cs-end-active .pzcf-end__role{color:#007b73;background:#edf6f4} #main.cs-active.cs-shop .pzcf-end__image{flex:1;width:100%;height:100%;min-height:60px;max-height:235px;max-width:280px;display:grid;place-items:center} #main.cs-active.cs-shop .pzcf-end__image img{padding:0;object-fit:contain;mix-blend-mode:multiply;filter:none} #main.cs-active.cs-shop .pzcf-end small{font-size:11px;color:#858b8a;letter-spacing:0;margin-bottom:5px} #main.cs-active.cs-shop .pzcf-end strong{font-size:16px;line-height:1.3;font-weight:550;letter-spacing:-.3px} #main.cs-active.cs-shop .pzcf-line{height:1px;background:#c7d7d3;align-self:center;opacity:.75;margin:0 0 18px} #main.cs-active.cs-shop .pzcf-line>*{display:none!important} #main.cs-active.cs-shop .pzcf-end__image.is-placeholder::before{background:#fff;border:1px dashed #c6d3d0;width:64px;height:64px;font-size:30px;font-weight:300;color:#8ca49e} #main.cs-active.cs-shop .pzcf-stage__status,#main.cs-active.cs-shop .cs-connection-note,#main.cs-active.cs-shop .cs-preview-help{display:none!important} #main.cs-active.cs-shop .pzcf-stage__meta{display:flex;justify-content:center;gap:0;border:0;padding:0;margin:0;order:2;background:#fff} #main.cs-active.cs-shop .pzcf-stage__meta>span{padding:4px 18px;border-right:1px solid #e4e9e7;min-height:40px;border-radius:0;text-align:center} #main.cs-active.cs-shop .pzcf-stage__meta>span:last-child{border:0} #main.cs-active.cs-shop .pzcf-stage__meta>span:first-child{display:none} #main.cs-active.cs-shop .pzcf-stage__meta small{font-size:10px;letter-spacing:0} #main.cs-active.cs-shop .pzcf-stage__meta strong{font-size:14px;font-weight:550;margin-top:3px;color:#007b73} #main.cs-active.cs-shop .cs-canvas-note{order:3;text-align:center;margin:22px auto 0;max-width:320px;font-size:12px;color:#888e8c;line-height:1.5} #main.cs-active.cs-shop .cs-canvas-note span{display:none} #main.cs-active.cs-shop .cs-canvas-note p{margin:0;font-size:12px;line-height:1.5} #main.cs-active.cs-shop .cs-start{padding:0 3px 26px;display:flex;align-items:flex-start;flex-direction:column;gap:15px;justify-content:flex-start} #main.cs-active.cs-shop .pzcf-mode{background:#f4f6f5;padding:4px;border-radius:14px;display:inline-flex} #main.cs-active.cs-shop .pzcf-mode button{min-height:42px;padding:10px 22px;font-size:13px;border-radius:10px;color:#6c7470} #main.cs-active.cs-shop .pzcf-mode button.is-active{background:#fff;color:#1e2925;box-shadow:0 2px 7px #17362c0a} #main.cs-active.cs-shop .cs-route-hint{font-size:13px;line-height:1.55;max-width:500px;color:#7b8380;margin:0} #main.cs-active.cs-shop[data-cs-step=application] .cs-main{display:block;overflow:auto;padding:36px 10px 40px} #main.cs-active.cs-shop[data-cs-step=application] .pzcf-question{max-width:1140px;height:auto;margin:auto} #main.cs-active.cs-shop[data-cs-step=application] .pzcf-stage{display:none} #main.cs-active.cs-shop[data-cs-step=application] .cs-start{align-items:center;padding:0 0 30px} #main.cs-active.cs-shop[data-cs-step=application] .cs-route-hint{text-align:center;max-width:560px} #main.cs-active.cs-shop[data-cs-step=application] .pzcf-question__head{text-align:center;padding:0 0 28px} #main.cs-active.cs-shop[data-cs-step=application] [data-pzcf-question-title]{font-size:clamp(34px,4vw,52px);letter-spacing:-1.9px} #main.cs-active.cs-shop[data-cs-step=application] [data-pzcf-question-copy]{margin:auto;font-size:17px} #main.cs-active.cs-shop[data-cs-step=application] .cs-helper-link{margin:0 auto} #main.cs-active.cs-shop .cs-family-bar{margin:0 0 24px;gap:6px} #main.cs-active.cs-shop .cs-family-bar button{font-size:12px;min-height:40px;padding:9px 16px;background:#fff;color:#797e7c} #main.cs-active.cs-shop .cs-family-bar button[aria-pressed=true]{background:#eef4f2;color:#007b73} #main.cs-active.cs-shop .pzcf-options--applications{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} #main.cs-active.cs-shop .pzcf-options--applications .pzcf-option{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:258px;padding:24px!important;border:1px solid #e4e8e6;background:#fff;border-radius:24px;overflow:hidden;text-align:left} #main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__visual{height:140px;width:100%;margin:0 0 20px;flex:none;background:#fff} #main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__visual img{padding:4px 16px;transition:scale .3s cubic-bezier(.2,.8,.2,1)} #main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__copy strong{font-size:20px;font-weight:600;letter-spacing:-.6px;line-height:1.2} #main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__copy em{font-size:13px;line-height:1.4;margin-top:7px;color:#7c8280} #main.cs-active.cs-shop .pzcf-option__check{top:16px;right:16px;width:20px;height:20px;border:1px solid #e2e7e5;font-size:11px} #main.cs-active.cs-shop .pzcf-option.is-selected{background:#fff!important;border-color:#007b73!important;box-shadow:inset 0 0 0 1px #007b73!important} #main.cs-active.cs-shop .pzcf-option.is-selected .pzcf-option__check{background:#007b73;color:#fff;border-color:#007b73} #main.cs-active.cs-shop .pzcf-choice-search{margin:0 0 20px;padding:0;background:none} #main.cs-active.cs-shop .pzcf-choice-search>span{font-size:12px;font-weight:500;margin:0 0 9px;color:#737c78} #main.cs-active.cs-shop .pzcf-choice-search input{height:48px;min-height:48px;background:#f5f7f6;border:1px solid transparent;border-radius:14px;padding:12px 16px;font-size:15px} #main.cs-active.cs-shop .pzcf-choice-search input:focus-visible{outline:2px solid #007b7370!important;outline-offset:2px} #main.cs-active.cs-shop .pzcf-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option{min-height:204px;padding:24px 16px 18px!important;border:1px solid #e0e6e3;border-radius:20px;background:#fff;gap:14px;text-align:left;align-items:flex-start} #main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option__visual{height:100px;flex-basis:100px;width:100%} #main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option__copy strong{font-size:14px;line-height:1.35;letter-spacing:-.2px} #main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option__copy em{font-size:11px;color:#919794;margin-top:5px} #main.cs-active.cs-shop .cs-details{gap:32px} #main.cs-active.cs-shop .cs-length{padding:0 0 30px;border-bottom:1px solid #e5eae7} #main.cs-active.cs-shop .cs-length>label{font-size:17px;font-weight:600;margin-bottom:15px} #main.cs-active.cs-shop .cs-length-entry{height:76px;width:100%;max-width:none;background:#fff;border:1px solid #d2dcD7;border-radius:18px;padding:10px 22px;gap:10px} #main.cs-active.cs-shop .cs-length-entry input{font-size:36px;line-height:1.15;font-weight:500;letter-spacing:-1.2px} #main.cs-active.cs-shop #cs-length-help{font-size:13px;line-height:1.5;margin:14px 0 20px;color:#7b837e} #main.cs-active.cs-shop .cs-length-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 14px} #main.cs-active.cs-shop .cs-length-presets button{min-height:46px;background:#fff;border:1px solid #e2e7e4;border-radius:12px;font-size:14px} #main.cs-active.cs-shop .cs-length-presets button[aria-pressed=true]{border-color:#007b73;background:#eff7f4;color:#007b73;box-shadow:inset 0 0 0 1px #007b73} #main.cs-active.cs-shop .cs-length-all{min-height:44px;padding:10px 0;border:0;background:none;color:#007b73;font-size:13px;font-weight:500;border-radius:8px} #main.cs-active.cs-shop .pzcf-config-fields{display:flex;flex-direction:column;gap:32px;padding:0} #main.cs-active.cs-shop .pzcf-fieldset{padding:0;border:0;border-radius:0;background:none;min-width:0} #main.cs-active.cs-shop .pzcf-fieldset legend{font-size:17px;font-weight:600;padding:0;margin:0 0 16px} #main.cs-active.cs-shop .pzcf-series-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #main.cs-active.cs-shop .pzcf-series-row button{min-height:84px;border:1px solid #dde5e1;border-radius:18px;font-size:17px;font-weight:550;background:#fff;color:#444d48} #main.cs-active.cs-shop .pzcf-series-row button[aria-pressed=true]{border-color:#007b73;box-shadow:inset 0 0 0 1px #007b73;background:#f5faf7;color:#007b73} #main.cs-active.cs-shop .pzcf-toggle{padding:0;background:none;border:0;display:block} #main.cs-active.cs-shop .cs-help-series{gap:10px} #main.cs-active.cs-shop .cs-help-series button{padding:18px;border-radius:18px;border-color:#dde5e1;background:#fff} #main.cs-active.cs-shop .cs-help-series button[aria-pressed=true]{border-color:#007b73;box-shadow:inset 0 0 0 1px #007b73;background:#f5faf7} #main.cs-active.cs-shop .cs-help-series strong{font-size:15px;line-height:1.35} #main.cs-active.cs-shop .cs-help-series span{font-size:12px;line-height:1.5;color:#7b837e} #main.cs-active.cs-shop .cs-dock{margin:0;padding:16px 0;min-height:78px;border:0;border-top:1px solid #e4e9e7;border-radius:0;background:#ffffffed;box-shadow:0 -12px 25px #fff8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;gap:24px;align-items:center;justify-content:space-between} #main.cs-active.cs-shop .cs-dock-summary strong{font-size:15px;font-weight:600;letter-spacing:-.2px} #main.cs-active.cs-shop .cs-dock-summary span{font-size:12px;color:#818784;margin-top:4px} #main.cs-active.cs-shop .cs-dock .pzcf-question__actions{gap:12px} #main.cs-active.cs-shop .cs-dock [data-pzcf-next],#main.cs-active.cs-shop .cs-dock .cs-primary{min-height:48px;border-radius:26px;background:#007b73;color:white;border:1px solid #007b73;padding:13px 24px;font-size:14px;font-weight:550;gap:16px;display:flex;align-items:center;justify-content:center} #main.cs-active.cs-shop .cs-dock [data-pzcf-next] span,#main.cs-active.cs-shop .cs-dock .cs-primary svg{color:white} #main.cs-active.cs-shop .cs-dock [data-pzcf-back]{min-height:46px;border:0;background:none;padding:10px 14px;border-radius:24px;font-size:13px;color:#717a75} #main.cs-active.cs-shop .cs-credits{margin:0;padding:3px 0 5px;min-height:18px;justify-content:flex-end;opacity:.65;gap:10px} #main.cs-active.cs-shop .cs-credits img{height:12px;width:auto;max-width:72px;object-fit:contain} #main.cs-active.cs-shop .cs-credits span{font-size:8px} #main.cs-active.cs-shop .cs-review-edit{background:#f7f9f8;border:0;border-radius:18px;margin:0 3px 28px} #main.cs-active.cs-shop .cs-review-edit summary{padding:18px;font-size:14px;font-weight:550;min-height:56px} #main.cs-active.cs-shop .cs-review-fields{padding:0 18px 20px;gap:24px} #main.cs-active.cs-shop .cs-inline-length{border:0;padding:0} #main.cs-active.cs-shop .cs-review-fields .cs-length-entry{max-width:250px;height:64px} #main.cs-active.cs-shop .pzcf-result{display:block;padding:0 3px 30px!important} #main.cs-active.cs-shop .pzcf-result__hero{display:block;padding:0;background:none;border:0;box-shadow:none} #main.cs-active.cs-shop .pzcf-result__media{display:none} #main.cs-active.cs-shop .pzcf-result__hero h3{font-size:27px;line-height:1.2;letter-spacing:-.7px;margin:16px 0 8px} #main.cs-active.cs-shop .pzcf-result__hero>div>p{font-size:14px;line-height:1.55} #main.cs-active.cs-shop .pzcf-result__facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:0;background:none;padding:22px 0;margin:0} #main.cs-active.cs-shop .pzcf-result__facts span:first-child{grid-column:1/-1} #main.cs-active.cs-shop .pzcf-result__facts strong{font-size:14px;line-height:1.4} #main.cs-active.cs-shop .pzcf-result__section{background:#fff;border:1px solid #e1e7e3;border-radius:20px;padding:20px;margin:24px 0} #main.cs-active.cs-shop .pzcf-result__bom-head h4{font-size:20px;letter-spacing:-.6px} #main.cs-active.cs-shop .pzcf-result__bom-head>div>span{font-size:10px} #main.cs-active.cs-shop .pzcf-bom__item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px 12px;padding:18px 0} #main.cs-active.cs-shop .pzcf-bom__image{grid-column:1;grid-row:1/3;width:52px;height:60px;background:#fff} #main.cs-active.cs-shop .pzcf-bom__sku{grid-column:2;grid-row:1;font-size:11px;color:#7b837e;overflow-wrap:anywhere} #main.cs-active.cs-shop .pzcf-bom__copy{grid-column:2;grid-row:2;min-width:0} #main.cs-active.cs-shop .pzcf-bom__copy strong{font-size:13px;line-height:1.4} #main.cs-active.cs-shop .pzcf-bom__copy p{font-size:11px;line-height:1.45} #main.cs-active.cs-shop .pzcf-bom__qty{grid-column:3;grid-row:1/3;font-size:13px;align-self:center;white-space:nowrap} #main.cs-active.cs-shop .cs-catalogue{margin-top:30px;border-top:1px solid #e1e7e3;padding-top:20px} #main.cs-active.cs-shop .cs-catalogue>summary{font-size:14px;font-weight:550;padding:14px 0} #main.cs-active.cs-shop[data-product-preview=true] .pzcf-stage__connection{display:none} #main.cs-active.cs-shop[data-product-preview=true] .cs-canvas-note{display:none} #main.cs-active.cs-shop .cs-outcome:not([hidden]){display:flex!important;flex-direction:column;align-items:center;justify-content:center;order:1;flex:1;min-height:0;background:#fff;border:0;padding:12px 20px 22px;margin:0;text-align:center} #main.cs-active.cs-shop .cs-outcome>img{width:100%;height:100%;min-height:0;max-height:350px;max-width:480px;flex:1;object-fit:contain;mix-blend-mode:multiply} #main.cs-active.cs-shop .cs-outcome>div{margin-top:12px;display:flex;flex-direction:column;gap:4px} #main.cs-active.cs-shop .cs-outcome small{font-size:11px;color:#7b837e} #main.cs-active.cs-shop .cs-outcome strong{font-size:16px;font-weight:600;letter-spacing:-.4px} #main.cs-active.cs-shop .cs-outcome span{display:none} @media(hover:hover){#main.cs-active.cs-shop .pzcf-option:hover{border-color:#aac2ba;background:#fff}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option:hover img{scale:1.035}#main.cs-active.cs-shop .cs-dock [data-pzcf-next]:hover,#main.cs-active.cs-shop .cs-dock .cs-primary:hover{background:#006b64;border-color:#006b64}} @media(max-width:1100px){#main.cs-active.cs-shop .pzcf-app{padding-inline:24px}#main.cs-active.cs-shop .cs-heading{gap:16px;grid-template-columns:1fr auto}#main.cs-active.cs-shop .cs-heading h1{font-size:18px}#main.cs-active.cs-shop .cs-chapters{grid-row:2;grid-column:1/-1;justify-content:center;gap:36px}#main.cs-active.cs-shop .cs-tools{grid-column:2;grid-row:1}#main.cs-active.cs-shop .cs-heading{padding:10px 0 2px;row-gap:0}#main.cs-active.cs-shop .cs-main{grid-template-columns:minmax(0,1fr) minmax(330px,1fr);gap:26px;padding-top:26px}#main.cs-active.cs-shop .pzcf-stage{padding:16px 0;min-height:320px!important}#main.cs-active.cs-shop .pzcf-end{padding:12px 10px;gap:8px}#main.cs-active.cs-shop .pzcf-end strong{font-size:13px}#main.cs-active.cs-shop .pzcf-stage__connection{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option{min-height:230px;padding:20px!important}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__visual{height:120px}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__copy strong{font-size:18px}} @media(max-width:760px){#main.cs-active.cs-shop .pzcf-app{padding:0 16px 3px}#main.cs-active.cs-shop .cs-heading{min-height:0;padding:8px 0 0}#main.cs-active.cs-shop .cs-heading h1{font-size:17px}#main.cs-active.cs-shop .cs-chapters{gap:24px}#main.cs-active.cs-shop .cs-chapters strong{font-size:12px}#main.cs-active.cs-shop .cs-chapters button{gap:7px;min-height:42px}#main.cs-active.cs-shop .cs-chapters span{width:20px;height:20px;font-size:10px}#main.cs-active.cs-shop .cs-main{display:block;overflow:auto;padding:0 3px 22px;scroll-padding-top:150px}#main.cs-active.cs-shop .pzcf-stage{position:sticky;top:0;z-index:3;padding:8px 0 12px;height:144px!important;min-height:144px!important;background:#ffffffed;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #e9eeeb;margin-bottom:24px;border-radius:0;overflow:hidden}#main.cs-active.cs-shop .cs-preview-head,#main.cs-active.cs-shop .cs-canvas-note,#main.cs-active.cs-shop .pzcf-stage__meta{display:none!important}#main.cs-active.cs-shop .pzcf-stage__connection{height:100%;padding:0;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:0;flex:none}#main.cs-active.cs-shop .pzcf-end{height:100%;padding:8px 8px 6px;gap:4px;border-radius:16px;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-content:center}#main.cs-active.cs-shop .pzcf-end__role{position:absolute;top:7px;left:7px;font-size:9px;width:16px;height:16px}#main.cs-active.cs-shop .pzcf-end__image{height:100%;min-height:0;max-height:70px;max-width:100%;width:100%}#main.cs-active.cs-shop .pzcf-end strong{font-size:11px;line-height:1.3;min-height:0;display:block}#main.cs-active.cs-shop .pzcf-end small{display:none}#main.cs-active.cs-shop .pzcf-line{margin:0 0 14px}#main.cs-active.cs-shop .pzcf-end__image.is-placeholder::before{width:40px;height:40px;font-size:24px}#main.cs-active.cs-shop .pzcf-question__head{padding:0 3px 24px}#main.cs-active.cs-shop [data-pzcf-question-title]{font-size:31px;letter-spacing:-1px;line-height:1.1}#main.cs-active.cs-shop [data-pzcf-question-copy]{font-size:14px;line-height:1.5}#main.cs-active.cs-shop .cs-connection-tabs{padding:0 3px 14px;gap:22px}#main.cs-active.cs-shop .cs-start{padding:0 3px 24px}#main.cs-active.cs-shop .cs-route-hint{display:none}#main.cs-active.cs-shop .pzcf-mode{width:100%;display:flex}#main.cs-active.cs-shop .pzcf-mode button{flex:1;padding:9px 12px;font-size:12px;white-space:nowrap}#main.cs-active.cs-shop[data-cs-step=application] .cs-main{padding:24px 3px 26px}#main.cs-active.cs-shop[data-cs-step=application] .cs-start{padding-bottom:26px}#main.cs-active.cs-shop[data-cs-step=application] .pzcf-question__head{text-align:left;padding:0 3px 24px}#main.cs-active.cs-shop[data-cs-step=application] [data-pzcf-question-title]{font-size:37px;letter-spacing:-1.4px}#main.cs-active.cs-shop[data-cs-step=application] [data-pzcf-question-copy]{font-size:15px}#main.cs-active.cs-shop[data-cs-step=application] .cs-helper-link{margin:0}#main.cs-active.cs-shop .cs-family-bar{gap:4px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:18px}#main.cs-active.cs-shop .cs-family-bar button{padding:8px 11px;min-height:36px;font-size:11px}#main.cs-active.cs-shop .pzcf-options--applications{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option{min-height:208px;padding:17px!important;border-radius:20px}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__visual{height:94px;margin:0 0 14px}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__visual img{padding:0 4px}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__copy strong{font-size:16px;letter-spacing:-.3px}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__copy em{font-size:11px;line-height:1.45;margin-top:6px}#main.cs-active.cs-shop .pzcf-option__check{width:16px;height:16px;top:10px;right:10px;font-size:9px}#main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option{min-height:190px;padding:22px 14px 16px!important;border-radius:18px;gap:12px}#main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option__visual{height:90px;flex-basis:90px}#main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option__copy strong{font-size:13px}#main.cs-active.cs-shop .cs-dock{padding:12px 0;min-height:74px;gap:10px}#main.cs-active.cs-shop .cs-dock-summary{display:none}#main.cs-active.cs-shop .cs-dock .pzcf-question__actions{width:100%;justify-content:space-between;gap:10px}#main.cs-active.cs-shop .cs-dock [data-pzcf-next],#main.cs-active.cs-shop .cs-dock .cs-primary{padding:12px 18px;gap:10px;font-size:13px;min-height:46px}#main.cs-active.cs-shop .cs-dock [data-pzcf-back]{font-size:12px;padding:10px 8px;min-height:44px}#main.cs-active.cs-shop .cs-credits{justify-content:center;gap:7px;padding:0 0 2px}#main.cs-active.cs-shop .cs-credits img{height:10px;max-width:60px}#main.cs-active.cs-shop .cs-credits span{font-size:7px}#main.cs-active.cs-shop[data-cs-step=result] .pzcf-stage{height:168px!important;min-height:168px!important;position:relative;margin-bottom:26px;backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}#main.cs-active.cs-shop .cs-outcome:not([hidden]){padding:4px 16px;height:100%;flex-direction:row;gap:18px}#main.cs-active.cs-shop .cs-outcome>img{max-width:160px;max-height:150px;width:50%;height:100%}#main.cs-active.cs-shop .cs-outcome>div{text-align:left;margin:0}#main.cs-active.cs-shop .cs-outcome strong{font-size:14px}#main.cs-active.cs-shop .cs-outcome small{font-size:10px}#main.cs-active.cs-shop .pzcf-result__hero h3{font-size:25px}#main.cs-active.cs-shop .pzcf-result__section{padding:16px}#main.cs-active.cs-shop .pzcf-bom__item{grid-template-columns:42px minmax(0,1fr) auto;gap:7px}#main.cs-active.cs-shop .pzcf-bom__image{width:42px;height:50px}#main.cs-active.cs-shop .pzcf-bom__copy strong{font-size:12px}#main.cs-active.cs-shop .pzcf-bom__qty{font-size:11px}#main.cs-active.cs-shop .cs-help-series button{padding:14px}#main.cs-active.cs-shop .cs-help-series strong{font-size:14px}} @media(max-width:350px){#main.cs-active.cs-shop .pzcf-app{padding-inline:12px}#main.cs-active.cs-shop .cs-chapters{gap:16px}#main.cs-active.cs-shop .cs-chapters strong{font-size:11px}#main.cs-active.cs-shop .cs-heading h1{font-size:15px}#main.cs-active.cs-shop .cs-tools button{width:30px}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option{padding:14px!important}#main.cs-active.cs-shop .pzcf-options--applications .pzcf-option__copy strong{font-size:15px}#main.cs-active.cs-shop .cs-dock [data-pzcf-next],#main.cs-active.cs-shop .cs-dock .cs-primary{font-size:12px;padding-inline:15px}} @media(max-height:600px){#main.cs-active.cs-shop .cs-heading{min-height:54px;padding-block:4px}#main.cs-active.cs-shop .cs-main{padding-top:20px}#main.cs-active.cs-shop .pzcf-stage{position:relative;height:340px!important;min-height:340px!important}#main.cs-active.cs-shop .cs-dock{min-height:60px;padding-block:7px}#main.cs-active.cs-shop .cs-chapters button{min-height:34px;padding-block:4px}} @media(prefers-reduced-motion:reduce){#main.cs-active.cs-shop *{scroll-behavior:auto!important;transition:none!important}#main.cs-active.cs-shop .pzcf-option img{scale:1!important}} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#main.cs-active.cs-shop .cs-dock,#main.cs-active.cs-shop .pzcf-stage{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}} #main.cs-active.cs-shop .cs-example{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 32px 14px;gap:12px} #main.cs-active.cs-shop .cs-example img{width:100%;height:100%;max-width:400px;max-height:290px;min-height:0;object-fit:contain;mix-blend-mode:multiply} #main.cs-active.cs-shop .cs-example small{font-size:11px;line-height:1.4;color:#8b928f;text-align:center} #main.cs-active.cs-shop[data-example=true] .pzcf-stage__connection{flex:none;height:98px;padding:0 12px 12px;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)} #main.cs-active.cs-shop[data-example=true] .pzcf-end{padding:12px 10px;height:84px;max-height:none} #main.cs-active.cs-shop[data-example=true] .pzcf-end__image{display:none} #main.cs-active.cs-shop[data-example=true] .pzcf-end__role{position:static;width:18px;height:18px;font-size:10px} #main.cs-active.cs-shop[data-example=true] .pzcf-end small{display:none} #main.cs-active.cs-shop .cs-review-ends{display:grid;grid-template-columns:1fr 1fr;gap:12px} #main.cs-active.cs-shop .cs-review-ends button{text-align:left;border:1px solid #dfe6e2;border-radius:15px;background:#fff;padding:15px;display:flex;flex-direction:column;gap:7px;min-width:0} #main.cs-active.cs-shop .cs-review-ends small{font-size:11px;color:#7b837e} #main.cs-active.cs-shop .cs-review-ends strong{font-size:13px;line-height:1.4;font-weight:550} #main.cs-active.cs-shop .cs-review-ends span{font-size:12px;color:#007b73} #main.cs-active.cs-shop .pzcf-bom__item{border:0;border-bottom:1px solid #edf0ee;border-radius:0;background:none;box-shadow:none} #main.cs-active.cs-shop .pzcf-bom__item:last-child{border-bottom:0} #main.cs-active.cs-shop .pzcf-bom__sku{background:none;border:0;border-radius:0;padding:0} #main.cs-active.cs-shop .pzcf-result__bom-count{background:none;border:0} #main.cs-active.cs-shop .pzcf-result__bom-count b{font-size:20px;color:#007b73} #main.cs-active.cs-shop .pzcf-result__bom-count small{font-size:9px;color:#89918c;text-transform:none;letter-spacing:0} #main.cs-active.cs-shop .pzcf-stage__meta small{text-transform:none;letter-spacing:0} #main.cs-active.cs-shop .cs-credits{opacity:.8} #main.cs-active.cs-shop .cs-credits span{font-size:9px} #main.cs-active.cs-shop .cs-credits img{height:13px} @media(max-width:760px){#main.cs-active.cs-shop .cs-example{display:none!important}#main.cs-active.cs-shop[data-example=true] .pzcf-stage__connection{height:100%;padding:0;flex:1}#main.cs-active.cs-shop[data-example=true] .pzcf-end{height:100%;display:flex;flex-direction:column;justify-content:center;gap:8px}#main.cs-active.cs-shop[data-example=true] .pzcf-end__image{display:grid;height:40px;flex:none}#main.cs-active.cs-shop[data-example=true] .pzcf-end__role{position:absolute;top:7px;left:7px}#main.cs-active.cs-shop .cs-credits span{font-size:8px}#main.cs-active.cs-shop .cs-credits img{height:10px}} /* Keep scrolled catalogue content inside its own viewport, below navigation. */ #main.cs-active.cs-shop .cs-heading{position:relative;z-index:6;background:#fff;isolation:isolate} #main.cs-active.cs-shop .cs-main{position:relative;z-index:1;isolation:isolate} #main.cs-active.cs-shop .cs-dock{position:relative;z-index:7} #main.cs-active.cs-shop .cs-credits{position:relative;z-index:7;background:#fff} #main.cs-active.cs-shop .cs-heading{height:auto} #main.cs-active.cs-shop .cs-credits{display:flex} @media(max-height:600px) and (min-width:761px){#main.cs-active.cs-shop .cs-heading{grid-template-columns:1fr auto auto;min-height:60px;column-gap:20px}#main.cs-active.cs-shop .cs-heading h1{font-size:16px}#main.cs-active.cs-shop .cs-chapters{grid-row:1;grid-column:2;gap:20px}#main.cs-active.cs-shop .cs-chapters strong{font-size:12px}#main.cs-active.cs-shop .cs-tools{grid-column:3}#main.cs-active.cs-shop .cs-tools button{width:30px;height:32px;min-height:32px}#main.cs-active.cs-shop .cs-main{padding-top:20px}} @media(max-height:600px) and (max-width:760px){#main.cs-active.cs-shop .pzcf-stage{position:relative;height:104px!important;min-height:104px!important}#main.cs-active.cs-shop .pzcf-end__image{max-height:50px}#main.cs-active.cs-shop .cs-heading{min-height:0}#main.cs-active.cs-shop .cs-chapters{gap:16px}#main.cs-active.cs-shop .cs-dock{min-height:58px}} /* Connector-first entry is a searchable selection gallery until the first end is chosen. */ #main.cs-active.cs-shop[data-connector-entry=true] .cs-main{display:block;padding:32px 10px 40px} #main.cs-active.cs-shop[data-connector-entry=true] .pzcf-stage{display:none} #main.cs-active.cs-shop[data-connector-entry=true] .pzcf-question{max-width:1100px;margin:auto} #main.cs-active.cs-shop[data-connector-entry=true] .cs-start{align-items:center;padding-bottom:26px} #main.cs-active.cs-shop[data-connector-entry=true] .cs-route-hint{text-align:center} #main.cs-active.cs-shop[data-connector-entry=true] .cs-connection-tabs{justify-content:center;padding-bottom:20px} #main.cs-active.cs-shop[data-connector-entry=true] .pzcf-question__head{text-align:center} #main.cs-active.cs-shop[data-connector-entry=true] [data-pzcf-question-copy]{margin:auto} #main.cs-active.cs-shop[data-connector-entry=true] .cs-helper-link{margin-inline:auto} #main.cs-active.cs-shop[data-connector-entry=true] .pzcf-choice-search{max-width:560px;margin:0 auto 24px} #main.cs-active.cs-shop[data-connector-entry=true] .pzcf-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} @media(max-width:1100px){#main.cs-active.cs-shop[data-connector-entry=true] .pzcf-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){#main.cs-active.cs-shop[data-connector-entry=true] .cs-main{padding:24px 3px 28px}#main.cs-active.cs-shop[data-connector-entry=true] .pzcf-question__head{text-align:left}#main.cs-active.cs-shop[data-connector-entry=true] .cs-helper-link{margin:0}#main.cs-active.cs-shop[data-connector-entry=true] .cs-connection-tabs{justify-content:flex-start}#main.cs-active.cs-shop[data-connector-entry=true] .pzcf-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}} /* Bring the first connector choices into view on phones without shrinking tap targets. */ @media(max-width:760px){ #main.cs-active.cs-shop[data-cs-step=a] .cs-connection-tabs,#main.cs-active.cs-shop[data-cs-step=b] .cs-connection-tabs{padding-bottom:8px} #main.cs-active.cs-shop[data-cs-step=a] .pzcf-question__head,#main.cs-active.cs-shop[data-cs-step=b] .pzcf-question__head{padding-bottom:16px} #main.cs-active.cs-shop[data-cs-step=a] [data-pzcf-question-title],#main.cs-active.cs-shop[data-cs-step=b] [data-pzcf-question-title]{font-size:28px;margin-bottom:10px} #main.cs-active.cs-shop .pzcf-choice-search{margin-bottom:14px} #main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option{min-height:168px;padding:18px 12px 14px!important;gap:10px} #main.cs-active.cs-shop .pzcf-options--connectors .pzcf-option__visual{height:76px;flex-basis:76px} #main.cs-active.cs-shop[data-connector-entry=true] .cs-main{padding-top:16px} #main.cs-active.cs-shop[data-connector-entry=true] .cs-start{padding-bottom:12px} #main.cs-active.cs-shop[data-connector-entry=true] .pzcf-choice-search{margin-bottom:14px} #main.cs-active.cs-shop[data-cs-step=application] .cs-main{padding-top:16px} #main.cs-active.cs-shop[data-cs-step=application] .cs-start{padding-bottom:18px} } @media(max-width:760px) and (min-height:601px){ #main.cs-active.cs-shop[data-cs-step=a] .pzcf-stage,#main.cs-active.cs-shop[data-cs-step=b] .pzcf-stage{height:112px!important;min-height:112px!important;margin-bottom:16px} #main.cs-active.cs-shop[data-cs-step=a] .cs-main,#main.cs-active.cs-shop[data-cs-step=b] .cs-main{scroll-padding-top:120px} } /* Keep the headline on the same axis as the entry copy, help and filters. The global heading cap otherwise leaves its 850px box at the left edge. */ #main.cs-active.cs-shop [data-pzcf-question-title]{width:100%;max-width:none} @media(max-width:760px){ #main.cs-active.cs-shop[data-cs-step=application] [data-pzcf-question-copy], #main.cs-active.cs-shop[data-connector-entry=true] [data-pzcf-question-copy]{margin-inline:0} } /* A labelled reset stays secondary, but never requires guessing an icon. */ #planer#planer#planer .reset-visible,#main#main.cs-active .reset-visible{display:inline-flex!important;align-items:center;justify-content:center;gap:7px!important;width:auto!important;min-width:max-content!important;min-height:40px!important;padding:8px 12px!important;border:1px solid #d2d2d7!important;border-radius:12px!important;background:rgba(255,255,255,.88)!important;color:#424247!important;font:500 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;white-space:nowrap;box-shadow:0 1px 2px #00000004;transform:none!important;transition:background .18s ease,border-color .18s ease} #planer#planer#planer .reset-visible>span,#main#main.cs-active .reset-visible>span{display:inline!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important} #planer#planer#planer .reset-visible>svg,#main#main.cs-active .reset-visible>svg{width:18px!important;height:18px!important;flex:0 0 18px!important} @media(hover:hover){#planer#planer#planer .reset-visible:hover,#main#main.cs-active .reset-visible:hover{background:#f5f5f7!important;border-color:#86868b!important}} #planer#planer#planer .reset-visible:focus-visible,#main#main.cs-active .reset-visible:focus-visible{outline:3px solid var(--sg-accent,#0071e3)!important;outline-offset:3px!important} .reset-confirm{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:30px;border:1px solid #e4e4e9;border-radius:24px;background:#fff;color:#1d1d1f;box-shadow:0 24px 90px #0003;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .reset-confirm::backdrop{background:#17171c55;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .reset-confirm h2{font:600 27px/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:-.02em;margin:0 0 14px!important;color:#1d1d1f!important} .reset-confirm p{font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#6e6e73!important;margin:0 0 24px!important} .reset-confirm footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px} .reset-confirm button{appearance:none;font:500 14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;min-height:44px;padding:11px 18px!important;border:1px solid #d2d2d7!important;border-radius:22px!important;color:#1d1d1f!important;background:#fff!important;transform:none!important} .reset-confirm [data-confirm]{background:#1d1d1f!important;border-color:#1d1d1f!important;color:#fff!important} .reset-confirm button:focus-visible{outline:3px solid #0071e3;outline-offset:3px} @media(prefers-reduced-motion:no-preference){.reset-confirm[open]{animation:reset-appear .2s cubic-bezier(.2,.7,.2,1) both}@keyframes reset-appear{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}} #main.cs-active .cs-heading{flex-wrap:wrap;row-gap:10px}#main.cs-active .cs-tools{flex-wrap:wrap} /* Guided cable store: one page, one preview, a clear sequence of decisions. */ html:has(.cs-store){height:auto;overflow:auto!important;scroll-padding-top:150px} body.cs-page:has(.cs-store){height:auto;overflow:visible!important;background:#fff} #main.cs-active.cs-shop.cs-store{position:relative;inset:auto;overflow:visible;min-height:calc(100dvh - 64px);background:#fff;padding-top:64px!important;--cs-accent:#007a70;--sg-accent:#007a70;--cs-border:#dedee4;color:#1d1d1f} #main.cs-active.cs-shop.cs-store .pzcf-work,#main.cs-active.cs-shop.cs-store .pzcf-shell{height:auto;overflow:visible} #main.cs-active.cs-shop.cs-store .pzcf-app{display:block;height:auto;overflow:visible;max-width:1440px;margin:auto!important;padding:0 36px 130px;gap:0} #main.cs-active.cs-shop.cs-store .cs-heading{position:sticky;top:64px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;height:auto;min-height:76px;padding:12px 0;border-bottom:1px solid #e8e8ed;background:#fff;isolation:isolate} #main.cs-active.cs-shop.cs-store .cs-step-picker{position:relative;flex:1;min-width:150px} #main.cs-active.cs-shop.cs-store .cs-step-picker>summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;min-height:44px;width:max-content;max-width:100%;padding:0;border:0;background:none} #main.cs-active.cs-shop.cs-store .cs-step-picker>summary::-webkit-details-marker{display:none} #main.cs-active.cs-shop.cs-store .cs-step-picker summary>span:first-child{display:grid;gap:3px} #main.cs-active.cs-shop.cs-store .cs-step-picker strong{font-size:18px;font-weight:600;line-height:1.2} #main.cs-active.cs-shop.cs-store .cs-step-picker small{font-size:12px;color:#6e6e73;line-height:1.3} #main.cs-active.cs-shop.cs-store .cs-step-picker summary>span:last-child{color:#86868b;font-size:20px} #main.cs-active.cs-shop.cs-store .cs-step-menu{position:absolute;z-index:31;top:calc(100% + 14px);left:0;min-width:260px;background:#fff;padding:8px;border:1px solid #e8e8ed;border-radius:18px;box-shadow:0 16px 48px #00000014} #main.cs-active.cs-shop.cs-store .cs-step-menu button{width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:10px;padding:13px 16px;font-size:14px;text-align:left;background:transparent;color:#424247} #main.cs-active.cs-shop.cs-store .cs-step-menu button[aria-current=step]{background:#edf6f4;color:#006a61} #main.cs-active.cs-shop.cs-store .cs-step-menu button>span{color:#86868b;font-size:11px} #main.cs-active.cs-shop.cs-store .cs-route-switch{flex:none} #main.cs-active.cs-shop.cs-store .pzcf-mode{display:flex;background:#f0f0f2;border:0;padding:4px;border-radius:999px;gap:2px;width:auto;margin:0} #main.cs-active.cs-shop.cs-store .pzcf-mode button{border:0;border-radius:999px;padding:11px 22px;font-size:13px;min-height:40px;background:transparent;color:#6e6e73;white-space:nowrap} #main.cs-active.cs-shop.cs-store .pzcf-mode button.is-active{background:#fff;color:#1d1d1f;box-shadow:0 2px 8px #0000000b;font-weight:600} #main.cs-active.cs-shop.cs-store .cs-tools{flex-wrap:nowrap;flex:none;gap:4px} #main.cs-active.cs-shop.cs-store .cs-tools button{width:36px;height:40px;min-height:40px;padding:8px} #main.cs-active.cs-shop.cs-store .cs-store-intro{padding:48px 0 36px;max-width:900px} #main.cs-active.cs-shop.cs-store .cs-store-intro>small{font-size:13px;color:#6e6e73} #main.cs-active.cs-shop.cs-store .cs-store-intro h2{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.035em;line-height:1.1;margin:12px 0 16px;font-weight:650;max-width:none} #main.cs-active.cs-shop.cs-store .cs-store-intro>p{font-size:17px;line-height:1.5;color:#6e6e73;margin:0} #main.cs-active.cs-shop.cs-store .cs-store-intro .cs-route-explain{font-size:13px;margin-top:12px;max-width:620px} #main.cs-active.cs-shop.cs-store .cs-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);overflow:visible;padding:0;isolation:auto;align-items:start;max-width:none} #main.cs-active.cs-shop.cs-store .pzcf-stage{display:flex;position:sticky;top:164px;align-self:start;min-height:360px!important;height:min(560px,calc(100dvh - 280px))!important;max-height:none;background:#f7f8f8;border:1px solid #edf0ef;border-radius:26px;padding:24px;margin:0;overflow:hidden;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} #main.cs-active.cs-shop.cs-store .cs-preview-head{display:block;padding:0 0 16px} #main.cs-active.cs-shop.cs-store .cs-preview-head small{font-size:12px;color:#6e6e73} #main.cs-active.cs-shop.cs-store .cs-preview-head h2{font-size:21px;line-height:1.2;margin:5px 0 0;letter-spacing:-.02em} #main.cs-active.cs-shop.cs-store .cs-example{padding:0 8px 20px;display:flex} #main.cs-active.cs-shop.cs-store .cs-example img{max-height:300px;max-width:100%;width:100%;height:100%;min-height:0;object-fit:contain} #main.cs-active.cs-shop.cs-store .cs-example small{font-size:12px;color:#6e6e73;max-width:300px} #main.cs-active.cs-shop.cs-store .pzcf-stage__connection{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;flex:1;min-height:0;padding:4px 0 12px;height:auto} #main.cs-active.cs-shop.cs-store .pzcf-end{padding:18px 12px 12px;border:1px solid #e0e5e3;border-radius:18px;min-width:0;min-height:150px;height:100%;max-height:290px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#fff;box-shadow:none} #main.cs-active.cs-shop.cs-store .pzcf-end.cs-end-active{border-color:#007a70;box-shadow:inset 0 0 0 1px #007a70} #main.cs-active.cs-shop.cs-store .pzcf-end__image{min-height:0;flex:1;height:130px;max-height:170px;display:grid} #main.cs-active.cs-shop.cs-store .pzcf-end__image img{height:100%;width:100%;max-height:170px;object-fit:contain} #main.cs-active.cs-shop.cs-store .pzcf-end small{font-size:11px;line-height:1.3;letter-spacing:0;text-transform:none} #main.cs-active.cs-shop.cs-store .pzcf-end strong{font-size:14px;line-height:1.35;overflow-wrap:anywhere} #main.cs-active.cs-shop.cs-store .pzcf-end__role{top:8px;left:10px;width:20px;height:20px;font-size:11px} #main.cs-active.cs-shop.cs-store[data-example=true] .pzcf-stage__connection{flex:none;height:76px;padding:0} #main.cs-active.cs-shop.cs-store[data-example=true] .pzcf-end{height:70px;min-height:70px;padding:10px} #main.cs-active.cs-shop.cs-store[data-example=true] .pzcf-end__image,#main.cs-active.cs-shop.cs-store[data-example=true] .pzcf-end small{display:none} #main.cs-active.cs-shop.cs-store[data-example=true] .pzcf-end__role{position:static} #main.cs-active.cs-shop.cs-store .cs-preview-help{font-size:12px;text-align:center;color:#6e6e73;margin:12px 0 0;line-height:1.45} #main.cs-active.cs-shop.cs-store .pzcf-stage__meta{margin-top:16px;border:0;background:#fff;border-radius:14px;padding:12px;gap:12px} #main.cs-active.cs-shop.cs-store .pzcf-stage__meta strong{font-size:13px;line-height:1.4} #main.cs-active.cs-shop.cs-store .cs-outcome:not([hidden]){display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;padding:0;background:none} #main.cs-active.cs-shop.cs-store .cs-outcome>img{width:100%;height:100%;min-height:0;max-height:300px;max-width:100%;object-fit:contain;mix-blend-mode:multiply} #main.cs-active.cs-shop.cs-store .cs-outcome>div{text-align:center;flex:none} #main.cs-active.cs-shop.cs-store .cs-outcome strong{font-size:22px;letter-spacing:-.02em} #main.cs-active.cs-shop.cs-store .cs-outcome small{font-size:12px} #main.cs-active.cs-shop.cs-store .cs-outcome span{font-size:13px;line-height:1.4} #main.cs-active.cs-shop.cs-store[data-product-preview=true] .pzcf-stage__connection,#main.cs-active.cs-shop.cs-store[data-product-preview=true] .cs-preview-head,#main.cs-active.cs-shop.cs-store[data-product-preview=true] .cs-preview-help{display:none} #main.cs-active.cs-shop.cs-store .cs-store-guide{display:flex;flex-direction:column;min-width:0;padding-bottom:28px} #main.cs-active.cs-shop.cs-store .cs-store-section{border-top:1px solid #e6e6eb;min-width:0;padding:0;scroll-margin-top:164px} #main.cs-active.cs-shop.cs-store .cs-store-section:last-child{border-bottom:1px solid #e6e6eb} #main.cs-active.cs-shop.cs-store .cs-section-heading{display:flex;align-items:center;gap:14px;width:100%;min-height:86px;padding:20px 0;border:0;background:none;text-align:left;opacity:1;color:#1d1d1f} #main.cs-active.cs-shop.cs-store .cs-section-number{align-self:flex-start;font-size:12px;color:#86868b;padding-top:5px;min-width:20px} #main.cs-active.cs-shop.cs-store .cs-section-title{display:grid;gap:6px;flex:1;min-width:0} #main.cs-active.cs-shop.cs-store .cs-section-title strong{font-size:21px;letter-spacing:-.025em;font-weight:600;line-height:1.3} #main.cs-active.cs-shop.cs-store .cs-section-title small{font-size:13px;line-height:1.45;color:#6e6e73;overflow-wrap:anywhere} #main.cs-active.cs-shop.cs-store .cs-section-state{font-size:20px;font-weight:400;color:#86868b;flex:none;min-width:22px;text-align:center} #main.cs-active.cs-shop.cs-store [data-complete=true] .cs-section-state{color:var(--cs-accent)} #main.cs-active.cs-shop.cs-store .cs-section-heading:disabled{cursor:default;color:#86868b} #main.cs-active.cs-shop.cs-store .cs-section-heading:disabled .cs-section-title small{color:#86868b} #main.cs-active.cs-shop.cs-store .pzcf-question{display:flex;flex-direction:column;padding:0 0 34px;margin:0;max-width:none;min-height:0;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0} #main.cs-active.cs-shop.cs-store .pzcf-question__head{text-align:left;padding:6px 0 22px;border:0;background:none} #main.cs-active.cs-shop.cs-store [data-pzcf-step-label]{display:none} #main.cs-active.cs-shop.cs-store [data-pzcf-question-title]{font-size:28px;font-weight:650;line-height:1.15;letter-spacing:-.03em;text-align:left;margin:0 0 12px;max-width:none} #main.cs-active.cs-shop.cs-store [data-pzcf-question-copy]{font-size:15px;line-height:1.5;text-align:left;max-width:none;margin:0;color:#6e6e73} #main.cs-active.cs-shop.cs-store .cs-helper-link{font-size:13px;text-align:left;min-height:36px;margin:12px 0 0;padding:6px 0;align-self:flex-start;color:var(--cs-accent);background:none;border:0;justify-content:flex-start} #main.cs-active.cs-shop.cs-store .cs-family-bar{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 20px;overflow:visible;justify-content:flex-start} #main.cs-active.cs-shop.cs-store .cs-family-bar button{padding:8px 12px;min-height:38px;font-size:12px;border:1px solid #e2e4e3;border-radius:999px;background:#fff} #main.cs-active.cs-shop.cs-store .cs-family-bar button[aria-pressed=true]{border-color:#007a70;color:#00685e;background:#edf6f4} #main.cs-active.cs-shop.cs-store .pzcf-options{display:grid;overflow:visible;padding:0;gap:12px;margin:0;max-height:none;min-height:0} #main.cs-active.cs-shop.cs-store .pzcf-options--applications{grid-template-columns:repeat(2,minmax(0,1fr))} #main.cs-active.cs-shop.cs-store .pzcf-options--applications .pzcf-option{min-height:180px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px!important;border:1px solid #d9dddb;border-radius:18px;background:#fff;text-align:left} #main.cs-active.cs-shop.cs-store .pzcf-options--applications .pzcf-option__visual{width:100%;height:96px;flex:none;background:none;margin:0} #main.cs-active.cs-shop.cs-store .pzcf-option__visual img{object-fit:contain;width:100%;height:100%;mix-blend-mode:multiply;filter:none;scale:1} #main.cs-active.cs-shop.cs-store .pzcf-option__copy{min-width:0} #main.cs-active.cs-shop.cs-store .pzcf-option__copy strong{font-size:16px;line-height:1.3;font-weight:600} #main.cs-active.cs-shop.cs-store .pzcf-option__copy em{font-size:12px;line-height:1.45;color:#6e6e73;margin-top:5px} #main.cs-active.cs-shop.cs-store .pzcf-option[aria-pressed=true]{border-color:#007a70;background:#f6faf9;box-shadow:inset 0 0 0 1px #007a70} #main.cs-active.cs-shop.cs-store .pzcf-option__check{width:20px;height:20px;top:14px;right:14px;font-size:12px} #main.cs-active.cs-shop.cs-store .pzcf-choice-search{max-width:none;margin:0 0 4px;border:0;background:none;padding:0;min-height:0;height:auto} #main.cs-active.cs-shop.cs-store .pzcf-choice-search input{height:48px;min-height:48px;font-size:15px;border-radius:12px;margin:0;width:100%;padding:12px 16px} #main.cs-active.cs-shop.cs-store .pzcf-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #main.cs-active.cs-shop.cs-store .pzcf-options--connectors .pzcf-option{min-height:182px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 16px!important;border-radius:18px;text-align:left;background:#fff} #main.cs-active.cs-shop.cs-store .pzcf-options--connectors .pzcf-option__visual{width:100%;height:82px;flex:none;background:none} #main.cs-active.cs-shop.cs-store .pzcf-options--connectors .pzcf-option__copy strong{font-size:15px} #main.cs-active.cs-shop.cs-store .pzcf-options--connectors .pzcf-option__copy small{display:none} #main.cs-active.cs-shop.cs-store .cs-details{display:flex;gap:30px} #main.cs-active.cs-shop.cs-store .cs-length-entry{width:100%;max-width:260px;gap:12px;padding:12px 18px;border-radius:14px} #main.cs-active.cs-shop.cs-store .cs-length-entry:focus-within{outline:3px solid #007a7038;outline-offset:3px;border-color:#007a70} #main.cs-active.cs-shop.cs-store .cs-length-entry input{height:44px;min-height:44px;font-family:inherit;font-size:28px;font-weight:500;line-height:1.2;outline:none!important;border:0!important;border-radius:0;background:none;box-shadow:none!important;padding:0!important;margin:0;min-width:0;text-align:left} #main.cs-active.cs-shop.cs-store .cs-length-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #main.cs-active.cs-shop.cs-store .cs-length-presets button{font-size:14px;min-height:44px} #main.cs-active.cs-shop.cs-store .pzcf-config-fields{gap:30px} #main.cs-active.cs-shop.cs-store .pzcf-series-row button{min-height:52px;font-size:15px} #main.cs-active.cs-shop.cs-store .cs-help-series{gap:12px} #main.cs-active.cs-shop.cs-store .cs-help-series button{padding:18px;min-height:100px} #main.cs-active.cs-shop.cs-store .cs-help-series strong{font-size:15px} #main.cs-active.cs-shop.cs-store .cs-review-edit{margin:0 0 26px;border-radius:18px} #main.cs-active.cs-shop.cs-store .pzcf-result__hero{grid-template-columns:minmax(0,1fr);gap:16px} #main.cs-active.cs-shop.cs-store .pzcf-result__media{display:none} #main.cs-active.cs-shop.cs-store .pzcf-result__hero h3{font-size:28px} #main.cs-active.cs-shop.cs-store .pzcf-result__section{padding:20px;margin-top:20px} #main.cs-active.cs-shop.cs-store .pzcf-result__facts{grid-template-columns:repeat(2,minmax(0,1fr))} #main.cs-active.cs-shop.cs-store .pzcf-bom__item{grid-template-columns:52px minmax(0,1fr) auto;gap:12px;padding:14px 0} #main.cs-active.cs-shop.cs-store .pzcf-bom__copy strong{font-size:14px} #main.cs-active.cs-shop.cs-store .pzcf-bom__qty{font-size:14px} #main.cs-active.cs-shop.cs-store .pzcf-bom__image{width:52px;height:58px} #main.cs-active.cs-shop.cs-store .cs-catalogue{max-width:100%;min-width:0} #main.cs-active.cs-shop.cs-store .cs-dock{position:fixed;z-index:40;bottom:24px;left:0;right:0;min-height:72px;gap:20px;padding:12px max(24px,calc((100vw - 1368px)/2));border:0;border-top:1px solid #e8e8ed;border-radius:0;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none} #main.cs-active.cs-shop.cs-store .cs-credits{position:fixed;z-index:41;bottom:0;left:0;right:0;height:24px;min-height:24px;justify-content:center;gap:8px;background:#fff;padding:0 16px;opacity:1} #main.cs-active.cs-shop.cs-store .cs-credits span{font-size:9px;color:#86868b} #main.cs-active.cs-shop.cs-store .cs-credits img{height:12px;max-height:12px} #main.cs-active.cs-shop.cs-store .cs-dock-summary strong{font-size:15px} #main.cs-active.cs-shop.cs-store .cs-dock-summary>span{font-size:12px} #main.cs-active.cs-shop.cs-store .cs-store-preview-button{display:none} #main.cs-active.cs-shop.cs-store .cs-dock .pzcf-button,#main.cs-active.cs-shop.cs-store .cs-dock .cs-primary{font-size:14px!important;min-height:44px;padding:12px 20px!important} #main.cs-active.cs-shop.cs-store .cs-toast{position:fixed;bottom:112px;left:50%;transform:translateX(-50%)!important;max-width:calc(100vw - 32px);z-index:80} #main.cs-active.cs-shop.cs-store .cs-help-dialog{width:min(920px,calc(100vw - 48px));max-height:calc(100dvh - 48px)} #main.cs-active.cs-shop.cs-store .cs-help-dialog[data-kind=length],#main.cs-active.cs-shop.cs-store .cs-help-dialog[data-kind=series],#main.cs-active.cs-shop.cs-store .cs-help-dialog[data-kind=environment]{width:min(640px,calc(100vw - 48px))} #main.cs-active.cs-shop.cs-store .cs-help-options{grid-template-columns:repeat(3,minmax(0,1fr))} #main.cs-active.cs-shop.cs-store .cs-help-option{min-width:0} #main.cs-active.cs-shop.cs-store .cs-help-option strong{font-size:14px;line-height:1.4} #main.cs-active.cs-shop.cs-store .cs-help-option img{height:100px} #main.cs-active.cs-shop.cs-store .reset-confirm button:focus-visible{outline-color:#007a70!important} @media(hover:hover){#main.cs-active.cs-shop.cs-store .cs-section-heading:not(:disabled):hover .cs-section-title strong{color:#007a70}#main.cs-active.cs-shop.cs-store .cs-step-menu button:not(:disabled):hover{background:#f5f5f7}} @media(prefers-reduced-motion:no-preference){#main.cs-active.cs-shop.cs-store .cs-step-picker[open] .cs-step-menu{animation:cs-store-reveal .2s cubic-bezier(.2,.8,.2,1)}@keyframes cs-store-reveal{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}} @media(max-width:1100px){#main.cs-active.cs-shop.cs-store .pzcf-app{padding-inline:24px}#main.cs-active.cs-shop.cs-store .cs-main{gap:30px;grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}#main.cs-active.cs-shop.cs-store .pzcf-stage{padding:20px}#main.cs-active.cs-shop.cs-store .cs-heading{gap:12px}#main.cs-active.cs-shop.cs-store .pzcf-mode button{padding-inline:14px}} @media(max-width:900px){#main.cs-active.cs-shop.cs-store .cs-heading{display:grid;grid-template-columns:1fr auto;row-gap:8px}#main.cs-active.cs-shop.cs-store .cs-route-switch{grid-row:2;grid-column:1/-1;justify-self:center}#main.cs-active.cs-shop.cs-store .cs-tools{grid-column:2;grid-row:1}#main.cs-active.cs-shop.cs-store .pzcf-stage{top:210px;height:min(500px,calc(100dvh - 320px))!important}#main.cs-active.cs-shop.cs-store .cs-store-intro{padding-top:36px}#main.cs-active.cs-shop.cs-store [data-pzcf-question-title]{font-size:25px}#main.cs-active.cs-shop.cs-store .pzcf-options--applications .pzcf-option{padding:16px!important}#main.cs-active.cs-shop.cs-store .cs-section-title strong{font-size:20px}} @media(max-width:760px){ #main.cs-active.cs-shop.cs-store .pzcf-app{padding:0 20px 120px} #main.cs-active.cs-shop.cs-store .cs-heading{top:64px;min-height:0;padding:8px 0;gap:7px} #main.cs-active.cs-shop.cs-store .cs-step-picker strong{font-size:16px} #main.cs-active.cs-shop.cs-store .cs-step-picker small{font-size:11px} #main.cs-active.cs-shop.cs-store .cs-route-switch{width:100%} #main.cs-active.cs-shop.cs-store .pzcf-mode{width:100%} #main.cs-active.cs-shop.cs-store .pzcf-mode button{flex:1;min-height:36px;padding:9px 12px;font-size:12px} #main.cs-active.cs-shop.cs-store .cs-tools{gap:1px} #main.cs-active.cs-shop.cs-store .cs-tools button{width:30px;min-height:36px;height:36px;padding:6px} #main.cs-active.cs-shop.cs-store .cs-tools .reset-visible{font-size:11px!important;min-height:36px!important;padding:7px 9px!important} #main.cs-active.cs-shop.cs-store .cs-store-intro{padding:30px 0 26px} #main.cs-active.cs-shop.cs-store .cs-store-intro h2{font-size:32px;margin:10px 0 14px} #main.cs-active.cs-shop.cs-store .cs-store-intro>p{font-size:15px} #main.cs-active.cs-shop.cs-store .cs-store-intro .cs-route-explain{font-size:12px;margin-top:10px} #main.cs-active.cs-shop.cs-store .cs-main{display:flex;flex-direction:column;gap:30px;padding:0;overflow:visible} #main.cs-active.cs-shop.cs-store .pzcf-stage{position:relative;top:auto;width:100%;height:300px!important;min-height:300px!important;margin:0;border-radius:22px;padding:18px} #main.cs-active.cs-shop.cs-store .cs-preview-head{padding-bottom:10px} #main.cs-active.cs-shop.cs-store .cs-preview-head h2{font-size:18px} #main.cs-active.cs-shop.cs-store .cs-example{display:flex!important;padding:0 4px 10px} #main.cs-active.cs-shop.cs-store .cs-example img{max-height:130px} #main.cs-active.cs-shop.cs-store .cs-example small{font-size:10px} #main.cs-active.cs-shop.cs-store .pzcf-end{min-height:110px;max-height:180px;height:100%;padding:12px 9px 9px;gap:7px;border-radius:14px} #main.cs-active.cs-shop.cs-store .pzcf-end__image{max-height:90px;height:80px} #main.cs-active.cs-shop.cs-store .pzcf-end__image img{max-height:90px} #main.cs-active.cs-shop.cs-store .pzcf-end strong{font-size:12px} #main.cs-active.cs-shop.cs-store .pzcf-end small{font-size:10px} #main.cs-active.cs-shop.cs-store .pzcf-stage__meta{display:none} #main.cs-active.cs-shop.cs-store .cs-outcome:not([hidden]){flex-direction:column;padding:0;gap:10px} #main.cs-active.cs-shop.cs-store .cs-outcome>img{max-width:100%;max-height:180px;width:100%;height:100%} #main.cs-active.cs-shop.cs-store .cs-outcome>div{text-align:center} #main.cs-active.cs-shop.cs-store .cs-outcome strong{font-size:19px} #main.cs-active.cs-shop.cs-store .cs-outcome span{font-size:12px} #main.cs-active.cs-shop.cs-store .cs-store-guide{width:100%;padding:0} #main.cs-active.cs-shop.cs-store .cs-section-heading{padding:18px 0;min-height:80px;gap:10px} #main.cs-active.cs-shop.cs-store .cs-section-title strong{font-size:21px} #main.cs-active.cs-shop.cs-store .cs-section-title small{font-size:12px} #main.cs-active.cs-shop.cs-store .pzcf-question__head{padding:0 0 18px} #main.cs-active.cs-shop.cs-store [data-pzcf-question-title]{font-size:25px} #main.cs-active.cs-shop.cs-store .cs-family-bar{gap:6px;padding-bottom:18px} #main.cs-active.cs-shop.cs-store .cs-family-bar button{font-size:11px;padding:8px 10px;min-height:36px} #main.cs-active.cs-shop.cs-store .pzcf-options--applications .pzcf-option{min-height:172px;padding:16px 12px!important} #main.cs-active.cs-shop.cs-store .pzcf-options--applications .pzcf-option__visual{height:78px} #main.cs-active.cs-shop.cs-store .pzcf-option__copy strong{font-size:14px} #main.cs-active.cs-shop.cs-store .pzcf-option__copy em{font-size:11px} #main.cs-active.cs-shop.cs-store .pzcf-options--connectors .pzcf-option{min-height:174px;padding:16px 12px!important} #main.cs-active.cs-shop.cs-store .pzcf-options--connectors .pzcf-option__copy strong{font-size:14px} #main.cs-active.cs-shop.cs-store .cs-length-entry{max-width:none} #main.cs-active.cs-shop.cs-store .pzcf-result__facts{gap:14px} #main.cs-active.cs-shop.cs-store .pzcf-result__section{padding:16px} #main.cs-active.cs-shop.cs-store .pzcf-bom__item{grid-template-columns:40px minmax(0,1fr) auto;gap:8px} #main.cs-active.cs-shop.cs-store .pzcf-bom__image{width:40px;height:48px} #main.cs-active.cs-shop.cs-store .pzcf-bom__copy strong{font-size:12px} #main.cs-active.cs-shop.cs-store .pzcf-bom__qty{font-size:12px} #main.cs-active.cs-shop.cs-store .cs-dock{min-height:70px;padding:10px 20px;gap:10px;bottom:22px} #main.cs-active.cs-shop.cs-store .cs-dock-summary{display:none} #main.cs-active.cs-shop.cs-store .pzcf-question__actions{width:100%;gap:8px} #main.cs-active.cs-shop.cs-store .cs-store-preview-button{display:block;margin-right:auto;min-height:44px;padding:10px 8px;border:0;background:none;font-size:12px;color:#424247} #main.cs-active.cs-shop.cs-store .cs-dock .pzcf-button,#main.cs-active.cs-shop.cs-store .cs-dock .cs-primary{font-size:12px!important;min-height:44px;padding:11px 15px!important;gap:8px} #main.cs-active.cs-shop.cs-store .cs-credits{height:22px;min-height:22px;padding:0 8px;gap:5px} #main.cs-active.cs-shop.cs-store .cs-credits img{height:9px;max-height:9px;max-width:48px} #main.cs-active.cs-shop.cs-store .cs-credits span{font-size:7px} #main.cs-active.cs-shop.cs-store .cs-help-dialog,#main.cs-active.cs-shop.cs-store .cs-help-dialog[data-kind]{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:22px} #main.cs-active.cs-shop.cs-store .cs-help-options{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:360px){#main.cs-active.cs-shop.cs-store .pzcf-app{padding-inline:14px}#main.cs-active.cs-shop.cs-store .cs-tools [data-cs=share]{display:none}#main.cs-active.cs-shop.cs-store .cs-step-picker{min-width:100px}#main.cs-active.cs-shop.cs-store .cs-tools button{width:26px}#main.cs-active.cs-shop.cs-store .cs-dock{padding-inline:12px}#main.cs-active.cs-shop.cs-store .cs-dock .pzcf-button,#main.cs-active.cs-shop.cs-store .cs-dock .cs-primary{padding-inline:12px!important}#main.cs-active.cs-shop.cs-store .cs-store-preview-button{padding-inline:3px}#main.cs-active.cs-shop.cs-store .cs-help-series{grid-template-columns:1fr}} @media(max-height:600px){#main.cs-active.cs-shop.cs-store .cs-heading{position:relative;top:auto;display:flex;flex-wrap:wrap}#main.cs-active.cs-shop.cs-store .cs-main{grid-template-columns:1fr}#main.cs-active.cs-shop.cs-store .pzcf-stage{position:relative;top:auto;width:100%;max-width:600px;justify-self:center;height:300px!important;min-height:300px!important}#main.cs-active.cs-shop.cs-store .cs-example img{max-height:140px}#main.cs-active.cs-shop.cs-store .cs-store-intro{padding:24px 0}#main.cs-active.cs-shop.cs-store .cs-help-dialog{max-height:calc(100dvh - 20px)}#main.cs-active.cs-shop.cs-store .cs-store-preview-button{display:block;border:0;background:none;margin-right:auto;min-height:44px}} /* The site already reserves its 64px header; do not reserve it twice. */ #main.cs-active.cs-shop.cs-store{padding-top:0!important} @media(max-width:760px){ #main.cs-active.cs-shop.cs-store .cs-heading{grid-template-columns:minmax(0,1fr) auto} #main.cs-active.cs-shop.cs-store .cs-step-picker{min-width:0} #main.cs-active.cs-shop.cs-store .cs-step-picker small{max-width:125px} #main.cs-active.cs-shop.cs-store .cs-tools [data-cs=share]{display:none} #main#main.cs-active.cs-shop.cs-store .cs-tools .pj-launch{width:32px!important;min-width:32px!important;height:36px!important;min-height:36px!important;padding:6px!important;gap:0!important} #main#main.cs-active.cs-shop.cs-store .cs-tools .pj-launch>span{display:none!important} #main.cs-active.cs-shop.cs-store .pzcf-history{gap:2px} } /* The first phone viewport introduces the choice without a full-size empty connection. */ @media(max-width:760px){ #main.cs-active.cs-shop.cs-store[data-cs-step=application][data-example=true] .pzcf-stage{height:200px!important;min-height:200px!important;padding:16px} #main.cs-active.cs-shop.cs-store[data-cs-step=application][data-example=true] .pzcf-stage__connection{display:none} #main.cs-active.cs-shop.cs-store[data-cs-step=application][data-example=true] .cs-example{padding:0} } .cs-active .cd-context{margin:18px 0;padding:16px 18px;border-radius:18px;background:#f0f7f6;color:#315c58;font-size:14px;line-height:1.6;border:1px solid #e0edeb} .cs-active .cd-review{margin:24px 0 28px;padding:24px;border:1px solid #dfe8e6;border-radius:24px;background:#f8faf9} .cs-active .cd-review header small{font-size:12px;color:#3d726b;font-weight:550} .cs-active .cd-review h3{margin:10px 0 24px;font-size:23px;line-height:1.25;letter-spacing:-.4px} .cs-active .cd-review dl{margin:0}.cs-active .cd-review dl>div{padding:15px 0;border-top:1px solid #dfe5e4} .cs-active .cd-review dt{font-size:12px;color:#626c6a;display:flex;justify-content:space-between;gap:12px;margin-bottom:8px} .cs-active .cd-review dt small{font-size:11px;color:#86571d;background:#faf1df;border-radius:8px;padding:2px 7px} .cs-active .cd-review dd,.cs-active .cd-comparison-head{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0;overflow-wrap:anywhere} .cs-active .cd-comparison-head{font-size:11px;color:#626c6a;margin-bottom:8px} .cs-active .cd-review dd{font-size:14px;line-height:1.5}.cs-active .cd-review dd strong{font-weight:550} .cs-active .cd-review>p{font-size:13px;line-height:1.6;color:#626c6a;margin:18px 0 0} .pj-dialog[data-kind=cable] .cd-run-spec{margin:14px 0;padding:14px 16px;background:#f3f7f6;border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;font-size:13px} .pj-dialog[data-kind=cable] .cd-run-spec div{min-width:0}.pj-dialog[data-kind=cable] .cd-run-spec dt{font-size:11px;color:#66716e;margin-bottom:5px}.pj-dialog[data-kind=cable] .cd-run-spec dd{margin:0;line-height:1.5;overflow-wrap:anywhere} .pj-dialog[data-kind=cable] .cd-run-items{margin:12px 0;border-top:1px solid #e0e6e4;padding-top:12px} .pj-dialog[data-kind=cable] .cd-run-items>p{font-size:12px;color:#66716e} .pj-dialog[data-kind=cable] .cd-run-items>div{display:flex;gap:18px;justify-content:space-between;padding:9px 0;font-size:13px}.pj-dialog[data-kind=cable] .cd-run-items b{white-space:nowrap;font-variant-numeric:tabular-nums} .pj-dialog[data-kind=cable] .cd-run-flag{padding:10px 14px;background:#fcf5e9;border-radius:12px;color:#80551c;font-size:12px;line-height:1.6} @media(max-width:700px){.cs-active .cd-review{padding:18px;border-radius:20px}.cs-active .cd-review h3{font-size:21px}.cs-active .cd-review dd,.cs-active .cd-comparison-head{gap:12px}}