/* The v1 header/footer intentionally replace the legacy preview chrome. */
.preview-v3-body > .announcement {
  display: block !important;
  background: #858585 !important;
  color: #fff !important;
}

body.preview-v3-body.checkout-route > .announcement,
body.preview-v3-body.checkout-route > .reference-header,
body.preview-v3-body.checkout-route > .reference-header__drawer,
body.preview-v3-body.checkout-route > .preview-search-panel,
body.preview-v3-body.checkout-route > .reference-footer {
  display: none !important;
}

.preview-v3-body > .reference-header {
  width: min(1200px, calc(100% - 80px)) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 124px !important;
  margin: 0 auto !important;
  padding: 22px 0 18px !important;
  display: flex !important;
  background: #fff !important;
  border-bottom: 1px solid var(--itsy-line) !important;
}

.preview-v3-body > .reference-footer {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 64px 0 0 !important;
  padding: 52px 32px 28px !important;
  display: block !important;
  background: var(--itsy-footer) !important;
  border-top: 1px solid #d7d7d7 !important;
}

@media (max-width: 760px) {
  .preview-v3-body > .reference-header {
    width: calc(100% - 32px) !important;
    min-height: 78px !important;
    padding: 16px 0 !important;
  }

  .preview-v3-body > .reference-footer {
    margin-top: 45px !important;
    padding: 38px 20px 24px !important;
  }
}