*{box-sizing:border-box}html,body{margin:0;font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#111}
:root{--border:#e5e7eb;--muted:#6b7280;--container:1100px}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:28px 0}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card img{width:100%;height:210px;object-fit:cover}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:.2rem .5rem;font-size:.85rem;background:#fff;margin-right:.3rem}
.badge.sex{background:#eef2ff;border-color:#dbe3ff;color:#1e3a8a}.badge.success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.mm{display:grid;grid-template-columns:2fr 1fr;gap:20px}@media(max-width:1000px){.mm{grid-template-columns:1fr}}
.main{border:1px solid var(--border);border-radius:12px;overflow:hidden}.main img{width:100%;background:#000;display:block}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-top:1px solid var(--border)}
.thumbs button{border:1px solid var(--border);border-radius:8px;padding:4px;background:#fff;cursor:pointer}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:6px}
.sidebar .card{margin-bottom:14px}
.mm-specs{display:grid;gap:.35rem}.mm-specs .spec{font-size:.95rem}
footer{border-top:1px solid var(--border);padding:16px 0;margin-top:28px;text-align:center;color:var(--muted)}
/* enhanced gallery */
.thumbs button.active{border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25)}
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:9999}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:92vh}
.lb-btn, .lb-close{position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:999px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer}
.lb-prev{left:24px; top:50%; transform:translateY(-50%)}
.lb-next{right:24px; top:50%; transform:translateY(-50%)}
.lb-close{top:16px; right:16px; width:40px; height:40px}
.lb-counter{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; opacity:.9}


/* --- Global Header (MM-inspired, lean) --- */
.topnav{position:sticky;top:0;background:linear-gradient(180deg,#0f1427 0%,#0d1222 100%);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);z-index:40;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.topnav .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:12px 20px}
.topnav .brand .logo{font-weight:800;letter-spacing:.2px}
.topnav .brand .muted{color:rgba(255,255,255,.6);font-weight:600;font-size:.85rem}
.topnav .links{display:flex;gap:.35rem;flex-wrap:wrap}
.topnav .link{color:#e7ecff;padding:.5rem .7rem;border-radius:10px;opacity:.92;transition:opacity .15s, background-color .15s}
.topnav .link:hover{opacity:1;background:rgba(255,255,255,.06)}
.topnav .link.active{background:rgba(255,255,255,.12);opacity:1}
.topnav .right .btn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:.5rem .75rem;border-radius:10px}
.topnav .right .btn:hover{background:rgba(255,255,255,.08)}
.topnav a{color:inherit;text-decoration:none}
@media (max-width:960px){
  .topnav .links{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:1px solid rgba(255,255,255,.3);border-radius:10px;background:transparent;color:#fff}
  .hamburger span, .hamburger:before, .hamburger:after{content:'';display:block;width:18px;height:2px;background:#fff;margin:2px 0}
}

/* --- Mobile drawer --- */
.nav-drawer{position:fixed; inset:0; display:none; z-index:50}
.nav-drawer.open{display:block}
.nav-drawer .shade{position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(120%) blur(2px);}
.nav-drawer .panel{position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:#0f1427; color:#fff;
  border-left:1px solid rgba(255,255,255,.08); transform:translateX(100%); transition:transform .22s ease-in-out; display:flex; flex-direction:column}
.nav-drawer.open .panel{transform:translateX(0)}
.nav-drawer header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.nav-drawer header strong{font-size:1.05rem}
.nav-drawer .close{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;width:40px;height:36px;cursor:pointer}
.nav-drawer nav{display:flex; flex-direction:column; padding:10px 8px; gap:2px}
.nav-drawer a{color:#e7ecff; padding:.65rem .75rem; border-radius:10px}
.nav-drawer a:hover{background:rgba(255,255,255,.06)}
/* hide hamburger on wide screens (links visible) */
@media (min-width:961px){ .hamburger{display:none !important} }



/* v2.2: drawer active link */
.nav-drawer a.active{background:rgba(255,255,255,.12); color:#fff}

/* v2.3: Crisp hamburger alignment & focus */
.hamburger{
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px; line-height:0; -webkit-tap-highlight-color:transparent;
}
.hamburger span{
  display:block; width:22px; height:2px; /* even px for crisp lines */
  background:#fff; border-radius:2px;
}
.hamburger:focus{outline:2px solid rgba(255,255,255,.65); outline-offset:2px}
.hamburger:hover{background:rgba(255,255,255,.08)}

/* v2.4: MM-like header/nav refinement */
:root{--container:1180px} /* slightly wider like MM */
.topnav{position:sticky;top:0;background:linear-gradient(180deg,#0f1427 0%,#0d1222 100%);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);z-index:60;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.topnav .bar{max-width:var(--container);margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 20px}
.topnav .brand{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.topnav .brand .logo{font-weight:800;letter-spacing:.2px}
.topnav .brand .muted{color:rgba(255,255,255,.6);font-weight:600;font-size:.85rem}
.topnav .links{display:flex;gap:.5rem;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
.topnav .link{color:#e7ecff;padding:.55rem .85rem;border-radius:10px;opacity:.92;white-space:nowrap}
.topnav .link:hover{opacity:1;background:rgba(255,255,255,.06)}
.topnav .link.active{background:rgba(255,255,255,.12);opacity:1}
.topnav .right{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.topnav .right .btn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:.5rem .75rem;border-radius:10px}
.topnav .right .btn:hover{background:rgba(255,255,255,.08)}
.topnav a{color:inherit;text-decoration:none}

/* Breakpoint: keep desktop nav visible longer like MM */
@media (max-width:1100px){
  .topnav .links{display:none}
  .hamburger{display:inline-flex}
}
@media (min-width:1101px){
  .hamburger{display:none !important}
}

/* Hamburger button (crisp) */
.hamburger{
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;line-height:0;-webkit-tap-highlight-color:transparent
}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.hamburger:hover{background:rgba(255,255,255,.08)}
.hamburger:focus{outline:2px solid rgba(255,255,255,.65);outline-offset:2px}

/* v3: Bootstrap integration overrides */
.card img{width:100%;height:210px;object-fit:cover}
.card a{text-decoration:none}
.badge{font-size:.85rem}
footer{border-top:1px solid var(--border);padding:16px 0;margin-top:28px;text-align:center;color:var(--muted)}
/* Gallery card borders still use our style */
.main{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-top:1px solid var(--border)}
.thumbs button{border:1px solid var(--border);border-radius:8px;padding:4px;background:#fff;cursor:pointer}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:6px}

/* v3.2.3: nav-only theme toggle polish (no layout changes) */
#siteNav .theme-toggle.btn{padding:.35rem .6rem; border-radius:.5rem}
#siteNav[data-bs-theme="light"] .theme-toggle.btn{border-color:rgba(0,0,0,.25); color:#212529}
#siteNav[data-bs-theme="light"] .theme-toggle.btn:hover{background:rgba(0,0,0,.05)}
#siteNav[data-bs-theme="dark"] .theme-toggle.btn{border-color:rgba(255,255,255,.35); color:#fff}
#siteNav[data-bs-theme="dark"] .theme-toggle.btn:hover{background:rgba(255,255,255,.08)}

/* v3.3: site-wide theme mapping (minimal, non-breaking) */
:root{
  --border: var(--bs-border-color);
  --muted: var(--bs-secondary-color);
}
body{
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.muted, .text-muted{ color: var(--bs-secondary-color) !important; }
.card, .main, .sidebar{ border-color: var(--bs-border-color); background-color: var(--bs-body-bg); }
hr{ border-color: var(--bs-border-color); }

/* v3.3.4: Trait badges (MM-inspired, uniquely tuned) */
.traits{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .75rem 0}
.badge-trait{
  --bg: var(--bs-tertiary-bg);
  --fg: var(--bs-emphasis-color);
  --bd: color-mix(in oklab, var(--fg) 22%, transparent);
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .55rem;border-radius:999px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);font-weight:600;font-size:.85rem;line-height:1;
  letter-spacing:.1px;white-space:nowrap;
}
.badge-trait .dot{width:.55rem;height:.55rem;border-radius:50%;background:currentColor;opacity:.9}

/* Palette per trait (close to MM, slightly shifted for uniqueness) */
.badge-trait.t-available{--bg:#e8f9f0;--fg:#0d7a52}        /* teal-green (unique) */
.badge-trait.t-male{--bg:#e8f1ff;--fg:#2b5bd7}              /* cool blue */
.badge-trait.t-female{--bg:#fdeefe;--fg:#b72bb6}            /* magenta */
.badge-trait.t-orange-dream{--bg:#fff2e5;--fg:#d86614}
.badge-trait.t-enchi{--bg:#fff4d6;--fg:#b8860b}
.badge-trait.t-ivory{--bg:#f6f7f9;--fg:#5a5f6a}
.badge-trait.t-pied{--bg:#fefefe;--fg:#111; border-style:dashed}
.badge-trait.t-yellow-belly{--bg:#fbf3d2;--fg:#8a7a00}
.badge-trait.t-albino{--bg:#fff6cc;--fg:#cc7a00}
.badge-trait.t-clown{--bg:#ecffe6;--fg:#357a38}
.badge-trait.t-pastel{--bg:#fff9d4;--fg:#9a8300}
.badge-trait.t-het{--bg:#eef0f4;--fg:#4a5568;border-style:dotted}

/* Dark mode adjustments (respect Bootstrap's color mode) */
:root[data-bs-theme="dark"] .badge-trait{
  --bd: color-mix(in oklab, #fff 18%, transparent);
  background: color-mix(in oklab, var(--bg) 15%, #0b0f14);
  color: color-mix(in oklab, var(--fg) 78%, #f1f5f9);
}
:root[data-bs-theme="dark"] .badge-trait.t-pied{border-color:rgba(255,255,255,.35)}

/* v3.3.5: Sidebar top section (MM-like) */
.sidebox{border:1px solid var(--bs-border-color); border-radius:12px; padding:16px; background:var(--bs-body-bg)}
.sidebox .title{font-weight:700; line-height:1.25; margin-bottom:.25rem}
.sidebox .subtitle{color:var(--bs-secondary-color); font-size:.95rem; margin-bottom:.125rem}
.sidebox .availability{color:var(--bs-secondary-color); font-size:.9rem; margin-bottom:.75rem}
.sidebox .price{font-weight:800; font-size:1.75rem; margin:.25rem 0 .5rem}
.sidebox .cta{display:flex; gap:.5rem; margin-bottom:1rem}
.sidebox .kv{display:grid; grid-template-columns: 1fr; row-gap:.35rem}
.sidebox .kv .label{font-weight:700; font-size:.8rem; text-transform:uppercase; color:var(--bs-secondary-color)}
.sidebox .kv .value{display:flex; align-items:center; gap:.375rem; font-weight:600}

/* Inline sex icons */
.sex.male{color:#2b5bd7}
.sex.female{color:#b72bb6}
.sidebox .traits-mini{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.25rem}
.sidebox .traits-mini .badge-trait{font-size:.8rem; padding:.3rem .5rem}

/* v3.3.6: normalize inline sex icons */
.sex{
  width:.9em;
  height:.9em;
  vertical-align:-.1em;
}

/* v3.3.8: Sidebar labels inline with values (keep styling) */
.sidebox .kv > div{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  column-gap:.5rem;
}
.sidebox .kv .label{
  margin:0; /* was blocky before */
}
.sidebox .kv .label::after{
  content: ":";
  margin-left:.15rem;
}
/* Ensure long values wrap neatly without shifting label column */
.sidebox .kv .value{
  min-width:0;
}

/* v3.3.9: Buy CTA + inline top-align + badge cleanup */
.sidebox .btn-primary{
  width:100%;
  font-weight:800;
  padding:.65rem 1rem;
  border-radius:.75rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 .5rem 1.25rem rgba(0,0,0,.06);
  background-image: linear-gradient(to bottom, color-mix(in oklab, var(--bs-primary) 92%, #fff 8%), var(--bs-primary));
  border-color: color-mix(in oklab, var(--bs-primary) 85%, #000 15%);
}
.sidebox .btn-primary:hover{
  filter: brightness(1.02);
}
.sidebox .btn-primary:active{
  filter: brightness(.98);
}

/* Inline kv rows: top-align */
.sidebox .kv > div{
  align-items:flex-start;
}

/* Trait badge no-dot layout */
.badge-trait{
  gap:.25rem;
}
.badge-trait .dot{ display:none; }

/* v3.3.10: Sidebar labels center-aligned again, font-size bumped */
.sidebox .kv > div{
  align-items:center; /* reset from flex-start */
}
.sidebox .kv .label{
  font-size:.85rem; /* was .8rem */
}

/* v3.3.11: Sidebar labels styled like MM, match data font size */
.sidebox .kv .label{
  font-weight:400;          /* match data */
  font-size:.95rem;         /* same as value */
  text-transform:none;      /* no uppercase */
  color:var(--bs-secondary-color);
}
.sidebox .kv .value{
  font-weight:400;          /* match label */
  font-size:.95rem;
}


/* v3.3.12: bring description right under gallery (desktop) */
@media (min-width: 992px){
  main > .container > section:first-of-type{ margin-bottom:.75rem !important; }
  main > .container > section:first-of-type + section{ margin-top:.5rem !important; }
}


/* v3.3.12: trait badges fixed colors independent of theme */
:root[data-bs-theme="dark"] .badge-trait{
  background: var(--bg) !important;
  color: var(--fg) !important;
  border-color: color-mix(in oklab, var(--fg) 22%, transparent) !important;
}

/* v3.3.13: Gallery controls + description typography polish */
/* Gallery: assume Bootstrap .carousel in the main column */
.main .carousel,
main .carousel{ position:relative }

/* Controls: larger click targets, subtle backgrounds */
.carousel-control-prev, .carousel-control-next{
  width: 3rem;
}
.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon{
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Show controls on hover for desktop; always visible on coarse pointers */
@media (hover:hover){
  .carousel .carousel-control-prev,
  .carousel .carousel-control-next{ opacity:0; transition:opacity .15s ease-in-out }
  .carousel:hover .carousel-control-prev,
  .carousel:hover .carousel-control-next{ opacity:.95 }
}
@media (hover:none){
  .carousel .carousel-control-prev,
  .carousel .carousel-control-next{ opacity:.95 }
}

/* Description typography: comfortable measure and spacing */
.listing-description{
  max-width: 68ch;
  margin-top: .5rem;
  line-height: 1.6;
}
.listing-description p{ margin-bottom: .75rem }

/* v3.3.14: thumbnail rail + seller panel */
/* Thumbnail rail under gallery */
.thumb-rail{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 0; margin:.25rem 0 .5rem;
  -webkit-overflow-scrolling: touch;
}
.thumb-rail img{
  height:72px; width:auto; border-radius:.5rem;
  border:1px solid var(--bs-border-color);
  object-fit:cover; flex:0 0 auto; cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}
.thumb-rail img:hover{ box-shadow:0 2px 8px rgba(0,0,0,.12) }
.thumb-rail img.active{
  border-color: var(--bs-primary);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--bs-primary) 35%, transparent);
  transform: translateY(-1px);
}

/* Seller info sidebox (beneath locked top section) */
.sidebox.seller{
  display:flex; flex-direction:column; gap:.35rem;
}
.sidebox .seller-name{ font-weight:700 }
.sidebox .seller-meta{ color:var(--bs-secondary-color); font-size:.9rem }
.seller-badges{ display:flex; flex-wrap:wrap; gap:.35rem }
.seller-badge{
  padding:.25rem .5rem; border-radius:999px; border:1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg); font-weight:600; font-size:.8rem;
}

/* v3.3.15: tighten gallery/card spacing in main column */
@media (min-width: 992px){
  /* Remove excess padding/border around the first section (gallery area) */
  main > .container > section:first-of-type .card{ border:0; background:transparent; }
  main > .container > section:first-of-type .card .card-body{ padding:0; }
  /* Keep carousel & thumb rail tight */
  main > .container > section:first-of-type .carousel{ margin-bottom:.5rem; }
  main > .container > section:first-of-type .thumb-rail{ margin:.25rem 0 .25rem; }
}
/* Ensure no unexpected min-height leaves a big empty rectangle */
main > .container > section:first-of-type{ min-height:auto !important; }

/* v3.3.16: HARD FIXES */
/* 1) Left column gallery spacing – strip extra chrome around the gallery block on desktop */
@media (min-width: 992px){
  .main .card{ border:0 !important; background:transparent !important; box-shadow:none !important; }
  .main .card-body{ padding:0 !important; }
  .main .carousel{ margin-bottom:.5rem !important; }
  .main .thumb-rail{ margin:.25rem 0 !important; padding:.25rem 0 !important; }
  .main section{ margin-bottom:.5rem !important; }
  .main{ padding-bottom:0 !important; }
}
/* 2) Sidebar guard – only show the first child in the sidebar no matter what */
.sidebar > *:not(:first-child){ display:none !important; }

/* v3.18: homepage card grid */
.card-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
}
.card.animal-card{
  transition:transform .12s ease, box-shadow .12s ease;
}
.card.animal-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.card.animal-card img{
  object-fit:cover;
  border-top-left-radius:.5rem;
  border-top-right-radius:.5rem;
  height:200px;
  width:100%;
}
.card.animal-card .card-body{
  padding:0.75rem 1rem 1rem;
}
.card.animal-card .price{
  font-weight:700;
  font-size:1.1rem;
  margin-top:.25rem;
  margin-bottom:.5rem;
}
.card.animal-card .traits-mini{
  display:flex; flex-wrap:wrap; gap:.35rem;
}
.card.animal-card .traits-mini .badge-trait{
  font-size:.75rem;
  padding:.25rem .5rem;
}

/* v3.20.2 single-card layout */
#cards.single {
  display: grid;
  grid-template-columns: minmax(260px, 420px);
  justify-content: center;
  margin-inline: auto;
  gap: 1.25rem;
}
#cards.single .card {
  margin: 0 auto;
}


/* v3.20.3: Hide pagination/count elements for single-listing state */
.pagination, #pagination, .pager, .results-count, .result-count, [data-role="pagination"], [data-component="count"] {
  display: none !important;
}


/* v3.20.4: tighten hero/card spacing on mobile */
@media (max-width: 576px){
  .hero{padding-top:1rem !important; padding-bottom:1rem !important;}
  .hero .p-4{padding:1rem !important;}
  .card-grid{gap:0.75rem !important;}
  .animal-card .card-body{padding:0.5rem 0.75rem 0.75rem !important;}
}

/* v3.21.2: standardized dynamic cards container */
.card-grid .cards { display: contents; } /* cards render as grid children */

/* v3.23.1 Featured Eric card on homepage */
.featured-wrapper { min-height: 40vh; display: flex; align-items: center; }
.ratio-4x3 { position: relative; padding-top: 75%; overflow: hidden; }
.ratio-4x3 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-card { max-width: 920px; border-radius: 1rem; }
@media (max-width: 576px){
  .featured-card .card-body{ padding: 0.9rem 1rem; }
}

/* v3.23.2: Super dark green for .btn-primary */
.btn-primary {
  background-color: #013220 !important;
  border-color: #013220 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #011d12 !important;
  border-color: #011d12 !important;
  color: #fff !important;
}

/* v3.25.1 print tweaks */
@media print {
  nav, .navbar, footer, .btn, .badge, .alert { display: none !important; }
  .card, .container { box-shadow: none !important; border: none !important; }
  body { color: #000; }
}

/* thumbs UX */
#ad-gallery img.ad-thumb { cursor: pointer; outline: none; }
#ad-gallery img.ad-thumb.thumb-active { box-shadow: 0 0 0 2px rgba(0,0,0,.2); }
#ad-img-main[hidden] { display: none !important; }