/* DnD HUB shop: forest backdrop, charcoal surfaces, selective gold accents.
   All styles are limited to the catalogue; shared character/commerce screens keep their theme. */
#hubModal.hub-modal:has(#shopRoot) {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: min(86dvh, calc(100dvh - var(--hub-modal-stage-top, 108px) - 20px), 920px) !important;
  height: min(86dvh, calc(100dvh - var(--hub-modal-stage-top, 108px) - 20px), 920px);
  overflow: hidden !important;
  background: linear-gradient(145deg, #171d1b, #101513) !important;
}
:is(#hubModal,#shopPage):has(#shopRoot) .hub-modal-head {
  min-height: 88px !important;
  padding: 22px 76px !important;
}
:is(#hubModal,#shopPage):has(#shopRoot) #hubModalBody {
  height: calc(100% - 88px);
  box-sizing: border-box;
  padding: 18px 24px 24px !important;
  overflow: hidden;
}
:is(#hubModal,#shopPage) .hub-shop {
  --shop-gold: #e8c784;
  --shop-muted: #b8beb8;
  --shop-line: #d5ded326;
  --shop-ink: #f4eee1;
  --shop-panel: #141b18;
  --shop-card: #232825;
  --shop-control: #101613;
  display: grid;
  grid-template-columns: 192px minmax(0, 1fr);
  gap: 24px;
  height: 100%;
  min-height: 0;
  color: var(--shop-ink);
  font: 14px/1.5 Inter, Arial, sans-serif;
}
.hub-shop *, .hub-shop *::before, .hub-shop *::after { box-sizing: border-box; }
:is(#hubModal,#shopPage) .hub-shop [hidden] { display: none !important; }
:is(#hubModal,#shopPage) .shop-sidebar { min-width: 0; overflow-y: auto; padding: 6px 16px 0 0; border-right: 1px solid var(--shop-line); }
:is(#hubModal,#shopPage) .shop-nav-label { margin: 0 0 12px 10px; color: #b9bdb2; font: 700 11px/1.3 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
:is(#hubModal,#shopPage) .shop-nav { display: grid; gap: 4px; }
:is(#hubModal,#shopPage) .shop-nav-button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 46px; padding: 10px 11px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; box-shadow: none;
  color: #d0d3ca; text-align: left; font: 14px/1.3 Arial, sans-serif;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
:is(#hubModal,#shopPage) .shop-nav-button:hover { background: #e8e9dc0d; color: #fff4d9; }
:is(#hubModal,#shopPage) .shop-nav-button[aria-pressed="true"] { background: linear-gradient(100deg, #d7b26424, #d7b2640d); border-color: transparent; box-shadow: inset 3px 0 0 #dbb765; color: #f0d398; font-weight: 700; }
:is(#hubModal,#shopPage) .shop-nav-symbol { width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0; opacity: .86; }
:is(#hubModal,#shopPage) .shop-nav-symbol svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:is(#hubModal,#shopPage) .shop-nav-count { margin-left: auto; padding: 2px 6px; min-width: 24px; border-radius: 5px; background: #f3eed70c; color: #c2c8bd; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
:is(#hubModal,#shopPage) .shop-nav-button[aria-pressed="true"] .shop-nav-count { color: #f0d398; background: #d7b26416; }
:is(#hubModal,#shopPage) .shop-currency { display: flex; align-items: center; gap: 8px; margin: 22px 8px 0; color: #a8af9b; font-size: 12px; }
:is(#hubModal,#shopPage) .shop-coin { display: inline-block; width: 12px; height: 12px; border: 1px solid #c99e48; border-radius: 50%; background: #b58b3933; box-shadow: inset 0 0 0 2px #232825; vertical-align: middle; flex-shrink: 0; }
:is(#hubModal,#shopPage) .shop-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
:is(#hubModal,#shopPage) .shop-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 188px auto; gap: 10px; flex-shrink: 0; }
:is(#hubModal,#shopPage) .shop-admin-db { min-height:44px; padding:9px 12px; border:1px solid #d5ded333; border-radius:8px; background:#202722; color:#d8d9cf; box-shadow:none; white-space:nowrap; font:700 13px/1.3 Arial,sans-serif; cursor:pointer; }:is(#hubModal,#shopPage) .shop-admin-db:hover{background:#2a322c;border-color:#aaa891}
:is(#hubModal,#shopPage) .hub-shop input, :is(#hubModal,#shopPage) .hub-shop select {
  width: 100%; min-width: 0; min-height: 44px; margin: 0;
  border: 1px solid #aab7a742; border-radius: 8px;
  background: var(--shop-control); color: #f0eee3; padding: 10px 12px;
  box-shadow: none; font: 14px/1.4 Arial, sans-serif;
}
:is(#hubModal,#shopPage) .hub-shop select { color-scheme: dark; cursor: pointer; padding-right: 22px; }
:is(#hubModal,#shopPage) .shop-search-wrap { position: relative; display: block; margin: 0; }
:is(#hubModal,#shopPage) .shop-search-wrap > svg { position: absolute; left: 14px; top: 14px; width: 17px; height: 17px; fill: none; stroke: #bac2b5; stroke-width: 1.6; pointer-events: none; }
:is(#hubModal,#shopPage) .shop-search-wrap input { padding-left: 41px; padding-right: 44px; }
:is(#hubModal,#shopPage) .shop-search-wrap input::placeholder { color: #aab3a4; opacity: 1; }
:is(#hubModal,#shopPage) .shop-clear { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; color: #d6d9cf; font: 22px/1 Arial, sans-serif; cursor: pointer; }
:is(#hubModal,#shopPage) .shop-mobile-category { display: none; margin: 0; }
:is(#hubModal,#shopPage) .shop-sort { margin: 0; }
:is(#hubModal,#shopPage) .shop-resale-note {
  display:flex; align-items:center; gap:9px; margin:11px 0 0; padding:8px 11px;
  border:1px solid #b89b5538; border-radius:8px; background:#b18d3412;
  color:#c8c8b8; font:12px/1.45 Arial,sans-serif; flex-shrink:0;
}
:is(#hubModal,#shopPage) .shop-resale-note b { color:#dfc27f; }
:is(#hubModal,#shopPage) .shop-resale-note strong { color:#efd498; font-weight:700; }
:is(#hubModal,#shopPage) .shop-resale-note-icon {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px;
  width:24px; height:24px; border:1px solid #b99a544d; border-radius:50%;
  color:#d7b96f; font:700 16px/1 Arial,sans-serif;
}
:is(#hubModal,#shopPage) .shop-section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 20px 0 12px; }
:is(#hubModal,#shopPage) .shop-section-heading h3 { margin: 0; color: #efd498; font: 700 26px/1.2 Georgia, serif; }
:is(#hubModal,#shopPage) .shop-result-count { color: var(--shop-muted); font-size: 13px; }
:is(#hubModal,#shopPage) .shop-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
:is(#hubModal,#shopPage) .shop-filter {
  min-height: 34px; padding: 7px 10px; border: 1px solid #ccd6c71c;
  border-radius: 6px; background: #151c18; color: #d0d3c8;
  box-shadow: none; font: 13px/1.3 Arial, sans-serif; cursor: pointer;
}
:is(#hubModal,#shopPage) .shop-filter[aria-pressed="true"] { color: #f7dca3; background: #54472e; border-color: #c4a86787; }
:is(#hubModal,#shopPage) .shop-quality-help { margin: 0 0 13px; font: 12px/1.5 Arial, sans-serif; color: var(--shop-muted); }
:is(#hubModal,#shopPage) .shop-results { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 2px 9px 4px 1px; scrollbar-width: thin; scrollbar-color: #947537 transparent; }
:is(#hubModal,#shopPage) .shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
:is(#hubModal,#shopPage) .shop-item {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; padding: 16px;
  /* A restrained rarity tint keeps the charcoal foundation readable. */
  --shop-rarity-base: #242825;
  --shop-rarity-wash: #b2bdb00d;
  --shop-rarity-glow: #b2bdb00a;
  --shop-rarity-frame: #75837664;
  --shop-rarity-hover: #a9b49c9c;
  --shop-rarity-mist: #bdc8c0;
  --shop-rarity-mist-opacity: .23;
  --shop-rarity-selected: #5b4b2d;
  --shop-rarity-selected-line: #bda264;
  --shop-rarity-selected-ink: #ffdf9e;
  border: 1px solid var(--shop-rarity-frame); border-radius: 12px;
  background:
    radial-gradient(ellipse 95% 78% at 93% 6%, var(--shop-rarity-wash), transparent 74%),
    linear-gradient(150deg, #ffffff08 0%, transparent 48%, #00000020 100%),
    var(--shop-rarity-base);
  box-shadow: 0 6px 18px #0003, inset 0 1px 0 #fff6de09, inset 0 0 42px var(--shop-rarity-glow);
  transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* One colourless, static texture is reused by every rarity. It fades away from
   the title and action row, never covers content or intercepts pointer input. */
:is(#hubModal,#shopPage) .shop-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; background-color: var(--shop-rarity-mist);
  opacity: var(--shop-rarity-mist-opacity);
  -webkit-mask: url('/assets/ui/shop-card-mist-v1.svg') center / 100% 100% no-repeat;
  mask: url('/assets/ui/shop-card-mist-v1.svg') center / 100% 100% no-repeat;
  transition: background-color .28s ease, opacity .28s ease;
}
:is(#hubModal,#shopPage) .shop-item-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 13px; align-items: center; }
:is(#hubModal,#shopPage) .shop-item-art { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #111713; color: #c7b78d; box-shadow: 0 2px 8px #0004; }
:is(#hubModal,#shopPage) .shop-item-art .artifact-icon-img, :is(#hubModal,#shopPage) .shop-item-art .artifact-icon-sprite { width: 64px; height: 64px; border-radius: 9px; margin: 0; transform: none; object-fit: contain; filter: none; }
:is(#hubModal,#shopPage) .shop-item-art svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:is(#hubModal,#shopPage) .shop-item-copy { min-width: 0; }
:is(#hubModal,#shopPage) .shop-item-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 6px 0 0; color: #c3c8bd; font: 12px/1.45 Arial, sans-serif; }
:is(#hubModal,#shopPage) .shop-item-rarity { display:inline-flex; align-items:center; gap:5px; padding:2px 5px; border:1px solid var(--shop-rarity-frame); border-radius:5px; background:#0d141766; color:var(--shop-rarity); font:11px/1 Arial,sans-serif; white-space:nowrap; }
:is(#hubModal,#shopPage) .shop-item h4 { margin: 0; color: #f6edd9; font: 700 19px/1.25 Georgia, serif; overflow-wrap: anywhere; }
:is(#hubModal,#shopPage) .shop-item-price { display: inline-flex; align-items: center; gap: 7px; color: #f1d28b; white-space: nowrap; font: 700 24px/1.15 Georgia, serif; font-variant-numeric: tabular-nums; }
:is(#hubModal,#shopPage) .shop-item-effect { margin: 14px 0 0; min-height: 21px; color: #e0e1d6; font: 14px/1.55 Arial, sans-serif; }
:is(#hubModal,#shopPage) .shop-item-note { margin: 8px 0 0; color: #c2c8bd; font: 13px/1.5 Arial, sans-serif; }
:is(#hubModal,#shopPage) .shop-variants { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d8dfcf1c; }
:is(#hubModal,#shopPage) .shop-variants-label { color: #bfc5b9; font-size: 13px; }
:is(#hubModal,#shopPage) .shop-variant-options { display: flex; gap: 2px; padding: 3px; border: 1px solid #c7d0c32b; border-radius: 8px; background: #151b17; }
:is(#hubModal,#shopPage) .shop-variant { min-width: 32px; min-height: 34px; padding: 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #d3d8cb; font: 700 13px/1 Arial, sans-serif; box-shadow: none; cursor: pointer; }
:is(#hubModal,#shopPage) .shop-variant[aria-pressed="true"] { border-color: var(--shop-rarity-selected-line); background: var(--shop-rarity-selected); color: var(--shop-rarity-selected-ink); box-shadow: inset 0 -2px 0 var(--shop-rarity-selected-line); }
:is(#hubModal,#shopPage) .shop-variant:hover, :is(#hubModal,#shopPage) .shop-filter:hover { border-color: #d4ba787d; color: #f4ddb0; }
:is(#hubModal,#shopPage) .hub-shop :is(button, input, select):focus-visible { outline: 2px solid #f0cf86; outline-offset: 3px; }
:is(#hubModal,#shopPage) .shop-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 32px 20px; text-align: center; border: 1px solid #a9b5a438; background: linear-gradient(145deg,#202722,#171e19); border-radius: 12px; }
:is(#hubModal,#shopPage) .shop-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; color: #bda878; }
:is(#hubModal,#shopPage) .shop-empty-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
:is(#hubModal,#shopPage) .shop-empty-state h4 { margin: 0 0 8px; color: #eddbb1; font: 700 22px/1.3 Georgia, serif; }
:is(#hubModal,#shopPage) .shop-empty-state p { margin: 0; color: var(--shop-muted); }
:is(#hubModal,#shopPage) .shop-reset { display: inline-block; margin-top: 18px; min-height: 44px; padding: 10px 16px; border: 1px solid #a8b49b59; border-radius: 7px; background: #283027; color: #f0d69c; cursor: pointer; }
:is(#hubModal,#shopPage) .shop-reset:hover { background: #343d30; border-color: #c3b884; }
.shop-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* A stable action row lets prices and purchase buttons line up across a row. */
/* The same selected product rarity powers the icon background, label and card theme.
   Avoid saturated full-card fills: tint the charcoal, rim and inner light only. */
:is(#hubModal,#shopPage) .shop-item:hover {
  border-color: var(--shop-rarity-hover);
  box-shadow: 0 8px 24px #0005, inset 0 1px 0 #fff6de0c,
    inset 0 0 48px var(--shop-rarity-glow), 0 0 18px var(--shop-rarity-glow);
}
:is(#hubModal,#shopPage) .shop-item { --shop-rarity: #bcc2b4; }
:is(#hubModal,#shopPage) .shop-item[data-rarity="uncommon"] {
  --shop-rarity: #b5d79d;
  --shop-rarity-base: #1c2b22;
  --shop-rarity-wash: #5bb95c2a;
  --shop-rarity-glow: #5ca95d0f;
  --shop-rarity-frame: #69926998;
  --shop-rarity-hover: #91c387;
  --shop-rarity-mist: #6fc574;
  --shop-rarity-mist-opacity: .45;
  --shop-rarity-selected: #34492f;
  --shop-rarity-selected-line: #94b67e;
  --shop-rarity-selected-ink: #e3f4d5;
}
:is(#hubModal,#shopPage) .shop-item[data-rarity="rare"] {
  --shop-rarity: #aecff4;
  --shop-rarity-base: #1b2834;
  --shop-rarity-wash: #4897ec2d;
  --shop-rarity-glow: #518fd515;
  --shop-rarity-frame: #668eb799;
  --shop-rarity-hover: #95bde8;
  --shop-rarity-mist: #579fe7;
  --shop-rarity-mist-opacity: .54;
  --shop-rarity-selected: #2c4358;
  --shop-rarity-selected-line: #8ab2da;
  --shop-rarity-selected-ink: #e0efff;
}
:is(#hubModal,#shopPage) .shop-item[data-rarity="epic"] {
  --shop-rarity: #dfb5f2;
  --shop-rarity-base: #292131;
  --shop-rarity-wash: #a85ae42f;
  --shop-rarity-glow: #a465d715;
  --shop-rarity-frame: #9866b499;
  --shop-rarity-hover: #c58de5;
  --shop-rarity-mist: #b56de8;
  --shop-rarity-mist-opacity: .56;
  --shop-rarity-selected: #4c345e;
  --shop-rarity-selected-line: #bc8bd8;
  --shop-rarity-selected-ink: #f4e6ff;
}
:is(#hubModal,#shopPage) .shop-item[data-rarity="legendary"] {
  --shop-rarity: #f1c68c;
  --shop-rarity-base: #302619;
  --shop-rarity-wash: #d5923833;
  --shop-rarity-glow: #d4953c16;
  --shop-rarity-frame: #c0935299;
  --shop-rarity-hover: #e6b66d;
  --shop-rarity-mist: #edaa4d;
  --shop-rarity-mist-opacity: .42;
  --shop-rarity-selected: #594126;
  --shop-rarity-selected-line: #d3a568;
  --shop-rarity-selected-ink: #fff0d5;
}
:is(#hubModal,#shopPage) .shop-item[data-rarity="special"] {
  --shop-rarity: #f0afb5;
  --shop-rarity-base: #2e2128;
  --shop-rarity-wash: #d8758d2b;
  --shop-rarity-glow: #cf637f13;
  --shop-rarity-frame: #c07b8999;
  --shop-rarity-hover: #e2a1b0;
  --shop-rarity-mist: #e28aa3;
  --shop-rarity-mist-opacity: .54;
  --shop-rarity-selected: #55323e;
  --shop-rarity-selected-line: #cf91a4;
  --shop-rarity-selected-ink: #ffe6ed;
}
:is(#hubModal,#shopPage) .shop-item-rarity::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--shop-rarity); flex: none; }
:is(#hubModal,#shopPage) .shop-item-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 14px; }
:is(#hubModal,#shopPage) .shop-item-footer:has(.commerce-purchase) { grid-template-rows: minmax(16px,auto) auto; }
:is(#hubModal,#shopPage) .shop-item-footer:has(.commerce-purchase) .shop-item-price { grid-row: 2; }
:is(#hubModal,#shopPage) .shop-item-footer .commerce-purchase { display: contents; }
:is(#hubModal,#shopPage) .shop-item-footer .commerce-incompatible { grid-column: 1 / -1; grid-row: 1; color: #d5b89f; font: 12px/1.35 Arial,sans-serif; }
:is(#hubModal,#shopPage) .shop-item-footer [data-commerce-buy] {
  grid-column: 2; grid-row: 2; width: auto; min-width: 100px; min-height: 44px; padding: 10px 14px;
  border: 1px solid #dfbf7d; border-radius: 7px;
  background: linear-gradient(180deg,#ead296,#cfac65); color: #271e0e;
  box-shadow: inset 0 1px 0 #fff3d14d, 0 2px 6px #0003;
  font: 700 14px/1.3 Arial,sans-serif; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
:is(#hubModal,#shopPage) .shop-item-footer [data-commerce-buy]:hover:not(:disabled) { background: linear-gradient(180deg,#f3deb0,#dfc17c); border-color: #f6dfa8; box-shadow: 0 3px 10px #0004; }
:is(#hubModal,#shopPage) .shop-item-footer [data-commerce-buy]:active:not(:disabled) { background: #c8a665; box-shadow: inset 0 2px 4px #4a371b40; }
:is(#hubModal,#shopPage) .shop-item-footer [data-commerce-buy]:disabled { opacity: 1; border-color: #74806b4d; background: #171e19; box-shadow: none; color: #a8b0a0; cursor: not-allowed; font-weight: 400; font-size: 13px; }

/* The account bar is a compact, quieter surface than the merchandise. */
:is(#hubModal,#shopPage) .hub-shop .commerce-shop { border: 1px solid #b4c0aa30; background: #131b17f5; color: #e9e8dd; box-shadow: 0 3px 12px #0002; }
:is(#hubModal,#shopPage) .commerce-shop-identity { min-width: 0; }
:is(#hubModal,#shopPage) .commerce-shop-identity > b { color: #f3ecda; font-size: 14px; overflow-wrap: anywhere; }
:is(#hubModal,#shopPage) .commerce-shop [data-commerce-balance] { display: inline-flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
:is(#hubModal,#shopPage) .commerce-balance-label { font-size: 12px; color: #b7c0b0; }
:is(#hubModal,#shopPage) .commerce-shop [data-commerce-balance] strong { font-size: 16px; color: #eed08c; }
:is(#hubModal,#shopPage) .hub-shop .commerce-suitable { gap: 9px; color: #d6d9cc; }
:is(#hubModal,#shopPage) #shopPlayerActions .commerce-suitable input { appearance: none; position: relative; flex: 0 0 20px; width: 20px; min-width: 20px; max-width: 20px; height: 20px; min-height: 20px; border: 1px solid #939e85; border-radius: 4px; background: #0d1510; cursor: pointer; }
:is(#hubModal,#shopPage) #shopPlayerActions .commerce-suitable input:checked { background: #dec181; border-color: #dec181; }
:is(#hubModal,#shopPage) #shopPlayerActions .commerce-suitable input:checked::after { content: ''; position: absolute; width: 5px; height: 9px; top: 3px; left: 6px; border: solid #282214; border-width: 0 2px 2px 0; transform: rotate(45deg); }
:is(#hubModal,#shopPage) .commerce-shop > a { color: #d2d9c9; text-underline-offset: 4px; }
:is(#hubModal,#shopPage) .commerce-shop > a:hover { color: #f1d499; }
:is(#hubModal,#shopPage) .commerce-shop [data-commerce-pending],
:is(#hubModal,#shopPage) .hub-shop .journal-open-shop { min-height: 40px; padding: 8px 12px; border: 1px solid #b4c0aa38; border-radius: 7px; background: #202922; color: #d6dccd; box-shadow: none; font: 600 13px/1.3 Arial,sans-serif; }
:is(#hubModal,#shopPage) .commerce-shop [data-commerce-pending]:hover,
:is(#hubModal,#shopPage) .hub-shop .journal-open-shop:hover { background: #2a342b; border-color: #9caa8d; }
:is(#hubModal,#shopPage) .hub-shop :is(input,select):hover { border-color: #8d9a7e; }
:is(#hubModal,#shopPage) .hub-shop .shop-filter:active { background: #3d3c2b; }
@media (prefers-reduced-motion: reduce) {
  :is(#hubModal,#shopPage) .hub-shop :is(button,.shop-item), :is(#hubModal,#shopPage) .shop-item::before { transition: none; }
}
@media (max-width: 1000px) {
  #shopPage .shop-filters { gap: 4px; }
  :is(#hubModal,#shopPage) .hub-shop { grid-template-columns: 155px minmax(0, 1fr); gap: 16px; }
  :is(#hubModal,#shopPage) .shop-sidebar { padding-right: 10px; }
  :is(#hubModal,#shopPage) .shop-item { padding: 14px; }
  :is(#hubModal,#shopPage) .shop-item-top { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  :is(#hubModal,#shopPage) .shop-item-art, :is(#hubModal,#shopPage) .shop-item-art .artifact-icon-img, :is(#hubModal,#shopPage) .shop-item-art .artifact-icon-sprite { width: 56px; height: 56px; }
  :is(#hubModal,#shopPage) .shop-item h4 { font-size: 18px; }
  :is(#hubModal,#shopPage) .shop-item-price { font-size: 22px; }
}
@media (max-width: 800px) {
  :is(#hubModal,#shopPage) .hub-shop { display: block; }
  :is(#hubModal,#shopPage) .shop-sidebar { display: none; }
  :is(#hubModal,#shopPage) .shop-main { height: 100%; }
  :is(#hubModal,#shopPage) .shop-mobile-category { display: block; }
  :is(#hubModal,#shopPage) .shop-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :is(#hubModal,#shopPage) .shop-search-wrap { grid-column: 1 / -1; }
  :is(#hubModal,#shopPage) .shop-admin-db { grid-column: 1 / -1; }
  :is(#hubModal,#shopPage) .shop-section-heading { margin-top: 15px; }
}
@media (max-width: 600px) {
  #hubModal.hub-modal:has(#shopRoot) { width: calc(100vw - 12px) !important; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px) !important; border-radius: 13px !important; }
  :is(#hubModal,#shopPage):has(#shopRoot) .hub-modal-head { min-height: 76px !important; padding: 19px 50px !important; }
  :is(#hubModal,#shopPage):has(#shopRoot) .hub-modal-head h2 { font-size: 19px !important; letter-spacing: .045em !important; gap: 0 !important; }
  :is(#hubModal,#shopPage):has(#shopRoot) .hub-modal-head h2::before, :is(#hubModal,#shopPage):has(#shopRoot) .hub-modal-head h2::after { display: none !important; }
  :is(#hubModal,#shopPage):has(#shopRoot) #hubModalBody { height: calc(100% - 76px); padding: 12px 11px 14px !important; }
  :is(#hubModal,#shopPage) .hub-shop input, :is(#hubModal,#shopPage) .hub-shop select { font-size: 16px; }
  :is(#hubModal,#shopPage) .shop-section-heading h3 { font-size: 21px; }
  :is(#hubModal,#shopPage) .shop-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :is(#hubModal,#shopPage) .shop-results { padding-right: 5px; }
  :is(#hubModal,#shopPage) .shop-item { padding: 16px; }
  :is(#hubModal,#shopPage) .shop-item-top { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  :is(#hubModal,#shopPage) .shop-item-art, :is(#hubModal,#shopPage) .shop-item-art .artifact-icon-img, :is(#hubModal,#shopPage) .shop-item-art .artifact-icon-sprite { width: 64px; height: 64px; }
  :is(#hubModal,#shopPage) .shop-item h4 { font-size: 20px; }
  :is(#hubModal,#shopPage) .shop-item-effect { min-height: 0; margin-top: 10px; font-size: 14px; }
  :is(#hubModal,#shopPage) .shop-variant { min-width: 44px; min-height: 44px; }
  :is(#hubModal,#shopPage) .shop-filter { min-height: 44px; padding: 9px; }
  :is(#hubModal,#shopPage) .shop-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  :is(#hubModal,#shopPage) .shop-filter { font-size:12px; white-space:normal; }
  :is(#hubModal,#shopPage) .shop-filter:first-child { grid-column:1/-1; }
  :is(#hubModal,#shopPage) .shop-variants-label { font-size: 12px; }
  :is(#hubModal,#shopPage) .shop-variants { margin-top: 10px; padding-top: 8px; }
  :is(#hubModal,#shopPage) .shop-quality-help { font-size: 11px; margin-bottom: 9px; }
  :is(#hubModal,#shopPage) .shop-resale-note { align-items:flex-start; margin-top:9px; padding:8px 9px; font-size:11px; }
  :is(#hubModal,#shopPage) .shop-resale-note-icon { flex-basis:22px; width:22px; height:22px; font-size:14px; }
}


/* /shop uses the same catalogue as the home tile, but occupies its own route. */
#hubModal.shop-route-page:has(#shopRoot){position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border-left:0!important;border-right:0!important}#hubModal.shop-route-page:has(#shopRoot) .hub-modal-head{min-height:76px!important;padding:18px 70px!important}#hubModal.shop-route-page:has(#shopRoot) #hubModalBody{height:calc(100% - 76px)!important;padding:20px max(24px,calc((100vw - 1240px)/2)) 24px!important}@media(max-width:600px){#hubModal.shop-route-page:has(#shopRoot) .hub-modal-head{padding:19px 50px!important}#hubModal.shop-route-page:has(#shopRoot) #hubModalBody{padding:12px 11px 14px!important}}


/* /shop is a native page, not a dialog: it shares the same shell as Classes. */
@media(min-width:801px){
  html:has(#shopPage:not(.hidden)){scrollbar-gutter:stable}
}
body:not(.hub-public-home)>main.wrap:has(>#shopPage:not(.hidden)){
  max-width:1400px;
  padding-top:12px!important;
}
#shopPage{position:relative;isolation:isolate;width:100%;min-height:0}
#shopPage::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#090f0bb3 0%,#090f0b73 65%,#090f0b1f 100%)}
/* Shop header keeps the shared ornament, but not the rectangular panel behind it. */
#shopPage .hub-classes-native-head{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
/* The native page has one document scrollbar. */
#shopPage .shop-results{
  scrollbar-width:thin;
  scrollbar-color:#b78b35 rgba(5,22,14,.34);
}
#shopPage .shop-results::-webkit-scrollbar{
  width:8px;
  height:8px;
}
#shopPage .shop-results::-webkit-scrollbar-track{
  background:rgba(12,18,14,.34);
  border-radius:999px;
}
#shopPage .shop-results::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#d1aa50,#9f7527);
  border:1px solid rgba(235,197,108,.22);
  border-radius:999px;
}
#shopPage .shop-results::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#e0bd68,#b48632);
}
#shopPage .hub-shop-page-body{
  width:100%;max-width:none;height:auto;
  margin:0 auto;padding:10px 12px 16px;
}
#shopPage .hub-shop{--shop-sidebar-width:180px;height:auto;min-height:0;align-items:start;grid-template-columns:minmax(0,1fr) var(--shop-sidebar-width);gap:20px}
#shopPage .shop-main{position:relative;isolation:isolate;grid-column:1;grid-row:1;height:auto;min-height:0;margin-top:var(--shop-main-offset,0px)}
/* A soft pool of shade follows the actual content, not the taller sidebar.
   The crossed masks dissolve every edge without adding a framed container. */
#shopPage .shop-main::before,#shopPage .shop-main::after{content:'';position:absolute;z-index:-1;pointer-events:none}
#shopPage .shop-main::before{
  inset:-24px -18px -32px;
  background:linear-gradient(160deg,#20201ba3,#101513c2 42%,#111610ad);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent),linear-gradient(180deg,transparent,#000 42px,#000 calc(100% - 54px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent),linear-gradient(180deg,transparent,#000 42px,#000 calc(100% - 54px),transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
#shopPage .shop-main::after{
  inset:0 0 auto;height:min(420px,100%);
  background:radial-gradient(ellipse 76% 88% at 48% 12%,#d3ad6f12,#a88b4e05 52%,transparent 82%);
}
/* One result gets a local pool of shade; the unused columns stay forest. */
#shopPage .shop-main:has(.shop-grid>.shop-item:only-child)::before{
  background:radial-gradient(ellipse 62% 84% at 18% 48%,#121814c7 15%,#151a1460 55%,transparent 90%);
}
#shopPage .shop-variants{flex-wrap:wrap}
#shopPage .shop-results{min-height:0;overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto;padding:2px 0 0}
#shopPage .shop-sidebar{
  grid-column:2;grid-row:1;position:sticky;top:var(--shop-sidebar-top,16px);z-index:2;
  width:var(--shop-sidebar-width);height:auto;max-height:none;margin:var(--shop-sidebar-offset,0px) 0 0;
  overflow:visible;padding:12px 8px;
  background:radial-gradient(ellipse at 20% 0,#c5a96d0a,transparent 62%),repeating-linear-gradient(118deg,#ded6b902 0 1px,transparent 1px 7px),linear-gradient(160deg,#20221ff5,#141714f5);
  border:1px solid #a4a39126;border-left-color:#b8a27038;border-radius:10px;
  box-shadow:0 8px 24px #0003,inset 0 1px 0 #cfb5720b;
}
#shopPage .shop-sidebar.shop-sidebar-flow{position:relative;top:auto}
#shopPage .shop-nav-label{margin:0 0 12px;padding:0 10px;color:#bfb292;font:700 11px/1.3 Georgia,serif;letter-spacing:.15em}
#shopPage .shop-nav-label::after{content:'';display:block;height:1px;margin-top:10px;background:linear-gradient(90deg,#c5a66470,#c5a66425 65%,transparent)}
#shopPage .shop-nav{gap:2px}
#shopPage .shop-nav-button{
  height:42px;min-height:42px;padding:0 10px;gap:8px;border:1px solid transparent;border-radius:6px;
  background:transparent;color:#c8c8bc;font:500 14px/1.25 Arial,sans-serif;box-shadow:none;text-shadow:none;
  transition:background-color .16s,color .16s,box-shadow .16s;
}
#shopPage .shop-nav-button:hover{background:#e2deca0b;color:#f2e6cb}
#shopPage .shop-nav-button[aria-pressed="true"]{background:linear-gradient(90deg,#b99b502b,#b99b500b);border-color:transparent;color:#ead6a7;font-weight:600;box-shadow:inset 2px 0 0 #cfb273}
#shopPage .shop-nav-button:active{background:#b99b501a}
#shopPage .shop-nav-button>span:nth-child(2){flex:1;min-width:0}
#shopPage .shop-nav-count{margin-left:0;min-width:22px;padding:2px 4px;border:0;border-radius:4px;background:#eeeeee08;color:#abb0a5;font:600 12px/1.2 Arial,sans-serif}
#shopPage .shop-nav-button[aria-pressed="true"] .shop-nav-count{color:#d9c696;background:#b99b5014}
#shopPage .shop-nav-symbol{width:16px;height:16px;color:#aca990;opacity:.85}
#shopPage .shop-nav-symbol svg{width:16px;height:16px}
#shopPage .shop-nav-button[aria-pressed="true"] .shop-nav-symbol{color:#ccb57d;opacity:1}
#shopPage .hub-classes-native-head{margin-bottom:10px!important}
#shopPage .shop-section-heading{align-items:center;gap:6px 12px;margin:18px 0 12px}
#shopPage .shop-section-heading h3{margin-right:auto}
#shopPage .shop-result-count strong{color:#dbd9cb;font-weight:600}
#shopPage .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#shopPage .shop-toolbar{grid-template-columns:minmax(0,1fr) 188px}
#shopPage .shop-toolbar:has(.shop-admin-db){grid-template-columns:minmax(0,1fr) 188px auto}
#shopPage .commerce-shop{gap:8px 20px;margin-bottom:12px;padding:10px 14px}
#shopPage .commerce-shop>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px}
#shopPage .commerce-suitable{font-size:13px}
#shopPage .commerce-shop>a{margin-left:auto;font-size:13px}
#shopPage .commerce-shop [data-commerce-balance]{white-space:nowrap}

/* The explanation stays available without taking a permanent toolbar row. */
:is(#hubModal,#shopPage) .shop-info{position:relative;color:var(--shop-muted);font-size:12px}
:is(#hubModal,#shopPage) .shop-info>summary{display:flex;align-items:center;min-height:36px;cursor:pointer;color:#c4c7ba;text-decoration:underline dotted;text-underline-offset:4px;list-style:none}
:is(#hubModal,#shopPage) .shop-info>summary::-webkit-details-marker{display:none}
:is(#hubModal,#shopPage) .shop-info>summary:focus-visible{outline:2px solid #efd49a;outline-offset:3px;border-radius:3px}
:is(#hubModal,#shopPage) .shop-info-body{position:absolute;right:0;top:100%;z-index:4;width:min(360px,calc(100vw - 44px));padding:14px;border:1px solid #65705c;border-radius:9px;background:#1e2720;box-shadow:0 8px 24px #0008;font-size:13px;line-height:1.5}
:is(#hubModal,#shopPage) .shop-info-body .shop-quality-help{margin:0 0 10px;font:inherit}
:is(#hubModal,#shopPage) .shop-info-body .shop-resale-note{display:block;margin:0;padding:0;border:0;border-radius:0;background:none;font:inherit}
:is(#hubModal,#shopPage) .shop-mobile-type{display:none;margin:0 0 10px}
:is(#hubModal,#shopPage) .shop-admin-short{display:none}
@media(max-width:1200px){
  #shopPage .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #shopPage .hub-shop{--shop-sidebar-width:176px;gap:16px}
}
@media(max-width:800px){
  :is(#hubModal,#shopPage) .shop-section-heading{position:relative}
  :is(#hubModal,#shopPage) .shop-info{position:static}
  #shopPage .hub-shop{display:block}
  #shopPage .shop-main::before{inset:-16px 0 -24px;mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent),linear-gradient(180deg,transparent,#000 30px,#000 calc(100% - 38px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent),linear-gradient(180deg,transparent,#000 30px,#000 calc(100% - 38px),transparent)}
  #shopPage .shop-main::after{height:min(300px,100%);opacity:.7}
  #shopPage .shop-toolbar,#shopPage .shop-toolbar:has(.shop-admin-db){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #shopPage .shop-toolbar:has(.shop-admin-db){grid-template-columns:repeat(2,minmax(0,1fr)) 64px}
  #shopPage .shop-toolbar:has(.shop-admin-db) .shop-search-wrap{grid-column:1/3;grid-row:1}
  #shopPage .shop-toolbar:has(.shop-admin-db) .shop-admin-db{grid-column:3;grid-row:1;padding:8px}
  #shopPage .shop-toolbar:has(.shop-admin-db) .shop-mobile-category{grid-column:1;grid-row:2}
  #shopPage .shop-toolbar:has(.shop-admin-db) .shop-sort{grid-column:2/-1;grid-row:2}
  #shopPage .shop-admin-short{display:inline}
  #shopPage .shop-admin-label{display:none}
  :is(#hubModal,#shopPage) .shop-mobile-type{display:block}
  :is(#hubModal,#shopPage) .shop-filters{display:none}
  #shopPage .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #shopPage .commerce-shop>div{flex:1;min-width:0}
  #shopPage .shop-price-unit{display:none}
  /* The category is already visible in the mobile picker. */
  #shopPage .shop-section-heading h3{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #shopPage .commerce-shop>a{order:2}
  #shopPage .commerce-suitable{order:3;width:100%;min-height:40px}
  #shopPage .commerce-shop [data-commerce-pending]{order:4}
}
@media(max-width:700px){
  body:not(.hub-public-home)>main.wrap:has(>#shopPage:not(.hidden)){padding:78px 10px 22px!important}
  #shopPage .hub-shop-page-body{height:auto;min-height:0;padding:8px 2px 12px}
  #shopPage .hub-shop{height:auto;min-height:0}
  #shopPage .shop-main{height:auto;min-height:0}
  #shopPage .shop-results{
    min-height:0;
    overflow:visible;
    overscroll-behavior:auto;
    scrollbar-gutter:auto;
    padding-right:0;
  }
}
@media(max-width:600px){
  #shopPage .shop-grid{grid-template-columns:minmax(0,1fr)}
  #shopPage .shop-section-heading{gap:0 10px;margin:10px 0 6px}
  #shopPage .commerce-shop{padding:8px 12px;margin-bottom:10px}
  #shopPage .shop-section-heading:has(.journal-open-shop){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:0 6px}
  #shopPage .shop-result-count{font-size:12px}
  #shopPage .hub-shop .journal-open-shop{padding:8px 6px;font-size:12px}
  #shopPage .shop-section-heading h3{font-size:20px}
  #shopPage .shop-info>summary{min-height:44px}
  #shopPage .shop-info-body{font-size:14px}
}