/* ============================================================================
 * CYLOCYBE PRODUCT CARD — the single source of truth.
 * ----------------------------------------------------------------------------
 * Markup: cylocybe_product_card() in functions.php.
 * Used on: the homepage (template-cylocybe-home.php) AND every category archive
 * (woocommerce/archive-product.php, via cylo_archive_render_card()).
 * Edit the card LOOK here, once, and it changes everywhere.
 *
 * Relies on the theme CSS variables (--ink/--soft/--mute/--orange/--pink/
 * --display), which are defined on both the homepage and the archive.
 * ========================================================================== */

/* Grids the cards sit in */
.products{ display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:5vh }
@media (max-width:768px){ .products{ grid-template-columns:1fr } }
/* Strain grid: 3 cols desktop (4 rows = 12 cells), 2 cols mobile (6 rows), so
   the "+N more" card always lands in the last cell. */
.strain-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:4vh }
@media (max-width:900px){ .strain-grid{ grid-template-columns:repeat(2,1fr);gap:1rem } }

/* The card itself — a clickable glass tile */
.card{
  /* Self-contained design tokens: the card carries its own tokens so it renders
     IDENTICALLY on ANY page (homepage, archives, search, future pages), not only on
     pages that happen to define them inline. Values match the homepage :root. */
  --ink:#ffffff;--soft:#cfc6dc;--mute:#8d82a0;--orange:#ff9a52;--pink:#ff2d8a;--display:"Times New Roman",serif;
  background:rgba(20,12,30,.65);
  backdrop-filter:blur(15px) saturate(1.4);
  -webkit-backdrop-filter:blur(15px) saturate(1.4);
  border:1px solid rgba(255,255,255,.06);
  border-radius:3px;padding:1.5rem;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
  will-change:transform;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
}
.card:hover{ transform:translateY(-6px);border-color:rgba(255,154,82,.4) }

/* Image (square), with the opt-in hover cycler (data-hover-images -> stacked
   <img class="card__art-img"> layers that crossfade on opacity). */
.card__art{
  aspect-ratio:1;background-color:#0a0a0a;
  background-size:cover;background-position:center;
  border-radius:2px;margin-bottom:1.25rem;
  position:relative;overflow:hidden;
}
.card__art > img.card__art-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .5s ease-in-out;pointer-events:none;
}
.card__art > img.card__art-img.is-active{ opacity:1 }
@media (prefers-reduced-motion:reduce){ .card__art > img.card__art-img{ transition:none } }

/* Editorial head — copied from the spore product page (.buy__species/.buy__h1/
   .buy__rate/.buy__stars). Italic serif species line, big name, star rating. */
.card__species{ font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--soft);margin:0 0 .2rem }
.card__name{ font-family:"Anton","Impact","Helvetica Neue",sans-serif;font-weight:400;font-size:clamp(2.2rem,3vw,3.2rem);line-height:.9;letter-spacing:-.02em;color:var(--ink);margin:.1rem 0 .5rem }
.card__rating{ display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--mute);margin:0 0 1.4rem }
.card__stars{ color:var(--orange);letter-spacing:.1em }
.card__desc{ font-size:clamp(1.05rem,1.15vw,1.25rem);line-height:1.55;color:var(--soft);margin:0 0 1.25rem }
.card__desc strong{ color:var(--ink);font-weight:700 }
/* CTA pinned to the bottom so cards of differing text length stay aligned. */
.card__cta{
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pink);font-weight:700;margin-top:auto;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
}
.card__price{ font-family:"Anton","Impact",sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--orange);white-space:nowrap }
.card__price .woocommerce-Price-amount,
.card__price .woocommerce-Price-amount bdi{ color:var(--orange) !important }

/* "+N more" card — same glass tile, centred CTA, links to the category. */
.card--more{ align-items:center;justify-content:center;text-align:center;gap:.4rem;border-color:rgba(255,154,82,.35) }
.card--more:hover{ border-color:rgba(255,154,82,.7) }
.card-more__plus{ font-family:"Anton","Impact",sans-serif;font-weight:400;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:var(--orange) }
.card-more__label{ font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink) }
.card-more__cta{ font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-top:.7rem;font-weight:700 }