/* EXP SHOP. Built on the same palette as the rest of the site -- exp-theme.css
   declares --exp-*, app.css declares --app-*. The values below are aliases of
   those, named locally so the shop pages read cleanly without importing a
   stylesheet full of game-layout rules they do not use. */

:root {
  --shop-bg: #ffffff;
  --shop-fg: #08242c;
  --shop-dim: #52707a;
  --shop-line: rgba(22, 200, 210, 0.28);
  --shop-panel: #ffffff;
  --shop-accent: #16c8d2;
  --shop-accent-ink: #06343a;
  --shop-ok: #2fa85a;
  --shop-warn: #b8791a;
  --shop-bad: #c8384f;
  --shop-radius: 16px;
  --shop-nav-h: 62px;
}

.shop-body {
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f2fdff 100%);
  color: var(--shop-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

/* ---- nav ------------------------------------------------------------------ */

.shop-nav {
  position: sticky;
  top: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--shop-nav-h);
  padding: 0 16px;
  background: var(--shop-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.shop-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
}
.shop-nav__brand img { height: 32px; width: auto; display: block; }
.shop-nav__links { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.shop-nav__link {
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--shop-fg);
  font: 600 14px/1 inherit;
}
.shop-nav__link:hover { background: rgba(22, 200, 210, 0.12); }
.shop-nav__link--accent { color: var(--shop-accent-ink); font-weight: 700; }
.shop-nav__who { color: var(--shop-dim); font-size: 13px; padding-left: 6px; }

/* The brand, the search box and the links in one non-wrapping row have a
   combined minimum width of ~600px, which made the whole page scroll sideways on
   a phone. Below 720px the search drops to its own line and the row is allowed
   to wrap. */
@media (max-width: 720px) {
  .shop-nav {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }
  .shop-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }
  .shop-nav__links { gap: 4px; }
  .shop-nav__link { padding: 7px 11px; font-size: 13px; }
  .shop-nav__who { flex-basis: 100%; padding-left: 0; }
}

/* ---- layout --------------------------------------------------------------- */

.shop-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 16px 80px;
  display: grid;
  gap: 18px;
}
/* The wizard replaces this element's contents on every step, so it carries the
   gap itself rather than relying on being a grid child of .shop-main. */
#sellRoot { display: grid; gap: 18px; }

.shop-card {
  background: var(--shop-panel);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(20, 150, 160, 0.08);
}
.shop-card--center { text-align: center; }
.shop-card--quiet { background: rgba(22, 200, 210, 0.05); box-shadow: none; }
.shop-card--ok { border-color: rgba(47, 168, 90, 0.4); }
.shop-card--warn { border-color: rgba(184, 121, 26, 0.45); }
.shop-card--bad { border-color: rgba(200, 56, 79, 0.45); }
.shop-card--pending { border-color: var(--shop-line); }

.shop-card h1 { margin: 6px 0 10px; font-size: 26px; line-height: 1.2; }
.shop-card h2 { margin: 0 0 8px; font-size: 17px; }
.shop-card p { margin: 0 0 10px; color: var(--shop-dim); line-height: 1.5; }
.shop-card p:last-child { margin-bottom: 0; }
.shop-card a { color: var(--shop-accent-ink); }

.shop-eyebrow {
  margin: 0;
  font: 800 11px/1 inherit;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--shop-accent-ink);
}
.shop-note { font-size: 13px; }
.shop-note--warn { color: var(--shop-warn); }
.shop-list { margin: 0 0 12px; padding-left: 18px; color: var(--shop-dim); font-size: 13px; }

/* ---- choices -------------------------------------------------------------- */

.shop-choices { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 620px) { .shop-choices { grid-template-columns: 1fr 1fr; } }

.shop-choice {
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 18px;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.shop-choice:hover { border-color: var(--shop-accent); background: rgba(22, 200, 210, 0.06); }
.shop-choice__title { font-weight: 800; font-size: 17px; }
.shop-choice__body { color: var(--shop-dim); font-size: 14px; }

/* ---- forms ---------------------------------------------------------------- */

.shop-form { display: grid; gap: 16px; margin-top: 8px; }
.shop-field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.shop-field em { font-weight: 500; color: var(--shop-dim); font-style: normal; }
.shop-field input,
.shop-field textarea {
  font: inherit;
  font-weight: 500;
  padding: 11px 13px;
  border: 1px solid var(--shop-line);
  border-radius: 11px;
  background: #fff;
  color: var(--shop-fg);
  width: 100%;
  box-sizing: border-box;
}
.shop-field input:focus,
.shop-field textarea:focus { outline: 2px solid var(--shop-accent); outline-offset: 1px; }

.shop-slug { display: flex; align-items: stretch; }
.shop-slug__prefix {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--shop-dim);
  padding: 0 0 0 13px;
  border: 1px solid var(--shop-line);
  border-right: 0;
  border-radius: 11px 0 0 11px;
  background: rgba(22, 200, 210, 0.06);
  white-space: nowrap;
}
.shop-slug input { border-radius: 0 11px 11px 0; min-width: 0; }

