body.quote-modal-open {
    overflow: hidden;
}

.quote-modal[hidden] {
    display: none;
}

.quote-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
    background: rgb(0 0 0 / .78);
}

.quote-modal-panel {
    position: relative;
    width: min(820px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    border-radius: 22px;
    background: #080a0d;
    color: #fff;
    box-shadow: 0 18px 48px rgb(0 0 0 / .65);
}

@media (min-width: 701px) {
    #quote-dialog .quote-modal-panel {
        width: min(820px, calc(100vw - 48px));
        max-height: calc(100dvh - 48px);
        transform: none;
    }
}

.quote-modal-close {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: #050505;
    color: #fff;
    font: 700 28px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.experience-modal-panel {
    width: min(504.225px, calc(60.75vw - 29.16px));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.things-modal-panel {
    width: min(483px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    overscroll-behavior: contain;
}

.things-zoom-viewport::-webkit-scrollbar-track {
    margin-block: 0;
}

.things-modal-panel .experience-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.things-zoom-viewport {
    width: 100%;
    max-height: calc(100dvh - 48px);
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: none;
    cursor: grab;
}

.things-zoom-viewport:active {
    cursor: grabbing;
}

.things-zoom-image {
    width: 100%;
    height: auto;
    max-width: none;
    user-select: none;
}

.things-zoom-controls {
    position: absolute;
    z-index: 4;
    top: 25px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    width: max-content;
    margin: 0 auto;
}

.things-zoom-controls button {
    min-height: 35.2px;
    padding: 7.2px 8.8px;
    border: 1px solid var(--blue);
    border-radius: 5px;
    background: rgb(5 5 5 / .88);
    color: #fff;
    font: 700 9.6px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

@media (max-width: 400px) {
    .things-zoom-controls {
        gap: 4px;
    }

    .things-zoom-controls button {
        padding: 7.2px 4.8px;
        font-size: 8.8px;
    }
}

.experience-modal-image {
    display: block;
    width: 100%;
    height: auto;
}

.experience-modal :is(button, a):focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--electric-blue);
}


.quote-form-canvas { position: relative; width: 100%; aspect-ratio: 820 / 834; }
.quote-form-artwork { position:absolute; inset:0; display:block; width:100%; height:100%; }
.quote-request-form { position:absolute; z-index:2; inset:0; }

.quote-dialog-heading,.quote-field-label,.quote-choice-group legend,
.quote-contact-method label span,.quote-artwork-status label span,.quote-consent-text,
.visually-hidden {
    position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
    margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important;
    white-space:nowrap!important; border:0!important;
}
.quote-field { position:absolute; left:43.9%; width:38.6%; height:3.65%; }
.quote-field input,.quote-field select {
    width:100%; height:100%; min-width:0; border:0; border-radius:10px; outline:0;
    background:transparent; color:#050505; font:400 16px/1.2 Arial,Helvetica,sans-serif;
}
.quote-field input { padding:3px 9px; }
.quote-field select { padding:2px 28px 2px 9px; }
.quote-field-first-name{top:22.8%}.quote-field-email{top:27.35%}.quote-field-phone{top:31.9%}
.quote-field-project-type{top:45.65%;left:43.9%;width:39.3%}
.quote-field-material{top:50.55%;left:43.9%;width:39.3%}
.quote-field-quantity{top:55.5%;left:43.9%;width:39.3%}
.quote-field-size{top:60.35%;left:43.9%;width:39.3%}
.quote-field-needed-by{top:65.3%;left:43.9%;width:39.3%}

.quote-choice-group { position:absolute; min-width:0; margin:0; padding:0; border:0; }
.quote-contact-method { top:38.5%; left:49.4%; display:flex; gap:46px; }
.quote-contact-method label,.quote-artwork-status label { display:flex; align-items:center; cursor:pointer; }
.quote-contact-method input { width:13px; height:13px; margin:2px; accent-color:var(--blue); }

.quote-artwork-status { top:70.45%; left:84%; display:grid; gap:5px; }
.quote-artwork-status input { width:18px; height:18px; margin:0; accent-color:var(--blue); }

.quote-upload-field { position:absolute; top:74.45%; left:11.8%; width:19.6%; text-align:center; }
.quote-upload-button {
    display:grid; place-items:center; min-height:31px; border-radius:999px;
    color:transparent; font:400 18px/1 Arial,Helvetica,sans-serif; cursor:pointer;
}
.quote-upload-filename {
    position:absolute; top:58px; left:-8%; width:116%; padding:2px 4px;
    background:#000; overflow:hidden; color:#fff; font-size:12px; line-height:1.25;
    text-align:center; text-overflow:ellipsis; white-space:nowrap;
}

.quote-consent-field { position:absolute; z-index:3; top:90.0%; left:17.3%; width:66%; background:transparent; padding:0; border:0; box-shadow:none; }
.quote-consent-field>label {
    display:block; width:100%; min-height:24px;
    background:transparent; padding:0; border:0; box-shadow:none;
}
.quote-consent-field input {
    position:absolute; left:0; top:0; width:18px; height:18px; margin:0;
    padding:0; border:0; box-shadow:none; background:transparent;
    accent-color:var(--blue);
}
.quote-inline-error {
    display:block; margin-top:26px; padding:5px 8px; border-left:4px solid #ff5252;
    background:#180707; color:#fff; font-size:13px; line-height:1.25;
}
.quote-inline-error[hidden]{display:none}

.quote-submit-button {
    position:absolute; top:84.05%; left:40%; width:20%; height:4.6%; border:0;
    border-radius:999px; background:transparent; color:transparent; font-size:16px; cursor:pointer;
}
/* Artwork already contains SUBMIT. Disabled state changes ONLY the word via an overlay. */
.quote-submit-button::after {
    content:"SUBMIT"; position:absolute; inset:0; display:grid; place-items:center;
    color:#fff; font:400 18px/1 Arial,Helvetica,sans-serif; pointer-events:none;
}
.quote-submit-button:disabled { background:transparent; cursor:not-allowed; }
.quote-submit-button:disabled::after { color:#777; }

.quote-sent-confirmation {
    position:absolute; z-index:3; top:84.78%; left:50%; display:block; width:124px; height:29px;
    transform:translateX(-50%);
}
.quote-sent-confirmation[hidden]{display:none}
.quote-form-status { padding:0 24px; color:#fff; font-size:16px; line-height:1.45; text-align:center; }
.quote-form-status:not(:empty){padding-top:18px;padding-bottom:22px;border-top:1px solid var(--blue)}
.quote-form-status a{color:var(--blue);font-weight:700}
.quote-modal :is(button,input,select,.quote-upload-button,a):focus-visible {
    outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px var(--electric-blue);
}

@media (max-width:700px){
    .quote-modal{align-items:flex-start;padding:12px}
    #quote-dialog .quote-modal-panel{width:100%;max-height:calc(100dvh - 24px);transform:none;border:2px solid var(--electric-blue);border-radius:16px}
    .quote-modal-close{top:12px;right:12px}
    .quote-form-canvas{width:100%;aspect-ratio:auto;padding:66px 18px 24px}
    .quote-form-artwork{display:none}
    .quote-request-form{position:static;display:grid;gap:16px}
    .quote-dialog-heading,.quote-field-label,.quote-choice-group legend,
    .quote-contact-method label span,.quote-artwork-status label span,.quote-consent-text{
        position:static!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;
        overflow:visible!important;clip:auto!important;white-space:normal!important;border:0!important
    }
    .quote-dialog-heading{padding-right:48px!important;color:var(--blue);font-family:"Amaranth",sans-serif;font-size:30px;line-height:1.1;text-align:center}
    .quote-field,.quote-choice-group,.quote-upload-field,.quote-consent-field,.quote-submit-button{
        position:static;width:100%;height:auto
    }
    .quote-field{display:grid;gap:6px}
    .quote-field-label,.quote-choice-group legend{color:#fff;font-size:17px;font-weight:700}
    .quote-field input,.quote-field select{
        min-height:48px;border:2px solid var(--electric-blue);border-radius:10px;background:var(--page-gray);color:#050505;font-size:16px
    }
    .quote-choice-group{display:grid;gap:10px}
    .quote-contact-method{grid-template-columns:repeat(2,minmax(0,1fr))}
    .quote-choice-group label{display:flex;gap:9px;align-items:center;min-height:32px;color:#fff;font-size:16px}
    .quote-contact-method input,.quote-artwork-status input,.quote-consent-field input{
        position:static;flex:0 0 auto;width:22px;height:22px;margin:0
    }
    .quote-upload-field{display:grid;gap:8px;text-align:left}
    .quote-upload-button{
        width:max-content;min-height:44px;padding:8px 20px;border:2px solid var(--electric-blue);
        background:#00ffff;color:#050505;font-size:17px
    }
    .quote-upload-filename{position:static;width:100%;padding:0;background:transparent;color:#fff;font-size:14px;white-space:normal}
    .quote-consent-field>label{display:flex;gap:10px;align-items:flex-start;min-height:0;color:#fff;font-size:15px;line-height:1.4}
    .quote-inline-error{margin-top:8px;font-size:15px}
    .quote-submit-button{
        position:relative;min-height:48px;border:2px solid var(--electric-blue);background:#050505;color:transparent;font-size:18px;font-weight:700
    }
    .quote-submit-button::after{font-size:18px;font-weight:700}
    .quote-submit-button:disabled::after{color:#777}
    .quote-sent-confirmation{position:static;margin:0 auto;transform:none}
}

@media (min-width:701px) {
    .quote-submit-button { font-size: 0; }
    .quote-submit-button::after { content:"SUBMIT"; color:#fff; font:400 18px/1 Arial,Helvetica,sans-serif; }
    .quote-submit-button:disabled::after { color:#777; }
}