/* Peptico certificate set, tier 6 — product pages.
   The certificate button (Code Snippet 6) and card (Code Snippet 9) keep their markup; this restyles them
   in the site's system (Mathan, 2026-10-05): the card in the product family's pastel, the purity figure
   and a large "8x tested" side by side, the eight results as eight pastel tiles, and soft buttons in place
   of the black ones. The snippets' own rules carry !important, so these do too, one class more specific
   (body.pp-coaset-v6). assets/js/coaset-v6.js adds the lab button, the count, the fentanyl tile, the
   earlier-certificate row and the "COA in progress" block. */

body.pp-coaset-v6 {
  --pp-coa-ink: #111111; --pp-coa-muted: #5f5f58; --pp-coa-green: #004f42; --pp-coa-ok: #2f8f5b;
  --pp-coa-paper: #f7f6f2; --pp-coa-line: rgba(17, 17, 17, 0.09);
  --pp-coa-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pp-coa-font: Jost, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Buttons: the soft pair ---------------------------------------------------------------- */
.pp-coa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; min-height: 42px; padding: 0 16px 0 14px; border-radius: 999px; font-family: var(--pp-coa-font, Jost, sans-serif); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none !important; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 140ms var(--pp-coa-ease, ease), background-color 160ms ease, border-color 160ms ease; }
.pp-coa-btn svg { width: 17px; height: 17px; flex: none; }
.pp-coa-btn .pp-coa-ext { width: 12px; height: 12px; opacity: 0.75; }
.pp-coa-btn--pdf, .pp-coa-btn--pdf:visited { background: #fff; color: #111 !important; border: 1px solid rgba(17, 17, 17, 0.16); }
.pp-coa-btn--pdf:hover, .pp-coa-btn--pdf:focus-visible { background: #f7f6f2; border-color: rgba(17, 17, 17, 0.34); color: #111 !important; }
.pp-coa-btn--lab, .pp-coa-btn--lab:visited { background: #dcebe5; color: #004f42 !important; border: 1px solid rgba(0, 79, 66, 0.12); }
.pp-coa-btn--lab:hover, .pp-coa-btn--lab:focus-visible { background: #cde1da; border-color: rgba(0, 79, 66, 0.26); color: #004f42 !important; }
.pp-coa-btn:active { transform: scale(0.97); }
.pp-coa-btn--small { min-height: 30px; padding: 0 11px 0 10px; font-size: 12.5px; }
.pp-coa-btn--small svg { width: 14px; height: 14px; }

/* ---- The certificate button beside the price (Snippet 6) ----------------------------------- */
/* the certificate button and the lab button share one line (Mathan, 2026-10-05: never the lab button on a line of its own);
   the long title wraps inside its button when the column is narrow */
body.pp-coaset-v6 .current-coa-button-wrap { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button,
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:hover:not(:disabled),
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:focus {
  position: relative; flex: 1 1 0; min-width: 0; width: auto !important; min-height: 58px !important; padding: 11px 18px 11px 58px !important;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 4px !important;
  border: 1px solid rgba(17, 17, 17, 0.16) !important; border-radius: 18px !important; background: #fff !important; color: #111 !important;
  box-shadow: none !important; text-align: left !important; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--pp-coa-ease);
}
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:hover:not(:disabled) { background: #f7f6f2 !important; border-color: rgba(17, 17, 17, 0.34) !important; }
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:active:not(:disabled) { transform: scale(0.985); }
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button::before { content: ""; position: absolute; left: 12px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 12px; background: var(--pp-coa-tint, #e6f0ed) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23004f42' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h6l4 4v10H6z'/%3E%3Cpath d='M12 3v4h4M8.5 11h5M8.5 14h5'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button .current-coa-button-main,
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:hover:not(:disabled) .current-coa-button-main { color: #111 !important; font-family: var(--pp-coa-font) !important; width: 100%; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; white-space: normal !important; }
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button .current-coa-message,
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:hover:not(:disabled) .current-coa-message { color: var(--pp-coa-muted) !important; font-family: var(--pp-coa-font) !important; width: 100%; font-size: 10.5px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.03em !important; text-align: left !important; }
body.pp-coaset-v6 .current-coa-button-wrap .pp-coa-btn--lab { min-height: 58px; padding: 0 16px 0 14px; border-radius: 18px; font-size: 15px; flex: 0 0 auto; }
/* the mark on the PDF button: 8x tested, small, not a control */
/* a small green mark, centred on the button's height at its right; the text lines keep clear of it */
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:has(.pp-coa-chip) { padding-right: 100px !important; }
body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button .pp-coa-chip { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #004f42; color: #fff; font-family: var(--pp-coa-font); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; pointer-events: none; }
/* a size with no certificate: nothing beside the price; "COA in progress" is in the COA History area */
body.pp-coaset-v6 .current-coa-button-wrap.pp-coa-none { display: none !important; }

/* ---- "COA in progress" ------------------------------------------------------------------------ */
.pp-coa-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; box-sizing: border-box; width: 100%; padding: 14px 16px; border-radius: 18px; background: #f7f6f2; border: 1px solid rgba(17, 17, 17, 0.08); font-family: Jost, "Helvetica Neue", Arial, sans-serif; text-align: left; }
.pp-coa-progress, .pp-coa-progress * { font-family: Jost, "Helvetica Neue", Arial, sans-serif !important; }   /* the theme gives <strong> its own face */
.pp-coa-progress__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid #2f8f5b; box-shadow: 0 0 0 4px rgba(47, 143, 91, 0.12); }
.pp-coa-progress__text { display: grid; gap: 3px; flex: 1 1 190px; min-width: 0; }
.pp-coa-progress__text strong { font-size: 15px; font-weight: 600; line-height: 1.15; color: #111; }
.pp-coa-progress__text span { font-size: 13.5px; line-height: 1.35; color: #5f5f58; }
.pp-coa-progress--panel { margin: 4px 0 8px; }
body.pp-coaset-v6 .coa-history-cards-empty.pp-coa-empty { padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; }

/* ---- The certificate card (Snippet 9) ---------------------------------------------------------- */
body.pp-coaset-v6 .coa-history-cards-wrap, body.pp-coaset-v6 .coa-history-cards-wrap * { font-family: var(--pp-coa-font) !important; }
body.pp-coaset-v6 .coa-history-carousel { border-radius: 28px !important; }
body.pp-coaset-v6 .coa-history-certificate { padding: 18px !important; gap: 14px !important; border: 0 !important; border-radius: 28px !important; background: var(--pp-coa-tint, #e6f0ed) !important; box-shadow: none !important; }

/* the batch tab: a white pill, the status in green */
body.pp-coaset-v6 .coa-history-batch-menu { padding: 0 0 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.pp-coaset-v6 .coa-history-batch-tab, body.pp-coaset-v6 .coa-history-batch-tab.is-active { min-height: 34px !important; padding: 0 14px !important; border: 1px solid rgba(17, 17, 17, 0.14) !important; border-radius: 999px !important; background: #fff !important; color: #111 !important; box-shadow: none !important; }
body.pp-coaset-v6 .coa-history-batch-tab-status { color: var(--pp-coa-ok) !important; opacity: 1 !important; }

/* head */
body.pp-coaset-v6 .coa-history-certificate-head { padding: 6px 6px 16px !important; border-bottom: 1px solid var(--pp-coa-line) !important; }
body.pp-coaset-v6 .coa-history-certificate-icon { border: 0 !important; border-radius: 16px !important; background: #fff !important; color: var(--pp-coa-green) !important; }
body.pp-coaset-v6 .coa-history-badge { border: 0 !important; background: rgba(255, 255, 255, 0.72) !important; color: #111 !important; }
body.pp-coaset-v6 .coa-history-certificate-title-row .coa-history-badge:last-child { background: var(--pp-coa-green) !important; color: #fff !important; }
body.pp-coaset-v6 .coa-history-certificate-button, body.pp-coaset-v6 .coa-history-certificate-button:visited, body.pp-coaset-v6 .coa-history-certificate-button:focus, body.pp-coaset-v6 .coa-history-certificate-button:active {
  min-height: 42px !important; padding: 0 16px 0 14px !important; gap: 7px !important; border: 1px solid rgba(17, 17, 17, 0.16) !important; border-radius: 999px !important;
  background: #fff !important; color: #111 !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
body.pp-coaset-v6 .coa-history-certificate-button:hover { background: #f7f6f2 !important; border-color: rgba(17, 17, 17, 0.34) !important; color: #111 !important; }
body.pp-coaset-v6 .coa-history-certificate-button-arrow { display: none !important; }
body.pp-coaset-v6 .coa-history-certificate-head > .pp-coa-btn--lab { grid-column: 1 / -1; width: 100%; }
@media (min-width: 768px) {
  body.pp-coaset-v6 .coa-history-certificate-head:has(> .pp-coa-btn--lab) { grid-template-columns: auto minmax(0, 1fr) auto auto !important; }
  body.pp-coaset-v6 .coa-history-certificate-head > .coa-history-certificate-button { grid-column: auto !important; width: auto !important; }
  body.pp-coaset-v6 .coa-history-certificate-head > .pp-coa-btn--lab { grid-column: auto; width: auto; }
}

/* the two white panels on the tint */
body.pp-coaset-v6 .coa-history-main-panel, body.pp-coaset-v6 .coa-history-details-panel { border: 0 !important; border-radius: 22px !important; background: #fff !important; }
body.pp-coaset-v6 .coa-history-main-panel { padding: 22px !important; }
body.pp-coaset-v6 .coa-history-details-panel { padding: 20px !important; }
body.pp-coaset-v6 .coa-history-detail-icon { border: 0 !important; border-radius: 12px !important; background: var(--pp-coa-tint, #e6f0ed) !important; color: var(--pp-coa-green) !important; }
body.pp-coaset-v6 .coa-history-detail-row { border-color: var(--pp-coa-line) !important; }

/* status: the shipping bubble, as in the vault */
body.pp-coaset-v6 .coa-history-status-row { margin: 0 0 16px !important; }
body.pp-coaset-v6 .coa-history-status-pill, body.pp-coaset-v6 .coa-history-status-pill.is-current { gap: 7px !important; min-height: 28px !important; padding: 0 12px 0 10px !important; border: 0 !important; background: rgba(47, 143, 91, 0.11) !important; color: var(--pp-coa-green) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
body.pp-coaset-v6 .coa-history-status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-coa-ok); animation: pp-coa-pulse 2.2s var(--pp-coa-ease) infinite; }
@keyframes pp-coa-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 143, 91, 0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(47, 143, 91, 0); } }
/* the count is stated once, large (below); the snippet's two small mentions step aside */
body.pp-coaset-v6 .coa-history-certificate.pp-coa-has-count .coa-history-tested-count { display: none !important; }

/* the two figures: purity on the family tint, the count on the site's green */
body.pp-coaset-v6 .coa-history-score-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr) !important; gap: 12px !important; align-items: stretch !important; padding-bottom: 0 !important; margin-bottom: 20px !important; border-bottom: 0 !important; }
body.pp-coaset-v6 .coa-history-score-grid > div:first-child { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 22px; border-radius: 20px; background: var(--pp-coa-tint, #e6f0ed); }
body.pp-coaset-v6 .coa-history-cards-wrap .coa-history-score-grid .coa-history-score-value { font-size: clamp(42px, 4.6vw, 62px) !important; font-weight: 700 !important; letter-spacing: -0.055em !important; color: #111 !important; }
body.pp-coaset-v6 .coa-history-score-label { color: var(--pp-coa-green) !important; }
/* (the snippet styles every descendant of its wrap with !important, so what the script adds inside the card is addressed through the wrap) */
body.pp-coaset-v6 .coa-history-cards-wrap .pp-coa-count { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; border-radius: 20px; background: #004f42 !important; color: #fff !important; }
body.pp-coaset-v6 .coa-history-cards-wrap .pp-coa-count span { display: block; margin: 0; padding: 0; }
body.pp-coaset-v6 .coa-history-cards-wrap .pp-coa-count .pp-coa-count__n { font-size: clamp(46px, 5vw, 68px) !important; font-weight: 700 !important; line-height: 0.9 !important; letter-spacing: -0.06em !important; color: #fff !important; }
body.pp-coaset-v6 .coa-history-cards-wrap .pp-coa-count .pp-coa-count__l { margin-top: 4px !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; color: #fff !important; }
body.pp-coaset-v6 .coa-history-cards-wrap .pp-coa-count .pp-coa-count__s { margin-top: 10px !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; color: rgba(255, 255, 255, 0.74) !important; }
body.pp-coaset-v6 .coa-history-checks { display: flex !important; flex-direction: column; justify-content: center; gap: 10px !important; padding: 16px 18px; border-radius: 20px; background: var(--pp-coa-paper); }
body.pp-coaset-v6 .coa-history-check-mark { border: 0 !important; background: var(--pp-coa-ok) !important; color: #fff !important; }

/* the eight results, a tile each, in the site's pastels */
body.pp-coaset-v6 .coa-history-qc-title-row { margin: 0 0 12px !important; }
body.pp-coaset-v6 .coa-history-qc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; }
body.pp-coaset-v6 .coa-history-qc-item { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; min-height: 92px; padding: 14px 14px 13px !important; border: 0 !important; border-radius: 16px !important; background: #e6f0ed !important; }
body.pp-coaset-v6 .coa-history-qc-item:nth-child(2) { background: #f5edc4 !important; }
body.pp-coaset-v6 .coa-history-qc-item:nth-child(3) { background: #ebdff1 !important; }
body.pp-coaset-v6 .coa-history-qc-item:nth-child(4) { background: #dbe7f2 !important; }
body.pp-coaset-v6 .coa-history-qc-item:nth-child(5) { background: #eee6d8 !important; }
body.pp-coaset-v6 .coa-history-qc-item:nth-child(6) { background: #dfe7d9 !important; }
body.pp-coaset-v6 .coa-history-qc-item:nth-child(7) { background: #f0dfdb !important; }
body.pp-coaset-v6 .coa-history-qc-item:nth-child(8) { background: #e7ebc9 !important; }
body.pp-coaset-v6 .coa-history-qc-label { padding-right: 26px; color: rgba(17, 17, 17, 0.7) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; }
body.pp-coaset-v6 .coa-history-qc-value { max-width: 100%; color: #111 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
.pp-coa-tick { position: absolute; top: 11px; right: 11px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.78); color: #2f8f5b; }
.pp-coa-tick svg { width: 13px; height: 13px; }
/* the sample matrix is not a test: a quiet line under the tiles */
body.pp-coaset-v6 .coa-history-qc-item:last-child { grid-column: 1 / -1; flex-direction: row !important; align-items: center !important; min-height: 0; padding: 11px 14px !important; background: var(--pp-coa-paper) !important; }
body.pp-coaset-v6 .coa-history-qc-item:last-child .coa-history-qc-label { padding-right: 0; }
body.pp-coaset-v6 .coa-history-qc-item:last-child .coa-history-qc-value { font-size: 14px !important; }
body.pp-coaset-v6 .coa-history-accreditation-strip { margin: 12px 0 0 !important; width: auto !important; border: 0 !important; border-radius: 14px !important; background: var(--pp-coa-tint, #e6f0ed) !important; color: var(--pp-coa-green) !important; }
body.pp-coaset-v6 .coa-history-accreditation-icon { color: var(--pp-coa-green) !important; }

/* earlier certificates of the batch: a thin row each, across the card */
.pp-coa-earlier { grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.66); }
body.pp-coaset-v6 .coa-history-cards-wrap .pp-coa-earlier__row, .pp-coa-earlier__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 13px; color: #5f5f58; }
.pp-coa-earlier__what { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.pp-coa-earlier__what code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 13px; color: #111; background: transparent; padding: 0; }
.pp-coa-earlier__links { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pp-coa-past { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px 0 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(17, 17, 17, 0.08); color: #5f5f58; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pp-coa-past__dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #8a8a83; box-sizing: border-box; }

@media (max-width: 1024px) {
  body.pp-coaset-v6 .coa-history-score-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  body.pp-coaset-v6 .coa-history-checks { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px 18px !important; padding: 12px 16px; }
}
@media (max-width: 767px) {
  body.pp-coaset-v6 .coa-history-certificate { padding: 12px !important; border-radius: 24px !important; }
  body.pp-coaset-v6 .coa-history-main-panel { padding: 16px !important; }
  body.pp-coaset-v6 .coa-history-score-grid > div:first-child, .pp-coa-count { padding: 16px; }
  body.pp-coaset-v6 .coa-history-qc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.pp-coaset-v6 .coa-history-qc-item { min-height: 84px; }
  body.pp-coaset-v6 .coa-history-qc-value { font-size: 15.5px !important; }
  body.pp-coaset-v6 .coa-history-cards-wrap .pp-coa-earlier__row, .pp-coa-earlier__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 4px 0; }
  .pp-coa-earlier__links { justify-content: flex-start; }
  /* phones: tight. Two compact lines, a smaller mark at the right, the lab button as a slim line beneath
     (the two cannot share a 350px line with this title) */
  body.pp-coaset-v6 .current-coa-button-wrap { flex-wrap: wrap; gap: 8px; }
  body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button, body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:hover:not(:disabled), body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:focus { flex: 1 1 100%; min-height: 0 !important; padding: 10px 12px 10px 48px !important; border-radius: 16px !important; gap: 3px !important; }
  body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button::before { left: 9px; width: 30px; height: 30px; margin-top: -15px; border-radius: 10px; background-size: 17px 17px; }
  body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button .current-coa-button-main { font-size: 13.5px !important; letter-spacing: -0.01em !important; }   /* the title on one line at 360px and up */
  body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button .current-coa-message { font-size: 10px !important; letter-spacing: 0.02em !important; }
  body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button:has(.pp-coa-chip) { padding-right: 74px !important; }
  body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button .pp-coa-chip { right: 8px; min-height: 22px; padding: 0 7px; font-size: 10.5px; }
  body.pp-coaset-v6 .current-coa-button-wrap .pp-coa-btn--lab { flex: 1 1 100%; min-height: 40px; border-radius: 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-coa-btn, body.pp-coaset-v6 .current-coa-button-wrap .current-coa-button { transition: none; }
  body.pp-coaset-v6 .coa-history-status-pill::before { animation: none; }
}
