/* ==========================================================================
   Purexis product cards
   Uses the child theme's tokens when present, falls back to sane values so
   the block still looks right if the theme is ever switched.
   ========================================================================== */

.px-cardblock{
  margin: 2.8rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--px-rule, #D5D2CB);
}

.px-cardblock__heading{
  font-family: var(--px-data, ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--px-brass, #A8834C);
  margin: 0 0 1.4rem;
}

.px-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--px-rule, #D5D2CB);
  border: 1px solid var(--px-rule, #D5D2CB);
}

.px-cards--single{ grid-template-columns: 1fr; }

.px-card{
  background: var(--px-paper, #F1F0EC);
  display: flex;
  flex-direction: column;
}

.px-cards--single .px-card{
  flex-direction: row;
  align-items: stretch;
}

@media (max-width: 560px){
  .px-cards--single .px-card{ flex-direction: column; }
}

/* Media ------------------------------------------------------------------ */
.px-card__media{
  background: var(--px-paper-deep, #E7E5DF);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

.px-cards--single .px-card__media{
  width: 40%;
  aspect-ratio: auto;
  min-height: 220px;
}

@media (max-width: 560px){
  .px-cards--single .px-card__media{ width: 100%; aspect-ratio: 4 / 3; }
}

.px-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.px-card__media--empty{
  background:
    radial-gradient(110% 90% at 70% 20%, #FFF 0%, var(--px-paper-deep, #E7E5DF) 60%, #DAD7D0 100%);
}

/* Body ------------------------------------------------------------------- */
.px-card__body{
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.px-card__kicker{
  font-family: var(--px-data, ui-monospace, monospace);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--px-brass, #A8834C);
  margin: 0;
}

.px-card__name{
  font-family: var(--px-display, Georgia, serif);
  font-weight: 300;
  font-size: 1.22rem;
  line-height: 1.15;
  color: var(--px-ink, #101418);
  margin: 0;
}

.px-card__blurb{
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--px-slate, #5E6469);
}

.px-card__ing{
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--px-mute, #8E9297);
}

.px-card__cert{ margin-top: .3rem; }

.px-card__foot{
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}

.px-card__price{
  font-family: var(--px-display, Georgia, serif);
  font-size: 1.2rem;
  color: var(--px-ink, #101418);
}

/* Compact ---------------------------------------------------------------- */
.px-cards--compact .px-card__body{ gap: .45rem; padding: 1.1rem; }
.px-cards--compact .px-card__name{ font-size: 1.05rem; }

/* Certificate rail fallback, in case the theme is not active -------------- */
.px-cardblock .px-cert{
  font-family: var(--px-data, ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--px-mute, #8E9297);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  align-items: center;
}
.px-cardblock .px-cert b{ color: var(--px-pigment, #1B2E4A); font-weight: 500; }
.px-cardblock .px-cert .px-v{ color: var(--px-brass, #A8834C); }
.px-cardblock .px-cert .px-sep{ width: 12px; height: 1px; background: var(--px-rule, #D5D2CB); }

.px-cardblock .px-buy{
  font-family: var(--px-data, ui-monospace, monospace);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--px-paper, #F1F0EC);
  background: var(--px-pigment, #1B2E4A);
  padding: .8rem 1.3rem;
  text-decoration: none;
  display: inline-block;
  transition: background .25s;
}
.px-cardblock .px-buy:hover{ background: var(--px-ink, #101418); color: var(--px-paper, #F1F0EC); }