/* Quote form - same language as the rest of the site: paper panel, charcoal
   ink, Barlow headings and labels, one orange accent. */
.qf{background:var(--paper);color:var(--ink);position:relative;scroll-margin-top:100px}
.qf-anchor{position:absolute;top:-100px}
.qf h2{font:800 clamp(30px,2.6vw,40px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0 0 22px;outline:0}
.qf-stepper{list-style:none;margin:0;padding:0 28px;display:flex;gap:28px;border-bottom:1px solid var(--rule-l);font:700 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:#5c5960}
.qf-stepper li{display:flex;align-items:center;gap:10px;padding:20px 0 18px;border-bottom:2px solid transparent;margin-bottom:-1px}
.qf-stepper span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid currentColor;font-size:12px;letter-spacing:0}
.qf-stepper li[aria-current]{color:var(--ink);border-bottom-color:var(--orange)}
.qf-stepper li[aria-current] span{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.qf-stepper li.done{color:var(--ink)}
.qf-stepper li.done span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#quote-mode{margin:0;padding:12px 28px;background:#fff3e9;color:#8a3a12;font-size:13px;border-bottom:1px solid var(--rule-l)}
.qf-step{padding:32px 28px 30px}
.qf [hidden]{display:none!important}
.qf-label,.qf-f>span:not(.qf-unit){display:block;font:700 12px/1 var(--display);text-transform:uppercase;letter-spacing:.1em;color:#5c5960;margin-bottom:9px}
.qf-f>span em{font-style:normal;color:var(--orange-hot)}

/* What have you got */
.qf-route{margin-bottom:22px}
.qf-route-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qf-route-row button{font:inherit;text-align:left;display:flex;flex-direction:column;gap:4px;padding:13px 15px;background:#fff;border:1px solid var(--rule-l);color:var(--ink);font-size:16px;font-weight:500;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.qf-route-row button small{font-size:12px;font-weight:400;color:var(--mute-l)}
.qf-route-row button[data-r=cad] small{color:var(--orange-hot)}
.qf-route-row button[aria-pressed=true]{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.qf-route-row button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.qf-tip{margin:14px 0 0;font-size:15px;line-height:1.55;color:#4a474e;max-width:62ch}

/* Drop zone */
.qf-drop{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;row-gap:4px;align-items:center;padding:24px;border:1.5px dashed #b7b4ad;background:#f6f5f0;cursor:pointer;transition:border-color .2s,background .2s}
.qf-drop:hover,.qf-drop.is-over,.qf-drop:focus-within{border-color:var(--orange);background:#fff}
.qf-drop-icon{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--grad);color:var(--ink);font-size:26px;line-height:1}
.qf-drop-main{font-size:17px}.qf-drop-main b{font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--orange)}
.qf-drop-sub{font-size:13px;color:var(--mute-l)}
.qf:not(.is-ready) .qf-drop{opacity:.55;pointer-events:none}
.qf-picked{margin:10px 0 0;font-size:14px;color:#4a474e}.qf-picked:empty{display:none}

/* Part cards */
.qf-parts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.qf-part{background:#fff;border:1px solid var(--rule-l);padding:16px 18px 14px}
.qf-part-head{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;margin-bottom:14px}
.qf-thumb{width:52px;height:52px;background:#ecebe6;display:grid;place-items:center;overflow:hidden}
.qf-thumb img{width:100%;height:100%;object-fit:cover}
.qf-ico{font:800 14px/1 var(--display);letter-spacing:.06em;color:#5c5960}
.qf-part[data-kind=cad] .qf-ico{color:var(--orange-hot)}
.qf-part-name{min-width:0;display:flex;flex-direction:column;gap:3px}
.qf-part-name b{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-kind{font-size:12px;color:var(--mute-l)}
.qf-part[data-kind=cad] .qf-kind{color:var(--orange-hot)}
.qf-remove{width:36px;height:36px;border:0;background:none;font-size:24px;line-height:1;color:#8d8a91;cursor:pointer}
.qf-remove:hover{color:var(--ink)}
.qf-part-fields{display:grid;grid-template-columns:96px minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.qf-part[data-kind=photo] .qf-part-fields{grid-template-columns:96px minmax(0,1.5fr) minmax(0,1fr) 150px}
.qf-f{display:block;margin:0}
.qf-f input,.qf-f select,.qf-f textarea,.qf-finish-btn{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid #cfcdc6;border-radius:0;padding:11px 12px;min-height:46px}
.qf-part .qf-f input,.qf-part .qf-f select,.qf-part .qf-finish-btn{background:#f9f8f5}
.qf-f textarea{resize:vertical;line-height:1.5}
.qf-f input:focus,.qf-f select:focus,.qf-f textarea:focus,.qf-finish-btn:focus-visible{outline:0;border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.qf-unit{display:flex;align-items:stretch}.qf-unit input{flex:1;min-width:0}
.qf-unit em{font-style:normal;display:grid;place-items:center;padding:0 10px;border:1px solid #cfcdc6;border-left:0;background:#ecebe6;font-size:13px;color:#5c5960}

/* Finish picker with colour balls */
.qf-finish{position:relative}
.qf-finish-btn{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}
.qf-finish-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-finish i,.qf-finish-pop li i{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 2px 4px -1px rgba(0,0,0,.3)}
.qf-finish-pop{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);min-width:280px;background:#fff;border:1px solid #cfcdc6;box-shadow:0 24px 50px -18px rgba(31,29,34,.45)}
.qf-finish-pop input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--rule-l);padding:12px;font:inherit;font-size:15px;outline:0}
.qf-finish-pop ul{list-style:none;margin:0;padding:6px 0;max-height:300px;overflow-y:auto}
.qf-finish-pop li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;font-size:14px}
.qf-finish-pop li small{font:700 12px/1 var(--display);letter-spacing:.06em;color:var(--orange-hot)}
.qf-finish-pop li:hover,.qf-finish-pop li:focus{background:#f6f5f0;outline:0}
.qf-finish-pop li[aria-selected=true]{background:#fff3e9}

/* Price line */
.qf-price{margin:12px 0 0;font-size:15px;line-height:1.5;min-height:22px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.qf-price strong{font:800 22px/1 var(--display);letter-spacing:.01em}
.qf-muted{color:var(--mute-l)}
.qf-warn{color:#a3361b}
.qf-dims{margin-left:auto;font-size:13px;color:var(--mute-l)}
.qf-retry{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.qf-spin{width:14px;height:14px;border-radius:50%;border:2px solid #d8d7d2;border-top-color:var(--orange);animation:qfspin .8s linear infinite;display:inline-block}
@keyframes qfspin{to{transform:rotate(360deg)}}

.qf-turnstile{margin-top:16px}
.qf-status{margin:14px 0 0;font-size:14px;color:#4a474e}.qf-status:empty{display:none}
.qf-total{margin-top:18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:16px 18px;background:var(--char);color:var(--paper)}
.qf-total span{font:700 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.qf-total strong{font:800 30px/1 var(--display);margin-left:auto}
.qf-total small{flex-basis:100%;text-align:right;font-size:13px;color:var(--mute-d)}
.qf-actions{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.qf-actions .btn{margin-left:auto}
.qf-actions .btn:disabled{opacity:.5;cursor:wait}

/* Details */
.qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.qf-step form,.qf-step>.qf-f{margin-bottom:16px}
#qf-step-details>.qf-f{margin-bottom:16px}
.qf-callback{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;padding:16px 18px;background:#fff;border:1px solid var(--rule-l)}
.qf-check{display:flex;align-items:center;gap:12px;font-size:16px;cursor:pointer;min-height:46px}
.qf-check input{width:22px;height:22px;accent-color:var(--orange);margin:0}
.qf-when{flex:1;min-width:180px;max-width:240px}
.qf-callback:not(:has(input:checked)) .qf-when{display:none}
.qf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qf-small{font-size:13px;color:var(--mute-l);margin:14px 0 0}
.qf-error{margin:10px 0 0;color:#a3361b;font-size:15px}.qf-error:empty{display:none}

/* Done */
.qf-done p{font-size:17px;line-height:1.6;max-width:52ch;margin:0 0 12px}
.qf-done strong{font-weight:500}
#qf-done-total strong{font:800 26px/1 var(--display)}
.qf-noscript{padding:28px}
.is-offline .qf-route,.is-offline .qf-drop{display:none}

@media (max-width:760px){
  .qf-stepper{padding:0 16px;gap:16px;font-size:12px}
  .qf-step{padding:24px 16px}
  .qf-route-row button{padding:11px;font-size:15px}
  .qf-drop{padding:18px;column-gap:14px}.qf-drop-icon{width:44px;height:44px}
  .qf-part-fields,.qf-part[data-kind=photo] .qf-part-fields{grid-template-columns:96px 1fr}
  .qf-part-fields .qf-finish{grid-column:1/-1;order:-1}
  .qf-part-fields .qf-length{grid-column:1/-1;max-width:240px}
  .qf-grid{grid-template-columns:1fr}
  .qf-actions{flex-direction:column-reverse;align-items:stretch}.qf-actions .btn{margin-left:0;justify-content:space-between}
}
@media (max-width:420px){.qf-stepper li{font-size:0;gap:0}.qf-stepper li[aria-current]{font-size:12px;gap:8px}}
@media (prefers-reduced-motion:reduce){.qf-spin{animation:none}}
.qf .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.qf-fallback{display:block;width:100%;min-height:640px;border:0;background:transparent}
.qf-small a{color:inherit;text-decoration:underline}
.qf-privacy{margin:10px 0 0;font-size:13px;line-height:1.5;color:#5c5960;padding-left:22px;position:relative}
.qf-privacy::before{content:"";position:absolute;left:0;top:1px;width:14px;height:14px;background:var(--orange-hot);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.qf-route-row button[data-r=cad] small,.qf-part[data-kind=cad] .qf-kind,.qf-part[data-kind=cad] .qf-ico,.qf-finish-pop li small{color:#a83c0c}
.qf-route-row button small,.qf-kind,.qf-drop-sub,.qf-muted,.qf-dims{color:#5c5960}
