:root {
  --ink:#263c2e;
  --leaf:#396547;
  --paper:#f7f6f1;
  --muted:#727c70;
  --line:#dedfd6;
  --gold:#b58d58
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:'DM Sans',Arial,sans-serif
}
a {
  color:inherit
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer
}
img,video {
  display:block;
  max-width:100%;
  object-fit:cover
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.skip {
  position:fixed;
  top:-100px;
  left:1rem;
  background:white;
  padding:1rem;
  z-index:100
}
.skip:focus {
  top:1rem
}
.shop-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1.4rem 6vw;
  background:rgba(23,42,31,.8);
  color:white;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(14px)
}
.wordmark {
  font:600 1.55rem 'Playfair Display',serif;
  text-decoration:none
}
.wordmark span {
  display:block;
  font:500 .6rem 'DM Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-top:.35rem
}
.shop-header nav {
  display:flex;
  gap:1.8rem;
  font-size:.78rem;
  align-items:center
}
.shop-header nav a {
  text-decoration:none
}
.shop-header nav a[aria-current] {
  color:#e3c395
}
.shop-header .contact-link {
  border:1px solid #ffffff55;
  padding:.65rem 1rem;
  border-radius:99px
}
.shop-main {
  max-width:1500px;
  padding:3.4rem 6vw 5rem;
  margin:auto
}
.eyebrow {
  color:var(--gold);
  font-size:.65rem;
  letter-spacing:.19em;
  font-weight:700;
  text-transform:uppercase;
  margin:0 0 1rem
}
h1,h2,h3 {
  font-family:'Playfair Display',serif;
  font-weight:500;
  margin-top:0
}
h1 {
  font-size:clamp(2.7rem,4.2vw,4.4rem);
  line-height:1.05;
  letter-spacing:-.04em;
  margin-bottom:1rem
}
h2 {
  font-size:2.2rem;
  line-height:1.15;
  letter-spacing:-.025em
}
p {
  line-height:1.75
}
.catalog-intro {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:3rem;
  margin-bottom:2rem
}
.catalog-intro>div>p:last-child {
  max-width:600px;
  font-size:.92rem;
  color:var(--muted);
  margin:0
}
.catalog-intro__aside {
  max-width:250px;
  padding:1rem 0 1rem 1.5rem;
  border-left:1px solid var(--line);
  font-size:.75rem;
  line-height:1.7;
  color:var(--muted)
}
.catalog-intro__aside strong {
  display:block;
  color:var(--ink);
  font-weight:600
}
.catalog-tools {
  margin-bottom:1.8rem
}
.category-filters {
  display:flex;
  gap:.7rem;
  margin:1.8rem 0
}
.category-filters button {
  border:1px solid var(--line);
  border-radius:99px;
  padding:.7rem 1.2rem;
  background:white;
  color:var(--ink);
  font-size:.8rem
}
.category-filters button[aria-pressed=true] {
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}
.filter-row {
  display:flex;
  gap:1rem;
  align-items:end;
  padding:1.1rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.filter-row label {
  font-size:.7rem;
  font-weight:600;
  display:flex;
  flex-direction:column;
  gap:.5rem
}
.filter-row .search-field {
  flex:1
}
.filter-row input,.filter-row select {
  padding:.75rem .9rem;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--ink);
  background:white;
  font-size:.8rem;
  min-height:43px
}
.catalog-count {
  font-size:.7rem;
  color:var(--muted);
  margin:1rem 0 0
}
.animal-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.2rem
}
.animal-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  transition:box-shadow .25s,transform .25s
}
.animal-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 30px #233d2810
}
.animal-card__media {
  display:block;
  position:relative;
  aspect-ratio:1.06;
  overflow:hidden;
  background:#e5e9de
}
.animal-card__media img,.animal-card__media video {
  width:100%;
  height:100%;
  transition:transform .6s
}
.animal-card__media:hover img {
  transform:scale(1.045)
}
.animal-card__category {
  position:absolute;
  top:12px;
  left:12px;
  font-size:.62rem;
  background:#fffef4e6;
  color:var(--ink);
  padding:.4rem .7rem;
  border-radius:99px
}
.reference-badge {
  position:absolute;
  bottom:10px;
  left:10px;
  color:white;
  background:#18291dbd;
  border-radius:3px;
  font-size:.6rem;
  padding:.35rem .6rem
}
.animal-card__body {
  padding:1.2rem
}
.animal-card__code {
  font-size:.56rem;
  color:var(--muted);
  letter-spacing:.03em
}
.animal-card h2 {
  font-size:1.45rem;
  margin:.65rem 0 1rem
}
.animal-card h2 a {
  text-decoration:none
}
.animal-card dl {
  margin:0;
  font-size:.7rem
}
.animal-card dl>div {
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  padding:.35rem 0
}
.animal-card dt {
  color:var(--muted)
}
dd {
  margin:0
}
.animal-card__bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  border-top:1px solid var(--line);
  padding-top:1rem;
  margin-top:1rem;
  font-size:.65rem
}
.animal-card__bottom strong {
  font-weight:600
}
.detail-link {
  text-underline-offset:3px;
  font-size:.65rem
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  padding:.9rem 1.1rem;
  border-radius:4px;
  text-decoration:none;
  font-size:.78rem;
  font-weight:600;
  border:0
}
.button--green {
  background:var(--leaf);
  color:white
}
.button--green:hover {
  background:#284d34
}
.animal-card .button {
  width:100%;
  margin-top:1.1rem
}
.catalog-empty,.not-found {
  text-align:center;
  padding:4rem 1rem
}
.catalog-empty button {
  background:var(--leaf);
  color:white;
  border:0;
  padding:.8rem 1.2rem;
  border-radius:4px
}
.catalog-note {
  font-size:.75rem;
  color:var(--muted);
  border-left:2px solid var(--gold);
  padding-left:1rem;
  margin:2rem 0
}
.how-it-works {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  border-top:1px solid var(--line);
  margin-top:4rem;
  padding-top:2.5rem
}
.how-it-works span {
  font-size:.65rem;
  color:var(--gold)
}
.how-it-works h2 {
  font-size:1.5rem;
  margin:.6rem 0
}
.how-it-works p {
  font-size:.8rem;
  color:var(--muted);
  margin:0
}
.shop-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  padding:2rem 6vw 6rem;
  border-top:1px solid var(--line);
  font-size:.75rem
}
.shop-footer p {
  margin:.6rem 0 0;
  color:var(--muted);
  font-size:.72rem
}
.shop-footer a {
  text-decoration:none
}
.breadcrumb {
  display:flex;
  gap:.7rem;
  align-items:center;
  font-size:.72rem;
  color:var(--muted);
  margin:0 0 2rem;
  flex-wrap:wrap
}
.product-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:start
}
.media-stage {
  aspect-ratio:1;
  background:#e7eade;
  border-radius:8px;
  overflow:hidden
}
.media-stage>video {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#17271c
}
.enlarge-photo {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in
}
.enlarge-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.enlarge-photo>span {
  position:absolute;
  bottom:1rem;
  right:1rem;
  border-radius:99px;
  background:#fffdf2dd;
  padding:.6rem .9rem;
  font-size:.7rem
}
.media-thumbnails {
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin:1rem 0
}
.media-thumbnails button {
  width:65px;
  height:65px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:4px;
  background:white
}
.media-thumbnails button[aria-pressed=true] {
  border:2px solid var(--leaf)
}
.media-thumbnails img {
  width:100%;
  height:100%
}
.media-caption,.reference-note {
  font-size:.7rem;
  color:var(--muted);
  margin:.5rem 0
}
.reference-note {
  padding:.7rem 1rem;
  border-left:2px solid var(--gold);
  background:#efeee4
}
.product-summary h1 {
  font-size:clamp(2.5rem,4vw,4rem)
}
.status-badge {
  display:inline-block;
  border-radius:99px;
  background:#e7eddf;
  padding:.5rem .8rem;
  font-size:.65rem;
  color:var(--leaf)
}
.product-description {
  font-size:.92rem;
  color:#63715f;
  margin:1.5rem 0
}
.specs {
  margin:1.5rem 0;
  border-top:1px solid var(--line)
}
.specs>div {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
  font-size:.78rem
}
.specs dt {
  color:var(--muted)
}
.specs dd {
  font-weight:500
}
.product-price {
  font:500 1.6rem 'Playfair Display',serif;
  margin:1.5rem 0
}
.product-cta {
  width:100%;
  font-size:.9rem;
  padding:1.1rem
}
.cta-note,.individual-note {
  font-size:.7rem;
  color:var(--muted);
  line-height:1.7
}
.individual-note {
  border-top:1px solid var(--line);
  padding-top:1rem
}
.product-extra {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:4rem;
  margin:4rem 0
}
.product-extra h2 {
  font-size:2rem
}
.product-extra p {
  font-size:.85rem;
  color:var(--muted)
}
.media-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem
}
.media-list button {
  padding:0;
  border:0;
  background:#e5e9de;
  aspect-ratio:1;
  position:relative;
  border-radius:4px;
  overflow:hidden
}
.media-list img,.media-list video {
  width:100%;
  height:100%
}
.video-badge {
  position:absolute;
  bottom:1rem;
  right:1rem;
  color:white;
  background:#203627b3;
  padding:.4rem .6rem;
  font-size:.65rem;
  border-radius:3px
}
.video-pending {
  display:flex;
  gap:1rem;
  align-items:center;
  border:1px dashed #bfc8b8;
  border-radius:5px;
  padding:1rem;
  margin-top:1rem
}
.video-pending>span {
  font-size:2rem;
  color:var(--leaf)
}
.video-pending strong {
  font-size:.8rem
}
.video-pending p {
  margin:.3rem 0;
  font-size:.7rem
}
.video-pending a {
  margin-left:auto;
  font-size:.7rem;
  white-space:nowrap
}
.care-card {
  background:#e8eddf;
  padding:2rem;
  border-radius:6px
}
.care-card .care-source {
  font-size:.7rem;
  margin-top:1.5rem
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  margin:3rem 0 1.5rem
}
.section-heading h2 {
  margin:0
}
.section-heading>a {
  font-size:.75rem
}
.related .animal-grid {
  grid-template-columns:repeat(3,1fr)
}
.media-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
  color:var(--muted)
}
.photo-dialog {
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:70px 5vw;
  border:0;
  background:#000e;
  color:white
}
.photo-dialog::backdrop {
  background:#000d
}
.photo-dialog[open] {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1rem
}
.photo-dialog img {
  width:100%;
  height:calc(100dvh - 180px);
  object-fit:contain
}
.photo-dialog p {
  font-size:.75rem;
  text-align:center;
  margin:0
}
.photo-dialog>button {
  position:absolute;
  top:20px;
  right:24px;
  width:45px;
  height:45px;
  border:1px solid #fff7;
  border-radius:50%;
  background:#ffffff15;
  color:white;
  font-size:25px
}
@media(max-width:1100px) {
  .animal-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .product-layout {
    gap:2rem
  }
  .product-extra {
    gap:2rem
  }
}
@media(max-width:800px) {
  .shop-header {
    padding:1rem 5vw;
    gap:1rem
  }
  .shop-header nav {
    gap:.9rem;
    font-size:.65rem
  }
  .wordmark {
    font-size:1.3rem
  }
  .shop-header .contact-link {
    display:none
  }
  .shop-main {
    padding:2.5rem 5vw 4rem
  }
  .catalog-intro {
    display:block
  }
  .catalog-intro__aside {
    display:none
  }
  .animal-grid,.related .animal-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem
  }
  .filter-row {
    flex-wrap:wrap
  }
  .filter-row .search-field {
    flex-basis:100%
  }
  .filter-row label {
    flex:1;
    min-width:0
  }
  .filter-row select {
    width:100%
  }
  .product-layout,.product-extra {
    grid-template-columns:1fr;
    gap:2rem
  }
  .product-layout .product-media {
    max-width:600px;
    width:100%;
    margin:auto
  }
  .how-it-works {
    gap:1rem
  }
  .shop-footer {
    align-items:start;
    flex-direction:column
  }
  .video-pending {
    flex-wrap:wrap
  }
  .video-pending a {
    margin-left:0
  }
  .product-extra {
    margin-top:3rem
  }
}
@media(max-width:480px) {
  .animal-grid,.related .animal-grid {
    grid-template-columns:1fr
  }
  .animal-card__media {
    aspect-ratio:1.25
  }
  .how-it-works {
    grid-template-columns:1fr;
    gap:1.5rem
  }
  .category-filters {
    gap:.4rem
  }
  .category-filters button {
    padding:.65rem .9rem;
    font-size:.72rem
  }
  .shop-header nav {
    gap:.7rem
  }
  .shop-header .wordmark span {
    font-size:.52rem
  }
  .product-extra h2 {
    font-size:1.8rem
  }
  .care-card {
    padding:1.5rem
  }
  .specs>div {
    grid-template-columns:1fr 1.2fr
  }
  .media-list {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}
/* Keep the catalog grid visible as the first screen's main content. */.shop-main {
  padding-top:2rem
}
.catalog-intro {
  margin-bottom:1.3rem
}
.catalog-intro h1 {
  font-size:clamp(2.2rem,3.1vw,3.4rem)
}
.catalog-intro .eyebrow {
  margin-bottom:.7rem
}
.catalog-intro__aside {
  font-size:.7rem
}
.category-filters {
  margin:1.3rem 0
}
.filter-row {
  padding:.8rem 0
}