/* Care traits migration — scoped to existing 4173 homepage */
.care-traits{
  margin-top:38px;
}
.care-trait-row{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:24px;
  align-items:stretch;
  margin-top:22px;
}
.care-trait-row:first-child{margin-top:0}
.care-trait-row.reverse{grid-template-columns:.92fr 1.08fr}
.care-trait-photo{
  margin:0;
  border-radius:20px;
  overflow:hidden;
  background:#ddd;
  box-shadow:0 8px 24px rgba(56,50,43,.07);
}
.care-trait-photo img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
}
.care-trait-photo.walk img{object-position:56% 52%}
.care-trait-photo.cat img{object-position:50% 50%}
.care-trait-card{
  padding:32px;
  border:1px solid #c3d1c0;
  border-radius:18px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.care-trait-card h3{
  margin:0 0 10px;
  font-size:26px;
  line-height:1.4;
  color:#17324a;
}
.care-trait-card>p{
  margin:0 0 17px;
  color:#536670;
}
.care-trait-list{
  list-style:none;
  margin:0;
  padding:0;
}
.care-trait-list li{
  padding:10px 0;
  border-top:1px solid #e3e8e0;
  font-size:15px;
  font-weight:700;
  color:#314b43;
}
.care-trait-list li:first-child{border-top:0}
.care-trait-list li:before{
  content:'✓';
  margin-right:8px;
  color:#617b64;
  font-weight:900;
}
.care-trait-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}
.care-trait-mini article{
  padding:18px;
  border:1px solid #c3d1c0;
  border-radius:14px;
  background:#fff;
}
.care-trait-mini b{
  display:block;
  margin-bottom:4px;
  color:#314b43;
}
.care-trait-mini p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#63716c;
}
.care-traits-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
.care-checklist-button{
  border:0;
  background:none;
  padding:8px 0;
  color:#365c74;
  font-weight:800;
  cursor:pointer;
}

/* Checklist drawer */
.care-checklist-root{
  position:fixed;
  inset:0;
  z-index:140;
}
.care-checklist-root[hidden]{display:none}
.care-checklist-backdrop{
  position:absolute;
  inset:0;
  background:rgba(23,40,64,.30);
}
.care-checklist-drawer{
  position:absolute;
  right:0;
  top:0;
  width:min(720px,94vw);
  height:100%;
  padding:62px 30px 38px;
  overflow:auto;
  background:#fffdf9;
  box-shadow:-14px 0 40px rgba(23,40,64,.16);
}
.care-checklist-close{
  position:absolute;
  right:15px;
  top:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#f1eee8;
  color:#52616a;
  font-size:23px;
  cursor:pointer;
}
.care-checklist-species{
  display:flex;
  gap:7px;
  margin-bottom:24px;
}
.care-checklist-species button{
  min-height:42px;
  padding:0 18px;
  border:1px solid #d7d0c7;
  border-radius:999px;
  background:#fff;
  color:#657279;
  font-weight:800;
  cursor:pointer;
}
.care-checklist-species button.active{
  background:#172840;
  color:#fff;
  border-color:#172840;
}
.care-checklist-layout{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.care-checklist-nav{
  display:grid;
  gap:4px;
}
.care-checklist-nav button{
  min-height:46px;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#6c777d;
  text-align:left;
  font-size:12.5px;
  font-weight:760;
  cursor:pointer;
}
.care-checklist-nav button.active{
  background:#eef3ed;
  color:#2f5f46;
}
.care-checklist-panel{
  min-height:390px;
  padding:24px 26px 30px;
  border:1px solid #ded6cb;
  border-radius:18px;
  background:#fff;
}
.care-checklist-panel .panel-kicker{
  display:block;
  font-size:9px;
  letter-spacing:.12em;
  font-weight:900;
  color:#9a735b;
}
.care-checklist-panel h3{
  margin:8px 0 16px;
  font-size:25px;
  color:#17324a;
}
.care-checklist-panel ul{
  margin:0;
  padding:0;
  list-style:none;
}
.care-checklist-panel li{
  padding:12px 0;
  border-bottom:1px solid #eee8e0;
  font-size:14px;
  line-height:1.6;
  color:#53646e;
}
.care-checklist-panel li:last-child{border-bottom:0}

@media(max-width:900px){
  .care-trait-row,
  .care-trait-row.reverse{
    grid-template-columns:1fr;
  }
  .care-trait-row.reverse .care-trait-card{order:2}
  .care-trait-row.reverse .care-trait-photo{order:1}
  .care-trait-mini{grid-template-columns:1fr}
}
@media(max-width:640px){
  .care-traits{margin-top:28px}
  .care-trait-row{gap:16px;margin-top:34px}
  .care-trait-photo img{
    min-height:250px;
    aspect-ratio:16/10;
  }
  .care-trait-card{
    padding:23px 21px;
  }
  .care-trait-card h3{font-size:22px}
  .care-trait-card>p{font-size:14px;line-height:1.7}
  .care-trait-list li{font-size:14px;line-height:1.55}
  .care-trait-mini{
    display:flex;
    overflow-x:auto;
    gap:10px;
    scrollbar-width:none;
  }
  .care-trait-mini::-webkit-scrollbar{display:none}
  .care-trait-mini article{
    flex:0 0 82%;
  }
  .care-checklist-drawer{
    top:auto;
    bottom:0;
    width:100%;
    height:min(88vh,820px);
    border-radius:24px 24px 0 0;
    padding:58px 18px 26px;
  }
  .care-checklist-layout{
    grid-template-columns:1fr;
    gap:14px;
  }
  .care-checklist-nav{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding-bottom:5px;
    scrollbar-width:none;
  }
  .care-checklist-nav::-webkit-scrollbar{display:none}
  .care-checklist-nav button{
    flex:0 0 auto;
    min-height:40px;
    padding:9px 12px;
    border:1px solid #e1dad1;
    border-radius:999px;
    background:#fff;
  }
  .care-checklist-nav button.active{
    background:#eef3ed;
    border-color:#cbd9cd;
  }
  .care-checklist-panel{
    min-height:0;
    padding:20px 18px 24px;
  }
  .care-checklist-panel h3{font-size:22px}
}