/* The gym store inside the community app. Kept out of social.css so the two
   can change independently. Tokens (--brand, --panel, --line…) come from there,
   including their light-mode values; lime as text reads --lime-ink and lime as
   a line reads --lime-edge (both the lime itself in dark). */
.shop { width: 100%; max-width: 960px; margin: 0 auto; padding: 1rem; }
.shop-pad { padding: 1.5rem 0; }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.shop-head h1 { margin: 0; font-size: 1.4rem; }
.shop-modes, .shop-stores, .shop-options { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.shop-stores { margin-bottom: 1rem; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.8rem; padding-bottom: 5rem; }
.shop-card {
  display: flex; flex-direction: column; gap: 0.35rem; text-align: left; font: inherit; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.6rem; cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.shop-card:hover { border-color: var(--lime-edge, var(--brand)); transform: translateY(-2px); }
.shop-card img, .shop-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--panel-2); }
.shop-noimg { display: grid; place-items: center; color: var(--faint); }
.shop-card-name { font-weight: 700; }
.shop-card-price { color: var(--lime-ink, var(--brand)); font-weight: 700; }

/* Centred with auto margins, not a transform: .btn:hover sets its own transform,
   which would knock a translateX(-50%) off and make the button jump sideways. */
.shop-cartbar { position: fixed; left: 0; right: 0; bottom: 1.2rem; margin-inline: auto; width: fit-content; gap: 0.5rem; z-index: 40; }

.shop-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: grid; place-items: end center; z-index: 60; }
@media (min-width: 640px) { .shop-overlay { place-items: center; } }
.shop-sheet {
  position: relative; width: min(480px, 100%); max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 18px 18px 0 0; padding: 1.2rem;
}
@media (min-width: 640px) { .shop-sheet { border-radius: 18px; } }
.shop-sheet h2 { margin: 0; }
.shop-close { position: absolute; top: 0.7rem; right: 0.7rem; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; cursor: pointer; z-index: 1; }
.shop-sheet-title { padding-right: 3rem; min-height: 2rem; }
.shop-hero { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.shop-thumbs { display: flex; gap: 0.4rem; }
.shop-thumbs button { padding: 2px; min-width: 44px; min-height: 44px; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.shop-thumbs button.on { border-color: var(--lime-edge, var(--brand)); }
.shop-thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; display: block; }

.shop-qty { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; }
.shop-qty span { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.shop-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.shop-qty button { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.shop-lines .shop-qty { align-self: center; }
.shop-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.shop-lines li { display: flex; align-items: center; gap: 0.8rem; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
.shop-form { display: flex; flex-direction: column; gap: 0.6rem; }
.shop-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.shop-field label, .shop-label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; margin: 0; padding: 0; }
.shop-row { display: flex; gap: 0.6rem; }
@media (max-width: 479px) { .shop-row { flex-direction: column; } }
.shop-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.shop-form input, .shop-form textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 0.6rem 0.8rem; min-height: 2.75rem; width: 100%; box-sizing: border-box;
}
.shop-form input:focus-visible, .shop-form textarea:focus-visible { outline: 2px solid var(--lime-edge, var(--brand)); outline-offset: 1px; }
.shop-form input[aria-invalid="true"] { border-color: var(--warn); }
.shop-form textarea { min-height: 4.5rem; resize: vertical; }
.shop-error { color: var(--warn); margin: 0; }
.shop-foot { margin: 0; text-align: center; }
.shop-primary { width: 100%; justify-content: center; min-height: 2.9rem; }

.shop-line-img { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: 8px; background: var(--panel-2); flex: none; }
.shop-line-main { flex: 1; min-width: 0; }

.shop-totals { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.shop-totals > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-dim); }
.shop-totals dt, .shop-totals dd { margin: 0; }
.shop-totals-total { color: var(--text) !important; font-weight: 800; border-top: 1px solid var(--line); padding-top: 0.4rem; margin-top: 0.15rem; }
.shop-cod { margin: 0; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text-dim); font-size: 0.85rem; }

.shop-banner { margin-bottom: 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--amber); color: var(--amber); background: rgba(255, 159, 67, 0.08); }
.shop-banner strong { color: inherit; }
.shop-chip-note { font-style: normal; opacity: 0.8; }
.shop-toolbar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }

.shop-orders { display: flex; flex-direction: column; gap: 0.8rem; }
.shop-order { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.shop-order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.shop-order-items li { display: flex; align-items: center; gap: 0.6rem; color: var(--text-dim); }
.shop-order-item-name { flex: 1; min-width: 0; }
.shop-order-top, .shop-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shop-status { font-size: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--line-2); white-space: nowrap; }
.shop-status.s-placed { color: var(--amber); }
.shop-status.s-submitted, .shop-status.s-in_production, .shop-status.s-shipped { color: var(--lime-ink, var(--brand)); }
.shop-status.s-delivered { color: var(--text-dim); }
.shop-status.s-cancelled { color: var(--warn); }
.shop-supplier { margin: 0; }
.shop-track { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.shop-order .chip, .shop-track .chip { text-decoration: none; display: inline-flex; align-items: center; }

/* A five-step line: finished steps and the current one are lit. */
.shop-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
.shop-steps li { font-size: 0.68rem; color: var(--faint); border-top: 3px solid var(--line-2); padding-top: 0.3rem; line-height: 1.2; }
.shop-steps li.done { border-top-color: var(--lime-edge, var(--brand)); }
.shop-steps li.now { border-top-color: var(--lime-edge, var(--brand)); color: var(--text); font-weight: 700; }

/* 44px tap targets on touch screens and small viewports. */
@media (pointer: coarse), (max-width: 640px) {
  .shop .chip { min-height: 2.75rem; padding: 0.3rem 0.9rem; font-size: 0.85rem; }
  .shop-cartbar { min-height: 2.9rem; }
  .shop-card { min-height: 44px; }
}