/* The framework dinosaur shop. A choice of Regular or Prime, a specimen
   shelf and a mutation checkout. All colours come from the owner's palette. */
.st-page { isolation:isolate; position:relative; }
main.st-page.section.wrap { padding-block:38px 70px; }
.st-scene { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.st-scene::before,.st-scene::after { content:""; position:absolute; inset:0; background-position:50% 34%; background-repeat:no-repeat; background-size:cover; }
.st-scene::before { background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 78%,transparent),var(--bg-deep)),var(--art-scene-store-placeholder,); }
.st-scene::after { background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 70%,transparent),color-mix(in srgb,var(--bg-deep) 97%,transparent)),var(--art-scene-store,); }
.st-hero { text-align:center; margin-bottom:26px; }
.st-eyebrow { display:flex; align-items:center; justify-content:center; gap:13px; color:var(--accent-hi); font:600 10px/1 var(--font-ui); letter-spacing:.23em; text-transform:uppercase; margin:0 0 14px; }
.st-eyebrow i { width:38px; height:1px; background:color-mix(in srgb,var(--accent) 45%,transparent); }
.st-page .st-title { margin:0; color:var(--fg); font:600 min(var(--fs-6),12vw)/1.05 var(--font-display,var(--font-ui)); letter-spacing:.025em; text-transform:uppercase; }
.st-lede { max-width:62ch; margin:14px auto 0; color:var(--fg-dim); font-size:14px; line-height:1.7; text-wrap:balance; }
.st-bar { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:20px; }
.st-chip { display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--edge); border-radius:var(--r); background:color-mix(in srgb,var(--bg-deep) 80%,transparent); color:var(--fg-mute); font-size:11px; }
.st-chip b { color:var(--fg); font-size:14px; font-variant-numeric:tabular-nums; }
.st-ico { display:inline-flex; color:var(--accent-hi); }
.st-chip-warn,.st-chip-warn b { color:var(--warn); }
.st-hint { width:100%; margin:0; color:var(--fg-mute); font-size:12px; }
.st-modes { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:670px; margin:30px auto; }
.st-page .st-mode { display:flex; align-items:center; text-align:left; gap:14px; min-width:0; padding:20px; border:1px solid var(--edge); border-radius:var(--r); color:var(--fg-dim); background:color-mix(in srgb,var(--surface) 75%,var(--bg-deep)); cursor:pointer; transition:border-color .15s,background .15s; }
.st-mode > span:nth-child(2) { min-width:0; }
.st-mode:only-child { grid-column:1 / -1; }
.st-mode b { display:block; color:var(--fg); font:600 20px/1.1 var(--font-display,var(--font-ui)); }
.st-mode small { display:block; margin-top:8px; color:var(--fg-mute); font-size:11px; line-height:1.5; }
.st-mode-icon { flex:none; color:var(--fg-mute); }
.st-mode-count { margin-left:auto; color:var(--fg-mute); font-size:12px; font-variant-numeric:tabular-nums; }
.st-page .st-mode[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg-deep)); }
.st-mode[aria-pressed="true"] .st-mode-icon,.st-mode[aria-pressed="true"] b { color:var(--accent-hi); }
.st-controls { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; padding-block:14px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); margin:0 0 23px; }
.st-controls .tabs.st-shelves { display:flex; gap:4px; flex-wrap:wrap; max-width:100%; border:0; background:transparent; padding:0; }
.st-shelves [role="tab"]::before { content:none; }
.st-controls .st-shelves .st-filter { display:inline-flex; align-items:center; gap:7px; padding:10px 12px; border:1px solid transparent; border-radius:var(--r); background:transparent; color:var(--fg-mute); font-size:11px; cursor:pointer; white-space:nowrap; }
.st-controls .st-shelves .st-filter[aria-selected="true"] { color:var(--fg); border-color:var(--edge); background:var(--surface); }
.st-count { display:inline-block; padding:2px 5px; color:var(--fg-mute); background:var(--bg-deep); border-radius:var(--r); font-size:10px; }
.st-glyph { display:inline-flex; align-items:center; }
.st-rail { display:flex; align-items:center; gap:14px; margin-left:auto; }
.st-tally { display:flex; align-items:center; gap:7px; color:var(--fg-mute); font-size:12px; }
.st-sortset { display:flex; gap:3px; }
.st-sortbtn { display:flex; align-items:center; gap:7px; border:1px solid var(--edge); background:var(--bg-deep); color:var(--fg-mute); padding:8px 10px; cursor:pointer; font-size:10px; }
.st-sortbtn[aria-pressed="true"] { color:var(--accent-hi); background:var(--surface); }
.st-status { margin:0 0 16px; text-align:center; color:var(--fg-mute); font-size:12px; }
.st-status:empty { display:none; }
.st-status.warn { color:var(--warn); }
.st-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr)); gap:18px; }
.st-card { display:flex; flex-direction:column; min-width:0; position:relative; border:1px solid var(--edge); border-radius:var(--r); overflow:hidden; background:color-mix(in srgb,var(--bg-deep) 88%,var(--surface)); transition:border-color .15s; }
.st-card:hover { border-color:color-mix(in srgb,var(--accent) 60%,var(--edge)); }
.st-well { position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--edge); background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%); }
.st-still { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; pointer-events:none; transition:opacity .2s; }
.st-well .shopview { position:absolute; inset:0; height:auto; }
.st-card.is-live .st-still { opacity:0; }
.st-tier { position:absolute; top:12px; left:12px; border:1px solid var(--edge); border-radius:var(--r); background:color-mix(in srgb,var(--bg-deep) 85%,transparent); color:var(--fg-mute); padding:5px 8px; font-size:9px; letter-spacing:.07em; text-transform:uppercase; }
.st-tier.is-apex { color:var(--accent-hi); }
.st-preview-note { position:absolute; bottom:10px; right:10px; padding:5px 8px; background:color-mix(in srgb,var(--bg-deep) 80%,transparent); color:var(--fg-mute); font-size:10px; }
.st-body { display:flex; flex-direction:column; gap:8px; padding:19px 18px 18px; }
.st-card .st-name { margin:0; color:var(--fg); font:600 24px/1.12 var(--font-display,var(--font-ui)); text-transform:none; letter-spacing:.015em; overflow-wrap:anywhere; }
.st-growth-badge { margin:0; color:var(--accent-hi); font-size:10px; font-weight:600; letter-spacing:.05em; }
.st-meta { display:flex; align-items:center; gap:6px; margin:0; color:var(--fg-mute); font-size:11px; line-height:1.5; }
.st-diet { display:inline-flex; flex:none; color:var(--fg-mute); }
.st-sandbox { color:var(--warn); }
.st-buy { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.st-till { display:flex; align-items:stretch; gap:7px; min-width:0; }
.st-card .st-buy .st-price { display:flex; flex:1 1 auto; align-items:center; justify-content:flex-start; gap:8px; min-width:0; width:100%; padding:13px 12px; color:var(--fg); background:var(--surface); border-color:var(--accent); font:600 16px/1 var(--font-display,var(--font-ui)); letter-spacing:.02em; text-transform:none; }
.st-card .st-buy .st-price::after { content:'\203A'; margin-left:auto; opacity:.6; }
.st-price small { font:600 9px/1.2 var(--font-ui); letter-spacing:.04em; text-transform:uppercase; }
.st-price .st-star,.st-price .st-coin { display:inline-flex; flex:none; color:var(--accent-hi); }
.st-price b { font-variant-numeric:tabular-nums; }
.st-card .st-buy .st-price.st-prime { font-size:15px; border-color:color-mix(in srgb,var(--accent) 50%,var(--edge)); background:color-mix(in srgb,var(--accent) 9%,var(--bg-deep)); }
.st-price-locked { cursor:default; }
.st-price-locked::after { visibility:hidden; }
.st-signin { justify-content:center; width:100%; }
.st-till .price-edit { display:flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; border:1px solid var(--edge); border-radius:var(--r); background:transparent; color:var(--fg-mute); cursor:pointer; }
.st-till .price-edit:hover { color:var(--accent-hi); border-color:var(--accent); }
.st-till .price-input { width:100%; min-width:0; padding:10px; color:var(--fg); background:var(--bg-deep); border:1px solid var(--accent); font-variant-numeric:tabular-nums; }
.st-price.price-ok { border-color:var(--ok); }
.st-price.price-bad { border-color:var(--bad); }
.st-dialog { width:min(900px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--edge); border-radius:var(--r); color:var(--fg); background:var(--bg-deep); overflow:auto; }
.st-dialog::backdrop { background:color-mix(in srgb,var(--bg-deep) 80%,transparent); backdrop-filter:blur(6px); }
.st-dialog .st-panel { padding:28px; max-width:none; background:transparent; }
.st-panel h3 { margin:0; font:600 30px/1.15 var(--font-display,var(--font-ui)); color:var(--fg); }
.st-panel .buy-what { color:var(--fg-mute); font-size:12px; margin:10px 0 20px; line-height:1.7; }
.st-growth-row { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 24px; }
.st-growth-label { width:100%; margin:0; color:var(--fg-mute); font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.st-growth { flex:1 1 180px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--edge); background:var(--surface); color:var(--fg); cursor:pointer; }
.st-growth b { font-size:13px; }
.st-growth span { color:var(--fg-mute); font-size:11px; }
.st-growth[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg-deep)); }
.st-mutation-head { display:flex; flex-direction:column; gap:12px; padding:18px 0 12px; border-top:1px solid var(--edge); }
.st-mutation-title { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; }
.st-mutation-tools { display:flex; gap:13px; align-items:center; width:100%; }
.st-mutation-tools .st-mutation-search { width:100%; min-width:0; flex:1; padding:10px 12px; border:1px solid var(--edge); color:var(--fg); background:var(--surface); font-size:12px; }
.st-mutation-tools label { display:flex; align-items:center; gap:6px; flex:none; font-size:10px; color:var(--fg-mute); }
.st-mutation-tools input[type="checkbox"] { width:15px; height:15px; accent-color:var(--accent); }
.st-order-summary { padding:16px; border:1px solid var(--edge); color:var(--fg-dim); font-size:13px; line-height:1.6; }
.st-mutation-head b { font-size:14px; font-weight:600; }
.st-mutation-head span { font-size:11px; color:var(--accent-hi); }
.st-perks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.st-perks-note { grid-column:1/-1; margin:0 0 8px; color:var(--fg-mute); font-size:11px; line-height:1.7; }
.st-perk { display:block; text-align:left; padding:13px; border:1px solid var(--edge); border-radius:var(--r); background:var(--surface); color:var(--fg); cursor:pointer; }
.st-perk b { display:block; font-size:12px; margin:0 0 5px; }
.st-perk span,.st-perk small { display:block; font-size:10px; color:var(--fg-mute); line-height:1.5; }
.st-perk[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--bg-deep)); }
.st-perk[aria-pressed="true"] b { color:var(--accent-hi); }
.st-perk:disabled { cursor:default; }
.st-perk-nofit { opacity:.55; }
.st-perk-nofit small { color:var(--warn); margin-top:6px; }
.st-dialog .buy-lines { margin-top:23px; padding-top:18px; border-top:1px solid var(--edge); font-size:12px; }
.st-short { color:var(--warn); }
.st-receipt { color:var(--ok); }
.st-dialog .buy-actions { position:sticky; bottom:-28px; padding:17px 0 0; margin-top:16px; background:var(--bg-deep); }
.st-dialog #st-buy-confirm { color:var(--fg); background:var(--surface); border-color:var(--accent); }
.st-dialog .buy-error { font-size:12px; line-height:1.6; }
/* THE BODY SHELF (2026-09-14). A body has no specimen to walk, so its card
   wears a size plate in the well where an animal's picture stands - the same
   card, the same till and the same pencil as every animal on the shelf. */
