/* INDION Resin Finder — scoped to the new /indion-resins page. */
body:has(.indion-resins-page) { margin: 0; overflow-x: hidden; }

.indion-resins-page {
  --ir-blue-soft: color-mix(in srgb, var(--color-status-info) 8%, white);
  --ir-teal-soft: color-mix(in srgb, var(--color-status-success) 8%, white);
  --ir-amber-soft: color-mix(in srgb, var(--color-status-warning) 6%, white);
  --ir-guidance-blue: color-mix(in srgb, var(--color-status-info) 4%, white);
  --ir-guidance-teal: color-mix(in srgb, var(--color-status-success) 4%, white);
  --ir-guidance-slate: var(--color-surface-neutral-light);
  overflow-x: clip;
  background: var(--color-surface-canvas);
}

/* Plain colours for browsers without color-mix() (Chrome and Edge before 111,
   Safari before 16.2); modern browsers skip this block. 3 Nov 2026. */
@supports not (color: color-mix(in srgb, red, red)) {
  .indion-resins-page {
    --ir-blue-soft: #ecf8fd;
    --ir-teal-soft: #ecf9f8;
    --ir-amber-soft: #fef9f0;
    --ir-guidance-blue: #f5fbfe;
    --ir-guidance-teal: #f6fcfb;
  }
}

.indion-resins-page #resin-finder { scroll-margin-top: 112px; }

.indion-resins-page button,
.indion-resins-page input,
.indion-resins-page select { font: inherit; }

.indion-resins-page input[type='search']::-webkit-search-cancel-button {
  display: none;
  appearance: none;
}

.indion-resins-page :is(button, a, summary):focus-visible {
  outline: var(--border-thick) solid var(--color-brand-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--color-state-focus-ring);
}

.ir-finder-section { background: linear-gradient(180deg, #f5f9fc 0, var(--color-surface-canvas) 460px); }

.ir-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--space-24);
  margin-bottom: var(--space-40);
}

.ir-section-intro .ds-h2 { max-width: 760px; margin: 0; }

.ir-compact-finder {
  position: relative;
  padding: var(--space-32);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: var(--elevation-resting);
}

.ir-compact-finder__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-40);
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border-light);
}

.ir-compact-finder__head h3 { margin: 0; font-family: var(--font-display); font-size: 23px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; }

.ir-finder-controls {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(330px, 1.25fr) minmax(240px, 0.85fr);
  align-items: end;
  gap: var(--space-16);
}

.ir-finder-controls > * { padding: var(--space-12); border: 1px solid rgba(0, 124, 195, 0.1); border-radius: var(--radius-large); }
.ir-finder-controls > :nth-child(1) { background: var(--ir-guidance-blue); }
.ir-finder-controls > :nth-child(2) { border-color: rgba(15, 118, 110, 0.1); background: var(--ir-guidance-teal); }
.ir-finder-controls > :nth-child(3) { border-color: rgba(71, 85, 105, 0.1); background: var(--ir-guidance-slate); }
.ir-smart-select.has-value { border-color: rgba(0, 124, 195, 0.32); box-shadow: inset 0 3px 0 rgba(0, 124, 195, 0.72); }
.ir-smart-select.is-disabled { border-color: var(--color-border-light); background: #f8fafc; }

.ir-smart-select,
.ir-portfolio-search { position: relative; min-width: 0; }

.ir-control-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  color: #475569;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ir-control-label b { display: inline-grid; min-width: 24px; height: 24px; padding-inline: 5px; place-items: center; border-radius: var(--radius-small); color: var(--color-text-inverse); background: var(--color-brand-primary); font-size: 11px; letter-spacing: 0.04em; }
.ir-smart-select.is-disabled .ir-control-label b,
.ir-technical-refinements__toggle:disabled .ir-control-label b { color: var(--color-text-secondary); background: var(--color-border-light); }

.ir-select-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  min-height: 68px;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-medium);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}

