/* PRP store redesign — catalog, product, cart, checkout.
   Loaded after woo.css so it can refine the existing vocabulary without
   rewriting it. Tokens come from prototype.css; nothing here invents a colour.

   Kept in its own file deliberately: dropping the enqueue in functions.php
   reverts the whole redesign without unpicking edits from woo.css. */

/* =============================================================== buttons */
/* Neon is trim only, never a fill and never type — here it is the inner top
   edge of a primary action. That hairline is the difference between the brand
   blue and a default framework button. */
.woocommerce ul.products li.product .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order,
.prp-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--accent-2); border-radius: var(--r);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff; font-family: var(--sans); font-size: 14.5px; font-weight: 650;
  letter-spacing: -.004em; line-height: 1; text-align: center; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(54,213,255,.55),
              0 1px 2px rgba(4,25,58,.16),
              0 10px 22px -12px rgba(7,93,255,.7);
  transition: filter .16s, box-shadow .16s, transform .16s;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
  filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(54,213,255,.7),
              0 2px 4px rgba(4,25,58,.16),
              0 16px 28px -14px rgba(7,93,255,.8);
}
.woocommerce ul.products li.product .button:active,
.woocommerce .checkout-button:active, .woocommerce #place_order:active {
  transform: translateY(0); filter: brightness(.97);
}
.woocommerce .checkout-button, .woocommerce #place_order { min-height: 54px; font-size: 15.5px; }
.woocommerce ul.products li.product .button .prp-i { flex: none; }

