/* bcos-shop.css — storefront + shop console. Loaded after bcos.css on public
   and admin pages. Tokens come from bcos.css :root; the few extra values the
   shop needs are defined once here. Classes are prefixed shx-. */
:root {
  --shx-r: 18px;
  --shx-r-sm: 12px;
  --shx-sh: 0 1px 0 rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.06);
  --shx-sh-lg: 0 24px 60px rgba(0,0,0,.14);
  --shx-amber: #9a5800;
  --shx-amber-bg: #fff6e8;
  --shx-green-bg: #eef8f1;
  --shx-red-bg: #fff3f2;
  --shx-ease: cubic-bezier(.16,1,.3,1);
}
[data-shx-card][hidden], .shx-none[hidden], .shx-drawer[hidden], .shx-sticky[hidden],
.shx-err[hidden], .shx-alert[hidden], .shx-navcart-n[hidden] { display: none !important; }
.shx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shx-muted { color: var(--muted); }
.shx-small { font-size: .84rem; line-height: 1.5; }
.shx-center { text-align: center; }
.shx-h3 { font-size: 1rem; letter-spacing: -.02em; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.shx-link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.shx-link:hover { color: var(--red); }
html.shx-lock { overflow: hidden; }
.shx-card :focus-visible, .shx-opt :focus-visible, .shx-chip:focus-visible, .shx-navcart:focus-visible,
.shx-quick:focus-visible, .shx-stepper button:focus-visible, .shx-thumb:focus-visible, .shx-copy:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* ── Header bag ─────────────────────────────────────────────────────────── */
.shx-navcart {
  position: relative; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border: 1px solid var(--ink); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.shx-navcart:hover { background: var(--ink); color: var(--on-ink); }
.shx-navcart i { font-size: .9rem; }
.shx-navcart-n {
  position: absolute; top: -8px; right: -8px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: var(--on-ink);
  font-size: .66rem; font-weight: 750; line-height: 19px; text-align: center; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--bg);
}
.shx-navcart.is-bump .shx-navcart-n { animation: shx-bump .5s var(--shx-ease); }
@keyframes shx-bump { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ── Shop header ────────────────────────────────────────────────────────── */
.shx-head { padding: 3.4rem 0 1.6rem; }
.shx-head-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 2.6rem; align-items: end; }
.shx-title { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: .96; letter-spacing: -.055em; margin: 0 0 .9rem; }
.shx-title.is-md { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: .6rem; }
.shx-lead { font-size: 1.05rem; line-height: 1.65; color: var(--ink-3); max-width: 36rem; margin: 0; }
.shx-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.shx-perks li {
  display: grid; grid-template-columns: 2.3rem 1fr; gap: .7rem; align-items: center;
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--shx-r-sm); background: var(--bg);
}
.shx-perks i {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink); font-size: .85rem;
}
.shx-perks span { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.shx-perks strong { display: block; color: var(--ink); font-size: .9rem; letter-spacing: -.01em; }

/* ── Catalog toolbar ────────────────────────────────────────────────────── */
.shx-catalog { padding: .4rem 0 4.2rem; }
.shx-bar {
  position: sticky; top: 64px; z-index: 6;
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between;
  padding: .75rem 0; margin-bottom: .4rem;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.shx-search {
  flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 .95rem; background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
}
.shx-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(225,6,0,.1); }
.shx-search i { color: var(--muted-2); font-size: .85rem; }
.shx-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; padding: .62rem 0; color: var(--ink); min-width: 0; }
.shx-bar-r { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.shx-select select {
  font: inherit; font-size: .86rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: .55rem 2rem .55rem .9rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.shx-select select:hover, .shx-select select:focus { border-color: var(--ink); outline: 0; }
.shx-toggle {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: .45rem .85rem .45rem .6rem; user-select: none;
}
.shx-toggle:has(input:checked) { border-color: var(--ink); }
.shx-toggle input { width: 1rem; height: 1rem; }
.shx-chips { display: flex; gap: .45rem; overflow-x: auto; padding: .6rem 0 .2rem; scrollbar-width: none; }
.shx-chips::-webkit-scrollbar { display: none; }
.shx-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: .84rem; color: var(--ink); background: var(--bg); transition: border-color .2s, background .2s, color .2s;
}
.shx-chip span { font-size: .72rem; color: var(--muted-2); }
.shx-chip:hover { border-color: var(--ink); color: var(--ink); }
.shx-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.shx-chip.is-on span { color: rgba(255,255,255,.7); }
.shx-count { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin: .9rem 0 1.1rem; }
.shx-catalog-foot { margin: 2.4rem 0 0; font-size: .88rem; }
.shx-catalog-foot a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

/* ── Product cards ──────────────────────────────────────────────────────── */
.shx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1.8rem 1.2rem; }
.shx-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shx-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; grid-template-areas: "media" "body";
  color: var(--ink); min-width: 0;
}
.shx-card-media {
  grid-area: media; position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--shx-r); background: var(--surface-3);
}
.shx-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--shx-ease); }
.shx-card:hover .shx-card-media img { transform: scale(1.045); }
.shx-card.is-out .shx-card-media img { filter: grayscale(.6); opacity: .7; }
.shx-card-ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 3rem; font-weight: 750; letter-spacing: -.05em; color: var(--muted-3); background: var(--surface-3);
}
.shx-card-ph.is-lg { font-size: 6rem; }
.shx-badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .3rem; pointer-events: none; }
.shx-badge {
  font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 999px; background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.shx-badge.is-sale { background: var(--red); color: var(--on-ink); }
.shx-badge.is-out { background: var(--ink); color: var(--on-ink); }
.shx-badge.is-new { background: var(--bg); color: var(--ink); }
.shx-badge.is-dig { background: rgba(255,255,255,.86); color: var(--ink-3); }
.shx-card-body { grid-area: body; padding: .85rem .15rem 0; display: grid; gap: .25rem; align-content: start; }
.shx-card-k { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }
.shx-card-t { font-size: 1.02rem; letter-spacing: -.025em; line-height: 1.25; margin: 0; font-weight: 700; }
.shx-card-t a { color: var(--ink); }
.shx-card-t a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.shx-card-t a:hover { color: var(--ink); }
.shx-card:hover .shx-card-t a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.shx-card-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .6rem; margin-top: .2rem; }
.shx-quick {
  grid-area: media; align-self: end; justify-self: end; z-index: 2; margin: .7rem;
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; border-radius: 999px; padding: .55rem .85rem; cursor: pointer;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .78rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.14); transition: background .2s, color .2s, transform .2s var(--shx-ease);
}
.shx-quick i { font-size: .72rem; }
.shx-quick:hover { background: var(--ink); color: var(--on-ink); transform: translateY(-1px); }
.shx-quick:disabled { cursor: not-allowed; opacity: .85; background: var(--surface-3); color: var(--muted); box-shadow: none; }
.shx-quick.is-busy { opacity: .6; pointer-events: none; }
@media (hover: hover) and (min-width: 721px) {
  .shx-quick span { max-width: 0; overflow: hidden; transition: max-width .3s var(--shx-ease); white-space: nowrap; }
  .shx-card:hover .shx-quick span, .shx-quick:focus-visible span { max-width: 6rem; }
}
.shx-price { display: inline-flex; align-items: baseline; gap: .45rem; font-variant-numeric: tabular-nums; }
.shx-price strong { font-size: .98rem; font-weight: 750; letter-spacing: -.01em; }
.shx-price s { color: var(--muted-2); font-size: .85rem; }
.shx-price.is-lg strong { font-size: 1.75rem; letter-spacing: -.035em; }
.shx-price.is-lg s { font-size: 1.05rem; }
.shx-stock { display: inline-flex; align-items: center; gap: .38rem; font-size: .76rem; color: var(--muted); }
.shx-stock i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted-3); }
.shx-stock.is-in i { background: var(--green); }
.shx-stock.is-in { color: var(--green); }
.shx-stock.is-low { color: var(--shx-amber); }
.shx-stock.is-low i { background: var(--shx-amber); }
.shx-stock.is-out { color: var(--red); }
.shx-stock.is-out i { background: var(--red); }
.shx-stock.is-dig i { background: var(--ink); }