.ir-select-trigger > span { display: grid; min-width: 0; gap: var(--space-4); }
.ir-select-trigger strong { overflow: hidden; font-family: var(--font-display); font-size: 13.5px; font-weight: var(--weight-semibold); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ir-select-trigger small { overflow: hidden; color: var(--color-text-secondary); font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ir-select-trigger > svg { flex: none; color: var(--color-text-secondary); transform: rotate(90deg); transition: transform var(--motion-normal), color var(--motion-fast); }
.ir-select-trigger:focus-visible,
.ir-smart-select.is-open .ir-select-trigger { border-color: var(--color-brand-primary); outline: 0; box-shadow: 0 0 0 3px rgba(0, 124, 195, 0.14); }
.ir-smart-select.is-open .ir-select-trigger > svg { color: var(--color-brand-primary); transform: rotate(-90deg); }
.ir-select-trigger:hover { border-color: var(--color-brand-primary); background: var(--color-surface-neutral-light); }
.ir-select-trigger:disabled { border-color: var(--color-border-light); color: var(--color-state-disabled-text); background: var(--color-state-disabled-surface); cursor: not-allowed; }
.ir-smart-select.has-value .ir-select-trigger { border-color: rgba(0, 124, 195, 0.36); background: #ffffff; }

.ir-select-popover {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  left: 0;
  z-index: 30;
  min-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
  box-shadow: var(--elevation-megamenu);
}

.ir-select-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-10, 10px);
  min-height: 52px;
  padding-inline: var(--space-16);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.ir-select-search input { width: 100%; min-width: 0; height: 50px; border: 0; outline: 0; color: var(--color-text-primary); background: transparent; font-size: 13px; }
.ir-select-search input::placeholder { color: #94a3b8; }
.ir-select-search:focus-within { background: #f8fbfd; box-shadow: inset 0 -2px 0 rgba(0, 124, 195, 0.72); }
.ir-select-search input:focus-visible,
.ir-portfolio-search input:focus-visible { outline: 0; box-shadow: none; }
.ir-select-search button,
.ir-portfolio-search button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; color: var(--color-text-secondary); background: transparent; cursor: pointer; }
.ir-select-search button:hover,
.ir-portfolio-search button:hover { color: var(--color-text-primary); background: var(--color-surface-neutral-light); }

.ir-select-listbox { max-height: 390px; overflow-y: auto; padding: var(--space-8); }
.ir-select-group + .ir-select-group { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border-light); }
.ir-select-group > p { margin: var(--space-8) var(--space-8) var(--space-6); color: var(--color-text-secondary); font-family: var(--font-display); font-size: 8px; font-weight: var(--weight-bold); letter-spacing: 0.15em; text-transform: uppercase; }

.ir-select-group [role='option'] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  min-height: 54px;
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-radius: var(--radius-medium);
  color: var(--color-text-primary);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}

.ir-select-group [role='option']:hover,
.ir-select-group [role='option']:focus-visible { background: var(--color-surface-neutral-light); }
.ir-select-group [role='option']:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px rgba(0, 124, 195, 0.32); }
.ir-select-group [role='option'].is-selected { color: var(--color-brand-primary); background: var(--ir-blue-soft); }
.ir-select-group [role='option'] > span:not(.ir-select-option__icon):not(.ir-option-check) { display: grid; min-width: 0; gap: var(--space-2); }
.ir-select-group [role='option'] strong { font-family: var(--font-display); font-size: 12.5px; font-weight: var(--weight-semibold); line-height: 1.35; }
.ir-select-group [role='option'] small { color: var(--color-text-secondary); font-size: 9.5px; line-height: 1.35; }
.ir-select-option__icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--color-border-light); border-radius: 50%; color: var(--color-brand-primary); background: var(--color-surface-card); }
.ir-select-option__icon svg { width: 17px; height: 17px; }
.ir-option-check { color: var(--color-status-success); font-size: 14px; font-weight: var(--weight-bold); }
.ir-select-empty { margin: 0; padding: var(--space-24); color: var(--color-text-secondary); font-size: 12px; text-align: center; }

