/* shop - generated by shop/build_shop.py, do not hand-edit */
.crumb { margin-bottom: 1.5rem; }
.crumb a { color: var(--text-dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.shop-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shop-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.shop-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.shop-card-dim { opacity: .55; }
.shop-card-media { position: relative; aspect-ratio: 4/3; background: var(--bg-alt); }
.shop-photo, .shop-photo-main { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-photo-empty {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: .5rem;
  align-items: center; justify-content: center; color: var(--text-dim);
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
}
.shop-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.shop-card-cat { color: var(--text-dim); font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: .4rem; }
.shop-card-body h3 { font-size: 1.03rem; margin-bottom: .45rem; line-height: 1.35; }
.shop-card-body p { color: var(--text-dim); font-size: .92rem; flex: 1; }
.shop-card-foot { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; gap: .75rem; }
.shop-price { color: var(--accent); font-weight: 800; font-size: 1.28rem; }
.shop-fulfil { color: var(--text-dim); font-size: .8rem; text-align: right; }
.shop-empty { color: var(--text-dim); }

.shop-badge { position: absolute; top: .75rem; left: .75rem; padding: .3rem .7rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; }
.shop-badge-sold { background: #47210f; color: #ffb489; border: 1px solid #7d3a1c; }
.shop-badge-pending { background: #123b2a; color: #7fe3b0; border: 1px solid #1f6a4b; }

.shop-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: start; }
.shop-detail-media { position: relative; aspect-ratio: 4/3; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.shop-detail-info h1 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; margin-bottom: .75rem; }
.shop-summary { color: var(--text-dim); margin-bottom: 1.5rem; }
.shop-fulfil-note { color: var(--text-dim); font-size: .88rem; margin-top: .9rem; }

.buy-panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.35rem; }
.buy-price { font-size: 2.1rem; font-weight: 800; color: var(--accent); margin-bottom: 1rem; }
.buy-opt { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.buy-opt:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.buy-opt-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; margin-bottom: .3rem; }
.buy-opt-head span { color: var(--accent); font-weight: 700; }
.buy-opt p { color: var(--text-dim); font-size: .9rem; margin-bottom: .85rem; }
.buy-opt-nofulfil p { margin-bottom: 0; }
.buy-todo { background: #2a2312; border: 1px solid #6b5a20; color: #ffd98a;
  border-radius: var(--radius); padding: .8rem .9rem; font-size: .87rem; }
.buy-panel-closed { text-align: center; }
.buy-closed { color: var(--text-dim); }

.shop-specs { margin-top: 3rem; }
.shop-specs h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.spec-table { width: 100%; border-collapse: collapse; max-width: 720px; }
.spec-table th, .spec-table td { text-align: left; padding: .7rem .9rem;
  border-bottom: 1px solid var(--border); font-size: .95rem; vertical-align: top; }
.spec-table th { color: var(--text-dim); font-weight: 600; width: 34%; }

@media (max-width: 760px) {
  .shop-detail { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* order / tracking page */
.order-head { margin-bottom: 2rem; }
.order-eyebrow { color: var(--text-dim); font-size: .8rem; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: .5rem; }
.order-head h1 { font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.25; margin-bottom: .75rem; }
.order-sub { color: var(--text-dim); }

.track-card { background: var(--surface); border: 1px solid var(--accent-deep);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 2rem; }
.track-card-wait { border-color: var(--border); }
.track-card-label { color: var(--accent); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: .5rem; }
.track-num { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; word-break: break-all; }
.track-num a { color: var(--accent); text-decoration: none; }
.track-num a:hover { text-decoration: underline; }
.track-card p { color: var(--text-dim); font-size: .9rem; }

.track-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.track-step { display: flex; gap: 1rem; padding-bottom: 1.4rem; position: relative; }
.track-step:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 20px;
  bottom: 0; width: 2px; background: var(--border); }
.track-done:not(:last-child)::before { background: var(--accent-deep); }
.track-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 3px;
  border: 2px solid var(--border); background: var(--bg); position: relative; z-index: 1; }
.track-done .track-dot { border-color: var(--accent); background: var(--accent); }
.track-body { display: flex; flex-direction: column; }
.track-body strong { font-size: 1rem; }
.track-todo .track-body strong { color: var(--text-dim); }
.track-body span { color: var(--text-dim); font-size: .9rem; }

.order-receipt h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.order-total { color: var(--accent); font-weight: 800; font-size: 1.1rem; }
.order-help { color: var(--text-dim); font-size: .88rem; margin-top: 1.25rem; line-height: 1.7; }
.order-help a, .buy-closed a { color: var(--accent); }