/* Research summaries on product pages, and the certificate / price tables
   used there and in the guides. Loaded on products and posts only
   (inc/research-content.php), after main.css. Colours are the logo pack's
   (October 2026): Navy #001E33 for headings, Clean Blue #0054A6 for links
   and labels (7.5:1 on white), Aqua #4FB8DC only as decoration. */

:root{
  --cpr-navy:#001E33;--cpr-blue:#0054A6;--cpr-aqua:#4FB8DC;
  --cpr-text:#1E2A33;--cpr-soft:#56646F;--cpr-tint:#F2F7FC;
  --cpr-rule:#E1E9F1;--cpr-rule-strong:#CFDCE8;
  --cpr-head:var(--v4-font-heading,var(--display));
  --cpr-lift:0 1px 2px rgba(0,30,51,.04),0 18px 40px -28px rgba(0,30,51,.2)}

/* ---- Product page: the research summary ------------------------------- */
.cp-research{
  margin:48px auto 0;padding:clamp(26px,4.2vw,52px) clamp(18px,4vw,56px);
  background:var(--white,#fff);
  border:1px solid var(--cpr-rule);border-radius:24px;
  box-shadow:var(--cpr-lift)}
/* One reading column, centred in the card, the way the guides read. */
.cp-research-body{max-width:760px;margin-inline:auto;font-size:16px;line-height:1.72;color:var(--cpr-text)}
.cp-research-body > :first-child{margin-top:0}
.cp-research-body :is(p,ul,ol,figure,.cp-lots){margin:0 0 18px}
.cp-research-body h2{
  margin:46px 0 14px;font-family:var(--cpr-head);font-weight:700;
  font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.015em;color:var(--cpr-navy);
  text-wrap:balance}
.cp-research-body > h2:first-child{margin-top:0}
.cp-research-body h3{
  margin:28px 0 8px;font-family:var(--display);font-weight:650;font-size:18px;
  line-height:1.3;letter-spacing:-.01em;color:var(--cpr-blue)}
.cp-research-body ul{list-style:disc;padding-inline-start:22px}
.cp-research-body ol{list-style:decimal;padding-inline-start:22px}
.cp-research-body li{margin:8px 0;padding-inline-start:2px}
.cp-research-body li::marker{color:var(--cpr-aqua)}
.cp-research-body ol li::marker{color:var(--cpr-blue);font-weight:600}
.cp-research-body a{color:var(--cpr-blue);text-decoration:underline;text-decoration-color:rgba(0,84,166,.35);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s}
.cp-research-body a:hover{text-decoration-color:currentColor}
.cp-research-body .cp-cite{font-size:13.5px;color:var(--cpr-soft)}
.cp-research-body .cp-cite a{color:inherit}
.cp-research-body figure.cp-table{max-width:100%;overflow-x:auto}
.cp-research-body .mono,.cp-research-body code{font-family:var(--mono);font-size:.88em;overflow-wrap:anywhere}
.cp-research-body .cp-note{
  padding:14px 18px;border-left:3px solid var(--cpr-aqua);background:var(--cpr-tint);
  border-radius:0 12px 12px 0;font-size:14.5px;line-height:1.65}
@media(max-width:620px){
  .cp-research{padding:24px 16px;margin-top:32px;border-radius:20px}
  .cp-research-body{font-size:15.5px}
}

/* ---- Tables: guides, product research, certificate and price tables ----
   One look for all of them. The shape comes from cleanpeptides_table_markup()
   (inc/research-content.php):
     .cp-kv     label / value rows (identity tables): fixed layout, so long
                sequences wrap inside their cell
     .cp-stack  three or more columns under a header row: a table from
                640px, one card per row below it, values under their column
                names (data-label)
     neither    stays a table and scrolls inside its frame if it must
   The frame shows a soft shadow at whichever edge has more to scroll to. */
:is(.cp-blog__content,.cp-research-body) .wp-block-table,
.cp-lots-scroll{
  position:relative;max-width:100%;margin:0 0 22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border:1px solid var(--cpr-rule);border-radius:14px;
  background:
    linear-gradient(90deg,#fff 35%,rgba(255,255,255,0)) 0 0/32px 100% no-repeat local,
    linear-gradient(270deg,#fff 35%,rgba(255,255,255,0)) 100% 0/32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,30,51,.2),rgba(0,30,51,0)) 0 0/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,30,51,.2),rgba(0,30,51,0)) 100% 0/12px 100% no-repeat scroll,
    #fff}
.cp-lots{margin:0 0 22px}
.cp-lots .cp-lots-scroll{margin:0}

:is(.cp-blog__content,.cp-research-body,.cp-lots) table{
  width:100%;margin:0;border:0;border-collapse:separate;border-spacing:0;
  font-size:14.5px;line-height:1.5;color:var(--cpr-text);
  overflow-wrap:normal;word-break:normal;hyphens:manual}
:is(.cp-blog__content,.cp-research-body,.cp-lots) :is(th,td){
  padding:12px 16px;text-align:left;vertical-align:top;
  border:0;border-bottom:1px solid var(--cpr-rule);background:none;white-space:normal}
:is(.cp-blog__content,.cp-research-body,.cp-lots) td{min-width:6.5em;overflow-wrap:break-word}
:is(.cp-blog__content,.cp-research-body,.cp-lots) tbody tr:last-child > *{border-bottom:0}
:is(.cp-blog__content,.cp-research-body,.cp-lots) thead th{
  padding-block:11px;background:rgba(0,84,166,.05);border-bottom-color:var(--cpr-rule-strong);
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.01em;line-height:1.35;color:#2A4560}
:is(.cp-blog__content,.cp-research-body,.cp-lots) thead th a{color:inherit}
:is(.cp-blog__content,.cp-research-body,.cp-lots) tbody th{
  font-weight:600;color:var(--cpr-navy);background:rgba(0,84,166,.025)}
:is(.cp-blog__content,.cp-research-body,.cp-lots) :is(th,td) code{
  font-size:.86em;padding:.1em .35em;border-radius:4px;background:#EEF3F8;color:var(--cpr-navy);overflow-wrap:anywhere}
:is(.cp-blog__content,.cp-research-body,.cp-lots) :is(th,td) sub{font-size:.72em}
/* A sequence or SMILES string: the one cell allowed to break anywhere. */
:is(.cp-blog__content,.cp-research-body,.cp-lots) .cp-long{min-width:12em;overflow-wrap:anywhere}

/* label / value */
table.cp-kv{table-layout:fixed}
table.cp-kv tbody th{width:30%}
table.cp-kv td{overflow-wrap:anywhere}

/* certificate and price tables: short values on one line where there is
   room, figures in even columns. (Only here: Inter's tabular setting also
   widens hyphens, which reads badly in prose cells like "beta-4".) */
.cp-lots-table{font-variant-numeric:tabular-nums}
.cp-lots-table td{min-width:8em}
.cp-lots-table td:is(.mono,[data-label="Size"],[data-label="Analysed"],[data-label="HPLC purity"],[data-label="List price"],[data-label="Price today"],[data-label="Per mg"],[data-label="Sizes on sale"],[data-label="Products"]){white-space:nowrap;min-width:0}
.cp-lots-table td.mono{font-family:var(--mono);font-size:13px;letter-spacing:-.01em}
.cp-lots-table s{color:var(--cpr-soft);text-decoration-color:rgba(86,100,111,.6)}
.cp-lots-table b{font-weight:650;color:var(--cpr-navy)}
.cp-lots-note{margin:10px 2px 0;font-size:13px;line-height:1.55;color:var(--cpr-soft)}
.cp-lots-note a{color:var(--cpr-blue);text-decoration:underline;text-underline-offset:3px}

@media(max-width:639px){
  table.cp-kv tbody th{width:38%}
  :is(.cp-blog__content,.cp-research-body,.cp-lots) :is(th,td){padding:11px 13px}

  /* One card per row. The frame stays; rows become blocks inside it. */
  table.cp-stack,.cp-stack > tbody,.cp-stack > tbody > tr,.cp-stack > tbody > tr > *{display:block;width:auto;min-width:0}
  .cp-stack > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cp-stack > tbody > tr{padding:14px 15px;border-bottom:1px solid var(--cpr-rule)}
  .cp-stack > tbody > tr:last-child{border-bottom:0}
  .cp-stack > tbody > tr:nth-child(even){background:#FAFCFE}
  .cp-stack > tbody > tr > *{padding:0;border:0;background:none;white-space:normal;overflow-wrap:anywhere}
  .cp-stack > tbody > tr > :first-child{
    margin:0 0 6px;font-family:var(--display);font-weight:650;font-size:15.5px;line-height:1.35;color:var(--cpr-navy)}
  /* Name on the left, value (div.cp-cell, added by the PHP) on the right. */
  .cp-stack > tbody > tr > [data-label]:not(:first-child){
    display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);column-gap:12px;align-items:start;
    padding:8px 0;border-top:1px dashed var(--cpr-rule)}
  .cp-stack > tbody > tr > [data-label]:not(:first-child)::before{
    content:attr(data-label);font-family:var(--display);font-size:12.5px;font-weight:600;line-height:1.5;color:#4A6076;
    text-transform:none;letter-spacing:normal;font-variant-numeric:normal;overflow-wrap:break-word}
  .cp-stack .cp-cell{min-width:0}
  .cp-stack > tbody > tr > :nth-child(2){border-top:0}
}

/* ---- Spec grid: the sequence cell -------------------------------------- */
.cp-spec-seq{font-size:12.5px;line-height:1.5;overflow-wrap:anywhere;word-break:break-all}

/* ---- Technical specification: easier to scan ----------------------------
   Labels were 9.5px. The long Material list sat beside a short Verification
   list; from 1000px each group lays its rows out two to a line, so the card
   reads as one balanced block. */
.pdp .cp-tech .cp-specrow dt{font-size:10.5px;letter-spacing:.07em;color:#5B6B78}
.pdp .cp-tech .cp-specrow dd{font-size:15px;color:var(--cpr-text)}
.pdp .cp-tech .cp-specgroup-h{font-size:11px;letter-spacing:.09em;color:var(--cpr-navy)}
@media(min-width:1000px){
  .pdp .cp-tech .cp-specgroup dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .pdp .cp-tech .cp-specgroup .cp-specrow,
  .pdp .cp-tech .cp-specgroup .cp-specrow + .cp-specrow{border-top:0;border-bottom:1px dashed var(--line)}
  .pdp .cp-tech .cp-specgroup .cp-specrow:last-child,
  .pdp .cp-tech .cp-specgroup .cp-specrow:nth-last-child(2):nth-child(odd){border-bottom:0}
}

/* ---- Product FAQ (shares .pdp-faq / .faq with the rest of the site) ----- */
.cp-research-faq .faq-list{max-width:820px}
.cp-research-faq .faq{border-color:var(--cpr-rule);border-radius:14px;transition:border-color .15s,box-shadow .15s}
.cp-research-faq .faq:hover{border-color:var(--cpr-rule-strong)}
.cp-research-faq .faq[open]{border-color:var(--cpr-rule-strong);box-shadow:var(--cpr-lift)}
.cp-research-faq .faq summary{gap:18px;padding:18px 20px;font-weight:600;font-size:16px;line-height:1.4;color:var(--cpr-navy)}
.cp-research-faq .faq summary .plus{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--cpr-tint);color:var(--cpr-blue);font-size:18px}
.cp-research-faq .faq[open] summary .plus{background:var(--cpr-blue);color:#fff}
.cp-research-faq .faq .ans{padding:0 20px 20px;font-size:15px;line-height:1.7;color:#3A4954}
.cp-research-faq .faq .ans p{margin:0 0 10px}
.cp-research-faq .faq .ans p:last-child{margin-bottom:0}
.cp-research-faq .faq .ans a{color:var(--cpr-blue);text-decoration:underline;text-underline-offset:3px}
.cp-research-faq .pdp-faq-h{font-family:var(--cpr-head);font-weight:700;color:var(--cpr-navy);letter-spacing:-.015em}
.cp-research-faq .pdp-faq-h .mono{color:var(--cpr-blue)}
@media(prefers-reduced-motion:reduce){
  .cp-research-faq .faq,.cp-research-body a{transition:none}
}

/* ---- Guides: compounds the store does not stock ------------------------- */
.cp-stock-note{
  margin:0 0 26px;padding:16px 20px;border:1px solid var(--cpr-rule);
  border-left:3px solid var(--cpr-aqua);border-radius:0 12px 12px 0;background:var(--cpr-tint);font-size:15.5px;line-height:1.65}
.cp-stock-note p{margin:0 0 8px}
.cp-stock-note p:last-child{margin-bottom:0}

/* Section headings on the product page: the italic accent was the old teal. */
.pdp .cp-sechead h2 em{color:var(--cpr-blue)}