/*
 * Global shell restyle (peptidology4): the header evolves from the floating
 * translucent pill to the solid bar from the approved boards - white, full
 * width, hairline underline, ink nav links, soft-grey search field, magenta
 * cart badge.
 *
 * Restyle, not rewrite: the markup in header.php is untouched, so FiboSearch,
 * the FunnelKit mini-cart toggler and the mobile drawer keep their wiring.
 * Loaded on every page (the header is on every page), versioned by filemtime.
 */

:root {
    --pep-primary: #de0076;
    --pep-ink: #171419;
    --pep-muted: #6a6570;
    --pep-line: #ece8ec;
    --pep-field: #f4f1f5;
}

/* ---- the bar itself ---- */
header.main-head {
    padding: 0;
    background: var(--white-color, #fff);
    border-bottom: 1px solid var(--pep-line);
}

header.main-head .navbar {
    padding: 14px 0;
    background: none;
    border: 0;
    border-radius: 0;
}

/* the pill's backdrop-blur layer - gone */
header.main-head .navbar:after {
    display: none;
}

/* scrolled state: same bar, a whisper of shadow for depth */
.main-head.fixed {
    border-bottom: 1px solid var(--pep-line);
    box-shadow: 0 10px 30px -24px rgba(23, 20, 25, .35);
}

/* Wide-desktop bar (the aminoclub read): the logo, nav, search and cart
   spread across a much wider container than the 1,164px page content, so the
   header owns the full width of a big screen. Only the header's own container
   widens - page sections keep their grid - and below 1200px nothing changes,
   so phones and iPads keep the layout that already works there. */
@media (min-width: 1200px) {
    header.main-head > .container {
        max-width: min(1760px, calc(100% - 80px));
    }

    header.main-head .navbar {
        padding: 16px 0;
        display: flex;
        align-items: center;
    }

    /* One centered cluster, not an edge-to-edge spread: logo, menu, search
       and cart sit together in the middle of the wide bar with generous,
       EVEN air between them (the aminoclub read - v2 after Josh flagged the
       uneven gaps the flexible-middle version left). */
    header.main-head .navbar {
        justify-content: center;
        gap: 48px;
    }

    header.main-head .navbar-collapse {
        flex: 0 1 auto;
        justify-content: center;
    }

    header.main-head .navbar-collapse .navbar-nav.ms-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    header.main-head .navbar-nav {
        gap: 14px;
    }

    header.main-head .secondary-nav {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    header.main-head .dgwt-wcas-search-wrapp {
        min-width: 300px;
    }
}

/* ---- brand logo ----
   The logo <img> carries width/height attributes for CLS; the stylesheet
   sizes only the width, so height must be auto or the attribute height
   (604px!) wins and stretches the bar. */
.main-head .navbar-brand img {
    height: auto;
    /* Optical alignment: the wordmark x-height sits at ~47% of the PNG
       (the swoosh hangs lower than the letters), so a centered image puts
       "peptidology" ~3px above the menu text. Nudge the image down by a
       fraction of its own height so the wordmark, not the PNG box, lines
       up with the Inter menu links, search field and icons. */
    transform: translateY(5%);
}

/* ---- nav links ---- */
.main-head .navbar-nav li a {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--pep-ink);
}

.main-head .navbar-nav li a:hover,
.main-head .navbar-nav li a:focus-visible,
.main-head .navbar-nav li.current-menu-item > a {
    color: var(--pep-primary);
}

/* ---- search field ---- */
.main-head .dgwt-wcas-search-input,
.main-head .header-search-form input[type="search"],
.main-head .header-search-form input[type="text"] {
    background: var(--pep-field);
    border: 0;
    border-radius: 12px;
}

.main-head .dgwt-wcas-search-input:focus {
    background: var(--pep-field);
    box-shadow: 0 0 0 2px var(--pep-line);
}

/* ---- cart badge ---- */
.main-head .fkcart-shortcode-count,
.main-head .cart-quantity {
    background: var(--pep-primary);
    color: #fff;
}

/* ============================================================
   Site-wide components
   ============================================================ */

/* ---- manufacturing card ([pep_manufacturing]) ---- */
.pep-mfg {
    background: #fff;
    border: 1px solid var(--pep-line);
    border-radius: 24px;
    overflow: hidden;
    margin: 26px auto;
    max-width: min(1296px, calc(100% - 24px));
}

.pep-mfg__head {
    padding: 22px 20px 4px;
    max-width: 68ch;
}

.pep-mfg__eyebrow {
    margin: 0;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pep-primary);
}

.pep-mfg__title {
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-weight: 300;
    font-size: clamp(23px, 3.2vw, 32px);
    line-height: 1.12;
    letter-spacing: -.03em;
    text-transform: none;
    color: var(--pep-ink);
    margin: 8px 0 10px;
}

.pep-mfg__title b {
    font-weight: 800;
}

.pep-mfg__sub {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4c4551;
}

.pep-mfg__body {
    display: grid;
    grid-template-columns: 1fr;
}

