:root{
  --bg:#0a0e12;          /* charcoal */
  --panel:#111827;       /* dark slate */
  --text:#e5e7eb;        /* light */
  --muted:#9ca3af;       /* gray */
  --accent:#06b6d4;      /* cyan */
  --accent-2:#ffd166;    /* dart yellow */
  --ok:#22c55e;          /* green */
  --warn:#f59e0b;        /* amber */
  --no:#6b7280;          /* gray */
  --err:#ef4444;         /* red */
  --card-radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,14,18,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;letter-spacing:.3px;text-decoration:none;color:#fff;font-size:1.125rem}
.nav a{color:var(--text);text-decoration:none;margin-left:16px;opacity:.9}
.nav a:hover{opacity:1}
.nav a.social svg{width:20px;height:20px;fill:var(--text);vertical-align:middle}

/* Hero */
.hero{padding:32px 0 16px}
.hero h1{font-size:2rem;margin:.2rem 0}
.hero p{color:var(--muted);margin:.2rem 0}

/* Filters */
.filters{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:8px 0 16px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.filter-group{display:flex;align-items:center;gap:8px}
.filter-label{color:var(--muted);font-size:.95rem}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;cursor:pointer;font-size:.9rem;color:var(--text);background:rgba(255,255,255,.06)}
.chip.active{background:var(--panel);border-color:var(--accent);color:#fff}
.chip:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,182,212,.15)}
select{background:var(--panel);color:var(--text);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 12px}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding:24px 0 40px}
.card{background:var(--panel);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px}
.card-title{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-title h3{font-size:1.05rem;margin:0}
.badge{padding:4px 8px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.badge.ok{background:rgba(34,197,94,.18);color:#86efac;border:1px solid rgba(34,197,94,.35)}
.badge.wait{background:rgba(107,114,128,.18);color:#d1d5db;border:1px solid rgba(107,114,128,.35)}
.badge.tad{background:rgba(245,158,11,.18);color:#fcd34d;border:1px solid rgba(245,158,11,.35)}
.badge.grow{background:rgba(6,182,212,.18);color:#67e8f9;border:1px solid rgba(6,182,212,.35)}
.meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.9rem}
.genus{padding:6px 10px;border-radius:999px;background:transparent;color:var(--accent);border:1px solid rgba(6,182,212,.65);cursor:default}
.genus:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-actions{display:flex;gap:8px;margin-top:6px}
.btn{flex:1;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text);cursor:pointer;text-decoration:none;transition:box-shadow .15s,border-color .15s,transform .04s}
.btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,182,212,.15)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg, rgba(6,182,212,.25), rgba(6,182,212,.r15));border-color:rgba(6,182,212,.4)}

/* Care & contact wrappers */
.care,.contact{padding:8px 0 32px;border-top:1px solid rgba(255,255,255,.06)}
.care h2,.contact h2{margin-top:8px}
.care ul{margin:8px 0 0 18px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:16px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fine{font-size:.9rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100}
.lightbox.open{display:flex}
.lb-content{max-width:92vw;max-height:82vh;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.lb-content img,.lb-content video{max-width:92vw;max-height:82vh;object-fit:contain;background:#000}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(17,24,39,.6);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px}
.lb-next{right:24px}
.lb-caption{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#e5e7eb;background:rgba(17,24,39,.6);border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:10px;font-size:.9rem}
@media (max-width:520px){
  .lb-prev{left:12px}
  .lb-next{right:12px}
  .lb-close{top:12px;right:12px}
}

/* ---------- Forms (revamped) ---------- */
form{display:flex;flex-direction:column;gap:16px;max-width:640px;margin:0 auto}
.field-group{display:grid;gap:.35rem;margin-block:.5rem}
label{font-weight:600;margin-bottom:2px}
label .req{color:var(--accent);margin-left:.25rem}
.optional{color:#888;font-weight:400;font-size:.9em}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
  width:100%;padding:.65rem .8rem;border:1px solid rgba(255,255,255,.18);border-radius:.6rem;background:var(--panel);color:var(--text);transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#9aa0a6}
textarea{min-height:120px;resize:vertical}

input:focus,textarea:focus,select:focus{
  outline:2px solid transparent;border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,182,212,.18);
}
.input-error{border-color:var(--err)}
.help{color:var(--muted);font-size:.85rem}
.fine.success{color:var(--ok)}
.fine.error{color:var(--err)}
button[type="submit"]{margin-top:8px}
.btn.primary[disabled]{opacity:.6;cursor:not-allowed}
#char-remaining{color:var(--muted);margin-top:2px}
#form-message{margin-top:8px;text-align:center}

/* Utility: visually hidden (for honeypot or a11y text) */
.visually-hidden{
  position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Small screens: tighten spacing a touch */
@media (max-width:480px){
  .header-inner{height:58px}
  .hero{padding:24px 0 8px}
  form{gap:14px}
}

/* ---------- Care modal (reuses .lightbox) ---------- */
#care-modal.lightbox{backdrop-filter:blur(6px)}
#care-modal .modal-content{
  background:var(--panel);color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;box-shadow:var(--shadow);
  width:min(720px,92vw);max-height:85vh;overflow:auto;
  padding:20px 16px 16px;position:relative;
}
#care-modal .lb-close{
  position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:10px;
  background:rgba(17,24,39,.6);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;
}
#modal-title{margin:0 0 8px}
#modal-care{margin:0 0 12px 18px}
#modal-gallery{margin:8px 0 16px}
#modal-contact{width:100%}
#modal-view-photos{flex:1}

/* Thumb strip inside Care modal */
#care-modal .thumb{border:none;background:transparent;padding:0;cursor:pointer}
#care-modal .thumb img{
  width:100%;height:70px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.12);
}
#care-modal .thumb img:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,182,212,.15)}

/* ---------- Compare drawer & modal ---------- */
#compare-drawer .btn{flex:0 0 auto;padding:6px 10px}
#compare-drawer .fine{color:var(--muted)}

#compare-modal.lightbox{backdrop-filter:blur(6px)}
#compare-modal .modal-content{
  background:var(--panel);color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;box-shadow:var(--shadow);
  width:min(960px,95vw);max-height:88vh;overflow:auto;padding:16px 12px 12px;position:relative;
}
#compare-modal .lb-close{
  position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:10px;
  background:rgba(17,24,39,.6);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;
}
#cmp-title{margin:0 0 12px}
#cmp-body figure{margin:0}
#cmp-body img{display:block;width:100%;height:240px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
#cmp-body figcaption{margin-top:6px}

