/*
 * The home page's "most compared" price cards (components/hub/pages/HubHome.jsx,
 * HomePriceCard). Loaded by that page only, after pt.css and site.css; hub tokens
 * only (--ink, --line, --accent, --brand, --radius-*, --space-*), so the cards follow
 * the light and dark themes. The add-to-cart button itself is the shared one
 * (components/site/AddToCart.jsx, styled in app/globals.css).
 *
 * Desktop: the hub card grid, every card the same height with its actions at the
 * foot. Phones (≤ 640px): one swipeable row with the next card peeking in.
 */
.pt-root .hub-pc { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: 20px; transition: border-color .15s ease, box-shadow .2s ease; }
.pt-root .hub-pc:hover { border-color: color-mix(in srgb, var(--line-strong) 70%, transparent); }

/* Name, aka and the evidence grade. */
.pt-root .hub-pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pt-root .hub-pc-id { min-width: 0; }
.pt-root .hub-pc-name { margin: 0; font: 700 19px/24px var(--font-sans); letter-spacing: -.02em; }
.pt-root .hub-pc-name a { color: inherit; text-decoration: none; }
.pt-root .hub-pc-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-root .hub-pc-aka { margin: 3px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow-wrap: anywhere; }
.pt-root .hub-pc-grade { display: grid; justify-items: end; gap: 3px; flex: none; }
.pt-root .hub-pc-label { font: 600 10.5px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-root .hub-pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(var(--space-1) * -1); }

/* The price: the lowest in-stock price per mg first, then where it sits in the range. */
.pt-root .hub-pc-price { display: grid; gap: var(--space-2); padding: 14px 14px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 3.5%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.pt-root .hub-pc-best { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pt-root .hub-pc-amt { font: 700 30px/34px var(--font-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pt-root .hub-pc-unit { margin-left: 3px; font: 600 14px/1 var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
.pt-root .hub-pc-price .pt-range { min-width: 0; }
.pt-root .hub-pc-median { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.pt-root .hub-pc-none { margin: 0; padding: 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 3.5%, transparent); font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Vendors in stock, lab reports. */
.pt-root .hub-pc-facts { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pt-root .hub-pc-facts span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pt-root .hub-pc-facts .pt-icon { color: var(--ink-subtle); }
.pt-root .hub-pc-facts b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The top graded vendor in stock: the evidence ranking. */
.pt-root .hub-pc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); row-gap: 4px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pt-root .hub-pc-top .hub-pc-label { grid-column: 1 / -1; }
.pt-root .hub-pc-vendor { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font: 600 14px/20px var(--font-sans); }
.pt-root .hub-pc-vendor > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Actions at the card's foot, so buttons line up across a row of cards. */
.pt-root .hub-pc-actions { display: grid; gap: var(--space-2); margin-top: auto; }
/* Buying through PeptideTech Checkout: kept apart from the ranking above, in its own box. */
.pt-root .hub-pc .hub-pc-buy { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pt-root .hub-pc-seller { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pt-root .hub-pc-seller-id { display: grid; gap: 1px; min-width: 0; }
.pt-root .hub-pc-seller-name { font: 600 14px/18px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-root .hub-pc-pack { font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.pt-root .hub-pc-pack b { font: 700 13px/17px var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }

/* "Compare N vendors": a secondary button; under a checkout seller, a quieter text button. */
.pt-root .hub-pc-compare { display: flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 40px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 600 14px/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.pt-root .hub-pc-compare:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pt-root .hub-pc-compare .pt-icon { transition: transform .15s ease; }
.pt-root .hub-pc-compare:hover .pt-icon { transform: translateX(2px); }
.pt-root .hub-pc-buy + .hub-pc-compare { min-height: 36px; border-color: transparent; color: var(--link, var(--brand)); }
.pt-root .hub-pc-buy + .hub-pc-compare:hover { border-color: transparent; background: color-mix(in srgb, var(--brand) 8%, transparent); }
@media (pointer: coarse) { .pt-root .hub-pc-compare, .pt-root .hub-pc-buy + .hub-pc-compare { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pt-root .hub-pc, .pt-root .hub-pc-compare, .pt-root .hub-pc-compare .pt-icon { transition: none; } .pt-root .hub-pc-compare:hover .pt-icon { transform: none; } }

/* Phones: one row of cards to swipe through, snapping to each card; the page itself never scrolls sideways. */
@media (max-width: 640px) {
  .pt-root .hub-pc-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: 2px 2px 12px; margin: -2px -2px 0; scrollbar-width: thin; }
  .pt-root .hub-pc { scroll-snap-align: start; padding: 16px; gap: 14px; }
  .pt-root .hub-pc-amt { font-size: 28px; line-height: 32px; }
}