/* Quotes list (roadmap 375): find, filter, sort, send, re-send, duplicate.
   Builds on live quotes-redesign.css; navy design tokens (--ds-*) only. */

.top .q375-topspace { visibility: hidden }

/* ---- Toolbar: find box first ---- */
.quotes-queue .q375-toolbar { gap: 8px 10px; padding: 10px 22px }
.quotes-queue .q375-search { position: relative; display: flex; align-items: center; flex: 1 1 340px; max-width: 460px; min-width: 240px }
.quotes-queue .q375-search svg { position: absolute; left: 11px; width: 16px; height: 16px; stroke: var(--ds-icon); pointer-events: none }
.quotes-queue .q375-search input { box-sizing: border-box; width: 100%; min-height: 34px; padding: 7px 34px 7px 34px; border: 1px solid var(--ds-field); border-radius: var(--ds-r-lg); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-base) }
.quotes-queue .q375-search input::placeholder { color: var(--ds-ink-3) }
.quotes-queue .q375-search input:focus { outline: 2px solid var(--ds-focus); outline-offset: -1px }
.quotes-queue .q375-search input::-webkit-search-cancel-button { cursor: pointer }
.quotes-queue .q375-search kbd, .quotes-queue .q375-keys kbd { font: inherit; font-size: 11px; line-height: 16px; min-width: 18px; padding: 0 5px; border: 1px solid var(--ds-line); border-bottom-width: 2px; border-radius: var(--ds-r-sm); background: var(--ds-canvas); color: var(--ds-ink-2); text-align: center; box-sizing: border-box }
.quotes-queue .q375-search kbd { position: absolute; right: 9px; pointer-events: none }
.quotes-queue .q375-search.has-q kbd, .quotes-queue .q375-search input:focus + kbd { display: none }
.quotes-queue .qf-views-trigger.is-on { border-color: var(--ds-action); color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-action) }
.quotes-queue .qf-sr-only, .qf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Views popover */
.quotes-queue .q375-views-pop { width: 340px }
.quotes-queue .q375-views { max-height: 380px }
.quotes-queue .q375-group { margin: 8px 9px 4px; font-size: var(--ds-text-caps); font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-caps); text-transform: uppercase; color: var(--ds-ink-3) }
.quotes-queue .q375-view .qf-option-label { white-space: normal; display: flex; flex-direction: column; gap: 1px }
.quotes-queue .q375-view .qf-option-label small { font-size: var(--ds-text-sm); color: var(--ds-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.quotes-queue .q375-view.selected { background: var(--ds-sel-bg) }
.quotes-queue .q375-saveview { display: flex; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--ds-line); background: var(--ds-canvas) }
.quotes-queue .q375-saveview input { flex: 1; min-height: 34px; padding: 7px 10px; border: 1px solid var(--ds-field); border-radius: var(--ds-r-md); font: inherit; font-size: var(--ds-text-base); background: var(--ds-surface); color: var(--ds-ink) }
.quotes-queue .q375-saveview input:focus { outline: 2px solid var(--ds-focus); outline-offset: -1px }
.quotes-queue .qf-link[disabled] { color: var(--ds-disabled-fg); cursor: not-allowed }
.quotes-queue .q375-swatch { width: 10px; height: 10px; border-radius: var(--ds-r-full); flex: none; background: var(--ds-skeleton); box-shadow: inset 0 0 0 1px var(--ds-line) }

/* ---- Rows ---- */
.quotes-queue mark.q375-hit { background: color-mix(in srgb, var(--ds-st-site) 16%, var(--ds-surface)); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-st-site) 22%, var(--ds-surface)) }
.quotes-queue .qr-id .q375-exact { display: block; margin-top: 4px; font-size: 11px; font-weight: var(--ds-w-medium); color: var(--ds-ink-3); white-space: nowrap }
.quotes-queue .quote-row.q375-exactrow { box-shadow: inset 3px 0 0 var(--ds-st-site) }
.quotes-queue .quote-row.selected.q375-exactrow { box-shadow: inset 3px 0 0 var(--ds-selection) }
.quotes-queue .q375-copied { display: block; margin-top: 4px; font-size: var(--ds-text-sm); color: var(--ds-ink-3) }
.quotes-queue .qr-email small { display: block; color: var(--ds-ink-3); font-size: 11px; margin-top: 2px }
.quotes-queue .qr-state.sent-simpro::before { background: var(--ds-st-done) }
.quotes-queue .quote-row.q375-flash { animation: q375-flash 2.4s ease-out }
@keyframes q375-flash { 0%, 30% { background: var(--ds-st-site-bg) } 100% { background: var(--ds-surface) } }

