/* ===== Base ===== */
:root { --bg:#ffffcc; --text:#111; --muted:#e9ecef; }
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%;height:auto}

/* Container padding (Bootstrap keeps layout; this just nudges) */
.container{padding-inline:16px}

/* ===== Navbar (Bootstrap) ===== */
.main-nav{border-bottom:1px solid #e5e5e5}
@media (max-width: 767.98px){
  .breadcrumb { display:none; }
  .controls{
    position: sticky; top: 0; z-index: 30; background:#fff;
    padding:.5rem .75rem; margin:0 -12px 8px; border-bottom:1px solid #eee;
  }
}  /* <-- close the media query here */
.navbar .shop-link{font-weight:700;border-radius:.5rem;padding:.45rem .7rem}

/* ===== Hero (ratio-based, no VH, no gaps) ===== */
.hero-banner{
  /* fixed aspect ratios per breakpoint to avoid crop jumps & gaps */
  aspect-ratio: 16 / 9;               /* default tablets */
  background: var(--bg);
}
@media (max-width: 576px){ .hero-banner{ aspect-ratio: 4 / 3; } }     /* phones */
@media (min-width: 992px){ .hero-banner{ aspect-ratio: 21 / 9; } }    /* desktop */
.hero-banner .hero-img{
  width:100%; height:100%;
  object-fit:cover;                    /* tasteful crop, consistent */
  object-position: 50% 15%;            /* favour the top a bit */
}

/* ===== Subheader (buttons + search) ===== */
.subbar{
  display:grid; grid-template-columns:auto auto 1fr; gap:8px; align-items:center;
}
.subbar .btn{white-space:nowrap;font-size:.95rem;padding:.45rem .65rem}
.subbar-form{display:grid;grid-template-columns:1fr auto;gap:6px}
@media (max-width:767.98px){
  .subbar{grid-template-columns:1fr; row-gap:8px}
}

/* ===== Unified tile grid (2→3→4 columns) ===== */
.ml-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));     /* phones */
}
@media (min-width:576px){
  .ml-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }        /* small tablets */
}
@media (min-width:992px){
  .ml-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }        /* desktop */
}
.tile{display:block;text-align:center;padding:0;background:transparent;height:100%}
.thumb-wrap{aspect-ratio:1/1;overflow:hidden;border-radius:12px}
.thumb{width:100%;height:100%;object-fit:cover}
.caption{margin-top:8px;font-weight:600;line-height:1.2;font-size:clamp(.95rem,1.5vw,1.05rem)}

/* ===== Footer small tidy ===== */
.site-footer .footer-menu a{text-decoration:none}
/* Main menu bar styling */
.main-nav {
  background-color: #f2f2f2 !important; /* light grey */
  border-bottom: 2px solid #ccc;        /* subtle divider */
}

.main-nav .nav-link {
  font-weight: 700;       /* bold */
  color: #000 !important; /* black text */
  text-transform: uppercase; /* optional, remove if not wanted */
}
.section-title {
  font-size: 1.75rem;          /* desktop size */
  font-weight: 700;
  color: #228B22;              /* forest green */
  margin: 1rem 0 1rem;         /* spacing above/below */
}
@media (max-width: 576px){
  .section-title {
    font-size: 1.4rem;         /* slightly smaller on phones */
  }
}
/* Headings use Roboto Slab */
h1, h2, h3, h4, h5, h6,
.section-title {
  font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #228B22; /* forest green for section-title */
}

