/* ==========================================================================
   EKIT — stylesheet entry point.
   Import order matters: tokens -> reset -> global -> components -> areas.
   ========================================================================== */

@import url("variables.css?v=20261104b");
@import url("reset.css?v=20261106m");
@import url("global.css?v=20261104b");
@import url("components.css?v=20261106m");
@import url("navbar.css?v=20261108fs");
@import url("footer.css?v=20261104b");
@import url("product.css?v=20261107c");
@import url("forms.css?v=20261108a");
@import url("checkout.css?v=20261107d");
@import url("widgets.css?v=20261104b");
@import url("responsive.css?v=20261108f");
@import url("arduino.css?v=20261104b");
@import url("hero-bento.css?v=20261108cp");
@import url("verify.css?v=20261108a");
@import url("small-screens.css?v=20261108dq");

/* ==========================================================================
   What is in the box, on an order
   A collapsed list per purchased line: parts for an ordinary kit, the
   customer's own build for a customised one. Same restraint as the rest of
   the order page — hairlines, small type, nothing that competes with the
   status and the total above it.
   ========================================================================== */
.od-kit {
  margin-top: 6px;
}

.od-kit__sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  list-style: none;
}

.od-kit__sum::-webkit-details-marker {
  display: none;
}

.od-kit__sum:hover {
  color: var(--brand-600);
}

.od-kit[open] .od-kit__sum {
  color: var(--text);
  font-weight: 600;
}

.od-kit__list {
  margin-top: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 4px 0;
}

.od-kit__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 3px 8px;
  font-size: var(--fs-xs);
}

.od-kit__img {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--bg-muted);
  border-radius: 3px;
  color: var(--text-subtle);
}

.od-kit__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

.od-kit__name {
  min-width: 0;
}

.od-kit__qty {
  color: var(--text-muted);
  white-space: nowrap;
}

.od-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  border: 1px solid var(--brand-100);
}

.od-custom__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-700);
}