/* ===========================================================================
   CIM-EDGE STORE
   ---------------------------------------------------------------------------
   The idea: this reads like a trading terminal, not like a shop. Our members
   look at charts and order books all day, so the store borrows that language.
   Prices in the monospace face with tabular figures so columns line up and
   nothing jumps as numbers change. Stock written as a quantity rather than a
   green tick. Specifications laid out like an instrument sheet.

   Every colour here comes from the tokens style.css already defines. This is a
   rearrangement of the existing design, not a second one, which is what keeps
   it feeling like part of CIM-EDGE rather than a different site glued on.

   Built at 375 wide first and widened from there.
   =========================================================================== */

.store {
  /* One extra accent, borrowed from the success colour already in the tokens,
     used only for stock, savings and deltas. Nothing new invented. */
  --st-good: var(--success);
  --st-warn: var(--warning);
  --st-line: var(--border);
  --st-grid: color-mix(in srgb, var(--border) 55%, transparent);
}

/* ── The faint chart grid behind hero sections ─────────────────────────────
   A price sits on a grid, so the shop front does too. Deliberately at the very
   edge of visible: it should be felt rather than noticed. */
.st-grid {
  position: relative;
  background-image:
    linear-gradient(to right, var(--st-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--st-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
}
.st-grid::after {
  /* Fades the grid out at the edges so it never looks like a table. */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              transparent 25%, var(--bg) 78%);
  pointer-events: none;
}
.st-grid > * { position: relative; z-index: 1; }

/* ── Money ────────────────────────────────────────────────────────────────
   Tabular figures are the whole point: every digit takes the same width, so a
   column of prices lines up and a changing number does not shift the layout. */
.st-price,
.st-qty,
.st-spec-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.st-price      { font-size: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.st-price-sm   { font-size: 1rem; font-weight: 700; }
.st-price-was  { font-size: .82rem; color: var(--text-muted); text-decoration: line-through;
                 margin-left: .45rem; font-weight: 500; }
.st-save       { font-size: .75rem; color: var(--st-good); font-weight: 700; }

/* ── Stock, written like depth ────────────────────────────────────────────── */
.st-qty        { font-size: .78rem; font-weight: 700; }
.st-qty.is-in  { color: var(--st-good); }
.st-qty.is-low { color: var(--st-warn); }
.st-qty.is-out { color: var(--text-muted); }

/* ── Arrival window, the honest one, above the buy button ─────────────────── */
.st-arrival {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--st-line);
  border-radius: var(--radius-pill); padding: .3rem .7rem;
}
.st-arrival svg { width: .85rem; height: .85rem; flex-shrink: 0; opacity: .7; }

/* ── Product grid. One column on a phone, never a squeezed three. ─────────── */
.st-grid-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 560px)  { .st-grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .st-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1360px) { .st-grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── A product card. Quick and precise on hover, never a slow fade. ───────── */
.st-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--st-line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
  text-decoration: none;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.st-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.st-card-img {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.st-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-card-img .st-noimg { font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); }
.st-card-body { padding: .8rem .85rem .9rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.st-card-cat  { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
                color: var(--text-muted); font-weight: 700; }
.st-card-name { font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.35;
                overflow-wrap: anywhere; }
.st-card-foot { margin-top: auto; padding-top: .5rem; display: flex; align-items: baseline;
                justify-content: space-between; gap: .5rem; flex-wrap: wrap; }

/* ── Specifications, laid out like an instrument sheet ────────────────────── */
.st-specs { border-top: 1px solid var(--st-line); margin-top: 1rem; }
.st-spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--st-line);
  font-size: .85rem;
}
.st-spec-k { color: var(--text-muted); overflow-wrap: anywhere; }
.st-spec-v { color: var(--text); overflow-wrap: anywhere; }

/* ── Product page ─────────────────────────────────────────────────────────── */
.st-product { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) {
  .st-product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
}

