/* Colour names the working object and its result in the existing accordion. */
.ec-page #store-approach .ev-approach-item {
  border-color: #d8d8d8;
}
.ec-page #store-approach .ev-approach-item[open] {
  border-top-color: #ff5a2b;
}
.ec-page #store-approach .ev-approach-item summary > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: #f5f5f5;
  border-radius: 4px;
  color: #32131d;
}
.ec-page #store-approach .ev-approach-item[open] summary > span {
  background: #ff5a2b;
  color: #171717;
}
.ec-page #store-approach .ev-approach-item[open] summary h3 {
  color: #32131d;
}
.ec-page #store-approach .ev-approach-item summary > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: #171717;
  color: #fff;
}
.ec-page #store-approach .ev-approach-item[open] summary > i {
  background: #ff5a2b;
  color: #171717;
}
.ec-page #store-approach summary:focus-visible {
  outline: 2px solid #32131d;
  outline-offset: 4px;
}
.ec-page #store-approach .ev-approach-body ul li::marker {
  color: #32131d;
}
.ec-page #store-approach .ev-approach-body ul li > span {
  color: #32131d;
}
.ec-page #store-approach .ea-result {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 3px solid #ff5a2b;
  background: #f5f5f5;
}
.ec-page #store-approach .ea-result small {
  display: block;
  color: #656565;
  font: 400 12px/1.4 Onest, sans-serif;
  margin-bottom: 8px;
}
.ec-page #store-approach .ea-result p {
  color: #32131d;
  font: 400 18px/1.4 Onest, sans-serif;
  margin: 0;
}

/* Research: three sources become arguments in one wine-coloured dossier. */
.ec-page #store-approach .ev-study {
  padding: 24px;
  border-radius: 8px;
  background: #32131d;
  color: #fff;
  gap: 20px;
}
.ec-page #store-approach .ev-study > div {
  border-color: #806b73;
}
.ec-page #store-approach .ev-study > div:first-child {
  border-top: 2px solid #ff5a2b;
}
.ec-page #store-approach .ev-study h4 { color: #fff; }
.ec-page #store-approach .ev-study small,
.ec-page #store-approach .ev-study span { color: #c4b8bd; }

/* Architecture: the buyer route stays white; the completed order is orange. */
.ec-page #store-approach .er-plan {
  background: #171717;
  color: #fff;
  border-color: #171717;
}
.ec-page #store-approach .er-plan > small,
.ec-page #store-approach .er-plan > p { color: #a3a3a3; }
.ec-page #store-approach .er-plan-route span {
  color: #171717;
  background: #fff;
  border-color: #fff;
}
.ec-page #store-approach .er-plan-route span:last-child {
  background: #fff;
  border-color: #fff;box-shadow:inset 0 -3px #ff5a2b;}
.ec-page #store-approach .er-plan-route i { color: #ff5a2b; }
.ec-page #store-approach .er-plan-connections span {
  border-color: #656565;
  color: #fff;
}

/* Catalog: one root and one set of data, connected by the same accent. */
.ec-page #store-approach .ev-tree { background: #32131d; }
.ec-page #store-approach .ev-tree-root { background: #fff; color: #32131d; }
.ec-page #store-approach .ev-tree-root::after,
.ec-page #store-approach .ev-tree-branches > div::before { background: #ff5a2b; }
.ec-page #store-approach .ev-tree-branches { border-color: #ff5a2b; }
.ec-page #store-approach .ev-tree-branches > div { border-color: #fff; }
.ec-page #store-approach .ev-tree-branches > div > span { color: #32131d; }
.ec-page #store-approach .ev-tree > p { color: #c4b8bd; }

/* CMS: coloured tool header and selected navigation, readable white fields. */
.ec-page #store-approach .er-cms { border-color: #32131d; }
.ec-page #store-approach .er-cms .er-tool-top {
  padding: 16px;
  background: #32131d;
  color: #fff;
  border: 0;
  border-radius: 4px;
  align-items: center;
}
.ec-page #store-approach .er-cms .er-tool-top span:last-child {
  color: #c4b8bd;
}
.ec-page #store-approach .er-cms .er-side span:first-child {
  padding: 8px 12px;
  background: #32131d;
  color: #fff;
  border: 0;
  border-radius: 4px;
}
.ec-page #store-approach .er-cms h4 { color: #32131d; }
.ec-page #store-approach .er-fields > span { border-left: 2px solid #ff5a2b; }

/* Payment: order and methods in wine, the payable total in orange. */
.ec-page #store-approach .er-pay-choice .er-payment {
  background: #32131d;
  color: #fff;
}
.ec-page #store-approach .er-payment small,
.ec-page #store-approach .er-payment > span:last-child { color: #c4b8bd; }
.ec-page #store-approach .er-payment .er-mini-link > span { color: #171717; }
.ec-page #store-approach .er-payment .er-receipt {
  padding: 16px;
  border: 0;
  border-radius: 4px;
  color: #171717;
  background: #fff;
}
.ec-page #store-approach .er-pay-choice h4 { color: #32131d; }

/* Prototypes: structural blocks and the action are visually different. */
.ec-page #store-approach .ev-wireframes { background: #171717; }
.ec-page #store-approach .ev-wireframes > div { border-color: #fff; }
.ec-page #store-approach .ev-wire-nav { background: #32131d; }
.ec-page #store-approach .ev-wire-body i:first-child {
  background: #32131d;
  border-color: #32131d;
}
.ec-page #store-approach .ev-wire-body i:last-child {
  background: #ff5a2b;
  border-color: #ff5a2b;
}
.ec-page #store-approach .ev-wireframes > div > span { color: #32131d; }

