:root {
  --canvas: #EDF4F8;
  --bg: #EDF4F8;
  --ink: #3D4F6B;
  --fg: #3D4F6B;
  --muted: #61758A;
  --line: #B8CDDB;
  --border: #B8CDDB;
  --blush: #DCE8F2;
  --sage: #CADDE9;
  --sky: #9FBFD3;
  --clay: #6E8DA8;
  --clay-dk: #3D4F6B;
  --clay-lt: #CADDE9;
  --forest: #3D4F6B;
  --forest-dk: #2F4157;
  --paper: #F6F8FA;
  --paper-soft: #DCE8F2;
}

html,
body {
  background-color: #EDF4F8;
  color: #3D4F6B;
}

.notice {
  background: #DCE8F2 !important;
  color: #738496 !important;
}

header {
  background: rgba(202, 221, 233, 0.97) !important;
  border-bottom-color: #B8CDDB !important;
}

header .brand,
header .brand-text,
header .menu,
header .nav-links,
header a,
header .menu-toggle {
  color: #3D4F6B !important;
}

header .brand small,
header .brand-text small {
  color: #61758A !important;
}

.band.sage,
.news,
.facts,
.dualcta,
.ccta-band {
  background-color: #DCE8F2 !important;
}

.pcard .body,
.t-card .cbody,
.modal-card {
  background-color: #F6F8FA !important;
}

.pcard.id-card-popover.is-open .body {
  background: rgba(246, 248, 250, 0.98) !important;
  border-color: #B8CDDB !important;
}

/* Bandana assets already include their own painted frames and mats. */
body.bandanas-page .shopgrid .pcard[style*="--bandana-frame"] {
  background: transparent !important;
}

body.bandanas-page .shopgrid .pcard[style*="--bandana-frame"] figure {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.bandanas-page .shopgrid .pcard[style*="--bandana-frame"] img {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box;
  box-shadow: 0 12px 24px -18px rgba(8, 16, 12, 0.8) !important;
}

/* Add a physical-looking frame to the one artwork without a photographed frame. */
body.bandanas-page .shopgrid .pcard.color-frame-card img {
  border: 7px solid var(--bandana-frame) !important;
  box-shadow:
    inset 0 0 0 1px rgba(41, 29, 18, 0.32),
    0 12px 24px -18px rgba(8, 16, 12, 0.8) !important;
}

/* Keep the Bandana commission prompt visually in line with the artwork thumbnails. */
body.bandanas-page .shopgrid .tile {
  height: 210px;
  min-height: 210px;
  padding: 22px 14px;
}

body.bandanas-page .shopgrid .tile .ico {
  font-size: 34px;
  margin-bottom: 4px;
}

body.bandanas-page .shopgrid .tile h3 {
  font-size: 17px;
  line-height: 1.15;
  margin-bottom: 7px;
}

body.bandanas-page .shopgrid .tile p {
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 14px;
}

body.bandanas-page .shopgrid .tile .btn {
  padding: 10px 12px;
  font-size: 9px;
  letter-spacing: .12em;
}

@media (max-width: 860px) {
  header .menu,
  header .nav-links {
    background: #CADDE9 !important;
    border-color: #B8CDDB !important;
  }
}