.ir-portfolio-search > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  min-height: 68px;
  padding-inline: var(--space-16);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-medium);
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.92);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.ir-portfolio-search > div:focus-within { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(0, 124, 195, 0.14); }
.ir-portfolio-search:has(input:not(:placeholder-shown)) { border-color: rgba(0, 124, 195, 0.32); box-shadow: inset 0 3px 0 rgba(0, 124, 195, 0.72); }
.ir-portfolio-search:has(input:not(:placeholder-shown)) > div { border-color: rgba(0, 124, 195, 0.36); background: #ffffff; }
.ir-portfolio-search input { width: 100%; min-width: 0; height: 66px; border: 0; outline: 0; color: var(--color-text-primary); background: transparent; font-size: 13px; }
.ir-portfolio-search input::placeholder { color: #94a3b8; }

.ir-technical-refinements { margin-top: var(--space-24); padding: var(--space-16) var(--space-20); border: 1px solid rgba(0, 124, 195, 0.14); border-radius: var(--radius-large); background: linear-gradient(135deg, var(--ir-guidance-blue), #f8fcfd 58%, var(--ir-guidance-teal)); }
.ir-technical-refinements__toggle {
  display: flex;
  width: 100%;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: 0;
  border: 0;
  color: var(--color-text-primary);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.ir-technical-refinements__toggle > span:first-child { display: grid; gap: var(--space-4); }
.ir-technical-refinements__toggle .ir-control-label { margin: 0; }
.ir-technical-refinements__toggle strong { font-family: var(--font-display); font-size: 15px; font-weight: var(--weight-semibold); }
.ir-technical-refinements__toggle small { color: var(--color-text-secondary); font-size: 11.5px; line-height: 1.45; }
.ir-technical-refinements__toggle:disabled { color: var(--color-state-disabled-text); cursor: not-allowed; }
.ir-technical-refinements:has(.ir-technical-refinements__toggle:disabled) { border-color: var(--color-border-light); background: var(--color-surface-neutral-light); }
.ir-technical-refinements__action { display: flex; flex: none; align-items: center; gap: var(--space-12); color: var(--color-text-secondary); }
.ir-technical-refinements__action b { padding: var(--space-6) var(--space-8); border-radius: var(--radius-pill); color: var(--color-brand-primary); background: var(--ir-blue-soft); font-size: 10px; font-weight: var(--weight-semibold); }
.ir-technical-refinements__action svg { transform: rotate(90deg); transition: transform var(--motion-normal), color var(--motion-fast); }
.ir-technical-refinements.is-open .ir-technical-refinements__action svg { color: var(--color-brand-primary); transform: rotate(-90deg); }

.ir-technical-refinements__panel { margin-top: var(--space-16); padding: var(--space-20); border: 1px solid rgba(0, 124, 195, 0.14); border-radius: var(--radius-large); background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); }
.ir-technical-refinements__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-16); }
.ir-technical-refinements__head .ir-text-button { flex: none; padding: 0; }
.ir-technical-refinements__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.ir-technical-filter { display: grid; min-width: 0; gap: var(--space-8); color: var(--color-text-secondary); font-family: var(--font-display); font-size: 8.5px; font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; }
.ir-technical-filter__select { position: relative; display: block; }
.ir-technical-filter select { width: 100%; min-height: 48px; padding: 0 40px 0 var(--space-12); border: 1px solid var(--color-border-medium); border-radius: var(--radius-medium); outline: 0; color: var(--color-text-primary); background: var(--color-surface-card); cursor: pointer; font-family: var(--font-body); font-size: 12.5px; font-weight: var(--weight-medium); letter-spacing: normal; text-transform: none; appearance: none; }
.ir-technical-filter__select svg { position: absolute; top: 50%; right: var(--space-12); color: var(--color-text-secondary); pointer-events: none; transform: translateY(-50%) rotate(90deg); }
.ir-technical-filter select:hover { border-color: var(--color-brand-primary); }
.ir-technical-filter select:focus-visible { border-color: var(--color-brand-primary); outline: 0; box-shadow: 0 0 0 3px rgba(0, 124, 195, 0.14); }
.ir-technical-filter.has-value { color: var(--color-brand-primary); }
.ir-technical-filter.has-value select { border-color: rgba(0, 124, 195, 0.4); color: var(--color-brand-primary); background: var(--ir-blue-soft); }

.ir-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-16); padding: var(--space-12) var(--space-16); border: 1px solid rgba(15, 118, 110, 0.14); border-radius: var(--radius-medium); background: var(--ir-teal-soft); }
.ir-active-filters button { display: inline-flex; max-width: 100%; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border: 1px solid rgba(0, 124, 195, 0.2); border-radius: var(--radius-pill); color: var(--color-brand-primary); background: #ffffff; cursor: pointer; font-size: 10.5px; line-height: 1.35; }
.ir-active-filters button:hover { border-color: var(--color-brand-primary); }

.ir-clear-button,
.ir-text-button,
.ir-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border: 0;
  color: var(--color-brand-primary);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.ir-clear-button:hover,
.ir-text-button:hover,
.ir-card-link:hover { color: var(--color-state-hover-primary); }

.ir-results { padding-top: var(--space-64); }
.ir-results__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); margin-bottom: var(--space-32); padding: var(--space-20) var(--space-24); border-radius: var(--radius-medium); background: linear-gradient(90deg, var(--ir-guidance-blue), #ffffff 72%); box-shadow: var(--elevation-resting); }
.ir-results__header .ds-eyebrow { margin: 0 0 var(--space-12); }
.ir-results__header h2 { margin: 0; }
.ir-results__header p:not(.ds-eyebrow) { margin: var(--space-8) 0 0; color: var(--color-text-secondary); font-size: 13px; }
.ir-clear-button { flex: none; padding: var(--space-8); }

/* Zero-result state: the amber .ir-no-match card below already carries the
   "nothing here" message — drop this header back to a plain status line so
   it doesn't read as a second, contradicting "results found" card. */
.ir-results__header--empty { margin-bottom: var(--space-20); padding: 0; border: 0; border-radius: 0; background: none; }

.ir-no-match {
  display: grid;
  min-height: 260px;
  align-content: center;
  justify-items: center;
  padding: var(--space-40);
  border-radius: var(--radius-large);
  text-align: center;
}

/* Dark-navy call-to-action treatment for 9R's "Application review required"
   state, so an unsupported combination reads as a deliberate next step. */
.ir-no-match { background: var(--color-surface-industrial-dark); box-shadow: var(--elevation-resting); }
/* Since 3 Nov 2026 the state holds only the "Talk to an Application Expert"
   button (Rajesh: the review wording is off the page), so the band fits it. */
.ir-no-match { min-height: 0; }
.ir-no-match h3 { max-width: 650px; margin: 0 0 var(--space-24); color: var(--color-text-inverse); font-family: var(--font-display); font-size: 24px; }

.ir-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }

