/* ============================================================
   Products subpage — species accordion. Click a species and its
   product alternatives slide open.
   Loaded after styles.css (tokens available).
   ============================================================ */

.page-hero { padding: calc(var(--header-h) + 3.5rem) 0 2.8rem; }
.page-hero__back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.6rem; transition: gap 0.25s var(--ease-soft), color 0.2s;
}
.page-hero__back:hover { gap: 0.85rem; color: var(--amber-link); }
.page-hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); font-weight: 500; letter-spacing: -0.01em; }
.page-hero p { max-width: 62ch; font-size: 1.06rem; margin: 1.3rem 0 0; }

/* ---- accordion ---- */
/* min-height reserves the viewport before the accordion is built by JS, so the
   dark footer never rides up mid-screen and flashes on load. */
.prod-accordion { min-height: 80vh; padding-bottom: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--line); }
.species { border-bottom: 1px solid var(--line); }

.species__head {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 84px 1fr auto auto; align-items: center;
  gap: 1.6rem; padding: 1.7rem 0.2rem; text-align: left;
  transition: padding-left 0.35s var(--ease-soft);
}
.species__head:hover { padding-left: 0.6rem; }
.species__thumb { width: 84px; height: 60px; display: flex; align-items: center; justify-content: center; }
.species__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0.95; }
.species__name {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  color: var(--ink); line-height: 1.05; letter-spacing: -0.01em; transition: color 0.2s;
}
.species__head:hover .species__name { color: var(--amber-link); }
.species__count { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.species__toggle { position: relative; width: 18px; height: 18px; flex: none; }
.species__toggle::before, .species__toggle::after {
  content: ""; position: absolute; background: var(--amber-link); border-radius: 2px;
  transition: transform 0.4s var(--ease-soft), opacity 0.3s;
}
.species__toggle::before { top: 8px; left: 0; width: 18px; height: 2px; }        /* horizontal */
.species__toggle::after  { top: 0; left: 8px; width: 2px; height: 18px; }         /* vertical  */
.species.is-open .species__toggle::after { transform: scaleY(0); opacity: 0; }    /* + -> -    */

/* slide-open panel (grid 0fr -> 1fr for smooth auto-height) */
.species__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-soft); }
.species.is-open .species__panel { grid-template-rows: 1fr; }
.species__panel-inner { overflow: hidden; min-height: 0; }
/* content fades up as the panel opens; base delay matches the scroll reveal (0.03s) */
.species__body { padding: 0.4rem 0.2rem 2.8rem; opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft); transition-delay: 0.03s; }
.species.is-open .species__body { opacity: 1; transform: none; }

.species__desc { max-width: 70ch; font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 2.2rem; }

/* ---- variant ---- */
.variant { margin-top: 2.4rem; }
.variant:first-child { margin-top: 0; }
.variant__name {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.7rem; color: var(--ink);
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); margin: 0 0 1.6rem;
}
.variant__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.6rem; }

.pitem { margin: 0; display: flex; flex-direction: column; }
.pitem__media {
  height: 168px; display: flex; align-items: center; justify-content: center;
  background: #fbfaf6; border: 1px solid var(--line-soft); border-radius: 3px; padding: 0.9rem;
  margin-bottom: 0.9rem;
}
.pitem__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pitem--pack .pitem__media { background: #f4f1ea; }
.pitem--text .pitem__media { display: none; }
.pitem__h { font-family: var(--font-serif); font-weight: 500; font-style: italic; font-size: 1.18rem; color: var(--ink); margin: 0 0 0.35rem; line-height: 1.15; }
.pitem--pack .pitem__h, .pitem--text .pitem__h { font-style: normal; }
.pitem__cap { font-size: 0.9rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* reveal */
/* .reveal is defined once in styles.css — no per-page override. */
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .species__panel, .species__body { transition: none; } }

@media (max-width: 620px) {
  .species__head { grid-template-columns: 56px 1fr auto; gap: 1rem; }
  .species__count { display: none; }
  .species__thumb { width: 56px; height: 44px; }
  .variant__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (max-width: 420px) { .variant__grid { grid-template-columns: 1fr; } }