/* --------------------------------------------------------------------------
   The price quote page (views/quote/show)

   The product the reader came from on the left, the form on the right. The
   form keeps the site's own underline fields; only the select is new, and it is
   drawn to match them.
   -------------------------------------------------------------------------- */

.q-hero .s-hero__lead {
    max-width: 60ch;
}

.q-grid {
    display: grid;
    gap: var(--v2-s5);
}

@media (min-width: 900px) {
    .q-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: var(--v2-s6);
        align-items: start;
    }

    .q-product {
        position: sticky;
        top: var(--v2-s5);
    }
}

.q-product__figure {
    margin: 0 0 var(--v2-s3);
    padding: var(--v2-s3);
    background: var(--v2-paper-sunk);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
}

.q-product__figure img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Not upper-cased: in Turkish that turns ViMEAS into VİMEAS. */
.q-product__family {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--v2-ink-mute);
}

.q-product__name {
    margin: var(--v2-s1) 0 var(--v2-s2);
    font: 700 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem)/1.2 var(--v2-head-font);
}

.q-product__back {
    font-size: 0.9375rem;
}

.q-product__heading {
    margin: var(--v2-s4) 0 var(--v2-s2);
    padding-top: var(--v2-s3);
    border-top: 1px solid var(--v2-rule);
    font: 700 1rem/1.3 var(--v2-head-font);
}

.q-steps {
    margin: 0;
    padding-left: 1.25em;
    display: grid;
    gap: var(--v2-s1);
    color: var(--v2-ink-soft);
}

.q-main .v2-h2 {
    margin-bottom: var(--v2-s4);
}

/* The form fills its own column here rather than the contact band's right half. */
.q-form.v2-form {
    margin-top: 0;
}

@media (min-width: 900px) {
    .q-form.v2-form {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.v2-field select {
    min-height: 48px;
    padding: var(--v2-s2) 2rem var(--v2-s2) 0;
    border: 0;
    border-bottom: 1px solid var(--v2-rule);
    border-radius: 0;
    background: transparent 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='M1 1l5 5 5-5' fill='none' stroke='%23131a24' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0.25rem center;
    color: inherit;
    font: 600 1rem/1.5 var(--v2-sans);
    appearance: none;
    cursor: pointer;
}

.v2-field select:focus {
    outline: 0;
    border-bottom-color: var(--v2-accent);
}

.q-main .v2-form__sent {
    margin-top: calc(-1 * var(--v2-s2));
}