.shx-empty { padding: 3rem 1.4rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--shx-r); }
.shx-empty.is-cart { margin-bottom: 3rem; }
.shx-empty-ico { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-3); font-size: 1.2rem; margin-bottom: 1rem; }
.shx-empty h2 { font-size: 1.6rem; margin-bottom: .4rem; }
.shx-empty p { max-width: 30rem; margin: 0 auto 1.4rem; color: var(--muted); }
.shx-none { padding: 2.2rem 0; text-align: center; }
.shx-none p { color: var(--muted); }
.shx-sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1.2rem; }
.shx-sechead h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.shx-sechead a { font-size: .86rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

/* ── Product page ───────────────────────────────────────────────────────── */
.shx-crumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: 1.5rem 0 1rem; font-size: .82rem; color: var(--muted-2); }
.shx-crumbs a { color: var(--ink-3); }
.shx-crumbs a:hover { color: var(--red); }
.shx-crumbs [aria-current] { color: var(--ink); max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3.2rem; align-items: start; padding-bottom: 4rem; }
.shx-gallery { position: sticky; top: 88px; }
.shx-gallery-main {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 24px; background: var(--surface-3); outline-offset: 3px;
}
.shx-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.shx-gallery-main img.is-fade { opacity: .35; }
.shx-gallery-main .shx-badges { top: 1rem; left: 1rem; }
.shx-thumbs { display: flex; gap: .55rem; margin-top: .75rem; overflow-x: auto; padding: .15rem; }
.shx-thumb {
  flex: 0 0 auto; width: 74px; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 14px;
  overflow: hidden; background: var(--surface-3); cursor: pointer; transition: border-color .2s;
}
.shx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shx-thumb.is-on { border-color: var(--ink); }
.shx-buy { padding-top: .4rem; }
.shx-pdp-title { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; letter-spacing: -.05em; margin: 0 0 1rem; }
.shx-pdp-price { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.shx-save { font-style: normal; font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--red); background: var(--shx-red-bg); padding: .3rem .6rem; border-radius: 999px; }
.shx-pdp-note { font-size: .84rem; color: var(--muted); margin: .45rem 0 1rem; }
.shx-pdp-stock { margin: 0 0 1.2rem; }
.shx-pdp-stock .shx-stock { font-size: .9rem; }
.shx-buyform { display: grid; grid-template-columns: auto 1fr; gap: .6rem; margin: 0 0 1.4rem; }
.shx-buyform .shx-now { grid-column: 1 / -1; }
.shx-buyform .bcos-btn { min-height: 52px; }
.shx-add i { margin-right: .5rem; }
.shx-stepper {
  display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--shx-r-sm); background: var(--bg); overflow: hidden;
}
.shx-stepper button {
  width: 44px; height: 50px; border: 0; background: transparent; font: inherit; font-size: 1.2rem; cursor: pointer; color: var(--ink);
  transition: background .15s;
}
.shx-stepper button:hover:not(:disabled) { background: var(--surface-3); }
.shx-stepper button:disabled { color: var(--muted-3); cursor: not-allowed; }
.shx-stepper input, .shx-stepper output {
  width: 2.8rem; text-align: center; border: 0; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); background: transparent;
  -moz-appearance: textfield; appearance: textfield;
}
.shx-stepper input::-webkit-outer-spin-button, .shx-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shx-stepper input:focus { outline: 0; }
.shx-stepper.is-sm button { width: 34px; height: 36px; font-size: 1rem; }
.shx-stepper.is-sm output { width: 2rem; font-size: .92rem; }
.shx-deliv { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .55rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.shx-deliv li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .55rem; font-size: .9rem; color: var(--ink-3); line-height: 1.45; }
.shx-deliv i { color: var(--ink); margin-top: .2rem; }
.shx-deliv strong { color: var(--ink); }
.shx-trust { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .85rem 1rem; border-radius: var(--shx-r-sm); background: var(--surface-2); }
.shx-trust-k { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: .45rem; align-items: center; }
.shx-trust-logos { display: flex; flex-wrap: wrap; gap: .4rem; }
.shx-trust-logo { height: 24px; max-width: 86px; border-radius: 5px; }
.shx-desc { margin: 1.8rem 0 0; }
.shx-desc p { color: var(--ink-2); line-height: 1.7; margin: 0 0 .8rem; }
.shx-specs { margin: 1.4rem 0 0; border-top: 1px solid var(--line); }
.shx-specs div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.shx-specs dt { color: var(--muted); }
.shx-specs dd { margin: 0; color: var(--ink); }
.shx-related { padding: 3.2rem 0 4.4rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.shx-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(0,0,0,.08); transform: translateY(100%); transition: transform .3s var(--shx-ease);
}
.shx-sticky.is-on { transform: none; }
.shx-sticky-in { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; display: flex; align-items: center; gap: .8rem; padding: .7rem 0; }
.shx-sticky-in img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.shx-sticky-in div { flex: 1; min-width: 0; display: grid; }
.shx-sticky-in strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-sticky-in span { font-size: .82rem; color: var(--muted); }

