/* =============================================================================
 * PYXAX conversion UX pass — 2026-09-28
 *
 * Loaded last (functions.php → pyxax_ux_pass_styles, priority 101). Each
 * section is one change from the audit; reverting a change = delete its
 * section here plus the PHP/JS named in its header.
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * #1  Checkout wall explains itself
 *     PHP: functions.php → pyxax_checkout_wall_banner()
 * -------------------------------------------------------------------------- */
.pyx-checkout-wall {
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 1px solid var(--cyan-mid);
  border-left-width: 3px;
  border-radius: var(--pyx-radius-card);
  background: var(--cyan-dim);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker back"
    "title  back"
    "sub    back";
  column-gap: 24px;
  align-items: center;
}
.pyx-checkout-wall-kicker {
  grid-area: kicker;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.pyx-checkout-wall-title {
  grid-area: title;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  color: var(--white);
}
.pyx-checkout-wall-sub {
  grid-area: sub;
  margin: 0;
  font-size: var(--pyx-read);
  color: rgba(240,244,248,.78);
}
.pyx-checkout-wall-sub .amount { color: var(--white); font-weight: 600; }
.pyx-checkout-wall-back {
  grid-area: back;
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .pyx-checkout-wall {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "title" "sub" "back";
  }
  .pyx-checkout-wall-back { margin-top: 12px; }
}


/* -----------------------------------------------------------------------------
 * #3  Product page: buy controls under the price + phone sticky buy bar
 *     PHP: woocommerce/single-product.php (block order, both branches);
 *          functions.php → pyxax_sticky_buy_markup(), pyxax_ux_pass_styles()
 *     JS:  assets/js/pyxax-sticky-buy.js
 * -------------------------------------------------------------------------- */
.pyx-purchase-block .pyx-cart-form,
.pyx-purchase-block form.cart { margin-top: 4px; }
.pyx-purchase-block .pyx-dispatch { margin-top: 14px; }
.pyx-purchase-block #pyx-decision-verification,
.pyx-purchase-block .pyx-dispatch + .pyx-decision-verification { margin-top: 14px; }

.pyx-sticky-buy { display: none; }
@media (max-width: 767px) {
  .pyx-sticky-buy:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    /* Sits directly on top of the RUO bar. Its footer script publishes the
       bar height + 12px; when the bar is dismissed the variable is removed
       and this resolves to 0. */
    bottom: calc(var(--pyx-research-banner-space, 12px) - 12px);
    z-index: 140;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(13,17,23,.97);
    border-top: 1px solid var(--cyan-mid);
    box-shadow: 0 -8px 24px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
  }
  .pyx-sticky-buy-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .pyx-sticky-buy-name {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pyx-sticky-buy-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(240,244,248,.75);
  }
  .pyx-sticky-buy-price, .pyx-sticky-buy-price .amount { color: var(--white); font-weight: 600; }
  .pyx-sticky-buy-btn {
    flex: 0 0 auto;
    min-height: var(--pyx-control-h);
    padding: 0 18px;
    border: 0;
    border-radius: var(--pyx-radius-control);
    background: var(--cyan);
    color: var(--obsidian);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .pyx-sticky-buy-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
  /* Keep the page's last content clear of bar + RUO bar. */
  html.pyx-has-sticky-buy body.single-product { padding-bottom: calc(var(--pyx-research-banner-space, 12px) + 64px); }
}


/* -----------------------------------------------------------------------------
 * #4  Shop: products on the first screen
 *     PHP: woocommerce/archive-product.php (compact head + .pyx-shop-toolbar)
 * -------------------------------------------------------------------------- */
.pyx-shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.pyx-shop-head .section-label { margin-bottom: 6px; }
.pyx-shop-head .section-title { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; }
.pyx-shop-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pyx-shop-proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--pyx-radius-control);
  background: rgba(0,212,255,.05);
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240,244,248,.82);
}
.pyx-shop-proof li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-mid);
}
.pyxax-wc-wrap .pyx-shop-context {
  max-width: none;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* Toolbar: search + sort on one row, categories on the next. */
.pyx-shop-toolbar .shop-search-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (min-width: 769px) {
  .pyx-shop-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 12px;
    align-items: center;
    margin-bottom: 14px;
  }
  .pyx-shop-toolbar .shop-search-wrap { grid-column: 1; max-width: none; margin: 0; }
  .pyx-shop-toolbar .pyx-filter-panel { display: contents; }
  .pyx-shop-toolbar .pyx-shop-sort { grid-column: 2; grid-row: 1; margin: 0 !important; }
  .pyx-shop-toolbar .shop-filters { grid-column: 1 / -1; margin: 0; gap: 6px; flex-wrap: wrap; }
  .pyx-shop-toolbar .filter-btn { min-height: 32px; padding: 6px 12px; }
}
@media (max-width: 768px) {
  .pyx-shop-head { margin: 4px 0 8px; gap: 10px; }
  .pyx-shop-proof { gap: 6px; }
  .pyx-shop-proof li { padding: 5px 9px; font-size: 10px; }
  .pyxax-wc-wrap .pyx-shop-context { font-size: 13px; margin-bottom: 12px; }
  .pyx-shop-toolbar .shop-search-wrap { margin-bottom: 8px; }
}


