/* IRONABODE SIMULATOR — design tokens from Claude Design "Ironabode Simulator.dc.html" */

:root {
  --ink: #1E2220;
  --ink-soft: #3A403C;
  --ink-hover: #3A403C;
  --muted: #7A817C;
  --muted-2: #9AA09B;
  --muted-3: #5A625C;
  --paper: #FAFAF8;
  --card: #FFFFFF;
  --line: #C9CCC6;
  --line-soft: #E2E4DF;
  --line-faint: #F1F2EE;
  --panel: #EEF0EB;
  --stripe-a: #F1F2EE;
  --stripe-b: #E7E9E3;
  --accent: #E8FF66;
  --green: #3A7D44;
  --green-bg: #EFF6F0;
  --red: #B0463C;
  --red-bg: #FBF1F0;
  --mono: 'IBM Plex Mono', monospace;
  --sans: Archivo, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--sans);
  color: var(--ink);
}

a { color: var(--ink); text-decoration: underline; }
a:hover { color: var(--muted-3); }
input, select { font-family: var(--mono); }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; }

[data-action] { cursor: pointer; user-select: none; }

/* ══ SIMULATION BANNER ══ */
.sim-banner {
  background: repeating-linear-gradient(-45deg, #1E2220, #1E2220 14px, #2E3431 14px, #2E3431 28px);
  color: #F2F4F0;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 8px 16px; flex-wrap: wrap;
}
.sim-banner__tag {
  font: 600 11px var(--mono); letter-spacing: 0.12em;
  background: var(--accent); color: var(--ink); padding: 3px 8px;
}
.sim-banner__text { font: 500 12px var(--mono); }

/* ══ HEADER ══ */
.header {
  display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: 2px solid var(--ink); background: var(--paper); flex-wrap: wrap;
}
.header__brand { display: flex; align-items: center; gap: 14px; padding: 16px 28px; cursor: pointer; }
.header__logo { font: 700 20px var(--sans); letter-spacing: 0.16em; }
.header__sim-chip {
  font: 600 10px var(--mono); letter-spacing: 0.1em;
  border: 1.5px solid var(--ink); padding: 3px 7px;
}
.header__tabs { display: flex; align-items: stretch; font: 500 12px var(--mono); }
.tab {
  padding: 0 18px; display: flex; align-items: center; gap: 5px;
  border-left: 1px solid #D5D7D2; color: var(--ink-soft); font-weight: 500;
}
.tab.is-active { background: var(--panel); font-weight: 600; }
.tab--dark { border-left: 1px solid var(--ink); background: var(--ink); color: var(--accent); }

/* ══ CATALOG ══ */
.catalog-head { padding: 26px 28px 6px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.catalog-head__title { font: 700 26px var(--sans); }
.catalog-head__meta { font: 400 11px var(--mono); color: var(--muted); }
.catalog-filters { padding: 10px 28px 4px; display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  font: 500 11px var(--mono); padding: 7px 12px; cursor: pointer; user-select: none;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  display: inline-block;
}
.chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--accent); }
.chip--decline.is-active { background: var(--red); border-color: var(--red); color: #FFFFFF; }

.catalog-grid {
  padding: 14px 28px 32px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.card { border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; min-height: 300px; }
.card__meta {
  border-bottom: 1px solid var(--line-soft); padding: 6px 10px;
  display: flex; justify-content: space-between; font: 500 9px var(--mono); color: var(--muted);
}
.card__img {
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  padding: 10px; cursor: pointer; position: relative;
}
.card__img img { max-width: 86%; max-height: 86%; object-fit: contain; }
.img-pending {
  width: 86%; height: 86%;
  background: repeating-linear-gradient(-45deg, var(--stripe-a), var(--stripe-a) 10px, var(--stripe-b) 10px, var(--stripe-b) 20px);
  display: flex; align-items: center; justify-content: center;
}
.img-pending span { font: 500 9px var(--mono); color: var(--muted-2); text-align: center; padding: 0 12px; }
.card__badge {
  position: absolute; top: 8px; left: 8px;
  font: 600 9px var(--mono); background: var(--ink); color: var(--accent); padding: 3px 6px;
}
.card__body {
  padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line-soft); margin-top: auto;
}
.card__name { font: 600 14px var(--sans); }
.card__row { display: flex; justify-content: space-between; align-items: center; }
.card__price { font: 600 13px var(--mono); }

.btn-mini {
  font: 600 10px var(--mono); background: var(--ink); color: var(--accent);
  padding: 5px 9px; cursor: pointer; display: inline-block;
}
.btn-mini:hover { background: var(--ink-hover); }

/* ══ PRODUCT CONFIGURATOR ══ */
.product { padding: 22px 28px 40px; }
.back-link { font: 500 11px var(--mono); color: var(--muted); cursor: pointer; }
.product__cols { display: flex; gap: 32px; margin-top: 16px; flex-wrap: wrap; }
.product__media { flex: 1 1 380px; max-width: 560px; }
.product__frame {
  border: 1px solid var(--line); background: var(--card); aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center; padding: 24px; position: relative;
}
.product__frame img { max-width: 88%; max-height: 88%; object-fit: contain; }
.product__frame .img-pending { width: 88%; height: 88%; }
.product__frame .img-pending span { font-size: 10px; }
.sim-mark {
  position: absolute; top: 10px; left: 10px;
  font: 600 9px var(--mono); background: var(--ink); color: var(--accent); padding: 3px 6px;
}
.product__credit { font: 400 10px var(--mono); color: var(--muted); margin-top: 8px; }
.product__panel { flex: 1 1 360px; display: flex; flex-direction: column; gap: 18px; }
.product__id { display: flex; flex-direction: column; gap: 4px; }
.product__sku { font: 500 10px var(--mono); color: var(--muted); }
.product__name { font: 700 30px var(--sans); }
.product__base { font: 500 13px var(--mono); color: var(--ink-soft); }
.product__desc { font: 400 12px/1.6 var(--sans); color: var(--ink-soft); margin: 0; }
.product__specs { font: 400 10px var(--mono); color: var(--muted); }

.opt-group { display: flex; flex-direction: column; gap: 8px; }
.opt-label { font: 600 11px var(--mono); letter-spacing: 0.08em; }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-note { font: 400 10px var(--mono); color: var(--muted); }
.opt-cols { display: flex; gap: 24px; flex-wrap: wrap; }

.swatch { width: 30px; height: 30px; cursor: pointer; display: inline-block; border: 1px solid var(--line); }
.swatch.is-active { border: 2px solid var(--ink); outline: 2px solid var(--accent); outline-offset: -4px; }

.qty-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qty-btn {
  font: 600 14px var(--mono); border: 1px solid var(--ink); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none;
}
.qty-val { font: 600 15px var(--mono); min-width: 40px; text-align: center; }
.bulk-presets { display: flex; gap: 6px; margin-left: 10px; }
.bulk-preset { font: 500 11px var(--mono); border: 1px solid var(--line); padding: 6px 10px; cursor: pointer; }
.bulk-preset:hover { border-color: var(--ink); }

.price-box {
  border: 1px solid var(--ink); background: var(--card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.price-box__row { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: var(--ink-soft); }
.price-box__row--green { color: var(--green); }
.price-box__total {
  display: flex; justify-content: space-between; font: 600 16px var(--mono);
  border-top: 1px solid var(--line-soft); padding-top: 8px;
}

.btn-primary {
  font: 600 13px var(--mono); background: var(--ink); color: var(--accent);
  padding: 14px 20px; text-align: center; cursor: pointer; letter-spacing: 0.06em;
  display: block; border: none; width: 100%;
}
.btn-primary:hover { background: var(--ink-hover); }
.added-msg { font: 500 11px var(--mono); color: var(--green); }
.added-msg span { text-decoration: underline; cursor: pointer; }

/* ══ CART ══ */
.cart { padding: 22px 28px 40px; }
.page-title { font: 700 26px var(--sans); }
.empty-box {
  margin-top: 20px; border: 1px dashed var(--line); padding: 40px; text-align: center;
  font: 500 12px var(--mono); color: var(--muted);
}
.empty-box span { text-decoration: underline; cursor: pointer; color: var(--ink); }
.cart__cols { display: flex; gap: 28px; margin-top: 18px; flex-wrap: wrap; align-items: flex-start; }
.cart__rows { flex: 1 1 480px; display: flex; flex-direction: column; gap: 10px; }
.cart-row {
  border: 1px solid var(--line); background: var(--card); padding: 12px 14px;
  display: flex; gap: 14px; align-items: center;
}
.cart-row__thumb {
  width: 64px; height: 64px; background: var(--stripe-a);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cart-row__thumb img { max-width: 88%; max-height: 88%; object-fit: contain; }
.cart-row__info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cart-row__name { font: 600 14px var(--sans); }
.cart-row__cfg { font: 400 10px var(--mono); color: var(--muted); }
.cart-row__bulk { font: 500 10px var(--mono); color: var(--green); }
.cart-row__qty { display: flex; align-items: center; gap: 6px; }
.qty-btn--sm {
  font: 600 13px var(--mono); border: 1px solid var(--line); width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none;
}
.cart-row__qty-val { font: 600 13px var(--mono); min-width: 30px; text-align: center; }
.cart-row__line { font: 600 13px var(--mono); min-width: 92px; text-align: right; }
.cart-row__remove { font: 500 11px var(--mono); color: var(--red); cursor: pointer; padding: 4px; }

.summary {
  flex: 0 1 320px; border: 1px solid var(--ink); background: var(--card);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.summary__title {
  font: 600 12px var(--mono); letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 8px;
}
.promo-row { display: flex; gap: 6px; }
.promo-row input {
  flex: 1; border: 1px solid var(--line); padding: 8px 10px; font-size: 11px;
  outline: none; text-transform: uppercase; min-width: 0;
}
.promo-apply { font: 600 11px var(--mono); border: 1px solid var(--ink); padding: 8px 12px; cursor: pointer; user-select: none; }
.promo-msg { font: 500 11px var(--mono); }
.promo-msg--ok { color: var(--green); }
.promo-msg--err { color: var(--red); }
.trade-row { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.trade-box { width: 16px; height: 16px; border: 1.5px solid var(--ink); display: inline-block; flex-shrink: 0; background: var(--card); }
.trade-box.is-checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--accent); }
.trade-label { font: 500 11px var(--mono); }
.summary__lines {
  border-top: 1px solid var(--line-soft); padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px; font: 500 12px var(--mono); color: var(--ink-soft);
}
.summary__line { display: flex; justify-content: space-between; }
.summary__line--green { color: var(--green); }
.summary__total {
  display: flex; justify-content: space-between; font: 600 17px var(--mono);
  border-top: 1px solid var(--ink); padding-top: 10px;
}
.summary__note { font: 400 9px var(--mono); color: var(--muted); text-align: center; }
.btn-checkout {
  font: 600 12px var(--mono); background: var(--ink); color: var(--accent);
  padding: 13px; text-align: center; cursor: pointer; letter-spacing: 0.06em;
}
.btn-checkout:hover { background: var(--ink-hover); }

/* ══ CHECKOUT ══ */
.checkout { padding: 22px 28px 40px; max-width: 720px; }
.steps { display: flex; margin-top: 14px; font: 500 10px var(--mono); }
.step { padding: 8px 16px; letter-spacing: 0.08em; background: var(--panel); color: var(--muted); border: 1px solid #D5D7D2; }
.step.is-active { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.checkout__box {
  margin-top: 20px; border: 1px solid var(--line); background: var(--card);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.checkout__box--pay { gap: 14px; }
.form-note { font: 600 11px var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.checkout__box input { border: 1px solid var(--line); padding: 10px 12px; font-size: 12px; outline: none; }
.form-row { display: flex; gap: 12px; }
.form-row input { min-width: 0; }
.form-row .grow-2 { flex: 2; }
.form-row .grow-1 { flex: 1; }
.fake-card {
  border: 1px dashed var(--line); background: var(--paper); padding: 14px 16px;
  font: 500 12px var(--mono); color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px;
}
.btn-continue {
  font: 600 12px var(--mono); background: var(--ink); color: var(--accent);
  padding: 12px 24px; text-align: center; cursor: pointer; align-self: flex-start;
}
.btn-continue:hover { background: var(--ink-hover); }
.btn-back { font: 600 12px var(--mono); border: 1px solid var(--ink); padding: 12px 20px; cursor: pointer; }
.btn-row { display: flex; gap: 10px; }
.review-line {
  display: flex; justify-content: space-between; font: 500 12px var(--mono);
  border-bottom: 1px solid var(--line-faint); padding-bottom: 8px; gap: 12px;
}
.review-line .cfg { color: var(--muted); }
.review-meta { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: var(--ink-soft); gap: 12px; }
.review-total {
  display: flex; justify-content: space-between; font: 600 16px var(--mono);
  border-top: 1px solid var(--ink); padding-top: 10px;
}
.decline-box {
  border: 1px solid var(--red); background: var(--red-bg); color: var(--red);
  padding: 10px 12px; font: 500 11px var(--mono);
}

/* ══ CONFIRMATION ══ */
.confirm-wrap { padding: 40px 28px; max-width: 640px; }
.confirm {
  border: 2px solid var(--ink); background: var(--card); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.confirm__flag { font: 600 11px var(--mono); letter-spacing: 0.1em; color: var(--green); }
.confirm__id { font: 700 28px var(--sans); }
.confirm__meta { font: 500 12px var(--mono); color: var(--ink-soft); }
.confirm__note { font: 400 11px var(--mono); color: var(--muted); }
.confirm__actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

/* ══ ORDERS LOG ══ */
.orders { padding: 22px 28px 40px; }
.orders__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.orders__meta { font: 400 11px var(--mono); color: var(--muted); }
.orders__rows { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.order-row {
  border: 1px solid var(--line); background: var(--card); padding: 12px 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.order-row__id { font: 600 13px var(--mono); min-width: 130px; }
.order-row__date { font: 400 11px var(--mono); color: var(--muted); min-width: 150px; }
.order-row__items { font: 400 11px var(--mono); color: var(--ink-soft); flex: 1; }
.order-row__total { font: 600 12px var(--mono); min-width: 92px; text-align: right; }
.order-row__status { font: 600 9px var(--mono); background: var(--panel); border: 1px solid var(--line); padding: 4px 8px; }

/* ══ SHIPSTATION SYNC ══ */
.ss-chip { font: 600 9px var(--mono); background: var(--panel); border: 1px solid var(--line); padding: 4px 8px; color: var(--muted-3); }
.ss-chip--synced { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.ss-chip--failed { color: var(--red); border-color: var(--red); background: var(--red-bg); }

/* ══ FOOTER ══ */
.footer {
  border-top: 2px solid var(--ink); background: var(--panel); padding: 14px 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 400 10px var(--mono); color: var(--muted-3);
}

@media (max-width: 720px) {
  .header__tabs { width: 100%; overflow-x: auto; border-top: 1px solid #D5D7D2; }
  .tab { padding: 12px 14px; white-space: nowrap; }
  .cart-row { flex-wrap: wrap; }
}