/* --- Lightbox polish (keeps image centered; caption truly centered) --- */
.lb-caption{
  position: fixed;               /* pin to viewport, not the media box */
  left: 50%;
  transform: translateX(-50%);
  right: auto;                   /* prevent right anchoring */
  bottom: 24px;
  text-align: center;
  max-width: min(92vw, 680px);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(17,24,39,.6);
  border: 1px solid rgba(255,255,255,.18);
}

/* Mobile: give the media full width; use swipe (hide arrow buttons) */
@media (max-width: 640px){
  .lb-content{
    max-width: 100vw;
    max-height: calc(100vh - 96px); /* leave room for caption & fingers */
  }
  .lb-content img,
  .lb-content video{
    max-width: 100vw;
    max-height: calc(100vh - 96px);
  }
  .lb-prev, .lb-next{
    display: none;               /* swipe left/right still works */
  }
  .lb-caption{
    bottom: 12px;
    max-width: calc(100vw - 24px);
    padding: 6px 10px;
    font-size: .9rem;
  }
}

/* ===== Lightbox: bottom caption, no scrunch ===== */

/* Put caption in a full-width bar fixed to the bottom */
#lb-caption, .lb-caption{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  margin: 0 auto;
  text-align: center;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  border: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  color: #e5e7eb;
  z-index: 101; /* above media */
  max-width: 100vw;
  pointer-events: auto; /* still tappable to close if your JS allows */
}

