/* Editorial product pages — shared system for commodity detail pages.
   Loads after sector-editorial.css; body carries:
   sector-editorial product-editorial product-<key>                       */

body.product-editorial {
  --sector-image: none;
  --spec-ink-06: color-mix(in srgb, var(--sector-ink) 6%, transparent);
  --spec-ink-10: color-mix(in srgb, var(--sector-ink) 10%, transparent);
  --spec-ink-16: color-mix(in srgb, var(--sector-ink) 16%, transparent);
  --spec-ink-45: color-mix(in srgb, var(--sector-ink) 45%, transparent);
  --spec-ink-60: color-mix(in srgb, var(--sector-ink) 60%, transparent);
  --spec-ink-75: color-mix(in srgb, var(--sector-ink) 75%, transparent);
  --hero-tint-r: 3; --hero-tint-g: 15; --hero-tint-b: 27;
}

/* ---- per-commodity palettes ------------------------------------------ */
body.product-basestocks {
  --sector-ink: #131c26;
  --sector-paper: #f3f0e7;
  --sector-accent: #f0c46c;
  --sector-accent-rgb: 240, 196, 108;
  --hero-tint-r: 12; --hero-tint-g: 16; --hero-tint-b: 26;
}
body.product-bitumen {
  --sector-ink: #17181c;
  --sector-paper: #f0efeb;
  --sector-accent: #ff9e64;
  --sector-accent-rgb: 255, 158, 100;
  --hero-tint-r: 10; --hero-tint-g: 10; --hero-tint-b: 12;
}
body.product-marine {
  --sector-ink: #071829;
  --sector-paper: #eef1f0;
  --sector-accent: #8fe3f6;
  --sector-accent-rgb: 143, 227, 246;
  --hero-tint-r: 4; --hero-tint-g: 20; --hero-tint-b: 32;
}
body.product-fueloils {
  --sector-ink: #1c1510;
  --sector-paper: #f3f0ea;
  --sector-accent: #ffb35c;
  --sector-accent-rgb: 255, 179, 92;
  --hero-tint-r: 22; --hero-tint-g: 13; --hero-tint-b: 7;
}
body.product-processoils {
  --sector-ink: #12211a;
  --sector-paper: #f0f2ea;
  --sector-accent: #c3e57e;
  --sector-accent-rgb: 195, 229, 126;
  --hero-tint-r: 9; --hero-tint-g: 22; --hero-tint-b: 15;
}
body.product-polymers {
  --sector-ink: #15212a;
  --sector-paper: #f1f2ee;
  --sector-accent: #9dd8d4;
  --sector-accent-rgb: 157, 216, 212;
  --hero-tint-r: 7; --hero-tint-g: 20; --hero-tint-b: 27;
}
body.product-speciality {
  --sector-ink: #231b2b;
  --sector-paper: #f3f0f2;
  --sector-accent: #d8b4e2;
  --sector-accent-rgb: 216, 180, 226;
  --hero-tint-r: 22; --hero-tint-g: 10; --hero-tint-b: 28;
}
body.product-lubricants {
  --sector-ink: #172019;
  --sector-paper: #f1f2ec;
  --sector-accent: #b8d56f;
  --sector-accent-rgb: 184, 213, 111;
  --hero-tint-r: 10; --hero-tint-g: 20; --hero-tint-b: 12;
}
body.product-agriculture {
  --sector-ink: #252014;
  --sector-paper: #f4f1e8;
  --sector-accent: #dfbd65;
  --sector-accent-rgb: 223, 189, 101;
  --hero-tint-r: 27; --hero-tint-g: 21; --hero-tint-b: 7;
}
body.product-edibleoils {
  --sector-ink: #292012;
  --sector-paper: #f5f1e7;
  --sector-accent: #edc85d;
  --sector-accent-rgb: 237, 200, 93;
  --hero-tint-r: 31; --hero-tint-g: 20; --hero-tint-b: 5;
}
body.product-animalnutrition {
  --sector-ink: #202015;
  --sector-paper: #f2f0e8;
  --sector-accent: #c8b971;
  --sector-accent-rgb: 200, 185, 113;
  --hero-tint-r: 23; --hero-tint-g: 20; --hero-tint-b: 9;
}
body.product-oleochemicals {
  --sector-ink: #13231f;
  --sector-paper: #eef2ec;
  --sector-accent: #8fcba7;
  --sector-accent-rgb: 143, 203, 167;
  --hero-tint-r: 7; --hero-tint-g: 23; --hero-tint-b: 17;
}