.st-corpses { display:flex; flex-direction:column; gap:16px; }
.st-corpses-note { margin:0; text-align:center; color:var(--fg-mute); font-size:12px; line-height:1.6; }
.st-corpse-well { display:flex; align-items:center; justify-content:center; }
.st-corpse-size { color:var(--accent-hi); font:600 34px/1 var(--font-display,var(--font-ui)); letter-spacing:.04em; text-transform:uppercase; }
.st-corpse-why { margin:0; color:var(--fg-mute); font-size:11px; line-height:1.5; }
/* THE TWO MAIN CATEGORIES (2026-09-15). A wider, quieter row ABOVE the shelf
   filters, so the page reads top-down as category -> shelf -> cards. It draws
   only where the second category exists, so an owner who sells animals alone
   never meets these rules at all. */
.st-cats { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:26px 0 0; border:0; background:transparent; padding:0; }
.st-cats [role="tab"]::before { content:none; }
.st-cats .st-cat { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--edge); border-radius:999px; background:transparent; color:var(--fg-mute); font-size:12px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.st-cats .st-cat[aria-selected="true"] { color:var(--fg); border-color:var(--accent); background:var(--surface); }
/* THE DIET SHELF's mark is a Greek letter, not a word - it sits where the body
   shelf's size plate does and takes the same rule. */
