/* WallGold — the «تاریخچه قیمت» widgets ([wgx-history]; the year pages' [wgx-history-year], 2.67)
   and the sticky section menu of those pages ([data-wgxh-subnav]), 2.65.
   Sizes follow the Figma frame «Price History» (desktop 1440 / mobile 360);
   ≤767px is the mobile frame, as in the pages' Bricks breakpoints. */

.wgxh { direction: rtl; width: 100%; box-sizing: border-box; color: #252525; font-family: inherit; }
.wgxh *, .wgxh *::before, .wgxh *::after { box-sizing: border-box; }
.wgxh button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wgxh button:focus-visible { outline: 2px solid rgba(37, 37, 37, .35); outline-offset: 2px; }
.wgxh b { font-weight: 700; }
.wgxh .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.wgxh-na { color: rgba(0, 0, 0, .4); font-weight: 400; }
.wgxh-empty { padding: 24px; text-align: center; color: rgba(0, 0, 0, .6); }

/* ---------- segmented control (Figma «Segment Control»): 40px, 1px 5% stroke inside, white active pill ---------- */
.wgxh-seg { display: inline-flex; align-items: center; height: 40px; padding: 3px;
  border: 1px solid rgba(0, 0, 0, .05); border-radius: 1000px; background: rgba(0, 0, 0, .02); }
/* the label sits in the middle of its tab (the theme's buttons are text-align: start) */
.wgxh .wgxh-seg button { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 0;
  min-width: 0; height: 32px; padding: 4px; border-radius: 1000px; text-align: center;
  font-size: 14px; line-height: 24px; font-weight: 500; color: rgba(0, 0, 0, .6); white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s; }
.wgxh .wgxh-seg button[aria-selected="true"] { background: #fff; color: #252525;
  box-shadow: 0 0 9px rgba(0, 0, 0, .06), 0 0 3px rgba(0, 0, 0, .06); }
.wgxh .wgxh-seg button:not([aria-selected="true"]):hover { color: #252525; }
.wgxh-seg button + button::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px;
  width: 1px; height: 16px; background: rgba(0, 0, 0, .05); transition: opacity .2s; }
.wgxh-seg button[aria-selected="true"]::before,
.wgxh-seg button[aria-selected="true"] + button::before { opacity: 0; }

/* ---------- money, unit and change chip (Figma «Frame 2504»: 2px 4px, r4, 12/20, 16px trend arrow) ---------- */
.wgxh-unit { font-size: 14px; line-height: 24px; font-weight: 400; color: rgba(0, 0, 0, .6); }
.wgxh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px;
  font-size: 12px; line-height: 20px; font-weight: 400; white-space: nowrap; direction: rtl; }