/* Brand green once, reuse everywhere */
:root{ --brand-green:#1e7a34; } /* adjust if you have a specific hex */

/* Grid stays as you already have (2→3→4 columns) */

/* Tile = rounded card with image + green bar */
.ml-grid .tile{
  display:block;
  border-radius:12px;
  overflow:hidden;            /* makes image + bar share the same rounded corners */
  background:transparent;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ml-grid .thumb-wrap{
  aspect-ratio:1/1;
}
.ml-grid .thumb{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* The green bar */
.ml-grid .caption{
  display:block;
  background:var(--brand-green);
  color:#fff;
  font-family:'Roboto Slab', Arial, Helvetica, sans-serif;
  font-weight:700;
  line-height:1.1;
  font-size:clamp(1rem, 1.8vw, 1.25rem);
  padding:.6rem .5rem;
}

/* Hover/focus polish (desktop + keyboard) */
@media (hover:hover){
  .ml-grid .tile:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.12); }
}
.ml-grid .tile:focus{ outline:2px solid #2bb673; outline-offset:3px; }

/* Links look like tiles (no blue underline) */
.ml-grid .tile, .ml-grid .tile:link, .ml-grid .tile:visited{
  color:inherit; text-decoration:none;
}
/* === Footer: solid green bar with white links === */
.site-footer{
  background:#068a00;              /* forest/brand green */
  color:#fff;
  padding:18px 0 22px;
  border-top:4px solid #bcae7a;    /* optional thin top accent; remove if unwanted */
}
.site-footer .container{ max-width:1140px; }

/* link row */
.footer-menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px 28px;
  list-style:none;
  margin:0 0 10px;
  padding:0;
}
.footer-menu a{
  color:#fff;
  font-weight:700;
  text-decoration:none;
}
.footer-menu a:hover,
.footer-menu a:focus{
  text-decoration:underline;
  outline:none;
}

/* copyright line */
.site-footer .copyright{
  margin:0;
  text-align:center;
  font-size:.95rem;
  opacity:.9;
}

/* tighter on small screens */
@media (max-width:576px){
  .footer-menu{ gap:14px 18px; }
  .site-footer .copyright{ font-size:.9rem; }
}
/* Left green sidebar look */
.sidebar-block { background:#f7f0c7; border:1px solid #d6c99a; padding:.5rem; border-radius:.5rem; }
.sidebar-title { font-weight:700; margin:0 0 .5rem; font-size:.95rem; }
.sidebar-links { list-style:none; padding:0; margin:0; }
.sidebar-links li { margin:.35rem 0; }
.sidebar-links a {
  display:block; background:#0a8f2f; color:#fff; text-decoration:none;
  padding:.45rem .6rem; border-radius:.35rem; font-weight:600;
}
.sidebar-links a:hover { filter:brightness(1.05); transform:translateY(-1px); transition:.15s; }
/* Interior pages (videos) use no hero banner */
body.video-page .hero-banner { display: none; }

/* Prevent layout shift when AdSense loads */
.adwrap { min-height: 90px; }
@media (min-width: 992px) {
  .adwrap { min-height: 120px; }
}

/* Guard rails */
iframe { display:block; visibility:visible; }
#player { contain: layout; }
/* Keep the ribbon and crumbs from changing height unexpectedly */
.collection-ribbon { min-height: 44px; }          /* matches your current py-2 layout */
.breadcrumb       { min-height: 36px; }           /* one-line on desktop, wrap-safe on mobile */

/* Player safety rails (already ratioed, this just avoids micro reflows) */
#player { contain: layout; }
iframe { display:block; visibility:visible; }

/* Prevent layout shift when AdSense loads below the player */
.adwrap { min-height: 90px; }
@media (min-width: 992px) { .adwrap { min-height: 120px; } }
/* Toolbar styling (fixed height to avoid shifts) */
.video-toolbar {
  background:#fff3cd;               /* pale amber */
  border:1px solid #f7d584;
  border-radius:.6rem;
  padding:.5rem .75rem;
  min-height:3.5rem;                /* reserves height */
}
.video-toolbar .toolbar-inner {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.btn-xl {
  font-weight:800;
  font-size:1.15rem;
  padding:.7rem 1.2rem;
  line-height:1;
  border-radius:.6rem;
}
@media (min-width: 992px){
  .btn-xl { font-size:1.25rem; padding:.8rem 1.4rem; }
}

/* Keep disabled look working */
#video-prev.disabled, #video-next.disabled { pointer-events:none; opacity:.5; }

/* Player safety rails (from before) */
#player { contain: layout; }
iframe { display:block; visibility:visible; }

/* Ad slot reservation (from before) */
.adwrap { min-height:90px; }
@media (min-width:992px){ .adwrap { min-height:120px; } }
/* Uncomment if you want it sticky */
// .video-toolbar { position: sticky; top: 60px; z-index: 1030; }

/* Reserve space for Description image on desktop */
#img-wrap { aspect-ratio:16/9; background:#eee; border-radius:.5rem; overflow:hidden; }
#video-img { width:100%; height:100%; object-fit:cover; display:block; }
/* Stable related thumbnails on desktop */
.ml-grid .ml-card img { width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block; }
.collection-ribbon { min-height:44px; }
.breadcrumb       { min-height:36px; }
.adwrap { min-height:90px; } @media (min-width:992px){ .adwrap{ min-height:120px; } }
/* Stable 16:9 thumbs everywhere */
.ml-grid .ml-card img { width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block; }

/* Description still reserves space and won’t push content */
#img-wrap { aspect-ratio:16/9; background:#eee; border-radius:.5rem; overflow:hidden; }
#video-img { width:100%; height:100%; object-fit:cover; display:block; }
.main-nav{ position:sticky; top:0; z-index:1040; }
/* Mobile: related becomes a single-row scroller */
/* .video-toolbar { position: sticky; top: 60px; z-index: 1030; }  <-- optional */

@media (max-width: 576px){
  #related-grid{
    display: flex;                 /* override grid */
    gap: .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: .25rem .5rem .5rem;
    margin-inline: -.5rem;         /* edge-to-edge look */
  }
  #related-grid .ml-card{
    flex: 0 0 78vw;                /* ~1.25 cards visible; swipe to see more */
    max-width: 78vw;
    scroll-snap-align: start;
    border-radius: .65rem;
  }
  #related-grid .ml-card img{
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    display: block;
  }
  /* compact title */
  #related-grid .ml-card .p{ padding: .4rem .5rem; }
  #related-grid .ml-card .p .small{
    font-size: .9rem; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* tighten the section heading on phones */
  .h5.mt-4{ margin-top: .75rem !important; }
}
/* Mobile: make related items a 1-row horizontal scroller */
@media (max-width: 576px){
  #related-grid{
    display: flex;                 /* override the grid on phones */
    gap: .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: .25rem .5rem .5rem;   /* a little breathing room */
    margin-inline: -.5rem;         /* edge-to-edge feel */
  }
  #related-grid .ml-card{
    flex: 0 0 78vw;                /* ~1.25 cards visible; swipe to see more */
    max-width: 78vw;
    scroll-snap-align: start;
    border-radius: .65rem;
  }
  #related-grid .ml-card img{
    width: 100%;
    aspect-ratio: 16/9;            /* stable height */
    height: auto;
    object-fit: cover;
    display: block;
  }
  /* Compact heading spacing on phones */
  .h5.mt-4 { margin-top: .75rem !important; }
}
@media (max-width: 576px){
  #related-grid{
    display:flex; gap:.75rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; padding:.25rem .5rem .5rem; margin-inline:-.5rem;
  }
  #related-grid .ml-card{
    flex:0 0 78vw; max-width:78vw; scroll-snap-align:start; border-radius:.65rem;
  }
  #related-grid .ml-card img{
    width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block;
  }
  #related-grid .ml-card .p{ padding:.4rem .5rem; }
  #related-grid .ml-card .p .small{
    font-size:.9rem; line-height:1.2;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
}
/* Footer colour (enforce same as home) */
.site-footer {
  background: #0a7a2f; /* your green */
  color: #fff;
}
.site-footer a { color: #fff; }

/* Hamburger on the right on mobile */
.navbar .navbar-toggler { margin-left: auto; } /* push toggle to the right */
@media (max-width: 991.98px) {
  .main-nav .navbar-collapse { padding-top: .5rem; }
}

/* Optional: keep tag menu tidy on mobile */
.tag-menu a { font-size: .95rem; }
/* keep banner markup but hide it on video pages to prevent jump */
body.video-page .hero-banner { display: none; }

/* player ratio prevents CLS */
.player { aspect-ratio: 16/9; background:#000; border-radius:12px; overflow:hidden; }
.player iframe { width:100%; height:100%; border:0; }

/* breadcrumbs wrap nicely on mobile */
.breadcrumb { flex-wrap: wrap; }
.breadcrumb-item + .breadcrumb-item::before { padding: 0 .35rem; }

/* mobile menu trigger row */
.mobile-menu-row { padding:.5rem 0; }
.mobile-menu-row .btn .navbar-toggler-icon { margin-right:.35rem; }

/* controls: real buttons, sticky on mobile */
.controls { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
@media (max-width: 767.98px) {
  .controls { position: sticky; top: 0; z-index: 30; background:#fff;
              padding:.5rem .75rem; margin:0 -12px 8px; border-bottom:1px solid #eee; }
}

/* browse list buttons */
.tag-menu .menu-title { font-weight:700; margin-bottom:.5rem; }
.tag-menu ul { list-style:none; margin:0; padding:0; }
.tag-menu li { margin:0 0 .5rem; }
.tag-menu a { display:block; padding:.6rem .9rem; border:1px solid #ddd; border-radius:10px;
              text-decoration:none; background:#fff; color:#111; }
.tag-menu a:hover { background:#f6f6f6; }

/* footer full-bleed green on all sizes */
.site-footer { background:#0a7a2f; color:#fff; }
.site-footer a { color:#fff; }
@media (max-width: 991.98px) { .main-nav { display:none; } }

@media (max-width: 767.98px) { nav[aria-label=breadcrumb]{display:none!important;} }
/* ===================== Collections card (left) ===================== */
.collection-card{
  background:#fffbea;               /* soft panel like your site */
  border:1px solid #eadf9c;
  border-radius:14px;
  padding:14px;
}
.collection-title{font-weight:700;margin-bottom:.5rem}
.collection-menu{display:flex;flex-direction:column;gap:.6rem}
.collection-link{
  display:block;
  padding:.70rem .9rem;
  border-radius:12px;
  background:#0a7a2f;               /* site green */
  color:#fff;
  text-decoration:none;
  font-weight:700;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
}
.collection-link:hover{filter:brightness(1.05)}
#video-prev.disabled,
#video-next.disabled {
  pointer-events: none;
  opacity: .5;
}
/* Keep crumbs to one line so height is predictable */
.breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb { min-height: 36px; padding-top:.25rem; padding-bottom:.25rem; }

/* Controls bar has a fixed minimum height whether prev/next are disabled or not */
.controls { display:flex; gap:.5rem; align-items:center; min-height:44px; }

/* Don't remove the Prev/Next element; just disable it */
#video-prev.disabled, #video-next.disabled { pointer-events:none; opacity:.5; }

/* Reserve combined space above the player (crumbs + controls) on desktop */
.above-player { min-height: 84px; } /* tweak if your crumbs wrap */

/* Mobile: hide crumbs (less shifting), controls are sticky */
@media (max-width: 767.98px){
  .breadcrumb { display:none; }
  .controls{
    position: sticky; top: 0; z-index: 30; background:#fff;
    padding:.5rem .75rem; margin:0 -12px 8px; border-bottom:1px solid #eee;
  }
/* Keep crumbs to one line so height is predictable */
.breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 36px; }

/* Controls bar keeps height even when prev/next disabled */
.controls { display:flex; gap:.5rem; align-items:center; min-height:44px; }

/* Don’t remove prev/next; just disable */
#video-prev.disabled, #video-next.disabled { pointer-events:none; opacity:.5; }

/* Reserve combined space above the player (crumbs + controls) */
.above-player { min-height: 84px; }


/* Mobile: hide crumbs; controls become sticky */
@media (max-width: 767.98px){
  .breadcrumb { display:none; }
  .controls{
    position: sticky; top: 0; z-index: 30; background:#fff;
    padding:.5rem .75rem; margin:0 -12px 8px; border-bottom:1px solid #eee;
  }
/* Anchor offset for video pages */

/* Keep a vertical gutter so the page width doesn't change between pages */
html { overflow-y: scroll; scrollbar-gutter: stable both-edges; }

/* One source of truth for the space above the player */

/* ===== FINAL OVERRIDES (drop-in, end of styles.css) ===== */

/* Keep page width stable between pages */
html { overflow-y: scroll; scrollbar-gutter: stable both-edges; }

/* Hide home hero on video pages (once) */
body.video-page .hero-banner { display: none !important; }

/* Normalise ad slot reservation (remove dup confusion) */
.adwrap { min-height: 90px !important; }
@media (min-width: 992px){ .adwrap { min-height: 120px !important; } }

/* Stable controls bar */
.controls { display:flex; gap:.5rem; align-items:center; min-height:44px; }
#video-prev.disabled, #video-next.disabled, #video-random.disabled { pointer-events:none; opacity:.5; }

/* ---- Anchor offset so the player never hides behind the header ---- */
/* If your header height changes, adjust these two numbers; or use the JS below */
:root{
  --offset-desktop: 120px; /* navbar + subheader + a tiny buffer */
  --offset-mobile:  64px;  /* sticky controls height on phones */
}
html    { scroll-padding-top: var(--offset-desktop) !important; }
#player { scroll-margin-top:  var(--offset-desktop) !important; }

@media (max-width: 767.98px){
  html    { scroll-padding-top: var(--offset-mobile) !important; }
  #player { scroll-margin-top:  var(--offset-mobile) !important; }
  /* sticky controls on mobile */
  .controls{
    position: sticky; top: 0; z-index: 30; background:#fff;
    padding:.5rem .75rem; margin:0 -12px 8px; border-bottom:1px solid #eee;
  }
}
/* Player safety rails */
#player { contain: layout; }
iframe  { display:block; visibility:visible; }
/* === Collections: hero + strips + quickbar === */
.mlk-hero{background:#fff;border-bottom:1px solid #e9ecef}
.mlk-hero .container{position:relative}
.mlk-hero-logo{position:absolute;left:0;top:12px;max-width:280px;height:auto}
.mlk-hero-img{display:block;width:100%;height:auto}
.cats-strip{background:#f2f2f2;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.cats-strip a{display:inline-block;padding:10px 14px;text-transform:uppercase;font-weight:600;color:#000}
.cats-strip a:hover{color:#0d6efd;text-decoration:none}
.quickbar{background:#ffffcc;padding:10px 12px;border-bottom:1px solid #e5e5e5}
.quickbar .btn{margin-right:10px}
.quickbar .search{max-width:520px;width:100%}
.adwrap--hidden{display:none}

#collections-grid{display:flex;flex-wrap:wrap;gap:.5rem}
#collections-grid .tile{display:inline-block;padding:.6rem .9rem;border-radius:9999px;background:#eef1f4;color:#111;text-decoration:none}
#collections-grid .tile.enabled{background:#d9f4df}
#collections-breadcrumbs{margin-bottom:.75rem;font-size:.95rem}
#collections-breadcrumbs a{text-decoration:none}
#collections-breadcrumbs .current{font-weight:600}

#collections-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem .6rem;
  align-items:flex-start;
  justify-content:flex-start;
}
#collections-grid .tile{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:9999px;
  background:#eef1f4;
  border:1px solid #dfe4ea;
  color:#111;
  text-decoration:none;
  white-space:nowrap;
}
#collections-grid .tile.enabled{
  background:#d9f4df;
  border-color:#bfe8c6;
}
#collections-grid .tile:hover{
  text-decoration:none;
  box-shadow:0 0 0 2px rgba(13,110,253,.15) inset;
}
#collections-breadcrumbs{ margin-bottom:.75rem; font-size:.95rem; }
#collections-breadcrumbs a{ text-decoration:none; }
#collections-breadcrumbs .current{ font-weight:600; }


/* Collections pills */
#collections-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:flex-start;
}
#collections-grid > a,
#collections-grid .tile{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:9999px;
  background:#eef1f4;
  border:1px solid #dfe4ea;
  color:#111;
  text-decoration:none;
  white-space:nowrap;
  font-weight:600;
}
#collections-grid > a.enabled,
#collections-grid .tile.enabled{
  background:#d9f4df;
  border-color:#bfe8c6;
}
#collections-grid > a:hover,
#collections-grid .tile:hover{
  text-decoration:none;
  box-shadow:0 0 0 2px rgba(13,110,253,.15) inset;
}

/* avoid horizontal shove */
html,body{overflow-x:hidden}
/* === Collections FORCE patch (keep at very end) === */


html,body{overflow-x:hidden}
/* ===== Collections (Birds index) — permanent styles ===== */
html{ scrollbar-gutter: stable both-edges; } /* prevents layout shift when scrollbar appears */

body.collections .section-title{ margin:16px 0 8px; }

/* Grid of collection chips/tiles */
body.collections #collections-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px 16px;
}

/* Support both <a class="col-tile"> and legacy .tile anchors */
body.collections #collections-grid > a,
body.collections #collections-grid .tile{
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:9999px; background:#eef1f4;
  border:1px solid #dfe4ea; color:#111; text-decoration:none; font-weight:600;
}

/* Breadcrumbs */
#collections-breadcrumbs{ margin-bottom:10px; }
#collections-breadcrumbs .sep{ margin:0 8px; opacity:.5; }
#collections-breadcrumbs a{ text-decoration:none; }
#collections-breadcrumbs a.current{ pointer-events:none; opacity:.7; }

/* Mobile */
@media (max-width: 575.98px){
  body.collections #collections-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:10px;
  }
  body.collections #collections-grid > a,
  body.collections #collections-grid .tile{ padding:12px 16px; }
}
/* ===== Collections (Birds index) — permanent styles ===== */
html{ scrollbar-gutter: stable both-edges; } /* avoid layout shift on scrollbar */

body.collections .section-title{ margin:16px 0 8px; }

/* Grid of collection chips/tiles */
body.collections #collections-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px 16px;
}