/* ---- the vial cross-section ---- */
.pep-mfg__visual {
    position: relative;
    display: grid;
    place-items: center;
    padding: 18px 16px 24px;
    border-bottom: 1px solid var(--pep-line);
    background:
        radial-gradient(110% 85% at 50% 110%, rgba(222, 0, 118, .08) 0%, rgba(222, 0, 118, 0) 55%),
        linear-gradient(180deg, #f8f9fa 0%, #fdfdfe 100%);
}

.pep-mfg__vialsvg {
    width: 148px;
    height: auto;
    filter: drop-shadow(0 20px 18px rgba(23, 20, 25, .18));
    transform: perspective(700px) rotateY(-10deg) rotateX(3deg);
}

.pep-mfg__note {
    position: absolute;
    background: #fff;
    border: 1px solid var(--pep-line);
    border-radius: 50px;
    padding: 5px 10px;
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-weight: 800;
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pep-ink);
    box-shadow: 0 8px 18px -10px rgba(23, 20, 25, .35);
    white-space: nowrap;
}

.pep-mfg__note--a { top: 26px; right: 8%; }
.pep-mfg__note--b { top: 42%; left: 6%; }
.pep-mfg__note--c { top: 64%; right: 6%; color: var(--pep-primary); }

.pep-mfg__stages {
    display: grid;
    grid-template-columns: 1fr;
}

.pep-mfg__stage {
    padding: 14px 20px 18px;
}

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

.pep-mfg__stage-t {
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--pep-ink);
    margin: 0 0 12px;
}

.pep-mfg__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: mfg;
}

/* one continuous path across both stages: the vial column starts at 04 */
.pep-mfg__steps[start="4"] {
    counter-reset: mfg 3;
    display: flex;
    flex-direction: column;
}

.pep-mfg__steps li {
    counter-increment: mfg;
    position: relative;
    padding: 0 0 16px 40px;
}

.pep-mfg__steps li:last-child {
    padding-bottom: 2px;
}

/* numbered dot + connector: the step is a station on a line */
.pep-mfg__steps li::before {
    content: counter(mfg, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f5f5f7 0%, #fcfcfd 100%);
    border: 1px solid var(--pep-line);
    display: grid;
    place-items: center;
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-weight: 800;
    font-size: 10px;
    color: var(--pep-primary);
}

.pep-mfg__steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 29px;
    bottom: 3px;
    width: 1px;
    background: var(--pep-line);
}

.pep-mfg__steps b {
    display: block;
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-weight: 800;
    font-size: 13.5px;
    color: var(--pep-ink);
    margin-bottom: 3px;
}

.pep-mfg__steps span {
    display: block;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--pep-muted);
    max-width: 52ch;
}

/* ---- proof rail: process mapped to the test that checks it ---- */
.pep-mfg__proof {
    border-top: 1px solid var(--pep-line);
    background: linear-gradient(90deg, #fff4fa, #fff);
    padding: 16px 20px 18px;
}

.pep-mfg__proof-t {
    margin: 0 0 12px;
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-weight: 800;
    font-size: 13.5px;
    color: var(--pep-ink);
}

.pep-mfg__proof-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.pep-mfg__proof-grid li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pep-mfg__proof-grid .q {
    font-size: 12px;
    font-weight: 700;
    color: var(--pep-ink);
}

.pep-mfg__proof-grid .a {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--pep-muted);
}

.pep-mfg__proof-grid .a b {
    color: var(--pep-green);
    font-weight: 800;
}

.pep-mfg__proof-f {
    margin: 12px 0 0;
}

.pep-mfg__proof-f a {
    font-weight: 700;
    font-size: 13px;
    color: var(--pep-primary);
}

/* ---- compact variant ---- */
.pep-mfg--compact {
    border-radius: 18px;
    padding: 16px 18px;
    margin: 18px 0;
    max-width: none;
}

.pep-mfg--compact .pep-mfg__lede {
    margin: 7px 0 11px;
    font-size: 13px;
    line-height: 1.55;
    color: #4c4551;
    max-width: 60ch;
}

