/* Peptide Works -- long-form article pages (pw-article.php).
 *
 * Unlike the homepage template, there are no inline styles to work around here:
 * the markup is a title band and a content column, and the content itself is
 * whatever the editor produced. So this is an ordinary stylesheet with ordinary
 * specificity -- no !important anywhere, and none needed.
 *
 * Type is the redesign's: Newsreader for headings, IBM Plex Sans for body, the
 * same scale as the hub and blog pages so a reader moving between them does not
 * change typeface. IBM Plex is already declared by pw-bestsellers.css, which
 * this sheet depends on.
 */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/newsreader-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500.woff2') format('woff2');}

.pw-article{
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#16191B;
  background:#FFFFFF;
  -webkit-font-smoothing:antialiased;
}
.pw-article *{box-sizing:border-box;}

/* ---- title band ---------------------------------------------------------- */
.pw-article-head{
  background:#F2F7EF;
  border-bottom:1px solid rgba(22,25,27,0.07);
}
.pw-article-head-in{
  max-width:1280px;
  margin:0 auto;
  padding:clamp(32px,4.6vw,64px) clamp(14px,3vw,32px);
}
.pw-article-head h1{
  font-family:'Newsreader',Georgia,serif;
  font-weight:500;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.04;
  letter-spacing:-0.018em;
  margin:0;
  max-width:26ch;
  color:#16191B;
}
.pw-article-standfirst{
  margin:16px 0 0;
  max-width:62ch;
  font-size:17px;
  line-height:1.55;
  color:#4A544D;
  text-wrap:pretty;
}

/* ---- the content column --------------------------------------------------
 * Full width, on request (2026-09-10): the same 1280px container as the title
 * band and the product grid, so the page lines up down one edge instead of a
 * narrow column of prose sitting inside a wide layout.
 *
 * Trade-off, recorded because it was a deliberate choice and not an oversight:
 * a line of body copy now runs ~150 characters at 1440px. Line HEIGHT is pushed
 * to 1.72 to compensate -- the longer the line, the more leading it needs for
 * the eye to find the start of the next one. */
.pw-article-body{
  max-width:min(1280px, calc(100vw - 28px));
  margin:0 auto;
  padding:clamp(30px,4vw,56px) clamp(14px,3vw,32px) clamp(44px,6vw,84px);
  font-size:16.5px;
  line-height:1.72;
  color:#2C3630;
}

.pw-article-body h2{
  font-family:'Newsreader',Georgia,serif;
  font-weight:500;
  font-size:clamp(26px,3vw,34px);
  line-height:1.14;
  letter-spacing:-0.015em;
  color:#16191B;
  margin:clamp(38px,4.4vw,58px) 0 0;
}
.pw-article-body h3{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-weight:600;
  font-size:19px;
  line-height:1.3;
  letter-spacing:-0.005em;
  color:#16191B;
  margin:clamp(26px,3vw,38px) 0 0;
}
/* A heading immediately after another heading is a section opener, not a new
   block -- close the gap so the pair reads as one unit. */
.pw-article-body h2 + h3{margin-top:14px;}
.pw-article-body > *:first-child{margin-top:0;}