/* Let the media use the whole width/height without being pushed */
.lb-content{
  max-width: 100vw;
  max-height: calc(100vh - 88px); /* leave space for caption */
}

/* Media sizing */
.lb-content img,
.lb-content video{
  max-width: 100vw;
  max-height: calc(100vh - 88px);
  object-fit: contain;
}

/* Mobile: hide arrows (swipe instead) and tighten spacing */
@media (max-width: 640px){
  .lb-prev, .lb-next{ display: none !important; }
  #lb-caption, .lb-caption{
    padding: 8px 12px;
    font-size: .95rem;
    border-top: 1px solid rgba(255,255,255,.14);
  }
}

/* Tagline */
.tagline{
  margin:.25rem 0 0;
  font-size:clamp(1rem, 0.95rem + 0.7vw, 1.25rem);
  line-height:1.35;
  color:var(--muted);
}
.tagline.accent{
  font-weight:700;
  letter-spacing:.2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* --- Compact hero / calmer tagline / lighter filters --- */
.hero{padding:20px 0 8px}
.hero h1{margin:0 0 .25rem;font-size:clamp(1.6rem,1.2rem + 1.2vw,2rem)}
.tagline{margin:.1rem 0 0;color:var(--muted);font-size:clamp(1rem,.95rem + .5vw,1.15rem)}
.tagline.accent{font-weight:650;opacity:.95}

.filters{
  margin-top:8px;padding:8px 0 12px;
  border-top:none;border-bottom:1px solid rgba(255,255,255,.06);
  gap:12px
}
.chips{gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.chip{padding:5px 9px;font-size:.85rem}
.filter-label{display:none}       /* labels hidden visually (we'll keep aria-labels) */
#availabilitySelect{height:36px;font-size:.9rem}

/* tiny screens: hide the third hero line to reduce noise */
@media (max-width:520px){
  .hero > p.fine:not(.tagline){display:none}
}
@media (max-width:480px){
  .hero{padding:14px 0 6px}
  .tagline{font-size:1rem;opacity:.92}
}

/* --- Availability select: chip style, no clipping --- */
#availabilitySelect{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:inline-block;
  font: inherit;
  font-size:.95rem;
  line-height:1.25;                 /* prevents top/bottom cut-off */
  padding:8px 36px 8px 12px;        /* room for chevron */
  min-height:40px;                  /* use min-height, not fixed height */
  background:var(--panel);
  color:var(--text);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);

  /* custom chevron (so we can hide the native arrow cleanly) */
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 20" fill="%239ca3af"><path d="M5.25 7.5L10 12.25L14.75 7.5z"/></svg>');
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
}
#availabilitySelect:focus{
  outline:2px solid transparent;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(6,182,212,.18);
}
/* make dropdown options readable in dark theme */
#availabilitySelect option{
  background:var(--panel);
  color:var(--text);
}

/* --- Hoppy Darts logo fixes --- */
/* Enhanced Hoppy Darts logo fixes */
.site-header .brand {
  display: inline-block;
  font-size: 0; /* Hide any fallback text */
  line-height: 0;
  text-decoration: none;
}

.site-header .brand img {
  display: block;
  width: auto;
  max-height: 50px; /* Reduced from 64px for better fit; adjust as needed */
  height: auto;
  max-width: 200px; /* Prevent horizontal overflow on small screens */
  object-fit: contain; /* Keep aspect ratio without distortion */
  filter: none;
  mix-blend-mode: normal;
}

@media (max-width: 480px) {
  .site-header .brand img {
    max-height: 40px; /* Smaller on mobile */
  }
}

/* Override any hiding rules */
.site-header img[alt*="Hoppy Darts logo"] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Precise Nav Alignment Fix for Text and Icons */
.nav {
  display: flex;
  align-items: center; /* Ensures vertical centering */
  justify-content: flex-end; /* Pushes nav to right if needed */
  gap: 16px; /* Horizontal spacing */
  margin: 0;
  padding: 0;
  line-height: 1; /* Normalizes text height to match icons */
}