/* On a phone the full "exptube.com/shop/" prefix took 139px of a 375px row and
   left the address itself 155px to live in. The host is the part a seller can
   infer, so it is the part that goes. */
@media (max-width: 520px) {
  .shop-slug__host { display: none; }
}

.shop-hint { font-weight: 500; font-size: 12px; color: var(--shop-dim); }
.shop-hint--ok { color: var(--shop-ok); }
.shop-hint--bad { color: var(--shop-bad); }

/* ---- buttons -------------------------------------------------------------- */

.shop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: #fff;
  color: var(--shop-fg);
  font: 700 15px/1 inherit;
  text-decoration: none;
  cursor: pointer;
}
.shop-btn:hover { background: rgba(22, 200, 210, 0.08); }
.shop-btn:disabled { opacity: 0.55; cursor: default; }
.shop-btn--accent {
  background: var(--shop-accent);
  border-color: var(--shop-accent);
  color: #04282d;
}
.shop-btn--accent:hover { filter: brightness(1.05); background: var(--shop-accent); }

/* ---- search + chips -------------------------------------------------------- */

.shop-search { display: flex; gap: 0; flex: 1 1 auto; max-width: 520px; margin-left: 12px; }
.shop-search__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 9px 13px;
  border: 1px solid var(--shop-line);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: #fff;
  color: var(--shop-fg);
}
.shop-search__input:focus { outline: 2px solid var(--shop-accent); outline-offset: -1px; }
.shop-search__go {
  font: 700 14px/1 inherit;
  padding: 0 18px;
  border: 1px solid var(--shop-line);
  border-radius: 0 999px 999px 0;
  background: rgba(22, 200, 210, 0.1);
  color: var(--shop-accent-ink);
  cursor: pointer;
}
.shop-search__go:hover { background: rgba(22, 200, 210, 0.2); }

.shop-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-chip {
  padding: 8px 15px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  background: #fff;
  color: var(--shop-fg);
  font: 600 14px/1 inherit;
  cursor: pointer;
}
.shop-chip:hover { background: rgba(22, 200, 210, 0.1); }
.shop-chip.is-active {
  background: var(--shop-accent);
  border-color: var(--shop-accent);
  color: #04282d;
}

.shop-main--wide { max-width: 1180px; }
.shop-heading { margin: 4px 0 0; font-size: 22px; }
.shop-empty {
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  color: var(--shop-dim);
  border: 1px dashed var(--shop-line);
  border-radius: var(--shop-radius);
}
.shop-row { display: grid; gap: 16px; }
@media (min-width: 620px) { .shop-row { grid-template-columns: 1fr 1fr; } }
.shop-headrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; }
.shop-field select {
  font: inherit;
  font-weight: 500;
  padding: 11px 13px;
  border: 1px solid var(--shop-line);
  border-radius: 11px;
  background: #fff;
  color: var(--shop-fg);
  width: 100%;
  box-sizing: border-box;
}
.shop-subfield { display: grid; gap: 6px; font-weight: 600; font-size: 13px; max-width: 200px; }
.shop-subfield input {
  font: inherit; font-weight: 500; padding: 9px 11px;
  border: 1px solid var(--shop-line); border-radius: 9px; background: #fff;
}
.shop-btn--small { padding: 8px 14px; font-size: 13px; }
.shop-btn--quiet { background: transparent; color: var(--shop-dim); }

/* ---- product cards --------------------------------------------------------- */

.pgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.pcard {
  display: block;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.pcard:hover { border-color: var(--shop-accent); box-shadow: 0 8px 22px rgba(20, 150, 160, 0.14); }
.pcard__media { position: relative; aspect-ratio: 1 / 1; background: #eefaff; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 800 22px/1 inherit; color: rgba(8, 36, 44, 0.2);
}
.pcard__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  font: 700 11px/1.4 inherit; background: #fff;
}
.pcard__badge--bad { color: var(--shop-bad); box-shadow: 0 0 0 1px rgba(200, 56, 79, 0.4); }
.pcard__badge--warn { color: var(--shop-warn); box-shadow: 0 0 0 1px rgba(184, 121, 26, 0.4); }

