/*
 * peptas.css — PEPTAS design-system foundation
 * ---------------------------------------------------------------------------
 * Built stage by stage, S3 to S7: palette and type scale, access gate, header
 * and footer, the 9.5 content components, and the inventory table. Each
 * component's rules were MOVED out of mymedi-child/style.css rather than
 * layered over it; each stage's reasoning is in its report under phase1/ or
 * phase2/.
 *
 * LOAD ORDER
 *   mymedi-reset -> mymedi-style (parent) -> peptas-site (mymedi-child/style.css,
 *   the 2.3 stylesheet being replaced stage by stage) -> mymedi-responsive ->
 *   peptas.css. functions.php enqueues this file at PHP_INT_MAX - 10, after
 *   every parent, plugin and legacy child stylesheet, so source order settles
 *   the cascade and no rule here needs !important to win. The few !important
 *   declarations below are the exception, and each says why. font-awesome-5 is
 *   no longer in the chain: stage S7 dequeued it with the last icon-font caller.
 *
 * NAMING — every class is namespaced `peptas-`:
 *   .peptas-<block> / .peptas-<block>__<element> / .peptas-<block>--<modifier>,
 *   plus helpers such as .peptas-tabular. No selector targets a parent-theme,
 *   WooCommerce or plugin class name. Bare element selectors are used only for
 *   base typography, links, tables and form-control inheritance, and are scoped
 *   to `body.peptas-site-v2` so they cannot leak into wp-admin or the editor.
 *
 * WHAT THIS FILE DELIBERATELY DOES NOT DO
 * - No gradient, no glass, no shadow. The only permitted depth cue is a 1px
 *   hairline in --peptas-line (PLAN.md 9.1).
 * - No dark theme, no ninth palette colour.
 * - No @import, no external host, no build step. Framework-free CSS only.
 *
 * BUDGET: under 40 KB uncompressed (PLAN.md 9.5).
 */

/* ==========================================================================
   1. Typeface — self-hosted Inter. Provenance and licence in
   ../fonts/NOTICE-Inter.txt. Two faces, one file: the second carries the
   extended ranges so the Greek and superscript characters of chemical
   nomenclature render in Inter rather than dropping to the fallback stack.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-04FF,
        U+1E00-1EFF, U+2070-209F, U+2113, U+2126, U+212A-212B, U+2190, U+2192,
        U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260,
        U+2264-2265, U+25CA, U+A720-A7FF;
}

/* ==========================================================================
   2. Palette — the eight tokens of PLAN.md 9.1, exactly. No ninth colour.
   ========================================================================== */

:root {
    --peptas-blue: #1A4792;        /* CTAs, links, rules, wordmark */
    --peptas-blue-deep: #11336b;   /* headings on light, hover, footer ground */
    --peptas-ink: #14181F;         /* body text */
    --peptas-slate: #5A6472;       /* secondary text, labels, table headers */
    --peptas-line: #D9DEE6;        /* hairlines, table rules, card borders */
    --peptas-mist: #F4F6F9;        /* section grounds, gate ground, table zebra */
    --peptas-white: #FFFFFF;       /* default ground */
    --peptas-amber: #8A6A16;       /* the single alert tone (availability notes only) */
}

/*
 * Legacy variable bridge — not a palette token. mymedi-child/style.css 2.3
 * declares --peptas-font-sans as a system font list and reads it in nine rules;
 * re-pointing it here is what makes those rules pick up Inter. It disappears
 * with style.css itself.
 */