.nav a {
  display: inline-flex;
  align-items: center; /* Centers content within each link */
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  opacity: 0.9;
  font-size: 1rem; /* Consistent font size; adjust if needed */
  line-height: 1; /* Prevents text from shifting up */
  padding: 0; /* No extra padding causing offsets */
}

.nav a:hover {
  opacity: 1;
}

.nav a.social {
  margin-left: 16px; /* Separation from text */
}

.nav a.social img {
  width: 20px;
  height: 20px;
  vertical-align: middle; /* Fallback for icon alignment */
  object-fit: contain;
  margin: 0; /* No margins on icons */
}

/* Optional: Add this for visual testing (remove after) */
.nav {
  border-bottom: 1px dashed rgba(255,255,255,0.2); /* Debug line to check alignment */
}

/* Header Tweak for Overall Stability */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 0;
}/* === species layout constraints === */
#hero{
  /* Keep the hero nicely contained and centered */
  width: 100%;
  max-width: clamp(480px, 90vw, 900px);
  margin: 0 auto 1rem auto;
  /* cap height so it never dominates the page */
  max-height: min(60vh, 620px);
}
#hero img, #hero video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#thumbs{
  /* thumbnails grid aligns with hero width and scrolls cleanly when using #thumbs */
  max-width: clamp(480px, 90vw, 900px);
  margin-left: auto;
  margin-right: auto;
  scroll-margin-top: 100px; /* account for sticky header if present */
}
/* === species hero sizing v3 === */
#hero{
  width:100% !important;
  max-width: clamp(420px, 80vw, 720px) !important; /* smaller cap */
  max-height: min(50vh, 520px) !important;         /* shorter cap */
  margin: 0 auto 1rem auto !important;             /* centered */
}
#hero img, #hero video{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
/* thumbnails area aligns with hero + nice jump position if ever used */
#thumbs{
  max-width: clamp(420px, 80vw, 720px) !important;
  margin-left:auto !important; margin-right:auto !important;
  scroll-margin-top: 100px !important;
}
/* center the buttons row under "Care" on species pages */
.care div[style*="display:flex"]{
  justify-content:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

/* === species hero sizing v4 === */
#hero{
  width:100% !important;
  max-width: clamp(380px, 70vw, 640px) !important; /* narrower */
  max-height: min(45vh, 420px) !important;         /* shorter */
  margin: 0 auto 1rem auto !important;             /* centered */
}
#hero img,#hero video{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
/* align thumbnails with hero width */
#thumbs{
  max-width: clamp(380px, 70vw, 640px) !important;
  margin-left:auto !important; margin-right:auto !important;
  scroll-margin-top: 100px !important;
}
/* center the button row under Care */
.care div[style*="display:flex"]{
  justify-content:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

/* === species hero sizing v5 (compact) === */
#hero{
  width:100% !important;
  max-width: clamp(340px, 65vw, 560px) !important; /* narrower */
  max-height: min(40vh, 380px) !important;         /* shorter */
  margin: 0 auto 0.75rem auto !important;          /* centered */
}
#hero img,#hero video{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
#thumbs{
  max-width: clamp(340px, 65vw, 560px) !important;
  margin-left:auto !important; margin-right:auto !important;
}

/* === species detail robust 2-col layout (v3) === */
@media (min-width: 980px){
  html[data-species="1"] main.container{
    display: grid !important;
    grid-template-columns: minmax(340px, 600px) 1fr;
    gap: 24px;
    align-items: start;
  }
  html[data-species="1"] #hero,
  html[data-species="1"] #thumbs{
    grid-column: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html[data-species="1"] #hero{ max-width: 100% !important; }
  html[data-species="1"] section.care{
    grid-column: 2 !important;
    position: sticky;
    top: 96px; /* adjust if header changes */
    align-self: start;
  }
  /* Tidy single Ask button */
  html[data-species="1"] section.care #contact-link{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: .7rem 1rem;
  }
}