.st-diet-glyph { font-size:40px; }
.st-dietshelf .st-diet-bundle .st-diet-glyph { font-size:27px; letter-spacing:.02em; }
.st-spin-bank { color:var(--fg-mute); font-size:11px; }
/* THE QUANTITY ROW in the buy dialog ("they choose how much"). */
.st-qty-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 2px; }
.st-qty-label { color:var(--fg-mute); font-size:11px; letter-spacing:.04em; text-transform:uppercase; margin-right:auto; }
.st-qty-step,.st-qty-max { padding:8px 13px; font-size:13px; line-height:1; }
.st-qty-input { width:88px; padding:9px 10px; border:1px solid var(--edge); border-radius:var(--r); background:var(--surface); color:var(--fg); font:inherit; font-size:14px; text-align:center; }
.st-grid[hidden],.st-corpses[hidden],.st-cats[hidden],.st-qty-row[hidden] { display:none!important; }
.st-modes[hidden],.st-bar[hidden],.st-shelves[hidden],.st-rail[hidden],.st-card[hidden],.st-till[hidden],.st-price-locked[hidden],.st-growth-row[hidden],.st-mutation-head[hidden],.st-still[hidden],.st-perk[hidden],.st-perks[hidden],.st-dialog .buy-lines[hidden] { display:none!important; }
@media (max-width: 720px) {
  main.st-page.section.wrap { padding-block:25px 45px; }
  .st-scene::before,.st-scene::after { background-position:center bottom; }
  .st-scene::after { background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 75%,transparent),var(--bg-deep)),var(--art-scene-store-phone,); }
  .st-modes { gap:8px; margin:24px 0; }
  .st-page .st-mode { padding:15px 12px; gap:10px; }
  .st-mode b { font-size:17px; }
  .st-mode small { font-size:9px; }
  .st-mode-count { display:none; }
  .st-mode-icon svg { width:17px; height:17px; }
  .st-controls { gap:10px; }
  .st-controls .st-shelves .st-filter { padding:8px; font-size:10px; }
  .st-count { font-size:9px; }
  .st-rail { width:100%; justify-content:space-between; }
  .st-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .st-body { padding:13px 11px; gap:6px; }
  .st-card .st-name { font-size:19px; }
  .st-corpse-size { font-size:22px; }
  .st-cats { margin-top:18px; }
  .st-cats .st-cat { padding:9px 13px; font-size:10px; }
  .st-diet-glyph { font-size:27px; }
  .st-dietshelf .st-diet-bundle .st-diet-glyph { font-size:19px; }
  .st-qty-input { width:72px; }
  .st-card .st-buy .st-price,.st-card .st-buy .st-price.st-prime { font-size:13px; padding:10px 8px; flex-wrap:wrap; gap:5px; }
  .st-price small { font-size:8px; }
  .st-card .st-buy .st-price::after { display:none; }
  .st-price .st-star,.st-price .st-coin { display:none; }
  .st-growth-badge { font-size:8px; }
  .st-meta { font-size:9px; }
  .st-tier { font-size:8px; padding:4px 6px; top:7px; left:7px; }
  .st-preview-note { font-size:8px; right:5px; bottom:5px; }
  .st-till .price-edit { width:29px; flex-basis:29px; }
  .st-dialog .st-panel { padding:19px; }
  .st-dialog .buy-actions { bottom:-19px; }
  .st-perks { gap:7px; }
  .st-perk { padding:10px; }
  .st-perk b { font-size:11px; }
  .st-mutation-head { align-items:flex-start; }
}
@media(max-width:360px) { .st-grid,.st-perks { grid-template-columns:1fr; } .st-mode-icon { display:none; } }
@media (prefers-reduced-motion: reduce) {
  .st-card,.st-mode,.st-still { transition:none; }
  .st-scene::after { animation: none; opacity: 1; }
}

