/* ==========================================================================
   DEXIE - cart and checkout
   The last screens before the money, and until now the only ones that still
   looked like stock OpenCart. The markup they style keeps every id, name and
   formaction the core javascript binds to; only the presentation is ours.
   ========================================================================== */

/* ---------- 1. cart: items beside a summary that stays put --------------- */
.dx-cartgrid {
  display: grid;
  gap: 34px;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 64px;
}
@media (min-width: 900px) {
  .dx-cartgrid { grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; }
}

.dx-lines { margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.dx-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 620px) {
  .dx-line { grid-template-columns: 108px minmax(0, 1fr) auto; gap: 22px; }
}

.dx-line__img {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  aspect-ratio: 1;
  overflow: hidden;
}
.dx-line__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.dx-line__name {
  display: block;
  font-size: 14.5px; font-weight: 750; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none; line-height: 1.3;
}
.dx-line__name:hover { color: var(--accent); }

.dx-line__meta { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.dx-line__meta strong { color: var(--ink-2); font-weight: 650; }

.dx-line__short {
  margin: 8px 0 0; font-size: 12px; font-weight: 650;
  color: var(--accent);
}
.dx-line.is-short .dx-line__img { border-color: var(--accent); }

.dx-line__form { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

/* Quantity: a field and its own commit button, joined into one control. */
.dx-qty { display: flex; align-items: stretch; }
.dx-qty__input {
  width: 62px;
  border: 1px solid var(--rule-2);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface);
  padding: 8px 10px;
  font-size: 14px; font-weight: 650; text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.dx-qty__input:focus { outline: 0; border-color: var(--ink); }
.dx-qty__input.is-invalid { border-color: var(--accent); }
.dx-qty__update {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--accent-ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.dx-qty__update:hover { background: transparent; color: var(--ink); }

/* Keeps the class the core javascript binds its remove handler to, without
   inheriting Bootstrap's red button look. */
.dx-line__remove.btn-danger,
a.dx-line__remove {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--ink-3) !important;
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .16s;
}
a.dx-line__remove:hover { color: var(--accent) !important; }

.dx-line__min { display: block; margin-top: 8px; font-size: 12px; color: var(--accent); }

.dx-line__money {
  grid-column: 2 / -1;
  display: flex; align-items: baseline; gap: 10px;
}
@media (min-width: 620px) {
  .dx-line__money { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
}
.dx-line__total {
  font-size: 16px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.dx-line__unit { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dx-cartextras { margin-top: 28px; }

/* ---------- 2. the summary ---------------------------------------------- */
.dx-summary__inner {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px 24px 24px;
}
@media (min-width: 900px) {
  .dx-summary__inner { position: sticky; top: 96px; }
}

.dx-summary__title {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 16px;
}

.dx-summary__table { width: 100%; border-collapse: collapse; }
.dx-summary__table th,
.dx-summary__table td {
  padding: 8px 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-2);
  border: 0;
}
.dx-summary__table th { text-align: left; }
.dx-summary__table td { text-align: right; font-variant-numeric: tabular-nums; }

.dx-summary__grand th,
.dx-summary__grand td {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 17px; font-weight: 800; color: var(--ink);
  letter-spacing: -.02em;
}

.dx-summary__go {
  display: block; margin-top: 20px; text-align: center;
  background: var(--ink); border: 1px solid var(--ink); color: var(--accent-ink);
  border-radius: var(--radius);
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 15px 20px; text-decoration: none;
  transition: background .16s, color .16s;
}
.dx-summary__go:hover { background: transparent; color: var(--ink); }

.dx-summary__back {
  display: block; margin-top: 12px; text-align: center;
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
  color: var(--ink-3); text-decoration: none;
}
.dx-summary__back:hover { color: var(--accent); }

/* ---------- 3. empty cart ------------------------------------------------ */
.dx-empty {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(40px, 7vw, 84px) 28px;
  text-align: center;
  margin-bottom: 64px;
}
.dx-empty h1 { margin: 0 0 10px; }
.dx-empty p { margin: 0 0 26px; color: var(--ink-2); font-size: 14.5px; }
.dx-empty .dx-slide__btn { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }
.dx-empty .dx-slide__btn:hover { background: transparent; color: var(--ink); }

/* ---------- 4. checkout layout ------------------------------------------ */
.dx-checkout__head { margin-bottom: 26px; }

.dx-checkout {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 70px;
}
@media (min-width: 992px) {
  .dx-checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
}

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

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

/* Each step is a card, so the eye can tell one decision from the next. */
.dx-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px 24px 22px;
}
.dx-panel:empty { display: none; }

.dx-panel legend,
.dx-panel h2 {
  font-size: 11px !important; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 18px; padding: 0; float: none; width: auto;
  border: 0;
}
.dx-panel fieldset { border: 0; padding: 0; margin: 0; }
.dx-panel fieldset + fieldset { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule); }

.dx-panel--confirm { background: var(--ground); }
.dx-panel--confirm table { width: 100%; }

/* ---------- 5. form controls inside checkout ----------------------------- */
.dx-panel .form-label,
.dx-panel .col-form-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 5px;
}
.dx-panel .form-control,
.dx-panel .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;
}
.dx-panel .form-control:focus,
.dx-panel .form-select:focus {
  border-color: var(--ink);
  box-shadow: none;
  outline: 0;
}
.dx-panel .form-control.is-invalid,
.dx-panel .form-select.is-invalid { border-color: var(--accent); }
.dx-panel .invalid-feedback { color: var(--accent); font-size: 12.5px; }

.dx-panel .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;
}
.dx-panel .btn-primary:hover { background: transparent; color: var(--ink); }

.dx-panel .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.dx-panel .form-check-label { font-size: 14px; color: var(--ink-2); }

/* The confirm panel carries the one button that takes the money. */
#checkout-confirm .btn-primary,
#button-confirm {
  display: block; width: 100%;
  padding: 16px 20px;
  font-size: 12.5px; letter-spacing: .14em;
}

/* ---------- 6. reassurance ---------------------------------------------- */
.dx-reassure { margin: 18px 0 0; padding: 0; }
.dx-reassure li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
  padding: 7px 0;
}
.dx-reassure i { color: var(--accent); font-size: 12px; margin-top: 2px; }

/* ---------- 7. the order summary table inside confirm ------------------- */
#checkout-confirm .table { margin-bottom: 0; }
#checkout-confirm .table > :not(caption) > * > * {
  border-bottom-color: var(--rule);
  padding: 9px 6px;
  font-size: 13.5px;
  background: transparent;
}
#checkout-confirm .table td.text-end { font-variant-numeric: tabular-nums; }
#checkout-confirm .table tfoot tr:last-child td,
#checkout-confirm .table tfoot tr:last-child th {
  font-size: 16px; font-weight: 800; color: var(--ink);
}

/* ---------- 8. reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dx-qty__update, .dx-summary__go, .dx-line__remove, .dx-line__name { transition: none; }
}