.ir-product-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 370px;
  flex-direction: column;
  padding: var(--space-24);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
  box-shadow: var(--elevation-flat);
  transition: border-color var(--motion-normal), box-shadow var(--motion-normal), transform var(--motion-normal);
  overflow: hidden;
}

.ir-product-card:hover { border-color: rgba(0, 124, 195, 0.25); box-shadow: var(--elevation-hover); transform: translateY(-3px); }
.ir-product-card__topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.ir-product-card__number { color: var(--color-border-medium); font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.18em; }

.ir-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-small);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ir-status--review { color: #a16207; background: var(--ir-amber-soft); }

.ir-product-card h3 { margin: var(--space-20) 0 var(--space-12); font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: -0.02em; }
.ir-product-card__hook { min-height: 45px; margin: 0; color: var(--color-text-secondary); font-size: 13.5px; line-height: 1.65; }

.ir-tag-row { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); }
.ir-tag-row > span { padding: var(--space-8) var(--space-12); border: 1px solid var(--color-border-light); border-radius: var(--radius-pill); color: var(--color-text-secondary); background: var(--color-surface-neutral-light); font-size: 11px; line-height: 1.35; }
.ir-tag-row--compact { min-height: 32px; margin-top: var(--space-16); }
.ir-tag-row--compact > span { padding: var(--space-6) var(--space-8); font-size: 11px; }

.ir-product-card__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: auto; padding-top: var(--space-20); }
.ir-card-link { justify-content: flex-start; padding: 0; }
.ir-card-link svg { transition: transform var(--motion-normal); }
.ir-card-link:hover svg { transform: translateX(3px); }
.indion-resins-page .ir-product-card__actions > a { color: var(--color-text-secondary); font-size: 11px; font-weight: var(--weight-semibold); }
.indion-resins-page .ir-product-card__actions > a:hover { color: var(--color-brand-primary); }

.ir-load-more { display: flex; align-items: center; justify-content: center; gap: var(--space-20); margin-top: var(--space-40); }
.ir-load-more .btn { color: var(--color-text-primary); }
.ir-load-more > span { color: var(--color-text-secondary); font-family: var(--font-display); font-size: 9px; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; }



.ir-drawer-root { position: fixed; z-index: 500; inset: 0; }
.ir-drawer__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(2, 11, 20, 0.64); cursor: pointer; backdrop-filter: blur(3px); }
.ir-drawer { position: absolute; top: 0; right: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(760px, 94vw); height: 100%; background: var(--color-surface-card); box-shadow: -24px 0 70px rgba(2, 11, 20, 0.28); animation: ir-drawer-in var(--motion-immersive) both; }

@keyframes ir-drawer-in { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: none; } }

.ir-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); padding: var(--space-32); border-bottom: 1px solid var(--color-border-light); }
.ir-drawer__header .ir-status { margin-bottom: var(--space-16); }
.ir-drawer__header .ds-label-system { margin: 0 0 var(--space-12); color: var(--color-text-secondary); font-size: 10px; }
.ir-drawer__header h2 { margin: 0; }
.ir-icon-button { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border: 1px solid var(--color-border-light); border-radius: 50%; color: var(--color-text-primary); background: var(--color-surface-card); cursor: pointer; transition: color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-normal); }
.ir-icon-button:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); transform: rotate(5deg); }