.wgxh-chip i { width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.8359 4.8015C14.8347 4.67501 14.7859 4.54887 14.6895 4.45236C14.5853 4.34822 14.4467 4.29962 14.3103 4.30656H11.0635C10.7873 4.30656 10.5635 4.53042 10.5635 4.80656C10.5635 5.08271 10.7873 5.30656 11.0635 5.30656H13.1281L9.15387 9.28078L6.78054 6.90685C6.6868 6.81311 6.5596 6.76038 6.42698 6.76038C6.29436 6.76038 6.16717 6.81305 6.07339 6.90685L1.98238 10.9978C1.78712 11.1931 1.78712 11.5097 1.98238 11.705C2.17764 11.9002 2.49423 11.9002 2.68949 11.705L6.4269 7.96751L8.80027 10.3414C8.894 10.4352 9.0212 10.4879 9.1538 10.4879C9.28647 10.488 9.4136 10.4352 9.5074 10.3415L13.8359 6.01305V8.07898C13.8359 8.35511 14.0597 8.57898 14.3359 8.57898C14.6121 8.57898 14.8359 8.35511 14.8359 8.07898V4.80655C14.8359 4.80487 14.8359 4.80318 14.8359 4.8015Z'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.8359 4.8015C14.8347 4.67501 14.7859 4.54887 14.6895 4.45236C14.5853 4.34822 14.4467 4.29962 14.3103 4.30656H11.0635C10.7873 4.30656 10.5635 4.53042 10.5635 4.80656C10.5635 5.08271 10.7873 5.30656 11.0635 5.30656H13.1281L9.15387 9.28078L6.78054 6.90685C6.6868 6.81311 6.5596 6.76038 6.42698 6.76038C6.29436 6.76038 6.16717 6.81305 6.07339 6.90685L1.98238 10.9978C1.78712 11.1931 1.78712 11.5097 1.98238 11.705C2.17764 11.9002 2.49423 11.9002 2.68949 11.705L6.4269 7.96751L8.80027 10.3414C8.894 10.4352 9.0212 10.4879 9.1538 10.4879C9.28647 10.488 9.4136 10.4352 9.5074 10.3415L13.8359 6.01305V8.07898C13.8359 8.35511 14.0597 8.57898 14.3359 8.57898C14.6121 8.57898 14.8359 8.35511 14.8359 8.07898V4.80655C14.8359 4.80487 14.8359 4.80318 14.8359 4.8015Z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.wgxh-chip--up { color: #039874; background: #E6F5F1; }
.wgxh-chip--down { color: #F65555; background: rgba(246, 85, 85, .1); }
.wgxh-chip--down i { transform: scaleY(-1); }
.wgxh-chip--flat { color: rgba(0, 0, 0, .6); background: #F5F6F7; }
.wgxh-chip--flat i { display: none; }

/* ================================================================
   Chart
   ============================================================= */
.wgxh-chart { display: flex; flex-direction: column; gap: 56px; }
.wgxh-ctrl { display: flex; justify-content: center; align-items: center; gap: 12px; }
.wgxh-seg--key { width: 240px; }
.wgxh-seg--period { width: 400px; }

/* five figures, each column with a 1×64 line on its right and the text 12px after it */
.wgxh-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.wgxh-stat { position: relative; display: flex; flex-direction: column; justify-content: space-between;
  height: 64px; padding-inline-start: 12px; }
.wgxh-stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 100%;
  background: rgba(0, 0, 0, .1); }
.wgxh-stat dt { margin: 0; font-size: 12px; line-height: 20px; font-weight: 400; color: rgba(0, 0, 0, .6); white-space: nowrap; }
.wgxh-stat dd { display: flex; align-items: center; gap: 4px; height: 28px; margin: 0; white-space: nowrap; }
.wgxh-stat dd b { font-size: 16px; line-height: 28px; }

/* the plot: price levels on the right (51px), 22px, the line (0–240), month/year marks 24px below */
.wgxh-plot { position: relative; height: 294px; direction: rtl; touch-action: pan-y; }
.wgxh-y { position: absolute; top: 0; right: 0; width: 51px; height: 260px; display: flex; flex-direction: column;
  justify-content: space-between; font-size: 12px; line-height: 20px; color: rgba(0, 0, 0, .6); white-space: nowrap; }
.wgxh-y span { display: block; height: 20px; }
.wgxh-area { position: absolute; top: 10px; left: 0; right: 73px; height: 241px;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .05) 0 1px, transparent 1px 60px); }
.wgxh-area svg { position: absolute; top: 0; left: 0; width: 100%; height: 240px; overflow: visible; }
.wgxh-line { fill: none; stroke: #B99C49; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.wgxh-fill { fill: url(#wgxh-fill); stroke: none; }
.wgxh-x { position: absolute; top: 274px; left: 0; right: 73px; height: 20px; font-size: 12px; line-height: 20px;
  color: rgba(0, 0, 0, .6); }
.wgxh-x span { position: absolute; top: 0; white-space: nowrap; }
.wgxh-plot.is-drawing .wgxh-line { animation: wgxh-draw .9s ease-out both; }
.wgxh-plot.is-drawing .wgxh-fill { animation: wgxh-fade .9s ease-out both; }
@keyframes wgxh-draw { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }
@keyframes wgxh-fade { from { opacity: 0; } to { opacity: 1; } }

/* hover read-out (Figma «Frame 2134284382»): a 10% line from 16px above the plot to 15px below it,
   a 12px gold dot, and over it a white card r8 with the date and the price, both centred */
.wgxh-cursor { position: absolute; top: -16px; bottom: -15px; width: 1px; background: rgba(0, 0, 0, .1);
  pointer-events: none; opacity: 0; transition: opacity .12s; }
.wgxh-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #B99C49; pointer-events: none; opacity: 0; transition: opacity .12s; }
.wgxh-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  pointer-events: none; opacity: 0; transition: opacity .12s; white-space: nowrap; text-align: center; direction: rtl; }
.wgxh-tip__date { font-size: 10px; line-height: 16px; font-weight: 400; color: rgba(0, 0, 0, .6); }
.wgxh-tip__price { display: flex; justify-content: center; align-items: flex-start; gap: 2px; margin: 0;
  font-size: 12px; line-height: 20px; font-weight: 400; color: rgba(0, 0, 0, .6); }
