/* Quanto price index page (price-index.html). All selectors are prefixed "qpi-".
   Tokens are mapped to the site's own tokens in site.css. Loaded on that page only. */
.qpi {
  --qpi-bg: var(--surface-2);
  --qpi-surface: #FFFFFF;
  --qpi-ink: var(--ink);
  --qpi-ink-2: #3A4640;
  --qpi-muted: var(--text-2);
  --qpi-line: var(--border);
  --qpi-line-2: var(--border-soft);
  --qpi-accent: var(--green);
  --qpi-accent-soft: var(--green-tint);
  --qpi-up: #B4530A;      /* price increase */
  --qpi-down: #1D5FA8;    /* price decrease */
  --qpi-gap: #9AA59E;
  --qpi-notice-bg: #FFF7E8;
  --qpi-notice-line: #E9C98F;
  --qpi-font: var(--font);
  --qpi-font-ar: var(--font-ar);
  --qpi-mono: var(--font);
  --qpi-radius: 12px;
}
.qpi { font-family: var(--qpi-font); color: var(--qpi-ink); background: var(--qpi-bg); padding-block: 8px 48px; line-height: 1.5; }
.qpi[dir="rtl"], [dir="rtl"] .qpi { font-family: var(--qpi-font-ar); }
.qpi *, .qpi *::before, .qpi *::after { box-sizing: border-box; }
.qpi-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.qpi h1, .qpi h2, .qpi h3 { text-wrap: balance; margin: 0; }
.qpi h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.01em; }
.qpi h2 { font-size: 22px; }
.qpi h3 { font-size: 16px; }
.qpi p { margin: 0; }
.qpi a { color: var(--qpi-accent); }
.qpi-muted { color: var(--qpi-muted); font-size: 14px; }
.qpi-small { font-size: 13px; }
.qpi-eyebrow { font-family: var(--qpi-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qpi-accent); }
[dir="rtl"] .qpi-eyebrow { font-family: var(--qpi-font-ar); letter-spacing: 0; }
.qpi :focus-visible { outline: 3px solid var(--qpi-accent); outline-offset: 2px; }

/* Notice */
.qpi-notice { display: flex; flex-wrap: wrap; gap: 2px 8px; background: var(--qpi-notice-bg); border: 1px solid var(--qpi-notice-line); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: var(--qpi-ink-2); margin-bottom: 16px; }
.qpi-notice strong { color: var(--qpi-ink); }
.qpi-notice a { font-weight: 600; }