.ir-drawer__body { overflow-y: auto; padding: 0 var(--space-32); }
.ir-drawer__section { padding-block: var(--space-32); border-bottom: 1px solid var(--color-border-light); }
.ir-drawer__section:last-child { border-bottom: 0; }
.ir-drawer__section > .ds-label-system { display: block; margin-bottom: var(--space-12); color: var(--color-brand-primary); font-size: 10.5px; }
.ir-drawer__section h3 { margin: 0 0 var(--space-16); font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-semibold); }
.ir-drawer__section > p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.7; }
/* 9R field label ("Target industrial verticals") above the card's STEP 1 tags. */
.ir-drawer__section > .ir-drawer__label { margin: var(--space-20) 0 0; color: var(--color-text-secondary); font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-bold); line-height: 1.3; letter-spacing: 0.13em; text-transform: uppercase; }
.ir-drawer__label + .ir-tag-row { margin-top: var(--space-12); }
.ir-drawer__intro > p { margin: 0 0 var(--space-24); color: var(--color-text-primary); font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-medium); line-height: 1.5; }

.ir-fact-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-24); margin: 0; border-top: 1px solid var(--color-border-light); }
.ir-fact-pairs > div { padding: var(--space-20) 0; border-bottom: 1px solid var(--color-border-light); }
.ir-fact-pairs > div:last-child { grid-column: 1 / -1; }
.ir-fact-pairs dt { margin-bottom: var(--space-8); color: var(--color-text-secondary); font-family: var(--font-display); font-size: 10px; font-weight: var(--weight-bold); letter-spacing: 0.13em; text-transform: uppercase; }
.ir-fact-pairs dd { margin: 0; color: var(--color-text-primary); font-size: 14px; line-height: 1.6; }
.ir-structured-facts { display: grid; margin: 0; border-top: 1px solid var(--color-border-light); }
.ir-structured-facts > div { display: grid; grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr); gap: var(--space-16); padding-block: var(--space-12); border-bottom: 1px solid var(--color-border-light); }
.ir-structured-facts > div:last-child { border-bottom: 0; }
.ir-structured-facts > div > dt { margin: 0; color: var(--color-text-secondary); font-size: 9.5px; line-height: 1.45; letter-spacing: 0.1em; }
.ir-structured-facts > div > dd { color: var(--color-text-primary); font-size: 14px; font-weight: var(--weight-medium); line-height: 1.5; overflow-wrap: anywhere; }


.ir-drawer__section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-20); }
.ir-drawer__section-head .ds-label-system { display: block; margin-bottom: var(--space-12); color: var(--color-brand-primary); font-size: 10.5px; }
.ir-drawer__section-head h3 { margin: 0; }

.ir-spec-table-wrap { overflow-x: auto; border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); }
.ir-spec-table { width: 100%; border-collapse: collapse; text-align: left; }
.ir-spec-table th,
.ir-spec-table td { padding: var(--space-16); border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
.ir-spec-table tbody th { width: 42%; color: var(--color-text-secondary); font-size: 13.5px; font-weight: var(--weight-medium); }
.ir-spec-table td { color: var(--color-text-primary); font-size: 14px; line-height: 1.6; }
.ir-spec-table tbody tr:last-child :is(th, td) { border-bottom: 0; }


.ir-evidence-box { padding: var(--space-24); border: 1px solid var(--color-border-light); border-radius: var(--radius-medium); background: var(--color-surface-neutral-light); }
.ir-evidence-box > p { margin: var(--space-12) 0 0; color: var(--color-text-primary); font-size: 14px; line-height: 1.7; }
.ir-evidence-box > .ds-label-system { display: block; color: var(--color-brand-primary); font-size: 11px; }
.ir-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); margin: var(--space-20) 0 0; }
/* 9R "Download TDS" / "Download SDS": disabled until a controlled file exists. */
.ir-document-button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-8); width: 100%; min-height: 46px; padding: var(--space-10, 10px) var(--space-12); border: 1px solid rgba(0, 124, 195, 0.2); border-radius: var(--radius-small); color: var(--color-brand-primary); background: var(--ir-blue-soft); font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.3; text-align: left; text-decoration: none; }
a.ir-document-button:hover { border-color: var(--color-brand-primary); background: #dff1fa; }
.ir-document-button:disabled { border-color: var(--color-border-light); color: var(--color-state-disabled-text); background: var(--color-state-disabled-surface); cursor: not-allowed; opacity: 1; }
.ir-evidence-box .ir-source { margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--color-border-light); color: var(--color-text-secondary); font-size: 12.5px; }

