.size-studio{background:#f5f2ea;border-top:1px solid #111;border-bottom:1px solid #111}.studio-layout{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid #111;margin-top:35px}.studio-preview{background:#d8c9f3;padding:25px;display:flex;flex-direction:column;justify-content:center;min-width:0}.studio-preview-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;border-bottom:1px solid #1115;padding-bottom:17px}.door-drawing{height:390px;display:flex;align-items:center;justify-content:center;position:relative;background-image:radial-gradient(#1c1c1c25 .7px,transparent .7px);background-size:15px 15px;margin-top:20px}.preview-door{position:relative;overflow:hidden;mix-blend-mode:multiply;transition:width .18s,height .18s}.preview-door img{width:250%;max-width:none;height:105%;position:absolute;left:-75%;top:-2.5%;object-fit:fill}.height-dimension{position:absolute;left:calc(50% - 160px);top:50%;transform:translateY(-50%);border-left:1px solid #111;display:flex;align-items:center}.height-dimension:before,.height-dimension:after{content:'';position:absolute;left:-5px;width:10px;border-top:1px solid #111}.height-dimension:before{top:0}.height-dimension:after{bottom:0}.height-dimension span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;background:#d8c9f3;padding:10px 5px;margin-left:-28px}.width-dimension{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);border-top:1px solid #111;text-align:center;padding-top:10px;font-size:11px}.width-dimension:before,.width-dimension:after{content:'';position:absolute;top:-5px;height:10px;border-left:1px solid #111}.width-dimension:before{left:0}.width-dimension:after{right:0}.width-dimension span{white-space:nowrap}.studio-preview>p{font-size:10px;text-align:center;margin:10px 0 0;color:#333}.studio-controls{padding:30px;background:white;border-left:1px solid #111}.studio-design{font-size:10px;letter-spacing:1px;display:grid;gap:12px;margin-bottom:25px}.studio-design select{font-size:16px;padding:12px}.size-control{border-top:1px solid #ddd;padding:20px 0 8px}.size-control>label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}.size-number{display:flex;align-items:center;gap:10px;margin:10px 0}.size-number button{height:38px;width:38px;border:1px solid #111;border-radius:50%;background:#fff;font-size:22px;flex-shrink:0}.size-number button:hover{background:var(--lime)}.size-number input{border:0;text-align:center;background:transparent;font-size:38px;font-weight:600;padding:0;line-height:1.2;appearance:textfield;-moz-appearance:textfield}.size-number input::-webkit-inner-spin-button,.size-number input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.size-control input[type=range]{padding:0;accent-color:#111;height:25px;background:transparent;border:0;cursor:ew-resize}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#555}.studio-reset{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 20px}.studio-reset span{font-size:8px;background:var(--lime);border:1px solid #111;border-radius:30px;padding:5px 9px;white-space:nowrap}.studio-reset button{font-size:10px;border:0;background:transparent;text-decoration:underline;color:#111}.studio-total{background:var(--lime);border:1px solid #111;padding:20px;margin-bottom:18px}.studio-total>div{display:flex;align-items:center;justify-content:space-between;gap:15px}.studio-total span{font-size:11px}.studio-total strong{font-size:30px;letter-spacing:-1px}.studio-total p{font-size:10px;color:#111;margin:8px 0 0}.studio-controls>.button{width:100%;font-size:11px}.studio-controls>.button:disabled{opacity:.4;cursor:not-allowed}.studio-pricing-note{font-size:10px;margin:15px 0 0;color:#555}#size-error{font-size:12px;color:#8d2600;border:1px solid #8d2600;padding:10px}.selected-door-size{padding:18px;border:1px solid #111;background:#fff9;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.selected-door-size[hidden]{display:none}.selected-door-size strong{font-size:12px;font-weight:500}.selected-door-size a{font-size:10px;text-decoration:underline;white-space:nowrap}@media(max-width:800px){.studio-layout{grid-template-columns:1fr 1fr}.studio-controls{padding:23px 20px}.studio-preview{padding:20px 12px}.height-dimension{left:15px}.studio-reset{align-items:start;flex-direction:column}.studio-total>div{align-items:start;flex-direction:column;gap:8px}.studio-total strong{font-size:30px}.studio-preview-top{letter-spacing:0;font-size:9px}}@media(max-width:580px){.studio-layout{grid-template-columns:1fr}.studio-preview{padding:22px}.studio-controls{border-left:0;border-top:1px solid #111;padding:25px 22px}.door-drawing{height:340px;margin-top:0}.height-dimension{left:10px}.width-dimension{bottom:8px}.studio-preview-top{font-size:9px}.studio-total>div{flex-direction:row;align-items:center}.studio-reset{flex-direction:row;align-items:center}.selected-door-size{flex-direction:column;align-items:start}.size-number input{font-size:36px}.size-studio .section-top>p{margin-bottom:0}}@media(prefers-reduced-motion:reduce){.preview-door{transition:none}}

/* Keep one fixed drawing scale so each control changes only its own dimension. */
.door-drawing{height:480px;align-items:flex-end;padding-bottom:50px}.preview-door{flex-shrink:0}.height-dimension{top:auto;bottom:50px;transform:none}.width-dimension{bottom:20px}@media(max-width:580px){.door-drawing{height:480px}}

@media(min-width:801px) and (max-height:850px){.studio-controls{padding:20px 25px}.studio-design{margin-bottom:15px;gap:8px}.size-control{padding:12px 0 6px}.size-number{margin:7px 0}.size-number input{font-size:32px}.studio-reset{margin:10px 0 12px}.studio-total{padding:15px;margin-bottom:12px}.studio-pricing-note{margin-top:10px}}
.wp-service-links{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin-top:20px}

/* A larger drawing with an independent, scrollable stage for oversize doors. */
.door-drawing{display:block;height:auto;min-height:450px;padding:0;overflow:auto;align-items:normal}
.door-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:100%;padding-bottom:50px}
@media(max-width:580px){.door-drawing{height:auto;min-height:450px}}