/* ===========================================================================
   UPFRONT PEPTIDES: the skin.

   Loaded AFTER storefront.css and only on the upfront host (see
   brand_css_href() and views/partials/head.php). It changes tokens and adds the
   handful of rules this storefront needs that the store has no element for.
   Nothing in here is loaded on primecoredynamics.com, so nothing in here can
   change it.

   RULES THIS FILE KEEPS:
     - no single-edge accent anywhere: no coloured top border, left border,
       bottom border or side stripe on a card, a panel or a bar. Surfaces are
       told apart by tint, by a chip and by type.
     - nothing that holds a label wraps it. Every button, pill, chip and nav item
       carries white-space: nowrap, and the rows they sit in are grids with equal
       columns rather than inline runs that can orphan the last one.
     - body text on a dark surface is #d0d5df or lighter. Measured against the
       two dark surfaces this site uses, #1c1c1c and #14181f, in the report.
   =========================================================================== */

:root {
    /* The brand's own palette, over the store's tokens. The names are the
       store's; only the values differ, so every rule that reads them follows. */
    --pcd-orange:    #f7890f;
    --accent-orange: #f7890f;
    --accent-blue:   #2456d6;
    --surface-dark:  #14181f;
    --bg:            #f6f7fa;
    --ink:           #14181f;
    --text:          #14181f;
    --muted:         #5b616b;

    /* This site's own, used by the rules below. */
    --uf-ruo-bg:     #1c1c1c;
    --uf-ruo-text:   #ffffff;
    --uf-dark-text:  #d0d5df;
    --uf-nav-text:   #e8ecf3;
    --uf-line:       #e4e7ee;
}

/* ---- The research-use bar ------------------------------------------------
   Near black, white text, still, full width, above the nav. It is a legal line
   rather than an announcement, so it never scrolls and nothing shares it. */