.pcard__body { padding: 12px 13px 14px; display: grid; gap: 3px; }
.pcard__name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.pcard__shop { font-size: 12px; color: var(--shop-dim); }
.pcard__price { font-weight: 800; font-size: 16px; margin-top: 3px; }
.pcard__item {
  margin-top: 4px;
  font: 700 10px/1.4 inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--shop-accent-ink);
}

/* ---- storefront ------------------------------------------------------------ */

.shopfront {
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
  overflow: hidden;
}
.shopfront__banner {
  height: 160px;
  background: linear-gradient(120deg, rgba(22, 200, 210, 0.25), rgba(57, 223, 55, 0.2));
  background-size: cover;
  background-position: center;
}
.shopfront__identity { display: flex; gap: 16px; padding: 0 20px 20px; margin-top: -34px; }
.shopfront__logo {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: 18px;
  border: 3px solid #fff;
  background: var(--shop-accent);
  color: #04282d;
  display: flex; align-items: center; justify-content: center;
  font: 800 30px/1 inherit;
  overflow: hidden;
}
.shopfront__logo img { width: 100%; height: 100%; object-fit: cover; }
.shopfront__text { padding-top: 40px; min-width: 0; }
.shopfront__text h1 { margin: 0 0 6px; font-size: 24px; }
.shopfront__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: var(--shop-dim);
}
.shopfront__verified { color: var(--shop-ok); font-weight: 700; }
.shopfront__type { font-weight: 700; }
.shopfront__bio { margin: 10px 0 0; color: var(--shop-dim); line-height: 1.5; }

/* ---- product page ---------------------------------------------------------- */

.pdp__crumbs { font-size: 13px; color: var(--shop-dim); }
.pdp__crumbs a { color: var(--shop-accent-ink); text-decoration: none; }
.pdp__crumbs a:hover { text-decoration: underline; }

.pdp { display: grid; gap: 24px; }
@media (min-width: 860px) { .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.pdp__media { display: grid; gap: 10px; }
.pdp__image,
.pdp__placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-line);
  background: #eefaff;
}
.pdp__placeholder { display: flex; align-items: center; justify-content: center; font: 800 34px/1 inherit; color: rgba(8, 36, 44, 0.2); }
.pdp__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp__thumb {
  width: 62px; height: 62px; padding: 0;
  border: 1px solid var(--shop-line); border-radius: 10px;
  background: #fff; overflow: hidden; cursor: pointer;
}
.pdp__thumb.is-active { border-color: var(--shop-accent); box-shadow: 0 0 0 2px rgba(22, 200, 210, 0.3); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp__info { display: grid; gap: 12px; align-content: start; }
.pdp__name { margin: 0; font-size: 27px; line-height: 1.2; }
.pdp__shop { font-size: 14px; color: var(--shop-accent-ink); text-decoration: none; }
.pdp__shop:hover { text-decoration: underline; }
.pdp__price { font-size: 28px; font-weight: 800; }

.pdp__variants { display: grid; gap: 12px; }
.pdp__axis-label {
  font: 700 11px/1 inherit; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--shop-dim); margin-bottom: 6px;
}
.pdp__axis-values { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp__option {
  padding: 9px 15px; border: 1px solid var(--shop-line); border-radius: 999px;
  background: #fff; color: inherit; font: 600 14px/1 inherit; cursor: pointer;
}
.pdp__option:hover { border-color: var(--shop-accent); }
.pdp__option.is-active { background: var(--shop-accent); border-color: var(--shop-accent); color: #04282d; }

.pdp__stock { font-size: 14px; font-weight: 700; color: var(--shop-dim); }
.pdp__stock--ok { color: var(--shop-ok); }
.pdp__stock--warn { color: var(--shop-warn); }
.pdp__stock--bad { color: var(--shop-bad); }
.pdp__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp__description { white-space: pre-wrap; }

/* ---- item profile panel ---------------------------------------------------- */

.ipanel {
  border: 1px solid rgba(22, 200, 210, 0.45);
  border-radius: var(--shop-radius);
  background: linear-gradient(160deg, rgba(22, 200, 210, 0.09), rgba(57, 223, 55, 0.06));
  padding: 20px;
}
.ipanel__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ipanel__eyebrow {
  font: 800 11px/1 inherit; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--shop-accent-ink);
}
.ipanel__rarity {
  padding: 4px 12px; border-radius: 999px; background: #fff;
  font: 700 12px/1.4 inherit; color: var(--shop-accent-ink);
}
.ipanel__body { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.ipanel__art {
  width: 104px; height: 104px; flex: 0 0 auto;
  border-radius: 14px; border: 1px solid var(--shop-line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 20px/1 inherit; color: rgba(8, 36, 44, 0.25); overflow: hidden;
}
.ipanel__art img { width: 100%; height: 100%; object-fit: cover; }
.ipanel__detail { min-width: 0; flex: 1 1 240px; display: grid; gap: 8px; align-content: start; }
.ipanel__name { font-weight: 800; font-size: 17px; }
.ipanel__level { font-size: 13px; color: var(--shop-dim); font-weight: 700; }
.ipanel__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ipanel__stats li {
  display: flex; gap: 6px; align-items: baseline;
  padding: 5px 11px; border-radius: 9px; background: #fff;
  font-size: 12px; color: var(--shop-dim);
}
.ipanel__stats strong { color: var(--shop-fg); }
.ipanel__traits { display: flex; flex-wrap: wrap; gap: 6px; }
.ipanel__trait {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--shop-line); background: #fff; font-size: 12px;
}
.ipanel__character { font-size: 13px; color: var(--shop-accent-ink); font-weight: 700; }
.ipanel__note { margin: 16px 0 0; font-size: 13px; color: var(--shop-dim); }

/* ---- seller product list --------------------------------------------------- */

.plist { display: grid; gap: 10px; }
.prow {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius); background: #fff;
}
.prow__media {
  width: 58px; height: 58px; flex: 0 0 auto;
  border-radius: 11px; background: #eefaff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font: 800 13px/1 inherit; color: rgba(8, 36, 44, 0.25);
}
.prow__media img { width: 100%; height: 100%; object-fit: cover; }
.prow__text { flex: 1 1 200px; min-width: 0; }
.prow__name { font-weight: 700; }
.prow__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--shop-dim); margin-top: 3px; }
.prow__status { font-weight: 700; }
.prow__status--ok { color: var(--shop-ok); }
.prow__status--warn { color: var(--shop-warn); }
.prow__status--quiet { color: var(--shop-dim); }
.prow__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- product form ---------------------------------------------------------- */