.wgxh-tip__price b { color: #252525; font-weight: 700; }
.is-hover .wgxh-cursor, .is-hover .wgxh-dot, .is-hover > .wgxh-tip { opacity: 1; }

/* ================================================================
   Tables (years / years ago)
   ============================================================= */
.wgxh-years { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.wgxh-years .wgxh-seg { width: 350px; }
.wgxh-panel { width: 100%; }
.wgxh-panel[hidden] { display: none; }
/* Figma's stroke is INSIDE: an outline 1px in, so the rows keep their 48/56px */
.wgxh-frame { position: relative; width: 100%; overflow: hidden; border-radius: 16px; background: #fff; isolation: isolate; }
.wgxh-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid rgba(0, 0, 0, .1);
  border-radius: inherit; pointer-events: none; }
.wgxh-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
/* the year table scrolls inside its 440px frame; at its top or bottom the wheel or finger carries on to the page
   (no overscroll-behavior-y: contain, which held the page still) */
.wgxh-scroll--y { max-height: 440px; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .15) transparent; }
.wgxh-fade { display: none; }

.wgxh-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; table-layout: fixed;
  background: none; font-size: 14px; line-height: 24px; text-align: right; }
.wgxh-table th, .wgxh-table td { height: 56px; margin: 0; padding: 0 12px 0 0; border: 0; background: none;
  vertical-align: middle; text-align: right; font-weight: 700; white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05); }
.wgxh-table tbody > tr:last-child > th, .wgxh-table tbody > tr:last-child > td { box-shadow: none; }
.wgxh-table th:first-child { padding-right: 24px; }
.wgxh-table thead th { position: sticky; top: 0; z-index: 1; height: 48px; background: #fff;
  font-size: 12px; line-height: 20px; font-weight: 500; color: rgba(0, 0, 0, .6); }
/* the 1×20 column edge of the header */
.wgxh-table thead th + th::before { content: ""; position: absolute; right: 0; top: 14px; width: 1px; height: 20px;
  background: rgba(0, 0, 0, .1); }
.wgxh-table caption { caption-side: top; }

