/* ==========================================================================
   DEXIE - account
   Thirty-four templates ship with OpenCart and only two are worth rewriting:
   sign-in, and the dashboard people land on afterwards. The rest are forms and
   tables, so they are styled generically here by the id every account page
   already carries. That covers all of them without thirty-four rewrites to
   maintain against the next OpenCart upgrade.
   ========================================================================== */

[id^="account-"] > .container,
[id^="account-"] #content { min-width: 0; }

/* ---------- 1. headings -------------------------------------------------- */
[id^="account-"] #content > h1,
[id^="account-"] #content > h2:first-of-type {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
[id^="account-"] #content h2,
[id^="account-"] #content legend {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 16px; padding: 0; border: 0; width: auto; float: none;
}

/* ---------- 2. forms ----------------------------------------------------- */
[id^="account-"] fieldset { border: 0; padding: 0; margin: 0 0 30px; }

[id^="account-"] .form-label,
[id^="account-"] .col-form-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 5px;
}
[id^="account-"] .form-control,
[id^="account-"] .form-select {
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 11px 13px;
  font-size: 14.5px;
  color: var(--ink);
  box-shadow: none;
}
[id^="account-"] .form-control:focus,
[id^="account-"] .form-select:focus { border-color: var(--ink); box-shadow: none; outline: 0; }
[id^="account-"] .form-control.is-invalid,
[id^="account-"] .form-select.is-invalid { border-color: var(--accent); }
[id^="account-"] .invalid-feedback { color: var(--accent); font-size: 12.5px; }
[id^="account-"] .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
[id^="account-"] .form-check-label { font-size: 14px; color: var(--ink-2); }

[id^="account-"] .btn-primary {
  background: var(--ink); border-color: var(--ink); color: var(--accent-ink);
  border-radius: var(--radius);
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 13px 26px;
}
[id^="account-"] .btn-primary:hover { background: transparent; color: var(--ink); }
[id^="account-"] .btn-light,
[id^="account-"] .btn-secondary {
  background: transparent; border: 1px solid var(--rule-2); color: var(--ink);
  border-radius: var(--radius);
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 13px 26px;
}
[id^="account-"] .btn-light:hover { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }

/* ---------- 3. tables ---------------------------------------------------- */
[id^="account-"] .table {
  border-collapse: collapse;
  font-size: 13.5px;
}
[id^="account-"] .table > :not(caption) > * > * {
  padding: 13px 12px;
  background: transparent;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
[id^="account-"] .table thead th,
[id^="account-"] .table > thead > tr > td {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
  background: transparent;
}
[id^="account-"] .table td.text-end,
[id^="account-"] .table th.text-end { font-variant-numeric: tabular-nums; }
[id^="account-"] .table-bordered > :not(caption) > * > * { border-left: 0; border-right: 0; }
[id^="account-"] .table a { color: var(--ink); font-weight: 650; text-decoration: none; }
[id^="account-"] .table a:hover { color: var(--accent); }

/* ---------- 4. sign in / register ---------------------------------------- */
.dx-auth {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-bottom: 64px;
}
@media (min-width: 820px) { .dx-auth { grid-template-columns: 1fr 1fr; gap: 26px; } }

.dx-authcard {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(26px, 3.4vw, 40px);
}
.dx-authcard--primary { background: var(--ground); border-color: var(--rule-2); }

.dx-authcard__eyebrow {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px;
}
.dx-authcard__title {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 800; letter-spacing: -.035em; text-transform: uppercase;
  margin: 0 0 14px; line-height: 1.05;
}
.dx-authcard__text { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 20px; }

.dx-authcard__list { margin: 0 0 26px; }
.dx-authcard__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  padding: 6px 0;
}
.dx-authcard__list i { color: var(--accent); font-size: 11px; margin-top: 3px; }

.dx-authform { margin: 0; }
.dx-field { margin-bottom: 18px; }
.dx-field label {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
}
.dx-field__aside {
  display: inline-block; margin-top: 8px;
  font-size: 12px; font-weight: 650; color: var(--ink-3);
  text-decoration: none;
}
.dx-field__aside:hover { color: var(--accent); }


/* ---------- 5. dashboard ------------------------------------------------- */
/* Lattice drawn by the children, not by a grey sheet behind 1px gaps: an
   unfilled track showed the sheet as a grey rectangle. See .dx-grid. */