.pform__images { display: flex; flex-wrap: wrap; gap: 10px; }
.pform__image { position: relative; width: 84px; height: 84px; border-radius: 11px; overflow: hidden; border: 1px solid var(--shop-line); }
.pform__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pform__image-x {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 11px; cursor: pointer; line-height: 1;
}
.pform__upload {
  width: 84px; height: 84px; border-radius: 11px;
  border: 1px dashed var(--shop-line); background: rgba(22, 200, 210, 0.05);
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1.3 inherit; color: var(--shop-dim); text-align: center; cursor: pointer;
}
.pform__upload:hover { border-color: var(--shop-accent); }

/* The one-version / several-versions choice. Stacked rather than side by side
   so the second option's longer label does not wrap into an unreadable column
   on a phone. */
.pform__mode { display: grid; gap: 8px; margin: 4px 0 12px; }
.pform__mode .shop-check { align-items: flex-start; font-weight: 500; }

.pform__variants { display: grid; gap: 8px; margin-bottom: 10px; }
.pform__variant {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}
@media (min-width: 780px) {
  .pform__variant { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
}
.pform__variant input {
  font: inherit; font-weight: 500; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--shop-line); border-radius: 9px; background: #fff;
  width: 100%; box-sizing: border-box; min-width: 0;
}
.pform__variant-x {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--shop-line); background: #fff;
  color: var(--shop-bad); cursor: pointer; line-height: 1;
}

/* ---- cart ------------------------------------------------------------------ */

.clist { display: grid; gap: 10px; }

.crow {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid rgba(22, 200, 210, 0.18);
}
.crow:last-child { border-bottom: 0; }
.crow--problem { opacity: 0.75; }

.crow__media {
  width: 62px; height: 62px; flex: 0 0 auto;
  border-radius: 11px; background: #eefaff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font: 800 13px/1 inherit; color: rgba(8, 36, 44, 0.25);
  text-decoration: none;
}
.crow__media img { width: 100%; height: 100%; object-fit: cover; }

.crow__text { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.crow__name { font-weight: 700; color: inherit; text-decoration: none; }
.crow__name:hover { text-decoration: underline; }
.crow__variant { font-size: 13px; color: var(--shop-dim); }
.crow__shop { font-size: 12px; color: var(--shop-accent-ink); text-decoration: none; }
.crow__problem { font-size: 13px; font-weight: 700; color: var(--shop-bad); }
.crow__item {
  font: 700 10px/1.4 inherit; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--shop-accent-ink);
}

.crow__qty { display: flex; align-items: center; gap: 4px; }
.crow__step {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--shop-line); background: #fff;
  font: 700 16px/1 inherit; color: var(--shop-fg); cursor: pointer;
}
.crow__step:hover { background: rgba(22, 200, 210, 0.1); }
.crow__count { min-width: 26px; text-align: center; font-weight: 700; }

