/*
 * DBC / BIOTEN V5.0.2
 * 1. One stable desktop header grid across every page family.
 * 2. Four-card Developer mega menu with a separate collaboration index.
 * 3. A paper-material visual system for BIOTEN Packaging and its direct routes.
 */

body.v502-site {
  --v502-header-width: 74rem;
  --v502-header-height: 4.5rem;
  --v502-header-side: 7.125rem;
  --v502-header-gap: 1rem;
  --dbc-header-height: var(--v502-header-height);
}

/* ---------- Stable desktop header and mega-menu geometry ---------- */

@media (min-width: 861px) {
  html body.v502-site.dbc-global-nav-active .site-header.site-header {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--v502-header-height) !important;
    min-height: var(--v502-header-height) !important;
    padding: 0 !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .header-inner.header-inner {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: var(--v502-header-side) minmax(0, 1fr) var(--v502-header-side) !important;
    grid-template-rows: var(--v502-header-height) !important;
    align-items: center !important;
    column-gap: var(--v502-header-gap) !important;
    row-gap: 0 !important;
    width: min(var(--v502-header-width), calc(100% - 3rem)) !important;
    max-width: none !important;
    height: var(--v502-header-height) !important;
    min-height: var(--v502-header-height) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .brand-logos {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: .375rem !important;
    width: var(--v502-header-side) !important;
    min-width: var(--v502-header-side) !important;
    max-width: var(--v502-header-side) !important;
    height: 2.375rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .brand-logos > .logo-image {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 4.5rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 4.5rem !important;
    height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .brand-logos > .logo-image-biocycle {
    flex-basis: 2.25rem !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .brand-logos > .logo-image img {
    display: block !important;
    width: 4.5rem !important;
    max-width: 4.5rem !important;
    height: 2.25rem !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .brand-logos > .logo-image-biocycle img {
    width: 2.25rem !important;
    max-width: 2.25rem !important;
    height: 2.25rem !important;
    object-position: center !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .dbc-desktop-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 5.125rem 6rem 6rem 5.125rem 6rem !important;
    align-items: center !important;
    gap: .25rem !important;
    width: 29.25rem !important;
    min-width: 29.25rem !important;
    max-width: 29.25rem !important;
    height: 2.75rem !important;
    margin: 0 !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .dbc-desktop-nav__link {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    margin: 0 !important;
    padding: 0 .68rem !important;
    border-width: 1px !important;
    font-size: .84rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .dbc-desktop-nav__link::after,
  html body.v502-site.dbc-global-nav-active .site-header.site-header .dbc-desktop-nav__link.is-open::after {
    flex: 0 0 .36rem !important;
    width: .36rem !important;
    height: .36rem !important;
  }

  html body.v502-site.dbc-global-nav-active .site-header.site-header .dbc-header-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: var(--v502-header-side) !important;
    min-width: var(--v502-header-side) !important;
    max-width: var(--v502-header-side) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-header-actions .language-toggle.language-toggle {
    box-sizing: border-box !important;
    width: 4.5rem !important;
    min-width: 4.5rem !important;
    max-width: 4.5rem !important;
    height: 2.75rem !important;
    margin: 0 !important;
  }

  /* The homepage still carries an older high-specificity button minimum.
     Repeat the release class to make the language control identical everywhere. */
  html body.v502-site.v502-site.v502-site.v502-site.v502-site.v502-site.dbc-global-nav-active
    .site-header.site-header .dbc-header-actions .language-toggle.language-toggle {
    box-sizing: border-box !important;
    width: 4.5rem !important;
    min-width: 4.5rem !important;
    max-width: 4.5rem !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
    padding: .25rem !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega-layer {
    top: var(--v502-header-height) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega__inner,
  html body.v502-site.v420-site.dbc-global-nav-active .dbc-desktop-mega__inner,
  html body.v502-site.v420-site.v430-site.dbc-global-nav-active .dbc-desktop-mega__inner {
    box-sizing: border-box !important;
    width: min(var(--v502-header-width), calc(100% - 3rem)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega--direct .dbc-desktop-mega__routes {
    grid-template-columns: repeat(var(--dbc-nav-route-count, 4), minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 0 !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega--developer .dbc-desktop-mega__routes {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega__index {
    grid-template-columns: minmax(8.5rem, auto) repeat(var(--dbc-nav-index-count, 4), minmax(0, 1fr)) !important;
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega__index > p {
    display: none !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega__index {
    grid-template-columns: repeat(var(--dbc-nav-index-count, 4), minmax(0, 1fr)) !important;
  }

  html body.v502-site.dbc-global-nav-active .dbc-desktop-mega__index > a:first-of-type {
    border-left: 0 !important;
  }
}

/* ---------- Packaging navigation: paper, fiber and ink ---------- */

body.v502-site.dbc-global-nav-active .dbc-desktop-nav__link[data-dbc-desktop-menu="packaging"]:is(.is-open, [aria-current="page"]) {
  border-color: rgba(111, 86, 59, .18) !important;
  background: rgba(244, 239, 226, .78) !important;
  color: #6b5138 !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-nav__link[data-dbc-desktop-menu="packaging"]:is(.is-open, [aria-current="page"])::before {
  background: linear-gradient(90deg, #a78762 0 68%, #667260 68% 100%) !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging {
  --dbc-nav-blue: #76593e;
  --dbc-nav-blue-deep: #4e3e30;
  --dbc-nav-green: #5e6d59;
  --dbc-nav-ink: #2c2b27;
  --dbc-nav-body: #5d584f;
  --dbc-nav-muted: #777066;
  --dbc-nav-line: rgba(79, 66, 48, .16);
  border-color: rgba(83, 67, 47, .16) !important;
  background:
    radial-gradient(circle at 72% 0%, rgba(195, 164, 123, .16), transparent 27rem),
    linear-gradient(90deg, rgba(238, 236, 223, .985) 0 19%, rgba(250, 248, 242, .982) 19% 72%, rgba(243, 237, 224, .982) 72% 100%) !important;
  box-shadow: 0 30px 72px rgba(69, 55, 38, .15), inset 0 1px rgba(255, 255, 255, .9) !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-mega__intro::before {
  background: linear-gradient(90deg, #a9855e 0 68%, #65715e 68% 100%) !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-mega__entry {
  border-color: rgba(111, 86, 59, .25) !important;
  background: rgba(251, 249, 243, .72) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 9px 24px rgba(77, 61, 40, .055) !important;
  color: #684f36 !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-route {
  border-color: rgba(91, 70, 45, .17) !important;
  background: #f0ede4 !important;
  box-shadow: 0 10px 24px rgba(72, 57, 39, .06), inset 0 1px rgba(255, 255, 255, .92) !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-route__copy {
  background: linear-gradient(180deg, rgba(251, 249, 244, .96), rgba(240, 235, 224, .98)) !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-route__copy::before {
  background: #9b7852 !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-route__copy strong {
  color: #2d2b27 !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-route__desc {
  color: #645e55 !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-mega__index {
  border-color: rgba(91, 70, 45, .17) !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-mega__index > a {
  border-color: rgba(91, 70, 45, .14) !important;
  color: #4e4942 !important;
}

body.v502-site.dbc-global-nav-active .dbc-desktop-mega--packaging .dbc-desktop-mega__index > a:is(:hover, :focus-visible) {
  background: rgba(196, 164, 120, .12) !important;
  color: #61492f !important;
}

/* ---------- BIOTEN Packaging material palette ---------- */

body.v502-packaging-theme {
  --paper-white: #fbfaf6;
  --paper-natural: #f3f0e7;
  --paper-ivory: #ebe7d9;
  --paper-eye: #e5e8dc;
  --paper-kraft: #c2a17b;
  --paper-kraft-deep: #9a7652;
  --paper-fiber: #d7d0c1;
  --paper-moss: #657060;
  --paper-ink: #2d2c28;
  --paper-copy: #5c574f;
  --paper-muted: #777066;
  --paper-line: rgba(75, 61, 43, .16);
  --paper-line-strong: rgba(75, 61, 43, .28);
  --paper-shadow: 0 24px 64px rgba(74, 57, 36, .105);

  --v500-ink: var(--paper-ink);
  --v500-muted: var(--paper-copy);
  --v500-line: var(--paper-line);
  --v500-paper: var(--paper-natural);
  --v500-white: var(--paper-white);
  --v500-blue: #76593e;
  --v500-blue-deep: #4f3e2f;
  --v500-green: var(--paper-moss);
  --v500-green-soft: var(--paper-eye);
  --v500-shadow: var(--paper-shadow);

  --v270-blue: #76593e;
  --v270-blue-deep: #4f3e2f;
  --v270-green: var(--paper-moss);
  --v270-green-deep: #4e594b;
  --v270-ink: var(--paper-ink);
  --v270-body: var(--paper-copy);
  --v270-muted: var(--paper-muted);
  --v270-line: var(--paper-line);
  --v270-line-strong: var(--paper-line-strong);
  --v270-paper: var(--paper-white);
  --v270-canvas: var(--paper-natural);
  --v270-canvas-cool: var(--paper-eye);
  --v270-dark: #2c2c28;
  --v270-dark-soft: #39372f;

  --v280-blue: #76593e;
  --v280-blue-bright: #9a7652;
  --v280-green: var(--paper-moss);
  --v280-green-bright: #7d8977;
  --v280-ink: var(--paper-ink);
  --v280-ink-2: #403d37;
  --v280-text: var(--paper-copy);
  --v280-muted: var(--paper-muted);
  --v280-line: var(--paper-line);
  --v280-line-strong: var(--paper-line-strong);
  --v280-paper: var(--paper-white);
  --v280-canvas: var(--paper-natural);
  --v280-mist: var(--paper-eye);
  --v280-support: var(--paper-kraft-deep);
  --v280-accent: var(--paper-moss);

  --v281-blue: #76593e;
  --v281-blue-bright: #9a7652;
  --v281-green: var(--paper-moss);
  --v281-green-bright: #7d8977;
  --v281-ink: var(--paper-ink);
  --v281-text: var(--paper-copy);
  --v281-muted: var(--paper-muted);
  --v281-line: var(--paper-line);
  --v281-line-strong: var(--paper-line-strong);
  --v281-paper: var(--paper-white);
  --v281-support: var(--paper-kraft-deep);
  --v281-accent: var(--paper-moss);

  --v282-blue: #76593e;
  --v282-blue-deep: #4f3e2f;
  --v282-green: var(--paper-moss);
  --v282-green-deep: #4e594b;
  --v282-ink: var(--paper-ink);
  --v282-text: var(--paper-copy);
  --v282-muted: var(--paper-muted);
  --v282-line: var(--paper-line);
  --v282-line-strong: var(--paper-line-strong);
  --v282-paper: var(--paper-white);
  --v282-canvas: var(--paper-natural);
  --v282-mist: var(--paper-eye);
  --v282-support: var(--paper-kraft-deep);
  --v282-accent: var(--paper-moss);

  --v300-blue: #76593e;
  --v300-blue-deep: #4f3e2f;
  --v300-green: var(--paper-moss);
  --v300-green-soft: var(--paper-eye);
  --v300-ink: var(--paper-ink);
  --v300-body: var(--paper-copy);
  --v300-muted: var(--paper-muted);
  --v300-line: var(--paper-line);
  --v300-paper: var(--paper-white);

  --v400-blue: #76593e;
  --v400-blue-deep: #4f3e2f;
  --v400-blue-soft: #e9e0d3;
  --v400-green: var(--paper-moss);
  --v400-green-deep: #4e594b;
  --v400-green-soft: var(--paper-eye);
  --v400-ink: var(--paper-ink);
  --v400-body: var(--paper-copy);
  --v400-muted: var(--paper-muted);
  --v400-line: var(--paper-line);
  --v400-line-strong: var(--paper-line-strong);
  --v400-paper: var(--paper-white);
  --v400-canvas: var(--paper-natural);

  --v410-blue: #76593e;
  --v410-blue-deep: #4f3e2f;
  --v410-green: var(--paper-moss);
  --v410-green-deep: #4e594b;
  --v410-ink: var(--paper-ink);
  --v410-copy: var(--paper-copy);
  --v410-muted: var(--paper-muted);
  --v410-line: var(--paper-line);
  --v410-line-strong: var(--paper-line-strong);
  --v410-paper: var(--paper-white);
  --v410-canvas: var(--paper-natural);

  --v420-blue: #76593e;
  --v420-blue-deep: #4f3e2f;
  --v420-green: var(--paper-moss);
  --v420-green-deep: #4e594b;
  --v420-ink: var(--paper-ink);
  --v420-copy: var(--paper-copy);
  --v420-line: var(--paper-line);
  --v420-glass: rgba(251, 250, 246, .84);

  --v430-blue: #76593e;
  --v430-blue-deep: #4f3e2f;
  --v430-green: var(--paper-moss);
  --v430-green-deep: #4e594b;
  --v430-ink: var(--paper-ink);
  --v430-copy: var(--paper-copy);
  --v430-muted: var(--paper-muted);
  --v430-line: var(--paper-line);
  --v430-line-strong: var(--paper-line-strong);
  --v430-paper: var(--paper-white);
  --v430-surface: var(--paper-natural);
  --v430-glass: rgba(251, 250, 246, .84);

  background: var(--paper-natural) !important;
  color: var(--paper-ink) !important;
}

html body.v502-packaging-theme.dbc-global-nav-active .site-header.site-header {
  border-bottom-color: rgba(91, 70, 45, .14) !important;
  background: rgba(251, 250, 246, .9) !important;
  box-shadow: 0 8px 30px rgba(71, 54, 34, .055) !important;
}

body.v502-packaging-theme main {
  background: var(--paper-natural);
}

body.v502-packaging-theme .v500-context {
  border-color: var(--paper-line);
  background: rgba(251, 250, 246, .94);
}

body.v502-packaging-theme .v500-hero {
  isolation: isolate;
  border-color: var(--paper-line);
  background:
    radial-gradient(circle at 82% 18%, rgba(194, 161, 123, .22), transparent 29%),
    linear-gradient(118deg, var(--paper-white) 0 36%, var(--paper-natural) 36% 70%, var(--paper-eye) 100%);
}

body.v502-packaging-theme .v500-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: clamp(2rem, 9vw, 9rem);
  width: 1px;
  background: rgba(118, 89, 62, .12);
}

body.v502-packaging-theme .v500-kicker,
body.v502-packaging-theme :is(.hero-eyebrow, .packaging-eyebrow, .pl-eyebrow, .section-kicker, .dv2-kicker) {
  color: #76593e !important;
}

body.v502-packaging-theme .v500-kicker::before {
  background: linear-gradient(90deg, #a5815d 0 67%, var(--paper-moss) 67% 100%);
}

body.v502-packaging-theme .v500-hero h1,
body.v502-packaging-theme :is(.about-hero-title, .pl-hero h1, .dv2-page-intro h1) {
  color: var(--paper-ink) !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  main :is(
    .packaging-hero h1,
    .about-bioten-hero h1,
    .bioten-products-hero h1,
    .pl-hero h1,
    .bioten-particle-hero h1,
    .dv2-page-intro h1
  ) {
  color: var(--paper-ink) !important;
}

body.v502-packaging-theme .v500-hero__lead {
  color: var(--paper-copy);
}

body.v502-packaging-theme .v500-hero__visual {
  border-color: rgba(80, 63, 43, .18);
  background: var(--paper-ivory);
  box-shadow: var(--paper-shadow);
}

body.v502-packaging-theme .v500-button {
  border-color: var(--paper-line-strong);
  background: rgba(251, 250, 246, .78);
  color: var(--paper-ink);
}

body.v502-packaging-theme .v500-button:is(:hover, :focus-visible) {
  border-color: rgba(111, 86, 59, .48);
  background: var(--paper-white);
}

body.v502-packaging-theme .v500-button--primary {
  border-color: #4f3e2f;
  background: #4f3e2f;
  color: var(--paper-white);
}

body.v502-packaging-theme .v500-button--primary:is(:hover, :focus-visible) {
  border-color: #362d25;
  background: #362d25;
}

/* The legacy site has a deliberately strong glass-button lock. Packaging now
   owns a distinct matte-paper control language, so this release-level rule is
   intentionally stronger and remains scoped to the packaging family only. */
html body.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  :is(
    a.v500-button,
    a.button,
    a.packaging-button,
    a.solutions-button,
    .pl-hero-actions a,
    .bioten-particle-hero__actions a,
    a[class*="btn"]
  ) {
  min-height: 2.875rem !important;
  padding: 0 1.15rem !important;
  border: 1px solid var(--paper-line-strong) !important;
  border-radius: .65rem !important;
  background: linear-gradient(180deg, rgba(251, 250, 246, .98), rgba(239, 235, 224, .94)) !important;
  color: #4f3e2f !important;
  font-weight: 680 !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .94), 0 10px 24px rgba(73, 56, 35, .09) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  :is(
    a.v500-button--primary,
    a.button.primary,
    a.packaging-button.primary,
    a.solutions-button.primary,
    .pl-hero-actions a:first-child,
    .bioten-particle-hero__actions a:first-child,
    a.btn-primary
  ) {
  border-color: #4f3e2f !important;
  background: #4f3e2f !important;
  color: var(--paper-white) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 12px 28px rgba(61, 47, 32, .18) !important;
}

html body.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  :is(
    a.v500-button,
    a.button,
    a.packaging-button,
    a.solutions-button,
    .pl-hero-actions a,
    .bioten-particle-hero__actions a,
    a[class*="btn"]
  ):is(:hover, :focus-visible) {
  border-color: rgba(95, 72, 47, .5) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .96), 0 14px 30px rgba(73, 56, 35, .13) !important;
}

html body.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  .v500-final a.v500-button {
  border-color: rgba(255, 255, 255, .34) !important;
  background: var(--paper-white) !important;
  color: #4f3e2f !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  a.v500-button.v500-button {
  color: #4f3e2f !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  a.v500-button.v500-button--primary {
  color: var(--paper-white) !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  a.v500-button.v500-button > span {
  color: inherit !important;
}

body.v502-packaging-theme .v500-facts {
  border-color: var(--paper-line);
  background: var(--paper-white);
}

body.v502-packaging-theme .v500-fact {
  border-color: var(--paper-line);
}

body.v502-packaging-theme .v500-fact:nth-child(1) { background: var(--paper-white); }
body.v502-packaging-theme .v500-fact:nth-child(2) { background: var(--paper-natural); }
body.v502-packaging-theme .v500-fact:nth-child(3) { background: var(--paper-eye); }
body.v502-packaging-theme .v500-fact:nth-child(4) { background: #e6d5c0; }

body.v502-packaging-theme .v500-section {
  border-color: var(--paper-line);
  background: var(--paper-white);
}

body.v502-packaging-theme .v500-section--soft {
  background: var(--paper-natural);
}

body.v502-packaging-theme .v500-section--dark {
  color: #f4f0e7;
  background:
    radial-gradient(circle at 82% 22%, rgba(194, 161, 123, .14), transparent 32%),
    #2e2d29;
}

body.v502-packaging-theme .v500-card {
  border-color: var(--paper-line);
  box-shadow: 0 16px 40px rgba(73, 56, 35, .055);
}

body.v502-packaging-theme .v500-card:nth-child(1) { background: var(--paper-white); }
body.v502-packaging-theme .v500-card:nth-child(2) { background: var(--paper-natural); }
body.v502-packaging-theme .v500-card:nth-child(3) { background: var(--paper-eye); }
body.v502-packaging-theme .v500-card:nth-child(4) { background: #eadbc7; }

body.v502-packaging-theme .v500-card a,
body.v502-packaging-theme .v500-text-link {
  color: #684f36;
}

body.v502-packaging-theme .v500-chain {
  border-color: rgba(244, 240, 231, .18);
}

body.v502-packaging-theme .v500-chain article {
  border-color: rgba(244, 240, 231, .16);
  background: rgba(255, 255, 255, .026);
}

body.v502-packaging-theme .v500-chain span {
  color: #ceb08a;
}

body.v502-packaging-theme .v500-route {
  border-color: var(--paper-line);
  background: var(--paper-ivory);
}

body.v502-packaging-theme .v500-route::after {
  background: linear-gradient(180deg, transparent, rgba(45, 43, 38, .92));
}

body.v502-packaging-theme .v500-evidence__list,
body.v502-packaging-theme .v500-evidence__list article {
  border-color: var(--paper-line);
}

body.v502-packaging-theme .v500-final {
  color: var(--paper-white);
  background:
    radial-gradient(circle at 76% 18%, rgba(194, 161, 123, .22), transparent 31%),
    linear-gradient(112deg, #2d2c28, #4c4338 66%, #665642);
}

body.v502-packaging-theme .v500-final .v500-button {
  border-color: rgba(255, 255, 255, .34);
  background: var(--paper-white);
  color: #4f3e2f;
}

/* Older packaging and product page families inherit the same paper logic. */
body.v502-packaging-theme :is(
  .packaging-hero,
  .about-bioten-hero,
  .bioten-products-hero,
  .pl-hero,
  .bioten-particle-hero,
  .dv2-page-intro
) {
  border-color: var(--paper-line) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(194, 161, 123, .2), transparent 30%),
    linear-gradient(118deg, var(--paper-white), var(--paper-natural) 62%, var(--paper-eye)) !important;
}

body.v502-packaging-theme :is(
  .packaging-section,
  .page-section,
  .pl-section,
  .home-band,
  .dv2-section--surface
) {
  border-color: var(--paper-line) !important;
  background-color: var(--paper-white) !important;
}

body.v502-packaging-theme :is(
  .packaging-section-soft,
  .pl-soft,
  .dv2-section--soft
) {
  background-color: var(--paper-natural) !important;
}

body.v502-packaging-theme :is(
  .packaging-anchor,
  .bioten-product-nav,
  .pl-anchor-nav,
  .dv2-anchor-nav,
  .dv2-role-route,
  .dv2-local-nav
) {
  border-color: var(--paper-line) !important;
  background: rgba(251, 250, 246, .92) !important;
  box-shadow: 0 7px 20px rgba(73, 56, 35, .04) !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  :is(.packaging-anchor, .bioten-product-nav, .pl-anchor-nav, .dv2-anchor-nav, .dv2-role-route, .dv2-local-nav) a {
  border-color: transparent !important;
  color: var(--paper-copy) !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  :is(.packaging-anchor, .bioten-product-nav, .pl-anchor-nav, .dv2-anchor-nav, .dv2-role-route, .dv2-local-nav) a:is(:hover, :focus-visible, .is-active, [aria-current="page"]) {
  border-color: rgba(111, 86, 59, .18) !important;
  background: var(--paper-natural) !important;
  color: #684f36 !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  main :is(h1, h2, h3) {
  color: var(--paper-ink) !important;
}

html body[class].v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme.v502-packaging-theme
  main :is(.v500-section--dark, .v500-final, .dv2-final) :is(h1, h2, h3) {
  color: #f4f0e7 !important;
}

body.v502-packaging-theme :is(
  .packaging-proof-grid,
  .packaging-scenario-grid,
  .packaging-metric-grid,
  .packaging-product-grid,
  .packaging-process-grid,
  .product-card-grid,
  .product-chip-grid,
  .module-grid,
  .pl-card-stack,
  .pl-metric-grid,
  .pl-spec-grid,
  .pl-proof-grid,
  .pl-process-grid,
  .pl-extension-grid,
  .pl-compliance-grid,
  .dv2-meta-grid
) > * {
  border-color: var(--paper-line) !important;
  background-color: rgba(251, 250, 246, .9) !important;
  box-shadow: 0 14px 36px rgba(74, 57, 36, .05) !important;
}

body.v502-packaging-theme :is(
  .packaging-proof-grid,
  .packaging-scenario-grid,
  .packaging-metric-grid,
  .packaging-product-grid,
  .packaging-process-grid,
  .product-card-grid,
  .pl-card-stack,
  .pl-metric-grid,
  .pl-spec-grid,
  .pl-proof-grid,
  .pl-process-grid,
  .pl-extension-grid,
  .pl-compliance-grid,
  .dv2-meta-grid
) > *:nth-child(4n + 2) {
  background-color: var(--paper-natural) !important;
}

body.v502-packaging-theme :is(
  .packaging-proof-grid,
  .packaging-scenario-grid,
  .packaging-metric-grid,
  .packaging-product-grid,
  .packaging-process-grid,
  .product-card-grid,
  .pl-card-stack,
  .pl-metric-grid,
  .pl-spec-grid,
  .pl-proof-grid,
  .pl-process-grid,
  .pl-extension-grid,
  .pl-compliance-grid,
  .dv2-meta-grid
) > *:nth-child(4n + 3) {
  background-color: var(--paper-eye) !important;
}

body.v502-packaging-theme :is(
  .packaging-proof-grid,
  .packaging-scenario-grid,
  .packaging-metric-grid,
  .packaging-product-grid,
  .packaging-process-grid,
  .product-card-grid,
  .pl-card-stack,
  .pl-metric-grid,
  .pl-spec-grid,
  .pl-proof-grid,
  .pl-process-grid,
  .pl-extension-grid,
  .pl-compliance-grid,
  .dv2-meta-grid
) > *:nth-child(4n) {
  background-color: #eadbc7 !important;
}

body.v502-packaging-theme .dv2-final {
  background:
    radial-gradient(circle at 76% 18%, rgba(194, 161, 123, .22), transparent 31%),
    linear-gradient(112deg, #2d2c28, #4c4338 66%, #665642) !important;
}

body.v502-packaging-theme .formal-site-footer {
  border-top-color: rgba(244, 240, 231, .12) !important;
  background: #292925 !important;
  color: #f0ece3 !important;
}

body.v502-packaging-theme .formal-site-footer :is(.footer-note, .footer-column a, .footer-legal, .footer-legal a) {
  color: rgba(240, 236, 227, .68) !important;
}

body.v502-packaging-theme .formal-site-footer :is(.footer-column h3, .footer-bottom strong) {
  color: #f5f1e8 !important;
}

body.v502-packaging-theme .formal-site-footer :is(.footer-directory, .footer-bottom, .footer-column a) {
  border-color: rgba(240, 236, 227, .12) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.v502-site .dbc-desktop-mega,
  body.v502-site .dbc-desktop-route,
  body.v502-site .dbc-desktop-route img {
    transition: none !important;
  }
}