/* Card + table */
.qpi-card { background: var(--qpi-surface); border: 1px solid var(--qpi-line); border-radius: 14px; overflow: hidden; }
.qpi-card__head { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.qpi-tabs { display: flex; gap: 4px; padding: 14px 12px 0; overflow-x: auto; border-bottom: 1px solid var(--qpi-line); }
.qpi-tab { font: inherit; flex-shrink: 0; min-height: 48px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--qpi-ink-2); cursor: pointer; font-size: 15px; }
.qpi-tab[aria-selected="true"] { border-bottom-color: var(--qpi-accent); color: var(--qpi-ink); font-weight: 600; }
.qpi-tablewrap { overflow-x: auto; }
.qpi-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 15px; }
.qpi-table--compact { min-width: 520px; }
.qpi-table th { text-align: start; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--qpi-muted); background: var(--qpi-bg); padding: 11px 16px; white-space: nowrap; }
[dir="rtl"] .qpi-table th { letter-spacing: 0; }
.qpi-table td { padding: 13px 16px; border-top: 1px solid var(--qpi-line-2); vertical-align: middle; }
.qpi-table td.qpi-sub { color: var(--qpi-ink-2); font-size: 14px; }
.qpi-num { text-align: end !important; font-family: var(--qpi-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.qpi-num { font-weight: 600; }
.qpi-table th.qpi-rowhead { text-align: start; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 15px; color: inherit; background: transparent; border-top: 1px solid var(--qpi-line-2); white-space: normal; padding: 13px 16px; }
.qpi-table tr.is-selected td, .qpi-table tr.is-selected th.qpi-rowhead { background: var(--qpi-accent-soft); }
.qpi-up { color: var(--qpi-up); } .qpi-down { color: var(--qpi-down); } .qpi-flat { color: var(--qpi-muted); }
.qpi-hbtn { font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #C9D0C6; border-radius: 8px; background: var(--qpi-surface); color: var(--qpi-accent); cursor: pointer; white-space: nowrap; }
.qpi-hbtn:hover { border-color: var(--qpi-accent); background: var(--qpi-accent-soft); }
.qpi-foot { padding: 12px 20px; background: var(--qpi-bg); border-top: 1px solid var(--qpi-line); }

/* History (dialog) */
.qpi-history { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.qpi-history__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: flex-start; }
.qpi-history__head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qpi-seg { display: flex; gap: 6px; }
.qpi-seg button { font: inherit; font-size: 14px; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid #C9D0C6; background: var(--qpi-surface); color: var(--qpi-ink); cursor: pointer; }
.qpi-seg button[aria-pressed="true"] { background: var(--qpi-ink); color: #fff; border-color: var(--qpi-ink); }
.qpi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.qpi-stat { background: var(--qpi-bg); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.qpi-stat span:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--qpi-muted); }
.qpi-stat strong { font-family: var(--qpi-mono); font-size: 19px; font-variant-numeric: tabular-nums; }
.qpi-stat span:last-child { font-size: 13px; color: var(--qpi-muted); }
.qpi-chart { position: relative; width: 100%; }
.qpi-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.qpi-chart .qpi-axis { font-family: var(--qpi-mono); font-size: 12px; fill: var(--qpi-muted); }
.qpi-chart .qpi-dot { cursor: pointer; }
.qpi-chart .qpi-dot:focus { outline: none; }
.qpi-chart .qpi-dot:focus-visible circle.qpi-dot__mark { stroke: var(--qpi-ink); stroke-width: 3; }
.qpi-tip { position: absolute; pointer-events: none; background: var(--qpi-ink); color: #fff; border-radius: 8px; padding: 7px 11px; font-size: 13px; line-height: 1.35; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); }
.qpi-tip b { display: block; font-family: var(--qpi-mono); font-size: 15px; }
.qpi-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--qpi-ink-2); }
.qpi-chart-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.qpi-key { display: inline-block; width: 24px; }
.qpi-key--line { height: 3px; background: var(--qpi-accent); border-radius: 2px; }
.qpi-key--gap { border-top: 2px dashed var(--qpi-gap); }

/* CTA, method, legal */
.qpi-cta { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; background: var(--qpi-ink); color: #F6F7F4; border-radius: 14px; padding: 24px; }
.qpi-cta > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qpi-cta p { color: #C8D1CB; }
.qpi-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 8px; background: #3FBF7F; color: #0E1A13 !important; font-weight: 700; text-decoration: none; }
.qpi-method { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.qpi-method__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; font-size: 14px; color: var(--qpi-ink-2); }
.qpi-method__grid > div { display: flex; flex-direction: column; gap: 6px; }
.qpi-legal { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--qpi-ink-2); }
.qpi-legal ol { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; max-width: 90ch; }
.qpi-legal li strong { color: var(--qpi-ink); }
.qpi-error { background: #FBE9DD; border: 1px solid #E9B48F; border-radius: 10px; padding: 14px 16px; }

@media (prefers-reduced-motion: reduce) { .qpi * { scroll-behavior: auto !important; } }

/* ---- fitting into the site ---- */
:where(.qpi) section { padding: 0; }        /* undo the site's 84px <section> padding, without beating qpi- rules */
.qpi { padding-block: 0 64px; }
.qpi-countries[hidden] { display: none; }
.qpi-countries button { min-height: 44px; font-weight: 600; }
.qpi-cta { max-width: calc(var(--wrap) - 40px); }   /* line up with the cards above */
@media (max-width: 1220px) { .qpi-cta { margin-inline: 20px; } }
.qpi-cities[hidden] { display: none; }
.qpi-empty { margin: 0; padding: 36px 16px; text-align: center; color: var(--qpi-muted); background: var(--qpi-bg); border-radius: 10px; }

/* ---- current-price board ---- */
.qpi-board { padding-top: 28px; }
.qpi-boardhead { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.qpi-boardhead h2 { font-size: 26px; }
.qpi-asof { margin-top: 4px; font-size: 14px; color: var(--qpi-muted); font-variant-numeric: tabular-nums; }
.qpi-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; color: var(--qpi-muted); }
.qpi-search svg { position: absolute; inset-inline-start: 12px; pointer-events: none; }
.qpi-search input { font: inherit; font-size: 15px; width: 100%; min-height: 44px; padding-block: 0; padding-inline: 40px 12px; border: 1px solid var(--qpi-line); border-radius: 10px; background: var(--qpi-surface); color: var(--qpi-ink); }
.qpi-search input:focus { border-color: var(--qpi-accent); outline: none; box-shadow: 0 0 0 3px var(--qpi-accent-soft); }
.qpi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qpi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.qpi-chips[hidden] { display: none; }
.qpi-chip { font: inherit; font-size: 14px; font-weight: 600; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--qpi-line); background: var(--qpi-surface); color: var(--qpi-ink-2); cursor: pointer; }
.qpi-chip:hover { border-color: var(--qpi-accent); color: var(--qpi-accent); }
.qpi-chip[aria-pressed="true"] { background: var(--qpi-accent); border-color: var(--qpi-accent); color: #fff; }
.qpi-boardcard .qpi-tabs { padding-top: 6px; }
.qpi-quotes { padding: 4px 0 8px; }
.qpi-group { font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--qpi-muted); padding: 18px 20px 6px; }
[dir="rtl"] .qpi-group { letter-spacing: 0; }
.qpi-qlist { list-style: none; margin: 0; padding: 0; }
.qpi-q { display: grid; grid-template-columns: minmax(0, 1fr) 190px 190px auto; gap: 8px 20px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--qpi-line-2); }
.qpi-group + .qpi-qlist .qpi-q:first-child { border-top-color: var(--qpi-line); }
.qpi-q:hover { background: #FAFCFB; }
.qpi-q__name { min-width: 0; }
.qpi-q__name h4 { margin: 0; font-size: 16px; font-weight: 600; }
.qpi-q__name p { margin: 2px 0 0; font-size: 14px; color: var(--qpi-ink-2); }
.qpi-q__src { font-size: 12.5px !important; color: var(--qpi-muted) !important; }
.qpi-co { display: inline-block; margin-inline-end: 6px; padding: 1px 8px; border-radius: 999px; background: var(--qpi-bg); border: 1px solid var(--qpi-line-2); font-variant-numeric: tabular-nums; }
.qpi-co b { color: var(--qpi-ink); font-weight: 600; }
.qpi-co--n { background: transparent; border-style: dashed; }
.qpi-q__price { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.qpi-q__price strong { font-size: 24px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.qpi-q__price span { font-size: 13px; color: var(--qpi-muted); }
.qpi-q__meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--qpi-muted); }
.qpi-q__chg { font-weight: 600; font-size: 13.5px; }
.qpi-empty { margin: 16px 20px; }

/* dialog */
.qpi-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 16px; background: var(--qpi-surface); color: var(--qpi-ink); box-shadow: var(--shadow-l); overflow: auto; }
.qpi-dialog::backdrop { background: rgba(20, 32, 43, .55); }
.qpi-dialog[open] { animation: qpi-in .18s ease-out; }
@keyframes qpi-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qpi-history__head { flex-wrap: nowrap; }
.qpi-close { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--qpi-line); border-radius: 10px; background: var(--qpi-surface); color: var(--qpi-ink); cursor: pointer; }
.qpi-close:hover { background: var(--qpi-bg); }
.qpi-hnow { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; background: var(--qpi-accent-soft); }
.qpi-hnow__price strong { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qpi-hnow__price span { color: var(--qpi-muted); }
.qpi-hnow__meta { font-size: 14px; color: var(--qpi-ink-2); }
.qpi-year { margin-bottom: 8px !important; }
.qpi-history h3 { margin-bottom: 8px; }

@media (max-width: 860px) {
  .qpi-q { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "meta btn"; padding: 14px 16px; }
  .qpi-q__name { grid-area: name; } .qpi-q__price { grid-area: price; } .qpi-q__meta { grid-area: meta; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; } .qpi-q .qpi-hbtn { grid-area: btn; justify-self: end; }
  .qpi-q__price strong { font-size: 21px; }
  .qpi-search { flex: 1 1 100%; }
  .qpi-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .qpi-chip { flex-shrink: 0; }
  .qpi-group { padding-inline: 16px; }
  .qpi-history { padding: 18px; }
  .qpi-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}

/* links from the board and the dialog */
.qpi-q__name h4 a { color: inherit; text-decoration: none; }
.qpi-q__name h4 a:hover { color: var(--qpi-accent); text-decoration: underline; }
.qpi-full { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }
.qpi-full:hover { text-decoration: underline; }

/* ---- item detail page (price-item.html) ---- */
.qpi--item { background: #F1F4F7; padding-bottom: 56px; }
.ip-head { background: #fff; border-bottom: 1px solid var(--qpi-line); }
.ip-head .qpi-wrap { padding-block: 22px 24px; }
.ip-crumbs { font-size: 14px; color: var(--qpi-muted); }
.ip-crumbs a { text-decoration: none; }
.ip-crumbs a:hover { text-decoration: underline; }
.ip-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; margin-top: 14px; }
.ip-title { min-width: 0; }
.ip-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #963638; padding: 4px 11px; border-radius: 999px; }
[dir="rtl"] .ip-tag { letter-spacing: 0; }
.qpi--item h1 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; margin: 10px 0 8px; color: #0B1620; }
.ip-price { text-align: end; }
.ip-big { font-size: clamp(36px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #0B1620; font-variant-numeric: tabular-nums; }
.ip-unit { font-size: 16px; color: var(--qpi-muted); font-weight: 600; margin-inline-start: 6px; }
.ip-pill > span { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.ip-pill .qpi-up { background: #FDE7D6; color: #9A3E00; } .ip-pill .qpi-down { background: #DCEBFB; color: #124F93; } .ip-pill .qpi-flat { background: #EEF1F4; color: #3A4A58; }
.ip-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 22px; align-items: start; }
.ip-main, .ip-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ip-card { background: #fff; border: 1px solid var(--qpi-line); border-radius: 16px; padding: 20px 22px; min-width: 0; }
.ip-card h2 { font-size: 18px; color: #0B1620; }
.ip-sub { margin: 4px 0 12px !important; font-size: 13.5px; color: var(--qpi-muted); }
.ip-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.ip-kpis div { border-inline-start: 3px solid var(--qpi-accent); padding: 2px 10px; min-width: 0; }
.ip-kpis span { display: block; font-size: 12px; color: var(--qpi-muted); text-transform: uppercase; letter-spacing: .04em; }
[dir="rtl"] .ip-kpis span { letter-spacing: 0; }
.ip-kpis strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.ip-years { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ip-years div { background: #F7F9FA; border: 1px solid var(--qpi-line-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ip-years span:first-child { font-size: 13px; color: var(--qpi-muted); }
.ip-years strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.ip-years small { font-size: 12.5px; color: var(--qpi-muted); }
.ip-years .ip-pill { margin-top: 4px; }
.ip-facts { margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 14px; font-size: 14.5px; }
.ip-facts dt { color: var(--qpi-muted); }
.ip-facts dd { margin: 0; font-weight: 600; color: var(--qpi-ink); }
.ip-cta { background: #1B3346; border: 0; color: #fff; }
.ip-cta h2 { color: #fff; }
.ip-cta p { color: #C9D6E0; font-size: 14px; margin: 6px 0 14px; }
.ip-cta__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: #fff; color: #0B1620 !important; font-weight: 700; border-radius: 10px; text-decoration: none; }
.ip-rel { margin-top: 22px; }
.ip-rel h2 { font-size: 18px; margin-bottom: 10px; }
.ip-rel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ip-rel a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--qpi-line); border-top: 3px solid var(--qpi-accent); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: #0B1620; background: #fff; }
.ip-rel a:hover { border-color: var(--qpi-accent); background: #F4FAF7; }
.ip-rel a span { font-weight: 700; font-size: 14.5px; }
.ip-rel a small { color: var(--qpi-muted); font-size: 12.5px; }
.ip-rel a b { margin-top: auto; padding-top: 8px; font-size: 19px; font-variant-numeric: tabular-nums; }
.qpi--item .qpi-back { margin-top: 18px; font-weight: 600; }
.qpi--item .qpi-back a { text-decoration: none; }
.qpi--item #qpi-disclaimer { margin-top: 18px; }
.ip-legal { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--qpi-ink-2); }
.qpi--item .qpi-empty { margin: 24px 0; }
@media (max-width: 900px) {
  .ip-top, .ip-body { grid-template-columns: minmax(0, 1fr); }
  .ip-price { text-align: start; }
  .ip-rel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-card { padding: 16px; }
  .ip-kpis strong { font-size: 16px; }
}

/* item page header (option B): dark banner with title + price, emirate tabs along its bottom edge */
.ip-head { border-bottom: 0; color: #fff; background:
   radial-gradient(900px 420px at 85% 0%, rgba(49,160,106,.30), transparent 60%),
   radial-gradient(700px 360px at 5% 120%, rgba(90,150,210,.22), transparent 60%),
   linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/48px 48px,
   #1B3346; }
html[dir="rtl"] .ip-head { background:
   radial-gradient(900px 420px at 15% 0%, rgba(49,160,106,.30), transparent 60%),
   radial-gradient(700px 360px at 95% 120%, rgba(90,150,210,.22), transparent 60%),
   linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/48px 48px,
   #1B3346; }
.ip-head .qpi-wrap { padding-block: 40px 0; }
.ip-crumbs { color: #9FB1C0; }
.ip-crumbs a { color: #6FD3A0; }
.qpi--item .ip-head h1 { color: #fff; margin-bottom: 0; }
.ip-top { align-items: end; }
.ip-line { margin: 8px 0 0 !important; font-size: 15px; line-height: 1.5; color: #B8C7D3;
  min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* always two lines high, so the banner height never changes */
.ip-pricecol { text-align: end; }
.ip-pricecol .ip-cos { max-width: 420px; margin-inline-start: auto !important; }
.ip-cos { margin: 8px 0 0 !important; font-size: 12.5px; color: #B8C7D3; }
.ip-cos .qpi-co { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #D5E0E8; }
.ip-cos .qpi-co b { color: #fff; }
.ip-big { color: #fff; }
.ip-unit { color: #B8C7D3; }
.ip-pillrow { margin-top: 10px; }
.ip-tabs { display: flex; gap: 4px; margin-top: 28px; overflow-x: auto; scrollbar-width: none; }
.ip-tabs::-webkit-scrollbar { display: none; }
.ip-tabs a { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; padding: 12px 18px 14px; border-radius: 12px 12px 0 0; text-decoration: none; background: rgba(255,255,255,.06); color: #C9D6E0; }
.ip-tabs a span { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.ip-tabs a small { font-size: 13px; font-weight: 700; color: #9FB1C0; font-variant-numeric: tabular-nums; }
.ip-tabs a:hover { background: rgba(255,255,255,.12); color: #fff; }
.ip-tabs a.is-on { background: #F1F4F7; color: #0B1620; }
.ip-tabs a.is-on small { color: var(--qpi-accent); }
.ip-tabs .ip-em__note { align-self: center; padding: 0 12px 12px; font-size: 13px; color: #9FB1C0; white-space: nowrap; }
.qpi--item .ip-notice { margin: 18px 2px 0; font-size: 13px; color: var(--qpi-muted); }
.ip-notice strong { color: var(--qpi-ink-2); }
.ip-notice a { font-weight: 600; }
.qpi--item .ip-body { margin-top: 16px; }
@media (max-width: 900px) {
  .ip-head .qpi-wrap { padding-top: 32px; }
  .ip-tabs { margin-top: 22px; margin-inline: -20px; padding-inline: 20px; }
}
@media (max-width: 900px) {
  .ip-line { min-height: 4.5em; -webkit-line-clamp: 3; }   /* phones: three lines reserved */
  .ip-pricecol { text-align: start; }
  .ip-pricecol .ip-cos { margin-inline-start: 0 !important; }
}
@media (max-width: 900px) {   /* phones: fixed banner height too — 2 lines for the name, 1 line for company prices */
  .qpi--item .ip-head h1 { font-size: 26px; line-height: 1.2; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ip-pricecol .ip-cos, .ip-pricecol .ip-cos[hidden] { display: block; min-height: 24px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ip-pricecol .ip-cos[hidden] { visibility: hidden; }
}
.ip-crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line, so the banner height stays fixed */
@media (min-width: 901px) { .qpi--item .ip-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* price list (item page side column): category dropdown, one linked row per item */
.ip-body { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 900px) { .ip-body { grid-template-columns: minmax(0, 1fr); } }
.ip-watch { padding: 16px 16px 8px; }
.iw-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.iw-top h2 { font-size: 18px; }
.iw-select select { font: inherit; font-size: 14px; font-weight: 600; min-height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--qpi-line); border-radius: 10px; background: #fff; color: var(--qpi-ink); cursor: pointer; max-width: 200px; }
[dir="rtl"] .iw-select select { padding: 0 12px 0 30px; }
.iw-list { list-style: none; margin: 0 -6px; padding: 0; }
.iw-list li + li { border-top: 1px solid var(--qpi-line-2); }
.iw-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; color: var(--qpi-ink); text-decoration: none; }
.iw-list a:hover { background: #F5F8FB; }
.iw-list a.is-cur { background: #EAF2FB; }
.iw-desc { display: flex; flex-direction: column; min-width: 0; }
.iw-desc b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.iw-desc small { font-size: 12.5px; color: var(--qpi-muted); }
.iw-val { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: end; }
.iw-val b { font-size: 15px; font-variant-numeric: tabular-nums; }
.iw-ind { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.iw-ind.qpi-up { color: #1E8A4C; } .iw-ind.qpi-down { color: #C62828; } .iw-ind.qpi-flat { color: var(--qpi-muted); }
.iw-top h2 { white-space: nowrap; } .iw-select { min-width: 0; } .iw-select select { max-width: 100%; }

/* price list block: dark header with title and a full-width category dropdown, then the list */
.ip-watch { padding: 0; overflow: hidden; border: 1px solid #1B3346; box-shadow: 0 10px 30px rgba(20,32,43,.12); }
.iw-top { display: block; margin: 0; padding: 16px 18px 16px; background: #1B3346; color: #fff; }
.iw-top h2 { color: #fff; font-size: 18px; white-space: normal; }
.iw-top p { margin: 2px 0 12px !important; font-size: 13px; color: #B8C7D3; }
.iw-select { display: block; }
.iw-select select { display: block; width: 100%; max-width: none; min-height: 44px; font-size: 15px; border: 0; border-radius: 10px; background-color: #fff; color: #0B1620; }
.iw-list { margin: 0; padding: 6px 8px 8px; }
.ip-watch .qpi-empty { margin: 16px; }
.ip-cta { background: #015345; }   /* Quanto QS green, distinct from the navy price-list header */

/* Fixed item pages (price-<id>.html): text, history table and related items readable without JavaScript */
.ip-seo{margin-top:22px}
.ip-seo h2{margin:0 0 10px}
.ip-seo h3{font-size:1rem;margin:20px 0 8px}
.ip-seo p{margin:0 0 10px;line-height:1.65}
.ip-seo__table{width:100%;max-width:520px;border-collapse:collapse;margin:14px 0 6px;font-size:.95rem}
.ip-seo__table th,.ip-seo__table td{padding:7px 10px;border-bottom:1px solid #e3e8ee;text-align:start}
.ip-seo__table .n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.ip-seo__rel{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 14px}
.ip-seo__rel a{display:inline-block;border:1px solid #d7dee6;border-radius:99px;padding:5px 12px;font-size:.9rem;text-decoration:none}