.crow__price { font-weight: 800; min-width: 78px; text-align: right; }
.crow__remove {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--shop-line); background: #fff;
  color: var(--shop-dim); cursor: pointer; line-height: 1; font-size: 12px;
}
.crow__remove:hover { color: var(--shop-bad); border-color: rgba(200, 56, 79, 0.4); }

.ctotals { display: grid; gap: 8px; margin-bottom: 6px; }
.ctotals__row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.ctotals__row--muted { color: var(--shop-dim); font-size: 13px; }
.ctotals__row--total {
  border-top: 1px solid var(--shop-line);
  padding-top: 10px; margin-top: 4px; font-size: 18px;
}

/* ---- purchase success ------------------------------------------------------ */

.success__spinner {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid rgba(22, 200, 210, 0.25);
  border-top-color: var(--shop-accent);
  border-radius: 50%;
  animation: successSpin 0.9s linear infinite;
}
@keyframes successSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .success__spinner { animation-duration: 3s; }
}

.shop-status--ok { background: rgba(47, 168, 90, 0.12); color: var(--shop-ok); }

/* ---- owned item collection -------------------------------------------------- */
/* Deliberately reads as a game inventory rather than an order history: square
   art, a level badge, a rarity-ish state chip. One card is one object you own. */

.icollection__head {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 0 0 14px; color: var(--shop-dim); font-size: 14px;
}
.icollection__head strong { color: var(--shop-fg); font-size: 17px; }

.igrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.icard {
  display: block;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: linear-gradient(165deg, #fff, #f4fdff);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.icard:hover { border-color: var(--shop-accent); box-shadow: 0 8px 22px rgba(20, 150, 160, 0.16); }
.icard--retired { opacity: 0.6; }
.icard--retired:hover { opacity: 0.85; }

.icard__art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 32%, #fff, #dff6fd);
  display: flex; align-items: center; justify-content: center;
}
.icard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icard__placeholder { font: 800 20px/1 inherit; color: rgba(8, 36, 44, 0.2); }
.icard__level {
  position: absolute; bottom: 8px; left: 8px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(6, 52, 58, 0.85); color: #eafcff;
  font: 800 11px/1.4 inherit;
}

.icard__body { padding: 10px 12px 12px; display: grid; gap: 3px; }
.icard__name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.icard__variant { font-size: 12px; color: var(--shop-dim); }
.icard__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 11px; color: var(--shop-dim); margin-top: 3px;
}
.icard__state { font-weight: 800; }
.icard__state--ok { color: var(--shop-ok); }
.icard__state--warn { color: var(--shop-warn); }
.icard__state--bad { color: var(--shop-bad); }

/* ---- one owned item --------------------------------------------------------- */

.iprofile {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  padding: 20px;
  border: 1px solid rgba(22, 200, 210, 0.45);
  border-radius: var(--shop-radius);
  background: linear-gradient(160deg, rgba(22, 200, 210, 0.1), rgba(57, 223, 55, 0.06));
}
.iprofile__art {
  position: relative;
  width: 148px; height: 148px; flex: 0 0 auto;
  border-radius: 18px; border: 1px solid var(--shop-line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 24px/1 inherit; color: rgba(8, 36, 44, 0.22); overflow: hidden;
}
.iprofile__art img { width: 100%; height: 100%; object-fit: cover; }
.iprofile__level {
  position: absolute; bottom: 8px; left: 8px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(6, 52, 58, 0.85); color: #eafcff;
  font: 800 12px/1.4 inherit;
}
.iprofile__head { min-width: 0; flex: 1 1 240px; }
.iprofile__head h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.iprofile__variant { color: var(--shop-dim); margin-bottom: 8px; }
.iprofile__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- dashboard --------------------------------------------------------------- */

.dgrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.dtile {
  padding: 16px;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
}
.dtile__label {
  font: 700 11px/1 inherit; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--shop-dim);
}
.dtile__value { font-size: 24px; font-weight: 800; margin-top: 7px; }
.dtile__note { font-size: 12px; color: var(--shop-dim); margin-top: 4px; }

.dselect {
  font: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--shop-line); border-radius: 9px; background: #fff;
  color: var(--shop-fg); text-transform: capitalize;
}
.dinput {
  font: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--shop-line); border-radius: 9px; background: #fff;
  color: var(--shop-fg); min-width: 0; flex: 1 1 160px;
}
.dinput:focus, .dselect:focus { outline: 2px solid var(--shop-accent); outline-offset: 1px; }

/* ---- shipping a parcel ------------------------------------------------------ */

.prow--order { align-items: flex-start; }

