/* [PPS-ARTICLE-BOX] product boxes on research posts and compare pages (templates/_article_box.html).
   Loaded only by blog_post.html and compare_detail.html. Every rule is scoped under .pab (specificity 0,2,0 or more)
   so it beats the article's own .article-content / .compare-prose rules even though this file loads before site.css;
   link colours use !important because body.hv2 main a:not(...) { color: inherit } and "main li a" are more specific. */

.pab { box-sizing: border-box; min-width: 0; max-width: 100%; }
.pab *, .pab *::before, .pab *::after { box-sizing: border-box; }

/* top box (compact): white card, 76px photo, name · size, price, deal line, Add to Cart + View product */
.pab-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 26px 0; min-width: 0; max-width: 100%; }
.pab-pair .pab.pab-top { margin: 0; }
@media (min-width: 700px) { .pab-pair.pab-pair-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* a two-column grid: photo | name, price, deal on the first row, the actions under them; the photo spans both rows */
.pab.pab-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center;
  container-type: inline-size; margin: 26px 0; padding: 14px; background: #fff;
  border: 1.5px solid var(--line, #E3DED2); border-radius: 14px; font-family: var(--font-body, inherit);
  font-size: 15px; line-height: 1.35; color: var(--ink, #1F2124); }
.pab .pab-img { flex: 0 0 auto; display: block; width: 76px; height: 76px; max-width: none; margin: 0; padding: 0;
  object-fit: cover; border-radius: 10px; background: #15171a; box-shadow: none; border: 0; }
.pab .pab-b { flex: 1 1 auto; min-width: 0; }
.pab .pab-n { font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--ink, #1F2124); overflow-wrap: anywhere; }
.pab .pab-sz { white-space: nowrap; }   /* [PPS-ARTICLE-BOX] "· 10mg" never splits or leaves the dot hanging */
.pab .pab-p { margin-top: 2px; font-size: 15px; color: var(--ink, #1F2124); }
.pab .pab-p b { font-size: 18px; font-weight: 700; }
.pab .pab-p s { margin-right: 6px; color: var(--ink-mute, #5F636A); font-size: 14px; }
.pab .pab-d { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #0F7A3A; }
.pab .pab-a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; padding: 0; }
.pab .pab-form { display: inline-flex; margin: 0; padding: 0; max-width: 100%; }
.pab .pab-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0;
  padding: 0 18px; border: 0; border-radius: 999px; background: #1F2124; color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; white-space: nowrap;
  -webkit-appearance: none; appearance: none; }
.pab .pab-btn:hover { background: #3A3D42; }
.pab .pab-btn:focus-visible, .pab .pab-l:focus-visible, .pab .pab-out:focus-visible, .pab .pab-g:focus-visible, .pab .pab-coa-in:focus-visible { outline: 2px solid #1F2124; outline-offset: 2px; }
.pab .pab-btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
.pab .pab-l { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 14px;
  color: var(--ink, #1F2124) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pab .pab-l.pab-coa { font-size: 13px; color: var(--ink-mute, #5F636A) !important; }
.pab .pab-out { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--line, #E3DED2); border-radius: 999px; background: transparent; font-size: 14px;
  font-weight: 600; color: var(--ink, #1F2124) !important; text-decoration: none; text-align: center; }
.pab .pab-out:hover { border-color: #1F2124; }
.pab.pab-top .pab-out { padding: 0 14px; white-space: nowrap; }
/* top box: "Lab report" rides on the price line (a small inline link; the vertical padding widens its tap area
   without changing the line height), so the action row is only Add to Cart + View product */
.pab .pab-coa-in { margin-left: 8px; padding: 8px 2px; font-size: 13px; font-weight: 400; white-space: nowrap;
  color: var(--ink-mute, #5F636A) !important; text-decoration: underline; text-underline-offset: 3px; }
.pab.pab-top .pab-img { grid-column: 1; grid-row: 1 / span 2; }
.pab.pab-top .pab-b { grid-column: 2; grid-row: 1; align-self: end; }
.pab.pab-top .pab-a { grid-column: 2; grid-row: 2; align-self: start; gap: 4px 6px; }
/* two cards side by side: content starts at the top, so names and prices line up across the pair */
.pab-pair.pab-pair-2 .pab.pab-top { align-items: start; }
.pab-pair.pab-pair-2 .pab.pab-top .pab-b { align-self: start; }
/* [PPS-ARTICLE-BOX] side by side: both cards are as tall as the taller one and the Add to Cart rows sit at the bottom,
   so they line up even when one product name wraps onto two lines */
@media (min-width: 700px) {
  .pab-pair.pab-pair-2 .pab.pab-top { grid-template-rows: auto 1fr; }
  .pab-pair.pab-pair-2 .pab.pab-top .pab-a { align-self: end; }
}
/* a narrow card (phones, the compare page's inset column): the actions take the card's full width under the photo,
   so Add to Cart and View product stay on one line */
@container (max-width: 299.98px) {
  .pab.pab-top .pab-img { grid-row: 1; }
  .pab.pab-top .pab-b, .pab-pair.pab-pair-2 .pab.pab-top .pab-b { align-self: center; }
  .pab.pab-top .pab-a { grid-column: 1 / -1; }
}
.pab .pab-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* bottom box (bigger): #F7F5F0 card, 96px photo, three check lines, full-width Add to Cart per product */
.pab.pab-big { display: block; margin: 36px 0; padding: 20px; background: #F7F5F0;
  border: 1.5px solid var(--line, #E3DED2); border-radius: 14px; font-family: var(--font-body, inherit);
  font-size: 15px; line-height: 1.35; color: var(--ink, #1F2124); }
.pab.pab-big .pab-h { margin: 0 0 14px; padding: 0; font-family: var(--font-display, Georgia, serif); font-size: 22px;
  font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ink, #1F2124); overflow-wrap: anywhere; }
/* [PPS-ARTICLE-BOX] 22px heading: the text cut of the display font (as site-v2.css does for 20-24px headings); the
   display cut (.hv2 h2, opsz 144) thins "4" and "+" to hairlines on 1x screens ("Shop AOD-960 1", "Shop NAD") */
.pab.pab-big .pab-h { font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0; }
.pab.pab-big .pab-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: 0; }
@media (min-width: 700px) { .pab.pab-many .pab-items { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 18px; } }
.pab.pab-big .pab-item { min-width: 0; }
.pab.pab-big .pab-row { display: flex; gap: 14px; align-items: center; min-width: 0; }
.pab.pab-big .pab-img { width: 96px; height: 96px; }
/* [PPS-ARTICLE-BOX] two columns: photos start at the top of their row, so a wrapped name beside a one-line name
   does not push one photo lower than the other */
@media (min-width: 700px) { .pab.pab-many .pab-row { align-items: flex-start; } }
.pab.pab-big .pab-a-sm { margin-top: 2px; }
.pab.pab-big .pab-a-sm .pab-l { min-height: 32px; padding: 0; }
.pab.pab-big .pab-checks { list-style: none; display: grid; gap: 6px; margin: 16px 0 0; padding: 0; font-size: 14px;
  line-height: 1.4; color: var(--ink, #1F2124); }
.pab.pab-big .pab-checks li { margin: 0; padding: 0 0 0 22px; position: relative; list-style: none; }
.pab.pab-big .pab-checks li::before { content: "\2713"; position: absolute; left: 2px; top: 0; color: #0F7A3A; font-weight: 800; }
.pab.pab-big .pab-checks .pab-g { color: var(--ink, #1F2124) !important; text-decoration: underline; text-underline-offset: 3px; }
.pab.pab-big .pab-buy { margin: 16px 0 0; }
.pab.pab-many .pab-item { display: flex; flex-direction: column; }
.pab.pab-many .pab-buy { margin-top: auto; padding-top: 12px; }   /* side by side: the buttons line up */
.pab.pab-big .pab-form, .pab.pab-big .pab-out { display: flex; width: 100%; }
.pab.pab-big .pab-btn { width: 100%; white-space: normal; }
.pab.pab-big .pab-ruo { margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--ink-mute, #5F636A); }

/* narrow phones: a little less padding so the name and buttons keep their room at 360px (photos keep their size) */
@media (max-width: 400px) {
  .pab.pab-top { column-gap: 12px; padding: 12px; }
  .pab.pab-big { padding: 16px; }
  .pab .pab-btn { padding: 0 16px; }
  .pab.pab-top .pab-out { padding: 0 12px; font-size: 13.5px; }
}
@media print { .pab, .pab-pair { display: none !important; } }