/* Custom rug builder */
.builder-page{width:min(1220px,calc(100% - 32px));padding-top:22px}
.builder-intro{display:flex;justify-content:space-between;gap:28px;align-items:end;padding:0 0 18px;border-bottom:1px solid var(--line)}
.builder-intro h1{font-size:1.8rem;margin-bottom:7px}
.builder-intro p:not(.eyebrow){max-width:720px;margin:0;color:var(--muted)}
.builder-steps{display:flex;gap:8px;white-space:nowrap}
.builder-steps span{padding:7px 10px;border-bottom:3px solid var(--line);font-size:.82rem;font-weight:850;color:#7b838b}
.builder-steps .active{border-color:var(--orange);color:var(--ink)}

.rug-builder{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:26px;align-items:start;margin-top:22px}
.builder-controls{display:grid;gap:14px}
.builder-section{margin:0;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.builder-section legend{padding:0 8px 0 0;font-size:1.05rem;font-weight:900}
.builder-section legend>span{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:var(--ink);color:#fff;font-size:.82rem}
.field-help{margin:0 0 12px;color:var(--muted);font-size:.9rem}

.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.choice-card,.size-choice,.shape-choice{position:relative;cursor:pointer}
.choice-card input,.size-choice input,.shape-choice input,.color-picker input{position:absolute;opacity:0;pointer-events:none}
.choice-card{display:grid;grid-template-columns:38px 1fr;gap:1px 10px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:13px;min-height:92px}
.choice-card strong,.choice-card small{grid-column:2}
.choice-card small{color:var(--muted);line-height:1.35}
.choice-icon{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:5px;background:#e6f8f8;color:#087c80;font-weight:950}
.choice-card:nth-child(2) .choice-icon{background:#fff0df;color:#9a4300}
.choice-card:nth-child(3) .choice-icon{background:#fff5bd;color:#755b00}
.choice-card:has(input:checked),.size-choice:has(input:checked),.shape-choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choice-card:has(input:focus-visible),.size-choice:has(input:focus-visible),.shape-choice:has(input:focus-visible),.color-picker label:has(input:focus-visible){outline:3px solid rgba(11,139,220,.28);outline-offset:2px}

.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.size-choice{display:grid;text-align:center;border:1px solid var(--line);border-radius:6px;padding:11px 8px}
.size-choice strong{font-size:1.05rem}
.size-choice small{color:var(--muted)}
.size-choice:has(input:checked){background:#edfafa}
.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.shape-choice{display:grid;place-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:12px 8px;font-weight:800;font-size:.88rem}
.shape{display:block;width:42px;height:30px;background:var(--orange);border:2px solid #bd5100}
.shape.square{width:34px;height:34px;background:#f04f8b;border-color:#b51d57}
.shape.round{width:34px;height:34px;border-radius:50%;background:var(--teal);border-color:#087c80}
.shape.oval{width:42px;height:29px;border-radius:50%;background:#43b56c;border-color:#18723a}
.shape.octagon{width:36px;height:36px;background:#8a65cc;border:0;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
.shape.organic{height:34px;border-radius:55% 45% 58% 42%/42% 58% 42% 58%;background:var(--yellow);border-color:#a37c00;transform:rotate(-8deg)}
.shape.cutout{background:var(--blue);border-color:#0666a2;clip-path:polygon(50% 0,61% 34%,98% 34%,68% 55%,79% 93%,50% 70%,21% 93%,32% 55%,2% 34%,39% 34%)}

.color-picker{display:flex;flex-wrap:wrap;gap:9px}
.color-picker label{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 10px 6px 6px;cursor:pointer;font-size:.84rem;font-weight:800}
.color-picker i{display:block;width:25px;height:25px;border-radius:50%;background:var(--swatch);border:1px solid rgba(0,0,0,.2)}
.color-picker label:has(input:checked){border-color:var(--ink);background:#f2f5f6;box-shadow:inset 0 0 0 1px var(--ink)}
.color-picker label:has(input:checked)::after{content:'\2713';font-weight:950}
.color-message{min-height:20px;margin:8px 0 0;color:#a24b08;font-size:.84rem}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.builder-section label:not(.choice-card):not(.size-choice):not(.shape-choice):not(.upload-box){display:grid;gap:6px;font-weight:850}
.builder-section textarea{min-height:104px}
.upload-box{display:flex;align-items:center;gap:12px;margin:12px 0;border:2px dashed #bdc9ce;border-radius:6px;padding:15px;cursor:pointer;background:#fafcfc}
.upload-box:hover{border-color:var(--teal);background:#f1fbfb}
.upload-box input{position:absolute;width:1px;height:1px;opacity:0}
.upload-box:focus-within{outline:3px solid rgba(11,139,220,.28)}
.upload-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);color:#111;font-size:1.4rem;font-weight:900;flex:0 0 auto}
.upload-box span:last-child{display:grid}
.upload-box small{color:var(--muted);font-weight:500}

.builder-summary{position:sticky;top:84px;z-index:2;display:grid;gap:10px;height:max-content;align-self:start}
.preview-wrap,.estimate-panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px}
.preview-wrap{background:#eef8f8}
.preview-label{display:block;margin-bottom:11px;font-size:.78rem;font-weight:900;text-transform:uppercase;color:#4d5961}
.rug-preview{display:grid;place-items:center;aspect-ratio:1.55/1;max-height:230px;padding:18px;border:8px solid #202126;border-radius:14px;background:linear-gradient(135deg,#00aeb3 0 50%,#f47b20 50% 100%);box-shadow:0 14px 26px rgba(32,33,38,.16),inset 0 0 24px rgba(255,255,255,.3);transition:border-radius .25s,clip-path .25s,border-color .12s,filter .12s}
.rug-preview.square{aspect-ratio:1/1;width:min(78%,220px);margin-inline:auto;border-radius:8px}
.rug-preview.round{aspect-ratio:1/1;width:min(78%,220px);margin-inline:auto;border-radius:50%}
.rug-preview.oval{aspect-ratio:1.45/1;width:min(92%,280px);margin-inline:auto;border-radius:50%}
.rug-preview.octagon{border:0;clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);aspect-ratio:1/1;width:min(78%,220px);margin-inline:auto;padding:26px}
.rug-preview.organic{border-radius:56% 44% 62% 38%/42% 60% 40% 58%;transform:rotate(-2deg)}
.rug-preview.cutout{border:0;clip-path:polygon(50% 0,61% 34%,98% 34%,68% 55%,79% 93%,50% 70%,21% 93%,32% 55%,2% 34%,39% 34%);aspect-ratio:1/1;width:min(82%,230px);margin-inline:auto;padding:30px}
.rug-preview span{max-width:90%;overflow-wrap:anywhere;text-align:center;font-size:clamp(1.05rem,3vw,1.7rem);line-height:1.05;font-weight:950;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.7),1px 0 0 rgba(0,0,0,.7),-1px 0 0 rgba(0,0,0,.7)}
.preview-wrap p,.estimate-panel>p{margin:10px 0 0;color:var(--muted);font-size:.82rem}

.estimate-heading{display:flex;justify-content:space-between;gap:12px;align-items:end;padding-bottom:12px;border-bottom:1px solid var(--line)}
.estimate-heading span{font-weight:850}
.estimate-heading strong{font-size:1.35rem;color:#087c80}
.quote-summary{margin:12px 0 16px}
.quote-summary div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #edf0f1}
.quote-summary dt{color:var(--muted)}
.quote-summary dd{margin:0;text-align:right;font-weight:850}
.quote-submit{width:100%;background:var(--orange)!important}
.text-button{width:100%;border:0;background:transparent;padding:10px;color:#087c80;font:inherit;font-weight:850;cursor:pointer}
.form-note{text-align:center;min-height:20px}
.customer-section{border-top:4px solid var(--orange)}

@media(min-width:961px){.preview-wrap,.estimate-panel{padding:12px}
.preview-label{margin-bottom:6px}
.builder-summary .rug-preview{height:145px;max-height:145px;aspect-ratio:auto;padding:12px}
.builder-summary .rug-preview.square,.builder-summary .rug-preview.round,.builder-summary .rug-preview.octagon,.builder-summary .rug-preview.cutout{width:145px}
.builder-summary .rug-preview.oval{width:210px}
.builder-summary .rug-preview.octagon,.builder-summary .rug-preview.cutout{padding:20px}
.preview-wrap p,.estimate-panel>p{margin-top:7px;font-size:.78rem;line-height:1.35}
.estimate-heading{padding-bottom:8px}
.estimate-heading strong{font-size:1.18rem}
.quote-summary{margin:6px 0 10px;font-size:.84rem}
.quote-summary div{padding:4px 0}
.builder-summary .btn{padding:10px 12px}
.builder-summary .text-button{padding:7px}
.builder-summary .form-note{margin:0;font-size:.76rem}
}

.quote-dialog{width:min(560px,calc(100% - 28px));border:0;border-radius:8px;padding:24px;box-shadow:0 28px 80px rgba(0,0,0,.28)}
.quote-dialog::backdrop{background:rgba(15,20,22,.62)}
.dialog-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:#eef2f3;border-radius:50%;font-size:1.5rem;cursor:pointer}
.quote-dialog h2{font-size:1.35rem}
.dialog-summary{margin:18px 0;border-top:1px solid var(--line)}
.dialog-summary p{display:flex;justify-content:space-between;gap:20px;margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.dialog-summary strong{text-align:right}
.dialog-note{color:var(--muted);font-size:.9rem}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.quote-dialog #copy-note{min-height:22px;margin:8px 0 0;color:#087c80;font-weight:800;text-align:right}

@media(max-width:960px){.rug-builder{grid-template-columns:1fr}
.builder-summary{position:static;grid-template-columns:1fr 1fr}
.preview-wrap{display:grid;align-content:start}
.rug-preview{width:100%}
}

@media(max-width:700px){.builder-page{width:min(100% - 24px,1220px)}
.builder-intro{display:block}
.builder-steps{margin-top:14px;overflow-x:auto}
.choice-grid{grid-template-columns:1fr}
.size-grid,.shape-grid{grid-template-columns:repeat(2,1fr)}
.field-row,.builder-summary{grid-template-columns:1fr}
.builder-section{padding:15px}
.rug-preview{max-width:330px;margin-inline:auto}
.dialog-actions{flex-direction:column}
.dialog-actions .btn{width:100%}
}