.ir-drawer__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--space-20) var(--space-32); border-top: 1px solid var(--color-border-light); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); }

/* Master #9R spec-table qualifier, e.g. "Semi Dry Product 20 – 30 %". */
.ir-drawer__section > .ir-spec-note { margin: 0 0 var(--space-12); padding: var(--space-8) var(--space-12); border-left: 3px solid var(--color-brand-primary); border-radius: var(--radius-small); color: var(--color-text-primary); background: var(--ir-blue-soft); font-size: 13px; font-weight: var(--weight-medium); line-height: 1.5; }

/* Browse routes (26 Oct 2026 review build): the guided finder plus the
   categorization matrix's Product, Industry and Application lists, as tabs
   over the shared results grid. Built from the finder's own tokens and
   components; every new rule sets its own type so nothing falls through to
   the legacy bundle. Nothing here renders below the 11px floor. */
.ir-route-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  box-shadow: var(--elevation-resting);
}

.ir-route-tabs [role='tab'] {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid transparent;
  border-radius: var(--radius-large);
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: center;
  scroll-margin-top: 112px;
  transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
}

.ir-route-tabs [role='tab']:hover { color: var(--color-brand-primary); background: var(--color-surface-neutral-light); }
.ir-route-tabs [role='tab'].is-active { border-color: rgba(0, 124, 195, 0.32); color: var(--color-brand-primary); background: var(--ir-blue-soft); box-shadow: inset 0 3px 0 rgba(0, 124, 195, 0.72); }
.ir-route-tabs [role='tab'] b,
.ir-route-chip b { display: inline-grid; min-width: 26px; height: 24px; flex: none; padding-inline: 6px; place-items: center; border-radius: var(--radius-pill); color: var(--color-text-secondary); background: var(--color-surface-neutral-light); font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-bold); line-height: 1; }
.ir-route-tabs [role='tab'].is-active b { color: var(--color-text-inverse); background: var(--color-brand-primary); }

.ir-route-panel .ir-compact-finder__head { margin-bottom: var(--space-20); }
.ir-route-search { padding: var(--space-12); border: 1px solid rgba(71, 85, 105, 0.1); border-radius: var(--radius-large); background: var(--ir-guidance-slate); }

.ir-name-index {
  max-height: 420px;
  margin-top: var(--space-16);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-large);
  background: var(--color-surface-card);
}

.ir-name-index:focus-visible { outline: var(--border-thick) solid var(--color-brand-primary); outline-offset: 3px; }
.ir-name-index__group { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12); border-bottom: 1px solid var(--color-border-light); }
.ir-name-index__group:last-child { border-bottom: 0; }
.ir-name-index__key { margin: 0; padding-top: var(--space-6); color: var(--color-brand-primary); font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-bold); line-height: 1.3; }
.ir-name-index ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4) var(--space-12); margin: 0; padding: 0; list-style: none; }
.ir-name-index li button { display: block; width: 100%; padding: var(--space-6) var(--space-8); border: 0; border-radius: var(--radius-small); color: var(--color-text-primary); background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-medium); line-height: 1.4; text-align: left; transition: color var(--motion-fast), background-color var(--motion-fast); }
.ir-name-index li button:hover { color: var(--color-brand-primary); background: var(--ir-blue-soft); }
.ir-name-index__brand { color: var(--color-text-secondary); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.06em; }
.ir-name-index .ir-select-empty { padding-inline: 0; }

.ir-route-group + .ir-route-group { margin-top: var(--space-20); }
.ir-route-group__label { margin: 0 0 var(--space-12); color: var(--color-text-secondary); font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-bold); line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; }
.ir-route-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }

.ir-route-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  min-height: 68px;
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-medium);
  color: var(--color-text-primary);
  background: var(--color-surface-card);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast);
}

.ir-route-tile:hover { border-color: var(--color-brand-primary); background: var(--color-surface-neutral-light); }
.ir-route-tile.is-selected { border-color: rgba(0, 124, 195, 0.36); background: var(--ir-blue-soft); box-shadow: inset 0 3px 0 rgba(0, 124, 195, 0.72); }
.ir-route-tile > span:last-child { display: grid; min-width: 0; gap: var(--space-2); }
.ir-route-tile strong { font-family: var(--font-display); font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.35; }
.ir-route-tile.is-selected strong { color: var(--color-brand-primary); }
.ir-route-tile small { color: var(--color-text-secondary); font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-regular, 400); line-height: 1.35; }

.ir-route-contexts { margin-top: var(--space-24); padding-top: var(--space-20); border-top: 1px solid var(--color-border-light); }
.ir-route-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.ir-route-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 40px;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  background: var(--color-surface-card);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-align: left;
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}