/* ============================================================ shop header */
.prp-shop-head { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.prp-shop-lede { flex: 1 1 420px; max-width: 620px; margin: 0;
  font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.prp-shop-figs { display: flex; gap: 30px; margin-left: auto; }
.prp-fig { display: flex; flex-direction: column; gap: 3px; }
.prp-fig-n { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; }
.prp-fig-l { font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* ============================================================ refine rail */
.prp-shop-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 44px; align-items: start; }
.prp-shop-body { min-width: 0; }
.prp-rail { display: flex; flex-direction: column; position: sticky; top: 90px; }
.prp-rail-head { display: flex; align-items: baseline; padding-bottom: 14px; }
.prp-rail-title { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.prp-rail-clear { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.prp-rail-grp { display: flex; flex-direction: column; gap: 2px;
  padding: 16px 0; border-top: 1px solid var(--rule); }
.prp-rail-lbl { font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }

.prp-opt { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  font-size: 13.5px; color: var(--ink-2); border: 0; }
.prp-opt:hover { color: var(--ink); }
.prp-opt-t { min-width: 0; }
.prp-opt-n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.prp-box { width: 17px; height: 17px; flex: none; border: 1.5px solid var(--rule-2);
  border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; }
.prp-opt.is-on .prp-box { background: var(--accent); border-color: var(--accent); }
.prp-opt.is-on .prp-opt-t { color: var(--ink); font-weight: 600; }
.prp-sw { width: 34px; height: 20px; flex: none; border-radius: 999px;
  background: var(--rule); position: relative; transition: background .16s; }
.prp-sw > span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .16s;
  box-shadow: 0 1px 2px rgba(4,25,58,.25); }
.prp-opt.is-on .prp-sw { background: var(--accent); }
.prp-opt.is-on .prp-sw > span { left: 16px; }

.prp-rail-note { display: flex; flex-direction: column; gap: 6px; margin-top: 16px;
  padding: 13px; background: var(--accent-soft); border: 1px solid #CBDFFF;
  border-radius: var(--r); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.prp-rail-note-h { display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--accent-2); }

/* ================================================================= cards */
.woocommerce ul.products li.product { overflow: visible; }
.prp-card-purity { position: absolute; top: 9px; left: 9px; z-index: 2;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em;
  background: #EAF7F1; border: 1px solid #BFE6D6; color: var(--good);
  border-radius: 6px; padding: 3px 7px; }
.prp-card-cat { display: block; padding: 1rem 1.1rem 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding-top: .3rem; }
.prp-card-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: .1rem 1.1rem .45rem; }
.prp-chip { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em;
  white-space: nowrap; border-radius: 6px; padding: 3px 7px;
  background: #fff; border: 1px solid var(--rule); color: var(--ink-2); }
.prp-chip--lot { background: var(--wash-2); }
.prp-card-coa { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 1.1rem 1.1rem; padding-top: 2px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); }
.prp-card-coa:hover { color: var(--accent-2); }

/* =============================================================== toolbar */
.woo-toolbar { display: flex; align-items: center; gap: 16px;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }

/* ============================================================ responsive */
@media (max-width: 899px) {
  .prp-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .prp-rail { position: static; }
  .prp-rail-grp { padding: 12px 0; }
  .prp-shop-figs { gap: 22px; }
}
@media (max-width: 599px) {
  .prp-shop-head { gap: 18px; margin-bottom: 18px; }
  .prp-shop-lede { font-size: 13.5px; }
  .prp-fig-n { font-size: 21px; }
  .prp-card-cat { padding: .7rem .7rem 0; font-size: 9px; letter-spacing: .12em; }
  .prp-card-chips { padding: .1rem .7rem .4rem; gap: 4px; }
  .prp-chip { font-size: 9px; padding: 2px 5px; }
  .prp-card-coa { margin: 0 .7rem .7rem; font-size: 11.5px; }
  .woocommerce ul.products li.product .button { min-height: 44px; font-size: 13px; gap: 6px; }
}

/* ================================ accidental sticky headers (site-wide fix) */
/* prototype.css:57 styles the BARE element selector `header { position:sticky;
   top:0; z-index:60; background:rgba(255,255,255,.82); backdrop-filter:blur }`
   for the site header. But WooCommerce's page-title block is
   <header class="woocommerce-products-header"> and the theme's own page title
   is <header class="entry-head">, so both were being pinned to the top of the
   viewport with a blurred panel — a 214px block sitting over the catalogue as
   you scrolled, and the same over the cart and every policy page.
   Only #hdr is meant to stick. .chat-head is left alone: it is the widget's
   own chrome. */
header.woocommerce-products-header,
header.entry-head {
  position: static;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ==================================================================== cart */
/* Woo renders the checkout button as an <a>; the theme's link colour and
   underline leak straight through the new button skin. */
.woocommerce .checkout-button,
.woocommerce .checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.button { text-decoration: none; color: #fff; }

.prp-cart-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.woocommerce table.shop_table td.product-thumbnail img { width: 74px; height: auto; border-radius: 8px;
  background: var(--wash); border: 1px solid var(--rule); padding: 5px; }

/* free-shipping meter */
.prp-ship-meter-row > td { padding: 0 0 .9rem !important; }
.prp-meter { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--accent-soft); border: 1px solid #CBDFFF; border-radius: var(--r); }
.prp-meter.is-done { background: #EAF7F1; border-color: #BFE6D6; }
.prp-meter-say { margin: 0; font-size: 13.5px; color: var(--ink); text-align: left; }
.prp-meter-say .amount { font-family: var(--mono); }
.prp-meter-track { height: 7px; border-radius: 999px; background: #D6E5FF; overflow: hidden; }
.prp-meter.is-done .prp-meter-track { background: #C6E8D8; }
.prp-meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .3s var(--ease-out); }
.prp-meter.is-done .prp-meter-fill { background: var(--good); }
.prp-meter-ends { display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }

/* volume-break nudge */
.prp-nudge { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px;
  border: 1px dashed var(--rule-2); border-radius: var(--r); background: #fff; }
.prp-nudge-i { flex: none; color: var(--accent); display: flex; }
.prp-nudge-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prp-nudge-t strong { font-size: 14px; font-weight: 650; color: var(--ink); }
.prp-nudge-t span { font-size: 13px; color: var(--ink-2); }
.prp-nudge-t .amount { font-family: var(--mono); font-weight: 600; }
.prp-nudge-go { flex: none; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border: 1px solid var(--rule-2); border-radius: var(--r);
  background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 650; }
.prp-nudge-go:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 599px) {
  .prp-nudge { flex-wrap: wrap; gap: 11px; }
  .prp-nudge-t { flex: 1 1 100%; order: 2; }
  .prp-nudge-go { flex: 1 1 100%; order: 3; }
  .woocommerce table.shop_table td.product-thumbnail img { width: 58px; }
}

/* ============================== catalog card: verification strip (2026-09-23)
   Replaces .prp-card-purity (a mono badge jammed into the image corner, over
   the vial cap) and .prp-card-coa (a small text link under the button). Same
   look as the home-page cards' .vstrip in prototype.css. */
.prp-vstrip { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: .35rem 1.1rem .85rem; padding: 6px 6px 6px 11px; border-radius: 12px;
  background: #F1F8F4; border: 1px solid rgba(8,122,85,.18);
  font-family: var(--sans); font-size: 14px; line-height: 1.2; color: var(--ink-2); }
.prp-vs-pur { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.prp-vs-pur .prp-i { color: var(--good); flex: none; }
.prp-vs-pur b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Catalog cards are too narrow for the method label; the page header already says "HPLC purity". */
.prp-vs-pur em { display: none; }
.prp-vs-coa { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none;
  background: #fff; border: 1px solid var(--rule-2);
  transition: border-color .15s, color .15s, box-shadow .15s; }
.prp-vs-coa:hover { border-color: var(--accent); color: var(--accent-2);
  box-shadow: 0 6px 16px -10px rgba(7,93,255,.55); }
.prp-vs-coa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Two-up phone cards are ~170px: stack, button full width. */
@media (max-width: 599px) {
  .prp-vstrip { flex-direction: column; align-items: stretch; gap: 6px;
    margin: .25rem .7rem .7rem; padding: 8px; }
  .prp-vs-pur { justify-content: center; }
  .prp-vs-pur em { display: none; }
  .prp-vs-coa { min-height: 40px; }
}
/* ~135px two-up cards at 320-379px: let the purity line wrap under its icon. */
@media (max-width: 379px) {
  .prp-vstrip { padding: 7px 6px; }
  .prp-vs-pur { white-space: normal; flex-wrap: wrap; column-gap: 4px; row-gap: 0; text-align: center; }
  .prp-vs-coa { padding: 0 8px; }
}
@media (max-width: 379px) {
  /* The three header figures ran 12px past a 320px screen. */
  .prp-shop-figs { flex-wrap: wrap; gap: 14px 20px; }
}
@media (max-width: 379px) {
  .prp-vs-coa .prp-i { display: none; }  /* keeps "View COA" on one line */
  .prp-vs-coa { white-space: nowrap; }
}

/* ---- catalog: "Coming soon — pending lab results" (2026-09-23) ---- */
.prp-vstrip--pending { background: #FFF8EA; border-color: rgba(138,90,0,.22); padding: 10px 11px; }
.prp-vstrip--pending .prp-vs-pur .prp-i { color: var(--warn); }
.prp-vstrip--pending .prp-vs-pur b { color: var(--warn); }
.prp-soon { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); }
@media (max-width: 379px) { .prp-vstrip--pending .prp-vs-pur b { font-size: 13px; } }
@media (max-width: 599px) {
  .prp-vstrip--pending .prp-vs-pur { white-space: normal; text-align: center; line-height: 1.25; }
}