/* Ensure lightbox controls always clickable on species pages */
.lightbox{ z-index: 9999; }
.lightbox .lb-prev, .lightbox .lb-next, .lightbox .lb-close{ pointer-events: auto; }

/* === Species detail: robust two-column layout ===
   Works if JS adds .species-layout, AND as a fallback via :has()
   (ships in modern Chrome/Firefox/Safari). */
@media (min-width: 980px){
  /* Apply grid if we see hero + care OR the class is set */
  main.container.species-layout,
  main.container:has(#hero):has(section.care){
    display: grid !important;
    grid-template-columns: minmax(340px, 600px) 1fr;
    gap: 24px;
    align-items: start;
  }
  /* Left column items */
  main.container.species-layout #hero,
  main.container.species-layout #thumbs,
  main.container:has(#hero):has(section.care) #hero,
  main.container:has(#hero):has(section.care) #thumbs{
    grid-column: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  /* Right column (sticky) */
  main.container.species-layout section.care,
  main.container:has(#hero):has(section.care) section.care{
    grid-column: 2 !important;
    position: sticky;
    top: 96px; /* tweak if header height changes */
    align-self: start;
  }
  /* Ask button sizing */
  main.container.species-layout #contact-link,
  main.container:has(#hero):has(section.care) #contact-link{
    display:block;
    width:100%;
    text-align:center;
    font-size:1rem;
    padding:.7rem 1rem;
  }
}

/* Ensure hero arrows always receive clicks */
.hero-controls{ pointer-events:none; }
.hero-controls button{ pointer-events:auto; }

/* Lightbox controls on top, just in case */
.lightbox{ z-index: 9999; }
.lightbox .lb-prev, .lightbox .lb-next, .lightbox .lb-close{ pointer-events:auto; }

/* === Species layout tweaks (header left, care panel up) === */
@media (min-width: 980px){
  /* Header block sits above the hero in the LEFT column */
  main.container.species-layout section.hero,
  main.container:has(#hero):has(section.care) section.hero{
    grid-column: 1 !important;
    margin-bottom: 12px;
  }

  /* RIGHT column panel starts near the top (smaller offset) */
  main.container.species-layout section.care,
  main.container:has(#hero):has(section.care) section.care{
    top: 24px;   /* was 96px */
  }
}

/* Ensure hero arrow buttons can be clicked */
.hero-controls{ pointer-events:none; }
.hero-controls button{ pointer-events:auto; }

/* --- SPECIES PAGE GRID (explicit, robust) ------------------------------- */
main.container.species{
  display:grid !important;
  grid-template-columns:minmax(360px, 720px) 1fr; /* left gallery, right panel */
  gap:24px;
  align-items:start;
}

/* Left column pieces */
main.container.species .left > .hero-meta{ margin-bottom:12px; }
main.container.species #hero{ max-width:100%; }
main.container.species #thumbs{ margin:10px 0 0 }

/* Right panel (sticky Ask + Care) */
main.container.species .right{ position:sticky; top:24px; align-self:start }
main.container.species .right #contact-link{ display:block; width:100%; text-align:center }

/* Ensure hero arrows take clicks */
.hero-controls{ pointer-events:none }
.hero-controls button{ pointer-events:auto }

/* Lightbox controls sit on top everywhere */
.lightbox{ z-index:9999 }
.lightbox .lb-prev,.lightbox .lb-next,.lightbox .lb-close{ pointer-events:auto }
/* === HD species layout (marker: hd-species-v1) === */
main.container.species{display:grid;grid-template-columns:1fr minmax(280px,420px);gap:32px;align-items:start}
@media (max-width: 900px){main.container.species{grid-template-columns:1fr}.species .right{position:static}}
.species .right{position:sticky;top:104px}
.species-hero{position:relative;max-width:900px;margin:8px 0 12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:#000}
.species-hero img,.species-hero video{width:100%;height:100%;object-fit:cover;display:block}
.hero-controls{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hero-controls button{pointer-events:auto;background:rgba(17,24,39,.6);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;margin:8px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px;margin:10px 0 20px}
.thumbs img{width:100%;height:70px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.12);cursor:pointer}
/* === hd-species-tweak-2 === */
.species-hero{max-width:820px;}        /* balance left column vs right card */
.species .right .care{
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(17,24,39,.35));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px 18px;
  box-shadow: var(--shadow);
}
.species .right .care h2{margin:.25rem 0 .5rem;font-size:1.1rem}
.species .right .care ul{margin:.25rem 0 1rem 1.2rem;line-height:1.45}
.species .right .care .btn{width:100%;justify-content:center}
@media (max-width: 900px){
  .species-hero{max-width:100%;}
  .species .right .care{margin-top:8px;}
}
/* === hd-species-layout-swap === */
.species{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.species .left{order:2;flex:1 1 820px}   /* media column -> now on the RIGHT with order:2 */
.species .right{order:1;flex:0 0 380px}  /* care column -> LEFT, fixed width */
@media (max-width: 960px){
  .species .left{order:2;flex:1 1 100%}
  .species .right{order:1;flex:1 1 100%}
}

/* Make the care block a neat card and sticky */
.species .right .care{
  position:sticky; top:84px;
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(17,24,39,.35));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)
}
.species .right .care h2{margin:.25rem 0 .5rem;font-size:1.1rem}
.species .right .care ul{margin:.25rem 0 1rem 1.2rem;line-height:1.45}
.species .right .care .btn{width:100%;justify-content:center}

/* Balance the media width */
.species-hero{max-width:920px}
@media (max-width: 960px){ .species-hero{max-width:100%} }
/* === HD species grid align (care starts at hero top) === */
.species{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px; /* left content, right care */
  grid-template-rows:auto auto;             /* row1: title/meta, row2: hero */
  column-gap:24px; row-gap:24px;
  align-items:start;
}
/* allow .hero-meta and .species-hero (inside .left) to participate in parent grid */
.species .left{ display:contents; }

/* place items */
.hero-meta    { grid-column:1; grid-row:1; }
.species-hero { grid-column:1; grid-row:2; }
.species .right{ grid-column:2; grid-row:2; align-self:start; position:sticky; top:84px; }

/* nice care-card look */
.species .right .care{
  background:linear-gradient(180deg, rgba(17,24,39,.55), rgba(17,24,39,.35));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:16px 18px; box-shadow:var(--shadow);
}
.species .right .care h2{margin:.25rem 0 .5rem;font-size:1.1rem}
.species .right .care ul{margin:.25rem 0 1rem 1.2rem;line-height:1.45}
.species .right .care .btn{width:100%;justify-content:center}

/* media width guard */
.species-hero{max-width:920px}
@media (max-width: 960px){
  .species{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .hero-meta    { grid-column:1; grid-row:auto; }
  .species-hero { grid-column:1; grid-row:auto; }
  .species .right{ grid-column:1; grid-row:auto; position:static; }
}

/* === Blog responsive === */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.blog-card{border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;background:rgba(17,24,39,.4)}
.blog-card img{width:100%;height:auto;display:block}
.blog-card h3{margin:12px 14px 6px;font-size:1.05rem}
.blog-card p{margin:0 14px 14px;color:var(--muted,#aab);line-height:1.4}

article.blog-post{max-width:860px;margin:0 auto;padding:0 16px}
article.blog-post img, article.blog-post video{max-width:100%;height:auto;display:block;border-radius:12px;margin:10px auto}
/* HD lightbox */
.hd-lightbox{position:fixed;inset:0;z-index:1000;display:none}
.hd-lightbox.open{display:block}
.hd-lightbox .hd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:saturate(120%) blur(2px)}
.hd-lightbox .hd-frame{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.hd-lightbox .hd-stage{max-width:min(92vw,1200px);max-height:78vh;pointer-events:auto}
.hd-lightbox img,.hd-lightbox video{max-width:100%;max-height:78vh;display:block;border-radius:12px}
.hd-lightbox .hd-cap{margin-top:8px;color:#ddd;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hd-lightbox .hd-close,.hd-lightbox .hd-prev,.hd-lightbox .hd-next{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  background:rgba(17,24,39,.65);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer
}
.hd-lightbox .hd-close{top:24px;right:24px;transform:none}
.hd-lightbox .hd-prev{left:24px}
.hd-lightbox .hd-next{right:24px}

/* ensure hero arrow buttons sit above media */
.hero-controls button{z-index:2}
/* species grid align */
.container.species{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start}
@media (max-width: 900px){ .container.species{display:block} }
.species .right{align-self:start}
/* lightbox touch */
.lightbox #lb-content{ touch-action: pan-y; } /* allow vertical scroll, keep horizontal for swipe */

/* Ensure species hero controls are clickable and aligned */
.species-hero{position:relative}
.hero-controls{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hero-controls button{pointer-events:auto; z-index:3}
@media (min-width: 980px){
  .species{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  .species .right{align-self:start}
}
.badge{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:.78rem;line-height:1.6;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);margin-left:.35rem}
.badge.ok{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.35)}
.badge.grow{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.35)}
.badge.tad{background:rgba(234,179,8,.18);border-color:rgba(234,179,8,.35)}
.badge.wait{background:rgba(148,163,184,.15);border-color:rgba(148,163,184,.30)}

/* --- Species detail: hide hero arrows (no JS rotator) --- */
main.container.species .species-hero .hero-controls { display: none; }

/* --- Species detail: hide hero arrows (rotator disabled) --- */
main.container.species .species-hero .hero-controls { display: none; }

/* --- Species detail: tiny thumbnails under the hero --- */
main.container.species .thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px;
  margin-top:12px;
}
main.container.species .thumbs button.thumb{
  padding:0; border:0; background:transparent; cursor:pointer; border-radius:8px;
}
main.container.species .thumbs img{
  width:100%; height:72px; object-fit:cover; display:block;
  border-radius:8px; border:1px solid rgba(255,255,255,.12);
}

/* two-button cards */
.card-actions { display:flex; gap:10px; flex-wrap:wrap; }
.card-actions.two { justify-content:center; }
.card-actions.two .btn { min-width: 150px; text-align:center; }
@media (min-width: 768px) {
  .card-actions.two .btn { min-width: 170px; }
}

/* two-button inline override */
.card-actions.two{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;           /* stay on one row by default */
}
.card-actions.two .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:0.6rem 1rem;
  min-width:150px;
  width:auto !important;      /* defeat any global full-width button rules */
  flex:0 0 auto;              /* don't stretch */
}

/* On extra-narrow phones, keep them side-by-side without overflow */
@media (max-width: 420px){
  .card-actions.two{ flex-wrap:wrap; }                       /* allow wrap if truly needed */
  .card-actions.two .btn{ flex:1 1 calc(50% - 8px); min-width:0; max-width:none; }
}

/* non-clickable card chips */
.card .chip{
  pointer-events: none;   /* blocks mouse/touch */
  cursor: default;
  opacity: 0.95;          /* tiny hint they’re informational */
}

/* card chips disabled hard override */
.card a.chip,
.card button.chip,
.card .chip{
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
}
.card .chip:hover,
.card .chip:focus{
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* --- Video Thumbnail Preview --- */
.thumb.video {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  overflow: hidden;
  height: 72px; /* Match image thumbnail height */
  cursor: pointer;
}

.thumb.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.thumb.video:hover img {
  transform: scale(1.05);
}

.thumb.video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  pointer-events: none; /* Make sure clicks go to the button */
  transition: background-color 0.2s ease;
}

.thumb.video:hover .play {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Hide the genus chip on the main page cards */
.card .genus {
  display: none;
}