/* Images swipe sideways on a phone. Nobody scrolls eight photos vertically. */
.st-gallery { min-width: 0; }
.st-gallery-main {
  aspect-ratio: 4 / 3; background: var(--surface-2);
  border: 1px solid var(--st-line); border-radius: var(--radius);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.st-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.st-thumbs {
  display: flex; gap: .5rem; margin-top: .5rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.st-thumbs::-webkit-scrollbar { display: none; }
.st-thumb {
  flex: 0 0 auto; width: 4.5rem; aspect-ratio: 1;
  border: 1px solid var(--st-line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2); cursor: pointer;
  scroll-snap-align: start; padding: 0;
  transition: border-color .12s ease;
}
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ── The sticky buy bar. This does more for phone conversion than anything
      else here: the price and the button stay reachable however far you have
      scrolled into the description. ─────────────────────────────────────────── */
.st-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
  transform: translateY(110%);
  transition: transform .18s ease;
}
.st-buybar.is-up { transform: translateY(0); }
.st-buybar .st-price { font-size: 1.1rem; }
.st-buybar form, .st-buybar > .btn { margin-left: auto; }
@media (min-width: 900px) { .st-buybar { display: none; } }

/* ── Bundles: the piece list, each item buyable on its own ─────────────────── */
.st-bundle { border: 1px solid var(--st-line); border-radius: var(--radius); overflow: hidden; }
.st-bundle-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .8rem; border-bottom: 1px solid var(--st-line);
  background: var(--surface);
}
.st-bundle-row:last-child { border-bottom: 0; }
.st-bundle-row .st-bundle-name { flex: 1; min-width: 0; font-size: .87rem; overflow-wrap: anywhere; }
.st-bundle-qty { font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted); }

/* ── Cart ─────────────────────────────────────────────────────────────────── */
.st-line-item {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .8rem;
  padding: .8rem 0; border-bottom: 1px solid var(--st-line); align-items: start;
}
@media (min-width: 640px) {
  .st-line-item { grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; }
}
.st-line-img { width: 4rem; aspect-ratio: 1; border-radius: var(--radius-sm);
               background: var(--surface-2); overflow: hidden; }
.st-line-img img { width: 100%; height: 100%; object-fit: cover; }
.st-totals { display: flex; flex-direction: column; gap: .4rem; }
.st-total-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.st-total-row.is-grand { font-size: 1.05rem; font-weight: 700; padding-top: .5rem;
                         border-top: 1px solid var(--border-strong); }

/* ── The order status line ────────────────────────────────────────────────── */
.st-track { display: flex; flex-direction: column; gap: 0; }
.st-track-step { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .7rem; }
.st-track-dot {
  display: flex; flex-direction: column; align-items: center;
}
.st-track-dot i {
  width: .7rem; height: .7rem; border-radius: 50%; margin-top: .3rem;
  background: var(--surface-3); border: 2px solid var(--border-strong);
}
.st-track-dot span { flex: 1; width: 2px; background: var(--border); min-height: 1.6rem; }
.st-track-step:last-child .st-track-dot span { display: none; }
.st-track-step.is-done .st-track-dot i { background: var(--st-good); border-color: var(--st-good); }
.st-track-step.is-now  .st-track-dot i { background: var(--accent); border-color: var(--accent);
                                         box-shadow: 0 0 0 4px var(--accent-ring); }
.st-track-body { padding-bottom: 1rem; }
.st-track-name { font-size: .9rem; font-weight: 600; color: var(--text); }
.st-track-when { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); }
.st-track-step:not(.is-done):not(.is-now) .st-track-name { color: var(--text-muted); font-weight: 500; }

/* ── Wide things scroll inside their own box, never the page ──────────────── */
.st-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.store, .store * { min-width: 0; }


/* ===========================================================================
   The admin product form. Plainer than the shop on purpose: this screen gets
   worked through, not admired.
   =========================================================================== */