/* Action cell: Send / Re-send, Duplicate, More, expand */
.quotes-queue .q375-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px }
.quotes-queue .q375-act { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); background: var(--ds-surface); color: var(--ds-ink-2); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-w-semi); white-space: nowrap; cursor: pointer; margin-right: 4px }
.quotes-queue .q375-act svg, .quotes-queue .q375-icon svg { width: 14px; height: 14px; stroke: var(--ds-icon); flex: none }
.quotes-queue .q375-act:hover { border-color: var(--ds-field); color: var(--ds-ink); background: var(--ds-surface) }
.quotes-queue .q375-act:hover svg, .quotes-queue .q375-icon:hover svg { stroke: var(--ds-ink) }
.quotes-queue .q375-act[disabled] { color: var(--ds-disabled-fg); background: var(--ds-disabled-bg); border-color: var(--ds-line); cursor: not-allowed }
.quotes-queue .q375-act[disabled] svg { stroke: var(--ds-disabled-fg) }
.quotes-queue .q375-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--ds-r-md); background: none; cursor: pointer }
.quotes-queue .q375-icon:hover, .quotes-queue .q375-icon[aria-expanded="true"] { background: var(--ds-surface); border-color: var(--ds-line) }
.quotes-queue .q375-act:focus-visible, .quotes-queue .q375-icon:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px }
.quotes-queue .q375-actions .qr-chevron { width: 16px; margin-left: 4px; color: var(--ds-ink-3) }
/* Calm by default: row actions sit at reduced weight until the row is hovered, focused or open. */
@media (hover: hover) {
  .quotes-queue .quote-row .q375-act { border-color: transparent; background: none }
  .quotes-queue .quote-row:hover .q375-act, .quotes-queue .quote-row:focus-within .q375-act, .quotes-queue .quote-row.selected .q375-act { border-color: var(--ds-line); background: var(--ds-surface) }
  .quotes-queue .quote-row .q375-act[disabled] { border-color: transparent; background: none }
}
@media (max-width: 980px) {
  .quotes-queue .q375-act, .quotes-queue .q375-icon[data-qa="dup"], .quotes-queue .q375-actions .qr-chevron { display: none }
}
.quotes-queue .q375-acthead { min-height: 1px }
.quotes-queue .q375-elsewhere { display: flex; align-items: center; gap: 10px; padding: 9px 24px; border-bottom: 1px solid var(--ds-line); background: var(--ds-canvas); color: var(--ds-ink-2); font-size: var(--ds-text-sm) }
.quotes-queue .q375-elsewhere .qf-link { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 2px }
.quotes-queue .qf-empty .reset + .reset { margin-left: 8px }

/* Footer keyboard hints */
.quotes-queue .queue-foot { display: flex; align-items: center; gap: 6px }
.quotes-queue .q375-keys { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ds-ink-3); font-size: 11px }
.quotes-queue .q375-keys kbd + kbd { margin-left: -1px }
.quotes-queue .q375-keys kbd:not(:first-child) { margin-left: 6px }
.quotes-queue .q375-keys kbd + kbd { margin-left: 2px }
@media (max-width: 980px) { .quotes-queue .q375-keys { display: none } }

/* ---- Row menu ---- */
.q375-menu { position: fixed; z-index: 1002; width: 224px; padding: 5px; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e-pop); animation: qf-pop .1s ease }
.q375-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: var(--ds-r-md); background: none; color: var(--ds-ink); font: inherit; font-size: var(--ds-text-base); text-align: left; cursor: pointer }
.q375-mi svg { width: 15px; height: 15px; stroke: var(--ds-icon); flex: none }
.q375-mi:hover, .q375-mi:focus-visible { background: var(--ds-paper-hover); outline: none }
.q375-mi:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-focus) }
.q375-mi[disabled] { color: var(--ds-disabled-fg); cursor: not-allowed }
.q375-msep { display: block; height: 1px; margin: 5px 4px; background: var(--ds-line) }

