/* Product page (owner: product). Flat CSS (no nesting). Page-scoped classes: .pd-*, .viewer*, .fbar*, .tryon*.
   Geometry follows docs/references/skinaura-product-unified.png: viewer ≈62% | panel ≈35%, radius ≈28,
   wear strip of 5 equal tiles, instances card below. */

.pd { --pd-radius: 28px; --pd-gap: 16px; }
/* same header box as every inner page (56px, wordmark at the same y), so the logo never jumps between
   catalog and product; only the gap under it is tighter (the top composition starts right below) */
.pd .page-header { margin-bottom: -6px; }

/* ==========================================================================
   Top composition
   ========================================================================== */
.pd-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 34.6%, 500px);
  gap: var(--pd-gap);
  align-items: stretch;
}
/* the left half of the composition: the viewer island and, beside it, the sticker island (owner 2026-10-05).
   The sticker slot is empty for anything that cannot wear a sticker, and then takes no room at all. */
.pd-stage { display: flex; gap: var(--pd-gap); min-width: 0; align-items: stretch; }
.pd-viewer-slot { display: flex; flex: 1 1 auto; min-width: 0; }
.pd-viewer-slot > .viewer { flex: 1 1 auto; }
/* the island hugs its contents at the top of the stage instead of stretching to the viewer's height; when it
   really is taller (five stickers and a charm), its list scrolls rather than the composition growing */
.pd-stk-slot { display: flex; flex: none; align-items: flex-start; }
.pd-stk-slot:empty { display: none; }
.pd-stk-slot > .pd-stk { max-height: 100%; }

.pd-notice-slot:empty { display: none; }
.pd-notice { align-items: center; margin-bottom: 12px; padding: 6px 6px 6px 14px; }
.pd-notice p { flex: 1 1 auto; margin: 0; }
.pd-notice p span { color: inherit; opacity: .9; }
.pd-notice__close { flex: none; color: inherit; }

/* ==========================================================================
   Viewer panel (components/viewer/viewer.js)
   ========================================================================== */