.dx-dash {
  display: grid;
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  grid-template-columns: 1fr;
  margin-bottom: 64px;
}
@media (min-width: 700px)  { .dx-dash { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dx-dash { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }

.dx-dash__group { background: var(--surface); box-shadow: 0 0 0 1px var(--rule); padding: 26px 24px 24px; }
.dx-dash__group h4 {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 14px;
}
.dx-dash__group ul { margin: 0; }
.dx-dash__group li { margin-bottom: 2px; }
.dx-dash__group a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px 9px 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s, padding-left .18s cubic-bezier(.16,.84,.44,1);
}
.dx-dash__group a i {
  width: 17px; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
  transition: color .16s;
}
.dx-dash__group a:hover { color: var(--accent); padding-left: 5px; }
.dx-dash__group a:hover i { color: var(--accent); }

/* ---------- 6. the account sidebar module -------------------------------- */
#column-left .list-group,
#column-right .list-group { border-radius: var(--radius); }
#column-left .list-group-item,
#column-right .list-group-item {
  border-color: var(--rule);
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-2);
  padding: 11px 14px;
}
#column-left .list-group-item:hover,
#column-right .list-group-item:hover { background: var(--ground); color: var(--accent); }
#column-left .list-group-item.active,
#column-right .list-group-item.active {
  background: var(--ink); border-color: var(--ink); color: var(--accent-ink);
}

/* ---------- 7. reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dx-dash__group a, .dx-authbtn { transition: none; }
  .dx-dash__group a:hover { padding-left: 0; }
}

/* ---------- 7. register --------------------------------------------------- */
/* Wholesale is half this business, so the account-type choice is the first
   thing on the form rather than a dropdown buried among the name fields, and
   the panel beside it says what a wholesale account actually gets you. */
.dx-reg {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 64px;
}
@media (min-width: 940px) { .dx-reg { grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; } }

.dx-reg__form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.dx-reg .dx-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px 24px 8px;
  margin: 0;
}
.dx-reg .dx-panel--type { background: var(--ground); border-color: var(--rule-2); padding-bottom: 20px; }
.dx-reg .dx-panel--quiet { padding-bottom: 20px; }

.dx-reg .dx-panel legend {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 16px; padding: 0; border: 0; width: auto; float: none;
}

/* Two fields share a row where they belong together. */
.dx-fieldrow { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .dx-fieldrow { grid-template-columns: 1fr 1fr; } }

.dx-reg .dx-field.required > label::after,
.dx-reg .dx-field.required > select + .dx-reg__hint::before { content: ""; }
.dx-reg .dx-field.required > label::after {
  content: " *"; color: var(--accent); font-weight: 800;
}

.dx-reg__hint {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}