/* ── Mini-bag drawer ────────────────────────────────────────────────────── */
.shx-drawer { position: fixed; inset: 0; z-index: 80; }
.shx-drawer-scrim { position: absolute; inset: 0; background: rgba(17,17,17,.36); opacity: 0; transition: opacity .25s ease; }
.shx-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--bg); box-shadow: var(--shx-sh-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s var(--shx-ease); outline: 0;
}
.shx-drawer.is-open .shx-drawer-scrim { opacity: 1; }
.shx-drawer.is-open .shx-drawer-panel { transform: none; }
.shx-drawer-h { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
.shx-drawer-h h2 { font-size: 1.15rem; margin: 0; }
.shx-drawer-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink); }
.shx-drawer-x:hover { border-color: var(--ink); }
.shx-drawer-b { padding: 1.1rem 1.3rem 1.4rem; overflow-y: auto; flex: 1; }
.shx-drawer-ok { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; padding: .7rem .85rem; border-radius: var(--shx-r-sm); background: var(--shx-green-bg); color: var(--ink); font-size: .9rem; }
.shx-drawer-ok i { color: var(--green); }
.shx-drawer-a { display: grid; gap: .5rem; margin-top: 1rem; }
.shx-drawer-a .bcos-btn { width: 100%; }
.shx-drawer-empty { text-align: center; padding: 2rem 0; }

/* Mini line list (drawer + checkout) */
.shx-mini { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .85rem; }
.shx-mini li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.shx-mini-wrap { position: relative; }
.shx-mini-img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; font-weight: 750; color: var(--muted-2); }
.shx-mini-q {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 999px; padding: 0 5px;
  background: var(--ink); color: var(--on-ink); font-size: .66rem; line-height: 20px; text-align: center;
}
.shx-mini div { display: grid; gap: .1rem; min-width: 0; }
.shx-mini-t { font-weight: 650; font-size: .92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-mini div span { font-size: .8rem; color: var(--muted); }
.shx-mini strong { font-variant-numeric: tabular-nums; font-size: .92rem; }

/* Free-shipping meter */
.shx-free { padding: .85rem 1rem; border-radius: var(--shx-r-sm); background: var(--surface-2); margin: 0 0 1rem; }
.shx-free p { margin: 0 0 .55rem; font-size: .88rem; color: var(--ink-2); }
.shx-meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.shx-meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .5s var(--shx-ease); }
.shx-free.is-done { background: var(--shx-green-bg); }
.shx-free.is-done .shx-meter i { background: var(--green); }
.shx-free.is-done p i { color: var(--green); margin-right: .3rem; }

/* Summary */
.shx-sum { margin: 0; display: grid; gap: .5rem; }
.shx-sum div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.shx-sum dt { color: var(--ink-3); }
.shx-sum dt small { color: var(--muted-2); font-size: .78rem; }
.shx-sum dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.shx-sum .is-disc dd, .shx-sum .is-disc dt { color: var(--green); }
.shx-sum .is-grand { border-top: 1px solid var(--ink); padding-top: .8rem; margin-top: .3rem; font-size: 1.12rem; font-weight: 750; letter-spacing: -.02em; }
.shx-sum .is-grand dt { color: var(--ink); }

/* ── Cart ───────────────────────────────────────────────────────────────── */
.shx-pagehead { padding: 2.6rem 0 .8rem; }
.shx-cartwrap { padding-bottom: 4rem; }
.shx-cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 2.6rem; align-items: start; }
.shx-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.shx-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 6.5rem auto; gap: 1.1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line); transition: opacity .2s;
}
.shx-line.is-busy { opacity: .45; pointer-events: none; }
.shx-line-img { display: block; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--surface-3); }
.shx-line-img img { width: 100%; height: 100%; object-fit: cover; }
.shx-line-img .shx-card-ph { font-size: 1.8rem; }
.shx-line-info { display: grid; gap: .25rem; min-width: 0; }
.shx-line-t { font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-size: 1.02rem; }
.shx-line-meta { font-size: .82rem; color: var(--muted); }
.shx-line-warn { font-size: .8rem; color: var(--shx-amber); }
.shx-line-total { text-align: right; font-variant-numeric: tabular-nums; font-size: 1rem; }
.shx-line-rm { margin: 0; }
.shx-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.shx-x:hover { border-color: var(--line); color: var(--red); }
.shx-back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-size: .88rem; color: var(--ink-3); }
.shx-back:hover { color: var(--red); }
.shx-summary { position: sticky; top: 88px; background: var(--surface-2); border-radius: 22px; padding: 1.4rem 1.4rem 1.2rem; }
.shx-summary h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.shx-summary .shx-trust { background: var(--bg); margin-top: 1rem; }
.shx-cta { width: 100%; min-height: 54px; margin: 1.1rem 0 .5rem; gap: .6rem; }
.shx-cta i { margin: 0 0 0 .4rem; }
.shx-code { margin: 0 0 1rem; }
.shx-code-row { display: flex; gap: .45rem; }
.shx-code-row input { flex: 1; min-width: 0; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: var(--shx-r-sm); padding: .6rem .8rem; background: var(--bg); text-transform: uppercase; }
.shx-code-row input:focus { outline: 0; border-color: var(--ink); }
.shx-code-row input[aria-invalid="true"] { border-color: var(--red); }
.shx-code-on { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: .6rem .8rem; border-radius: var(--shx-r-sm); background: var(--shx-green-bg); font-size: .88rem; }
.shx-code-on i { color: var(--green); }
.shx-code-on .shx-link { margin-left: auto; font-size: .82rem; }
.shx-code .shx-err:empty { display: none; }
.shx-flash { padding: .75rem 1rem; border-radius: var(--shx-r-sm); background: var(--surface-2); margin: 0 0 1rem; font-size: .92rem; }
.shx-flash.is-error { background: var(--shx-red-bg); color: var(--red); }
.shx-flash.is-success { background: var(--shx-green-bg); }
.shx-undo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; margin: 0 0 1rem; border-radius: var(--shx-r-sm); background: var(--ink); color: var(--on-ink); font-size: .9rem; }
.shx-undo .shx-link { color: var(--on-ink); font-weight: 700; }