/* ---- Send sheet and duplicate dialog ---- */
.q375-scrim { position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--ds-brand-ink) 28%, transparent) }
@keyframes q375-fade { from { opacity: 0 } to { opacity: 1 } }
.q375-sheet, .q375-dialog { position: fixed; z-index: 1001; display: flex; flex-direction: column; background: var(--ds-surface); box-shadow: var(--ds-e-pop); color: var(--ds-ink) }
.q375-sheet { top: 0; right: 0; bottom: 0; width: min(500px, 100vw) }
@keyframes q375-slide { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
.q375-dialog { top: 50%; left: 50%; width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 64px); transform: translate(-50%, -50%); border-radius: var(--ds-r-lg) }
.q375-sheet header, .q375-dialog header { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ds-line) }
.q375-sheet header > div, .q375-dialog header > div { flex: 1; min-width: 0 }
.q375-sheet h2, .q375-dialog h2 { margin: 0; font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-display-track); font-size: var(--ds-text-d2); line-height: var(--ds-lh-d2) }
.q375-sub { margin: 4px 0 0; font-size: var(--ds-text-base); color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.q375-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -4px -6px 0 0; border: 0; border-radius: var(--ds-r-md); background: none; color: var(--ds-ink-2); cursor: pointer }
.q375-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2 }
.q375-x:hover { background: var(--ds-paper-hover) }
.q375-x:focus-visible, .q375-sheet button:focus-visible, .q375-dialog button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px }
.q375-body { flex: 1; overflow: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px }
.q375-sheet footer, .q375-dialog footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ds-line); background: var(--ds-surface) }
.q375-dialog footer { justify-content: flex-end }
.q375-sheet footer .grow { flex: 1 }
.q375-sheet footer .send-lg, .q375-dialog footer .send-lg, .q375-sheet footer .nlg, .q375-dialog footer .nlg { margin: 0 }
.q375-sheet footer button[disabled], .q375-dialog footer button[disabled] { opacity: .55; cursor: not-allowed }
.q375-field { display: flex; flex-direction: column; gap: 5px }
.q375-field > span { font-size: var(--ds-text-sm); font-weight: var(--ds-w-semi); color: var(--ds-ink-2) }
.q375-field input, .q375-field select, .q375-field textarea { box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--ds-field); border-radius: var(--ds-r-md); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-base) }
.q375-field textarea { resize: vertical; line-height: 1.5 }
.q375-field input:focus, .q375-field select:focus, .q375-field textarea:focus, .q375-sitepick input:focus { outline: 2px solid var(--ds-focus); outline-offset: -1px }
.q375-field input[disabled], .q375-field select[disabled], .q375-field textarea[disabled] { background: var(--ds-disabled-bg); color: var(--ds-ink-2) }
.q375-last { margin: 0; padding: 9px 12px; border-radius: var(--ds-r-md); background: var(--ds-canvas); color: var(--ds-ink-2); font-size: var(--ds-text-sm); line-height: 1.5 }
.q375-note { margin: 0; color: var(--ds-ink-3); font-size: var(--ds-text-sm); line-height: 1.5 }
.q375-err { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-text-sm); font-weight: var(--ds-w-medium) }
.q375-attach { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-md) }
.q375-attach > svg { width: 20px; height: 20px; stroke: var(--ds-icon); fill: none; stroke-width: 1.5; flex: none }
.q375-attach span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--ds-text-base) }
.q375-attach small { color: var(--ds-ink-3); font-size: var(--ds-text-sm) }
.q375-itemize { display: flex; align-items: center; gap: 8px; font-size: var(--ds-text-base); color: var(--ds-ink-2) }
.q375-building { display: flex; align-items: center; gap: 10px; color: var(--ds-ink-2); font-size: var(--ds-text-base) }
.q375-spin { width: 14px; height: 14px; border: 2px solid var(--ds-line); border-top-color: var(--ds-ink-2); border-radius: var(--ds-r-full); animation: q375-rot .8s linear infinite }
@keyframes q375-rot { to { transform: rotate(360deg) } }
.q375-skel { height: 36px; border-radius: var(--ds-r-md); background: var(--ds-tint) }
.q375-skel.short { width: 60% }
.q375-sheet .q375-openfull { margin-left: -5px }