/* years: 248 / 217 / 237 / rest (880) */
.wgxh-table--years > thead th:nth-child(1), .wgxh-table--years > tbody > tr > :nth-child(1) { width: 248px; }
.wgxh-table--years > thead th:nth-child(2) { width: 217px; }
.wgxh-table--years > thead th:nth-child(3) { width: 237px; }
.wgxh-sort { display: inline-flex; align-items: center; gap: 4px; font-weight: 500 !important; }
.wgxh-sort::after { content: ""; width: 16px; height: 16px; flex: none; background: #252525; transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.05995 5.23954C3.37946 4.92002 3.8975 4.92002 4.21701 5.23954L8.00203 9.02449L11.7871 5.23954C12.1066 4.92002 12.6246 4.92002 12.9441 5.23954C13.2636 5.55906 13.2636 6.07702 12.9441 6.39654L8.58053 10.7601C8.26101 11.0796 7.74305 11.0796 7.42353 10.7601L3.05995 6.39654C2.74044 6.07702 2.74044 5.55906 3.05995 5.23954Z'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.05995 5.23954C3.37946 4.92002 3.8975 4.92002 4.21701 5.23954L8.00203 9.02449L11.7871 5.23954C12.1066 4.92002 12.6246 4.92002 12.9441 5.23954C13.2636 5.55906 13.2636 6.07702 12.9441 6.39654L8.58053 10.7601C8.26101 11.0796 7.74305 11.0796 7.42353 10.7601L3.05995 6.39654C2.74044 6.07702 2.74044 5.55906 3.05995 5.23954Z'/%3E%3C/svg%3E") center / 16px no-repeat; }
th[aria-sort="ascending"] .wgxh-sort::after { transform: rotate(180deg); }
th[aria-sort="none"] .wgxh-sort::after { opacity: .35; }

/* the year links to its own page: a 20px circle with a chevron, the year, and for the running year «تا …»
   on the year's baseline (wrapping under the year, not under the circle) */
.wgxh .wgxh-open { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; color: #252525;
  font-weight: 700 !important; text-decoration: none; }
.wgxh-yr__t { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.wgxh-open i { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #F2F2F2; }
.wgxh-open i::after { content: ""; position: absolute; inset: 0; background: #252525;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M12.1112 6.2248C12.3553 6.46888 12.3553 6.86461 12.1112 7.10869L9.21985 10.0001L12.1112 12.8915C12.3553 13.1356 12.3553 13.5312 12.1112 13.7753C11.8671 14.0194 11.4714 14.0194 11.2274 13.7753L7.89399 10.442C7.64992 10.1979 7.64992 9.80225 7.89399 9.55816L11.2274 6.2248C11.4714 5.98073 11.8671 5.98073 12.1112 6.2248Z'/%3E%3C/svg%3E") center / 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M12.1112 6.2248C12.3553 6.46888 12.3553 6.86461 12.1112 7.10869L9.21985 10.0001L12.1112 12.8915C12.3553 13.1356 12.3553 13.5312 12.1112 13.7753C11.8671 14.0194 11.4714 14.0194 11.2274 13.7753L7.89399 10.442C7.64992 10.1979 7.64992 9.80225 7.89399 9.55816L11.2274 6.2248C11.4714 5.98073 11.8671 5.98073 12.1112 6.2248Z'/%3E%3C/svg%3E") center / 20px no-repeat; }
.wgxh-yr { transition: background-color .15s; }
.wgxh-yr.has-link { cursor: pointer; }
.wgxh-yr:hover > * { background-color: #FBFBFC; }
.wgxh-yr.has-link:hover .wgxh-open i { background: #E9E9EA; }
.wgxh-yr__t small { font-size: 12px; line-height: 20px; font-weight: 400; color: rgba(0, 0, 0, .6); white-space: nowrap; }

/* years ago: 155 / 182 / 182 / 182 / rest (880) */
.wgxh-table--ago th:nth-child(1) { width: 155px; padding-right: 16px !important; }
.wgxh-table--ago th:nth-child(2), .wgxh-table--ago td:nth-child(2),
.wgxh-table--ago th:nth-child(3), .wgxh-table--ago td:nth-child(3),
.wgxh-table--ago th:nth-child(4), .wgxh-table--ago td:nth-child(4) { width: 182px; }
.wgxh-today > * { background: #F5F6F7 !important; }

/* ================================================================
   Yearly change: a pair of bars a year
   ============================================================= */
.wgxh-change { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wgxh-legend { display: flex; align-items: center; gap: 33px; height: 50px; margin: 0; padding: 7px 15px;
  border: 1px solid rgba(0, 0, 0, .05); border-radius: 1000px; background: #fff; list-style: none; }
.wgxh-legend li { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0;
  font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.wgxh-legend li + li::before { content: ""; position: absolute; inset-inline-start: -17px; top: -6px; width: 1px;
  height: 32px; background: rgba(0, 0, 0, .1); }
/* each series: a fill and, for the bars and the read-out's swatch, Figma's 1px inside stroke (the fill reversed, 50%) */
.wgxh-c0 { --f: linear-gradient(180deg, #E0F8FF 0%, #B8EDFF 100%);
  --s: linear-gradient(180deg, rgba(184, 237, 255, .5) 0%, rgba(224, 248, 255, .5) 100%); }
.wgxh-c1 { --f: linear-gradient(180deg, #FDEEEE 0%, #FDCFCF 100%);
  --s: linear-gradient(180deg, rgba(253, 207, 207, .5) 0%, rgba(253, 238, 238, .5) 100%); }
.wgxh-c2 { --f: linear-gradient(180deg, #FAF4EB 0%, #EAD9B4 100%);
  --s: linear-gradient(180deg, rgba(234, 217, 180, .5) 0%, rgba(250, 244, 235, .5) 100%); }
.wgxh-legend i { width: 16px; height: 16px; border-radius: 4px; background: var(--f); }

.wgxh-bars { --area: 232px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  width: 100%; margin: 0; padding: 0; list-style: none; direction: ltr; }
.wgxh-col { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0;
  outline: none; cursor: default; }
.wgxh-col.has-link { cursor: pointer; }
/* the zero line, drawn by every column so it runs unbroken */
.wgxh-col::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--z) * var(--area)); height: 1px;
  background: rgba(0, 0, 0, .1); }
.wgxh-pair { position: relative; width: 28px; height: var(--area); }
.wgxh-bar { position: absolute; width: 12px; height: calc(var(--h) * var(--area));
  bottom: calc((1 - var(--z)) * var(--area)); border: 1px solid transparent; border-radius: 2px 2px 0 0;
  background: var(--f) padding-box, var(--s) border-box; transform-origin: 50% 100%;
  transition: opacity .12s ease-out, filter .12s ease-out, transform .7s cubic-bezier(.2, .8, .2, 1); }
.wgxh-bar.wgxh-c1 { left: 16px; }
.wgxh-bar.wgxh-c2 { left: 32px; }
.wgxh-bar.is-neg { bottom: auto; top: calc(var(--z) * var(--area)); border-radius: 0 0 2px 2px; transform-origin: 50% 0; }
.wgxh-bar.is-empty { display: none; }
.wgxh-bar em { display: none; }
.wgxh .wgxh-year { margin-top: 12px; font-size: 12px; line-height: 20px; font-weight: 400; color: rgba(0, 0, 0, .6);
  white-space: nowrap; text-decoration: none; }
.wgxh-col.is-running .wgxh-bar { opacity: .45; }
/* the hovered year in colour at once, the others fade (the grow-in's per-column delay is for transform only) */
.wgxh-bars:hover .wgxh-col:not(:hover) .wgxh-bar { opacity: .35; }
.wgxh-col:hover .wgxh-bar, .wgxh-col:focus-within .wgxh-bar, .wgxh-col:focus-visible .wgxh-bar { filter: saturate(2.2) brightness(.97); opacity: 1; }
.wgxh .wgxh-col:hover .wgxh-year, .wgxh .wgxh-col:focus-within .wgxh-year { color: #252525; font-weight: 700; }
.wgxh-change.is-waiting .wgxh-bar { transform: scaleY(0); }
.wgxh-change.is-in .wgxh-bar { transition-delay: 0s, 0s, calc(var(--i) * 35ms); }

/* the year's read-out (Figma «Frame 2134284383»): 120px card, r8, a row per series:
   swatch 12 r4 and name (10/16 500) on the right, change (10/16 700) on the left */
.wgxh-tip--change { min-width: 120px; align-items: stretch; gap: 8px; }
.wgxh-tip--change p { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0;
  font-size: 10px; line-height: 16px; color: #252525; }
.wgxh-tip--change span { display: flex; align-items: center; gap: 4px; font-weight: 500; }
.wgxh-tip--change i { width: 12px; height: 12px; flex: none; border: 1px solid transparent; border-radius: 4px;
  background: var(--f) padding-box, var(--s) border-box; }
.wgxh-tip--change b { font-weight: 700; unicode-bidi: isolate; }

/* ================================================================
   Sticky section menu (native Bricks elements; history.js sets the state)
   ============================================================= */
.wgxh-subnav { position: relative; z-index: 990; }
.wgxh-subnav__list { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wgxh-subnav__list::-webkit-scrollbar { display: none; }
.wgxh-subnav__link { cursor: pointer; transition: background-color .2s; }
.wgxh-subnav__link:not(.is-active):hover { background-color: #FAFAFA !important; }
.wgxh-subnav__link.is-active { background-color: #F5F6F7 !important; }
.wgxh-subnav__list.has-fade { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent 100%); }
.wgxh-subnav.is-stuck .wgxh-subnav__bar { position: fixed; top: var(--wg-top, 0px); z-index: 990; }
@media (min-width: 768px) {
  .wgxh-subnav.is-stuck .wgxh-subnav__bar { left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content;
    max-width: calc(100vw - 48px); border-radius: 0 0 32px 32px !important; border-top-color: transparent !important; }
}

/* ================================================================
   Mobile frame (360)
   ============================================================= */
@media (max-width: 767px) {
  .wgxh .wgxh-seg button { font-size: 14px; }
  .wgxh-chart { gap: 32px; }
  .wgxh-ctrl { flex-direction: column; gap: 12px; }
  .wgxh-seg--key, .wgxh-seg--period, .wgxh-years .wgxh-seg { width: 100%; }

  /* the figures become a card of five rows, label right and price left, split by 10% lines */
  .wgxh-stats { grid-template-columns: 1fr; row-gap: 24px; padding: 15px 11px; border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 16px; }
  .wgxh-stat { flex-direction: row; align-items: center; height: 24px; padding: 0; }
  .wgxh-stat::before { display: none; }
  .wgxh-stat + .wgxh-stat::before { display: block; inset-inline-start: 0; top: -12px; width: 100%; height: 1px; }
  .wgxh-stat dt { color: #252525; }
  .wgxh-stat dd { height: 24px; }
  .wgxh-stat dd b { font-size: 14px; line-height: 24px; }
  .wgxh-unit { font-size: 12px; line-height: 20px; }

  .wgxh-plot { height: 279px; }
  .wgxh-y { width: 42px; height: 256px; font-size: 10px; line-height: 16px; }
  .wgxh-y span { height: 16px; }
  .wgxh-area { top: 8px; right: 56px; }
  .wgxh-x { top: 263px; right: 56px; height: 16px; font-size: 10px; line-height: 16px; }

  .wgxh-years { gap: 32px; }
  /* the table scrolls sideways under a white fade on its left (Figma «Rectangle 318») */
  .wgxh-frame { border-radius: 0 16px 16px 0; }
  .wgxh-frame::after { border-color: rgba(0, 0, 0, .05); }
  .wgxh-fade { display: block; position: absolute; top: 0; left: 0; z-index: 2; width: 88px; height: 100%;
    pointer-events: none; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 88%); transition: opacity .2s; }
  .wgxh-frame.is-end .wgxh-fade { opacity: 0; }
  .wgxh-scroll { scrollbar-width: none; }
  .wgxh-scroll::-webkit-scrollbar { display: none; }
  .wgxh-table { font-size: 12px; line-height: 20px; }
  .wgxh-table th, .wgxh-table td { padding-right: 12px; }
  .wgxh-table th:first-child { padding-right: 16px; }
  .wgxh-table thead th { font-size: 10px; line-height: 16px; }
  .wgxh-table--years { min-width: 448px; }
  .wgxh-table--years > thead th:nth-child(1), .wgxh-table--years > tbody > tr > :nth-child(1) { width: 112px; }
  .wgxh-table--years > thead th:nth-child(2) { width: 104px; }
  .wgxh-table--years > thead th:nth-child(3) { width: 116px; }
  .wgxh-open { gap: 6px; }
  .wgxh-open i { width: 16px; height: 16px; }
  .wgxh-open i::after { -webkit-mask-size: 16px; mask-size: 16px; }
  .wgxh-yr__t { column-gap: 6px; }
  .wgxh-yr__t small { font-size: 10px; line-height: 14px; }
  .wgxh-table--ago { min-width: 540px; }
  .wgxh-table--ago thead th { height: 40px; }
  .wgxh-table--ago th:nth-child(1) { width: 92px; }
  .wgxh-table--ago th:nth-child(2), .wgxh-table--ago td:nth-child(2) { width: 104px; }
  .wgxh-table--ago th:nth-child(3), .wgxh-table--ago td:nth-child(3) { width: 104px; }
  .wgxh-table--ago th:nth-child(4), .wgxh-table--ago td:nth-child(4) { width: 112px; }

  /* yearly change turns sideways: years on the right, bars growing left from the zero line */
  .wgxh-bars { grid-template-columns: 1fr; row-gap: 12px; direction: rtl; }
  .wgxh-col { flex-direction: row-reverse; align-items: center; gap: 12px; height: 28px; }
  .wgxh-col::before { display: none; }
  .wgxh-pair { flex: 1 1 auto; width: auto; height: 28px; }
  .wgxh-pair::before { content: ""; position: absolute; left: calc(var(--z) * 100%); top: -6px; bottom: -6px; width: 1px;
    background: rgba(0, 0, 0, .1); }
  .wgxh-bar { top: 0; bottom: auto; left: auto; right: calc((1 - var(--z)) * 100%); width: calc(var(--h) * 100%);
    height: 12px; border-radius: 2px 0 0 2px; transform-origin: 100% 50%; }
  .wgxh-bar.wgxh-c1 { top: 16px; left: auto; }
  .wgxh-bar.wgxh-c2 { top: 32px; left: auto; }
  .wgxh-bar.is-neg { top: 0; right: auto; left: calc(var(--z) * 100%); border-radius: 0 2px 2px 0; transform-origin: 0 50%; }
  .wgxh-bar.wgxh-c1.is-neg { top: 16px; }
  .wgxh-bar em { display: block; position: absolute; top: -3px; right: calc(100% + 5px); font-style: normal;
    font-size: 10px; line-height: 16px; font-weight: 500; color: rgba(0, 0, 0, .6); white-space: nowrap; }
  .wgxh-bar.is-long em { right: auto; left: 3px; color: #252525; }
  .wgxh .wgxh-year { width: 24px; margin: 0; flex: none; text-align: right; }
  .wgxh-change.is-waiting .wgxh-bar { transform: scaleX(0); }
  .wgxh-bars:hover .wgxh-col:not(:hover) .wgxh-bar { opacity: 1; }
  .wgxh-col.is-running .wgxh-bar { opacity: .45; }
}

/* ================================================================
   Year pages (2.67): [wgx-history-year], Figma «History Single»
   (desktop 28875:44123 / mobile 28884:47468)
   ============================================================= */

/* the year's chart: key tabs (350) 48px over the line; 285px plot, 66px for the price levels */
.wgxh-chart--year { gap: 48px; }
/* month names centred on the month's first day (long names such as «اردیبهشت» no longer touch the next) */
.wgxh-chart--year .wgxh-x span { transform: translateX(-50%); }
@media (min-width: 768px) {
  .wgxh-chart--year .wgxh-seg--key { width: 350px; }
  .wgxh-chart--year .wgxh-plot { height: 285px; }
  .wgxh-chart--year .wgxh-area, .wgxh-chart--year .wgxh-x { right: 66px; }
  .wgxh-chart--year .wgxh-x { top: 265px; }
}

/* months: tabs (350) 40px over an 880 table, 231 / 197 / 199 / rest */
.wgxh-months { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.wgxh-months .wgxh-seg { width: 350px; }
.wgxh-table--months > thead th:nth-child(1) { width: 231px; }
.wgxh-table--months > thead th:nth-child(2) { width: 197px; }
.wgxh-table--months > thead th:nth-child(3) { width: 199px; }
.wgxh-mo { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.wgxh-mo .wgxh-yr__t small, .wgxh-table--near .wgxh-yr__t small { font-size: 12px; line-height: 20px; font-weight: 400;
  color: rgba(0, 0, 0, .6); white-space: nowrap; }
/* «بیشترین رشد / افت» (Figma «Frame 2504» pill): 10/16 500, 2px 8px */
.wgxh-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 1000px; font-size: 10px;
  line-height: 16px; font-weight: 500; white-space: nowrap; }
.wgxh-badge--up { color: #039874; background: #E6F5F1; }
.wgxh-badge--down { color: #F65555; background: rgba(246, 85, 85, .1); }

/* nearby years: two 432px cards, a 48px #F5F6F7 title over the table (99 / 117 / 119 / rest) */
.wgxh-nearby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wgxh-card { position: relative; min-width: 0; overflow: hidden; border-radius: 16px; background: #fff; isolation: isolate; }
.wgxh-card::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid rgba(0, 0, 0, .1);
  border-radius: inherit; pointer-events: none; }
.wgxh .wgxh-card__t { display: flex; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 0;
  background: #F5F6F7; font-size: 14px; line-height: 24px; font-weight: 700; color: #252525; }
.wgxh-card .wgxh-frame { border-radius: 0; }
.wgxh-card .wgxh-frame::after { display: none; }
.wgxh-table--near > thead th:nth-child(1) { width: 99px; }
.wgxh-table--near > thead th:nth-child(2) { width: 117px; }
.wgxh-table--near > thead th:nth-child(3) { width: 119px; }
.wgxh-table.wgxh-table--near th:first-child { padding-right: 16px; }
/* this page's own year: the archive's «today» grey, no arrow (it is not a link) */
.wgxh-yr.is-current > *, .wgxh-yr.is-current:hover > * { background-color: #F5F6F7; }
.wgxh-yr.is-current .wgxh-open i { visibility: hidden; }

/* previous · picker · next: three 48px #F5F6F7 pills 17px apart, 16px in, the text at the far end from the arrow */
.wgxh-nav { display: flex; gap: 17px; }
.wgxh .wgxh-nav__link, .wgxh .wgxh-nav__pick { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; height: 48px; margin: 0; padding: 0 16px; border-radius: 1000px;
  background: #F5F6F7; color: #252525; font-size: 14px; line-height: 24px; font-weight: 400; text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.wgxh a.wgxh-nav__link:hover, .wgxh .wgxh-nav__pick:hover { background: #EDEEF0; }
.wgxh a.wgxh-nav__link:focus-visible, .wgxh .wgxh-nav__pick:focus-within { outline: 2px solid rgba(37, 37, 37, .35);
  outline-offset: 2px; }
.wgxh .wgxh-nav__link.is-off { color: rgba(0, 0, 0, .35); cursor: default; }
.wgxh-nav__t { overflow: hidden; text-overflow: ellipsis; }
.wgxh-nav__i { width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10.5303 3.46967C10.8232 3.76256 10.8232 4.23744 10.5303 4.53033L7.0607 8L10.5303 11.4697C10.8232 11.7626 10.8232 12.2374 10.5303 12.5303C10.2374 12.8232 9.7626 12.8232 9.4697 12.5303L5.46967 8.5303C5.17678 8.2374 5.17678 7.7626 5.46967 7.4697L9.4697 3.46967C9.7626 3.17678 10.2374 3.17678 10.5303 3.46967Z'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10.5303 3.46967C10.8232 3.76256 10.8232 4.23744 10.5303 4.53033L7.0607 8L10.5303 11.4697C10.8232 11.7626 10.8232 12.2374 10.5303 12.5303C10.2374 12.8232 9.7626 12.8232 9.4697 12.5303L5.46967 8.5303C5.17678 8.2374 5.17678 7.7626 5.46967 7.4697L9.4697 3.46967C9.7626 3.17678 10.2374 3.17678 10.5303 3.46967Z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.wgxh-nav__i--prev { transform: rotate(180deg); }
.wgxh-nav__i--down { transform: rotate(-90deg); }
/* without the script the picker is the phone's / browser's own list, laid invisibly over the pill */
.wgxh .wgxh-nav__pick select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; }

/* 2.68.2 — with it, the pill opens a panel of its own: the years as a grid of links, the open one dark */
.wgxh .wgxh-nav__pick.is-menu select { display: none; }
.wgxh .wgxh-nav__btn { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  border-radius: inherit; background: none; cursor: pointer; font: inherit; color: inherit; }
.wgxh .wgxh-nav__btn:focus-visible { outline: 2px solid rgba(37, 37, 37, .35); outline-offset: 2px; }
.wgxh .wgxh-nav__pick.is-menu:focus-within { outline: none; }
.wgxh .wgxh-nav__pick.is-open { background: #EDEEF0; }
.wgxh-nav__pick .wgxh-nav__i--down { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.wgxh-nav__pick.is-open .wgxh-nav__i--down { transform: rotate(90deg); }

.wgxh .wgxh-years { display: block; position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 40; min-width: 248px;
  max-height: 320px; overflow-y: auto; padding: 12px; border-radius: 16px; background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .05);
  white-space: normal; cursor: default; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .2, 1); }
.wgxh .wgxh-nav__pick.is-up .wgxh-years { top: auto; bottom: calc(100% + 8px); transform: translateY(6px) scale(.98);
  transform-origin: bottom center; }
.wgxh .wgxh-nav__pick.is-open .wgxh-years { opacity: 1; transform: none; }
.wgxh .wgxh-years[hidden] { display: none; }
.wgxh-years__head { padding: 0 4px 8px; color: rgba(0, 0, 0, .6); font-size: 12px; line-height: 20px; font-weight: 500; }
.wgxh-years__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wgxh .wgxh-years__y { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px;
  background: #F5F6F7; color: #252525; font-size: 14px; line-height: 24px; font-weight: 500; text-decoration: none;
  transition: background-color .15s, color .15s, transform .15s; }
.wgxh a.wgxh-years__y:hover { background: #EDEEF0; }
.wgxh a.wgxh-years__y:active { transform: scale(.96); }
.wgxh .wgxh-years__y:focus-visible { outline: 2px solid rgba(37, 37, 37, .35); outline-offset: 1px; }
.wgxh .wgxh-years__y.is-current { background: #252525; color: #fff; cursor: default; }

@media (max-width: 767px) {
  .wgxh-chart--year { gap: 40px; }
  .wgxh-months { gap: 32px; }
  .wgxh-months .wgxh-seg { width: 100%; }
  .wgxh-table--months { min-width: 432px; }
  .wgxh-table--months > thead th:nth-child(1) { width: 136px; }
  .wgxh-table--months > thead th:nth-child(2) { width: 100px; }
  .wgxh-table--months > thead th:nth-child(3) { width: 109px; }
  .wgxh-table--months td b { font-size: 14px; line-height: 24px; }
  .wgxh-mo .wgxh-yr__t small, .wgxh-table--near .wgxh-yr__t small { font-size: 10px; line-height: 14px; }
  .wgxh-nearby { grid-template-columns: 1fr; }
  .wgxh-card { border-radius: 0 16px 16px 0; }
  .wgxh-table--near { min-width: 432px; }
  .wgxh-table--near > thead th:nth-child(1) { width: 99px; }
  .wgxh-table--near > thead th:nth-child(2) { width: 104px; }
  .wgxh-table--near > thead th:nth-child(3) { width: 132px; }
  /* the picker on top, previous (right) and next (left) under it */
  .wgxh-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 17px; }
  .wgxh .wgxh-nav__pick { grid-column: 1 / -1; grid-row: 1; }
  .wgxh .wgxh-nav__link--prev { grid-column: 1; grid-row: 2; }
  .wgxh .wgxh-nav__link--next { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .wgxh *, .wgxh *::before, .wgxh *::after { transition: none !important; animation: none !important; }
  .wgxh-change.is-waiting .wgxh-bar { transform: none; }
}