/* ============================================================================
 * 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 } }
/* A single-product row (e.g. one available grow kit) - one card at normal width, aligned left. */
.products--solo{ grid-template-columns:minmax(0,380px) }
/* 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 } }
@media (max-width:600px){ .strain-grid{ grid-template-columns:1fr } }

/* 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(10,10,12,.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) }
/* Mobile only: turn the frosted-glass blur OFF - it stutters when scrolling on phones; near-solid
   black instead. This lives here in the ONE card file, so it applies on the homepage, /shop,
   search - everywhere product cards show - not just one page. */
@media (max-width:600px){ .card{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,10,12,.92) } }

/* 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:center;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 }

/* Availability badge + unavailable state. Emitted by cylocybe_product_card(), so it
   lives here (the single-source card sheet, loaded site-wide) and works on the homepage
   AND every archive. .card__art is position:relative, so the badge pins to the image.
   Out of stock = red; Coming soon (under construction) = amber. */
.card__oos{
  position:absolute;top:.6rem;left:.6rem;z-index:3;
  background:rgba(8,8,10,.82);color:#ffb4b4;border:1px solid rgba(255,90,90,.55);
  border-radius:999px;padding:.3rem .75rem;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.card__oos--soon{ color:#ffd7a8;border-color:rgba(255,154,82,.6) }
/* Unavailable card (homepage): dimmed, no hover lift, rendered as a non-linking <div>. */
.card--unavailable{ cursor:default }
.card--unavailable:hover{ transform:none;border-color:rgba(255,255,255,.06) }
.card--unavailable .card__art-img,
.card--unavailable .card__img{ filter:grayscale(.35);opacity:.55 }
.card--unavailable .card__name,
.card--unavailable .card__desc{ opacity:.7 }
.card__cta--unavail{ color:var(--mute);justify-content:center }
.card__cta--unavail span{ color:var(--mute) }

/* in-stock corner badge (green) + admin quick-edit label (bottom-right). */
.card__oos--in{background:#22c55e;color:#062012}
.card__edit{position:absolute;bottom:8px;right:8px;z-index:4;background:rgba(20,12,30,.9);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;line-height:1.3}
.card__edit:hover{background:#2f6bff;border-color:#2f6bff}