.dx-reg__switch { display: flex; align-items: center; gap: 12px; }
.dx-reg__switch label {
  margin: 0; font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.dx-reg__switch .form-check { margin: 0; padding: 0; min-height: 0; }

.dx-reg__submit {
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 22px 24px;
}
@media (min-width: 620px) {
  .dx-reg__submit { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .dx-reg__submit .dx-authbtn { width: auto; flex: 0 0 auto; padding-inline: 40px; }
}

@media (min-width: 940px) { .dx-reg__side { position: sticky; top: 96px; } }

/* ---------- 8. register: two things the screenshot caught ---------------- */

/* (a) The account module. It is assigned to column_right, which sits outside
   the register grid, so it fell to the bottom of the page as a stray list.
   On the sign-in, register and forgotten-password pages it is redundant
   anyway - every link in it is for somebody who already has an account, and
   the page header already offers "Already registered? Sign in". */
#account-register #column-right,
#account-login #column-right,
#account-forgotten #column-right,
#account-forgotten-reset #column-right { display: none !important; }

/* (b) The subscribe switch. Bootstrap's .form-switch pulls the input left with
   margin-left:-2.5em, which only works inside a .form-check that carries the
   matching left padding. This row has none, so the toggle hung 50px outside
   its own panel. The switch is laid out here from scratch instead. */
.dx-reg__switch { display: flex; align-items: center; gap: 12px; }
.dx-reg__switch .form-check {
  margin: 0; padding: 0; min-height: 0;
  display: flex; align-items: center;
}
.dx-reg__switch .form-check-input {
  /* Without appearance:none the browser paints a native checkbox and
     ignores every colour set here - the knob would move and the track
     would stay grey, which is exactly what it was doing. */
  -webkit-appearance: none;
  appearance: none;
  margin: 0 !important;
  float: none;
  width: 42px; height: 24px;
  background-color: var(--surface-2);
  border: 1px solid var(--rule-2);
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
/* Bootstrap paints the switch track with a background shorthand and an svg
   knob, so a plain background-color loses to it. Stating both, and the knob,
   is what actually makes the on state visible. */
.dx-reg__switch .form-check-input:checked {
  background-color: var(--ink) !important;
  border-color: var(--ink) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position: right center;
  background-repeat: no-repeat;
}
.dx-reg__switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23868E9A'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
}
.dx-reg__switch .form-check-input:focus {
  box-shadow: none;
  border-color: var(--ink);
}
.dx-reg__switch label {
  margin: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}

/* ---------- 9. orders: list, detail and history -------------------------- */
/* The stock pages were three bordered tables. A six-column table needs a
   horizontal scrollbar on a phone, and it gave the order number, the item
   count and the total all the same weight - so nothing was findable. These
   read as records instead: identity on the left, money on the right. */

/* --- status chip. Near-square, never a pill. --- */
.dx-chip {
  display: inline-block;
  padding: 5px 10px 4px;
  border-radius: var(--radius);
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--rule);
}
.dx-chip.is-good { background: var(--trade-soft); color: var(--trade); border-color: rgba(27,94,107,.28); }
.dx-chip.is-live { background: var(--accent-soft); color: var(--accent); border-color: rgba(193,58,147,.26); }
.dx-chip.is-off  { background: var(--surface-2); color: var(--ink-3); border-color: var(--rule); }

/* --- the order list --- */
.dx-orders {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 26px;
}
.dx-order {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "id     status"
    "items  total";
  gap: 10px 14px;
  align-items: center;
  padding: 18px 18px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
  transition: background .16s;
}
.dx-order:last-child { border-bottom: 0; }
.dx-order:hover { background: var(--ground); }
.dx-order:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dx-order__id     { grid-area: id; display: flex; flex-direction: column; gap: 3px; }
.dx-order__id strong { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.dx-order__id small  { font-size: 12px; color: var(--ink-3); }
.dx-order__status { grid-area: status; justify-self: end; }
.dx-order__items  { grid-area: items; font-size: 12.5px; color: var(--ink-3); }
.dx-order__total  {
  grid-area: total; justify-self: end;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dx-order__go { display: none; }

@media (min-width: 760px) {
  .dx-order {
    grid-template-columns: minmax(0,1fr) auto 90px 110px 22px;
    grid-template-areas: "id status items total go";
    gap: 18px;
    padding: 17px 20px;
  }
  .dx-order__items { text-align: right; }
  .dx-order__go {
    display: block; grid-area: go;
    color: var(--rule-2); font-size: 12px;
    transition: color .16s, transform .18s cubic-bezier(.16,.84,.44,1);
  }
  .dx-order:hover .dx-order__go { color: var(--accent); transform: translateX(3px); }
}


/* --- order detail: the head strip --- */
.dx-ohead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 24px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 26px;
}
.dx-ohead__id h3 {
  font-size: 26px; font-weight: 760; letter-spacing: -.02em;
  margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.dx-ohead__id p { font-size: 13px; color: var(--ink-3); margin: 0; }
.dx-ohead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dx-ohead__invoice { font-size: 12px; color: var(--ink-3); }
.dx-ohead__invoice strong { color: var(--ink-2); font-weight: 700; }
.dx-ohead__back {
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px; justify-self: start;
}
.dx-ohead__back:hover { color: var(--accent); border-color: var(--accent); }

@media (min-width: 760px) {
  .dx-ohead {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px;
  }
  .dx-ohead__meta { justify-content: flex-start; }
  .dx-ohead__back { justify-self: end; }
}

/* --- order detail: the lines --- */
.dx-olines {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.dx-oline {
  display: grid;
  grid-template-columns: 72px 1fr 1fr;
  grid-template-areas:
    "pic   main  main"
    "qty   price total"
    "act   act   act";
  gap: 14px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--rule);
}
.dx-oline:last-child { border-bottom: 0; }
/* The picture is decorative: the product name right beside it is the real
   link, so this one is hidden from screen readers and skipped by the keyboard
   rather than announced twice. */
.dx-oline__pic { grid-area: pic; display: block; }
.dx-oline__pic img {
  display: block;
  width: 72px; height: 72px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.dx-oline__main { grid-area: main; min-width: 0; }
.dx-oline__name {
  font-size: 15px; font-weight: 700; color: var(--ink);
  text-decoration: none; line-height: 1.3;
}
.dx-oline__name:hover { color: var(--accent); }
.dx-oline__meta { margin: 7px 0 0; }
.dx-oline__meta li { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.dx-oline__meta a { color: var(--ink-2); }

.dx-oline__qty   { grid-area: qty; }
.dx-oline__price { grid-area: price; }
.dx-oline__total { grid-area: total; }
.dx-oline__qty, .dx-oline__price, .dx-oline__total {
  font-size: 14px; font-weight: 650; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dx-oline__qty span, .dx-oline__price span, .dx-oline__total span {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 4px;
}
.dx-oline__act { grid-area: act; display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 860px) {
  .dx-oline {
    grid-template-columns: 72px minmax(0,1fr) 70px 100px 100px auto;
    grid-template-areas: "pic main qty price total act";
    align-items: start;
    gap: 18px;
    padding: 22px 20px;
  }
  .dx-oline__qty, .dx-oline__price, .dx-oline__total { text-align: right; }
  .dx-oline__act { flex-direction: column; gap: 6px; min-width: 104px; }
}

.dx-minibtn {
  display: inline-block;
  padding: 8px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--surface);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.dx-minibtn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dx-minibtn--quiet { background: transparent; color: var(--ink-2); border-color: var(--rule-2); }
.dx-minibtn--quiet:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* --- order detail: totals --- */
.dx-ototals { display: flex; justify-content: flex-end; margin: 0 0 30px; }
.dx-ototals dl {
  width: 100%; max-width: 340px; margin: 0;
  border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}
.dx-ototals dl > div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
}
.dx-ototals dl > div:last-child { border-bottom: 0; }
.dx-ototals dt { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0; }
.dx-ototals dd {
  font-size: 13.5px; font-weight: 650; color: var(--ink); margin: 0;
  font-variant-numeric: tabular-nums;
}
.dx-ototals .is-final { background: var(--ink); }
.dx-ototals .is-final dt { color: rgba(255,255,255,.72); font-weight: 650; }
.dx-ototals .is-final dd { color: #fff; font-size: 15px; font-weight: 750; }

/* --- order detail: addresses and methods --- */
/* Lattice drawn by the children, not by a grey sheet behind 1px gaps: an
   unfilled track showed the sheet as a grey rectangle. See .dx-grid. */
.dx-ocards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  margin-bottom: 26px;
}
@media (min-width: 620px)  { .dx-ocards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dx-ocards { grid-template-columns: repeat(4, 1fr); } }

.dx-ocard { background: var(--surface); box-shadow: 0 0 0 1px var(--rule); padding: 20px 18px; }
.dx-ocard h4 {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px;
}
.dx-ocard__body { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.dx-ocard--wide {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 26px;
}

/* --- order history, rendered as a track rather than a table --- */
.dx-sechead--sub { margin-top: 8px; }
.dx-sechead--sub h3 { font-size: 18px; }

.dx-track {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 20px 6px;
  margin-bottom: 20px;
}
.dx-track__list { list-style: none; margin: 0; padding: 0; }
.dx-track__step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 12px;
  padding: 0 0 20px 0;
}
/* The connecting line. Drawn on the step, stopped on the last one. */
.dx-track__step::before {
  content: "";
  position: absolute;
  left: 5px; top: 14px; bottom: 0;
  width: 1px; background: var(--rule);
}
.dx-track__step:last-child::before { display: none; }
.dx-track__step:last-child { padding-bottom: 16px; }

.dx-track__dot {
  grid-column: 1; grid-row: 1 / span 2;
  width: 11px; height: 11px; margin-top: 4px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--rule-2);
}
.dx-track__step:first-child .dx-track__dot { background: var(--accent); border-color: var(--accent); }

.dx-track__when {
  grid-column: 2; grid-row: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.dx-track__what { grid-column: 2; grid-row: 2; margin-top: 3px; }
.dx-track__what strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.dx-track__note { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.55; }
.dx-track__none { font-size: 13.5px; color: var(--ink-3); margin: 0 0 16px; }

@media (prefers-reduced-motion: reduce) {
  .dx-order, .dx-order__go, .dx-minibtn { transition: none; }
  .dx-order:hover .dx-order__go { transform: none; }
}

/* --- two things the rendered page caught --------------------------------- */
/* (a) The base sheet paints every a:hover with the accent, which outranked
   .dx-order and turned the order number and the total pink on hover. The
   background shift and the arrow are enough. */
.dx-order:hover { color: var(--ink); }
.dx-order:hover .dx-order__id small { color: var(--ink-3); }


/* ---------- 10. the account sidebar and the two-column account shell ----- */
/* The account module is assigned to column_right on the Account layout, which
   matches account/% on all four stores. My account templates print
   {{ column_right }} outside #content, so without this it lands as a stray
   full-width block under the page - the fault Dexie caught on register.
   Rather than hide it everywhere, the container becomes the two-column shell
   and the module becomes a real sidebar. */

[id^="account-"].container:not(#account-register):not(#account-login):not(#account-forgotten):not(#account-forgotten-reset):not(#account-account):has(#column-right .dx-side) {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 34px;
  align-items: start;
}
[id^="account-"].container:not(#account-register):not(#account-login):not(#account-forgotten):not(#account-forgotten-reset):not(#account-account):has(#column-right .dx-side) > .breadcrumb,
[id^="account-"].container:not(#account-register):not(#account-login):not(#account-forgotten):not(#account-forgotten-reset):not(#account-account):has(#column-right .dx-side) > .alert { grid-column: 1 / -1; }

/* The auth pages hide the module entirely (section 8), so they never match the
   :has() above and stay single column. */

@media (min-width: 940px) {
  [id^="account-"].container:not(#account-register):not(#account-login):not(#account-forgotten):not(#account-forgotten-reset):not(#account-account):has(#column-right .dx-side) {
    grid-template-columns: 226px minmax(0, 1fr);
  }
  /* Source order puts column_right last. Visually it belongs first. */
  [id^="account-"].container:not(#account-register):not(#account-login):not(#account-forgotten):not(#account-forgotten-reset):not(#account-account):has(#column-right .dx-side) > #column-right { grid-column: 1; grid-row: 2; }
  [id^="account-"].container:not(#account-register):not(#account-login):not(#account-forgotten):not(#account-forgotten-reset):not(#account-account):has(#column-right .dx-side) > #content     { grid-column: 2; grid-row: 2; }
}

/* On a phone the sidebar sits under the content - the dashboard is the primary
   way around, and a nav above the page you asked for is just a delay. */
#column-right .dx-side { margin: 40px 0 56px; }
@media (min-width: 940px) { #column-right .dx-side { margin: 0 0 56px; position: sticky; top: 24px; } }

.dx-side {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.dx-side__group { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.dx-side__group:last-child { border-bottom: 0; }
.dx-side__group h5 {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 6px; padding: 0 16px;
}
.dx-side__link {
  display: block;
  padding: 8px 16px 8px 16px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .16s, border-color .16s, background .16s;
}
.dx-side__link:hover { color: var(--accent); background: var(--ground); }
.dx-side__link.is-here {
  color: var(--ink); font-weight: 750;
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.dx-side__group--out { padding: 12px 0; }
.dx-side__link--out { color: var(--ink-3); font-weight: 600; }
.dx-side__link--out:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .dx-side__link { transition: none; }
}

/* OpenCart's common/column_right.twig wraps the modules in
   <div id="column-right" class="col-sm-3">. Inside the grid that Bootstrap
   width fought the track and squeezed the sidebar to 56px, wrapping every
   label onto three lines. The grid owns the width here. */
[id^="account-"].container > #column-right,
[id^="account-"].container > #column-left {
  width: auto;
  max-width: none;
  flex: none;
  padding-left: 0;
  padding-right: 0;
}

/* The dashboard already lists every one of these links, in the same three
   groups. Showing the sidebar there too is the same nav twice on one screen. */
#account-account #column-right { display: none; }