body.product-editorial { background: var(--sector-paper); color: var(--sector-ink); }

/* ---- hero: editorial header over ambient video ----------------------- */
.product-editorial .page-header::before {
  background:
    linear-gradient(90deg,
      rgba(var(--hero-tint-r), var(--hero-tint-g), var(--hero-tint-b), .94) 0%,
      rgba(var(--hero-tint-r), var(--hero-tint-g), var(--hero-tint-b), .72) 44%,
      rgba(var(--hero-tint-r), var(--hero-tint-g), var(--hero-tint-b), .22) 82%),
    linear-gradient(0deg, rgba(var(--hero-tint-r), var(--hero-tint-g), var(--hero-tint-b), .6), transparent 55%);
  transform: none;
  animation: none;
}
.product-editorial .page-header .hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  filter: saturate(.92) contrast(1.04);
}
.product-editorial .page-header .hero-media.is-ready { opacity: 1; }

.product-editorial .page-header h1 { max-width: 1180px; }
.product-editorial .page-header .breadcrumb-item a { text-decoration: none; }

/* ---- industries intro (replaces the plain range headline) -------------- */
.product-industries {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) 1fr;
  gap: 2rem;
  width: min(100%, 1540px);
  margin: 0 auto clamp(3.5rem, 7vw, 7rem);
  padding: 0 clamp(.5rem, 2vw, 2rem) clamp(3rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--spec-ink-16);
}
.product-industries__kicker {
  padding-top: .65rem;
  color: var(--spec-ink-60);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.product-industries__title {
  max-width: 16ch;
  margin: 0;
  color: var(--sector-ink);
  font-size: clamp(2.3rem, 4.8vw, 5.6rem);
  font-weight: 200;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.product-industries__lead {
  max-width: 640px;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  color: var(--spec-ink-75);
  font-size: clamp(1.05rem, 1.35vw, 1.32rem);
  font-weight: 300;
  line-height: 1.65;
}
.industry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem .7rem;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.industry-chips li {
  padding: .6rem 1.15rem;
  border: 1px solid var(--spec-ink-16);
  border-radius: 999px;
  color: var(--spec-ink-75);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.industry-chips li:hover {
  border-color: color-mix(in srgb, var(--sector-ink) 55%, var(--sector-accent));
  color: var(--sector-ink);
  background: rgba(var(--sector-accent-rgb), .14);
}
@media (max-width: 767.98px) {
  .product-industries { grid-template-columns: 1fr; gap: 1rem; }
  .product-industries__title { max-width: none; }
}

/* ---- range section ---------------------------------------------------- */
.product-editorial .range-section {
  counter-reset: none;
  padding: clamp(4rem, 9vw, 8.5rem) clamp(1rem, 3vw, 3.5rem) clamp(3rem, 6vw, 6rem);
  background: var(--sector-paper);
}
.product-editorial .range-section > .container-fluid {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 0 clamp(.5rem, 2vw, 2rem);
}

/* editorial tab index */
.range-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--spec-ink-16);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.range-tabs::-webkit-scrollbar { display: none; }
.range-tabs .nav-item { flex-shrink: 0; }
.range-tabs .nav-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem 0;
  border: 0;
  background: transparent;
  color: var(--spec-ink-45);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  font-weight: 300;
  letter-spacing: -.02em;
  transition: color .3s ease;
}
.range-tabs .nav-link sup {
  top: -.75em;
  color: var(--spec-ink-45);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.range-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: calc(-1.1rem - 1px);
  height: 2px;
  background: var(--sector-ink);
  transition: right .45s cubic-bezier(.16, 1, .3, 1);
}
.range-tabs .nav-link:hover { color: var(--spec-ink-75); }
.range-tabs .nav-link.active { color: var(--sector-ink); }
.range-tabs .nav-link.active::after { right: 0; }

/* group brief */
.range-brief {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) 1fr;
  gap: 2rem;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.range-brief > span {
  padding-top: .5rem;
  color: var(--spec-ink-60);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.range-brief p {
  max-width: 880px;
  margin: 0;
  color: var(--spec-ink-75);
  font-size: clamp(1.05rem, 1.45vw, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
}
.range-brief p strong { color: var(--sector-ink); font-weight: 700; }

/* ---- grade ledger ------------------------------------------------------ */
.grade-ledger {
  border-top: 1px solid var(--spec-ink-16);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.grade-entry {
  border-bottom: 1px solid var(--spec-ink-16);
}
.grade-entry__head { margin: 0; }
.grade-entry__toggle {
  display: grid;
  grid-template-columns: minmax(0, .62fr) 1fr 3rem;
  align-items: baseline;
  gap: clamp(.75rem, 2vw, 2rem);
  width: 100%;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
  border: 0;
  background: transparent;
  color: var(--sector-ink);
  text-align: left;
  cursor: pointer;
  transition: padding-left .45s cubic-bezier(.16, 1, .3, 1);
}
.grade-entry__toggle:hover { padding-left: .6rem; }
.grade-entry__name {
  font-size: clamp(1.55rem, 2.7vw, 2.7rem);
  font-weight: 200;
  letter-spacing: -.03em;
  line-height: 1.05;
  transition: color .3s ease;
}
.grade-entry__tag {
  color: var(--spec-ink-60);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.grade-entry__icon {
  position: relative;
  justify-self: end;
  align-self: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--spec-ink-16);
  border-radius: 50%;
  transition: background .35s ease, border-color .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.grade-entry__icon::before,
.grade-entry__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .85rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}
.grade-entry__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.grade-entry__toggle:hover .grade-entry__icon { border-color: var(--sector-ink); }
.grade-entry__toggle[aria-expanded="true"] .grade-entry__icon {
  background: var(--sector-ink);
  border-color: var(--sector-ink);
  color: var(--sector-paper);
  transform: rotate(180deg);
}
.grade-entry__toggle[aria-expanded="true"] .grade-entry__icon::before { background: var(--sector-paper); }
.grade-entry__toggle[aria-expanded="true"] .grade-entry__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  background: var(--sector-paper);
}

/* expanding body */
.grade-entry__body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1), visibility 0s .6s;
}
.grade-entry.is-open .grade-entry__body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1);
}
.grade-entry__body > .grade-entry__clip {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
}
.grade-entry__grid {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) 1.22fr;
  min-width: 0;
  max-width: 100%;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding: clamp(.5rem, 1.5vw, 1rem) 0 clamp(2.5rem, 4.5vw, 4rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease .1s, transform .6s cubic-bezier(.16, 1, .3, 1) .1s;
}
.grade-entry__grid > *,
.grade-entry__grid [data-spec-mount] {
  min-width: 0;
  max-width: 100%;
}
.grade-entry.is-open .grade-entry__grid { opacity: 1; transform: none; }