.q375-fs { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px }
.q375-fs legend { padding: 0; margin-bottom: 6px; font-size: var(--ds-text-caps); font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-caps); text-transform: uppercase; color: var(--ds-ink-3) }
.q375-radio, .q375-check { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; border-radius: var(--ds-r-md); cursor: pointer; font-size: var(--ds-text-base) }
.q375-radio:hover, .q375-check:hover { background: var(--ds-paper-hover) }
.q375-radio input, .q375-check input { margin: 3px 0 0; accent-color: var(--ds-action) }
.q375-radio span { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.q375-radio b { font-weight: var(--ds-w-semi) }
.q375-radio small { color: var(--ds-ink-3); font-size: var(--ds-text-sm) }
.q375-sitepick { margin: 2px 0 0 30px; display: flex; flex-direction: column; gap: 6px }
.q375-sitepick input { box-sizing: border-box; width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid var(--ds-field); border-radius: var(--ds-r-md); font: inherit; font-size: var(--ds-text-base); color: var(--ds-ink); background: var(--ds-surface) }
.q375-sitelist { border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); padding: 4px; max-height: 196px; overflow: auto }
.q375-siteopt { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--ds-r-sm); background: none; font: inherit; font-size: var(--ds-text-base); color: var(--ds-ink); text-align: left; cursor: pointer }
.q375-siteopt small { color: var(--ds-ink-3); font-size: var(--ds-text-sm) }
.q375-siteopt:hover { background: var(--ds-paper-hover) }
.q375-picked { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ds-text-base); font-weight: var(--ds-w-medium) }
.q375-picked svg { width: 14px; height: 14px; stroke: var(--ds-ok); fill: none; stroke-width: 2 }

/* Toast with an Open action */
.q375-toast { pointer-events: auto; z-index: 1003 }
.q375-toast-open { margin-left: 6px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--ds-chrome-fg) 35%, transparent); border-radius: var(--ds-r-sm); background: none; color: var(--ds-chrome-fg); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-w-semi); cursor: pointer }
.q375-toast-open:hover { background: var(--ds-chrome-raise) }

@media (max-width: 640px) { .quotes-queue .q375-search kbd { display: none } .quotes-queue .q375-search { min-width: 0; flex-basis: 100%; max-width: none } }
/* Critique pass fixes */
.quotes-queue .q375-act { min-width: 92px; justify-content: center; box-sizing: border-box }
.quotes-queue .q375-actslot { display: inline-block; width: 96px; flex: none }
.quotes-queue .q375-act[aria-disabled="true"] { color: var(--ds-disabled-fg); cursor: not-allowed }
.quotes-queue .q375-act[aria-disabled="true"] svg { stroke: var(--ds-disabled-fg) }
.quotes-queue .qr-site { white-space: normal; overflow-wrap: anywhere }
.quotes-queue .qr-state.review::before { background: var(--ds-icon) }
@media (max-width: 980px) { .quotes-queue .q375-actslot { display: none } }

/* Send / Re-send side panel: hosts the live customer-email step (quote-operations.js renderEmailInto).
   The body carries .quotes-queue so the live email styles apply; these rules fit it to one 500px column. */