.viewer {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 550px;
  border-radius: var(--pd-radius, 28px);
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #E9EEF6 0%, #E3E9F2 55%, #DEE5EF 100%);
  box-shadow: inset 0 0 0 1px rgba(25, 27, 32, .04);
  overflow: hidden;
  isolation: isolate;
}
.viewer__bar {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.viewer__bar > * { pointer-events: auto; }
.viewer__modes { padding: 3px; border-color: rgba(25, 27, 32, .06); box-shadow: 0 1px 2px rgba(25, 27, 32, .06), 0 6px 16px -8px rgba(25, 27, 32, .14); }
.viewer__modes .segmented__item { min-height: 34px; padding: 0 20px; font-size: var(--fs-sm); }
.viewer__modes .segmented__item::before { inset: -6px 0; }
.viewer__modes .segmented__item { transition-duration: var(--dur-med); }   /* 3D viewer controls: 220ms */
.viewer__fs {
  position: absolute;
  top: 0;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--ink-2);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.viewer__fs:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.viewer__fs:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.viewer__msg {
  position: absolute;
  top: 74px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(600px, calc(100% - 32px));
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  box-shadow: var(--shadow-1);
  transform: translateX(-50%);
}
.viewer__msg svg { flex: none; color: var(--accent-ink); }
.viewer__msg span { padding-right: 4px; }
/* the status message (3D unavailable / loading / error, hero view) gets its own band above the render
   instead of covering the item; the render scales into what is left */
.viewer.has-msg .viewer__stage { padding-top: 136px; }
.viewer__msg[data-tone='error'] { border-color: #EBC3C3; background: #FFF7F7; color: var(--danger); }
.viewer__msg[data-tone='error'] svg { color: var(--danger); }
.viewer__retry {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid currentColor;
  font-size: var(--fs-sm);
  font-weight: 600;
  position: relative;
}
.viewer__retry::before { content: ''; position: absolute; inset: -4px 0; }
.viewer__retry:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.viewer__stage {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 72px 32px 8px;
}
/* Side by side with the panel, the panel decides the height of the top composition: the stage takes no
   intrinsic height of its own and the render scales into whatever is left (otherwise the reserved
   3D-controls row, which wraps on narrower desktops, made the viewer taller than the panel). */
@media (min-width: 900px) {
  .viewer__stage { contain: size; }
}
.viewer__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  margin: 0;
}
/* soft contact shadow right under the render (a shadow, not a glow); it follows the image in every size */
.viewer__floor {
  flex: none;
  width: min(56%, 420px);
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 52, 78, .2), rgba(40, 52, 78, 0));
  pointer-events: none;
}
.viewer__img[hidden] + .viewer__floor,
.viewer__figure--framed .viewer__floor { display: none; }
.viewer__img {
  flex: 0 1 auto;
  min-height: 0;
  max-width: min(100%, 640px);
  max-height: calc(100% - 28px);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.viewer__img.is-loading { opacity: 0; }
.viewer__figure--framed .viewer__img {
  max-width: min(100%, 600px);
  max-height: 92%;
  border-radius: 18px;
  clip-path: inset(1px round 18px);   /* hides the 1px frame baked into the Dota art */
}
.viewer__img-error {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.viewer.has-3d .viewer__figure { visibility: hidden; }
.viewer__canvas { position: absolute; inset: 0; z-index: 1; }

/* «Скриншот»: our own sheet of this exact unit. It sits in the same stage as the picture and the 3D canvas,
   and the whole thing is one button — clicking it opens the sheet full screen (components/dialog.js). */
.viewer.has-sheet .viewer__figure { visibility: hidden; }
.viewer__sheet {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 72px 32px 8px;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.viewer__sheet-img {
  max-width: min(100%, 720px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  user-select: none;
  -webkit-user-drag: none;
}
/* the magnifier sits over the sheet's own corner, on the white caption strip, so it needs no plate of its own */
.viewer__sheet-zoom {
  position: absolute;
  right: 36px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  color: var(--ink-2);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.viewer__sheet:hover .viewer__sheet-zoom,
.viewer__sheet:focus-visible .viewer__sheet-zoom { opacity: 1; }
.viewer__sheet:focus-visible { outline: none; }
.viewer__sheet:focus-visible .viewer__sheet-img { box-shadow: var(--focus-ring), var(--shadow-2); }

/* Full screen, «как изображение PDF»: the sheet as large as the window allows, nothing cropped.
   The row is `minmax(0, 1fr)` of a dialog with a fixed height, so the picture box is a DEFINITE size and
   object-fit can letterbox inside it — a plain `max-height: 100%` resolves against an auto row and is ignored,
   which cut the caption strip off the bottom. */
.pd-sheet-dlg::backdrop { background: rgba(25, 27, 32, .72); }
.pd-sheet-dlg .dialog__body {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: 0 24px 24px;
  overflow: hidden;
}
/* the picture is stretched over the box and letterboxed by object-fit, rather than sized in per cent: a
   percentage height on an image inside a stretched grid item is not reliably resolved, and the caption strip
   got cropped off the bottom */
.pd-sheet { margin: 0; min-height: 0; position: relative; }
.pd-sheet__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* A phone holds a 3:2 sheet as a band across the middle of the window — the picture is centred in the dialog
   and given every pixel of its width; a modal <dialog> is pinned to inset:0 by the UA, so making the box hug
   the picture instead would mean unpinning it, which is not worth the trade. */
@media (max-width: 767.98px) {
  .viewer__sheet { padding: 64px 16px 8px; }
  .viewer__sheet-zoom { right: 20px; }
  .pd-sheet-dlg .dialog__body { padding: 0 8px 12px; }
}
.viewer3d__canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.viewer3d__canvas:active { cursor: grabbing; }
.viewer3d__canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* 3D controls row: the space stays reserved in every mode, so switching modes never shifts the image.
   It is always ONE row (a wrapped row doubled the reserved band at 1100–1300px): short labels on a
   narrower panel, and a sideways scroll as the last resort. */
.viewer { container: viewer / inline-size; }
.viewer__controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 6px 16px 16px;
}
.viewer__controls > * { flex: none; }
.viewer-ctl__short { display: none; }
.viewer:not([data-mode='3d']) .viewer__controls { visibility: hidden; }
.viewer--no3d .viewer__controls { display: none; }
.viewer-ctl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(25, 27, 32, .06);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(25, 27, 32, .06);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.viewer-ctl::before { content: ''; position: absolute; inset: -2px 0; }
.viewer-ctl svg { width: 18px; height: 18px; color: var(--ink-2); }
.viewer-ctl .viewer-ctl__chev { width: 16px; height: 16px; margin-left: 2px; }
.viewer-ctl:hover { border-color: var(--accent); color: var(--accent-ink); }
.viewer-ctl:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.viewer-ctl[aria-pressed='true'] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-ink); }
.viewer-ctl[aria-pressed='true'] svg { color: var(--accent-ink); }
.viewer-ctl[aria-disabled='true'] {
  background: rgba(255, 255, 255, .62);
  border-color: transparent;
  color: var(--ink-3);
  box-shadow: none;
  cursor: not-allowed;
}
.viewer-ctl[aria-disabled='true'] svg { color: var(--ink-3); }
.viewer-ctl[aria-disabled='true'][aria-pressed='true'] { background: rgba(255, 255, 255, .62); }
/* disabled-but-focusable controls (they explain themselves) keep a visible focus ring: the disabled rules above
   and the shared .btn[aria-disabled] rule both reset box-shadow, which would otherwise hide it */
.viewer-ctl[aria-disabled='true']:focus-visible,
.pd .btn[aria-disabled='true']:focus-visible,
.dialog--tryon .btn[aria-disabled='true']:focus-visible { box-shadow: var(--focus-ring); }
.viewer-ctl-group { display: inline-flex; gap: 0; }
.viewer-ctl--seg { border-radius: 0; }
.viewer-ctl--seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.viewer-ctl--seg:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; margin-left: -1px; }

.viewer-menu { position: relative; }
.viewer-menu__list {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  display: grid;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.viewer-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: var(--fs-base);
  text-align: left;
}
.viewer-menu__item svg { width: 16px; height: 16px; color: var(--accent-ink); visibility: hidden; }
.viewer-menu__item[aria-checked='true'] svg { visibility: visible; }
.viewer-menu__item:hover { background: var(--accent-tint); color: var(--accent-ink); }
.viewer-menu__item:focus-visible { outline: none; background: var(--accent-tint); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
/* narrow viewer panel (container queries come after the base control rules so they win) */
@container viewer (max-width: 799px) {
  .viewer__controls { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .viewer-ctl { padding: 0 12px; }
  .viewer-ctl__long { display: none; }
  .viewer-ctl__short { display: inline; }
  /* «Свет:» leaves the screen but stays in the name (the sun icon carries it visually) */
  .viewer-ctl[data-ctl='light'] .viewer-ctl__long {
    display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .viewer-ctl [data-light-label] { text-transform: capitalize; }
}
/* still too narrow: the row scrolls; the light menu can't pop out of a scroller, so it becomes a sheet */
@container viewer (max-width: 559px) {
  .viewer__controls { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .viewer__controls::-webkit-scrollbar { display: none; }
  .viewer-menu__list { position: fixed; left: 16px; right: 16px; bottom: 16px; }
}
/* the viewer isolates its own stacking context: while the menu is open, lift the whole panel so the sheet
   isn't painted under later positioned content (buttons below the viewer) */
.viewer:has(.viewer-menu__list:not([hidden])) { z-index: 20; }

.viewer__footer { position: relative; z-index: 2; padding: 0 24px 16px; }
.viewer__footer:empty { display: none; }

/* Fullscreen: native (:fullscreen) or the in-page fallback */
.viewer.is-fullscreen { border-radius: 0; min-height: 100vh; min-height: 100dvh; width: 100%; }
.viewer.is-fullscreen .viewer__img { max-width: min(100%, 1200px); }
.viewer.is-pseudo-fullscreen { position: fixed; inset: 0; z-index: 90; }
html.is-viewer-fullscreen { overflow: hidden; }
.viewer:fullscreen { border-radius: 0; }
.viewer::backdrop { background: #DEE5EF; }

/* Opaque art (Dota 2): the picture brings its own dark backdrop, so the stage is dark too (#1E2129, the
   catalog's art cards) and the art reads as the item, not as a screenshot pasted on a pale panel. */
.viewer--art {
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #252932 0%, #1E2129 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.viewer--art .viewer__fs { color: #C9CED8; }
.viewer--art .viewer__fs:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.viewer--art .viewer__img-error { color: #A9B0BC; }
.viewer--art .viewer__figure--framed .viewer__img { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7); }
.viewer--art .pd-styles__label { color: #C9CED8; }
.viewer--art .pd-style { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .04); color: #A9B0BC; }
.viewer--art .pd-style.is-open { border-color: rgba(141, 184, 255, .6); background: rgba(55, 129, 252, .18); color: #CFE0FF; }
.viewer--art .pd-styles__note { color: #A9B0BC; }
.viewer--art .pd-link { color: #9CC2FF; }
.viewer--art .pd-link:hover { color: #CFE0FF; }
.viewer--art .pd-link[aria-disabled='true'] { color: #8A909B; }
.viewer--art .pd-link:focus-visible { outline-color: #8DB8FF; }
.viewer--art.is-fullscreen,
.viewer--art::backdrop { background-color: #1E2129; }
.pd--dota2 .viewer--skeleton { background: linear-gradient(180deg, #252932 0%, #1E2129 100%); }
.pd--dota2 .viewer--skeleton .skeleton { background: rgba(255, 255, 255, .08); }

/* ==========================================================================
   Viewer footer: actions row (CS2) / styles (Dota)
   ========================================================================== */
.pd-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px clamp(16px, 2.2vw, 36px);
}
.pd-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border-radius: 8px;
  color: var(--accent-ink);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.pd-link svg { width: 18px; height: 18px; flex: none; }
.pd-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.pd-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-link[aria-disabled='true'] { color: var(--ink-3); cursor: not-allowed; text-decoration: none; }
.pd-link[aria-disabled='true'] svg { opacity: .8; }
.pd-link [data-tip]::after,
.pd-link[data-tip]::after { white-space: normal; width: max-content; max-width: 260px; text-align: center; }

.pd-styles { display: grid; justify-items: center; gap: 8px; margin-bottom: 4px; }
.pd-styles__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.pd-styles__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pd-style {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, .55);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.pd-style svg { width: 16px; height: 16px; }
.pd-style.is-open { border-style: solid; border-color: rgba(55, 129, 252, .45); background: var(--surface); color: var(--accent-ink); }
.pd-styles__note { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

/* ==========================================================================
   Sticker island (product/stickers.js, added 2026-10-05): right of the viewer
   island — which stickers and charm this unit wears, or plainly that it wears
   none, and what Маркет prices them at. Never over the weapon: its own slim
   island beside it, a strip under it once the composition stacks.
   ========================================================================== */
.pd-stk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 132px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.pd-stk__title {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* five stickers plus a charm are rare but legal: the list, not the page, scrolls then */
.pd-stk__list { flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.pd-stk__item {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px 5px;
  border-radius: 12px;
  background: var(--surface-2);
}
.pd-stk__img { width: 40px; height: 30px; object-fit: contain; }
.pd-stk__name { color: var(--ink); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.pd-stk__meta { color: var(--ink-3); font-size: 11px; line-height: 1.2; text-align: center; }
.pd-stk__price { color: var(--ink); font-size: var(--fs-xs); }
.pd-stk__sum { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; color: var(--ink-2); font-size: var(--fs-xs); }
.pd-stk__note { flex: none; margin: 0; color: var(--ink-3); font-size: 11px; line-height: 1.35; }
.pd-stk__empty { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.35; }

/* ==========================================================================
   Right panel
   ========================================================================== */
.pd-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 22px 8px;
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  container-type: inline-size;   /* the panel sizes its own content, not the viewport (the title: .pd-info__name) */
}
/* The title block (rebuilt 2026-10-05, revised 2026-10-06): the quality CHOOSER, the name as one sentence with
   the copy control at the end of it, the Steam name under it — and the Favorites heart in the corner, which
   left the button row. */
.pd-info__head { display: flex; align-items: flex-start; gap: 6px; }
/* the name column is the title's container, so the display face is sized by the room it really has (the heart
   takes ~50px of the panel) and never has to wrap under it */
.pd-info__name { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
/* the plain word, for an item with nothing to choose between (Dota 2, a case, a sticker) */
.pd-kind {
  margin: 0 0 7px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}
/* …and the chooser that replaces it wherever there IS a choice (owner 2026-10-06). It sits where the word sat,
   so the eye finds the quality in the same place whether it can be changed or not. */
/* full width with the segments sharing it: the panel column is ~370px on a 1024 screen, where three fixed-width
   segments ran past its right edge */
.pd-kind-pick { display: flex; width: 100%; margin: 0 0 10px; padding: 3px; }
.pd-kind-pick .segmented__item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  gap: 5px;
  font-size: var(--fs-sm);
  white-space: normal;
  line-height: 1.15;
}
.pd-kind-pick .segmented__item::before { inset: -5px 0; }   /* 34 + 2×5 = 44px hit height */
.pd-kind-pick__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: rgba(25, 27, 32, .08);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pd-kind-pick .segmented__item[aria-pressed='true'] .pd-kind-pick__n { background: rgba(8, 24, 64, .32); color: #FFFFFF; }

/* The name and the exterior as ONE sentence in ONE type (owner 2026-10-06), with the copy control at the end.
   The size follows the name column's width (cqi) and eases down for a long sentence (--pd-title-len = the whole
   sentence in characters, set by info.js); it stays well above the 2rem floor .oblique needs (base.css). */
.pd-title-line { display: flex; align-items: flex-end; gap: 4px; }
.pd-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 1rem + 1.9vw, 2.5rem);   /* fallback without container units */
  font-size: calc(clamp(1.75rem, 11cqi, 3rem) * min(1, 0.62 + 8 / var(--pd-title-len, 20)));
  line-height: .94;
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* the whole sentence slants as one block, on the baseline of its last line (as .not-found__title does) */
.pd-title__text { display: inline-block; padding: .06em 0 0; transform-origin: 0 100%; }
/* «AK-47 |» — the divider of the name, a mark between the weapon and the finish and not a letter of either */
/* the spaces around it are real text nodes, not margins: the mark itself is aria-hidden, so without them a
   screen reader would run «Керамбит» and «Волны» together into one word */
.pd-title__bar { color: var(--ink-3); }
/* the exterior closes the line — same face, same size, just a quieter ink so the item still reads first */
.pd-title__wear { color: var(--ink-2); }
/* the quality prefixes the name, in the game's own temper — the colours the catalog cards already mark
   StatTrak™ and Souvenir with (.pcard__mark--st / --sv in catalog.css); a Dota quality takes the quieter ink,
   because Dota has a dozen of them and a dozen colours in a heading would be noise */
.pd-title__kind--st { color: #9A4A00; }
.pd-title__kind--sv { color: var(--warning); }
.pd-title__kind--q { color: var(--ink-2); }
/* «Добавь значок копирования на английское имя»: the control sits on the English line, at the end of the very
   string it copies. (It falls back to the end of the heading when that heading already IS the Steam spelling
   and the English line is therefore not drawn.) */
.pd-copy { flex: none; width: 32px; min-width: 32px; height: 32px; margin: -6px 0; color: var(--ink-3); }
.pd-copy:hover { color: var(--accent-ink); }
.pd-title-line > .pd-copy { width: 38px; min-width: 38px; height: 38px; margin: 0 0 2px; }
.pd-hash {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.pd-hash__text { min-width: 0; overflow-wrap: anywhere; }
.pd-fav { flex: none; width: 44px; min-width: 44px; height: 44px; margin-top: -2px; color: var(--ink-2); }
.pd-fav svg { color: inherit; }
.pd-fav[aria-pressed='true'] { color: var(--accent); }

/* The parameters, above the price, ONE PER LINE (owner 2026-10-06: «Флот, тип, редкость, износ друг под другом
   написать»; «его [состояние] надо поднять над ценой. А флот надо показать тоже над ценой»). Label left, value
   right, hairline between — and the float's scale under its own row. Each lives here and nowhere else; see
   product/info.js facts(). */
.pd-facts { display: grid; margin: 16px 0 0; padding: 0; }
.pd-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.pd-fact:last-child { border-bottom: 1px solid var(--line); }
.pd-fact--scale + .pd-fact { border-top: 1px solid var(--line); }
.pd-fact__label { flex: none; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.3; }
.pd-fact__value {
  margin: 0;
  min-width: 0;
  text-align: right;
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
/* Float: the figure on the label's line, the scale on the line under it across the full width — the «ползунок»
   she asked for, whose bands are the exteriors, so it answers «Состояние» two rows down as well as its own
   number. The scale is the float row continued, so it carries no rule between them. */
.pd-fact--float { padding-bottom: 6px; }
.pd-fact--scale { display: block; padding: 0 0 10px; border-top: 0; }
.pd-fact--scale .pd-fact__value { display: block; text-align: left; font-weight: 400; }
.pd-float { display: grid; gap: 5px; }
.pd-float__range { justify-self: end; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.pd-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot, #8A8F99);
  box-shadow: inset 0 0 0 1px rgba(25, 27, 32, .18);
}
.pd-dot--lg { width: 16px; height: 16px; }
.pd-dotval { display: inline-flex; align-items: center; gap: 8px; }

/* The price is the loudest thing on the panel (owner 2026-10-06: «Как-то выделить цену и показать, что оно там
   на минус столько-то процентов дешевле, чем в Steam»): it gets a tinted plate of its own, the figure keeps the
   display size, and the saving is a SOLID green pill rather than a tinted one. */
.pd-buy { margin-top: 16px; }
.pd-price-plate {
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}
/* «2 390 ₽ · в Steam 3 150 ₽ ↗ · −24 %» (product/price.js) */
.pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.pd-price__value {
  font-size: clamp(2.25rem, 1.2rem + 2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
}
.pd-price__value--none { font-size: var(--fs-2xl); letter-spacing: -.01em; color: var(--ink-2); line-height: 1.6; }
/* Steam's number and the badge travel together: when the panel is too narrow for one line, the pair drops
   under our price instead of the badge alone */
.pd-price__vs { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pd-steam { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ink-2); font-size: var(--fs-base); }
.pd-steam__value { color: var(--ink-2); font-size: var(--fs-md); }
/* the way out to the very item on the Steam marketplace (owner: «такой значок, типа переход») */
.pd-steam--link { position: relative; color: var(--accent-ink); text-decoration: none; border-radius: 8px; }
.pd-steam--link .pd-steam__value { color: inherit; }
.pd-steam--link .icon { align-self: center; color: inherit; }
.pd-steam--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-steam--link::before { content: ''; position: absolute; inset: -6px -4px; }   /* 44px-tall hit area */
.pd-steam--link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* how much is not overpaid — the one green thing on the panel, and now a solid one */
.pd-saving {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--success);
  color: #FFFFFF;
  font-size: var(--fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* what the Steam figure is not: a converted number, a stale one, or one that leaves this copy's extras out */
.pd-price__note { margin: 7px 0 0; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; }
.pd-buy__main { margin-top: 12px; min-height: 50px; }
.pd-buy__reason { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
/* «В корзину» under «Купить сейчас»; a long label wraps inside the button instead of running past its border */
.pd-buy__cart { margin-top: 10px; min-height: 48px; padding: 4px 12px; white-space: normal; line-height: 1.15; }
/* pressed = «in the cart»: the label stays «В корзину» (toggle pattern), the state shows as tint + check */
.pd-buy__cart[aria-pressed='true'] { --btn-bg: var(--accent-tint); }

.pd-specs {
  margin-top: 12px;
  padding: 2px 16px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.pd-specs .spec-list__row { flex-wrap: wrap; align-items: baseline; padding: 6px 0; font-size: var(--fs-base); line-height: 1.3; }
.pd-specs .spec-list dd { margin-left: auto; font-weight: 600; }   /* stays right-aligned when a long value wraps under its label */
/* (the float scale and the exterior used to sit here, under «В корзину». They are parameters above the price
   since 2026-10-06 — «вот это тоже надо убрать» — see .pd-fact--float.) */
.spec-list__row--stack { display: grid; gap: 6px; }
.spec-list__row--stack dd { text-align: left; }
.pd-specs--empty { padding: 14px 16px; color: var(--ink-2); font-size: var(--fs-sm); }
/* transfer status + «Условия передачи →» share one compact line under the specs (reference rhythm) */
.pd-transfer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  margin-top: 4px;
  padding: 0 4px 0 16px;
}
.pd-transfer { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; color: var(--success); font-size: var(--fs-sm); font-weight: 600; }
.pd-transfer svg { flex: none; }
.pd-transfer.is-protected { color: var(--warning); }
.pd-transfer.is-within { color: var(--accent-ink); }   /* «до 12 часов»: hourglass, brand ink blue */
/* compact visual line like the reference; the ::before keeps the 44px hit target */
.pd-transfer-link { position: relative; min-height: 30px; margin-left: auto; }
.pd-transfer-link::before { content: ''; position: absolute; inset: -7px -6px; }

.pd-setlist,
.pd-gems { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; font-weight: 500; color: var(--ink-2); }
.pd-gems li { display: grid; }
.pd-gems__val { color: var(--ink-3); font-size: var(--fs-xs); }

/* Float bar: five segments sized by the real intervals, separated by 2px gaps. Unreachable parts are
   hatched (clearly darker than the card), the reachable range is light blue, the current wear's range is
   solid accent, and the marker is ink with a ring. */
.fbar { display: grid; gap: 3px; }
.fbar__track { position: relative; display: flex; gap: 2px; height: 10px; }
.fbar__seg {
  position: relative;
  min-width: 0;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, #C6CAD1 0 2px, #E9EBEE 2px 5px);
  overflow: hidden;
}
.fbar__range { position: absolute; top: 0; bottom: 0; background: #9CC0FF; }
.fbar__seg.is-current .fbar__range { background: var(--accent-strong); }
.fbar__marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.fbar__codes { display: flex; gap: 2px; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--ink-3); line-height: 14px; }
/* each code is a container: a segment too narrow for its label hides it (the current one always shows) */
.fbar__code { min-width: 0; text-align: center; container-type: inline-size; }
.fbar__code > span { display: block; white-space: nowrap; }
.fbar__code.is-current { color: var(--accent-ink); }
@container (max-width: 21px) {
  .fbar__code:not(.is-current) > span { visibility: hidden; }
}

/* ==========================================================================
   Variant strip (wear FN…BS / Dota quality)
   ========================================================================== */
.pd-variants { margin-top: var(--pd-gap); }
/* five equal tiles like the reference; Dota qualities use the same grid (one quality = one tile, not a banner) */
.pd-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pd-tile {
  display: block;
  container-type: inline-size;   /* narrow tiles re-flow their content (below) */
  min-height: 78px;
  padding: 11px 14px 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.pd-tile__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'label code' 'meta meta';
  align-content: start;
  gap: 3px 10px;
}
.pd-tile__label { grid-area: label; font-size: var(--fs-base); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.pd-tile__code {
  grid-area: code;
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pd-tile__swatch { grid-area: code; width: 16px; height: 16px; margin: 3px 2px 0 0; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(25, 27, 32, .2); }
.pd-tile__meta { grid-area: meta; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pd-tile:hover { border-color: #B4BAC4; background: var(--surface-2); }
.pd-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pd-tile.is-selected { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.pd-tile.is-selected:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--focus-ring); }
.pd-tile.is-selected .pd-tile__code { background: #D3E3FF; color: var(--accent-ink); }
.pd-tile.is-out-of-stock .pd-tile__meta { color: var(--ink-3); }
.pd-tile.is-not-exist {
  border-style: dashed;
  border-color: var(--line-strong);
  background: rgba(239, 239, 236, .7);
  color: var(--ink-3);
  cursor: not-allowed;
}
.pd-tile.is-not-exist .pd-tile__label,
.pd-tile.is-not-exist .pd-tile__meta { color: var(--ink-3); }
.pd-tile.is-not-exist .pd-tile__code { background: transparent; color: var(--ink-3); }
.pd-tile.is-not-exist:hover { background: rgba(239, 239, 236, .7); border-color: var(--line-strong); }
/* Narrow tiles (tablet / phone strip, ~150px): a long word such as «Поношенное» no longer fits beside the
   code badge, so the badge floats top-right and the label wraps around it (or drops below it) instead of
   running underneath. */
@container (max-width: 151px) {
  .pd-tile__in { display: block; }
  .pd-tile__code,
  .pd-tile__swatch { float: right; margin: 0 0 4px 8px; }
  .pd-tile__label { display: block; text-wrap: wrap; }
  .pd-tile__meta { display: block; clear: both; margin-top: 3px; }
}

/* ==========================================================================
   Instances
   ========================================================================== */
.pd-inst {
  margin-top: 18px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.pd--no-variants .pd-inst { margin-top: var(--pd-gap); }
.pd-inst__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
/* the titles yield first (the sub line may wrap), so three flavor buttons + float + sort stay on the
   title row at 1440–1536 instead of dropping the whole toolbar to a second row */
.pd-inst__titles { flex: 1 1 260px; min-width: 0; }
.pd-inst__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 1vw, 2.25rem);
  line-height: .95;
  letter-spacing: 0;
  color: var(--ink);
}
.pd-inst__title .oblique { transform-origin: 0 100%; }
.pd-inst__sub { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-base); }
.pd-inst__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* (the flavour switch used to be the first thing in this row. It is the chooser above the NAME since
   2026-10-06 — .pd-kind-pick — and the choice made there is what this table shows.) */
.pd-ffilter { display: flex; align-items: center; gap: 8px; }
.pd-ffilter__label { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.pd-ffilter__in { width: 84px; font-size: var(--fs-sm); }
.pd-ffilter__sep { color: var(--ink-3); }
.pd-ffilter__err { margin-top: 8px; text-align: right; }
.pd-ffilter__err:empty { margin: 0; }   /* always present (live region), takes no room while valid */
.pd-sort { display: flex; align-items: center; gap: 8px; }
.pd-sort__label { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.pd-sort__select { width: auto; min-width: 140px; font-size: var(--fs-sm); }
.pd-inst__status:empty { display: none; }
.pd-inst__hidden { align-items: center; margin-top: 12px; }
.pd-inst__hidden .link-btn { margin-left: auto; min-height: 32px; }
.pd-inst__empty { margin-top: 14px; border-radius: 16px; background: var(--surface-2); }
.pd-inst__empty .state__title { font-size: var(--fs-lg); }

/* position: relative makes the wrapper the containing block of the absolutely positioned (visually hidden)
   cell labels, so they stay inside its horizontal scroll instead of widening the page (1024px: +21px) */
.pd-table-wrap { position: relative; margin-top: 14px; overflow-x: auto; scrollbar-width: thin; }
.pd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
/* reference rhythm: 36px header, ≈44px rows with 36px row buttons (hit targets stay 44px via ::before) */
.pd-table th {
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-align: left;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pd-table th:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.pd-table th:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.pd-table td {
  height: 46px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pd-table tbody tr:last-child td { border-bottom-color: transparent; }
.pd-row { cursor: pointer; }
.pd-row:hover td { background: var(--surface-2); }
.pd-row.is-selected td {
  background: var(--accent-tint);
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.pd-row.is-selected td:first-child { border-radius: 12px 0 0 12px; box-shadow: inset 1px 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.pd-row.is-selected td:last-child { border-radius: 0 12px 12px 0; box-shadow: inset -1px 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.pd-row.is-unavailable { cursor: default; }
.pd-row.is-unavailable td { color: var(--ink-3); }
.pd-row.is-unavailable:hover td { background: transparent; }
.pd-table .c-sel { width: 44px; padding-left: 12px; padding-right: 4px; }
.pd-table td.c-price { font-size: var(--fs-base); }
.pd-table .c-actions { width: 1%; }
.pd-muted { color: var(--ink-3); }

.pd-radio {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--line-control);   /* WCAG 1.4.11: ≥3:1 control boundary (shell token) */
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.pd-radio::before { content: ''; position: absolute; inset: -13.5px; }   /* 17px inside the border + 27 = 44 */
.pd-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-strong); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.pd-radio:checked { border-color: var(--accent-strong); }
.pd-radio:checked::after { transform: scale(1); }
.pd-radio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pd-radio:disabled { background: var(--surface-sunken); border-color: var(--line); cursor: not-allowed; }

.pd-chip3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid #D5E3FB;
  border-radius: 10px;
  background: #F4F8FF;
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.pd-chip3d::before { content: ''; position: absolute; inset: -7px -5px; }   /* 30px inside the border + 14 = 44 */
.pd-chip3d:hover { background: var(--accent-tint); border-color: var(--accent); }
.pd-chip3d:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* no model: visible but plainly off (neutral, not the blue «available» chip) */
.pd-chip3d.is-off,
.pd-chip3d.is-off:hover { background: var(--surface-sunken); border-color: transparent; color: var(--ink-3); cursor: not-allowed; }
.pd-chip3d.is-off svg { opacity: .75; }
.pd-chip3d[data-tip]::after { white-space: normal; width: max-content; max-width: 220px; text-align: center; }

.pd-transfer-cell { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 500; }
.pd-transfer-cell.is-protected { color: var(--warning); }
.pd-transfer-cell.is-within { color: var(--accent-ink); }
.pd-row.is-unavailable .pd-transfer-cell { color: var(--ink-3); }
.pd-exts { display: inline-flex; align-items: center; gap: 2px; }
.pd-ext { display: inline-grid; place-items: center; width: 34px; height: 28px; border-radius: 6px; background: var(--surface-2); }
.pd-ext img { width: 30px; height: 22px; object-fit: contain; }
.pd-styles-mini { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pd-styles-mini__pip { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); }
.pd-styles-mini__pip.is-open { background: var(--accent); border-color: var(--accent); }
.pd-styles-mini > span:last-child { margin-left: 4px; font-size: var(--fs-xs); }
.pd-gems-mini { display: grid; gap: 1px; font-size: var(--fs-xs); color: var(--ink-2); white-space: normal; max-width: 260px; }

/* 38px buttons keep the reference row rhythm; the ::before is measured from inside the 1px border:
   36 + 2×4 = 44px hit height, and with the 8px gap neighbouring hit areas just touch */
.pd-row-actions { display: flex; align-items: center; gap: 8px; }
.pd-row-actions .btn { min-height: 38px; }
.pd-row-actions .btn--sm::before { inset: -4px; }
.pd-row-actions .btn.btn--icon.btn--sm { width: 44px; min-width: 44px; }
.pd-row-buy { min-width: 120px; }
.pd-row-na { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 38px; color: var(--ink-3); font-size: var(--fs-xs); }
.pd-row-actions .btn--icon[aria-pressed='true'] { --btn-fg: var(--accent-ink); --btn-bd: var(--accent); --btn-bg: var(--accent-tint); }

.pd-sticky { display: none; }   /* phones only: the compact sticky Buy (mobile media query below) */

/* ==========================================================================
   States, skeleton
   ========================================================================== */
.pd-state { margin-top: 16px; padding: 72px 24px; }
.viewer--skeleton { display: grid; place-items: center; gap: 16px; align-content: center; }
.viewer--skeleton .pd-skel-modes { position: absolute; top: 18px; left: 50%; width: 244px; height: 40px; border-radius: 999px; transform: translateX(-50%); background: rgba(255, 255, 255, .7); }
.pd-skel-media { width: min(60%, 520px); aspect-ratio: 4 / 3; border-radius: 24px; background: rgba(255, 255, 255, .5); }
.pd-info--skeleton { gap: 10px; }
.pd-skel-kind { height: 14px; width: 92px; border-radius: 7px; }
.pd-skel-title { height: 54px; width: 78%; border-radius: 10px; }
.pd-skel-title--short { width: 56%; }
.pd-skel-hash { height: 15px; width: 62%; border-radius: 7px; }
.pd-skel-fact { height: 34px; border-radius: 8px; }
.pd-skel-price { height: 52px; width: 64%; border-radius: 10px; margin-top: 8px; }
.pd-skel-btn { height: 50px; width: 100%; border-radius: 12px; }
.pd-skel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.pd-skel-specs { height: 112px; width: 100%; border-radius: 16px; margin-top: 4px; }
.pd-strip--skeleton { margin-top: var(--pd-gap); }
.pd-skel-tile { height: 82px; border-radius: 16px; }
.pd-inst--skeleton { display: grid; gap: 12px; }
.pd-skel-line { height: 46px; border-radius: 12px; }

/* ==========================================================================
   Dialogs: transfer conditions, try-on
   ========================================================================== */
.pd-terms { display: grid; gap: 16px; }
.pd-terms__now { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--warning-tint); color: var(--warning); }
.pd-terms__now.is-instant { background: var(--success-tint); color: var(--success); }
.pd-terms__now.is-within { background: var(--accent-tint); color: var(--accent-ink); }
.pd-terms__now svg { flex: none; margin-top: 2px; }
.pd-terms__label { font-size: var(--fs-sm); color: var(--ink-2); }
.pd-terms__value { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.pd-terms__sub { font-size: var(--fs-sm); color: var(--ink-2); }
.pd-terms__list { display: grid; gap: 14px; margin: 0; }
.pd-terms__list dt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.pd-terms__list dt svg { color: var(--ink-2); }
.pd-terms__list dd { margin: 4px 0 0 26px; color: var(--ink-2); }

/* image that failed to load (CDN down): a neutral glyph instead of a broken-image icon */
.pd-media-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px; color: var(--ink-3); }
.pd-media-fallback svg { width: 28px; height: 28px; }

@media (min-width: 768px) {
  .dialog--tryon { width: min(940px, calc(100vw - 32px)); }
}
.tryon { display: grid; gap: 16px; }
.tryon__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tryon__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 250px;
  padding: 48px 16px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #E9EEF6 0%, #DEE5EF 100%);
}
.tryon__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.tryon__item { display: grid; place-items: center; margin: 0; min-height: 150px; }
.tryon__item img { max-width: 100%; max-height: 190px; object-fit: contain; }
.tryon__plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--ink-2); }
.tryon__empty { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 20px; border: 1px dashed var(--line-strong); color: var(--ink-3); }
.tryon__pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.tryon__legend { margin-bottom: 4px; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.tryon__opt {
  position: relative;
  display: grid;
  grid-template-columns: 20px 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tryon__opt:hover { border-color: #B4BAC4; }
.tryon__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.tryon__opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tryon__opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); }
.tryon__opt img { width: 64px; height: 48px; object-fit: contain; }
.tryon__opt .pd-media-fallback { width: 64px; height: 48px; min-height: 0; border-radius: 8px; background: var(--surface-2); }
.tryon__item .pd-media-fallback { width: 120px; height: 120px; }
.tryon__opt-text { display: grid; min-width: 0; }
.tryon__opt-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.tryon__opt-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.tryon__opt-skel { height: 64px; border-radius: 14px; }
.tryon__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tryon__box { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 16px; }
.tryon__box--buy { background: var(--success-tint); box-shadow: inset 0 0 0 1px rgba(23, 114, 69, .25); }
.tryon__box--only { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); border: 0; outline: 1px dashed transparent; }
.tryon__h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.tryon__box--buy .tryon__h { color: var(--success); }
.tryon__what { font-weight: 600; color: var(--ink); }
.tryon__facts { font-size: var(--fs-sm); color: var(--ink-2); }
.tryon__price { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: var(--fs-lg); color: var(--ink); }
.tryon__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1439.98px) {
  .pd-table .c-wear { display: none; }
  .pd-table th, .pd-table td { padding-left: 8px; padding-right: 8px; }
  .pd-row-buy, .pd-row-na { min-width: 96px; }
}

/* small desktop / landscape tablet (900–1099): still side by side with a narrower panel, so the price and
   «Купить» stay in the first screen (stacked, they fell below the fold at 1024×768) */
@media (max-width: 1099.98px) {
  .pd-top { grid-template-columns: minmax(0, 1fr) clamp(320px, 36%, 360px); }
  .viewer { min-height: 480px; }
  .pd-stk { width: 112px; padding: 12px 8px; }
  .pd-strip { grid-template-columns: repeat(5, minmax(148px, 1fr)); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; scroll-snap-type: x proximity; }
  .pd-strip::-webkit-scrollbar { display: none; }
  .pd-tile { scroll-snap-align: start; padding-left: 14px; }
  .pd-inst__head { align-items: flex-start; }
  .pd-table .c-inspect .pd-chip3d span { display: none; }
  .pd-table .c-inspect .pd-chip3d { padding: 0 9px; }
  .pd-table th, .pd-table td { padding-left: 6px; padding-right: 6px; }
  .pd-table .c-sel { padding-left: 10px; }
  .pd-row-actions { gap: 6px; }
}

/* portrait tablet (768–899): stacked composition with a capped stage, info panel in two columns */
@media (max-width: 899.98px) {
  .pd-top { grid-template-columns: minmax(0, 1fr); }
  .viewer { min-height: 0; }
  .viewer__stage { height: clamp(260px, 38vh, 400px); }
  /* no 3D controls band outside 3D mode here (as on phones): the price and Buy stay above the fold */
  .viewer:not([data-mode='3d']) .viewer__controls { display: none; }
  /* the sticker island becomes a strip under the viewer: a row of icons, the total on its right */
  .pd-stage { flex-direction: column; }
  .pd-stk { flex-flow: row wrap; align-items: center; width: auto; padding: 12px 14px; overflow: visible; }
  .pd-stk__title { flex: 1 1 100%; }
  .pd-stk__list { flex: 1 1 auto; display: flex; flex-wrap: wrap; overflow: visible; }
  .pd-stk__item { flex: 0 0 104px; }
  .pd-stk__sum { flex: none; margin-left: auto; gap: 6px; }
  .pd-stk__note,
  .pd-stk__empty { flex: 1 1 100%; }
  .pd-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'head specs' 'facts specs' 'buy specs' 'buy link';
    grid-template-rows: auto auto 1fr auto;
    column-gap: 28px;
    align-items: start;
  }
  .pd-info__head { grid-area: head; }
  .pd-facts { grid-area: facts; }
  .pd-buy { grid-area: buy; }
  .pd-specs { grid-area: specs; margin-top: 0; }
  .pd-transfer-line { grid-area: link; }
}

/* rows → compact cards below 1024px: at 900–1023 a full row (stickers + charm, Dota styles + gems, …)
   no longer fits and the Buy cells slid out of the scroller */
@media (max-width: 1023.98px) {
  .pd-table-wrap { overflow: visible; }
  .pd-table, .pd-table tbody { display: block; }
  .pd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pd-table tr.pd-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  /* two line breaks: after «price» and before «3D» (no asset id and no compare: user decision 2026-10-03) */
  .pd-table tr.pd-row::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .pd-table tr.pd-row::before { content: ''; order: 4; flex-basis: 100%; height: 0; }
  .pd-table td { display: block; height: auto; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
  .pd-row:hover td { background: transparent; }
  .pd-table .c-sel { order: 0; width: auto; padding: 0 2px 0 0; }
  .pd-table .c-price { order: 1; flex: 1 1 auto; font-size: var(--fs-md); font-weight: 600; }   /* the card headline beside its radio */
  .pd-table .c-phase,
  .pd-table .c-float,
  .pd-table .c-seed,
  .pd-table .c-quality,
  .pd-table .c-styles,
  .pd-table .c-gems,
  .pd-table .c-extras,
  .pd-table .c-transfer { order: 3; display: block; font-size: var(--fs-xs); color: var(--ink-2); }
  .pd-table .c-wear { display: none; }
  .pd-table td[data-label].c-float::before,
  .pd-table td[data-label].c-seed::before,
  .pd-table td[data-label].c-phase::before,
  .pd-table td[data-label].c-transfer::before,
  .pd-table td[data-label].c-quality::before,
  .pd-table td[data-label].c-styles::before,
  .pd-table td[data-label].c-gems::before,
  .pd-table td[data-label].c-extras::before { content: attr(data-label) ' '; color: var(--ink-3); }
  /* label and value on one line, vertically centred (an inline-flex value with a leading icon otherwise
     took its baseline from the icon and sat 3–4px off its label) */
  .pd-table td[data-label].c-float,
  .pd-table td[data-label].c-seed,
  .pd-table td[data-label].c-phase,
  .pd-table td[data-label].c-transfer,
  .pd-table td[data-label].c-quality,
  .pd-table td[data-label].c-styles,
  .pd-table td[data-label].c-gems,
  .pd-table td[data-label].c-extras { display: inline-flex; align-items: center; gap: 4px; line-height: 1.3; }
  .pd-table .c-transfer .pd-transfer-cell { gap: 4px; }
  .pd-table .c-inspect { order: 5; }
  .pd-table .c-inspect .pd-chip3d span { display: inline; }
  .pd-table:not(:has(td.c-inspect)) tr.pd-row::before { content: none; }
  .pd-table .c-actions { order: 6; flex: 1 1 100%; width: auto; }
  .pd-row-actions .pd-row-buy, .pd-row-actions .pd-row-na { flex: 1 1 auto; }
  .pd-row-actions .btn { min-height: 40px; }
  .pd-row-actions .btn--sm::before { inset: -3px; }   /* 38 inside the border + 6 = 44 */
  /* selected card: light blue fill + exactly 1px blue outline (the spec), no extra inset ring */
  .pd-row.is-selected { border-color: var(--accent) !important; background: var(--accent-tint); }
  .pd-row.is-unavailable { background: var(--surface-2); }
}

/* mobile */
@media (max-width: 767.98px) {
  .pd { --pd-radius: 22px; --pd-gap: 12px; }
  .pd .page-header { margin-bottom: 4px; }
  .viewer { min-height: 0; grid-template-rows: auto auto auto; }
  .viewer__stage { height: 300px; padding: 64px 12px 4px; }
  .viewer__bar { top: 12px; }
  .viewer__fs { right: 8px; }
  .viewer__modes .segmented__item { padding: 0 14px; }
  .viewer__msg { top: 62px; font-size: var(--fs-xs); }
  .viewer__controls { padding: 6px 16px 12px; }   /* one scrolling row: see the viewer container queries */
  .viewer__footer { padding: 0 8px 8px; }
  /* actions as three compact columns (icon over label) */
  .pd-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; }
  .pd-link { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 4px; font-size: var(--fs-xs); line-height: 1.2; white-space: normal; text-align: center; }
  .pd-link > svg + span + svg { display: none; }

  /* back to one column: undo the tablet grid's align-items:start (it shrank the specs card) */
  .pd-info { display: flex; align-items: stretch; padding: 18px 16px 10px; }
  .pd-specs { margin-top: 12px; }
  .pd-transfer-line { padding-left: 12px; }
  .pd-stk__item { flex: 1 1 92px; }

  /* tiles narrower than half the screen: the third one peeks in, so the strip reads as scrollable */
  .pd-strip { display: flex; }
  .pd-tile { flex: 0 0 150px; min-height: 84px; padding-left: 14px; }

  .pd-inst { padding: 16px 12px 12px; }
  .pd-inst__tools { width: 100%; gap: 10px; }
  .pd-ffilter { flex-wrap: wrap; }
  .pd-ffilter__in { width: 96px; }
  .pd-sort { flex: 1 1 auto; }
  .pd-sort__select { flex: 1 1 auto; min-width: 0; }
  /* on a phone each segment stacks its label over the count, so «Сувенирные» fits at 320–375px */
  .pd-kind-pick .segmented__item { min-height: 44px; padding: 2px 6px; gap: 4px; flex-wrap: wrap; }
  .pd-kind-pick__n { min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; }

  /* compact sticky Buy (see renderSticky in pages/product.js); the page keeps room for it at the bottom */
  .pd:has(> .pd-sticky) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .pd-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;   /* under the top bar (60), drawer (80), toasts (100) and dialogs */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 24px -16px rgba(25, 27, 32, .28);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .pd-sticky.is-visible { transform: none; visibility: visible; transition: transform var(--dur-med) var(--ease-out), visibility 0s; }
  .pd-sticky:empty { display: none; }
  .pd-sticky.is-changed { animation: pd-sticky-flash 700ms var(--ease-out); }
  .pd-sticky__info { display: grid; flex: 1 1 auto; min-width: 0; margin: 0; }
  .pd-sticky__price { font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; color: var(--ink); white-space: nowrap; }
  .pd-sticky__buy { flex: none; min-width: 132px; min-height: 48px; }
  /* toasts sit above the bar while it is up */
  body:has(.pd-sticky.is-visible) .toast-region { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  .tryon__layout, .tryon__split { grid-template-columns: minmax(0, 1fr); }
  .tryon__stage { min-height: 200px; }
  .tryon__item img { max-height: 120px; }
  .tryon__actions .btn { flex: 1 1 100%; }
}

@keyframes pd-sticky-flash { from { background: var(--accent-tint); } to { background: var(--surface); } }

/* very narrow (320px / 400% zoom): the fullscreen button joins the bar's flow instead of overlapping the
   mode switch */
@container viewer (max-width: 330px) {
  .viewer__bar { justify-content: space-between; gap: 8px; padding: 0 6px 0 10px; }
  .viewer__fs { position: static; flex: none; }
  .viewer__modes .segmented__item { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer__img { transition: none; }
  .pd-tile, .pd-row td, .viewer-ctl { transition: none; }
  .pd-sticky, .pd-sticky.is-visible { transition: none; }
}

/* CS2 3D (viewer.js, added by the 3D integration 2026-10-03): the float the skin is drawn with, under the model —
   «Float 0.0082», or the middle of the exterior when a Маркет unit's float is unknown. Above the canvas, never
   catching the pointer (dragging the model works through it). */
.viewer__cap {
  position: absolute;
  left: 16px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px rgba(25, 27, 32, .06);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.viewer__cap[hidden] { display: none; }
.viewer:not([data-mode='3d']) .viewer__cap { display: none; }


/* ==========================================================================
   Price history (product/history.js, added 2026-10-05): the item's price on the
   Steam Market — six periods, a min/max band with the median line on top.
   Self-contained block: its own responsive and reduced-motion rules are below.
   ========================================================================== */
.pd-history-slot:empty { display: none; }
.pdh {
  margin-top: 18px;
  padding: 18px 24px 14px;
  border: 1px solid var(--line);
  border-radius: var(--pd-radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.pdh[hidden] { display: none; }
.pdh__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.pdh__titles { flex: 1 1 240px; min-width: 0; }
.pdh__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 1vw, 2.25rem);
  line-height: .95;
  letter-spacing: 0;
  color: var(--ink);
}
.pdh__title .oblique { transform-origin: 0 100%; }
.pdh__sub { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-base); }

/* Period switch: a radiogroup of six pills in one sunken track (one tab stop, arrow keys move and choose) */
.pdh__periods {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.pdh-period {
  position: relative;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* the visual pill is 32px, the hit target stays 44px */
.pdh-period::before { content: ''; position: absolute; inset: -6px 0; }
.pdh-period:hover { color: var(--ink); }
.pdh-period.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* The four numbers: now, the change over the period, the period's low and high */
.pdh__stats:empty { display: none; }
.pdh-stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: 2px 28px;
  margin: 14px 0 0;
}
.pdh-stat { min-width: 0; }
.pdh-stat__label { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.pdh-stat__value {
  margin: 1px 0 0;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pdh-stat--now .pdh-stat__value { font-size: var(--fs-xl); }
.pdh-stat--up .pdh-stat__value { color: var(--success); }
.pdh-stat--down .pdh-stat__value { color: var(--danger); }
.pdh-stat--flat .pdh-stat__value { color: var(--ink-2); }

/* The chart */
.pdh__plot { margin-top: 10px; }
.pdh-chart__wrap { position: relative; }
.pdh-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pdh-chart__grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
/* On a phone the price labels sit inside the plot (no width to spend on a gutter), so they carry a halo of the
   card's own background and the line may run straight under one. From 560px they stand in a gutter of their
   own, where nothing is drawn over them and the halo is not needed. */
.pdh-chart__ylabels text {
  fill: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill;
  stroke: var(--surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.pdh-chart__ylabels--gutter text { stroke: none; }
.pdh-chart__xlabels text { fill: var(--ink-3); font-size: 11px; }
.pdh-chart__band { fill: var(--accent-soft); stroke: none; }
.pdh-chart__line { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pdh-chart__cursor line { stroke: var(--line-strong); stroke-width: 1; }
.pdh-chart__cursor circle { fill: var(--accent-strong); stroke: var(--surface); stroke-width: 2; }
.pdh-chart__cursor .pdh-chart__edge { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.pdh-chart__wrap--anim .pdh-chart__band { animation: pdh-in var(--dur-med) var(--ease-out); }
.pdh-chart__wrap--anim .pdh-chart__line { animation: pdh-in var(--dur-med) var(--ease-out); }
@keyframes pdh-in { from { opacity: 0; } to { opacity: 1; } }

/* The reading surface: one slider over the buckets — the pointer hovers it, the keyboard walks it */
.pdh-chart__hit { position: absolute; inset: 0; border-radius: var(--radius-sm); cursor: crosshair; touch-action: pan-y; }
.pdh-chart__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pdh-tip {
  position: absolute;
  top: 2px;
  left: clamp(78px, var(--pdh-tip-x, 0px), calc(100% - 78px));
  transform: translateX(-50%);
  display: grid;
  gap: 1px;
  max-width: 152px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.pdh-tip__when { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.pdh-tip__price { color: var(--ink); font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.pdh-tip__range { color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* States: loading, no history, server down — each one short and in the page's voice */
.pdh-state { margin-top: 4px; border-radius: 16px; background: var(--surface-2); }
.pdh-state .state__title { font-size: var(--fs-lg); }
.pdh-state--loading {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 160px;
  padding: 16px;
  text-align: center;
}
.pdh-state__bar {
  width: min(280px, 70%);
  height: 6px;
  border-radius: 3px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.pdh-state__bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--accent-soft);
  animation: pdh-sweep 1.4s var(--ease-in-out) infinite;
}
@keyframes pdh-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.pdh-state__text { margin: 0; color: var(--ink-2); font-size: var(--fs-base); }

.pdh__note { margin: 10px 0 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; }
.pdh__note:empty { display: none; }

@media (max-width: 899.98px) {
  .pdh-stats__list { gap: 2px 20px; }
  .pdh-stat__value { font-size: var(--fs-md); }
  .pdh-stat--now .pdh-stat__value { font-size: var(--fs-lg); }
}
@media (max-width: 767.98px) {
  .pdh { padding: 16px 12px 12px; }
  /* the switch takes the full width under the title and spreads its six pills evenly */
  .pdh__periods { flex: 1 1 100%; justify-content: space-between; }
  .pdh-period { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: var(--fs-xs); }
  /* four numbers in two rows rather than one scrolling row */
  .pdh-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .pdh-stat__label { white-space: normal; }
  .pdh-tip { max-width: 132px; left: clamp(68px, var(--pdh-tip-x, 0px), calc(100% - 68px)); }
  .pdh-state--loading { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdh-period { transition: none; }
  .pdh-chart__wrap--anim .pdh-chart__band,
  .pdh-chart__wrap--anim .pdh-chart__line { animation: none; }
  .pdh-state__bar::after { animation: none; width: 100%; }
}

/* «Функции SKINAURA» on the item (src/js/product/tools.js): quiet buttons under the two that sell — naming a
   price you would pay, or putting the item into a loadout you are assembling. They are not purchase controls,
   so they carry no fill and no colour of their own. */
.pd-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pd-tools__btn { flex: 1 1 auto; justify-content: center; color: var(--ink-2); }
.pd-tools__btn[aria-pressed='true'] { color: var(--accent-ink); background: var(--accent-tint); }

.pd-watch__item { margin: 0 0 4px; font-weight: 600; }
.pd-watch__now { margin: 0 0 14px; color: var(--ink-2); }
.pd-watch__err { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--danger); }

.pd-loadout__list { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.pd-loadout__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pd-loadout__row:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); }
.pd-loadout__row:disabled { color: var(--ink-3); cursor: default; }
.pd-loadout__name { font-weight: 600; }
.pd-loadout__n { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.pd-loadout__none { margin: 0 0 14px; color: var(--ink-2); }
.pd-loadout__new { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }