/* ===========================================================================
 * Public Quote Viewer - page-specific styles
 * ---------------------------------------------------------------------------
 * Layered ON TOP of the storefront's store-style.css, which is copied in at
 * build time. Everything here is either new to this page (quote layout, user
 * chip, success/error states) or a correction for the fact that this page has
 * no hero section. Brand colours, buttons, modals, forms and toasts all come
 * from store-style.css untouched, so the two surfaces cannot drift apart.
 * =========================================================================== */

/* The browser's own `[hidden] { display: none }` rule is weak (UA stylesheet), so
   ANY class here that sets `display` silently defeats it — the element stays on
   screen even with the hidden attribute set. That bit the guest banner (shown to
   signed-in users), the PDF spinner (stuck over the loaded PDF) and the invoice
   due-date cell. Make `hidden` mean hidden, everywhere. */
[hidden] {
    display: none !important;
}

/* The storefront nav is fixed and overlays a hero. Here there is no hero, so
   the content needs to start below it. */
.quote-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 7rem 1.5rem 5rem;
    min-height: 70vh;
}

/* ---------------------------------------------------------------------------
 * Signed-in menu
 * The chip itself reuses the storefront's .account-switcher classes verbatim, so
 * it is styled by store-style.css and matches the store pixel for pixel. Only the
 * menu items inside the dropdown are new.
 * ------------------------------------------------------------------------- */
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.75rem;
    margin-top: 0.15rem;
    background: none;
    border: none;
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.875rem;
    color: var(--gray-700);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.user-menu-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.user-menu-item i {
    width: 16px;
    color: var(--gray-400);
}

.user-menu-danger:hover {
    background: #fef2f2;
    color: var(--error-color);
}

.user-menu-danger:hover i {
    color: var(--error-color);
}

/* ---------------------------------------------------------------------------
 * Loading state
 * ------------------------------------------------------------------------- */
.quote-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 6rem 1rem;
    text-align: center;
    color: var(--gray-500);
}

.quote-loading-logo img {
    width: 72px;
    height: auto;
    animation: quotePulse 1.6s ease-in-out infinite;
}

@keyframes quotePulse {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50%      { opacity: 1;    transform: scale(1); }
}

.quote-loading-bar {
    width: 200px;
    height: 4px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
}

.quote-loading-bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--primary-color);
    animation: quoteSlide 1.2s ease-in-out infinite;
}

@keyframes quoteSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ---------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------- */
.quote-panel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.quote-panel + .quote-panel {
    margin-top: 1.5rem;
}

.quote-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.quote-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
}

.quote-panel-head h2 i {
    color: var(--primary-dark);
    font-size: 0.9rem;
}

.quote-panel-count {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Guest banner
 * ------------------------------------------------------------------------- */
.guest-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(13, 212, 197, 0.3);
    background: linear-gradient(135deg, rgba(13, 212, 197, 0.09), rgba(13, 212, 197, 0.02));
}

.guest-banner-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--primary-dark);
    font-size: 1.4rem;
    box-shadow: var(--shadow-sm);
}

.guest-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.guest-banner-text strong {
    color: var(--gray-900);
    font-size: 0.95rem;
}

.guest-banner-text span {
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: 1.55;
}

.guest-banner-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.guest-banner-actions .btn-modal {
    white-space: nowrap;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Quote header
 * ------------------------------------------------------------------------- */
.quote-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.quote-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 0.35rem;
}

.quote-number {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    line-height: 1.1;
}

.quote-header-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}

.quote-header-customer {
    color: var(--gray-600);
    font-size: 0.95rem;
    font-weight: 500;
}

