/* 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; }
/* THE FEATURED ANIMAL (store.mjs paintFeature, the posed-stills look of 2026-10-01). Its layout reached the owners'
   own copies by static drop (that fleet job's fleet_posed.css, not in this repo) and never this sheet, so a site
   built from the framework (test.sequencemods.com, 2026-10-06) drew the 900x675 still at its natural size with the
   name, the diet, the price and Buy now run together on one line under it. The fleet's layout in the house's terms
   (corners var(--r), role tokens, no drop shadow - the plate is in terminal.css's surface register): a 4:3 stage,
   the plate over its foot, the name above its facts with Buy beside them; from 980px the head is two columns and
   the animal stands beside the title, as the fleet's live pages show it. */
.st-feature { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; max-width:640px; margin:18px auto 0; }
.st-feature[hidden] { display:none!important; }
.st-feature-stage { position:relative; width:100%; aspect-ratio:4/3; background:radial-gradient(52% 46% at 50% 70%,color-mix(in srgb,var(--accent) 42%,transparent) 0%,color-mix(in srgb,var(--accent) 10%,transparent) 55%,transparent 75%); }
.st-feature-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.st-feature-plate { position:relative; display:flex; align-items:center; gap:16px; max-width:100%; margin-top:-44px; padding:12px 12px 12px 22px; border:1px solid var(--border-2,var(--edge)); border-radius:var(--r); background:color-mix(in srgb,var(--bg-deep) 90%,transparent); text-align:left; }
.st-feature-text { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.st-feature-name { color:var(--fg); font:400 var(--fs-5)/1 var(--font-display,var(--font-ui)); letter-spacing:.03em; overflow-wrap:anywhere; }
.st-feature-meta { margin-top:4px; color:var(--fg-mute); font-size:13px; }
.st-feature-act { flex:none; }
.st-feature-act:empty { display:none; }
.st-feature-buy { white-space:nowrap; }
@media (min-width:980px) {
  .st-hero.has-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:1fr auto auto auto auto 1fr; column-gap:40px; text-align:left; margin-bottom:10px; }
  .st-hero.has-feature > .st-eyebrow { grid-column:1; grid-row:2; justify-content:flex-start; }
  .st-hero.has-feature > .st-eyebrow i:first-child { display:none; }
  .st-hero.has-feature > .st-title { grid-column:1; grid-row:3; }
  .st-hero.has-feature > .st-lede { grid-column:1; grid-row:4; margin-left:0; }
  .st-hero.has-feature > .st-bar { grid-column:1; grid-row:5; justify-content:flex-start; }
  .st-hero.has-feature > .st-feature { grid-column:2; grid-row:1 / 7; max-width:none; margin:0; }
}
.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; }
/* A species with no posed still: the shop's dino mark, large and quiet on the well's glow (store.mjs). */
.st-silhouette { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6%; color:color-mix(in srgb,var(--fg-mute) 55%,transparent); pointer-events:none; }
.st-silhouette svg { width:46%; height:auto; max-height:78%; stroke-width:1.1; }
/* The diet chip on the picture (store.mjs dietChip) had no rule anywhere, so over a still it fell into the
   top-left as a bare icon above a word, across the animal's head. A small plate in the bottom-left corner:
   the tier owns top-left, the wishlist heart top-right. */
.st-diet-chip { position:absolute; left:10px; bottom:10px; z-index:1; display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--edge); border-radius:var(--r); background:color-mix(in srgb,var(--bg-deep) 82%,transparent); color:var(--fg-mute); font-size:9px; line-height:1; letter-spacing:.07em; text-transform:uppercase; }
.st-diet-chip .st-diet-ico { display:inline-flex; }
.st-diet-chip[data-diet="carnivore"] .st-diet-ico { color:var(--bad,var(--accent-hi)); }
.st-diet-chip[data-diet="herbivore"] .st-diet-ico { color:var(--good,var(--accent-hi)); }
.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; flex-wrap:wrap; gap:4px 6px; min-width:0; width:100%; padding:13px 10px; 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 8px/1.2 var(--font-ui); letter-spacing:.03em; 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)); }
/* A Prime pill says PRIME in words, so on the card its star and arrow give way and the price keeps its
   currency word on one line (Dino Hunters 2026-09-21: "Esmeraldas" was cut off). */
.st-card .st-buy .st-price .st-star,.st-card .st-buy .st-price:has(.st-star)::after { display:none; }
.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-feature-name { font-size:calc(var(--fs-5) * .78); }
  .st-feature-plate { gap:12px; padding:10px 10px 10px 16px; margin-top:-30px; }
  .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;
}