[hidden] { display: none !important; }
.quote-nav { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.quote-nav span { border-radius: 2rem; padding: .18rem .55rem; background: #343a40; color: white; }
.quote-families h2, .quote-page h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 3vw, 2rem); }
.browse-families { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.browse-family { display: grid; grid-template-columns: 4.25rem 1fr auto; gap: 1rem; align-items: center;
  padding: .8rem; border: 1px solid #d8dcdf; background: white; text-decoration: none; color: inherit; }
.browse-family img, .quote-item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: white; }
.browse-family small, .quote-item small, .matching-item small { display: block; color: #566069; margin-top: .3rem; }
.card-quote { padding: 0 1rem 1rem; }
[data-add-quote] { cursor: pointer; font: inherit; }
[data-add-quote]:disabled { opacity: .65; cursor: default; }
.quote-page { display: grid; gap: 1.5rem; }
.quote-page > a { justify-self: start; }
.quote-line { display: grid; grid-template-columns: minmax(0,1fr) minmax(6rem,10rem) auto;
  align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #d8dcdf; }
.quote-item { display: grid; grid-template-columns: 4.5rem minmax(0,1fr); align-items: center; gap: .85rem;
  text-decoration: none; color: inherit; overflow-wrap: anywhere; }
.quote-line label, .quote-send label { display: block; font-weight: 600; }
.quote-line input, .quote-send input, .quote-send textarea { display: block; margin-top: .35rem; width: 100%;
  min-height: 44px; padding: .55rem; border: 1px solid #b7bfc5; border-radius: 0; font: inherit; }
.quote-line input:invalid { border-color: #a8341e; }
.quote-remove { font: inherit; text-decoration: underline; background: transparent; color: #343a40;
  border: 0; min-height: 44px; cursor: pointer; }
.quote-send { background: #f1f2f3; padding: clamp(1rem,3vw,2rem); display: grid; gap: .85rem; }
.quote-send > .button { justify-self: start; }
.matching-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap: .75rem; }
.matching-item { border: 1px solid #d8dcdf; padding: .8rem; display: grid; gap: .75rem; align-content: space-between; }
.matching-item a { text-decoration: none; color: inherit; }
.matching-item img { display: block; width: 100%; height: 8rem; object-fit: contain; margin-bottom: .5rem; }
.welcome { box-sizing: border-box; width: min(34rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto;
  color: #343a40; background: white; border: 0; border-top: .28rem solid #ef7d24; padding: clamp(1.35rem,5vw,2.75rem); }
.welcome::backdrop { background: #1c222ad1; }
.welcome h2 { font-size: clamp(1.7rem,5vw,2.5rem); margin: .4rem 0; }
.welcome .eyebrow { padding-right: 2.5rem; }
.welcome-close { position: absolute; inset: .35rem .35rem auto auto; width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 1.6rem; }
.quote-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .browse-families { grid-template-columns: 1fr; }
  .quote-line { grid-template-columns: minmax(0,1fr) auto; gap: .65rem; }
  .quote-item { grid-column: 1 / -1; }
  .matching-grid { grid-template-columns: 1fr; }
  .quote-send { margin-bottom: .5rem; }
}