/* The shop can be attached to sites with many enabled pages. Keep dense
   Haven navigation in its existing accessible menu instead of allowing its
   center column to overlap the brand or account. Viewport width alone is
   insufficient because the header container has its own maximum width. */
[data-site-theme="haven"] .nav-in:has(> .nav-links > a:nth-of-type(10)) {
  grid-template-columns: minmax(0, 1fr) auto auto;
  position: relative;
}
[data-site-theme="haven"] .nav-in:has(> .nav-links > a:nth-of-type(10)) > .nav-util {
  justify-self: end;
  order: 2;
}
[data-site-theme="haven"] .nav-in:has(> .nav-links > a:nth-of-type(10)) > .burger {
  display: block;
  order: 3;
}
[data-site-theme="haven"] .nav-in:has(> .nav-links > a:nth-of-type(10)) > .nav-links {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-self: stretch;
  gap: 0;
  padding: 10px 0 16px;
  border: 0;
  border-bottom: 1px solid var(--hv-line);
  border-radius: 0;
  background: var(--hv-scrim-92);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
[data-site-theme="haven"] .nav-in:has(> .nav-links > a:nth-of-type(10)) > .nav-links[data-open="true"] {
  display: flex;
}
[data-site-theme="haven"] .nav-in:has(> .nav-links > a:nth-of-type(10)) > .nav-links a {
  width: 100%;
  padding: 15px 30px;
  font-size: 13px;
  border-radius: 0;
}