/* ── Checkout ───────────────────────────────────────────────────────────── */
.shx-co { padding: 1.6rem 0 4.4rem; }
.shx-co-head { margin-bottom: 1.4rem; }
.shx-co-head .shx-back { margin: 0 0 1rem; }
.shx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: shx-step; }
.shx-steps li {
  counter-increment: shx-step; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: .35rem .75rem; border-radius: 999px; background: var(--surface-3);
}
.shx-steps li::before { content: counter(shx-step) ' · '; color: var(--muted-2); }
.shx-co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 2.4rem; align-items: start; }
.shx-co-main { display: grid; gap: 1.1rem; }
.shx-sec { margin: 0; border: 1px solid var(--line); border-radius: 22px; padding: 1.3rem 1.4rem 1.4rem; min-width: 0; }
.shx-sec legend { padding: 0 .5rem; margin-left: -.5rem; font-weight: 750; font-size: 1.12rem; letter-spacing: -.03em; display: flex; align-items: center; gap: .55rem; }
.shx-sec-n { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink); color: var(--on-ink); font-size: .78rem; letter-spacing: 0; }
.shx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: .4rem; }
.shx-f { display: grid; gap: .35rem; align-content: start; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; min-width: 0; }
.shx-f small { font-size: .7rem; letter-spacing: .04em; text-transform: none; color: var(--muted-2); font-weight: 400; }
.shx-f.is-2, .shx-fields > .is-2 { grid-column: 1 / -1; }
.shx-f input:not([type="checkbox"]):not([type="radio"]), .shx-f select, .shx-f textarea {
  font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--shx-r-sm); padding: .78rem .85rem; background: var(--bg); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.shx-f select { -webkit-appearance: none; appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.shx-f textarea { resize: vertical; min-height: 4.4rem; }
.shx-f input:focus, .shx-f select:focus, .shx-f textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(225,6,0,.1); }
.shx-f [aria-invalid="true"] { border-color: var(--red); background: var(--shx-red-bg); }
.shx-err { display: block; font-size: .8rem; color: var(--red); letter-spacing: 0; text-transform: none; font-weight: 500; margin: .1rem 0 0; }
.shx-err:empty { display: none; }
.shx-alert { display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--shx-r-sm); background: var(--shx-red-bg); color: var(--red); font-size: .92rem; }
.shx-methods, .shx-rails { display: grid; gap: .55rem; margin-top: 1.1rem; }
.shx-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center;
  padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.shx-opt:hover { border-color: var(--muted-3); }
.shx-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 10px 24px rgba(0,0,0,.05); }
.shx-opt-b { display: grid; gap: .1rem; min-width: 0; }
.shx-opt-b strong { font-size: .95rem; letter-spacing: -.01em; }
.shx-opt-b em { font-style: normal; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.shx-opt-p { font-weight: 750; font-variant-numeric: tabular-nums; }
.shx-check { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0 .2rem; font-size: .92rem; line-height: 1.5; cursor: pointer; }
.shx-check input { margin-top: .15rem; }
.shx-check a { text-decoration: underline; text-underline-offset: 3px; }
.shx-place { width: 100%; min-height: 58px; margin: 1.1rem 0 .7rem; font-size: .82rem; gap: .5rem; }
.shx-place.is-busy { opacity: .7; cursor: progress; }
.shx-place i { margin: 0 .4rem 0 0; }
.shx-summary.is-sticky .shx-mini { max-height: 18rem; overflow: auto; padding: .4rem .4rem .2rem .2rem; margin-left: -.2rem; }

/* ── Order status ───────────────────────────────────────────────────────── */
.shx-order { padding: 2.4rem 0 4.4rem; }
.shx-order-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.shx-order-acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.shx-order-acts i { margin-right: .4rem; }
.shx-timeline { list-style: none; margin: 0 0 2rem; padding: 1.2rem 1.4rem; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; border: 1px solid var(--line); border-radius: 22px; }
.shx-timeline li { position: relative; display: grid; gap: .15rem; padding-top: 1.5rem; }
.shx-timeline li::before { content: ''; position: absolute; top: .5rem; left: 1rem; right: -.4rem; height: 2px; background: var(--line); }
.shx-timeline li:last-child::before { display: none; }
.shx-timeline li.is-done::before { background: var(--ink); }
.shx-timeline i { position: absolute; top: 0; left: 0; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); z-index: 1; }
.shx-timeline .is-done i { background: var(--ink); border-color: var(--ink); }
.shx-timeline .is-done i::after { content: ''; position: absolute; left: .27rem; top: .1rem; width: .25rem; height: .45rem; border: solid var(--on-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.shx-timeline .is-now i { border-color: var(--red); box-shadow: 0 0 0 4px rgba(225,6,0,.14); animation: bcos-dot-pulse 2.1s ease-in-out infinite; }
.shx-timeline .is-stop i { background: var(--red); border-color: var(--red); }
.shx-timeline strong { font-size: .92rem; letter-spacing: -.01em; }
.shx-timeline .is-todo strong { color: var(--muted-2); font-weight: 600; }
.shx-timeline span { font-size: .78rem; color: var(--muted); min-height: 1em; }
.shx-order-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.shx-order-side { display: grid; gap: 1rem; }
.shx-panel { border: 1px solid var(--line); border-radius: 20px; padding: 1.15rem 1.2rem; background: var(--bg); }
.shx-panel p { margin: 0 0 .6rem; }
.shx-panel.is-pay { border-color: var(--ink); box-shadow: var(--shx-sh); }
.shx-panel.is-help { background: var(--surface-2); border-color: transparent; }
.shx-copylist { margin: 0 0 .8rem; display: grid; gap: .45rem; }
.shx-copylist div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; align-items: center; font-size: .88rem; }
.shx-copylist dt { color: var(--muted); }
.shx-copylist dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-weight: 650; min-width: 0; }
.shx-copylist dd span { overflow-wrap: anywhere; }
.shx-copy { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; color: var(--ink-3); }
.shx-copy:hover { border-color: var(--ink); color: var(--ink); }
.shx-copy.is-done { background: var(--shx-green-bg); border-color: var(--green); color: var(--green); }
.shx-dl { display: grid; gap: .5rem; }
.shx-dl .bcos-btn { justify-content: flex-start; }
.shx-dl i { margin-right: .5rem; }
.shx-addr { line-height: 1.55; }
.shx-order-rcpt .rcpt { margin: 0; max-width: none; border-radius: 22px; box-shadow: var(--shx-sh); border: 1px solid var(--line); }

