/* BioSolv IQ — shared product card component (`.pc`). Used by pdp_crosssell, formulas, shop_all. */

.pc{ display:flex; flex-direction:column; }
.pc__media{ position:relative; overflow:hidden; border-radius:0; aspect-ratio:4/5; background:var(--clr-mist,#dce3e8); }
.pc__link{ position:absolute; inset:0; display:block; }
.pc__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.pc:hover .pc__img{ transform:scale(1.04); }
.pc__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center;
  font-family:var(--ff-body); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--clr-body);
  background:repeating-linear-gradient(45deg,rgba(80,99,116,.06),rgba(80,99,116,.06) 10px,rgba(80,99,116,.11) 10px,rgba(80,99,116,.11) 20px); }
.pc__badge{ position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(38,43,49,.42); backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(248,247,242,.22); color:var(--clr-secondary);
  font-family:var(--ff-body); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 13px; border-radius:100px; }

/* Wide quick-shop pill: hover-reveal on desktop, static on mobile */
.pc__quick{ position:absolute; left:14px; right:14px; bottom:16px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:15px 22px; border:0; border-radius:100px; cursor:pointer;
  background:var(--clr-primary); color:var(--clr-secondary);
  font-family:var(--ff-body); font-size:14px; font-weight:500; letter-spacing:.012em;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease, background-color .2s ease; }
.pc__quick:hover{ background:var(--clr-accent); }
.pc:hover .pc__quick,
.pc:focus-within .pc__quick{ opacity:1; transform:translateY(0); }
.pc[data-pc-state="drawer"] .pc__quick{ opacity:0; pointer-events:none; }

/* Drawer overlay slides up from bottom of the media */
.pc__drawer{ position:absolute; left:0; right:0; bottom:0; z-index:3;
  background:var(--clr-secondary); color:var(--clr-primary);
  padding:20px 22px 22px; border-radius:14px 14px 0 0;
  transform:translateY(102%); transition:transform .32s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 -8px 24px rgba(59,66,76,.08); }
.pc[data-pc-state="drawer"] .pc__drawer{ transform:translateY(0); }
.pc__drawer-eye{ margin:0 0 14px; font-family:var(--ff-body); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--clr-body); }
.pc__opt{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 0; border:0; background:none; cursor:pointer;
  font-family:var(--ff-body); font-size:14px; color:var(--clr-primary); text-align:left; }
.pc__opt input{ position:absolute; opacity:0; pointer-events:none; }
.pc__radio{ flex:0 0 auto; width:18px; height:18px; border-radius:100px; border:1.5px solid rgba(59,66,76,.35); position:relative; transition:border-color .2s ease; }
.pc__opt.is-active .pc__radio{ border-color:var(--clr-primary); }
.pc__opt.is-active .pc__radio::after{ content:''; position:absolute; inset:3px; border-radius:100px; background:var(--clr-primary); }
.pc__opt-label{ flex:1; display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pc__opt-price{ font-weight:600; font-size:13px; color:var(--clr-body); }
.pc__drawer-actions{ margin-top:14px; display:flex; align-items:center; gap:10px; }
.pc__add{ flex:1; padding:14px 20px; border:0; border-radius:100px; cursor:pointer;
  background:var(--clr-primary); color:var(--clr-secondary);
  font-family:var(--ff-body); font-size:14px; font-weight:500; letter-spacing:.012em;
  transition:background-color .2s ease; white-space:nowrap; }
.pc__add:hover{ background:var(--clr-accent); }
.pc__add.is-loading{ opacity:.85; }
.pc__close{ flex:0 0 auto; width:44px; height:44px; border-radius:100px; border:1px solid rgba(59,66,76,.28); background:transparent; color:var(--clr-primary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pc__close:hover{ background:rgba(59,66,76,.06); }

/* body: title left, subscription price right */
.pc__body{ padding:16px 2px 0; display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.pc__name{ margin:0; flex:1; min-width:0; font-family:var(--ff-heading); font-weight:600; font-size:17px; line-height:1.25; letter-spacing:-0.005em; }
.pc__name a{ color:var(--clr-primary); text-decoration:none; }
.pc__name a:hover{ color:var(--clr-accent); }
.pc__price{ font-family:var(--ff-body); font-weight:600; font-size:15px; color:var(--clr-primary); white-space:nowrap; }

/* Filter-triggered card entrance. When a category pill is clicked, JS applies
   `.pc--filter-in` with a per-card animation-delay to replay a light left-to-right
   fade for the newly-visible cards. Restarts cleanly on every filter change. */
@keyframes pcFilterIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.pc.pc--filter-in { animation: pcFilterIn .55s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .pc.pc--filter-in { animation: none; }
}

/* Responsive label utility — dual spans, one shown per breakpoint */
.pc-mob-only{ display:none; }
.pc-mob-hide{ display:inline; }

@media (max-width:900px){
  .pc__quick{ opacity:1; transform:translateY(0); padding:13px 18px; font-size:13px; }
  .pc[data-pc-state="drawer"] .pc__quick{ opacity:0; }
  .pc__add{ padding:12px 14px; font-size:13px; }
  .pc__close{ width:40px; height:40px; }
  .pc-mob-only{ display:inline; }
  .pc-mob-hide{ display:none; }

  /* Mobile drawer: prices are redundant here — the card body's price already updates
     live when the option toggles, so drop the in-drawer prices to free vertical space. */
  .pc__drawer .pc__opt-price{ display:none; }
  /* Tighter "Purchase options" eyebrow so it doesn't wrap onto a second line. */
  .pc__drawer-eye{ letter-spacing:.08em; font-size:10.5px; }
}
@media (prefers-reduced-motion: reduce){
  .pc__img{ transition:none; }
  .pc:hover .pc__img{ transform:none; }
  .pc__quick{ transition:opacity .15s ease; transform:translateY(0); }
  .pc__drawer{ transition:transform .15s ease; }
}