.ir-route-chip:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.ir-route-chip.is-selected { border-color: var(--color-brand-primary); color: var(--color-text-inverse); background: var(--color-brand-primary); }
.ir-route-chip.is-selected b { color: var(--color-brand-primary); background: var(--color-surface-card); }

@media (max-width: 1100px) {
  .ir-finder-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-portfolio-search { grid-column: 1 / -1; }
  .ir-technical-refinements__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-route-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ir-compact-finder__head { align-items: flex-start; flex-direction: column; gap: var(--space-12); }
  .ir-route-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-route-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .indion-resins-page #resin-finder { scroll-margin-top: 82px; }
  .ir-compact-finder { padding: var(--space-20); border-radius: var(--radius-large); }
  .ir-compact-finder__head { margin-bottom: var(--space-20); padding-bottom: var(--space-16); }
  .ir-compact-finder__head h3 { font-size: 21px; }
  .ir-finder-controls { grid-template-columns: 1fr; }
  .ir-portfolio-search { grid-column: auto; }
  .ir-select-popover { max-height: min(390px, 52vh); }
  .ir-select-listbox { max-height: min(330px, calc(52vh - 54px)); }
  .ir-select-trigger,
  .ir-portfolio-search > div { min-height: 62px; }
  .ir-portfolio-search input { height: 60px; }
  .ir-active-filters { align-items: flex-start; }
  .ir-technical-refinements__toggle { min-height: 72px; align-items: flex-start; }
  .ir-technical-refinements__toggle small { max-width: 260px; }
  .ir-technical-refinements__panel { padding: var(--space-16); }
  .ir-technical-refinements__head { flex-direction: column; gap: var(--space-12); }
  .ir-technical-refinements__grid { grid-template-columns: 1fr; }
  .ir-results { padding-top: var(--space-48); }
  .ir-results__header { align-items: flex-start; flex-direction: column; }
  .ir-product-grid { grid-template-columns: 1fr; }
  .ir-product-card { min-height: auto; }
  .ir-product-card__hook { min-height: auto; }
  .ir-load-more { flex-direction: column; }
  .ir-drawer { width: 100%; }
  .ir-drawer__header { padding: var(--space-20); }
  .ir-drawer__body { padding: 0 var(--space-20); }
  .ir-fact-pairs { grid-template-columns: 1fr; }
  .ir-fact-pairs > div:last-child { grid-column: auto; }
  .ir-drawer__section-head { align-items: flex-start; flex-direction: column; }
  .ir-document-grid { grid-template-columns: 1fr; }
  .ir-drawer__footer { align-items: stretch; flex-direction: column; padding: var(--space-16) var(--space-20); }
  .ir-drawer__footer .btn { justify-content: space-between; }
  .ir-route-tabs { padding: var(--space-6); }
  .ir-route-tabs [role='tab'] { min-height: 46px; padding-inline: var(--space-8); font-size: 13px; scroll-margin-top: 82px; }
  .ir-route-tile { grid-template-columns: 1fr; align-items: start; gap: var(--space-8); padding: var(--space-12) var(--space-12) var(--space-12); }
  .ir-route-tile .ir-select-option__icon { width: 30px; height: 30px; }
  .ir-route-tile strong { font-size: 13px; }
  .ir-name-index { max-height: 360px; padding-inline: var(--space-12); }
  .ir-name-index__group { grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-8); }
  .ir-name-index ul { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-2) var(--space-8); }
  .ir-name-index li button { padding-inline: var(--space-6); font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-drawer { animation: none; }
  .indion-resins-page *,
  .indion-resins-page *::before,
  .indion-resins-page *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Colour pass (3 Nov 2026, user): the page read white from top to bottom.
   Brand colours only, as on the Digital Solutions pages: Digital's light blue
   (#f3f9fd fill, #cfe6f5 line), brand blue and the dark navy. No layout, size,
   spacing or copy change. */
.indion-resins-page { --ir-light-blue: #f3f9fd; --ir-light-blue-line: #cfe6f5; }
.ir-finder-section { background: linear-gradient(180deg, #e6f2fb 0, var(--ir-light-blue) 560px); }

.ir-route-tabs { border-color: var(--ir-light-blue-line); }
.ir-route-tabs [role='tab'].is-active,
.ir-route-tabs [role='tab'].is-active:hover { border-color: var(--color-brand-primary); color: var(--color-text-inverse); background: var(--color-brand-primary); box-shadow: none; }
.ir-route-tabs [role='tab'].is-active b { color: var(--color-brand-primary); background: var(--color-surface-card); }

/* The site's card tick (Digital Solutions .dsol-card--tick), drawn as a
   background layer so the finder's open dropdowns are never clipped. */
.ir-compact-finder,
.ir-product-card { border-color: var(--ir-light-blue-line); background: linear-gradient(90deg, var(--color-brand-primary), rgba(0, 124, 195, 0)) top / 100% 3px no-repeat, var(--color-surface-card); }
.ir-finder-controls > :is(:nth-child(1), :nth-child(2), :nth-child(3)),
.ir-route-search { border-color: var(--ir-light-blue-line); background: var(--ir-light-blue); }

/* "Which product fits?" as the page's dark navy band, like .ir-no-match. */
.ir-results__header:not(.ir-results__header--empty) { background: radial-gradient(600px 300px at 92% 0, rgba(46, 168, 255, 0.22), transparent 62%), var(--color-surface-industrial-dark); }
.ir-results__header:not(.ir-results__header--empty) h2 { color: var(--color-text-inverse); }
.ir-results__header:not(.ir-results__header--empty) p:not(.ds-eyebrow) { color: var(--color-brand-glow); }
.ir-results__header:not(.ir-results__header--empty) :is(.ir-clear-button, .ir-text-button) { color: var(--color-text-inverse); }

.ir-product-card__number { color: var(--color-brand-primary); }
.ir-tag-row > span { border-color: var(--ir-light-blue-line); color: var(--color-surface-utility-dark); background: var(--ir-light-blue); }

/* Card height and second colour pass (3 Nov 2026, user: cards too tall with
   empty space; more colour without overdoing it). Treatments reused from the
   Digital Solutions pages: the filled blue number badge (.dsol-jm__no), blue
   pill text (#00679F, .dsol-chips), light blue panels and the navy band.
   Copy unchanged. */
.indion-resins-page { --ir-blue-text: #00679f; }

/* Cards size to their content; a grid row takes its tallest card, so the
   links still line up. The 370px minimum left up to 115px of empty card. */
.ir-product-card { min-height: 0; }
.ir-product-card .ir-tag-row--compact { margin-bottom: var(--space-20); }
.ir-product-card__number { padding: 5px 8px; border-radius: var(--radius-small); color: var(--color-text-inverse); background: var(--color-brand-primary); line-height: 1; }
.ir-product-card .ir-tag-row > span { color: var(--ir-blue-text); }
.ir-product-card__actions { margin: auto calc(var(--space-24) * -1) calc(var(--space-24) * -1); padding: var(--space-12) var(--space-24); border-top: 1px solid var(--ir-light-blue-line); background: var(--ir-light-blue); }
.indion-resins-page .ir-product-card__actions > a { color: var(--ir-blue-text); }
.ir-load-more .btn { border-color: var(--ir-light-blue-line); color: var(--ir-blue-text); }

/* Product drawer: navy header band, blue labels, light blue spec labels. */
.ir-drawer__header { border-bottom: 0; background: radial-gradient(600px 300px at 92% 0, rgba(46, 168, 255, 0.22), transparent 62%), var(--color-surface-industrial-dark); }
.ir-drawer__header h2 { color: var(--color-text-inverse); }
.ir-drawer__header .ds-label-system { color: var(--color-brand-glow); }
.ir-drawer__header .ir-icon-button { border-color: rgba(255, 255, 255, 0.28); color: var(--color-text-inverse); background: transparent; }
.ir-drawer__header .ir-icon-button:hover { border-color: var(--color-brand-glow); color: var(--color-brand-glow); }
.ir-fact-pairs dt,
.ir-drawer__label,
.ir-evidence-box > .ds-label-system { color: var(--ir-blue-text); }
.ir-spec-table-wrap { border-color: var(--ir-light-blue-line); }
.ir-spec-table :is(th, td) { border-bottom-color: var(--ir-light-blue-line); }
.ir-spec-table tbody th { color: var(--color-surface-utility-dark); background: var(--ir-light-blue); }

/* Industry and Application lists: light blue tiles and pills, blue counts. */
.ir-select-option__icon { border-color: var(--ir-light-blue-line); background: var(--ir-light-blue); }
.ir-route-tile { border-color: var(--ir-light-blue-line); }
.ir-route-tile small { color: var(--ir-blue-text); }
.ir-route-chip { border-color: var(--ir-light-blue-line); background: var(--ir-light-blue); }
.ir-route-chip b { color: var(--color-text-inverse); background: var(--color-brand-primary); }