.dship {
  flex-basis: 100%;
  display: grid;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 200, 210, 0.2);
}
@media (min-width: 760px) { .dship { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }

.dship__label {
  font: 800 10px/1 inherit; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--shop-dim); margin-bottom: 6px;
}
.dship__address address {
  font-style: normal; font-size: 13px; line-height: 1.55;
  color: var(--shop-fg); margin-bottom: 8px;
}
.dship__fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dship__link {
  display: inline-block; margin-top: 8px;
  font-size: 13px; font-weight: 700; color: var(--shop-accent-ink);
}

.iship {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin-bottom: 10px; font-size: 14px; color: var(--shop-dim);
}

/* ---- status --------------------------------------------------------------- */

.shop-status {
  margin: 0;
  padding: 10px 14px;
  border-radius: 11px;
  background: rgba(22, 200, 210, 0.09);
  color: var(--shop-accent-ink);
  font-size: 14px;
}
.shop-status--bad { background: rgba(200, 56, 79, 0.1); color: var(--shop-bad); }
.shop-status[hidden] { display: none; }

/* ---- reviews ---------------------------------------------------------------- */

.rev-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.rev-score { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--shop-dim); }
.rev-score strong { font-size: 20px; color: var(--shop-fg); }
.rev__stars { color: #f0a500; letter-spacing: 2px; }

.rev-list { display: grid; gap: 16px; margin-top: 16px; }
.rev {
  padding: 14px 0;
  border-top: 1px solid rgba(22, 200, 210, 0.18);
}
.rev__head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; }
.rev__who { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.rev__avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; background: var(--shop-accent);
  color: #04282d; display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 inherit;
}
.rev__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rev__verified { display: block; font-size: 11px; font-weight: 700; color: var(--shop-ok); }
.rev__meta { display: grid; justify-items: end; font-size: 12px; color: var(--shop-dim); }
.rev__body { margin: 10px 0 0; line-height: 1.55; white-space: pre-wrap; }
.rev__images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rev__images img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.rev__reply {
  margin-top: 10px; padding: 10px 12px;
  border-left: 3px solid var(--shop-accent);
  background: rgba(22, 200, 210, 0.06); border-radius: 0 10px 10px 0;
}
.rev__reply-label { font: 800 10px/1 inherit; letter-spacing: .08em; text-transform: uppercase; color: var(--shop-accent-ink); margin-bottom: 5px; }
.rev__reply p { margin: 0; font-size: 14px; }
.rev__actions { display: flex; gap: 8px; margin-top: 10px; }