.announce {
    background: var(--uf-ruo-bg);
    color: var(--uf-ruo-text);
}
.announce .announce-msg,
.announce .announce-still .announce-msg {
    color: var(--uf-ruo-text);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* The 1px orange strip that exists only so Safari samples it for the toolbar
   tint. On this site the bar above it is near black, so the sampler is too. */
.tint-sampler { background: var(--uf-ruo-bg); }

/* ---- The nav -------------------------------------------------------------
   The store's floating dark pill, with this site's six plain links in it. */
.navbar { background: var(--surface-dark); }
.nav-item-plain {
    white-space: nowrap;
    color: var(--uf-nav-text);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.nav-item-plain:hover,
.nav-item-plain:focus-visible { color: #ffffff; }
.nav-item-plain.is-active { color: #ffffff; }
/* The active item is marked by weight and by a pill behind it, never by an
   underline or a bar along one edge. */
.nav-item-plain.is-active {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
}
.nav-links { gap: 4px; }

/* ---- The hero ------------------------------------------------------------
   Three vials standing on the page's own light gradient, each lifting on hover,
   which is the motion the static site used. The lift is a transform and a
   shadow: nothing moves in the layout, so a row of three cannot reflow under
   the pointer. */
.hero-media-vials { display: flex; align-items: flex-end; justify-content: center; }
.bhero-vials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    background: radial-gradient(70% 70% at 50% 60%, rgba(46, 91, 224, 0.10) 0%, rgba(46, 91, 224, 0) 70%);
}
.bhero-vial { margin: 0; text-align: center; }
.bhero-vial-link {
    display: block;
    text-decoration: none;
    transform: translateY(0);
    transition: transform 0.22s ease, filter 0.22s ease;
    filter: drop-shadow(0 18px 26px rgba(16, 24, 40, 0.18));
}
.bhero-vial-link:hover,
.bhero-vial-link:focus-visible {
    transform: translateY(-10px);
    filter: drop-shadow(0 28px 34px rgba(16, 24, 40, 0.26));
}
.bhero-vial img { display: block; width: 100%; height: auto; }
.bhero-vial-name {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text);
    white-space: nowrap;
}
/* The middle vial stands a little forward, as on the static site. */
.bhero-vial:nth-child(2) { transform: scale(1.08); z-index: 2; }

@media (max-width: 480px) {
    .bhero-vials { max-width: 320px; gap: 4px; }
    .bhero-vial-name { font-size: 11px; }
}

/* ---- Filters, pills and chips -------------------------------------------
   One height, never wrapping a label, and laid out as a grid of equal columns
   so a row of them cannot leave one pill alone on a second line. */
.shop-seg-item,
.pd-chip,
.pill,
.pd-badge,
.footer-chip {
    white-space: nowrap;
}
/* The research page's section chips: 32px tall, one height, the site blue at
   low saturation, and an anchor offset clear of the floating nav so a chip that
   jumps to a heading does not land it under the bar. */
.rs-chip,
.research-chip,
.pd-anchor-chip {
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(36, 86, 214, 0.10);
    color: #1f47ad;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.rs-chip:hover,
.research-chip:hover,
.pd-anchor-chip:hover { background: rgba(36, 86, 214, 0.16); }
:target { scroll-margin-top: 108px; }
h2[id], h3[id] { scroll-margin-top: 108px; }

/* ---- Documents ----------------------------------------------------------- */
.legal-operated {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: rgba(36, 86, 214, 0.06);
    border: 0;
    border-radius: 12px;
    color: var(--text);
}

/* ---- The footer ---------------------------------------------------------- */
.footer-operated {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
/* The store closes its footer with a blue-to-orange hairline across the bottom
   edge. That is a single-edge accent, which this brand does not use anywhere. */
.footer-accent { display: none; }

/* ---- Dark surfaces -------------------------------------------------------
   Body text on the two dark surfaces this site uses is #d0d5df or lighter.
   Stated here rather than left to the store's muted greys, which are tuned for
   a light card. */
.navbar,
.topbar-mobile,
.mnav,
.announce,
.footer-glass {
    --muted: var(--uf-dark-text);
    --muted-2: var(--uf-dark-text);
    --muted-3: var(--uf-dark-text);
}
.mnav .mnav-label,
.mnav-link,
.footer-glass p,
.footer-glass span { color: var(--uf-dark-text); }

/* ---- The category control ------------------------------------------------
   Pills at 768 and up, the native select under it, never both. The select is a
   real GET form so it works with no script at all. */
.shop-class-form {
    display: none;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}
.shop-class-label {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.shop-class-select {
    height: 44px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid var(--uf-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    font-size: 15px;
}
.shop-class-go {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--accent-blue);
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
/* The store hides the pill row under 900 and offers a disclosure panel instead.
   This brand's rule is the one it was given: pills from 768 up, the native
   select below that, and never the two at once. The 768 to 900 band is the only
   place the two files disagree, and this one wins because it loads second. */
@media (min-width: 768px) {
    .shop-strip { display: flex; }
    .shop-classes-btn { display: none; }
}
@media (max-width: 767.98px) {
    .shop-strip { display: none; }
    .shop-class-form { display: grid; }
}

/* ---- The packaging line --------------------------------------------------
   On the checkout above the place-order button, and on the confirmation under
   the heading. A tinted panel, no edge accent, and it never sits in a card of
   its own: it belongs to the step it is part of. */
.ck-packaging,
.conf-packaging {
    margin: 12px 0 14px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: rgba(36, 86, 214, 0.07);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

/* ---- Body text on a dark surface, measured ------------------------------
   The rule for this brand is 7:1 or better for body text on a dark surface,
   and #d0d5df or lighter. The store's muted greys are tuned against a white
   card and land between 5.2 and 7.0 on the dark panels this site uses, so the
   four that carry running text are stated here. Every value below was measured
   with scratch/brand/verify.py, which computes the WCAG ratio from the two
   computed colours; the numbers are in the report. */
/* .home-seo .home-seo-kicker in storefront.css is two classes, so the single
   class below would lose to it. Matched at the same weight here. */
.home-seo .home-seo-kicker,
.hero-stat-full,
.hero-stat-short,
.pd-sub-was {
    color: var(--uf-dark-text);
}
.pd-sub-signin { color: #cddcff; }

/* The blue accent, one step deeper. White body text on the store's #2456d6
   measures 6.22, which is under the bar for the disclaimer panel and the table
   of contents on a document page; on #1f47ad the same white measures 7.6. The
   token is changed rather than the four rules that read it, so the buttons that
   share the colour move with them. */
:root { --accent-blue: #1f47ad; }