/* Support both <a class="col-tile"> and legacy .tile anchors */
body.collections #collections-grid > a,
body.collections #collections-grid .tile{
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:9999px; background:#eef1f4;
  border:1px solid #dfe4ea; color:#111; text-decoration:none; font-weight:600;
}

/* Breadcrumbs */
#collections-breadcrumbs{ margin-bottom:10px; }
#collections-breadcrumbs .sep{ margin:0 8px; opacity:.5; }
#collections-breadcrumbs a{ text-decoration:none; }
#collections-breadcrumbs a.current{ pointer-events:none; opacity:.7; }

/* Mobile */
@media (max-width: 575.98px){
  body.collections #collections-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:10px;
  }
  body.collections #collections-grid > a,
  body.collections #collections-grid .tile{ padding:12px 16px; }
}
/* Green chips to match the site */
#collections-grid a{
  background: rgba(25,135,84,.12);      /* like Bootstrap success */
  border-color: rgba(25,135,84,.35);
  color:#0f5132;                         /* readable dark green */
}
#collections-grid a:hover{
  filter:none;
  background: rgba(25,135,84,.18);
}

/* === FINAL override for Birds index chips === */
body.collections #collections-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px 16px !important;
}
body.collections #collections-grid > a,
body.collections #collections-grid .tile{
  display:flex !important; align-items:center; justify-content:center;
  padding:10px 14px !important; border-radius:9999px !important;
  background: rgba(25,135,84,.12) !important;            /* green tint */
  border:1px solid rgba(25,135,84,.35) !important;
  color:#0f5132 !important; text-decoration:none !important; font-weight:600 !important;
  min-height:42px;
}
body.collections #collections-grid > a:hover,
body.collections #collections-grid .tile:hover{
  background: rgba(25,135,84,.18) !important;
}