.rev-form { margin-top: 8px; }
.rev-stars { display: flex; gap: 4px; }
.rev-star {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 30px; line-height: 1; color: rgba(8, 36, 44, 0.2);
}
.rev-star.is-on { color: #f0a500; }
.rev-star:focus-visible { outline: 2px solid var(--shop-accent); border-radius: 4px; }

/* ---- messages ---------------------------------------------------------------- */

.msg { display: grid; gap: 16px; }
@media (min-width: 860px) { .msg { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } }

.msg__list { display: grid; gap: 6px; align-content: start; }

.thread {
  display: flex; gap: 10px; align-items: center; width: 100%;
  padding: 10px; border: 1px solid var(--shop-line); border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.thread:hover { border-color: var(--shop-accent); }
.thread.is-active { border-color: var(--shop-accent); background: rgba(22, 200, 210, 0.07); }
.thread__art {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px;
  background: #eefaff; overflow: hidden; display: flex; align-items: center;
  justify-content: center; font: 800 11px/1 inherit; color: rgba(8, 36, 44, .25);
}
.thread__art img { width: 100%; height: 100%; object-fit: cover; }
.thread__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.thread__who { font-weight: 700; font-size: 14px; display: flex; gap: 6px; align-items: baseline; }
.thread__role {
  font: 700 9px/1.4 inherit; letter-spacing: .06em; text-transform: uppercase;
  color: var(--shop-dim); border: 1px solid var(--shop-line); border-radius: 999px; padding: 1px 6px;
}
.thread__subject, .thread__preview {
  font-size: 12px; color: var(--shop-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread__side { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.thread__time { font-size: 11px; color: var(--shop-dim); }
.thread__unread {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--shop-accent); color: #04282d; font: 800 11px/1.6 inherit; text-align: center;
}

.msg__panel {
  border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
  background: #fff; display: grid; grid-template-rows: auto 1fr auto; min-height: 420px;
}
.msg__head {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  align-items: flex-start; padding: 14px; border-bottom: 1px solid var(--shop-line);
}
.msg__scroll { padding: 14px; display: grid; gap: 10px; align-content: start; max-height: 52vh; overflow-y: auto; }

.bubble {
  justify-self: start; max-width: 78%;
  padding: 9px 13px; border-radius: 14px 14px 14px 4px;
  background: #f1f7f9; font-size: 14px; line-height: 1.5;
}
.bubble--mine {
  justify-self: end; border-radius: 14px 14px 4px 14px;
  background: rgba(22, 200, 210, 0.16);
}
.bubble p { margin: 0; white-space: pre-wrap; }
.bubble__images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bubble__images img { width: 110px; border-radius: 8px; display: block; }
.bubble__time { display: block; margin-top: 4px; font-size: 10px; color: var(--shop-dim); }

.msg__compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--shop-line); align-items: flex-end; }
.msg__compose textarea {
  flex: 1 1 auto; min-width: 0; resize: vertical; font: inherit; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--shop-line); border-radius: 11px; background: #fff;
}
.msg__compose textarea:focus { outline: 2px solid var(--shop-accent); outline-offset: 1px; }

/* ---- seller signup: categories, prohibited items, privacy ------------------- */

.shop-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-cat {
  padding: 8px 14px; border: 1px solid var(--shop-line); border-radius: 999px;
  background: #fff; color: var(--shop-fg); font: 600 14px/1 inherit; cursor: pointer;
}
.shop-cat:hover { background: rgba(22, 200, 210, 0.1); }
.shop-cat.is-on { background: var(--shop-accent); border-color: var(--shop-accent); color: #04282d; }

.shop-banned {
  margin: 0 0 12px; padding: 12px 14px 12px 30px;
  border: 1px solid rgba(200, 56, 79, 0.28); border-radius: 12px;
  background: rgba(200, 56, 79, 0.04);
  font-weight: 500; font-size: 13px; line-height: 1.7; color: var(--shop-fg);
}
.shop-banned li { margin: 0; }

.shop-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.shop-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; }

/* A privacy promise has to look like one, not like a grey aside. */
.shop-hint--private {
  color: var(--shop-accent-ink); font-weight: 600;
  padding-left: 20px; position: relative;
}
.shop-hint--private::before {
  content: "🔒"; position: absolute; left: 0; top: -1px; font-size: 12px;
}
.shop-note--good {
  color: var(--shop-ok); font-weight: 600;
  border-left: 3px solid var(--shop-ok); padding-left: 12px;
}

/* ---- seller legal details --------------------------------------------------- */
/* Visually walled off from the public fields above it, because the whole point
   is that a seller can see at a glance which half of this form the world sees. */

.shop-legal {
  padding: 16px;
  border: 1px solid rgba(22, 200, 210, 0.4);
  border-radius: var(--shop-radius);
  background: rgba(22, 200, 210, 0.045);
}
.shop-legal .shop-row { margin-bottom: 12px; }
.shop-legal .shop-subfield { margin-bottom: 12px; }
.shop-subfield--wide { max-width: none; }

/* ---- reporting -------------------------------------------------------------- */

.pdp__report { text-align: center; padding: 4px 0 12px; }
.shop-report-link {
  border: 0; background: none; cursor: pointer;
  font: 600 13px/1 inherit; color: var(--shop-dim);
  padding: 8px 12px; border-radius: 999px;
}
.shop-report-link:hover { color: var(--shop-bad); background: rgba(200, 56, 79, 0.06); }

.rdlg {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(4, 20, 24, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  overflow-y: auto;
}
.rdlg__panel {
  background: #fff; border-radius: var(--shop-radius);
  padding: 22px; width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(4, 20, 24, 0.35);
}
.rdlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rdlg__head h2 { margin: 0 0 4px; font-size: 20px; }
.rdlg__x {
  border: 0; background: none; cursor: pointer; font-size: 16px;
  color: var(--shop-dim); padding: 4px 8px; line-height: 1;
}
.rdlg__x:hover { color: var(--shop-fg); }

/* ---- analytics sparkline ----------------------------------------------------- */
/* A bar per day, including empty ones -- a chart that skips days with no sales
   makes a dead fortnight look like steady trading. */

.spark {
  display: flex; align-items: flex-end; gap: 2px;
  height: 120px; padding: 8px 0;
  border-bottom: 1px solid var(--shop-line);
}
.spark__bar {
  flex: 1 1 0; min-width: 2px;
  background: linear-gradient(180deg, var(--shop-accent), rgba(22, 200, 210, 0.45));
  border-radius: 2px 2px 0 0;
}
.spark__axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--shop-dim); padding-top: 6px;
}

.dtile__delta { font-size: 13px; font-weight: 700; margin-left: 6px; }
.dtile__delta--up { color: var(--shop-ok); }
.dtile__delta--down { color: var(--shop-bad); }
.dtile__delta--flat { color: var(--shop-dim); }