.quote-header-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.quote-header-total-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.quote-header-total-value {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

/* Status badges. The storefront derives its class from the raw Books status;
   here they are mapped to four stable buckets in statusClass(). */
.status-badge.qs-open {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge.qs-accepted {
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.qs-declined {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge.qs-expired {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
}

/* ---------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------- */
.quote-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.75rem;
    align-items: start;
}

.quote-rail {
    position: sticky;
    top: 6.5rem;
}

/* ---------------------------------------------------------------------------
 * Facts
 * ------------------------------------------------------------------------- */
.quote-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem 1.5rem;
    padding: 1.5rem;
}

.quote-fact {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.quote-fact-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.quote-fact-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
 * Items table
 * ------------------------------------------------------------------------- */
.quote-items-scroll {
    overflow-x: auto;
}

.quote-items {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.quote-items thead th {
    padding: 0.85rem 1.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-500);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.quote-items tbody td {
    padding: 1.05rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.quote-items tbody tr:last-child td {
    border-bottom: none;
}

.quote-items .col-qty,
.quote-items .col-rate,
.quote-items .col-total {
    text-align: right;
    white-space: nowrap;
}

.quote-items .col-total {
    font-weight: 700;
    color: var(--gray-900);
}

.quote-item-name {
    display: block;
    font-weight: 600;
    color: var(--gray-900);
}

.quote-item-sku {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.quote-item-desc {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--gray-500);
}

/* Books product blurbs run to a dozen lines and push the price out of view. */
.quote-item-desc.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quote-item-more {
    margin-top: 0.35rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
}

.quote-item-more:hover {
    text-decoration: underline;
}

.quote-items-empty {
    text-align: center;
    color: var(--gray-500);
    padding: 2.5rem 1.5rem;
}

/* ---------------------------------------------------------------------------
 * Totals
 * ------------------------------------------------------------------------- */
.quote-totals {
    padding: 1.25rem 1.5rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.quote-total-row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-left: auto;
    max-width: 340px;
}

.quote-total-grand {
    margin-top: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gray-300);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-900);
}

/* ---------------------------------------------------------------------------
 * Addresses & notes
 * ------------------------------------------------------------------------- */
.quote-addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.quote-address-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}

.quote-address-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--gray-700);
}

.quote-notes {
    padding: 1.5rem;
    display: grid;
    gap: 1.5rem;
}

.quote-note-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.45rem;
}

.quote-note p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--gray-600);
}

/* Collapsed terms: a page of boilerplate should not outrank the quote itself. */
.quote-terms summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-50);
    transition: border-color var(--transition-fast);
}

.quote-terms summary::-webkit-details-marker {
    display: none;
}

.quote-terms summary:hover {
    border-color: var(--primary-color);
}

.quote-terms summary .quote-note-label {
    margin-bottom: 0;
}

.quote-terms-hint {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.quote-terms-hint::after {
    content: ' \25BE';
}

.quote-terms[open] .quote-terms-hint::after {
    content: ' \25B4';
}

.quote-terms p {
    margin: 1rem 0 0;
    padding: 0 0.25rem;
    max-height: 320px;
    overflow-y: auto;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--gray-500);
}

/* ---------------------------------------------------------------------------
 * PDF
 * ------------------------------------------------------------------------- */
.quote-panel-actions {
    display: flex;
    gap: 0.5rem;
}

.quote-pdf-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quote-pdf-action:hover {
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

.quote-pdf-frame {
    position: relative;
    height: 640px;
    background: var(--gray-100);
}

.quote-pdf-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.quote-pdf-loading,
.quote-pdf-failed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 0.9rem;
    z-index: 2;
}

.quote-pdf-failed i {
    font-size: 2rem;
    color: var(--gray-400);
}

.quote-pdf-failed p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * Action rail
 * ------------------------------------------------------------------------- */
.quote-action-card {
    padding: 1.5rem;
}

.quote-action-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1.15rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.quote-action-total span {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}

.quote-action-total strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.btn-accept {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1.05rem 1.5rem;
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #06322e;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(13, 212, 197, 0.8);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn-accept:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px rgba(13, 212, 197, 0.9);
}

.btn-accept:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.quote-action-fineprint {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--gray-500);
    text-align: center;
}

.quote-closed-note {
    display: flex;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--gray-600);
}

.quote-closed-note i {
    color: var(--primary-dark);
    margin-top: 0.15rem;
}

.quote-action-secondary {
    display: grid;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}

.quote-link-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.5rem;
    background: none;
    border: none;
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quote-link-btn:hover {
    background: var(--gray-50);
    color: var(--primary-dark);
}

