/* Reuse the site's compact hero, checkout header, buttons and complete footer. */
.purchase-confirmation .confirmation-hero {
  display: block;
  min-height: 0;
  padding: 40px 24px 32px;
  text-align: center;
}
.purchase-confirmation h1,
.contact-page .contact-heading h1 {
  font-size: var(--site-hero-title);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.purchase-confirmation h1 {
  margin: 0 auto 20px;
  font-size: min(var(--site-hero-title), 7.5vw);
  white-space: nowrap;
}
.purchase-confirmation .confirmation-outcome {
  max-width: 38em;
  margin: 0 auto;
  font-size: var(--site-hero-subtitle);
  font-weight: 600;
  text-wrap: balance;
}
.purchase-confirmation .confirmation-panel {
  min-height: 0;
  padding: 32px 24px 64px;
  text-align: left;
}
.confirmation-layout { max-width: 1160px; margin-inline: auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.confirmation-photo { position: relative; align-self: stretch; min-height: 600px; margin: 0; }
.confirmation-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.confirmation-copy { min-width: 0; }
.confirmation-steps { display: grid; gap: 24px; margin: 0 0 28px; padding: 0; list-style: none; }
.confirmation-steps > li { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: start; }
.confirmation-step-number { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: var(--wine); font-size: 13px; font-weight: 800; }
.confirmation-step-copy h3 { margin: 0 0 8px; text-wrap: balance; }
.purchase-confirmation .confirmation-steps p { margin: 0; font-size: 14px; line-height: 1.75; }
.purchase-confirmation .confirmation-copy > p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; }
.purchase-confirmation .confirmation-copy .confirmation-inbox-note { margin-top: 24px; font-size: 12px; }
.purchase-confirmation .confirmation-copy .confirmation-signature { margin-top: 24px; color: var(--wine); }
.confirmation-help { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.purchase-confirmation .confirmation-help > p { margin: 0 auto 14px; color: var(--wine); font-size: 14px; }
.purchase-confirmation .confirmation-help .button { margin-top: 0; }
.purchase-confirmation .checkout-header { gap: 18px; }
.purchase-confirmation .checkout-header > a:last-child { text-align: right; }
.contact-shell {
  width: min(1160px, calc(100% - 48px));
  margin-inline: auto;
  padding: 64px 0 80px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  grid-template-areas: "portrait heading" "portrait form";
  column-gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.contact-heading { grid-area: heading; padding-bottom: 24px; }
.contact-heading h1 { margin: 0 0 18px; text-wrap: balance; }
.contact-heading > p:not(.eyebrow) { margin: 0; color: #675b5f; font-size: 16px; line-height: 1.7; }
.contact-portrait { grid-area: portrait; position: relative; align-self: stretch; min-height: 640px; margin: 0; }
.contact-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.contact-card { grid-area: form; min-width: 0; }
.contact-embed { display: block; width: 100%; height: 720px; border: 0; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-field { min-width: 0; margin-bottom: 20px; }
.contact-field label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.contact-field input,
.contact-field select,
.contact-field textarea { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--wine); font: inherit; font-size: 16px; }
.contact-field textarea { display: block; min-height: 150px; resize: vertical; }
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible,
.contact-page main a:focus-visible,
.purchase-confirmation main a:focus-visible,
.contact-page main button:focus-visible { outline: 3px solid var(--rose-dark); outline-offset: 3px; }
.contact-order-help,
.contact-privacy { margin: 0 0 16px; font-size: 12px; line-height: 1.7; color: #675b5f; }
.contact-card .button { width: 100%; min-height: 52px; }
.contact-card .button:disabled { opacity: .55; cursor: default; }
.contact-card .button:disabled:hover { transform: none; background: var(--rose-dark); border-color: var(--rose-dark); }
.contact-privacy { margin: 18px 0 0; }
.contact-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.contact-form-status { margin: 12px 0 0; text-align: center; color: #675b5f; font-size: 12px; line-height: 1.7; }
@media (max-width: 900px) {
  .confirmation-layout { grid-template-columns: 1fr; gap: 32px; }
  .confirmation-photo { height: 400px; min-height: 0; }
  .contact-shell { grid-template-columns: 1fr; grid-template-areas: "heading" "portrait" "form"; gap: 28px; padding-block: 40px 60px; }
  .contact-heading { padding-bottom: 0; }
  .contact-portrait { height: 400px; min-height: 0; }
}
@media (max-width: 620px) {
  .purchase-confirmation .confirmation-hero { padding: 32px 20px 28px; }
  .purchase-confirmation .confirmation-panel { padding: 32px 20px 48px; }
  .confirmation-photo { height: 340px; }
  .contact-shell { width: calc(100% - 40px); }
  .contact-portrait { height: 340px; }
  .contact-fields { grid-template-columns: 1fr; gap: 0; }
}