/* -----------------------------------------------------------------------------
 * #5  Bulk boxes state their saving
 *     PHP: woocommerce/single-product.php (box rows; `amount` on boxes + vars)
 * -------------------------------------------------------------------------- */
.pyx-bulk-name { display: flex; flex-direction: column; gap: 3px; }
.pyx-bulk-save {
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .04em;
  color: var(--cyan);
}
.pyx-bulk-save .amount { color: inherit; font-weight: 600; }


/* -----------------------------------------------------------------------------
 * #6  COA Library: proven lots first, pending behind a toggle, rows link
 *     to their product. Cards name the strengths that have a COA.
 *     PHP: page-coa-library.php (sort, data-proven, product link, toggle);
 *          functions.php → pyxax_product_card_verification() (partial label)
 *     JS:  assets/js/pyxax-hub.js (initCOA: pendingBtn / showPending)
 * -------------------------------------------------------------------------- */
.coa-product-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--cyan-mid); }
.coa-product-link:hover, .coa-product-link:focus-visible { color: var(--cyan); border-bottom-color: var(--cyan); }
.coa-product-link::after { content: ' →'; color: var(--cyan); font-family: var(--font-mono); font-size: .85em; }
.coa-pending-toggle {
  min-height: var(--pyx-control-h-sm);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--pyx-radius-control);
  background: transparent;
  color: rgba(240,244,248,.8);
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.coa-pending-toggle:hover, .coa-pending-toggle[aria-pressed="true"] { border-color: var(--cyan-mid); color: var(--cyan); }
.coa-pending-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }


/* -----------------------------------------------------------------------------
 * #8  Product cards readable at a glance
 *     CSS only. Was: nearly all card copy 10-11px mono at 50-55% opacity
 *     (9px on phones). Hierarchy kept — name > price > data > labels — but
 *     every tier moves up in size and contrast.
 * -------------------------------------------------------------------------- */
.pyxax-loop-card .product-name,
.product-card .product-name { font-size: 19px; }
.pyxax-loop-card .product-category,
.product-card .product-category { font-size: 12px; letter-spacing: .06em; color: rgba(240,244,248,.72); }
.pyx-card-meta { color: rgba(240,244,248,.62); }
.pyx-card-strengths,
.pyx-card-verification { font-size: 12px; }
.pyx-card-data-label { color: rgba(240,244,248,.62); }
.pyx-card-strength-values { font-size: 13px; color: rgba(240,244,248,.92); }
.pyx-card-request-count { color: rgba(240,244,248,.62); }
.pyx-card-verification-value { color: rgba(240,244,248,.86); }
/* Partial coverage now names the covered strengths (#6) — it reads as a fact,
   not a warning, so it gets the same weight as full coverage minus the cyan. */