:root {
    --peptas-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   3. Base typography — PLAN.md 9.2
   15px body / 1.65 line height; 17px lead; headings 34 / 26 / 20 / 17;
   12px letterspaced all-caps labels; tabular figures on data.
   ========================================================================== */

body.peptas-site-v2 {
    color: var(--peptas-ink);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-synthesis-weight: none;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

body.peptas-site-v2 h1,
body.peptas-site-v2 h2,
body.peptas-site-v2 h3,
body.peptas-site-v2 h4,
body.peptas-site-v2 h5,
body.peptas-site-v2 h6 {
    color: var(--peptas-blue-deep);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: -0.011em;
    text-wrap: balance;
}

body.peptas-site-v2 h1 {
    font-size: 34px;
    line-height: 1.18;
}

body.peptas-site-v2 h2 {
    font-size: 26px;
    line-height: 1.25;
}

body.peptas-site-v2 h3 {
    font-size: 20px;
    line-height: 1.35;
}

body.peptas-site-v2 h4,
body.peptas-site-v2 h5,
body.peptas-site-v2 h6 {
    font-size: 17px;
    line-height: 1.4;
}

/* Form controls inherit the face rather than the user-agent default. */
body.peptas-site-v2 button,
body.peptas-site-v2 input,
body.peptas-site-v2 optgroup,
body.peptas-site-v2 select,
body.peptas-site-v2 textarea {
    font-family: inherit;
}

body.peptas-site-v2 code,
body.peptas-site-v2 kbd,
body.peptas-site-v2 pre,
body.peptas-site-v2 samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.92em;
}

body.peptas-site-v2 small {
    font-size: 13px;
}

body.peptas-site-v2 strong,
body.peptas-site-v2 b {
    font-weight: 600;
}

/* Lead paragraph — 17px. */
.peptas-lead {
    font-size: 17px;
    line-height: 1.6;
}

/*
 * Label — 12px letterspaced all-caps. Used for eyebrows above a heading and
 * for the header row of a specification table.
 */
.peptas-label {
    color: var(--peptas-slate);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-transform: uppercase;
}

/*
 * Measure — capped at 68ch on prose. Applied through a class, never to bare
 * paragraphs, so that no parent-theme or WooCommerce layout is narrowed by it.
 */
.peptas-prose {
    max-width: 68ch;
}

.peptas-prose > p,
.peptas-prose > ul,
.peptas-prose > ol,
.peptas-prose > blockquote,
.peptas-measure {
    max-width: 68ch;
}

.peptas-prose > * + * {
    margin-top: 1em;
}

.peptas-prose h2,
.peptas-prose h3,
.peptas-prose h4 {
    margin-top: 1.6em;
}

/*
 * Tabular figures. PLAN.md 9.2: on every specification table, identifier and
 * figure. Applied to the data classes rather than globally, so running text
 * keeps proportional numerals.
 */
.peptas-tabular,
.peptas-figure,
.peptas-identifier,
.peptas-inventory,
.peptas-inventory th,
.peptas-inventory td,
.peptas-spec-table,
.peptas-spec-table th,
.peptas-spec-table td,
.peptas-data-table,
.peptas-data-table th,
.peptas-data-table td {
    font-variant-numeric: tabular-nums;
}

.peptas-identifier {
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ==========================================================================
   4. Links
   ========================================================================== */

body.peptas-site-v2 a {
    color: var(--peptas-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.peptas-site-v2 a:hover,
body.peptas-site-v2 a:focus {
    color: var(--peptas-blue-deep);
}

/* ==========================================================================
   5. Focus — the parent reset kills every ring with !important at (0,2,2);
   this restores it at (0,2,3) so the keyboard ring survives style.css being
   removed. :focus-visible only, so pointer users see no change.
   ========================================================================== */

html body.peptas-site-v2 a:focus-visible,
html body.peptas-site-v2 button:focus-visible,
html body.peptas-site-v2 input:focus-visible,
html body.peptas-site-v2 select:focus-visible,
html body.peptas-site-v2 textarea:focus-visible,
html body.peptas-site-v2 summary:focus-visible,
html body.peptas-site-v2 [tabindex]:focus-visible,
html body.peptas-site-v2 [role="button"]:focus-visible,
html body.peptas-site-v2 [role="link"]:focus-visible {
    outline: 2px solid var(--peptas-blue) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   6. Tables — hairline rules, zebra in --peptas-mist, tabular figures
   ========================================================================== */

body.peptas-site-v2 table {
    border-collapse: collapse;
    width: 100%;
}

body.peptas-site-v2 th,
body.peptas-site-v2 td {
    border-bottom: 1px solid var(--peptas-line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

body.peptas-site-v2 thead th {
    border-bottom-color: var(--peptas-slate);
    color: var(--peptas-slate);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.peptas-site-v2 tbody tr:nth-child(even) {
    background: var(--peptas-mist);
}

/*
 * Specification table — the two-column label/value block of PLAN.md 9.5.
 * The row label is the quiet column; the value carries the weight.
 */
.peptas-spec-table {
    border-top: 1px solid var(--peptas-line);
}

.peptas-spec-table th {
    color: var(--peptas-slate);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    width: 34%;
}

.peptas-spec-table td {
    color: var(--peptas-ink);
}

/* A table wider than its column scrolls in its own box, never the page. */
.peptas-table-scroll {
    overflow-x: auto;
}

/* ==========================================================================
   7. Buttons — one solid, one outlined. No third variant.
   ========================================================================== */

.peptas-btn {
    background: var(--peptas-blue);
    border: 1px solid var(--peptas-blue);
    border-radius: 3px;
    color: var(--peptas-white);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    padding: 11px 20px;
    text-align: center;
    text-decoration: none;
}

.peptas-btn:hover,
.peptas-btn:focus {
    background: var(--peptas-blue-deep);
    border-color: var(--peptas-blue-deep);
    color: var(--peptas-white);
}

.peptas-btn[disabled],
.peptas-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.peptas-btn--outline {
    background: transparent;
    border-color: var(--peptas-line);
    color: var(--peptas-blue);
}

.peptas-btn--outline:hover,
.peptas-btn--outline:focus {
    background: var(--peptas-mist);
    border-color: var(--peptas-blue);
    color: var(--peptas-blue-deep);
}

/* ==========================================================================
   8. The two remaining foundation primitives
   ========================================================================== */

/* Hairline rule between sections. The only depth cue in the system. */
.peptas-rule {
    background: var(--peptas-line);
    border: 0;
    height: 1px;
    margin: 0;
}

/* Section ground. */
.peptas-ground {
    background: var(--peptas-mist);
}

/* The single alert tone, availability notes only (PLAN.md 9.1). */
.peptas-note-amber {
    border-left: 2px solid var(--peptas-amber);
    color: var(--peptas-amber);
    padding-left: 12px;
}

/* Visually hidden, still read aloud. */
.peptas-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ==========================================================================
   9. Access gate — PLAN.md 4, Section 0. Stage S4. The markup is the last
   element in <body>; everything that puts it in front of the page is here.
   These rules are deliberately NOT scoped to `body.peptas-site-v2`: `html`
   carries the state class the head bootstrap writes, so the two rules that read
   it must start at the root element. The visible design is the removal of
   chrome — no scrim, no blur, no shadow, no red, no badge, no icon.
   ========================================================================== */

/* Visible by default, including when JavaScript never runs. */
.peptas-access-gate {
    align-items: center;
    display: grid;
    inset: 0;
    justify-items: center;
    overflow: auto;
    padding: 24px;
    position: fixed;
    z-index: 2147483000;
}

/*
 * The head bootstrap adds one of these two classes to <html> before the body is
 * parsed, so a returning visitor never sees the card at all — and a first-time
 * visitor cannot scroll the page behind it.
 */
html:not(.peptas-access-granted) {
    overflow: hidden;
}

.peptas-access-granted .peptas-access-gate {
    display: none;
}

.peptas-access-gate__backdrop {
    background: var(--peptas-mist);
    inset: 0;
    position: fixed;
}

.peptas-access-gate__panel {
    background: var(--peptas-white);
    border: 1px solid var(--peptas-line);
    border-radius: 3px;
    color: var(--peptas-ink);
    margin: auto;
    max-width: 560px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.peptas-access-gate__content {
    padding: 32px;
}

/* The wordmark and, under it, the first fact a hostile reviewer meets. */
.peptas-access-gate__brand {
    border-bottom: 1px solid var(--peptas-line);
    margin: 0 0 24px;
    padding: 0 0 20px;
    text-align: center;
}

.peptas-access-gate__wordmark {
    display: block;
    height: auto;
    margin: 0 auto 10px;
    width: 112px;
}

/* Only rendered when attachment 18469 cannot be resolved. */
.peptas-access-gate__wordmark-text {
    color: var(--peptas-blue);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

.peptas-access-gate__operator {
    color: var(--peptas-slate);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.peptas-access-gate__eyebrow {
    color: var(--peptas-slate);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.peptas-access-gate h2 {
    margin: 0 0 12px;
}

.peptas-access-gate #peptas-access-description {
    color: var(--peptas-ink);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
}

/* Plain stacked list: no bullet, no tick, hairlines only. */
.peptas-access-gate__confirmations {
    border-top: 1px solid var(--peptas-line);
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.peptas-access-gate__confirmations li {
    border-bottom: 1px solid var(--peptas-line);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    padding: 11px 0;
}

/*
 * The deterrent line. It replaces the deterrent effect of the warning chrome
 * that this stage removed, and it does that with weight and position rather
 * than with an alert colour — the amber token is reserved for availability
 * notes (PLAN.md 9.1) and red is not in the palette at all.
 */
.peptas-access-gate__deterrent {
    color: var(--peptas-ink);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 20px;
}

.peptas-access-gate__legal,
.peptas-access-gate__retention {
    color: var(--peptas-slate);
    font-size: 12px;
    line-height: 1.55;
}

.peptas-access-gate__legal {
    margin: 0 0 20px;
}

.peptas-access-gate__retention {
    margin: 16px 0 0;
}

.peptas-access-gate__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

/* The solid button of section 7, written out because the markup class is fixed by the JS contract. */
.peptas-access-gate__confirm {
    background: var(--peptas-blue);
    border: 1px solid var(--peptas-blue);
    border-radius: 3px;
    color: var(--peptas-white);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 44px;
    padding: 11px 24px;
}

.peptas-access-gate__confirm:hover,
.peptas-access-gate__confirm:focus {
    background: var(--peptas-blue-deep);
    border-color: var(--peptas-blue-deep);
}

/* "Leave site" stays a <button> for the JS, and reads as a grey text link. */
.peptas-access-gate__leave {
    background: transparent;
    border: 0;
    color: var(--peptas-slate);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    min-height: 44px;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.peptas-access-gate__leave:hover,
.peptas-access-gate__leave:focus {
    color: var(--peptas-ink);
}

/* ==========================================================================
   10. Header, ribbon, primary navigation, panels, utility strip — PLAN.md 3.1.
   Stage S5. The rules moved out of mymedi-child/style.css rather than being
   overridden from here; the old header's backdrop-filter, its shadow and its
   cart badge are deleted, not covered up. The panels are CSS only — :hover and
   :focus-within open them — and below 900px they render open inside the list.
   One 20px line icon on the search control (PLAN.md 9.4); no icon font.
   ========================================================================== */

.peptas-header {
    background: var(--peptas-white);
    border-bottom: 1px solid var(--peptas-line);
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-bar .peptas-header {
    top: 32px;
}

/* The ribbon: one small line, in the header's own tint. Never a warning bar. */
.peptas-header__ribbon {
    background: var(--peptas-mist);
    border-bottom: 1px solid var(--peptas-line);
}

.peptas-header__ribbon-line {
    color: var(--peptas-slate);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    padding: 6px 0;
}

.peptas-header__inner {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 68px;
}

.peptas-header__brand {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
}

.peptas-header__brand img {
    display: block;
    height: 42px;
    object-fit: contain;
    object-position: left center;
    width: 136px;
}

.peptas-nav {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 16px;
    justify-content: flex-end;
}

.peptas-nav__list {
    align-items: center;
    display: flex;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.peptas-nav__item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/*
 * Scoped for the same cascade reason as the search input and the footer heading:
 * section 4 colours every link at (0,1,1) — `body.peptas-site-v2 a` — so a bare
 * .peptas-nav__link at (0,1,0) would lose its ink and read as a link colour.
 */
body.peptas-site-v2 .peptas-nav__link {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: var(--peptas-ink);
    display: inline-flex;
    font-size: 15px;
    font-weight: 500;
    min-height: 66px;
    padding: 0 9px;
    text-decoration: none;
    white-space: nowrap;
}

body.peptas-site-v2 .peptas-nav__link:hover,
body.peptas-site-v2 .peptas-nav__link:focus,
body.peptas-site-v2 .peptas-nav__item--panel:focus-within > .peptas-nav__link {
    border-bottom-color: var(--peptas-blue);
    color: var(--peptas-blue-deep);
}

.peptas-nav__cta {
    font-size: 14px;
    margin-left: 10px;
    padding: 8px 14px;
    white-space: nowrap;
}

/* The panel. Hairline, flat ground, no shadow — the system's only depth cue. */
.peptas-nav__panel {
    background: var(--peptas-white);
    border: 1px solid var(--peptas-line);
    display: none;
    left: 0;
    min-width: 250px;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    z-index: 10;
}

.peptas-nav__item--panel:hover > .peptas-nav__panel,
.peptas-nav__item--panel:focus-within > .peptas-nav__panel {
    display: block;
}

.peptas-nav__panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.peptas-nav__panel-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.peptas-site-v2 .peptas-nav__panel-link {
    color: var(--peptas-ink);
    display: block;
    font-size: 14px;
    line-height: 1.4;
    padding: 9px 16px;
    text-decoration: none;
}

body.peptas-site-v2 .peptas-nav__panel-link:hover,
body.peptas-site-v2 .peptas-nav__panel-link:focus {
    background: var(--peptas-mist);
    color: var(--peptas-blue-deep);
}

/* Utility strip: catalog search, plus the tracking link for the legacy window. */
.peptas-header__utility {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 14px;
}

.peptas-search {
    align-items: center;
    border: 1px solid var(--peptas-line);
    display: flex;
}

/*
 * The specificity here is deliberate. The parent styles every text input as a
 * 60px-radius pill on a grey ground at (0,1,2), so a bare .peptas-search__input at
 * (0,1,0) loses the radius, the ground, the padding and the width. Scoping to
 * body.peptas-site-v2 takes this to (0,2,1) and settles it without !important.
 */
body.peptas-site-v2 .peptas-search__input {
    background: var(--peptas-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--peptas-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    min-height: 34px;
    padding: 0 10px;
    width: 120px;
}

body.peptas-site-v2 .peptas-search__submit {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--peptas-slate);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    min-height: 34px;
    padding: 0 9px;
}

body.peptas-site-v2 .peptas-search__submit:hover,
body.peptas-site-v2 .peptas-search__submit:focus {
    color: var(--peptas-blue);
}

.peptas-icon {
    display: block;
    flex: 0 0 auto;
}

body.peptas-site-v2 .peptas-header__tracking {
    color: var(--peptas-slate);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

body.peptas-site-v2 .peptas-header__tracking:hover,
body.peptas-site-v2 .peptas-header__tracking:focus {
    color: var(--peptas-blue-deep);
    text-decoration: underline;
}

/*
 * The toggle. It ships with the hidden attribute and peptas.js removes it, so a
 * blocked script leaves the navigation open rather than unreachable. The
 * :not([hidden]) keeps that attribute authoritative against the display below.
 */
body.peptas-site-v2 .peptas-nav-toggle {
    background: var(--peptas-white);
    border: 1px solid var(--peptas-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--peptas-ink);
    cursor: pointer;
    display: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    min-height: 38px;
    padding: 0 14px;
}

@media (max-width: 1120px) {
    .peptas-header__inner {
        gap: 14px;
    }

    .peptas-nav {
        gap: 12px;
    }

    body.peptas-site-v2 .peptas-nav__link {
        font-size: 14px;
        padding: 0 7px;
    }

    body.peptas-site-v2 .peptas-search__input {
        width: 92px;
    }

    body.peptas-site-v2 .peptas-header__tracking {
        font-size: 12px;
    }
}

@media (max-width: 899px) {
    .peptas-header__inner {
        flex-wrap: wrap;
        min-height: 60px;
    }

    body.peptas-site-v2 .peptas-nav-toggle:not([hidden]) {
        display: inline-flex;
    }

    .peptas-header[data-peptas-nav="collapsible"] .peptas-nav {
        display: none;
    }

    .peptas-header[data-peptas-nav="collapsible"] .peptas-nav.is-open,
    .peptas-header:not([data-peptas-nav="collapsible"]) .peptas-nav {
        display: block;
    }

    .peptas-nav {
        flex-basis: 100%;
        padding-bottom: 16px;
    }

    .peptas-nav__list {
        align-items: stretch;
        display: block;
    }

    .peptas-nav__item {
        border-top: 1px solid var(--peptas-line);
    }

    body.peptas-site-v2 .peptas-nav__link {
        border-bottom: 0;
        font-size: 15px;
        min-height: 44px;
        padding: 10px 0;
    }

    body.peptas-site-v2 .peptas-nav__link:hover,
    body.peptas-site-v2 .peptas-nav__link:focus,
    body.peptas-site-v2 .peptas-nav__item--panel:focus-within > .peptas-nav__link {
        border-bottom-color: transparent;
    }

    /* Below 900px the panels are simply open, so a tap on a parent navigates. */
    .peptas-nav__panel,
    .peptas-nav__item--panel:hover > .peptas-nav__panel,
    .peptas-nav__item--panel:focus-within > .peptas-nav__panel {
        border: 0;
        display: block;
        padding: 0 0 10px 14px;
        position: static;
    }

    body.peptas-site-v2 .peptas-nav__panel-link {
        padding: 7px 0;
    }

    .peptas-nav__item--cta {
        border-top: 0;
        padding-top: 14px;
    }

    .peptas-nav__cta {
        display: block;
        margin-left: 0;
    }

    .peptas-header__utility {
        border-top: 1px solid var(--peptas-line);
        flex-wrap: wrap;
        margin-top: 14px;
        padding-top: 14px;
    }

    .peptas-search {
        flex: 1 1 auto;
    }

    body.peptas-site-v2 .peptas-search__input {
        width: 100%;
    }
}

/* ==========================================================================
   11. Footer — PLAN.md 3.2. Stage S5. Identity block, four columns, one scope
   line, and nothing else: no cart, no account, no payment section, no icon.
   Ground --peptas-blue-deep per 9.1, so no ninth colour; the focus ring is
   white here because section 5's blue is invisible against that ground.
   ========================================================================== */

.peptas-footer {
    background: var(--peptas-blue-deep);
    color: var(--peptas-line);
    font-size: 14px;
    padding: 44px 0 40px;
}

.peptas-footer__identity {
    border-bottom: 1px solid var(--peptas-blue);
    padding-bottom: 22px;
}

.peptas-footer__identity-line {
    color: var(--peptas-line);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.peptas-footer__identity-line strong {
    color: var(--peptas-white);
    font-weight: 600;
}

.peptas-footer__columns {
    display: grid;
    gap: 30px 34px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 28px 0 26px;
}

/*
 * Scoped, for the same reason as the search input above: section 3 styles every
 * heading at (0,1,2) — `body.peptas-site-v2 h2` — which would otherwise paint this
 * one 26px in --peptas-blue-deep, the colour of the ground it sits on.
 */
body.peptas-site-v2 .peptas-footer__heading {
    color: var(--peptas-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.peptas-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.peptas-footer__list li {
    list-style: none;
    margin: 0 0 9px;
    padding: 0;
}

body.peptas-site-v2 .peptas-footer a,
.peptas-footer__link-button {
    background: transparent;
    border: 0;
    color: var(--peptas-line);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

body.peptas-site-v2 .peptas-footer a:hover,
body.peptas-site-v2 .peptas-footer a:focus,
.peptas-footer__link-button:hover,
.peptas-footer__link-button:focus {
    color: var(--peptas-white);
    text-decoration: underline;
}

.peptas-footer__scope {
    border-top: 1px solid var(--peptas-blue);
    color: var(--peptas-line);
    font-size: 13px;
    margin: 0;
    padding-top: 20px;
}

/*
 * The blue ring of section 5 measures under 3:1 against this ground, which is what
 * WCAG 2.1 SC 1.4.11 asks of a focus indicator. Higher specificity than that rule,
 * and the same !important, because the parent reset removes focus rings outright.
 */
html body.peptas-site-v2 .peptas-footer a:focus-visible,
html body.peptas-site-v2 .peptas-footer button:focus-visible {
    outline-color: var(--peptas-white) !important;
}

@media (max-width: 899px) {
    .peptas-footer__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .peptas-footer__columns {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   12. Narrow viewports — the type scale steps down, nothing else changes.
   ========================================================================== */

@media (max-width: 700px) {
    body.peptas-site-v2 h1 {
        font-size: 28px;
    }

    body.peptas-site-v2 h2 {
        font-size: 22px;
    }

    body.peptas-site-v2 h3 {
        font-size: 18px;
    }

    body.peptas-site-v2 th,
    body.peptas-site-v2 td {
        padding: 9px 10px;
    }

    /*
     * The card scrolls inside itself rather than the viewport, so the confirm
     * button stays reachable on a short screen.
     */
    .peptas-access-gate {
        padding: 10px;
    }

    .peptas-access-gate__panel {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 20px);
    }

    .peptas-access-gate__content {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.peptas-site-v2 * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

@media print {
    body.peptas-site-v2 {
        color: #000;
        font-size: 11pt;
    }

    body.peptas-site-v2 tbody tr:nth-child(even) {
        background: transparent;
    }
}

/* ==========================================================================
   14. Content components — PLAN.md 9.5, stage S6. The legacy blocks they
   replace were DELETED from style.css in the same commit, not overridden here.
   Each component's rationale is in its docblock under parts/peptas/.
   ========================================================================== */

.peptas-band {
    padding: 56px 0;
}

.peptas-band + .peptas-band {
    border-top: 1px solid var(--peptas-line);
}

.peptas-band--mist {
    background: var(--peptas-mist);
}

/* Build note and Phase 4 form placeholder: amber, so neither reads as copy. */
.peptas-buildnote,
.peptas-rfq__placeholder {
    border-left: 2px solid var(--peptas-amber);
    color: var(--peptas-slate);
    max-width: 68ch;
    padding-left: 12px;
}

/* Hero — PLAN.md 4 Section 1. Generic motif behind the text at 8%. */
.peptas-hero {
    overflow: hidden;
    position: relative;
}

.peptas-hero__inner {
    padding: 64px 0 56px;
    position: relative;
    z-index: 1;
}

.peptas-hero__motif {
    color: var(--peptas-blue);
    height: 100%;
    opacity: 0.08;
    position: absolute;
    right: -4%;
    top: 0;
    width: 54%;
}

.peptas-hero__heading,
.peptas-hero__body {
    max-width: 60ch;
}

.peptas-hero__actions,
.peptas-quotation-panel__action {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 24px 0 0;
}

/* Capability strip — PLAN.md 4 Section 2. Hairlines, tabular figures. */
.peptas-capstrip {
    background: var(--peptas-mist);
    border-bottom: 1px solid var(--peptas-line);
    border-top: 1px solid var(--peptas-line);
    padding: 24px 0;
}

.peptas-capstrip__grid,
.peptas-scope__columns,
.peptas-routes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.peptas-capstrip__cell {
    border-left: 1px solid var(--peptas-line);
    padding: 4px 22px;
}

.peptas-capstrip__cell:first-child {
    border-left: 0;
    padding-left: 0;
}

.peptas-capstrip__value {
    font-variant-numeric: tabular-nums;
}

/* Route cards — PLAN.md 4 Section 3. Equal cards, no icons, no prices. */
.peptas-routes__grid,
.peptas-scope__columns {
    gap: 24px;
}

.peptas-routes__card,
.peptas-quotation-panel,
.peptas-rfq__pane {
    border: 1px solid var(--peptas-line);
    padding: 22px;
}

/* Process steps — PLAN.md 4 Section 5, 9.3 item 3. Node = one inline SVG circle
   with the number as real text; the connector is a hairline pseudo-element, so
   one copy of the markup runs horizontally at 900px+ and vertically below. */
.peptas-steps__flow {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

.peptas-steps__step {
    position: relative;
}

.peptas-steps__node {
    color: var(--peptas-blue);
    display: block;
    height: 40px;
    position: relative;
    width: 40px;
}

.peptas-steps__node svg {
    display: block;
    height: 40px;
    width: 40px;
}

.peptas-steps__number {
    align-items: center;
    display: flex;
    font-weight: 600;
    inset: 0;
    justify-content: center;
    position: absolute;
}

.peptas-steps__step::after {
    background: var(--peptas-line);
    content: "";
    height: 1px;
    left: 52px;
    position: absolute;
    right: -24px;
    top: 20px;
}

.peptas-steps__step:last-child::after {
    display: none;
}

/* Specification table — base block is in section 6; S6 additions only. */
.peptas-spec-table__caption {
    caption-side: bottom;
    padding-top: 10px;
    text-align: left;
}

.peptas-spec-table__gated {
    font-style: italic;
}

.peptas-spec-table__link,
.peptas-identity-verify__link {
    margin-left: 8px;
}

/* Document list — PLAN.md 9.5. One line per document object. */
.peptas-doclist__items,
.peptas-scope__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.peptas-doclist__item,
.peptas-scope__list li {
    border-top: 1px solid var(--peptas-line);
    padding: 10px 0;
}

.peptas-doclist__name {
    font-weight: 600;
}

/* Quotation note — PLAN.md 7.9. Long form marked, short form quiet. */
.peptas-quotation-note--long {
    border-left: 2px solid var(--peptas-blue);
    padding-left: 20px;
}

.peptas-quotation-panel--closing {
    background: var(--peptas-white);
}

/* Shared: the quiet register. */
.peptas-hero__scope,
.peptas-buildnote,
.peptas-spec-table__caption,
.peptas-quotation-panel__volume {
    font-size: 13px;
}

.peptas-quotation-note--short,
.peptas-scope--compact {
    font-size: 14px;
}

.peptas-hero__scope,
.peptas-spec-table__caption,
.peptas-spec-table__gated,
.peptas-doclist__state,
.peptas-scope__review,
.peptas-quotation-note--short,
.peptas-scope--compact,
.peptas-quotation-panel__volume {
    color: var(--peptas-slate);
}

.peptas-quotation-note--short,
.peptas-scope--compact,
.peptas-quotation-panel__volume {
    max-width: 68ch;
}

.peptas-routes__heading,
.peptas-scope__heading {
    margin: 0 0 24px;
}

.peptas-steps__heading,
.peptas-quotation-panel__heading,
.peptas-rfq__heading {
    margin: 0 0 12px;
}

.peptas-routes__title,
.peptas-capstrip__label,
.peptas-scope__column-heading,
.peptas-quotation-note__heading {
    margin: 0 0 10px;
}

.peptas-hero__heading,
.peptas-routes__body,
.peptas-steps__body,
.peptas-capstrip__value,
.peptas-quotation-note__body,
.peptas-quotation-panel__sentence,
.peptas-quotation-panel__state,
.peptas-rfq__placeholder {
    margin: 0;
}

.peptas-hero__eyebrow,
.peptas-steps__title,
.peptas-doclist__items,
.peptas-band__action,
.peptas-routes__action,
.peptas-steps__actions,
.peptas-quotation-note--short,
.peptas-scope--compact,
.peptas-quotation-panel__volume,
.peptas-rfq__prefill,
.peptas-rfq__pane {
    margin: 14px 0 0;
}

.peptas-hero__body,
.peptas-hero__scope,
.peptas-buildnote,
.peptas-steps__after,
.peptas-scope__api,
.peptas-scope__review,
.peptas-spec-table--specimen,
.peptas-rfq__modes,
.peptas-rfq__terms {
    margin: 22px 0 0;
}

.peptas-rfq__terms-heading {
    margin: 20px 0 8px;
}

/* RFQ panel — PLAN.md 9.5, Phase 1 shell. Radios and panes switched by :checked
   siblings: no JavaScript, and with no CSS all three panes stay visible. */
.peptas-rfq__radio {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.peptas-rfq__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.peptas-rfq__tab {
    border: 1px solid var(--peptas-line);
    cursor: pointer;
    font-weight: 600;
    padding: 9px 16px;
}

.peptas-rfq__radio:checked ~ .peptas-rfq__pane {
    display: none;
}

#peptas-rfq-custom:checked ~ .peptas-rfq__pane--custom,
#peptas-rfq-stock:checked ~ .peptas-rfq__pane--stock,
#peptas-rfq-volume:checked ~ .peptas-rfq__pane--volume {
    display: block;
}

#peptas-rfq-custom:checked ~ .peptas-rfq__tabs [for="peptas-rfq-custom"],
#peptas-rfq-stock:checked ~ .peptas-rfq__tabs [for="peptas-rfq-stock"],
#peptas-rfq-volume:checked ~ .peptas-rfq__tabs [for="peptas-rfq-volume"] {
    background: var(--peptas-blue);
    border-color: var(--peptas-blue);
    color: var(--peptas-white);
}

.peptas-rfq__radio:focus-visible ~ .peptas-rfq__tabs {
    outline: 2px solid var(--peptas-blue);
    outline-offset: 4px;
}

/* ===== 15. Content components below 900px, then below 768px ============== */

@media (max-width: 899px) {
    .peptas-steps__flow {
        gap: 0;
        grid-template-columns: 1fr;
    }

    .peptas-steps__step {
        padding: 0 0 24px 56px;
    }

    .peptas-steps__node {
        left: 0;
        position: absolute;
        top: 0;
    }

    .peptas-steps__step::after {
        bottom: 0;
        height: auto;
        left: 20px;
        right: auto;
        top: 46px;
        width: 1px;
    }
}

@media (max-width: 767px) {
    .peptas-band {
        padding: 40px 0;
    }

    .peptas-hero__inner {
        padding: 44px 0 40px;
    }

    .peptas-hero__motif {
        display: none;
    }

    .peptas-capstrip__cell {
        border-left: 0;
        padding: 12px 0;
    }

    .peptas-capstrip__cell + .peptas-capstrip__cell {
        border-top: 1px solid var(--peptas-line);
    }
}

/* ==========================================================================
   16. Inventory table and catalog filters — PLAN.md 6.2, 9.5. Stage S7. The
   table is section 6's table plus one reflow: below 900px each row stacks and
   its cells print their column heading from data-label, so the field names
   survive the loss of the header row. No price column exists, at any width.
   ========================================================================== */

.peptas-catalog-filters {
    border-bottom: 1px solid var(--peptas-line);
    border-top: 1px solid var(--peptas-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin: 24px 0;
    padding: 12px 0;
}

.peptas-catalog-filters__label {
    color: var(--peptas-slate);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.peptas-catalog-filters__list {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 4px 14px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.peptas-catalog-filters__list a[aria-current] {
    color: var(--peptas-ink);
    font-weight: 600;
    text-decoration: none;
}

/* Two plain stacked lists — 404 routes and the RFQ's two required fields. */
.peptas-notfound__routes,
.peptas-rfq__required {
    border-top: 1px solid var(--peptas-line);
    list-style: none;
    margin: 16px 0 28px;
    padding: 0;
}

.peptas-notfound__routes li,
.peptas-rfq__required li {
    border-bottom: 1px solid var(--peptas-line);
    font-size: 14px;
    padding: 8px 0;
}

@media (max-width: 899px) {
    .peptas-inventory thead {
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

    .peptas-inventory tbody tr {
        border-bottom: 1px solid var(--peptas-slate);
        display: block;
        padding: 8px 0;
    }

    .peptas-inventory tbody th,
    .peptas-inventory tbody td {
        border: 0;
        display: block;
        padding: 2px 0;
    }

    .peptas-inventory tbody td:empty {
        display: none;
    }

    .peptas-inventory tbody td::before {
        color: var(--peptas-slate);
        content: attr(data-label) ": ";
        font-size: 12px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }
}