.quote-link-btn i {
    width: 16px;
    color: var(--gray-400);
}

.quote-link-btn:hover i {
    color: var(--primary-dark);
}

/* Trust strip */
.quote-trust {
    padding: 1.25rem 1.5rem;
    display: grid;
    gap: 1.1rem;
}

.quote-trust-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.quote-trust-item i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(13, 212, 197, 0.12);
    color: var(--primary-dark);
    font-size: 0.85rem;
}

.quote-trust-item strong {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-900);
}

.quote-trust-item span {
    display: block;
    font-size: 0.78rem;
    color: var(--gray-500);
}

/* ---------------------------------------------------------------------------
 * Error state
 * ------------------------------------------------------------------------- */
.quote-error-panel,
.quote-success-panel {
    max-width: 640px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
    text-align: center;
}

.quote-error-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
    font-size: 1.9rem;
}

.quote-error-panel h1,
.quote-success-panel h1 {
    margin: 0 0 0.85rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gray-900);
}

.quote-error-message {
    margin: 0 0 1.75rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.quote-error-detail {
    padding: 0.85rem 1rem;
    margin-bottom: 1.75rem;
    border-radius: var(--radius);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    text-align: left;
}

.quote-error-detail-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.3rem;
}

.quote-error-detail code {
    font-size: 0.8rem;
    color: var(--gray-600);
    word-break: break-word;
}

.quote-error-actions,
.quote-success-actions,
.confirm-accept-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.quote-error-actions .btn-modal,
.quote-success-actions .btn-modal {
    text-decoration: none;
}

.quote-error-help {
    margin: 1.75rem 0 0;
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* ---------------------------------------------------------------------------
 * Success state
 * ------------------------------------------------------------------------- */
.quote-success-icon {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #06322e;
    font-size: 2.2rem;
    box-shadow: 0 12px 30px -10px rgba(13, 212, 197, 0.85);
    animation: quotePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes quotePop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.quote-success-sub {
    margin: 0 0 2rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.quote-success-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.quote-success-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.quote-success-cell span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.quote-success-cell strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    word-break: break-word;
}

.btn-pay {
    max-width: 320px;
    margin: 0 auto;
}

.quote-success-next {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}

.quote-success-next h2 {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
}

.quote-success-next p {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--gray-600);
}

/* ---------------------------------------------------------------------------
 * Confirm-accept modal
 * ------------------------------------------------------------------------- */
.confirm-accept-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(13, 212, 197, 0.12);
    color: var(--primary-dark);
    font-size: 1.6rem;
}

/* ---------------------------------------------------------------------------
 * Footer
 * The storefront's .footer is used verbatim, so all of its styling (including the
 * animated starfield) comes from store-style.css. Nothing to add here.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Quiet secondary button
 * The storefront's .btn-modal-secondary is amber, which reads as a warning next to
 * a primary action - wrong signal for "Call us" or "Download PDF". These are calm,
 * secondary choices, so give them a calm, secondary style.
 * ------------------------------------------------------------------------- */
.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-quiet:hover {
    border-color: var(--primary-color);
    color: var(--primary-dark);
    background: var(--gray-50);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .quote-layout {
        grid-template-columns: 1fr;
    }

    /* Un-stick the rail once it stacks, otherwise it pins mid-scroll. */
    .quote-rail {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {
    .quote-page {
        padding: 6rem 1rem 3rem;
    }

    .guest-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .guest-banner-actions {
        width: 100%;
    }

    .guest-banner-actions .btn-modal {
        flex: 1;
        justify-content: center;
    }

    .quote-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .quote-header-total {
        align-items: flex-start;
    }

    .quote-pdf-frame {
        height: 480px;
    }

    .quote-error-panel,
    .quote-success-panel {
        padding: 2.5rem 1.5rem;
    }

    .quote-error-actions .btn-modal,
    .quote-success-actions .btn-modal,
    .confirm-accept-actions .btn-modal {
        width: 100%;
        justify-content: center;
    }

    /* Keep the nav phone number from crowding out the sign-in control. */
    .help-btn span {
        display: none;
    }
}