/* ── Track ──────────────────────────────────────────────────────────────── */
.shx-track { padding: 3.4rem 0 5rem; }
.shx-track-card { max-width: 540px; margin: 0 auto; border: 1px solid var(--line); border-radius: 26px; padding: 2.2rem 2rem; box-shadow: var(--shx-sh); }
.shx-track-card .shx-lead { margin-bottom: 1.2rem; font-size: .98rem; }
.shx-track-card .shx-alert { margin-bottom: 1rem; }
.shx-track-card .shx-place { margin-top: .4rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .shx-co-grid, .shx-cart-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 1.6rem; }
  .shx-grid.is-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shx-head-in, .shx-pdp, .shx-cart-grid, .shx-co-grid, .shx-order-grid { grid-template-columns: 1fr; }
  .shx-gallery, .shx-summary { position: static; }
  .shx-pdp { gap: 1.8rem; }
  .shx-perks { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .shx-summary.is-sticky { order: -1; }
  .shx-co-grid .shx-summary.is-sticky { order: 0; }
}
@media (max-width: 720px) {
  .shx-navcart { margin-left: auto; }
  .shx-navcart ~ .bcos-nav-in, .shx-navcart ~ .bcos-hub { margin-left: 0; }
  .shx-head { padding: 2.2rem 0 1rem; }
  .shx-perks { display: none; }
  .shx-bar { top: 64px; padding: .6rem 0; gap: .45rem; }
  .shx-search { flex: 1 1 100%; max-width: none; }
  .shx-bar-r { width: 100%; }
  .shx-select { flex: 1; }
  .shx-select select { width: 100%; }
  .shx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem .8rem; }
  .shx-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shx-card-media { border-radius: 14px; }
  .shx-card-t { font-size: .92rem; }
  .shx-quick { margin: .5rem; padding: .5rem .6rem; }
  .shx-quick span { display: none; }
  .shx-card-foot .shx-stock { display: none; }
  .shx-line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info rm" "img step total"; gap: .5rem .8rem; }
  .shx-line-img { grid-area: img; width: 72px; height: 72px; align-self: start; }
  .shx-line-info { grid-area: info; }
  .shx-line-rm { grid-area: rm; justify-self: end; align-self: start; }
  .shx-line .shx-stepper { grid-area: step; justify-self: start; }
  .shx-line-total { grid-area: total; align-self: center; }
  .shx-fields { grid-template-columns: 1fr; }
  .shx-sec { padding: 1.1rem 1rem 1.2rem; border-radius: 18px; }
  .shx-timeline { grid-auto-flow: row; grid-auto-columns: auto; padding: 1rem 1.1rem; gap: 0; }
  .shx-timeline li { padding: 0 0 1rem 1.9rem; }
  .shx-timeline li::before { top: 1.1rem; bottom: -.1rem; left: .45rem; right: auto; width: 2px; height: auto; }
  .shx-timeline i { top: .1rem; }
  .shx-track-card { padding: 1.6rem 1.2rem; border-radius: 20px; }
  .shx-specs div { grid-template-columns: 7rem 1fr; }
  .shx-order-rcpt .rcpt { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .shx-card-media img, .shx-drawer-panel, .shx-drawer-scrim, .shx-sticky, .shx-meter i { transition: none !important; }
  .shx-navcart.is-bump .shx-navcart-n, .shx-timeline .is-now i { animation: none !important; }
}
@media print {
  .bcos-nav, .bcos-foot, .shx-order-acts, .shx-order-side, .shx-timeline, .shx-sticky, .shx-drawer { display: none !important; }
  .shx-order-grid { display: block; }
  .shx-order-head .shx-lead { display: none; }
  .shx-order-rcpt .rcpt { box-shadow: none; border: 0; }
}

