/* ==========================================================================================
   /worth AS AN INVENTORY — the page-specific half.  ** PROTOTYPE, 2026-09-01 **

   Everything structural here builds on ui.css: .chest is the panel, .slot is the cell, the
   tooltip is the toolkit's. What lives in THIS file is only what one page needs and no other -
   the chart, the hotbar, the scrolling grid - which is exactly the split §3 of the plan asks
   for. If a rule in here would be useful to the wiki or the store, it is in the wrong file.
   ========================================================================================== */

/* ---------------------------------------------------------------------------- chart + hotbar */
.compare{position:relative; z-index:1}   /* NOT sticky - see rev 8 note */

.cmphead{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.cmpctl{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* A vanilla-GUI button group: bevelled, square, and pressed means sunken. */
.seg{display:inline-flex; gap:0}
.seg button{
  font-family:var(--pixel); font-size:var(--fs-2xs); letter-spacing:.5px;
  color:#2b2b2b; background:var(--btn); border:0; cursor:pointer;
  padding:9px 12px;
  box-shadow: inset 2px 2px 0 0 #FFFFFF, inset -2px -2px 0 0 #6a6a6a;
}
.seg button:hover{background:var(--btn-hover)}
.seg button[aria-pressed="true"]{
  background:#7d7d7d; color:#fff;
  box-shadow: inset 2px 2px 0 0 #4c4c4c, inset -2px -2px 0 0 #cfcfcf;
}
.mcinput{
  font-family:var(--sans); font-size:var(--fs-note); color:#1c1c1c;
  background:var(--btn); border:0; padding:9px 12px; min-width:220px;
  box-shadow: inset 2px 2px 0 0 #6a6a6a, inset -2px -2px 0 0 #FFFFFF;
}
.mcinput::placeholder{color:#5a5a5a}
.mcinput:focus{outline:3px solid #3aa7ff; outline-offset:-3px}

.chartbox{position:relative; background:#3A3A3A; box-shadow:inset 3px 3px 0 0 #232323, inset -3px -3px 0 0 #5a5a5a; padding:10px}
#chart{display:block; width:100%; height:340px}
.chartempty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--pixel); font-size:var(--fs-xs); color:#9a9a9a; margin:0; text-align:center; padding:0 20px;
}
.chartbox.has-data .chartempty{display:none}

/* The crosshair readout: what every plotted item was worth at the hovered hour. */
.readout{
  position:absolute; top:10px; left:10px; pointer-events:none;
  background:#100010f2; border:3px solid #2d0a63; box-shadow:0 0 0 3px #100010f2;
  padding:10px 12px; font-family:var(--pixel); font-size:var(--fs-2xs); line-height:1.9; color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.8);
}
.readout.right{left:auto; right:10px}
.readout .rrow{display:flex; align-items:center; gap:8px; white-space:nowrap}
.readout .sw{width:12px; height:12px; flex:0 0 12px}
.readout .rt{color:#8a8a8a; display:block; margin-bottom:6px}

/* THE HOTBAR. Nine slots, drawn a touch larger than a grid cell the way the game does. */
.hotbar{display:flex; gap:5px; flex-wrap:wrap}
.hotbar .slot{--size-n:calc(72 * var(--ui-scale)); cursor:pointer}
.hotbar .slot.empty{background:#8B8B8B}
.hotbar .slot.empty::after{
  content:attr(data-key); position:absolute; right:4px; bottom:2px;
  font-family:var(--pixel); font-size:var(--fs-2xs); color:#6f6f6f;
}
.hotbar .slot.over{outline:4px solid #3aa7ff; outline-offset:-4px}
/* The series colour is carried on the slot as a bottom bar, so the chart and the bar agree
   without needing a legend anywhere. */
.hotbar .slot .swatch{position:absolute; left:0; right:0; bottom:0; height:6px; z-index:3}

/* ---------------------------------------------------------------------------- the item grid */
/* Spacing comes from the shared rule in ui.css - a per-page override here is exactly
   how the three pages drifted apart in the first place. */
.grid-panel{}
.itemgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(52px * var(--ui-scale)), 1fr));
  gap:4px;
  padding:4px;      /* the well itself is the shared .well rule in ui.css */
}
.itemgrid .slot{--size-n:calc(52 * var(--ui-scale)); cursor:pointer; width:100%}
.itemgrid .slot.inbar{outline:4px solid var(--sel,#3aa7ff); outline-offset:-4px}
.itemgrid .slot[draggable="true"]{-webkit-user-drag:element}
.dim{color:#5a5a5a; font-family:var(--sans); font-size:var(--fs-note)}

/* The price under the name in the tooltip, and the 24h move beside it. */
.tip .px{display:block; color:#e8d98a; font-size:var(--fs-xs); margin-top:2px}
.tip .mv{font-size:var(--fs-2xs)}
.tip .mv.up{color:#7bf58c} .tip .mv.down{color:#ffb066} .tip .mv.flat{color:#8a8a8a}

@media (max-width:820px){ #chart{height:220px} }

/* Sprite-less items used to be discovered here, by letting the image fail. They are known from the
   art manifest now, and .slot.noart lives in ui.css with the rest of the atom - the tool explorer
   has the same items and had its own third answer to them. */

/* ---------------------------------------------------------------------------- custom range
   The presets cover the four windows a player asks for by name. The BRUSH covers the one they
   cannot name: drag across the graph and it zooms to exactly that window. */
.rangebar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 0; min-height:30px}
.rangehint{font-family:var(--sans); font-size:var(--fs-note); color:#4a4a4a}
.customrange{display:inline-flex; align-items:center; gap:10px}
/* A class rule beats the UA's [hidden]{display:none} at equal specificity, so the "Custom"
   chip was on screen from the moment the page loaded, before anyone had brushed anything. */
.customrange[hidden]{display:none}
.customrange .rlabel{
  font-family:var(--pixel); font-size:var(--fs-2xs); color:#fff; background:#3aa7ff;
  padding:5px 8px;
}
.customrange #rangetext{font-family:var(--sans); font-size:var(--fs-note); color:#2b2b2b}
.rclear{
  font-family:var(--pixel); font-size:var(--fs-2xs); color:#2b2b2b; background:var(--btn);
  border:0; cursor:pointer; padding:6px 9px;
  box-shadow: inset 2px 2px 0 0 #FFFFFF, inset -2px -2px 0 0 #6a6a6a;
}
.rclear:hover{background:var(--btn-hover)}
#chart{cursor:crosshair; touch-action:pan-y}
.brush{fill:rgba(58,167,255,.20); stroke:#3aa7ff; stroke-width:2}

/* Lifetime sales, in the tooltip under the price. */
.tip .sold{display:block; color:#9fd1ff; font-size:var(--fs-2xs); margin-top:4px}
.tip .sold b{color:#fff}
.tip .unproven{display:block; color:#e0a13f; font-size:var(--fs-2xs); margin-top:3px}

/* ==========================================================================================
   REV 35, 2026-09-02.
   ========================================================================================== */

/* THE PRICE ON THE TILE, where the game draws a stack count. Sans rather than pixel type: at a
   52px cell the pixel face has room for three characters and a price needs five. */
.itemgrid .slot .pricetag{
  position:absolute; right:3px; bottom:2px; z-index:3; pointer-events:none;
  font-family:var(--sans); font-size:11px; font-weight:800; line-height:1; color:#fff;
  text-shadow:1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 2px 0 #000;
  letter-spacing:-.2px;
}

/* CATEGORY CHIPS. One row of the same GUI buttons the sort segment uses, but wrapping, because
   nine of them do not fit a phone in one line. */
.catrow{display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px}
.catrow:empty{display:none}
.catchip{
  font-family:var(--sans); font-size:var(--fs-note); font-weight:600;
  color:#2b2b2b; background:var(--btn); border:0; cursor:pointer; padding:7px 12px;
  box-shadow: inset 2px 2px 0 0 #FFFFFF, inset -2px -2px 0 0 #6a6a6a;
}
.catchip:hover{background:var(--btn-hover)}
.catchip[aria-pressed="true"]{
  background:#7d7d7d; color:#fff;
  box-shadow: inset 2px 2px 0 0 #4c4c4c, inset -2px -2px 0 0 #cfcfcf;
}

/* MOVERS. Eight tiles: the item, its name, its price and its 24h move. */
.movers{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:8px}
.mover{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:12px;
  align-items:center; text-align:left; cursor:pointer; border:0; padding:8px 10px;
  background:var(--surface); color:var(--surface-ink);
  box-shadow:none;
}
.mover:hover{background:var(--surface-hover)}
.mover .slot{grid-row:1 / span 2; --size-n:calc(46 * var(--ui-scale))}
.mover .mname{font-family:var(--sans); font-size:var(--fs-note); font-weight:600; color:var(--surface-ink); grid-column:2; grid-row:1}
.mover .mpx{font-family:var(--sans); font-size:var(--fs-note); color:var(--surface-muted); grid-column:2; grid-row:2}
.mover .mv{grid-column:3; grid-row:1 / span 2; white-space:nowrap; font-family:var(--pixel); font-size:var(--fs-2xs); padding:6px 7px; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.mover .mname{overflow-wrap:break-word; hyphens:auto}
.mover .mv.up{background:#1f7a33} .mover .mv.down{background:#a04a12} .mover .mv.flat{background:#666}
.movers:empty::after{content:"Nothing has moved in the last day."; font-family:var(--sans); font-size:var(--fs-note); color:#4a4a4a}

/* PHONE. The sort segment spilled out of its panel at 390px; the search box was 220px minimum. */
@media (max-width:520px){
  .seg{flex-wrap:wrap}
  .mcinput{min-width:0; width:100%}
  .cmpctl{width:100%}
  .movers{grid-template-columns:1fr}
}

/* ==========================================================================================
   REV 36, 2026-09-03. Real axes, a detail panel, the economy strip, and share links.
   ========================================================================================== */

/* THE AXES. The svg is drawn at its real pixel size now (worth.js measures on every draw), so
   this is ordinary type at an ordinary size rather than something stretched by the panel. The
   tick colour is a step lighter than the old #9a9a9a: at 11px on the #3A3A3A ground that was
   under 3:1 and the hour labels were guesswork. */
#chart .axis{font-family:var(--sans); font-size:11px; fill:#b4b4b4}
#chart .axis.now{fill:#e8d98a}
#chart .gridline{stroke:rgba(255,255,255,.07); stroke-width:1}
#chart .axisline{stroke:rgba(255,255,255,.18); stroke-width:1}
#chart .zeroline{stroke:rgba(255,255,255,.30); stroke-width:2; stroke-dasharray:6 5}
#chart .nowline{stroke:rgba(232,217,138,.35); stroke-width:1; stroke-dasharray:3 4}

/* COPY LINK. The handler is ui.js's [data-ip] copier - the same one the home page's address
   slab uses - so this only has to look like the buttons beside it. .footcopy is the element
   that handler swaps to "copied", and it is coloured for the dark footer, so it is re-coloured
   here rather than in the shared file. */
.copylink{
  font-family:var(--pixel); font-size:var(--fs-2xs); letter-spacing:.5px;
  background:var(--btn); border:0; cursor:pointer; padding:9px 12px;
  box-shadow: inset 2px 2px 0 0 #FFFFFF, inset -2px -2px 0 0 #6a6a6a;
}
.copylink:hover{background:var(--btn-hover)}
.copylink .footcopy{color:#2b2b2b; font-family:var(--pixel); font-size:var(--fs-2xs)}

/* ---------------------------------------------------------------- how prices move
   Six figures, all of them read out of prices.json. */
/* Three across, two rows: six cards on an auto-fit grid came out five and a widow. */
.econ{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.estat{
  background:var(--surface); padding:16px;
  box-shadow:none;
}
.estat .ek{display:block; font-family:var(--sans); font-size:var(--fs-note); font-weight:600; color:var(--surface-muted)}
.estat .ev{display:block; font-family:var(--sans); font-size:var(--fs-md); font-weight:800; color:var(--surface-ink); margin:6px 0 2px}
.estat .esub{display:block; font-family:var(--sans); font-size:var(--fs-note); color:var(--surface-muted); line-height:1.55}

/* ---------------------------------------------------------------- one item, in full */
.detail-panel[hidden]{display:none}
/* NO ENTRY ANIMATION ON THIS ONE. ui.css fades every .wrap > .chest in with `panel-in`, which is
   the page settling on load - but this panel is display:none until someone clicks a tile, so its
   animation would start on the click instead, and it was screenshotted mid-fade at opacity 0.
   A panel that appears in response to a click should simply be there. */
.wrap > .detail-panel{animation:none}   /* the selector must out-specify `.wrap > .chest` */
.detailhead{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap}
.detailhead .dicon{flex:0 0 auto}
.dmeta{flex:1 1 220px; min-width:0}
.dname{font-family:var(--pixel); font-size:var(--fs-sm); color:var(--panel-ink); margin:2px 0 8px; line-height:1.5}
.dprice{font-family:var(--sans); font-size:var(--fs-lg); font-weight:800; color:#1c1c1c; margin:0}
.drank{font-family:var(--sans); font-size:var(--fs-note); color:#4a4a4a; margin:4px 0 0}
.dbtns{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start}
.dbtn{
  font-family:var(--pixel); font-size:var(--fs-2xs); letter-spacing:.5px;
  color:#fff; background:#3f7a46; border:0; cursor:pointer; padding:10px 12px;
  box-shadow: inset 2px 2px 0 0 #6fae76, inset -2px -2px 0 0 #24401f;
}
.dbtn:hover{background:#4a8c52}
.dbtn.ghost{color:#2b2b2b; background:var(--btn); box-shadow: inset 2px 2px 0 0 #FFFFFF, inset -2px -2px 0 0 #6a6a6a}
.dbtn.ghost:hover{background:var(--btn-hover)}

.dstats{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:6px; margin:16px 0 0}
.dstat{background:var(--well); padding:8px 10px; box-shadow:inset 2px 2px 0 0 var(--well-dark), inset -2px -2px 0 0 var(--well-lit)}
.dstat .dk{display:block; font-family:var(--sans); font-size:var(--fs-note); color:#3f3f3f}
.dstat .dv{display:block; font-family:var(--sans); font-size:var(--fs-md); font-weight:800; color:#1c1c1c; margin-top:2px}
.dstat .dv.up{color:#1f6b2c} .dstat .dv.down{color:#8a3a0c} .dstat .dv.flat{color:#4a4a4a}

/* The sparkline sits on the same dark ground as the chart, so the two read as the same picture
   of the same week. It carries no text of its own, which is why it may still be stretched. */
.dspark{margin:14px 0 0; background:#3A3A3A; padding:8px 10px;
        box-shadow:inset 3px 3px 0 0 #232323, inset -3px -3px 0 0 #5a5a5a}
.spark{display:block; width:100%; height:60px}
.dsparknote{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
            font-family:var(--sans); font-size:var(--fs-note); color:#b4b4b4; margin:6px 0 0}
.dnerf{font-family:var(--sans); font-size:var(--fs-note); color:#7a2e0c; background:#d8c4a8;
       padding:10px 12px; margin:14px 0 0; line-height:1.55;
       box-shadow: inset 2px 2px 0 0 #efe0cc, inset -2px -2px 0 0 #a58b6d}
.dunproven{font-family:var(--sans); font-size:var(--fs-note); color:#4a4a4a; margin:10px 0 0}

/* The tile whose panel is open, marked the way an in-bar tile is - a different colour so the
   two states are never confused with each other. */
.itemgrid .slot.open{outline:4px solid #ffe066; outline-offset:-4px}
.itemgrid .slot.inbar.open{outline-color:var(--sel,#3aa7ff); box-shadow:inset 0 0 0 8px rgba(255,224,102,.45)}

/* A catalogue with one selected item's graph and explicitly labelled sales windows. */
.pricepage{padding-top:40px}
.pricepage [hidden]{display:none !important}
.priceintro{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px 30px; margin:0 0 30px}
.priceintro h1{font-size:clamp(22px,3vw,32px); margin:0 0 12px; color:#eff7ed}
.priceintro p{margin:0; font-size:17px; color:#c1d1c3}
.priceintro .freshness{font-size:13px; color:#a7bba9}
.pricepage .chesttitle{font-size:16px; line-height:1.8; margin:0}
.highlightnote{font-size:14px; color:#425347; margin:0 0 18px}
.populargrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.popularitem,.itemcard{font-family:var(--sans); cursor:pointer; border:1px solid #45614c;
  color:#f0f7ed; background:#20372a; min-width:0; padding:20px 12px; display:flex;
  flex-direction:column; align-items:center; gap:10px; text-align:center; position:relative}
.popularitem:hover,.itemcard:hover{background:#2d4d38; border-color:#87c99a}
.popularrank{position:absolute; top:8px; left:10px; font-size:12px; color:#acd0b2}
.popularitem .slot{--size-n:56}
.popularname,.itemname{font-size:14px; font-weight:600; line-height:1.5; overflow-wrap:anywhere}
.popularname{min-height:42px; display:flex; align-items:center}
.popularsold{font-size:17px; font-weight:600; color:#9eebb0; margin-top:auto}
.popularprice{font-size:13px; color:#c5d7c8}
/* Player heads. A skin face is 8x8 pixels served scaled up; anything but nearest-neighbour turns
   it into a blur. The dark ground shows while the picture is still on its way. */
.head{display:block; flex:0 0 auto; image-rendering:pixelated; background:#1b2a20; border:1px solid #5f7d67}
.sellername{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.popularseller{display:flex; align-items:center; justify-content:center; gap:6px; max-width:100%; font-size:12px; color:#acd0b2}
.itemcard .cardseller{position:absolute; top:8px; right:8px; width:24px; height:24px}
.price-detail{scroll-margin-top:calc(var(--nav-height) + 20px)}
.wrap > .price-detail{animation:none}
.dprice span{font-size:15px; font-weight:400; color:#44534a}
.pricepage .dstats{grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0}
.pricepage .dstat{background:#b9c2b7; box-shadow:none; padding:12px; min-width:0}
.pricepage .dstat .dk{font-size:14px}.pricepage .dstat .dv{font-size:20px}
.dstat .dsub{display:block; font-family:var(--sans); font-size:13px; color:#3f3f3f; margin-top:4px}
.charttools{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0 16px}
.charttools .copylink{margin-left:auto}
.pricepage .seg button,.pricepage .dbtn,.pricepage .copylink,.pricepage .copylink .footcopy{
  font-family:var(--sans); font-size:14px; letter-spacing:0; min-height:44px; font-weight:600}
.pricepage .chartbox{background:#16251d; box-shadow:none; border:1px solid #4b6753; padding:12px}
.chartfoot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px}
.charthint{font-size:13px; color:#435548; margin:0}
.pricepage .chartempty{font-family:var(--sans); font-size:16px; color:#c5d7c8; padding:20px; text-align:center}
.cataloguecontrols{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:20px; margin:22px 0 18px}
.cataloguecontrols label{display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; color:#344f3d}
.cataloguecontrols .mcinput{width:100%; min-width:0; min-height:48px; box-shadow:none;
  border:1px solid #5f7865; background:#e1e6dd; padding:12px; font-family:var(--sans); font-size:16px; border-radius:0}
.pricepage .catchip{font-size:13px; min-height:40px; box-shadow:none; border:1px solid #9cae9e; background:#bbc8b9}
.pricepage .catchip[aria-pressed="true"]{background:#31503b; color:#fff; border-color:#31503b}
.pricepage .itemgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:12px; padding:0; background:none; box-shadow:none; margin-top:22px}
.itemcard{padding:18px 10px; gap:12px}
.itemcard.selected{border-color:#a9f7b5; outline:2px solid #a9f7b5; outline-offset:-3px}
.itemcard .itemprice{font-size:16px; font-weight:600; color:#b4ecbe; margin-top:auto}
.itemcard{padding-top:36px}
.detail-actions{display:flex; flex-wrap:wrap; gap:8px}
/* The podium under the stats: three rows, biggest seller first. */
.dsellers{margin:20px 0 0}
.dsellers h3{font-family:var(--sans); font-size:16px; margin:0 0 10px; color:#1c1c1c}
.sellerlist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.seller{display:grid; grid-template-columns:auto auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center;
  background:#b9c2b7; padding:12px; min-width:0}
.seller .sellerrank{grid-row:1 / 3; font-family:var(--sans); font-size:14px; font-weight:800; color:#3f3f3f}
.seller .head{grid-row:1 / 3}
.seller .sellername{font-family:var(--sans); font-size:17px; font-weight:800; color:#1c1c1c}
.seller .sellerunits{font-family:var(--sans); font-size:13px; color:#3f3f3f}
.sellersnote{font-family:var(--sans); font-size:14px; color:#3f3f3f; margin:0}
.earnings{border-top:1px solid #94a290; margin-top:26px; padding-top:24px}
.earnings-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-bottom:18px}
.earnings-head h3{font-size:20px; margin:0; color:#263d2e}
.earnings-head span{font-size:14px; color:#405445}
.rate-inputs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; max-width:540px; margin-bottom:20px}
.rate-inputs label{display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; color:#344f3d}
.rate-inputs .mcinput{width:100%; min-width:0; min-height:48px; box-shadow:none; border:1px solid #5f7865;
  background:#e1e6dd; padding:12px; font:16px var(--sans); border-radius:0}
.rate-inputs input[aria-invalid="true"]{border-color:#942f20}
.rate-error{font-size:14px; color:#86271c}
.rate-table{width:100%; table-layout:fixed; border-collapse:collapse; background:#233c2c; color:#eaf5e7; font-size:16px}
.rate-table th,.rate-table td{text-align:right; padding:13px 16px; border-bottom:1px solid #45604b; overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.rate-table th:first-child{width:23%; text-align:left}
.rate-table thead{font-size:13px; color:#b8d0bd}
.rate-table tbody th{font-size:14px; font-weight:400}
.rate-table td:last-child{color:#b3efbf; font-weight:600}
.rate-short{display:none}
.rate-table .rate-chosen{background:#365941; box-shadow:inset 3px 0 #9be7ad}
.earnings-note{font-size:13px; line-height:1.6; color:#445448; margin:12px 0 0}
@media(max-width:620px){
  .rate-table th,.rate-table td{padding:12px 8px}.rate-table{font-size:14px}.rate-inputs{gap:12px}
  .rate-table th:first-child{width:26%}.rate-table td:last-child,.rate-table thead th:last-child{width:44%}
  .rate-full{display:none}.rate-short{display:inline}
}
.pricepage .itemgrid .slot{--size-n:52; width:52px; height:52px; flex:0 0 52px; aspect-ratio:1}
.gridcount{font-size:14px; color:#425347}
.showmore{display:block; min-width:220px; margin:24px auto 0}
.clearfilters{color:#2c603a; font-family:var(--sans); font-size:14px; background:none; border:0; padding:8px 0;
  min-height:44px; text-decoration:underline; cursor:pointer}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
@media(max-width:1000px){.populargrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
  .pricepage{padding-top:26px}
  .populargrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .popularitem{padding:22px 10px 16px}
  .cataloguecontrols{grid-template-columns:minmax(0,1fr); gap:14px}
  .pricepage .itemgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .pricepage .dstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sellerlist{grid-template-columns:1fr}
  .charttools .copylink{margin:0}
  .charttools{gap:10px}
  .pricepage .seg button{padding:10px}
  .pricepage .detailhead .dmeta{flex-basis:140px}
}

@media (max-width:520px){
  .econ{grid-template-columns:1fr}
  .dstats{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .dbtns{width:100%}
  .dbtn{flex:1 1 auto}
  #chart{height:260px}
}