.pyx-card-verification.is-partial .pyx-card-verification-value { color: rgba(240,244,248,.86); }
.pyx-card-verification.is-pending .pyx-card-verification-value { color: rgba(240,244,248,.62); }
.pyxax-loop-card .pyx-card-action,
.product-card .pyx-card-action { font-size: 11px; }
@media (max-width: 560px) {
  .pyxax-loop-card .pyx-card-meta { font-size: 10px; }
  .pyxax-loop-card .product-name { font-size: 16px; }
  .pyxax-loop-card .product-category { font-size: 11px; }
  .pyxax-loop-card .product-price { font-size: 18px; }
  .pyxax-loop-card .pyx-card-strengths,
  .pyxax-loop-card .pyx-card-verification { font-size: 11px; }
  .pyxax-loop-card .pyx-card-strength-values { font-size: 12px; }
}


/* -----------------------------------------------------------------------------
 * #9  Cart drawer: thumbnail + reconstitution-water suggestion
 *     PHP: inc/cart-drawer.php (thumb in each line; pyxax_cart_drawer_recon_suggest())
 * -------------------------------------------------------------------------- */
.pyx-drawer-items li.has-thumb { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.pyx-drawer-thumb { display: block; width: 48px; height: auto; object-fit: contain; }
.pyx-drawer-item-body { min-width: 0; }
.pyx-drawer-suggest {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 16px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--cyan-mid);
  border-radius: var(--pyx-radius-card);
  background: var(--cyan-dim);
}
.pyx-drawer-suggest .pyx-drawer-thumb { width: 40px; }
.pyx-drawer-suggest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pyx-drawer-suggest-label {
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.pyx-drawer-suggest-name { color: var(--white); font-size: 14px; line-height: 1.35; text-decoration: none; }
.pyx-drawer-suggest-name:hover { color: var(--cyan); }
.pyx-drawer-suggest-price { font-size: 13px; color: rgba(240,244,248,.78); }
.pyx-drawer-suggest-price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pyx-drawer-suggest-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--pyx-control-h-sm);
  padding: 0 12px;
  border: 1px solid var(--cyan);
  border-radius: var(--pyx-radius-control);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.pyx-drawer-suggest-cta:hover { background: var(--cyan); color: var(--obsidian); }
.pyx-drawer-suggest-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }


/* -----------------------------------------------------------------------------
 * RUO-a  Bottom RUO bar: one line on phones
 *     PHP: footer.php (.pyx-ruo-long / .pyx-ruo-short spans)
 *     Was: three wrapped lines = 75px = 9% of a 375x812 screen, permanently.
 *     The bar's own inline styles need !important to override at this width.
 * -------------------------------------------------------------------------- */
.pyx-ruo-short { display: none; }
@media (max-width: 600px) {
  #researchBanner { padding: 8px 12px 8px 16px !important; gap: 8px; }
  #researchBanner .pyx-ruo-bar-text { font-size: 10px !important; letter-spacing: .04em !important; white-space: nowrap; }
  #researchBanner .pyx-ruo-long { display: none; }
  #researchBanner .pyx-ruo-short { display: inline; }
  #researchBanner button { min-width: 32px; min-height: 32px; }
}
/* Pre-existing bug found during the #6 review: .coa-pager's display rule beat
   the `hidden` attribute pyxax-hub.js sets, so Prev/Next showed on a single
   page of results (16 rows in the before shot, 8 after). */
.coa-pager[hidden] { display: none; }


/* -----------------------------------------------------------------------------
 * #10  Product-page quantity tiles (1 vial · 5 vials · 10-vial box)
 *      PHP: functions.php → pyxax_qty_tile_rules(), pyxax_qty_tiles_html();
 *           woocommerce/single-product.php (after the price; the separate
 *           "Bulk option" section is skipped while the tiles carry the box)
 *      JS:  assets/js/pyxax-qty-tiles.js
 * -------------------------------------------------------------------------- */
.pyx-qty-tiles { margin: 6px 0 16px; }
.pyx-qty-tiles-label {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,244,248,.62);
}
.pyx-qty-tiles-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pyx-qty-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 96px;
  padding: 22px 12px 12px;
  border: 1px solid var(--border-dim);
  border-radius: var(--pyx-radius-card);
  background: var(--obsidian-2);
  color: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pyx-qty-tile[hidden] { display: none; }