.q375-sheet .q375-last-panel { margin: 12px 20px 0 }
.q375-sheet .q375-email.quotes-queue { display: block; flex: 1 1 auto; height: auto; min-height: 0; padding: 0; overflow: auto; overscroll-behavior: contain; background: var(--ds-surface) }
.q375-sheet .q375-email .qd-send { display: flex; flex-direction: column; overflow: visible; min-height: 100%; border-top: 0; background: var(--ds-surface) }
.q375-sheet .q375-email .qd-send > * { box-sizing: border-box; max-width: 100%; min-width: 0 }
.q375-sheet .q375-email .qd-sendhd { padding: 12px 20px 0 }
.q375-sheet .q375-email .email-preview-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 20px 0; padding: 0; background: none }
.q375-sheet .q375-email .qd-send > .scroll { flex: 1 0 auto; overflow: visible; max-height: none; padding: 0 20px }
.q375-sheet .q375-email .qd-send > .scroll > .editform { height: auto; min-height: 0; min-width: 0; padding: 0 }
.q375-sheet .q375-email .recipient-fields { display: flex; flex-direction: column; gap: 10px }
.q375-sheet .q375-email .recipient-fields > * { width: 100%; min-width: 0; max-width: 100% }
.q375-sheet .q375-email .qd-send .rtedit { flex: 1 0 160px; min-height: 160px; height: auto; max-height: none; overflow: visible }
.q375-sheet .q375-email .qd-card, .q375-sheet .q375-email .qd-note { min-width: 0; max-width: 100%; margin-left: 0; margin-right: 0; white-space: normal; overflow-wrap: anywhere }
.q375-sheet .q375-email .qd-send .action { position: sticky; bottom: 0; padding: 10px 20px; background: var(--ds-surface) }
.q375-sheet .q375-email .qd-send .action:before { display: none }
.q375-sheet .q375-email .qd-send .actrow { max-width: none; margin: 0 }
.q375-sheet .q375-email .qd-send .btns { flex-wrap: wrap; justify-content: flex-end; gap: 8px }
.q375-sheet .q375-email .qd-send .btns .senderSel { margin-left: 0; max-width: 100% }
/* To and Cc stack in the 500px panel so a long address shows in full. */
.q375-sheet .q375-email .recipient-fields .ifrow { display: flex; flex-direction: column; align-items: stretch; gap: 10px }
.q375-sheet .q375-email .recipient-fields .ifrow > .ifield { width: 100%; max-width: 100%; min-width: 0; flex: none }
.q375-sheet .q375-email .recipient-fields .recipient-addresses { box-sizing: border-box; width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: hidden }
.q375-sheet .q375-email .recipient-fields .recipient-field-head { justify-content: flex-start }

/* Round 16 sweep D. */
/* D16-7: every row action is at least a 32px target with a 6px gap (Send/Re-send, Duplicate, More, Convert, phone More). */
.quotes-queue .q375-actions { gap: 6px }
.quotes-queue .q375-act { min-height: 32px }
.quotes-queue .q375-icon { width: 32px; height: 32px; min-width: 32px }
.quotes-queue .qconv-btn { min-height: 32px; margin-right: 8px }
/* Bound the entire menu from its measured top; keep two options visible and scroll notes with them. */
.quotes-queue .qf-popover { display: flex; flex-direction: column; box-sizing: border-box; margin-top: var(--ds-quote-pop-shift, 0); max-height: min(76dvh, calc(100dvh - var(--ds-quote-pop-top, var(--ds-s-2)) - var(--ds-s-2))); overflow: auto }
.quotes-queue .qf-popover > :not(.qf-pop-list) { flex-shrink: 0 }
.quotes-queue .qf-popover .qf-pop-list { min-height: calc((var(--ds-control-h) + var(--ds-s-1)) * 2 + var(--ds-s-2)); max-height: none; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain }
/* Only the tabs scroll. New quote occupies its own, nonshrinking space beside them. */
.quotes-queue .bar.qbar { overflow: visible }
.quotes-queue .qbar .q375-stage-tabs { display: flex; flex-wrap: nowrap; flex: 1; min-width: 0; align-self: stretch; align-items: flex-end; overflow-x: auto; scrollbar-width: thin }
.quotes-queue .qbar .q375-stage-tabs > .tab { flex: none; white-space: nowrap }
.quotes-queue .qbar .nq-new { position: static; flex: none; margin-left: var(--ds-s-2) }
/* #570: the page of an open quote fills the list area, so no grey shows below a short quote. */
.quotes-queue .q-table.lbody:has(.qe2-root) { background: var(--ds-surface) }
/* #570: at laptop width the whole placeholder must show, so Find takes its own row and the filters follow below it. */
@media (min-width: 801px) and (max-width: 1100px) { .quotes-queue .q375-search { flex-basis: 100%; max-width: none } .quotes-queue .qf-right { margin-left: auto } .quotes-queue .qr-title-text { white-space: normal; overflow-wrap: anywhere } }
/* #570 page shell (kept here because app.css is byte-pinned by check-app-css): from 1024 up the Quotes top bar keeps every link,
   the full signed-in name and the gear on one row (other screens keep their search field and still wrap). Between 1024 and 1139 the links give up a little padding. */
@media (min-width: 981px) { .top .msuser { max-width: 200px !important } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .top:has(.q375-topspace) { flex-wrap: nowrap }
  .top:has(.q375-topspace) > .nav { order: 0; width: auto }
}
@media (min-width: 1024px) and (max-width: 1139px) { .top:has(.q375-topspace) .nav button, .top:has(.q375-topspace) .nav a { padding: 0 var(--ds-s-1) } }