/* =============================================================================================
   Shoes (redesign batch 4): My Shoes rotation, pair detail, retire/delete and add sheets, the shoe
   database and the shoe profile. Built from the approved mockups (Shoes_*.dc.html) on the Grit
   style guide: Inter UI, Space Grotesk numerals, JetBrains Mono labels, cream ground, white cards
   with the marketplace card shadow, olive for the one action, no yellow.

   Plain CSS, unlayered, linked after sw.css in both hosts (Supwell/wwwroot/index.html and
   Supwell.Web/Components/App.razor). Every class is sh- prefixed, so nothing here can reach the
   feed or the marketplace. Sheets portal to <body>, so sheet classes don't depend on .sh-page.

   --sh-muted is the darkened muted ink for small text (10-13px): #6B6756 is 5.7:1 on white and
   4.7:1 on the cream ground, where #817D6B (4.1:1 / 3.5:1) misses AA. Phil's call, Oct 2026:
   small muted text uses the darker token everywhere except the feed and marketplace.
   ============================================================================================= */

:root {
  --sh-ink: #2d2d2d;
  --sh-olive-ink: #3f4531;
  --sh-olive: #373c2b;
  --sh-muted: var(--sw-ink-muted);
  --sh-faint: #9e9e96;
  --sh-inset: #f5f2ef;
  --sh-line: #e5e1d9;
  --sh-hair: #c2b7a3;
  --sh-sage: #9ea796;
  --sh-danger: #b84c41;
  --sh-disabled: #b6b8a8;
  --sh-shadow: var(--sw-shadow-tile);
  --sh-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sh-head: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --sh-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- page frame ------------------------------------------------------------------------------ */
.sh-page { max-width: 42rem; margin: 0 auto; padding: 16px 0 24px; font-family: var(--sh-ui); color: var(--sh-ink); }
.sh-page--detail { padding-top: 0; padding-bottom: calc(24px + var(--sw-safe-b, 0px)); }
.sh-page--footer { padding-bottom: 0; }
.sh-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sh-glass { flex: none; width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 999px; color: var(--sh-olive-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sh-glass:focus-visible, .sh-tap:focus-visible { outline: 2px solid var(--sh-olive); outline-offset: 2px; }
.sh-stack { display: flex; flex-direction: column; gap: 12px; }

/* Mono section labels: "ACTIVE (4)", "ON THIS PAIR", "MEMBER STATS" */
.sh-eyebrow { margin: 0; font: 700 12px/15px var(--sh-mono); letter-spacing: -.43px; color: var(--sh-muted); text-transform: uppercase; }
.sh-eyebrow--section { margin: 24px 0 10px; }
.sh-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-viewall { display: inline-flex; align-items: center; gap: 4px; margin: -10px -10px -10px 0; padding: 10px; border: 0; background: none; font: 500 10px/1 var(--sh-mono); letter-spacing: .04em; color: var(--sh-ink); text-decoration: none; text-transform: uppercase; cursor: pointer; }
.sh-viewall:hover, .sh-viewall:visited { color: var(--sh-ink); }

/* Card: white, 14 radius, the marketplace card shadow */
/* The box (white, radius 14, the tile shadow) is the app's one card shell: .sw-surface on the element. */
.sh-card { display: block; padding: 14px; color: var(--sh-ink); text-decoration: none; text-align: left; }
a.sh-card:hover, a.sh-card:visited { color: var(--sh-ink); }
a.sh-card, button.sh-card { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: scale 160ms ease; width: 100%; box-sizing: border-box; font-family: var(--sh-ui); }
a.sh-card:active, button.sh-card:active { scale: .985; }
a.sh-card:focus-visible, button.sh-card:focus-visible { outline: 2px solid var(--sh-olive); outline-offset: 2px; }
.sh-card--flush { padding: 0; overflow: hidden; }
.sh-card--list { padding: 14px 14px 4px; }

/* ---- shared bits ----------------------------------------------------------------------------- */
.sh-thumb { flex: none; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--sh-inset); color: var(--sh-hair); }
.sh-thumb--64 { width: 64px; height: 64px; }
.sh-thumb--white { background: #fff; }
.sh-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sh-brand { display: block; font: 700 12px/16px var(--sh-mono); letter-spacing: -.43px; color: var(--sh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-name { display: block; font: 600 16px/20px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-meta { font: 500 12px/15px var(--sh-ui); letter-spacing: 0; color: var(--sh-muted); }
.sh-meta--strong { font-weight: 600; color: var(--sh-ink); }
.sh-tag { display: inline-block; border-radius: 6px; background: var(--sh-inset); padding: 4px 8px; font: 500 11px/13px var(--sh-mono); letter-spacing: 0; color: var(--sh-ink); white-space: nowrap; text-transform: uppercase; }
.sh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.sh-unit { font: 700 10px/10px var(--sh-mono); color: var(--sh-muted); }
.sh-bar { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 25px; background: var(--sh-line); }
.sh-bar > span { display: block; height: 100%; border-radius: 25px; background: var(--sh-olive); transition: width 560ms cubic-bezier(.16, 1, .3, 1); }
.sh-bar--lg { height: 8px; margin-top: 10px; }
.sh-chev { flex: none; color: var(--sh-sage); }
.sh-textlink { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin-top: 8px; font: 700 14px/1 var(--sh-ui); color: var(--sh-olive); text-decoration: none; }
.sh-textlink:hover, .sh-textlink:visited { color: var(--sh-olive); }
.sh-avatar { flex: none; width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 999px; background: var(--sh-line); font: 700 10px/1 var(--sh-ui); color: var(--sh-ink); }
.sh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sh-error-line { margin: 10px 0 0; font: 500 13px/18px var(--sh-ui); color: var(--sh-danger); }

/* Empty / error (style guide 7.10: no icon, title, one line, the action) */
.sh-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 96px 24px 24px; text-align: center; }
.sh-empty--inline { padding: 40px 16px; }
.sh-empty__title { margin: 0; font: 600 16px/1.3 var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); }
.sh-empty__body { margin: 0; max-width: 32ch; font: 500 13px/18px var(--sh-ui); color: var(--sh-muted); text-wrap: pretty; }
.sh-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 10px 18px; border: 0; border-radius: 12px; background: var(--sh-olive); color: #fff; font: 600 14px/1 var(--sh-ui); text-decoration: none; cursor: pointer; }
.sh-cta:hover, .sh-cta:visited { color: #fff; }
.sh-cta:disabled { background: var(--sh-disabled); cursor: default; }

/* Skeletons: cream blocks at card radius */
.sh-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--sh-inset) 25%, #faf9f7 50%, var(--sh-inset) 75%) 0 0 / 200% 100%; animation: sh-shimmer 1.4s ease-in-out infinite; }
@keyframes sh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- My Shoes: pair card --------------------------------------------------------------------- */
.sh-pair__top { display: flex; align-items: flex-start; gap: 10px; }
.sh-pair__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sh-pair__miles { flex: none; text-align: right; }
.sh-pair__num { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; }
.sh-pair__num > b { font: 700 24px/24px var(--sh-head); letter-spacing: -.43px; color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sh-pair__of { margin-top: 4px; font: 500 10px/13px var(--sh-mono); color: var(--sh-muted); text-transform: uppercase; }
.sh-pair__foot { margin-top: 8px; display: flex; justify-content: space-between; gap: 10px; }
.sh-pair__foot > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-pair__foot > :last-child { flex: none; }
.sh-retired-toggle { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-retired-toggle__title { display: block; font: 600 16px/20px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); }
.sh-retired-toggle .sh-meta { display: block; margin-top: 2px; }
.sh-retired-toggle svg { transition: rotate 200ms ease; }
.sh-retired-toggle[aria-expanded="true"] svg { rotate: 180deg; }
.sh-retired-list { margin-top: 12px; }

/* ---- Pair detail ----------------------------------------------------------------------------- */
.sh-detail { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.sh-info { padding: 14px 14px 4px; }
.sh-info__top { display: flex; align-items: flex-start; gap: 12px; }
.sh-info__titles { flex: 1 1 auto; min-width: 0; letter-spacing: -.43px; }
.sh-h1 { margin: 2px 0 0; font: 600 22px/27px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); overflow-wrap: anywhere; }
.sh-iconbtn { flex: none; margin: -13px -13px 0 0; padding: 13px; border: 0; background: none; color: var(--sh-sage); cursor: pointer; border-radius: 12px; }
.sh-linkrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 12px; border-top: .5px solid var(--sh-sage); font: 500 14px/26px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-olive-ink); text-decoration: none; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; padding: 0; cursor: pointer; text-align: left; }
.sh-linkrow:hover, .sh-linkrow:visited { color: var(--sh-olive-ink); }
.sh-hero__num { margin-top: 8px; display: flex; align-items: flex-end; gap: 12px; }
.sh-hero__num > b { font: 700 80px/68px var(--sh-head); color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sh-hero__num > span { margin-bottom: 4px; font: 700 16px/16px var(--sh-mono); color: var(--sh-muted); }
.sh-hero__line { margin: 12px 0 0; font: 500 13px/20px var(--sh-ui); color: var(--sh-muted); }
.sh-hero__line b { font-weight: 700; color: var(--sh-ink); }
.sh-tiles { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh-tile { border-radius: 10px; background: var(--sh-inset); padding: 8px 12px; }
.sh-tile__k { margin: 0; font: 500 10px/13px var(--sh-mono); letter-spacing: -.43px; color: var(--sh-muted); text-transform: uppercase; }
.sh-tile__v { margin: 2px 0 0; font: 700 14px/18px var(--sh-head); color: var(--sh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-runhead { padding: 14px 14px 2px; display: flex; align-items: center; justify-content: space-between; }
.sh-run { display: flex; align-items: flex-start; padding: 12px 14px; text-decoration: none; color: var(--sh-ink); }
.sh-run + .sh-run { border-top: 1px solid rgba(229, 223, 217, .4); }
.sh-run:hover, .sh-run:visited { color: var(--sh-ink); }
.sh-run__date { flex: none; width: 36px; text-align: center; }
.sh-run__dow { display: block; font: 700 10px/13px var(--sh-mono); letter-spacing: -.43px; color: var(--sh-muted); }
.sh-run__day { display: block; font: 600 16px/20px var(--sh-head); color: var(--sh-ink); }
.sh-run__rule { align-self: stretch; width: 1px; margin: 0 20px 0 12px; background: var(--sh-line); }
.sh-run__main { flex: 1 1 auto; min-width: 0; }
.sh-run__stats { display: block; font: 400 14px/20px var(--sh-ui); color: var(--sh-ink); }
.sh-run__stats b { font-weight: 700; }
.sh-run__stats span { font-weight: 500; color: var(--sh-muted); }
.sh-run__name { display: block; margin-top: 5px; font: 500 13px/20px var(--sh-ui); color: var(--sh-olive-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-run-empty { margin: 0; padding: 12px 14px 16px; font: 500 13px/18px var(--sh-ui); color: var(--sh-muted); }
.sh-settings { display: flex; flex-direction: column; gap: 14px; }
.sh-choice2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-choice { height: 44px; border: 1px solid var(--sh-line); border-radius: 12px; background: #fff; font: 500 14px/1 var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.sh-choice[aria-checked="true"] { background: var(--sh-olive); border-color: var(--sh-olive); color: #fff; }
.sh-choice:focus-visible { outline: 2px solid var(--sh-olive); outline-offset: 2px; }
.sh-help { margin: 8px 0 0; font: 500 12px/18px var(--sh-ui); letter-spacing: 0; color: var(--sh-muted); }
.sh-sell__line { margin: 0; font: 400 14px/20px var(--sh-ui); color: var(--sh-ink); }
.sh-verified { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font: 500 12px/15px var(--sh-ui); color: var(--sh-olive); }
.sh-actionrows { padding: 0 14px; }
.sh-actionrow { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--sh-ui); }
.sh-actionrow + .sh-actionrow { border-top: .5px solid var(--sh-sage); }
.sh-actionrow__t { display: block; font: 600 14px/20px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); }
.sh-actionrow__t--danger { color: var(--sh-danger); }
.sh-actionrow .sh-meta { display: block; margin-top: 2px; }
.sh-actionrow:disabled { opacity: .45; cursor: default; }

/* Field controls (MJ's sheet controls, also on the detail page) */
.sh-label { display: flex; gap: 6px; margin: 0; font: 700 12px/26px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-muted); text-transform: uppercase; }
.sh-label > i { font-style: normal; font-weight: 400; }
.sh-pickrow { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--sh-line); border-radius: 12px; background: #fff; font: 500 14px/26px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); text-align: left; text-decoration: none; cursor: pointer; }
.sh-pickrow--shoe { gap: 10px; padding: 10px; }
.sh-pickrow:focus-visible { outline: 2px solid var(--sh-olive); outline-offset: 2px; }
.sh-switchrow { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--sh-line); border-radius: 12px; background: var(--sh-inset); }
.sh-switchrow__text { display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; letter-spacing: -.43px; color: var(--sh-ink); }
.sh-switchrow__text b { font-weight: 700; line-height: 16px; }
.sh-switchrow__text span { font-weight: 400; line-height: 16px; margin-top: 2px; }
.sh-field { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--sh-line); border-radius: 12px; background: #fff; transition: border-color 200ms ease; }
.sh-field:focus-within { border-color: #817d6b; }
.sh-field input { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 500 16px/26px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); -webkit-appearance: none; appearance: none; }
.sh-field input::placeholder { color: var(--sh-faint); }
.sh-field input[type="search"]::-webkit-search-cancel-button { display: none; }
.sh-field > .sh-unit { line-height: 26px; font-weight: 500; }
@media (min-width: 768px) { .sh-field input { font-size: 14px; } }
.sh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px; }

/* ---- Sheets (SwSheet with Class="sh-sheet") -------------------------------------------------- */
.sh-sheet { font-family: var(--sh-ui); letter-spacing: -.43px; }
.sh-sheet .sw-sheet__body { padding: 10px 10px 30px; }
.sh-sheet .sw-sheet__foot { gap: 30px; padding: 10px 10px calc(10px + var(--sw-safe-b, 0px)); }
.sh-sheet-col { width: 100%; max-width: 378px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.sh-sheet-col--tight { gap: 10px; }
.sh-sheet-hint { margin: 6px 0 0; font: 500 13px/18px var(--sh-ui); letter-spacing: 0; color: var(--sh-muted); text-align: center; padding: 16px 8px; }
.sh-suggest { display: flex; flex-direction: column; margin-top: 4px; border: 1px solid var(--sh-line); border-radius: 12px; overflow: hidden; }
.sh-suggest button { padding: 10px; border: 0; background: #fff; text-align: left; font: 500 14px/20px var(--sh-ui); color: var(--sh-ink); cursor: pointer; }
.sh-suggest button + button { border-top: .5px solid var(--sh-sage); }
.sh-selected { display: flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--sh-inset); padding: 10px; }
.sh-radio { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px; border: 1px solid var(--sh-line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; font-family: var(--sh-ui); transition: border-color 200ms ease; }
.sh-radio[aria-checked="true"] { border-color: var(--sh-olive); }
.sh-radio:focus-visible { outline: 2px solid var(--sh-olive); outline-offset: 2px; }
.sh-radio__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sh-radio__t { font: 600 16px/20px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); }
.sh-radio__d { margin-top: 4px; font: 500 13px/18px var(--sh-ui); letter-spacing: 0; color: var(--sh-muted); }
.sh-radio__d b { font-weight: 600; color: var(--sh-ink); }
.sh-radio__dot { flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--sh-hair); transition: background-color 200ms ease, border-color 200ms ease; }
.sh-radio[aria-checked="true"] .sh-radio__dot { border-color: var(--sh-olive); background: var(--sh-olive); box-shadow: inset 0 0 0 4px #fff; }
.sh-foot-text { flex: none; border: 0; background: none; border-radius: 25px; padding: 14px 10px; font: 600 14px/16px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-olive); text-transform: uppercase; cursor: pointer; }
.sh-foot-text:disabled { opacity: .45; cursor: default; }
.sw-btn.sh-btn-danger { --bg: var(--sh-danger); --fg: #fff; --bd: var(--sh-danger); }

/* ---- Shoe database --------------------------------------------------------------------------- */
.sh-search { flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(229, 223, 217, .6); border-radius: 16px; background: rgba(255, 255, 255, .7); color: rgba(63, 69, 49, .4); }
.sh-search input { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 400 16px/20px var(--sh-ui); color: var(--sh-olive-ink); -webkit-appearance: none; appearance: none; }
.sh-search input::placeholder { color: rgba(63, 69, 49, .45); }
.sh-search input::-webkit-search-cancel-button { display: none; }
@media (min-width: 768px) { .sh-search input { font-size: 15px; } }
.sh-search__clear { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--sh-inset); color: var(--sh-olive-ink); cursor: pointer; }
.sh-filterbtn { position: relative; }
.sh-filterbtn.is-on { background: rgba(55, 60, 43, .25); }
.sh-seg { margin-top: 10px; display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--sh-inset); }
.sh-seg button { flex: 1 1 0; min-width: 0; border: 0; border-radius: 9px; background: transparent; padding: 9px 0; font: 600 13px/20px var(--sh-ui); color: var(--sh-ink); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.sh-seg button[aria-checked="true"] { background: var(--sh-olive); color: #fff; }
.sh-seg button:focus-visible { outline: 2px solid var(--sh-olive); outline-offset: 1px; }
.sh-chips { margin: 10px calc(-1 * var(--sw-page-x, 12px)) 0 0; padding: 2px var(--sw-page-x, 12px) 2px 0; display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.sh-chips::-webkit-scrollbar { display: none; }
.sh-chip { flex: none; border: 1px solid var(--sh-line); border-radius: 12px; background: #fff; padding: 8px 14px; font: 500 14px/24px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.sh-chip[aria-pressed="true"] { background: var(--sh-olive); border-color: var(--sh-olive); color: #fff; }
.sh-chip:focus-visible { outline: 2px solid var(--sh-olive); outline-offset: 2px; }
.sh-results { margin-top: 12px; }
.sh-count { margin: 12px 0 0; font: 500 12px/15px var(--sh-ui); color: var(--sh-muted); }
.sh-endline { margin: 0; padding: 16px 0 8px; text-align: center; font: 500 13px/18px var(--sh-ui); color: var(--sh-faint); }

/* Database card: the marketplace list-card shape, specs in the stats row */
.sh-dbcard { display: flex; overflow: hidden; padding: 0; letter-spacing: -.43px; }
.sh-dbcard__photo { flex: none; width: 120px; height: 120px; display: grid; place-items: center; background: var(--sh-inset); color: var(--sh-hair); }
.sh-dbcard__photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sh-dbcard__body { flex: 1 1 auto; min-width: 0; height: 120px; box-sizing: border-box; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.sh-dbcard__brandrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sh-dbcard__brand { font: 700 12px/20px var(--sh-mono); color: var(--sh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-dbcard__title { margin: 0; font: 600 18px/23px var(--sh-ui); letter-spacing: -.43px; color: var(--sh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-stats { display: flex; align-items: stretch; border-top: 1px solid var(--sh-hair); padding-top: 5px; white-space: nowrap; font-family: var(--sh-mono); color: var(--sh-ink); }
.sh-stat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-left: 6px; border-left: .5px solid var(--sh-hair); }
.sh-stat:first-child { padding-left: 0; border-left: 0; }
.sh-stat--wide { flex-grow: 1.2; }
.sh-stat__k { font: 500 10px/10px var(--sh-mono); }
.sh-stat__v { display: flex; align-items: flex-end; gap: 4px; overflow: hidden; }
.sh-stat__v > b { font: 700 16px/16px var(--sh-mono); }
.sh-stat__v > span { font: 500 10px/16px var(--sh-mono); }
@media (max-width: 374px) { .sh-stat__v > b { font-size: 14px; } }

/* ---- Shoe profile ---------------------------------------------------------------------------- */
.sh-gallery { overflow: hidden; }   /* box: .sw-surface */
.sh-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.sh-gallery__track::-webkit-scrollbar { display: none; }
.sh-gallery__slide { flex: none; width: 100%; aspect-ratio: 4 / 3; scroll-snap-align: center; display: grid; place-items: center; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.sh-gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.sh-gallery__empty { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--sh-inset); color: var(--sh-hair); }
.sh-gallery__count { position: absolute; right: 12px; bottom: 12px; border-radius: 25px; background: rgba(0, 0, 0, .6); padding: 4px 10px; font: 500 12px/15px var(--sh-ui); color: #fff; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sh-summary { margin: 10px 0 0; font: 400 14px/20px var(--sh-ui); letter-spacing: 0; color: var(--sh-ink); }
.sh-grid { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sh-hair); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 12px; font-family: var(--sh-mono); color: var(--sh-ink); }
.sh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.sh-grid__k { margin: 0; font: 500 10px/13px var(--sh-mono); color: var(--sh-muted); text-transform: uppercase; }
.sh-grid__v { margin: 0; display: flex; align-items: flex-end; gap: 5px; min-width: 0; }
.sh-grid__v > b { font: 700 16px/18px var(--sh-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-grid__v > span { font: 500 10px/16px var(--sh-mono); white-space: nowrap; }
.sh-range { position: relative; margin: -10px -10px -10px 0; padding: 10px; display: inline-flex; align-items: center; gap: 4px; font: 600 13px/16px var(--sh-ui); color: var(--sh-olive-ink); }
.sh-range select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.sh-range:focus-within { outline: 2px solid var(--sh-olive); outline-offset: -2px; border-radius: 10px; }
.sh-review { display: block; padding: 10px 0; text-decoration: none; letter-spacing: 0; color: var(--sh-ink); cursor: pointer; }
.sh-review + .sh-review { border-top: .5px solid var(--sh-sage); }
.sh-review:hover, .sh-review:visited { color: var(--sh-ink); }
.sh-review__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sh-review__who { font: 600 13px/18px var(--sh-ui); color: var(--sh-olive-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-review__title { display: block; margin-top: 8px; font: 600 14px/20px var(--sh-ui); color: var(--sh-ink); }
.sh-review__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font: 400 14px/20px var(--sh-ui); color: var(--sh-ink); }
.sh-writebtn { margin: 4px -14px -14px; width: calc(100% + 28px); min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-top: .5px solid var(--sh-sage); background: none; font: 700 14px/1 var(--sh-ui); letter-spacing: 0; color: var(--sh-olive); cursor: pointer; border-radius: 0 0 14px 14px; }
.sh-video { margin-top: 8px; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 10px; background: var(--sh-inset); padding: 0; cursor: pointer; display: grid; place-items: center; }
.sh-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-video__play { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: #fff; box-shadow: var(--sh-shadow); color: var(--sh-olive-ink); }
.sh-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sh-desc { margin: 8px 0 0; font: 400 14px/20px var(--sh-ui); letter-spacing: 0; color: var(--sh-ink); overflow-wrap: anywhere; }
.sh-desc--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sh-more { margin-top: 4px; padding: 0; border: 0; background: none; font: 600 13px/24px var(--sh-ui); color: var(--sh-olive-ink); cursor: pointer; }
.sh-listrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; color: var(--sh-ink); letter-spacing: 0; }
.sh-listrow + .sh-listrow { border-top: .5px solid var(--sh-sage); }
.sh-listrow:hover, .sh-listrow:visited { color: var(--sh-ink); }
.sh-listrow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sh-listrow__who { font: 600 13px/18px var(--sh-ui); color: var(--sh-olive-ink); }
.sh-listrow__stats { font: 400 13px/18px var(--sh-ui); color: var(--sh-ink); }
.sh-listrow__stats b { font-weight: 700; }
.sh-listrow__stats span { font-weight: 500; color: var(--sh-muted); }
.sh-firstrow { margin-top: 8px; }
.sh-sticky { position: sticky; bottom: 0; z-index: 5; margin: 12px calc(-1 * var(--sw-page-x, 12px)) 0; padding: 10px var(--sw-page-x, 12px) calc(10px + var(--sw-safe-b, 0px)); border-top: .5px solid var(--sh-hair); background: #fff; display: flex; align-items: center; gap: 20px; }
.sh-sticky > .sw-btn { flex: 1 1 auto; }
@media (min-width: 1024px) { .sh-sticky { margin-inline: 0; border-radius: 14px 14px 0 0; padding-inline: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .sh-skel { animation: none; }
  .sh-bar > span, .sh-retired-toggle svg, .sh-choice, .sh-seg button, .sh-chip, .sh-radio, .sh-radio__dot { transition: none; }
  a.sh-card:active, button.sh-card:active { scale: none; }
  .sh-gallery__track { scroll-behavior: auto; }
}
.sh-flip { transform: scaleX(-1); }
.sw-btn.sh-sellbtn { margin-top: 12px; }