.pyx-qty-tile:hover { border-color: var(--cyan-mid); }
.pyx-qty-tile[aria-pressed="true"] { border-color: var(--cyan); background: var(--cyan-dim); box-shadow: inset 0 0 0 1px var(--cyan); }
.pyx-qty-tile:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.pyx-qty-tile-flag {
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 3px 8px;
  border-radius: var(--pyx-radius-card) 0 var(--pyx-radius-card) 0;
  background: var(--cyan);
  color: var(--obsidian);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pyx-qty-tile-flag:empty { display: none; }
.pyx-qty-tile-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(240,244,248,.8); }
.pyx-qty-tile-price { font-family: var(--font-display); font-size: 20px; line-height: 1.15; color: var(--white); }
.pyx-qty-tile-note { font-size: 12px; line-height: 1.35; color: var(--cyan); }
/* Struck-through full price next to the card price (5-vials tile). */
.pyx-qty-now { color: var(--white); }
.pyx-qty-was { font-family: var(--font-body); font-size: 13px; color: rgba(240,244,248,.5); text-decoration: line-through; }
/* Phones: the three tiles become three full-width rows — name + note on the
   left, badge + price on the right — instead of three 105px columns, where the
   5-vials copy wrapped to three lines of small text. */
@media (max-width: 480px) {
  .pyx-qty-tiles-row { grid-template-columns: 1fr; gap: 6px; }
  .pyx-qty-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name flag" "note price";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-height: 0;
    padding: 12px 14px;
  }
  .pyx-qty-tile-name  { grid-area: name; }
  .pyx-qty-tile-note  { grid-area: note; font-size: 12px; }
  .pyx-qty-tile-price { grid-area: price; justify-self: end; font-size: 17px; white-space: nowrap; }
  .pyx-qty-tile-flag  {
    grid-area: flag;
    justify-self: end;
    position: static;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 9px;
    white-space: nowrap;
  }
  .pyx-qty-was { font-size: 11px; }
}


/* -----------------------------------------------------------------------------
 * #11  "Add 1 more" nudge — cart page + side cart (mirrors the free-shipping
 *      meter). PHP: functions.php → pyxax_volume_nudge(); inc/cart-drawer.php
 * -------------------------------------------------------------------------- */
.pyx-volume-nudge {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--cyan-mid);
  border-radius: var(--pyx-radius-card);
  background: var(--cyan-dim);
}
.pyx-volume-nudge--drawer { margin: 12px 0 4px; }
.pyx-vn-head { display: flex; flex-direction: column; gap: 3px; }
.pyx-vn-head strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--white); }
.pyx-vn-head span { font-size: 14px; color: var(--cyan); }
.pyx-vn-track { position: relative; height: 4px; margin: 10px 0 8px; border-radius: 2px; background: rgba(240,244,248,.12); overflow: hidden; }
.pyx-vn-track span { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--cyan); }
.pyx-vn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pyx-vn-foot > span { font-family: var(--font-mono); font-size: var(--pyx-label); letter-spacing: .06em; text-transform: uppercase; color: rgba(240,244,248,.62); }
.pyx-vn-add {
  display: inline-flex;
  align-items: center;
  min-height: var(--pyx-control-h-sm);
  padding: 0 14px;
  border-radius: var(--pyx-radius-control);
  background: var(--cyan);
  color: var(--obsidian);
  font-family: var(--font-mono);
  font-size: var(--pyx-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.pyx-vn-add:hover { filter: brightness(1.1); }
.pyx-vn-add:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Specificity fix (2026-09-28): wp-adjustments.css `.woocommerce a { color: cyan }`
   (0,1,1) outranked the single-class rules above (0,1,0) — the nudge button
   rendered cyan text on a cyan fill (invisible), and the drawer's suggested
   product name turned cyan. Anchor-qualified + scoped selectors win cleanly. */
.pyx-volume-nudge a.pyx-vn-add,
.pyx-volume-nudge a.pyx-vn-add:visited,
.pyx-volume-nudge a.pyx-vn-add:hover { color: var(--obsidian); }
.pyx-drawer-suggest a.pyx-drawer-suggest-name,
.pyx-drawer-suggest a.pyx-drawer-suggest-name:visited { color: var(--white); }
.pyx-drawer-suggest a.pyx-drawer-suggest-name:hover { color: var(--cyan); }