.pep-mfg__chips {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pep-mfg__chips li {
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-weight: 800;
    font-size: 9.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pep-ink);
    background: linear-gradient(180deg, #f5f5f7 0%, #fcfcfd 100%);
    border: 1px solid var(--pep-line);
    border-radius: 50px;
    padding: 6px 11px;
}

.pep-mfg__link {
    font-weight: 700;
    font-size: 13px;
    color: var(--pep-primary);
}

@media (min-width: 992px) {
    .pep-mfg__head {
        padding: 28px 30px 6px;
    }

    .pep-mfg__body {
        grid-template-columns: 264px 1fr;
    }

    .pep-mfg__visual {
        border-bottom: 0;
        border-right: 1px solid var(--pep-line);
    }

    .pep-mfg__vialsvg {
        width: 168px;
    }

    .pep-mfg__stages {
        grid-template-columns: 1fr 1fr;
    }

    .pep-mfg__stage {
        padding: 18px 30px 24px;
    }

    .pep-mfg__stage + .pep-mfg__stage {
        border-top: 0;
        border-left: 1px solid var(--pep-line);
    }

    .pep-mfg__proof {
        padding: 20px 30px 24px;
    }

    .pep-mfg__proof-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

/* ---- promo ticker (replaces Simple Banner's presentation) ---- */
#simple-banner, .simple-banner {
    display: none !important;
}

.pep-ticker {
    background: var(--pep-ink);
    color: #fff;
    overflow: hidden;
    /* Sticky, not static: the fixed header keeps its initial offset (the
       ticker's height), so a scrolling-away ticker left a bar-height gap
       between the menu and the viewport top. Sticking the ticker fills its
       own gap and keeps the live proof + promos visible. */
    position: sticky;
    top: 0;
    z-index: 12;
}

/* logged-in: clear the 32px WP admin bar (46px on small screens) */
body.admin-bar .pep-ticker {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .pep-ticker {
        top: 46px;
    }
}

/* No will-change: the running animation already promotes the layer, and
   common.js pauses the drift while the bar is offscreen. */
.pep-ticker__track {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 9px 0;
    animation: pep-ticker-drift 36s linear infinite;
}

.pep-ticker:hover .pep-ticker__track {
    animation-play-state: paused;
}

.pep-ticker__item {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #e8e5ea;
}

/* Highlights rotate through the exact brand trio - the swoosh / vial-label
   colors - instead of generic pastels (brand-alignment pass, Josh 2026-08-24). */
.pep-ticker__item strong,
.pep-ticker__item b {
    font-weight: 800;
    color: #e01f78;
}

.pep-ticker__item:nth-of-type(3n+2) strong,
.pep-ticker__item:nth-of-type(3n+2) b {
    color: #29b8d8;
}

.pep-ticker__item:nth-of-type(3n) strong,
.pep-ticker__item:nth-of-type(3n) b {
    color: #F79A1F;
}

.pep-ticker__item a {
    color: #29b8d8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pep-ticker__dot {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e01f78;
    margin: 0 22px;
}

.pep-ticker__dot:nth-of-type(3n+1) { background: #29b8d8; }
.pep-ticker__dot:nth-of-type(3n)   { background: #F79A1F; }

@keyframes pep-ticker-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .pep-ticker {
        overflow-x: auto;
    }

    .pep-ticker__track {
        animation: none;
    }
}

/* ============================================================
   Footer: the Apple register (Josh, 2026-08-24)
   Markup untouched - menus, ACF options and the newsletter
   mu-plugin wiring all keep working. Quiet #f5f5f7 ground,
   12px rhythm, muted grey links, small semibold heads, no
   icons, whisper-grey legal text.
   ============================================================ */
footer.cmn-gap {
    background: #f5f5f7;
    border-top: 1px solid var(--pep-line);
    padding-top: 44px;
}

/* newsletter row: compact, hairline-separated */
footer .footer-top {
    padding-bottom: 28px;
    border-bottom: 1px solid #e3e3e6;
    margin-bottom: 30px;
}

footer .footer-logo img {
    max-height: 34px;
    width: auto;
}

footer .footer-form-title {
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pep-ink);
    margin-bottom: 10px;
}

footer .footer-form form input[type="text"],
footer .footer-form form input[type="email"] {
    height: 40px;
    background: #fff;
    border: 1px solid #d9d9de;
    border-radius: 10px;
    font-size: 13px;
    color: var(--pep-ink);
}

/* columns: no dividers, tight tops */
footer .footer-menu-col,
footer .footer-menu-wpr,
footer .footer-menu-item {
    border: 0 !important;
}

footer .footer-menu-title,
footer .footer-menu-title.title-h4 {
    font-family: var(--secondary-font, Manrope, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--pep-ink);
    margin: 0 0 12px;
    padding: 0;
}

footer .footer-menu-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .footer-menu-list li {
    margin: 0 0 9px;
    padding: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #6e6e73;
}

footer .footer-menu-list a {
    font-size: 12px;
    line-height: 1.55;
    color: #6e6e73;
    text-decoration: none;
}

footer .footer-menu-list a:hover,
footer .footer-menu-list a:focus-visible {
    color: var(--pep-ink);
    text-decoration: underline;
}

/* contact block: text-only, no icon glyphs */
footer .last_area li img {
    display: none;
}

footer .last_area li {
    margin-bottom: 11px;
}

footer .last_area li strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pep-ink);
    margin: 4px 0 0;
}

/* copyright + legal: hairline, 12px, whisper-grey disclaimer */
footer .footer-bottom {
    border-top: 1px solid #e3e3e6;
    margin-top: 26px;
    padding: 18px 0 30px;
}

footer .footer-cpy-rgt {
    font-size: 12px;
    color: #6e6e73;
    text-align: left;
    margin-bottom: 14px;
}

footer .footer-bottom p {
    font-size: 11px;
    line-height: 1.65;
    color: #86868b;
    margin: 0 0 10px;
    max-width: none;
}