.pw-article-body p{margin:14px 0 0;text-wrap:pretty;}
.pw-article-body a{color:#1D5C2C;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.pw-article-body a:hover{color:#123D1D;}
.pw-article-body strong{font-weight:600;color:#16191B;}

.pw-article-body ul,
.pw-article-body ol{margin:16px 0 0;padding-left:0;list-style:none;}
.pw-article-body ol{counter-reset:pw-ol;}
.pw-article-body li{position:relative;padding-left:26px;margin:9px 0 0;}
/* A green rule rather than a bullet glyph: the lists on these pages are
   research areas, not instructions, and a marker that reads as a dash keeps
   them scannable without implying sequence. */
.pw-article-body ul > li::before{
  content:"";position:absolute;left:2px;top:0.72em;
  width:11px;height:2px;border-radius:2px;background:#7BC142;
}
.pw-article-body ol > li::before{
  counter-increment:pw-ol;content:counter(pw-ol) ".";
  position:absolute;left:0;top:0;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:#7C867E;
}

.pw-article-body blockquote{
  margin:22px 0 0;padding:2px 0 2px 20px;
  border-left:2px solid #7BC142;color:#4A544D;
}
.pw-article-body hr{
  border:0;border-top:1px solid rgba(22,25,27,0.1);
  margin:clamp(32px,4vw,48px) 0 0;
}

/* ---- full-bleed blocks ---------------------------------------------------
 * The product grid is wider than the reading column. Rather than splitting the
 * content into two containers -- which would put a template seam in the middle
 * of the client's document -- the grid breaks OUT of the column it sits in.
 *
 * The width maths: the column is centred, so pushing out by half the difference
 * between the viewport and the column, on both sides, lands it at 1280px. The
 * min() keeps it inside the viewport on narrow screens where 1280 does not fit.
 */
/* The grid needs no break-out any more: the content column IS the grid's width
   since the full-width change above. Kept as a named rule so the spacing above
   the grid stays deliberate rather than inheriting a paragraph margin. */
.pw-article-body .pw-bs-wrap{margin-top:clamp(26px,3.2vw,40px);}

/* The article underlines its links -- that is right for prose and wrong for a
   product card, whose whole surface is already a link target. The card's own
   sheet says text-decoration:none, but this stylesheet loads after it and is
   equally specific, so it has to say so here too. */
.pw-article-body .pw-bs a,
.pw-article-body .pw-bs a:hover{text-decoration:none;}

/* ===========================================================================
 * Editorial blocks — added 2026-09-10 for /about-us/
 *
 * These style CORE WordPress blocks (paragraph, columns, media-text, image)
 * rather than introducing bespoke markup. That is the whole point: the client
 * keeps editing About Us in the block editor with blocks they already know,
 * and the design lives here. A shortcode or a custom block would have made the
 * layout ours to maintain and theirs to be locked out of.
 * ======================================================================== */

/* ---- eyebrow -------------------------------------------------------------
 * The small mono kicker above a heading ("Our Story", "Why Peptide Works?").
 * In the old Elementor build these were headings set to <p> — semantically a
 * paragraph pretending to be a heading. Here they are real paragraphs with a
 * class, so the heading outline stays honest. */
.pw-eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#1D5C2C;
  margin:0 0 10px;
}
.pw-article-body .pw-eyebrow{margin:clamp(38px,4.4vw,58px) 0 -4px;}
.pw-article-head .pw-article-eyebrow{margin:0 0 14px;color:#3F7A4C;}

/* ---- two-up text columns (Mission / Vision) ------------------------------ */
.pw-article-body .wp-block-columns{
  display:flex;
  gap:clamp(20px,3vw,44px);
  margin:clamp(26px,3vw,38px) 0 0;
  align-items:flex-start;
}
.pw-article-body .wp-block-column{flex:1 1 0;min-width:0;}
.pw-article-body .wp-block-column > *:first-child{margin-top:0;}
@media (max-width:860px){
  .pw-article-body .wp-block-columns{flex-direction:column;gap:22px;}
}

/* ---- the four "Why choose us" points -------------------------------------
 * A columns block carrying .pw-points. The icon is a background image on the
 * heading, set per point by the class on its column — decoration belongs in
 * the stylesheet, not in the client's content, and an inline SVG in a core
 * block would not survive an editor round-trip anyway. */
.pw-article-body .pw-points{
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(26px,3.2vw,40px);
}
.pw-article-body .pw-points .wp-block-column{
  background:#FFFFFF;
  border:1px solid rgba(22,25,27,0.11);
  border-radius:16px;
  padding:clamp(20px,2.4vw,28px);
}
.pw-article-body .pw-points h3,
.pw-article-body .pw-points h4{
  margin:0;
  padding-top:54px;
  font-size:16.5px;
  font-weight:600;
  background-repeat:no-repeat;
  background-position:left top;
  background-size:34px 34px;
}
.pw-article-body .pw-points p{font-size:15px;color:#4A544D;margin-top:10px;}
@media (max-width:860px){
  .pw-article-body .pw-points{flex-direction:row;flex-wrap:wrap;}
  .pw-article-body .pw-points .wp-block-column{flex:1 1 calc(50% - 12px);}
}
@media (max-width:560px){
  .pw-article-body .pw-points .wp-block-column{flex:1 1 100%;}
}
/* Line icons, stroke #1D5C2C, drawn to the same 24-unit grid and 1.7 weight as
   the product card's COA glyph so the two read as one icon set. */
.pw-point-support h3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5C2C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 14h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M20 14h-2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1z'/%3E%3Cpath d='M18 19v1a2 2 0 0 1-2 2h-3'/%3E%3C/svg%3E");}
.pw-point-value h3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5C2C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.5A3 3 0 0 0 12.5 8h-1a2.5 2.5 0 0 0 0 5h1a2.5 2.5 0 0 1 0 5h-1A3 3 0 0 1 9 16.5'/%3E%3Cpath d='M12 6v2M12 16v2'/%3E%3C/svg%3E");}
.pw-point-purity h3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5C2C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6.5L6.4 17a3 3 0 0 0 2.7 4.3h5.8a3 3 0 0 0 2.7-4.3L14 9.5V3'/%3E%3Cpath d='M8 15h8'/%3E%3C/svg%3E");}
.pw-point-shipping h3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5C2C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E");}

/* ---- alternating image + text rows (core/media-text) --------------------- */
.pw-article-body .wp-block-media-text{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(22px,3.4vw,52px);
  align-items:center;
  margin:clamp(30px,3.6vw,48px) 0 0;
}
/* Place the two children explicitly rather than leaning on source order or on
   `direction:rtl`. Core's own block stylesheet assigns grid-column to these,
   and where it is enqueued it wins; where it is NOT (this theme dequeues most
   of wp-block-library) nothing places them at all. Saying it here works in
   both cases -- the rtl trick worked in neither, because an explicit
   grid-column beats the inline-axis flip. */
.pw-article-body .wp-block-media-text__media{grid-column:1;grid-row:1;}
.pw-article-body .wp-block-media-text__content{grid-column:2;grid-row:1;}
.pw-article-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{grid-column:2;}
.pw-article-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{grid-column:1;}
.pw-article-body .wp-block-media-text__media img{
  display:block;width:100%;height:auto;
  border-radius:16px;
  border:1px solid rgba(22,25,27,0.1);
}
.pw-article-body .wp-block-media-text__content > *:first-child{margin-top:0;}
@media (max-width:860px){
  /* Stacked: image always first, whichever side it took on desktop. */
  .pw-article-body .wp-block-media-text{grid-template-columns:1fr;}
  .pw-article-body .wp-block-media-text__media,
  .pw-article-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{grid-column:1;grid-row:1;}
  .pw-article-body .wp-block-media-text__content,
  .pw-article-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{grid-column:1;grid-row:2;}
}

/* ---- full-width figure --------------------------------------------------- */
.pw-article-body .wp-block-image{margin:clamp(30px,3.6vw,48px) 0 0;}
.pw-article-body .wp-block-image img{
  display:block;width:100%;height:auto;
  border-radius:18px;
  border:1px solid rgba(22,25,27,0.1);
}

/* ---- trust strip ---------------------------------------------------------
 * The two promises from the old build's icon-list. Kept as a plain list so the
 * client edits it as a list; the tick is a marker, not content. */
.pw-article-body .pw-trust{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin:clamp(24px,2.8vw,34px) 0 0;
  padding:18px clamp(16px,2vw,24px);
  background:#F2F7EF;
  border:1px solid rgba(29,92,44,0.14);
  border-radius:14px;
  list-style:none;
}
.pw-article-body .pw-trust li{
  margin:0;padding-left:26px;flex:1 1 26ch;
  font-size:15px;color:#25302A;
}
.pw-article-body .pw-trust li::before{
  content:"";position:absolute;left:2px;top:0.42em;
  width:13px;height:9px;border-left:2px solid #1D5C2C;border-bottom:2px solid #1D5C2C;
  transform:rotate(-45deg);border-radius:1px;background:none;
}

/* ===========================================================================
 * FAQ blocks — added 2026-09-11 for /faqs/
 *
 * Same rule as the About Us blocks: these style CORE blocks (details, group,
 * columns, paragraph), so the client adds and edits questions in the block
 * editor with a block they already have.
 * ======================================================================== */

/* ---- anchor targets clear the sticky header -------------------------------
 * The site header turns position:fixed on scroll -- 121px on desktop, 141px on
 * mobile, both MEASURED (see pw-textpages.css, where they were found). Without
 * this every chip jump lands with the section heading hidden under it. */
.pw-article-body h2[id],
.pw-article-body h3[id]{scroll-margin-top:94px;}
@media (max-width:760px){
  .pw-article-body h2[id],
  .pw-article-body h3[id]{scroll-margin-top:136px;}
}

/* ---- section jump row ---------------------------------------------------- */
.pw-article-body .pw-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 clamp(8px,1.2vw,14px);
}
.pw-article-body .pw-chips a{
  display:inline-flex;align-items:center;
  padding:8px 15px;border-radius:999px;
  border:1px solid rgba(29,92,44,0.22);
  background:#FFFFFF;color:#1D5C2C;
  font-size:14px;font-weight:500;line-height:1.2;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
.pw-article-body .pw-chips a:hover{background:#F2F7EF;border-color:#1D5C2C;color:#123D1D;}

/* ---- the question grid ----------------------------------------------------
 * Two across. Without JavaScript this is a plain two-column grid, row by row.
 * pw-article.js then splits each grid into two INDEPENDENT columns (first half
 * left, second half right) -- see the comment there for why. `align-items:start`
 * keeps the no-JS fallback from stretching a closed card to the height of an
 * open neighbour. */
.pw-article-body .pw-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px clamp(12px,1.6vw,18px);
  align-items:start;
  margin:clamp(18px,2.2vw,26px) 0 0;
}
/* WordPress puts `is-layout-flow` on every group and gives each child after the
   first a block-start margin (`:where(.is-layout-flow) > * + *`). Here that
   pushed the RIGHT column ~16px below the left, and in the no-JS grid it would
   stagger every row. :where() has zero specificity, so this plain rule wins. */
.pw-article-body .pw-faq-grid > *{margin-block:0;}
.pw-article-body .pw-faq-grid.is-split > .pw-faq-col{
  display:flex;flex-direction:column;gap:12px;min-width:0;
}
@media (max-width:760px){
  .pw-article-body .pw-faq-grid{grid-template-columns:1fr;}
}

/* ---- one question ---------------------------------------------------------
 * Native <details>/<summary>. The marker is redrawn as a +/- in a circle,
 * because the UA triangle is the one element on the page that looks like the
 * browser rather than the brand. */
.pw-article-body .wp-block-details{
  margin:0;
  background:#FFFFFF;
  border:1px solid rgba(22,25,27,0.11);
  border-radius:14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pw-article-body .wp-block-details:hover{border-color:rgba(29,92,44,0.34);}
.pw-article-body .wp-block-details[open]{
  border-color:rgba(29,92,44,0.34);
  box-shadow:0 14px 34px -28px rgba(18,61,29,0.55);
}
.pw-article-body .wp-block-details summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:17px 58px 17px 20px;
  font-size:16px;font-weight:600;line-height:1.4;color:#16191B;
  border-radius:14px;
}
.pw-article-body .wp-block-details summary::-webkit-details-marker{display:none;}
.pw-article-body .wp-block-details summary::marker{content:"";}
.pw-article-body .wp-block-details summary::before,
.pw-article-body .wp-block-details summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:12px;height:1.7px;border-radius:2px;background:#1D5C2C;
  transition:transform .18s ease,opacity .18s ease;
}
.pw-article-body .wp-block-details summary::after{transform:translateY(-50%) rotate(90deg);}
.pw-article-body .wp-block-details summary::before{transform:translateY(-50%);}
.pw-article-body .wp-block-details[open] summary::after{transform:translateY(-50%) rotate(0);opacity:0;}
/* The ring the +/- sits in. */
.pw-article-body .wp-block-details summary{background-image:radial-gradient(circle at calc(100% - 28px) 50%, #EDF3E9 0 15px, transparent 15.5px);}
.pw-article-body .wp-block-details summary:focus-visible{outline:2px solid #1D5C2C;outline-offset:2px;}
.pw-article-body .wp-block-details > p{
  margin:0;padding:0 20px 0;
  font-size:15px;line-height:1.66;color:#3A453E;
}
.pw-article-body .wp-block-details > p + p{margin-top:10px;}
.pw-article-body .wp-block-details > p:first-of-type{padding-top:2px;}
.pw-article-body .wp-block-details > p:last-child{padding-bottom:19px;}
@media (prefers-reduced-motion:reduce){
  .pw-article-body .wp-block-details,
  .pw-article-body .wp-block-details summary::before,
  .pw-article-body .wp-block-details summary::after{transition:none;}
}

/* ---- closing band + reading links ---------------------------------------- */
.pw-article-body .pw-band{
  margin:clamp(44px,5.4vw,72px) 0 0;
  padding:clamp(26px,3.4vw,44px);
  background:#F2F7EF;
  border:1px solid rgba(29,92,44,0.14);
  border-radius:20px;
}
.pw-article-body .pw-band > .pw-eyebrow{margin-top:0;}
.pw-article-body .pw-band > h2{margin-top:6px;}
.pw-article-body .pw-band > p:not(.pw-eyebrow){max-width:70ch;color:#4A544D;}
.pw-article-body .pw-resources{gap:clamp(12px,1.6vw,18px);}
.pw-article-body .pw-resources .wp-block-column{
  position:relative;
  background:#FFFFFF;
  border:1px solid rgba(22,25,27,0.1);
  border-radius:14px;
  padding:clamp(18px,2vw,24px);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pw-article-body .pw-resources .wp-block-column:hover{
  border-color:rgba(29,92,44,0.4);
  box-shadow:0 18px 40px -30px rgba(18,61,29,0.6);
}
.pw-article-body .pw-resources .pw-eyebrow{margin:0 0 8px;}
.pw-article-body .pw-resources h3{margin:0;font-size:18px;}
.pw-article-body .pw-resources h3 a{color:#16191B;text-decoration:none;}
/* The whole card is the link target -- the heading's link is stretched over it,
   so there is still exactly ONE link per card for keyboard and screen readers. */
.pw-article-body .pw-resources h3 a::after{content:"";position:absolute;inset:0;border-radius:14px;}
.pw-article-body .pw-resources h3 a:focus-visible{outline:none;}
.pw-article-body .pw-resources h3 a:focus-visible::after{outline:2px solid #1D5C2C;outline-offset:2px;}
.pw-article-body .pw-resources p:not(.pw-eyebrow){font-size:14.5px;color:#4A544D;margin-top:8px;}