.cv-eyebrow {
  margin: 0 0 .75rem;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 600;
  font-size: .75rem;
  line-height: 1.2;
  letter-spacing: .04em;
  color: #0A8890;
}
.color-scheme--dark .cv-eyebrow,
.color-scheme--accent .cv-eyebrow { color: currentColor; opacity: .86; }

.cv-label-school-section [id],
#label { scroll-margin-top: 100px; }

.cv-label-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
  color: #3D4247;
}
.cv-label-grid :is(h3, p, .rte) { color: inherit; }

/* Left: the Supplement Facts panel */
.cv-panel {
  background: #fff;
  border: 2px solid #2E3235;
  border-radius: 4px;
  padding: 1.125rem 1.25rem;
}
.cv-panel__title {
  margin: 0;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #2E3235;
}
.cv-panel__rule { height: 1px; margin: .625rem 0; background: #2E3235; }
.cv-panel__rule--thick { height: 6px; margin: .625rem 0 .5rem; }
.cv-panel__foot { margin: 0; font-size: .6875rem; line-height: 1.5; color: #6B7075; }

.cv-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem .625rem;
  cursor: pointer;
  border-top: 1px solid #E4E6E7;
  border-radius: 0;
  transition: background-color 160ms cubic-bezier(.22, .61, .36, 1);
}
.cv-panel__rule + .cv-row { border-top: 0; }
.cv-row:hover { background: #F5F6F6; }
.cv-row__n {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 4px;
  background: #E4E6E7;
  color: #3D4247;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 700;
  font-size: .6875rem;
}
.cv-row__text { flex: 1; min-width: 0; }
.cv-row__k {
  display: block;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.35;
  color: #2E3235;
}
.cv-row__v { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.45; color: #6B7075; }
.cv-row__input { position: absolute; opacity: 0; pointer-events: none; }

/* Right: the explanation card for the checked row */
.cv-detail { position: sticky; top: 6rem; }
.cv-detail__card {
  display: none;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid #E4E6E7;
  border-radius: 8px;
}
.cv-detail__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.cv-detail__n {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #0A8890;
  color: #fff;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 700;
  font-size: .875rem;
}
.cv-detail__title {
  margin: 0;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #2E3235;
}
.cv-detail__body { margin-bottom: 1.25rem; font-size: .9375rem; line-height: 1.65; }
.cv-detail__body > :last-child { margin-bottom: 0; }

.cv-detail__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .875rem;
}
.cv-good,
.cv-flag { padding: 1rem; border-radius: 8px; border: 1px solid; }
.cv-good { background: #F1F8F8; border-color: #DCEDEE; }
.cv-flag { background: #FBEDEC; border-color: #F1D9D6; }
.cv-tip__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-family: var(--font-heading-family, Poppins, sans-serif);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .04em;
}
.cv-good .cv-tip__label { color: #075C61; }
.cv-flag .cv-tip__label { color: #B3453C; }
.cv-tip__label svg { flex: 0 0 auto; width: 15px; height: 15px; }
.cv-tip__text { font-size: .8125rem; line-height: 1.6; }
.cv-tip__text > :last-child { margin-bottom: 0; }

/* Mobile: the grid takes over the panel's frame, both wrappers dissolve with
   display: contents, and the generated order values in the section's style
   tag drop each card directly under its own row. */
@media screen and (max-width: 749px) {
  .cv-label-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 2px solid #2E3235;
    border-radius: 4px;
    padding: 1rem;
  }
  .cv-panel,
  .cv-detail { display: contents; }
  .cv-panel__title,
  .cv-panel__rule:first-of-type { order: 0; }
  .cv-panel__rule--thick { order: 998; }
  .cv-panel__foot { order: 999; }
  .cv-detail__card { margin: .25rem 0 .75rem; padding: 1.25rem; }
  .cv-detail__split { grid-template-columns: minmax(0, 1fr); }
}