/* ---- the seller agreement ----------------------------------------------------- */
/* Each section is its own card with its own tick. One long wall of text with a
   single checkbox at the bottom is a thing people scroll past; six short ones
   with six ticks is a thing people read. */

.agree { display: grid; gap: 12px; }

.agree__section {
  padding: 16px;
  border: 1px solid var(--shop-line);
  border-left: 4px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
}
.agree__section.is-done {
  border-left-color: var(--shop-ok);
  background: rgba(47, 168, 90, 0.04);
}

.agree__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; font-size: 16px;
}
.agree__num {
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; background: var(--shop-accent); color: #04282d;
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 inherit;
}
.agree__section.is-done .agree__num { background: var(--shop-ok); color: #fff; }

.agree__points {
  margin: 0 0 12px; padding-left: 20px;
  font-weight: 500; font-size: 13px; line-height: 1.75; color: var(--shop-fg);
}
.agree__points li { margin: 0; }

.agree__check {
  padding-top: 10px;
  border-top: 1px solid rgba(22, 200, 210, 0.18);
  font-size: 13px;
}

/* ---- public item profile: exptube.com/i/EXP-0000043 ---------------------- */
/* Signed-out page. Someone scanned a shirt; assume they know nothing. */
.pitem { display: grid; gap: 18px; margin-bottom: 18px; }
@media (min-width: 720px) { .pitem { grid-template-columns: 280px 1fr; align-items: start; } }
.pitem__art {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px;
  background: var(--shop-tint, #eef7f5); overflow: hidden;
}
.pitem__art img { width: 100%; height: 100%; object-fit: cover; }
.pitem__head h1 { margin: 2px 0 4px; }
.pitem__variant { margin: 0 0 8px; color: var(--shop-muted, #5b6b68); }
/* The serial is the item's name for the rest of its life. Treat it that way. */
.pitem__serial {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 10px;
}
.pitem__badges { display: flex; flex-wrap: wrap; gap: 6px; }

.pitem__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pitem__events li {
  display: grid; gap: 2px; padding-left: 14px; position: relative;
  border-left: 2px solid var(--shop-line, #d7e5e2);
}
.pitem__events li::before {
  content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--shop-accent, #14b8a6);
}
.pitem__event-when { font-size: 12px; color: var(--shop-muted, #5b6b68); }
.pitem__event-what { font-weight: 600; }
.pitem__event-detail { font-size: 13px; color: var(--shop-muted, #5b6b68); }

.pitem__share { display: grid; gap: 14px; align-items: center; }
@media (min-width: 560px) { .pitem__share { grid-template-columns: auto 1fr; } }
.pitem__qr { border-radius: 10px; background: #fff; padding: 6px; }
.pitem__url {
  display: block; word-break: break-all; font-size: 13px; margin: 6px 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- buyer orders -------------------------------------------------------- */
.ocard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ocard__head strong { font-size: 18px; white-space: nowrap; }

/* One shop's half of an order. A multi-shop cart shows several of these, which
   is why each carries its own status and its own "there's a problem". */
.oship {
  border-top: 1px solid var(--shop-line);
  padding-top: 12px; margin-top: 12px;
}
.oship__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.oship__items { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.oship__items li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.oship__items img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.oship__qty { color: var(--shop-dim); margin-left: auto; white-space: nowrap; }
.oship__track { font-size: 14px; margin: 0 0 10px; }
.oship__track code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.oship__issue { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin: 0; }

/* ---- the report-a-problem dialog ----------------------------------------- */
.odlg {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center; padding: 16px;
  background: rgba(6, 40, 46, 0.5);
}
.odlg__panel {
  background: var(--shop-panel); border-radius: var(--shop-radius);
  padding: 24px; width: min(520px, 100%);
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.odlg__panel h2 { margin: 0 0 6px; }
.odlg__types { display: grid; gap: 8px; margin: 14px 0; }
.odlg__types .shop-check { font-weight: 500; }

/* The refund dialog reuses .odlg from the buyer side; these are its own bits. */
.odlg__sub { margin: 18px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--shop-dim); }
.ctotals__row--total { border-top: 1px solid var(--shop-line); padding-top: 6px; margin-top: 4px; font-size: 16px; }
.ctotals__row em { font-style: normal; color: var(--shop-dim); font-weight: 400; }

/* The holding page while comingSoon is on. */
.shop-soon { padding: 48px 24px; }
.shop-soon h1 { font-size: 34px; margin: 6px 0 12px; }
.shop-soon p { max-width: 42ch; margin: 0 auto 10px; }
.shop-actions--center { justify-content: center; }