/* Peptide Works -- the shared product-card grid (`.pw-bs`).
 *
 * Loaded by the [pw_best_sellers] shortcode and by the homepage template, which
 * render the SAME card from pw-bestsellers.php. These rules used to live in
 * pw-home.css scoped to #pw-home; they moved here and re-scoped to .pw-bs when
 * the Popular Peptides page needed the same grid, so there is one copy rather
 * than two that look alike until someone edits one.
 *
 * Only what an inline style cannot express. The card's own declarations are the
 * approved design's, kept verbatim in the PHP.
 */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}

.pw-bs{font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#16191B;}
.pw-bs *{box-sizing:border-box;}
.pw-bs a{text-decoration:none;}

/* Hovers. In the design these were style-hover="" attributes the Claude Design
   runtime compiled. Every one needs !important: the declaration it overrides is
   inline on the element, and an inline style beats a stylesheet rule whatever
   its specificity. */
.pw-bs .pw-hv-green:hover{color:#1D5C2C !important;}
.pw-bs .pw-hv-dark:hover{background:#123D1D !important;}
.pw-bs .pw-hv-card{transition:border-color .18s ease,box-shadow .18s ease;}
.pw-bs .pw-hv-card:hover{border-color:rgba(29,92,44,0.4) !important;box-shadow:0 18px 40px -30px rgba(18,61,29,0.6) !important;}
.pw-bs .pw-hv-ico:hover{border-color:#1D5C2C !important;background:#F2F7EF !important;}
@media (prefers-reduced-motion:reduce){.pw-bs .pw-hv-card{transition:none;}}

/* A product with no featured image. A missing photo should read as pending, not
   as a broken card. */
.pw-bs .pw-slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#E7EFE2 0 10px,#EDF3E9 10px 20px);}
.pw-bs .pw-slot-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:#6E7A70;text-align:center;padding:0 14px;line-height:1.5;}
.pw-bs .pw-slot-label::after{content:' · photo pending';opacity:.65;}

/* WooCommerce price HTML. get_price_html() emits its own markup (a <del>/<ins>
   pair on sale, two amounts for a range); these rules put Woo's own elements
   into the design's shape rather than the PHP second-guessing what Woo emits. */
.pw-bs .pw-price{font-size:19px;font-weight:600;letter-spacing:-0.01em;color:#16191B;}
.pw-bs .pw-price .woocommerce-Price-amount{font-size:19px;font-weight:600;}
.pw-bs .pw-price del{opacity:.55;font-weight:400;}
.pw-bs .pw-price del .woocommerce-Price-amount{font-size:15px;}
.pw-bs .pw-price ins{text-decoration:none;}
.pw-bs .pw-price .woocommerce-Price-amount + .woocommerce-Price-amount{font-size:15px;color:#7C867E;font-weight:500;}

/* The grid itself. The inline grid-template-columns carries the requested count;
   these narrow it, and need !important for the same inline-beats-stylesheet
   reason as the hovers. */
@media (max-width:1080px){ .pw-bs.pw-grid{grid-template-columns:repeat(3,1fr) !important;} }
@media (max-width:760px){  .pw-bs.pw-grid{grid-template-columns:repeat(2,1fr) !important;} }
@media (max-width:520px){  .pw-bs.pw-grid{grid-template-columns:1fr !important;} }