.sp-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 720px)  { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-wide { grid-column: 1 / -1; }
.sp-field { display: flex; flex-direction: column; min-width: 0; }
.sp-hint { font-size: .72rem; color: var(--text-muted); margin-top: .3rem; line-height: 1.45; }
.sp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sp-pair { display: flex; align-items: center; gap: .45rem; }
.sp-pair .form-input { min-width: 0; }
.sp-to { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.sp-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem;
              padding-top: 1rem; border-top: 1px solid var(--border); }

.sp-images { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.sp-image-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.sp-image { position: relative; width: 6rem; aspect-ratio: 1; border-radius: var(--radius-sm);
            overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.sp-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-image form { position: absolute; top: .25rem; right: .25rem; margin: 0; }
.sp-image-x { border: 0; border-radius: 50%; width: 1.4rem; height: 1.4rem; cursor: pointer;
              background: rgba(0,0,0,.62); color: #fff; font-size: 1rem; line-height: 1;
              display: flex; align-items: center; justify-content: center; }
.sp-image-x:hover { background: var(--danger); }

.sp-cell-name { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.sp-cell-text { display: flex; flex-direction: column; min-width: 0; }
.sp-thumb { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); object-fit: cover;
            flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); }
.sp-thumb-none { display: flex; align-items: center; justify-content: center; text-align: center;
                 font-size: .5rem; color: var(--text-muted); font-family: var(--font-mono);
                 line-height: 1.1; padding: .15rem; }
.elog-row.is-muted { opacity: .58; }


/* ===========================================================================
   The shop itself
   =========================================================================== */
.st-main { max-width: 1240px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
@media (min-width: 900px) { .st-main { padding: 2rem 1.5rem 5rem; } }

/* ── The category bar and basket, under the site nav ──────────────────────── */
.st-bar { border-bottom: 1px solid var(--border); background: var(--surface);
          position: sticky; top: 0; z-index: 40; }
.st-bar-in { max-width: 1240px; margin: 0 auto; padding: 0 1rem;
             display: flex; align-items: center; gap: 1rem; }
@media (min-width: 900px) { .st-bar-in { padding: 0 1.5rem; } }
.st-cats { display: flex; gap: .2rem; flex: 1; min-width: 0; padding: .5rem 0; scrollbar-width: none; }
.st-cats::-webkit-scrollbar { display: none; }
.st-cat { flex: 0 0 auto; padding: .45rem .7rem; border-radius: var(--radius-pill);
          font-size: .82rem; font-weight: 600; color: var(--text-secondary);
          text-decoration: none; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.st-cat:hover { background: var(--surface-3); color: var(--text); }
.st-cat.is-on { background: var(--btn-blue); color: #fff; }

.st-basket { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
             padding: .45rem .75rem; border: 1px solid var(--border-strong);
             border-radius: var(--radius-pill); text-decoration: none;
             color: var(--text); font-size: .82rem; font-weight: 600; background: var(--surface); }
.st-basket:hover { border-color: var(--accent); color: var(--accent-text); }
.st-basket svg { width: 1rem; height: 1rem; }
.st-basket-n { min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: var(--radius-pill);
               background: var(--btn-blue); color: #fff; font-size: .68rem; font-weight: 700;
               display: inline-flex; align-items: center; justify-content: center;
               font-family: var(--font-mono); }
@media (max-width: 520px) { .st-basket-label { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.st-hero { border: 1px solid var(--border); border-radius: var(--radius-lg);
           background: var(--surface); overflow: hidden; margin-bottom: 2rem; }
.st-hero-in { padding: 2rem 1.25rem; text-align: center; }
@media (min-width: 720px) { .st-hero-in { padding: 3.25rem 2rem; } }
.st-eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
              text-transform: uppercase; color: var(--accent-text); margin-bottom: .6rem; }
.st-hero h1 { font-size: 1.6rem; line-height: 1.2; color: var(--text); margin-bottom: .6rem; }
@media (min-width: 720px) { .st-hero h1 { font-size: 2.4rem; } }
.st-hero-sub { color: var(--text-secondary); max-width: 34rem; margin: 0 auto; line-height: 1.6;
               font-size: .95rem; }
.st-hero-note { margin-top: 1rem; font-size: .85rem; color: var(--text-secondary); }
.st-hero-note a { color: var(--accent-text); font-weight: 600; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.st-section { margin-bottom: 2.5rem; }
.st-section-head { margin-bottom: 1rem; }
.st-section-head h1, .st-section-head h2 { font-size: 1.25rem; color: var(--text); margin-bottom: .25rem; }
.st-section-head p { color: var(--text-secondary); font-size: .88rem; line-height: 1.55; max-width: 46rem; }
.st-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.st-empty p { margin-bottom: .75rem; }

/* ── Product page ─────────────────────────────────────────────────────────── */
.st-crumbs { display: flex; gap: .4rem; font-size: .8rem; color: var(--text-muted);
             margin-bottom: 1rem; flex-wrap: wrap; }
.st-crumbs a { color: var(--text-secondary); text-decoration: none; }
.st-crumbs a:hover { color: var(--accent-text); }
.st-buy { min-width: 0; }
.st-title { font-size: 1.4rem; line-height: 1.25; color: var(--text); margin: .2rem 0 .5rem; }
@media (min-width: 720px) { .st-title { font-size: 1.85rem; } }
.st-summary { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; }
.st-pricewrap { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem; }
.st-member-hint { font-size: .8rem; color: var(--text-secondary); flex-basis: 100%; }
.st-member-hint a { color: var(--accent-text); font-weight: 600; }
.st-addform { display: flex; gap: .6rem; margin: 1.1rem 0; }
.st-qtybox { width: 4.5rem; flex: 0 0 auto; text-align: center;
             font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.st-addbtn { flex: 1; }
@media (min-width: 720px) { .st-addbtn { flex: 0 0 auto; padding-left: 2.5rem; padding-right: 2.5rem; } }
.st-soldout { margin: 1.1rem 0; padding: .7rem .9rem; border-radius: var(--radius-sm);
              background: var(--surface-2); border: 1px solid var(--border);
              color: var(--text-secondary); font-size: .88rem; }
.st-desc { color: var(--text-secondary); line-height: 1.7; margin: 1.25rem 0; font-size: .92rem; }
.st-h3 { font-size: .95rem; font-weight: 700; color: var(--text); cursor: pointer; }
.st-more { margin-top: 1.25rem; }
.st-more summary { list-style: none; padding: .5rem 0; border-top: 1px solid var(--border); }
.st-more summary::-webkit-details-marker { display: none; }
.st-more summary::after { content: ' +'; color: var(--text-muted); font-family: var(--font-mono); }
.st-more[open] summary::after { content: ' -'; }
.st-note { font-size: .8rem; color: var(--text-muted); margin-bottom: .5rem; }
.st-bundle-wrap { margin-top: 1.5rem; }
.st-bundle-name { color: var(--text); text-decoration: none; }
.st-bundle-name:hover { color: var(--accent-text); text-decoration: underline; }
.st-code { margin-top: 1.5rem; font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); }

/* ── The three promises at the bottom of the shop front ───────────────────── */
.st-promise { display: grid; grid-template-columns: 1fr; gap: 1.25rem;
              padding-top: 2rem; border-top: 1px solid var(--border); }
@media (min-width: 800px) { .st-promise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.st-promise-item h3 { font-size: .95rem; color: var(--text); margin-bottom: .4rem; }
.st-promise-item p { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ── Cart and checkout ────────────────────────────────────────────────────── */
.st-cartwrap, .st-checkoutwrap, .st-order-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start;
}
@media (min-width: 900px) {
  .st-cartwrap, .st-checkoutwrap, .st-order-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem;
  }
}
.st-line-body { min-width: 0; }
.st-line-name { font-weight: 600; color: var(--text); text-decoration: none;
                font-size: .92rem; overflow-wrap: anywhere; }
.st-line-name:hover { color: var(--accent-text); }
.st-line-meta { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.st-line-controls { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.st-remove { background: none; border: 0; padding: 0; cursor: pointer;
             font-size: .78rem; color: var(--text-muted); text-decoration: underline; }
.st-remove:hover { color: var(--danger); }
.st-line-money { text-align: right; }
.st-line-each { font-size: .72rem; color: var(--text-muted); display: block;
                font-family: var(--font-mono); }

.st-summary-box { background: var(--surface); border: 1px solid var(--border);
                  border-radius: var(--radius); padding: 1.1rem; position: sticky; top: 4.5rem; }
.st-checkout { width: 100%; margin-top: 1rem; }
.st-keepshopping { display: block; text-align: center; margin-top: .75rem;
                   font-size: .82rem; color: var(--text-secondary); }
.st-mini-lines { margin: .75rem 0; }
.st-mini-line { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
                gap: .5rem; padding: .4rem 0; font-size: .84rem; align-items: baseline; }
.st-mini-qty { font-family: var(--font-mono); color: var(--text-muted); font-size: .78rem; }
.st-mini-name { overflow-wrap: anywhere; color: var(--text-secondary); }

.st-fieldset { background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--radius); padding: 1.1rem; }
.st-field { margin-bottom: .9rem; display: flex; flex-direction: column; min-width: 0; }
.st-field-row { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 560px) { .st-field-row { grid-template-columns: 1fr 1fr; } }
.st-hint { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }

/* ── Order page ───────────────────────────────────────────────────────────── */
.st-order-head { margin-bottom: 1.5rem; }
.st-orderref { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: .04em;
               color: var(--text); font-weight: 700; }
.st-order-note { font-size: .85rem; color: var(--text-secondary); margin-top: .6rem;
                 line-height: 1.6; max-width: 34rem; }
.st-address { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }

/* ── Admin: the shipping form on the orders queue ─────────────────────────── */
.so-ship { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.so-track { font-size: .78rem; padding: .35rem .5rem; min-width: 0; flex: 1 1 8rem; }


/* ===========================================================================
   The store on its own domain: its own header, footer and admin.
   =========================================================================== */
.st-head { border-bottom: 1px solid var(--border); background: var(--surface);
           position: sticky; top: 0; z-index: 50; }
.st-head-in { max-width: 1240px; margin: 0 auto; padding: .7rem 1rem;
              display: flex; align-items: center; gap: 1rem; }
@media (min-width: 900px) { .st-head-in { padding: .8rem 1.5rem; } }
.st-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
           color: var(--text); flex: 1; min-width: 0; }
.st-logo-mark { display: inline-flex; align-items: center; justify-content: center;
                width: 1.75rem; height: 1.75rem; border-radius: 8px;
                background: var(--btn-blue); color: #fff; font-size: .95rem; flex-shrink: 0; }
.st-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
                letter-spacing: -.01em; white-space: nowrap; }
.st-logo-text b { font-weight: 700; color: var(--accent-text); }
.st-head-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.st-headlink { font-size: .82rem; font-weight: 600; color: var(--text-secondary);
               text-decoration: none; white-space: nowrap; }
.st-headlink:hover { color: var(--accent-text); }
@media (max-width: 640px) { .st-headlink { display: none; } }
.st-icon { background: none; border: 0; cursor: pointer; color: var(--text-secondary);
           padding: .35rem; border-radius: 8px; display: inline-flex; }
.st-icon svg { width: 1.1rem; height: 1.1rem; }
.st-icon:hover { background: var(--surface-3); color: var(--text); }

.store .st-bar { position: static; }

.st-strip { background: var(--surface-2); border-bottom: 1px solid var(--border);
            text-align: center; padding: .5rem 1rem; font-size: .8rem;
            color: var(--text-secondary); }
.st-strip a { color: var(--accent-text); font-weight: 600; }

.st-foot { border-top: 1px solid var(--border); background: var(--surface); margin-top: 3rem; }
.st-foot-in { max-width: 1240px; margin: 0 auto; padding: 2rem 1rem 1rem;
              display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 720px) { .st-foot-in { grid-template-columns: 1fr auto; padding: 2rem 1.5rem 1rem; } }
.st-foot-brand { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.st-foot-note { font-size: .82rem; color: var(--text-muted); margin-top: .25rem; }
.st-foot-note a, .st-foot-links a { color: var(--text-secondary); }
.st-foot-links { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }
.st-foot-links a { text-decoration: none; }
.st-foot-links a:hover { color: var(--accent-text); }
.st-foot-copy { max-width: 1240px; margin: 0 auto; padding: 0 1rem 1.5rem;
                font-size: .75rem; color: var(--text-muted); }

/* Store admin */
.sa-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
          padding: .7rem 1rem; border-bottom: 1px solid var(--border);
          background: var(--surface); position: sticky; top: 0; z-index: 50; }
@media (min-width: 900px) { .sa-top { padding: .7rem 1.5rem; } }
.sa-nav { display: flex; gap: .2rem; flex: 1; min-width: 0; order: 3; width: 100%;
          scrollbar-width: none; }
.sa-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .sa-nav { order: 0; width: auto; } }
.sa-navlink { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
              padding: .45rem .7rem; border-radius: var(--radius-pill);
              font-size: .82rem; font-weight: 600; color: var(--text-secondary);
              text-decoration: none; white-space: nowrap; }
.sa-navlink svg { width: .95rem; height: .95rem; }
.sa-navlink:hover { background: var(--surface-3); color: var(--text); }
.sa-navlink.is-on { background: var(--btn-blue); color: #fff; }
.sa-pip { font-style: normal; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
          border-radius: var(--radius-pill); background: var(--btn-blue); color: #fff;
          font-size: .62rem; font-weight: 700; display: inline-flex;
          align-items: center; justify-content: center; font-family: var(--font-mono); }
.sa-navlink.is-on .sa-pip { background: rgba(255,255,255,.28); }
.sa-top-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.sa-main { max-width: 1240px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
@media (min-width: 900px) { .sa-main { padding: 1.75rem 1.5rem 4rem; } }
.sa-head { margin-bottom: 1.25rem; }
.sa-head h1 { font-size: 1.35rem; color: var(--text); }
.sa-two { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 860px) { .sa-two { grid-template-columns: 1fr 1fr; } }
.sa-line { display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
           border-bottom: 1px solid var(--border); font-size: .86rem; }
.sa-line:last-of-type { border-bottom: 0; }
.sa-line-n { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted);
             flex-shrink: 0; }
.sa-line-name { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.sa-bulk { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.sa-bulk .form-input { flex: 1 1 8rem; min-width: 0; }
.sa-days { display: flex; align-items: center; gap: .35rem; }
.sa-days .form-input { width: 3.6rem; padding: .35rem .4rem; text-align: center; }

.sa-login { min-height: 100vh; display: flex; align-items: center; justify-content: center;
            padding: 1.5rem; background: var(--bg); }
.sa-login-card { width: 100%; max-width: 24rem; background: var(--surface);
                 border: 1px solid var(--border); border-radius: var(--radius-lg);
                 padding: 2rem 1.5rem; box-shadow: var(--shadow-lg); }
.sa-login-h { text-align: center; font-size: 1.4rem; color: var(--text); margin: .3rem 0 .3rem; }
.sa-login-sub { text-align: center; font-size: .85rem; color: var(--text-secondary);
                margin-bottom: 1.25rem; }
.sa-remember { display: flex; align-items: center; gap: .5rem; font-size: .84rem;
               color: var(--text-secondary); margin: .25rem 0 1rem; }
.sa-login-foot { text-align: center; margin-top: 1rem; font-size: .8rem; color: var(--text-muted); }
.sa-login-foot a { color: var(--text-secondary); }

/* These are spans inside a block, so they need saying. Without it the number
   and its label sit on one line and read as one word. */
.elog-stat-v, .elog-stat-l { display: block; }

/* A member's list of their own orders. */
.st-orderlist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.st-orderrow { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem;
               padding: .8rem .9rem; border-bottom: 1px solid var(--border);
               background: var(--surface); text-decoration: none; align-items: center; }
.st-orderrow:last-child { border-bottom: 0; }
.st-orderrow:hover { background: var(--surface-3); }
.st-orderrow-ref { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.st-orderrow-when { font-size: .78rem; color: var(--text-muted); grid-column: 1; }
@media (min-width: 620px) {
  .st-orderrow { grid-template-columns: 9rem 1fr auto auto; }
  .st-orderrow-when { grid-column: auto; }
}

/* "Store" beside the real CIM-EDGE logo. It matches the wordmark's face,
   weight, size and letter spacing exactly, because both come from the same
   values; only the colour differs, which is the point. */
.st-logo-store {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--btn-blue);
  white-space: nowrap;
  margin-left: .34em;
}

/* The email preview on the store admin. */
.sa-mailprev { border: 1px solid var(--border); border-radius: var(--radius-sm);
               background: var(--surface-2); overflow: hidden; }
.sa-mailprev-subj { padding: .6rem .8rem; border-bottom: 1px solid var(--border);
                    font-weight: 600; font-size: .88rem; color: var(--text);
                    background: var(--surface); overflow-wrap: anywhere; }
.sa-mailprev-body { margin: 0; padding: .8rem; font-family: var(--font-mono);
                    font-size: .76rem; line-height: 1.6; color: var(--text-secondary);
                    white-space: pre-wrap; overflow-wrap: anywhere; max-height: 20rem;
                    overflow-y: auto; }