/* Design: a shared wine field frames a white desktop and charcoal phone. */
.ec-page #store-approach .ev-design { background: #32131d; }
.ec-page #store-approach .ev-design-desktop { border-color: #fff; }
.ec-page #store-approach .ev-design-desktop h4 { color: #32131d; }
.ec-page #store-approach .ev-design-phone {
  background: #171717;
  color: #fff;
  border-color: #171717;
}
.ec-page #store-approach .ev-design-phone small { color: #a3a3a3; }
.ec-page #store-approach .ev-design-phone .ec-product-art { border-radius: 8px; }
.ec-page #store-approach .ev-design-phone > p { color: #171717; background: #ff5a2b; }

/* Development: the calculation has neutral inputs and one accented total. */
.ec-page #store-approach .er-rule {
  background: #171717;
  color: #fff;
  border-color: #171717;
}
.ec-page #store-approach .er-rule > small,
.ec-page #store-approach .er-rule > p { color: #a3a3a3; }
.ec-page #store-approach .er-rule h4 { color: #fff; }
.ec-page #store-approach .er-formula > span {
  padding: 12px;
  border-radius: 4px;
  background: #fff;
  color: #171717;
}
.ec-page #store-approach .er-formula i { color: #ff5a2b; }
.ec-page #store-approach .er-rule .er-receipt {
  padding: 16px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #171717;
}

/* Integration: the queue links both white system nodes. */
.ec-page #store-approach .ev-flow { background: #32131d; }
.ec-page #store-approach .ev-flow > div { border-color: #fff; }
.ec-page #store-approach .ev-flow > div:nth-of-type(2) {
  background: #fff;
  border-color: #fff;box-shadow:inset 0 -3px #ff5a2b;}
.ec-page #store-approach .ev-flow > span { color: #ff5a2b; }
.ec-page #store-approach .ev-flow h4 { color: #171717; }

/* Content: the conditions sit next to the product in a visible wine field. */
.ec-page #store-approach .ev-content h4,
.ec-page #store-approach .ev-content dt { color: #32131d; }
.ec-page #store-approach .ev-content dl > div:last-child {
  padding: 16px;
  border: 0;
  border-radius: 4px;
  background: #32131d;
}
.ec-page #store-approach .ev-content dl > div:last-child dt { color: #fff; }
.ec-page #store-approach .ev-content dl > div:last-child dd { color: #c4b8bd; }

/* QA: status remains a word; colour locates the fix and repeated check. */
.ec-page #store-approach .ev-mini-matrix { border-color: #32131d; }
.ec-page #store-approach .ev-mini-matrix > div:first-child {
  padding: 12px;
  border-radius: 4px;
  background: #32131d;
  color: #fff;
}
.ec-page #store-approach .ev-mini-matrix > div:nth-child(3) > span:last-child {
  padding: 8px;
  border-radius: 4px;
  background: #32131d;
  color: #fff;
}
.ec-page #store-approach .ev-mini-matrix > div:last-child {
  border-top: 2px solid #ff5a2b;
  color: #32131d;
}
.ec-page #store-approach .ev-mini-matrix > div:not(:first-child) { align-items: center; }

/* Release: three stable version stages with the final release emphasised. */
.ec-page #store-approach .er-release {
  background: #171717;
  color: #fff;
  border-color: #171717;
}
.ec-page #store-approach .er-release .er-tool-top {
  border-color: #656565;
  color: #a3a3a3;
}
.ec-page #store-approach .er-release-track > div {
  padding: 16px;
  border-radius: 4px;
  background: #fff;
  color: #171717;
}
.ec-page #store-approach .er-release-track > div:last-of-type { background: #fff;color:#171717;box-shadow:inset 0 -3px #ff5a2b;}
.ec-page #store-approach .er-release-track > div p { color: #171717; margin: 0; }
.ec-page #store-approach .er-release-track i { color: #ff5a2b; }
.ec-page #store-approach .er-release > p { color: #a3a3a3; margin: 20px 0 0; }
.ec-page #store-approach .er-release .er-progress { background: #656565; }

@media (max-width: 1350px) {
  .ec-page #store-approach .er-release-track {
    flex-direction: column;
    align-items: stretch;
  }
  .ec-page #store-approach .er-release-track i { text-align: center; }
  .ec-page #store-approach .er-release-track i .ui-arrow {
    transform: rotate(90deg);
  }
}
@media (max-width: 1100px) {
  .ec-page #store-approach .ev-approach-body { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ec-page #store-approach .ev-approach-item summary > span {
    width: 28px; height: 28px; flex-basis: 28px;
  }
  .ec-page #store-approach .ev-approach-item summary > i {
    width: 28px; height: 28px; flex-basis: 28px;
  }
  .ec-page #store-approach .ev-study { padding: 16px; }
  .ec-page #store-approach .ev-study > div { grid-template-columns: 1fr; gap: 8px; }
  .ec-page #store-approach .ev-study small { grid-row: auto; }
  .ec-page #store-approach .ea-result { margin-top: 20px; padding: 16px; }
  .ec-page #store-approach .er-tool-top { flex-wrap: wrap; }
  .ec-page #store-approach .er-receipt { flex-wrap: wrap; }
  .ec-page #store-approach .er-plan-route i .ui-arrow { transform: rotate(90deg); }
  .ec-page #store-approach .ev-mini-matrix > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    font-size: 14px;
  }
  .ec-page #store-approach .ev-mini-matrix > div:first-child > span:first-child {
    display: none;
  }
  .ec-page #store-approach .ev-mini-matrix > div:not(:first-child) > span:first-child {
    grid-column: 1 / -1;
    color: #32131d;
    font-size: 16px;
  }
  .ec-page #store-approach .ev-mini-matrix > div > span:not(:first-child) {
    white-space: nowrap;
  }
}