.grade-entry__media {
  width: min(100%, 320px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: var(--spec-ink-06);
}
.grade-entry__grid:has(.grade-entry__media) {
  grid-template-columns: minmax(220px, .42fr) minmax(240px, .62fr) 1fr;
}
.grade-entry__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grade-entry__desc {
  margin: 0 0 1.75rem;
  color: var(--spec-ink-75);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.7;
}
.grade-entry__apps { margin: 0 0 2.25rem; padding: 0; list-style: none; }
.grade-entry__apps-label,
.grade-stats__label {
  display: block;
  margin: 0 0 .9rem;
  color: var(--spec-ink-60);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.grade-entry__apps li {
  position: relative;
  padding: .55rem 0 .55rem 1.4rem;
  border-bottom: 1px solid var(--spec-ink-06);
  color: var(--spec-ink-75);
  font-size: .95rem;
  line-height: 1.5;
}
.grade-entry__apps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: .55rem;
  height: 1px;
  background: var(--sector-ink);
}

/* commercial catalogue entries: editorial context without spec-table treatment */
.catalog-entry__label {
  display: block;
  margin: 0 0 .9rem;
  color: var(--spec-ink-60);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.catalog-entry__forms,
.catalog-entry__uses {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalog-entry__forms li,
.catalog-entry__uses li {
  padding: .55rem .85rem;
  border: 1px solid var(--spec-ink-16);
  border-radius: 999px;
  color: var(--spec-ink-75);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
}
.catalog-entry__focus {
  margin: 0 0 1.75rem;
  padding: 0 0 1.6rem;
  border-bottom: 1px solid var(--spec-ink-16);
}
.catalog-entry__focus span {
  display: block;
  margin-bottom: .7rem;
  color: var(--spec-ink-60);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.catalog-entry__focus p {
  max-width: 620px;
  margin: 0;
  color: var(--sector-ink);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  font-weight: 200;
  line-height: 1.45;
  letter-spacing: -.015em;
}

.grade-entry__spec {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.35rem;
  border-left: 2px solid rgba(var(--sector-accent-rgb), .95);
  background: rgba(var(--sector-accent-rgb), .09);
}
.grade-entry__spec > span {
  display: block;
  margin-bottom: .55rem;
  color: var(--spec-ink-60);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.grade-entry__spec p {
  margin: 0;
  color: var(--spec-ink-75);
  font-size: .86rem;
  font-weight: 300;
  line-height: 1.65;
}
.grade-entry__spec strong { color: var(--sector-ink); font-weight: 700; }
.grade-entry__spec--table {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: .5rem;
  padding: 0;
  border-left: 0;
  background: transparent;
}
.grade-entry__spec--table .spec-table { min-width: 760px; }
.grade-entry__spec--table .spec-val { white-space: normal; min-width: 230px; }
.grade-entry__spec--table .spec-method { white-space: normal; min-width: 180px; }
.grade-entry__spec--table .spec-note { max-width: 76ch; }

/* stat tiles */
.grade-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.grade-stats .stat {
  padding-left: 1rem;
  border-left: 2px solid rgba(var(--sector-accent-rgb), .9);
}
.grade-stats .stat b {
  display: block;
  color: var(--sector-ink);
  font-size: clamp(1.35rem, 1.9vw, 1.9rem);
  font-weight: 200;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grade-stats .stat span {
  display: block;
  margin-top: .45rem;
  color: var(--spec-ink-60);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.45;
}

/* spec table */
.spec-block__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin: 0 0 .8rem;
}
.spec-block__caption strong {
  color: var(--sector-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.spec-block__caption span {
  color: var(--spec-ink-60);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.spec-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.spec-table thead th {
  padding: .55rem 1.25rem .55rem 0;
  border-top: 1px solid var(--sector-ink);
  border-bottom: 1px solid var(--spec-ink-16);
  color: var(--spec-ink-60);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.spec-table tbody td {
  padding: .68rem 1.25rem .68rem 0;
  border-bottom: 1px solid var(--spec-ink-10);
  color: var(--spec-ink-75);
  vertical-align: top;
  line-height: 1.45;
}
.spec-table tbody tr:last-child td { border-bottom: 1px solid var(--spec-ink-16); }
.spec-table td.spec-char { min-width: 15ch; }
.spec-table td.spec-unit {
  color: var(--spec-ink-45);
  font-size: .8rem;
  white-space: nowrap;
}
.spec-table td.spec-val {
  color: var(--sector-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spec-table td.spec-method {
  padding-right: 0;
  color: var(--spec-ink-45);
  font-size: .8rem;
  white-space: nowrap;
}
.spec-table tbody tr { transition: background .25s ease; }
.spec-table tbody tr:hover { background: rgba(var(--sector-accent-rgb), .08); }

.spec-note {
  margin: 1rem 0 0;
  color: var(--spec-ink-45);
  font-size: .78rem;
  line-height: 1.55;
}
.spec-note + .spec-note { margin-top: .35rem; }

/* download button */
.spec-download {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: .5rem;
  padding: .95rem 1.6rem;
  border: 1px solid var(--sector-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--sector-ink);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.spec-download svg { width: .9rem; height: .9rem; flex-shrink: 0; }
.spec-download svg .dl-arrow { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.spec-download:hover,
.spec-download:focus-visible {
  background: var(--sector-ink);
  color: var(--sector-paper);
  outline: none;
}
.spec-download:hover svg .dl-arrow { transform: translateY(2px); }
.spec-download[disabled] { opacity: .55; cursor: progress; }

/* footnote under ledger */
.range-footnote {
  max-width: 880px;
  margin: 0;
  color: var(--spec-ink-45);
  font-size: .82rem;
  line-height: 1.6;
}
.range-footnote a { color: var(--sector-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--spec-ink-45); }
.range-footnote a:hover { border-color: var(--sector-ink); }

/* ---- commodity atlas -------------------------------------------------- */
.commodity-atlas {
  margin: 0 0 clamp(4rem, 8vw, 7rem);
}
.commodity-atlas__intro {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) 1fr;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.commodity-atlas__eyebrow,
.standards-hierarchy__eyebrow {
  padding-top: .55rem;
  color: var(--spec-ink-60);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.commodity-atlas__intro h2,
.standards-hierarchy__intro h2 {
  max-width: 19ch;
  margin: 0;
  color: var(--sector-ink);
  font-size: clamp(2rem, 4vw, 4.4rem);
  font-weight: 200;
  letter-spacing: -.045em;
  line-height: 1;
  text-wrap: balance;
}
.commodity-atlas__intro p,
.standards-hierarchy__intro p {
  max-width: 720px;
  margin: 1.35rem 0 0;
  color: var(--spec-ink-75);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.7;
}
.commodity-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
.commodity-card {
  grid-column: span 4;
  position: relative;
  min-height: clamp(430px, 48vw, 650px);
  overflow: hidden;
  background: var(--sector-ink);
  color: #fff;
  isolation: isolate;
}
.commodity-card:nth-child(2) { margin-top: clamp(1.5rem, 5vw, 5rem); }
.commodity-card__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), filter .7s ease;
}
.commodity-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 9, 6, .08) 20%, rgba(10, 9, 6, .88) 100%);
}
.commodity-card:hover .commodity-card__image { transform: scale(1.055); filter: saturate(.88); }
.commodity-card__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.commodity-card__index {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  color: rgba(255,255,255,.72);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.commodity-card h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1;
}
.commodity-card__types {
  margin: .8rem 0 1.1rem;
  color: rgba(255,255,255,.75);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.commodity-card__copy {
  max-width: 38ch;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.6;
}
.commodity-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
}
.commodity-card__metrics li {
  padding: .45rem .65rem;
  border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.78);
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- edible-oil matrix ------------------------------------------------ */
.oil-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0;
  background: var(--spec-ink-16);
  border: 1px solid var(--spec-ink-16);
}
.oil-card {
  min-height: 310px;
  padding: clamp(1.5rem, 3vw, 2.8rem);
  background: color-mix(in srgb, var(--sector-paper) 94%, white);
}
.oil-card__topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.8rem);
  color: var(--spec-ink-45);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.oil-card h3 {
  margin: 0;
  color: var(--sector-ink);
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1;
}
.oil-card p {
  max-width: 52ch;
  margin: 1.1rem 0 0;
  color: var(--spec-ink-75);
  font-size: .94rem;
  font-weight: 300;
  line-height: 1.65;
}
.oil-card__standard {
  display: block;
  margin-top: 1.5rem;
  color: var(--sector-ink);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ---- standards hierarchy --------------------------------------------- */
.standards-hierarchy {
  padding: clamp(4rem, 8vw, 7.5rem) clamp(1rem, 3vw, 3.5rem);
  background: color-mix(in srgb, var(--sector-ink) 96%, black);
  color: var(--sector-paper);
}
.standards-hierarchy__inner {
  width: min(100%, 1500px);
  margin: 0 auto;
  padding: 0 clamp(.5rem, 2vw, 2rem);
}
.standards-hierarchy__intro {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) 1fr;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.standards-hierarchy__eyebrow { color: rgba(255,255,255,.48); }
.standards-hierarchy__intro h2 { color: var(--sector-paper); }
.standards-hierarchy__intro p { color: rgba(255,255,255,.67); }
.standards-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.13);
}
.standards-layer {
  position: relative;
  min-height: 330px;
  padding: clamp(1.5rem, 3vw, 2.8rem);
  background: color-mix(in srgb, var(--sector-ink) 95%, black);
}
.standards-layer__number {
  display: block;
  margin-bottom: clamp(3rem, 7vw, 7rem);
  color: rgba(var(--sector-accent-rgb), .9);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.standards-layer h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  font-weight: 200;
  letter-spacing: -.025em;
}
.standards-layer p {
  margin: 1rem 0 0;
  color: rgba(255,255,255,.63);
  font-size: .89rem;
  font-weight: 300;
  line-height: 1.65;
}
.standards-layer__refs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.standards-layer__refs li {
  padding: .46rem .62rem;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.72);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.35;
  text-transform: uppercase;
}
.standards-note {
  max-width: 980px;
  margin: 1.6rem 0 0;
  color: rgba(255,255,255,.43);
  font-size: .76rem;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .grade-entry__grid:has(.grade-entry__media) { grid-template-columns: minmax(190px, .42fr) 1fr; }
  .grade-entry__grid:has(.grade-entry__media) > :last-child { grid-column: 1 / -1; }
  .commodity-card { grid-column: span 6; }
  .commodity-card:last-child { grid-column: 3 / span 8; }
  .standards-flow { grid-template-columns: 1fr; }
  .standards-layer { min-height: 0; }
  .standards-layer__number { margin-bottom: 2.5rem; }
}
@media (max-width: 767.98px) {
  .grade-entry__grid:has(.grade-entry__media) { grid-template-columns: 1fr; }
  .grade-entry__media { width: min(52vw, 200px); aspect-ratio: 3 / 4; }
  .commodity-atlas__intro,
  .standards-hierarchy__intro { grid-template-columns: 1fr; gap: 1rem; }
  .commodity-card,
  .commodity-card:last-child { grid-column: 1 / -1; min-height: 440px; margin-top: 0; }
  .oil-matrix { grid-template-columns: 1fr; }
  .oil-card { min-height: 0; }
}

/* ---- closing CTA band -------------------------------------------------- */
.product-cta {
  padding: clamp(4.5rem, 9vw, 8.5rem) clamp(1rem, 3vw, 3.5rem);
  border-top: 1px solid var(--spec-ink-16);
  background:
    radial-gradient(circle at 88% 10%, rgba(var(--sector-accent-rgb), .18), transparent 34%),
    var(--sector-paper);
}
.product-cta__inner {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 0 clamp(.5rem, 2vw, 2rem);
}
.product-cta__kicker {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--spec-ink-60);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.product-cta__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  width: fit-content;
  max-width: 100%;
  color: var(--sector-ink);
  font-size: clamp(1.9rem, 4.6vw, 4.6rem);
  font-weight: 200;
  letter-spacing: -.04em;
  line-height: 1.02;
  text-decoration: none;
  text-wrap: balance;
  transition: color .3s ease;
}
.product-cta__text {
  display: block;
  min-width: 0;
  max-width: 18ch;
}
.product-cta__link .cta-arrow {
  flex-shrink: 0;
  width: clamp(2.6rem, 4.5vw, 4.2rem);
  height: clamp(2.6rem, 4.5vw, 4.2rem);
  border: 1px solid var(--spec-ink-16);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  transition: background .4s ease, border-color .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.product-cta__link .cta-arrow svg { width: 38%; height: 38%; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.product-cta__link:hover { color: var(--sector-ink); }
.product-cta__link:hover .cta-arrow {
  background: var(--sector-ink);
  border-color: var(--sector-ink);
  color: var(--sector-paper);
  transform: translateX(.4rem);
}
.product-cta__note {
  margin: 2rem 0 0;
  color: var(--spec-ink-45);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
}

/* ---- reveal animation hooks -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .product-editorial [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  }
  .product-editorial [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
  .grade-entry__grid { grid-template-columns: 1fr; padding-left: 0; }
  .range-brief { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 767.98px) {
  .product-editorial .range-section {
    padding-inline: clamp(.85rem, 4vw, 1.25rem);
  }
  .product-editorial .range-section > .container-fluid {
    min-width: 0;
    max-width: 100%;
    padding-inline: 0;
  }
  .grade-ledger,
  .grade-entry,
  .grade-entry__body {
    min-width: 0;
    max-width: 100%;
  }
  .grade-entry__toggle {
    grid-template-columns: 1fr 2.6rem;
    grid-template-areas:
      "name icon"
      "tag  icon";
    row-gap: .35rem;
  }
  .grade-entry__name { grid-area: name; }
  .grade-entry__tag { grid-area: tag; }
  .grade-entry__icon { grid-area: icon; width: 2.1rem; height: 2.1rem; }
  .grade-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem .8rem;
  }
  .grade-stats .stat {
    min-width: 0;
    padding-left: .8rem;
  }
  .grade-stats .stat b {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .grade-stats .stat span {
    letter-spacing: .1em;
    overflow-wrap: anywhere;
  }
  .spec-block__caption {
    align-items: flex-start;
  }
  .spec-block__caption span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .spec-scroll {
    padding-bottom: .55rem;
    scrollbar-width: thin;
    scrollbar-color: var(--spec-ink-45) var(--spec-ink-10);
  }
  .spec-scroll::-webkit-scrollbar { height: 5px; }
  .spec-scroll::-webkit-scrollbar-track { background: var(--spec-ink-10); }
  .spec-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--spec-ink-45);
  }
  .grade-entry__spec--table .spec-table,
  .spec-table {
    width: max-content;
    min-width: 680px;
    font-size: .86rem;
  }
  .spec-table td.spec-method { font-size: .74rem; }
  .product-cta__link { font-size: clamp(1.7rem, 8.2vw, 2.6rem); }
}

@media (max-width: 359.98px) {
  .grade-stats { grid-template-columns: 1fr; }
}

/* ---- live glass flask beside each grade (three.js, transparent) ------ */
.grade-entry__media--beaker {
  position: relative;
  background: none;
  overflow: visible;
}
.grade-entry__media--beaker .beaker-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.grade-entry__media--beaker .beaker-live canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}