/* Shared quote modal — matches the design-detail page modal (unlayered so it wins inside Fancybox). */
.quote-modal__form {
  position: relative; top: auto; width: min(560px, 92vw); margin: 0 auto;
  padding: var(--card-padding-lg); overflow: hidden; opacity: 1; transform: none;
  background: var(--surface-default); box-shadow: var(--shadow-card);
  border: 1px solid var(--border-brand-soft) !important; border-top: 0 !important;
}
.quote-modal__form::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: calc(var(--space-3xs) + 1px); background: var(--gradient-brand); z-index: 2; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.quote-modal__title { color: var(--text-strong); font-size: var(--h4-size); line-height: var(--line-height-heading); text-wrap: balance; }
.quote-modal__form .contact-form { margin-top: 0; grid-template-columns: 1fr; gap: var(--space-md); }
.quote-modal__form .contact-form .full { grid-column: auto; }
.quote-modal__form .contact-form button { width: 100%; justify-content: center; }
.quote-modal__form .quote-modal__status:empty { display: none; }
.quote-modal__status { margin: 0; font-size: var(--font-size-sm); color: var(--brand-strong); }
.quote-modal__status.is-error { color: var(--text-danger, #c0392b); }
#quote-modal.f-html { padding: 0; background: transparent; }
@media (max-width: 575px) { .quote-modal__form { padding: var(--space-lg, 1.25rem); } }
.fancybox__content:has(> .quote-modal__form), .f-html:has(> .quote-modal__form), #quote-modal { padding: 0 !important; background: transparent !important; border: 0 !important; }
.quote-modal__form { background-clip: padding-box; }

/* 2026-11-04: product pages - "About this design" (#design-story) sat on the same grey as #description; put it on white and divide it from the white #specs below. */
#design-story.collection-description{background:#fff}
#design-story + #specs{border-top:1px solid #e6ebf1}