/* ═══ Shop console (admin/shop) ═════════════════════════════════════════════ */
.shx-ahead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.shx-ahead-acts { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.shx-ahead-acts i { margin-right: .35rem; }
.shx-atool { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.shx-atool .bcos-hint { margin: 0; }
.shx-athumb { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: var(--surface-3); display: inline-grid; place-items: center; font-weight: 750; color: var(--muted-2); flex: 0 0 auto; vertical-align: middle; }
.shx-sub { display: block; font-size: .78rem; color: var(--muted-2); margin-top: .1rem; }
s.shx-sub { display: inline; }
.shx-rowlink { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.shx-rowlink:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.shx-star { color: #c28a00; font-size: .72rem; }
.shx-dt td { vertical-align: middle; }
.shx-ordchips { padding: 0 0 .9rem; flex-wrap: wrap; overflow: visible; }
.shx-chip { font: inherit; font-size: .84rem; cursor: pointer; }
.shx-grow { flex: 1; }

/* Dashboard */
.shx-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
a.dash-kpi { display: block; }
.shx-dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.shx-acard {
  background: var(--bg); border-radius: 18px; padding: 1.1rem 1.2rem 1.2rem; min-width: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.045);
}
.shx-acard.is-wide { grid-column: span 2; }
.shx-acard > header { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .9rem; }
.shx-acard > header h3 { font-size: 1rem; margin: 0; letter-spacing: -.02em; }
.shx-acard > header span, .shx-acard > header a { font-size: .78rem; color: var(--muted-2); }
.shx-acard > header a { letter-spacing: .1em; text-transform: uppercase; }
.shx-acard > header a:hover { color: var(--red); }
.shx-chart { width: 100%; height: auto; display: block; overflow: visible; }
.shx-chart .shx-gl { stroke: var(--line); stroke-width: 1; }
.shx-chart .shx-area { fill: var(--ink); opacity: .07; }
.shx-chart .shx-ln { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.shx-chart circle { fill: var(--red); }
.shx-chart .shx-hit { fill: transparent; cursor: crosshair; }
.shx-chart .shx-hit:hover { fill: rgba(0,0,0,.04); }
.shx-chart text { font-size: 10.5px; fill: var(--muted-2); font-family: inherit; }
.shx-chart .shx-max { font-size: 10px; }
.shx-alist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.shx-alist li > button, .shx-alist li > a {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .7rem; align-items: center;
  padding: .6rem .5rem; border: 0; border-radius: 10px; background: transparent; font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.shx-alist li > button:hover, .shx-alist li > a:hover { background: var(--surface-2); color: var(--ink); }
.shx-alist strong { grid-column: 2; font-size: .9rem; }
.shx-alist li > * > span:not(.shx-attn-k) { grid-column: 2; font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-alist em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }
.shx-alist .bcos-pill { grid-column: 3; grid-row: 2; justify-self: end; }
.shx-alist.is-recent em { grid-row: 1; }
/* pill() renders an <em>, so the rule above also pulled the status pill into
   row 1, on top of the amount. Keep the pill in row 2. */
.shx-alist.is-recent em.bcos-pill { grid-row: 2; font-weight: 400; font-size: .68rem; }
.shx-attn-k { grid-row: 1 / span 2; font-size: .6rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .45rem; border-radius: 6px; background: var(--surface-3); color: var(--ink-3); width: 5.2rem; text-align: center; }
.shx-attn-k.is-pay { background: var(--shx-red-bg); color: var(--red); }
.shx-attn-k.is-ship { background: var(--shx-amber-bg); color: var(--shx-amber); }
.shx-attn-k.is-stock { background: var(--surface-3); color: var(--ink); }
.shx-allclear { display: flex; gap: .5rem; align-items: center; color: var(--green); font-size: .92rem; margin: .5rem 0 0; }
/* Admin chart rows. :not(form) keeps this off the storefront toolbar (form.shx-bar
   above), which it otherwise overrode into a 3-column grid on phones. */
.shx-bar:not(form) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: .65rem; align-items: center; margin: .45rem 0; font-size: .84rem; }
.shx-bar > span { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.shx-bar > span b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-bar .shx-athumb { width: 28px; height: 28px; border-radius: 8px; font-size: .7rem; }
.shx-bar > i { display: block; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.shx-bar > i b { display: block; height: 100%; border-radius: inherit; background: var(--ink); min-width: 3px; }
.shx-bar > em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.shx-mini-kv { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); display: grid; gap: .35rem; }
.shx-mini-kv div { display: flex; justify-content: space-between; font-size: .84rem; }
.shx-mini-kv dt { color: var(--muted); }
.shx-mini-kv dd { margin: 0; font-weight: 650; }

/* Admin drawer */
.shx-drawer.is-admin { z-index: 60; }
.shx-drawer.is-admin .shx-drawer-panel { width: min(600px, 100%); }
.shx-drawer-f { display: flex; gap: .5rem; align-items: center; padding: .9rem 1.3rem; border-top: 1px solid var(--line); background: var(--bg); }
.shx-drawer-f[hidden] { display: none; }
.shx-drawer-f .bcos-btn { padding: .7rem 1.1rem; }
.shx-ohead { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: 0 0 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.shx-ohead span { font-size: .84rem; color: var(--muted); }
.shx-ohead strong { margin-left: auto; font-size: 1.35rem; letter-spacing: -.03em; }
.shx-osec { padding: 0 0 1.1rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
.shx-osec:last-child { border-bottom: 0; }
.shx-osec h4, .shx-psec h4 { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 .7rem; font-weight: 700; }
.shx-osec p { margin: 0 0 .5rem; color: var(--ink-2); line-height: 1.5; font-size: .92rem; }
.shx-oaddr { padding: .7rem .85rem; border-radius: 12px; background: var(--surface-2); }
.shx-onote { font-size: .88rem; color: var(--ink-3); }
.shx-olines { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .6rem; }
.shx-olines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.shx-olines li div { display: grid; min-width: 0; }
.shx-olines li span { font-size: .78rem; color: var(--muted); }
.shx-olines em { font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }
.shx-ship-form { padding: .9rem; border-radius: 14px; background: var(--surface-2); }
.shx-ship-form .shx-fields { margin: 0 0 .8rem; }
.shx-ship-form .bcos-btn i { margin-right: .45rem; }
.shx-fline { display: flex; align-items: center; gap: .7rem; }
.shx-fline > i { color: var(--green); font-size: 1.1rem; }
.shx-fline span { flex: 1; font-size: .9rem; }
.shx-fline small { color: var(--muted); }
.shx-noteform { display: grid; gap: .5rem; justify-items: start; margin-bottom: .8rem; }
.shx-noteform textarea { width: 100%; font: inherit; font-size: .92rem; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .75rem; resize: vertical; }
.shx-noteform textarea:focus { outline: 0; border-color: var(--ink); }
.shx-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.shx-notes li { padding: .6rem .75rem; border-radius: 12px; background: #fffbea; border: 1px solid #f3e6b3; }
.shx-notes p { margin: 0 0 .2rem; font-size: .9rem; }
.shx-notes span { font-size: .74rem; color: var(--muted); }
.shx-hist { list-style: none; margin: 0; padding: 0 0 0 .2rem; }
.shx-hist li { position: relative; padding: 0 0 .75rem 1.3rem; display: grid; }
.shx-hist li::before { content: ''; position: absolute; left: .27rem; top: .9rem; bottom: 0; width: 1px; background: var(--line); }
.shx-hist li:last-child::before { display: none; }
.shx-hist i { position: absolute; left: 0; top: .32rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink); }
.shx-hist li:first-child i { background: var(--red); }
.shx-hist strong { font-size: .88rem; text-transform: capitalize; }
.shx-hist span { font-size: .76rem; color: var(--muted); }

/* Product editor */
.shx-pform { display: grid; gap: 1.2rem; }
.shx-psec { padding: 0 0 1.2rem; border-bottom: 1px solid var(--line); }
.shx-psec:last-child { border-bottom: 0; }
.shx-psec[hidden] { display: none; }
.shx-margin { grid-column: 1 / -1; margin: -.2rem 0 0; font-size: .8rem; color: var(--green); min-height: 1em; }
.shx-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.shx-gal-empty { grid-column: 1 / -1; margin: 0; padding: 1.2rem; text-align: center; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: .88rem; }
.shx-gal-item { position: relative; margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-3); border: 2px solid transparent; }
.shx-gal-item.is-cover { border-color: var(--ink); }
.shx-gal-item img { width: 100%; height: 100%; object-fit: cover; }
.shx-gal-cover, .shx-gal-new { position: absolute; left: .35rem; bottom: .35rem; font-size: .58rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .4rem; border-radius: 6px; background: var(--ink); color: var(--on-ink); }
.shx-gal-new { left: auto; right: .35rem; background: var(--green); }
.shx-gal-acts { position: absolute; top: .3rem; right: .3rem; display: flex; gap: .25rem; }
.shx-gal-acts button { width: 26px; height: 26px; border-radius: 8px; border: 0; background: rgba(255,255,255,.92); cursor: pointer; font-size: .7rem; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.shx-gal-acts button:hover { background: var(--ink); color: var(--on-ink); }
.shx-gal-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.shx-gal-bar .bcos-hint { margin: 0; font-size: .78rem; }
.shx-gal-bar i { margin-right: .35rem; }
.shx-specs-ed { display: grid; gap: .45rem; margin: .8rem 0 .5rem; }
.shx-spec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: .45rem; }
.shx-spec input { font: inherit; font-size: .92rem; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .65rem; min-width: 0; }
.shx-spec input:focus { outline: 0; border-color: var(--ink); }

/* Discounts */
.shx-atable td { vertical-align: middle; }
.shx-code-t { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.bcos-dialog .shx-fields { margin-top: 0; }
.shx-check.is-2 { grid-column: 1 / -1; margin: 0; }

/* Shipping & tax */
.shx-shipform { display: grid; gap: 1rem; max-width: 1080px; }
.shx-fields.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shx-f legend { padding: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: .35rem; }
fieldset.shx-f { border: 0; padding: 0; margin: 0; }
.shx-inline { display: flex; gap: .4rem 1rem; flex-wrap: wrap; padding-top: .45rem; }
.shx-inline .shx-check, .shx-mcountries .shx-check { margin: 0; font-size: .88rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink); }
.shx-mrow {
  display: grid; grid-template-columns: 1.3fr .95fr .7fr .7fr 1.25fr auto auto auto; gap: .6rem; align-items: end;
  padding: .8rem 0; border-top: 1px solid var(--line);
}
.shx-mrow .shx-f { font-size: .64rem; }
.shx-mrow .shx-f input, .shx-mrow .shx-f select { padding: .6rem .65rem; font-size: .92rem; }
.shx-mcountries { border: 0; padding: 0 0 .55rem; margin: 0; display: flex; gap: .5rem; }
.shx-mcountries legend { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 0; margin-bottom: .3rem; }
.shx-mactive { margin: 0 0 .6rem; font-size: .88rem; }
.shx-mrow .shx-x { margin-bottom: .35rem; }
.shx-taxnote { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px; background: var(--shx-amber-bg); margin: 0 0 1rem; }
.shx-taxnote i { color: var(--shx-amber); margin-top: .2rem; }
.shx-taxnote p { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.shx-shipform .shx-check { margin: .2rem 0 .7rem; font-size: .9rem; }
.shx-zbar { margin: .4rem 0 .7rem; }
.shx-zbar input { font: inherit; font-size: .9rem; border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; width: min(320px, 100%); }
.shx-zwrap { max-height: 460px; border-radius: 12px; }
.shx-ztable input { font: inherit; font-size: .88rem; width: 100%; min-width: 3.4rem; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .5rem; }
.shx-ztable input:focus { outline: 0; border-color: var(--ink); }
.shx-ztable td { padding: .4rem .6rem; }
.shx-ztable th { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.shx-ztable .shx-zgroup th { position: static; background: var(--surface-2); font-size: .72rem; color: var(--ink); }
.shx-ztable tr[hidden] { display: none; }
.shx-ztot { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shx-savebar { position: sticky; bottom: 0; padding: .8rem 0; background: linear-gradient(transparent, var(--surface-2) 35%); display: flex; justify-content: flex-end; }
.shx-savebar i { margin-right: .45rem; }

@media (max-width: 1200px) {
  .shx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shx-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shx-mrow { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .shx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shx-dgrid { grid-template-columns: 1fr; }
  .shx-acard.is-wide { grid-column: auto; }
  .shx-fields.is-3, .shx-mrow { grid-template-columns: 1fr 1fr; }
  .shx-drawer-f { flex-wrap: wrap; }
}

.bcos-dialog .shx-check { display: flex; flex-direction: row; align-items: center; gap: .6rem; text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 400; color: var(--ink); }
.bcos-dialog .shx-check input { width: 1.15rem; height: 1.15rem; padding: 0; }

/* PayPal on the checkout page (bcos-shop-paypal.js): card fields and buttons. */
.shx-opt[hidden], .shx-place[hidden], .shx-pp-card[hidden], .shx-pp-btn[hidden], .shx-pp-card .shx-fields[hidden] { display: none !important; }
.shx-pp-card { display: grid; gap: .7rem; padding: 1rem; }
/* PayPal's hosted fields carry their own ~6px inset; pull them out to line up with the labels. */
.shx-pp-field { margin: 0 -6px; }
@media (max-width: 640px) {
  .shx-pp-card .shx-fields { grid-template-columns: 1fr 1fr; gap: .2rem .7rem; }
}
.shx-pp-field { min-height: 3.1rem; letter-spacing: 0; text-transform: none; }
.shx-pp-btn { margin-top: .2rem; }
/* Checkout paused (Software → Launch → Checkout). */
.shx-co-closed { max-width: 560px; margin: 1.2rem 0 3rem; padding: 2rem 1.6rem; text-align: center; display: grid; justify-items: center; gap: .6rem; }
.shx-co-closed h2 { margin: .2rem 0 0; font-size: 1.5rem; }
.shx-co-closed p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 42ch; }
.shx-co-closed-i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 1.15rem; }
.shx-co-closed-a { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .8rem; }
@media (max-width: 640px) { .shx-co-closed { padding: 1.5rem 1.1rem; } .shx-co-closed-a > * { flex: 1 1 100%; } }

/* ── Ways to pay: one grouped selector ─────────────────────────────────────
   Rows share a single rounded container, split by hairlines. Custom radio,
   title and hint on the left, the brands each rail takes on the right. The
   chosen row is tinted with an accent edge, and the card form opens inside
   the group, under its row. */
.shx-rails {
  --rail-acc: var(--nf-green, #1f5f43); --rail-hair: var(--nf-hair, var(--line)); --rail-pad: 1.2rem; --rail-dot: 22px;
  gap: 0; margin-top: 1.1rem; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--rail-hair); overflow: hidden; isolation: isolate;
}
.shx-rails > * + * { border-top: 1px solid var(--rail-hair); }
.shx-rails > .shx-opt.is-rail {
  position: relative; grid-template-columns: var(--rail-dot) minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 1.1rem var(--rail-pad); border: 0; border-radius: 0; background: #fff; box-shadow: none; transition: background-color .2s;
}
.shx-rails > .shx-opt.is-rail + *, .shx-rails > * + .shx-opt.is-rail { border-top: 1px solid var(--rail-hair); }
.shx-rails > .shx-opt.is-rail:hover { background: color-mix(in srgb, var(--rail-acc) 3%, #fff); }
.shx-rails > .shx-opt.is-rail:has(input:checked),
.shx-rails > .shx-opt.is-rail:has(input:checked) + .shx-pp-card { background: color-mix(in srgb, var(--rail-acc) 7%, #fbfaf6); box-shadow: none; }
.shx-rails > .shx-opt.is-rail::before, .shx-rails > .shx-pp-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--rail-acc); opacity: 0; transition: opacity .2s; }
.shx-rails > .shx-opt.is-rail:has(input:checked)::before, .shx-rails > .shx-pp-card::before { opacity: 1; }
/* the radio */
.shx-opt.is-rail > input {
  appearance: none; -webkit-appearance: none; width: var(--rail-dot); height: var(--rail-dot); margin: 0; flex: none; cursor: pointer;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink, #16241c) 26%, transparent); background: #fff;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.shx-opt.is-rail:hover > input { border-color: color-mix(in srgb, var(--rail-acc) 60%, transparent); }
.shx-opt.is-rail > input:checked { border-color: var(--rail-acc); background: var(--rail-acc); box-shadow: inset 0 0 0 5px #fff; }
.shx-opt.is-rail > input:focus-visible { outline: 0; box-shadow: inset 0 0 0 5px #fff, 0 0 0 4px color-mix(in srgb, var(--rail-acc) 22%, transparent); }
.shx-opt.is-rail > input:not(:checked):focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rail-acc) 22%, transparent); }
.shx-opt.is-rail > input:disabled { opacity: .45; cursor: not-allowed; }
/* words */
.shx-opt.is-rail .shx-opt-b { gap: .2rem; }
.shx-opt.is-rail .shx-opt-b strong { font-size: 1rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.shx-opt.is-rail .shx-opt-b em { font-size: .84rem; line-height: 1.45; }
/* brands */
.shx-rail-marks { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.shx-rail-marks img { display: block; height: 24px; width: auto; border-radius: 5px; }
.shx-rail-marks.is-brand img { height: 26px; border-radius: 6px; }
.shx-rail-more { display: none; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rail-hair); background: #fff; font-size: .72rem; font-weight: 650; color: var(--muted); }
/* the card form, inside the group */
.shx-rails > .shx-pp-card { position: relative; margin: 0; padding: .1rem var(--rail-pad) 1.35rem calc(var(--rail-pad) + var(--rail-dot) + 1rem); border: 0; border-radius: 0; background: color-mix(in srgb, var(--rail-acc) 7%, #fbfaf6); }
.shx-rails > .shx-opt.is-rail + .shx-pp-card { border-top: 0; }
.shx-rails > .shx-pp-card .shx-f { gap: .35rem; }
@media (max-width: 640px) {
  .shx-rails { --rail-pad: 1rem; --rail-dot: 20px; border-radius: 16px; }
  .shx-rails > .shx-opt.is-rail { grid-template-columns: var(--rail-dot) minmax(0, 1fr); gap: .35rem .85rem; align-items: start; padding: 1rem var(--rail-pad); }
  .shx-opt.is-rail > input { margin-top: .05rem; }
  .shx-rail-marks { grid-column: 2; justify-content: flex-start; gap: 5px; margin-top: .25rem; }
  .shx-rail-marks img { height: 20px; border-radius: 4px; }
  .shx-rail-marks.is-brand img { height: 22px; }
  .shx-rail-marks img:nth-of-type(n+4) { display: none; }
  .shx-rail-more { display: inline-flex; }
  .shx-rails > .shx-pp-card { padding: .1rem var(--rail-pad) 1.1rem; }
}

/* "optional" sits at the end of its label line, so paired fields stay level. */
.shx-f { position: relative; }
.shx-f > small { position: absolute; top: 0; right: 0; line-height: 1.3; }
/* The terms box: same family as the payment radios. */
.shx-check { align-items: center; }
.shx-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--ink, #16241c) 26%, transparent); background: #fff center / 12px 12px no-repeat;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.shx-check:hover input[type="checkbox"] { border-color: color-mix(in srgb, var(--nf-green, #1f5f43) 60%, transparent); }
.shx-check input[type="checkbox"]:checked {
  border-color: var(--nf-green, #1f5f43); background-color: var(--nf-green, #1f5f43);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.shx-check input[type="checkbox"]:focus { outline: 0; box-shadow: none; }
.shx-check input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--nf-green, #1f5f43) 22%, transparent); }
.shx-check input[type="checkbox"][aria-invalid="true"] { border-color: var(--red); }
/* Phones: the action on one line, the total under it (the " · " between them is a
   bare text node, hidden by zeroing the button's own font size). */
@media (max-width: 480px) {
  .shx-co .shx-place, body.tpl-software .shx-co .shx-place { font-size: 0; flex-wrap: wrap; justify-content: center; align-content: center; gap: .1rem .45rem; padding: .6rem 1rem; line-height: 1.25; }
  .shx-place > :first-child { font-size: .95rem; }
  .shx-place [data-shx-place-label] { font-size: 1rem; }
  .shx-place [data-sum-total] { flex-basis: 100%; text-align: center; font-size: .8rem; font-weight: 500; opacity: .72; }
}