/* Макет каталога и карточки собак. Палитра и шрифты - с живой главной dogsfromshelter.ru */
:root{
  --amber:#E59D02;
  --amber-deep:#B87C02;
  --choco:#2E271C;
  --choco-2:#3B3225;
  --cream:#F8F5EE;
  --sand:#EFE8D9;
  --text-d:#2A241B;
  --muted-d:#6B6252;
  --text-l:#F7F3EA;
  --muted-l:#C6BCA7;
  --ok:#4E7D32;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--text-d);
  font-family:Manrope,-apple-system,Segoe UI,Roboto,sans-serif;font-size:17px;line-height:1.6}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:Montserrat,Arial Black,sans-serif;text-transform:uppercase;
  font-weight:800;letter-spacing:-.2px;margin:0;line-height:1.05}
a{color:var(--amber-deep)}
.rule{height:4px;width:150px;border-radius:4px;
  background:linear-gradient(90deg,var(--amber),rgba(229,157,2,0))}

/* пометка макета */
.mock{background:var(--amber);color:var(--choco);font-size:13px;font-weight:600;
  text-align:center;padding:6px 12px}

/* шапка */
.top{background:var(--choco);color:var(--text-l)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:60px}
.logo{font-family:Montserrat,sans-serif;font-weight:800;text-transform:lowercase;
  color:#fff;text-decoration:none;font-size:18px;letter-spacing:.02em}
.logo b{color:var(--amber)}
.nav{display:flex;gap:18px;margin-left:auto;font-weight:600;font-size:15px}
.nav a{color:var(--muted-l);text-decoration:none;white-space:nowrap}
.logo{white-space:nowrap}
.nav a.on,.nav a:hover{color:#fff}
/* телефон: логотип сверху, под ним три вкладки на всю ширину - влезает при любом размере шрифта */
@media(max-width:640px){
  .top .wrap{flex-wrap:wrap;gap:0;min-height:0;padding-top:12px}
  .logo{width:100%;text-align:center;font-size:17px}
  .nav{width:100%;margin:8px 0 0;gap:0;font-size:15px}
  .nav a{flex:1 1 0;text-align:center;padding:9px 4px 11px;border-bottom:3px solid transparent}
  .nav a.on{border-bottom-color:var(--amber)}
}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--amber);color:var(--choco);text-decoration:none;border:0;cursor:pointer;
  border-radius:14px;padding:15px 26px;font-family:Montserrat,sans-serif;font-weight:800;
  text-transform:uppercase;font-size:15px;letter-spacing:.02em;transition:.15s}
.btn:hover{background:var(--amber-deep);color:#fff}
.btn.ghost{background:transparent;border:2px solid var(--choco);color:var(--choco)}
.btn.ghost:hover{background:var(--choco);color:#fff}

/* ─── каталог ─── */
.hero{position:relative;background:var(--choco);color:var(--text-l);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:var(--hero-img,none) 70% 35%/cover;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(46,39,28,.97) 0%,rgba(46,39,28,.85) 42%,rgba(46,39,28,.1) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:56px}
.hero h1{font-size:clamp(38px,7vw,64px);color:#fff}
.hero .sub{margin-top:14px;max-width:470px;color:var(--muted-l);font-size:17px}
.hero .sub b{color:var(--amber)}
.hero .rule{margin:20px 0 0}
@media(max-width:700px){
  .hero::after{background:linear-gradient(to top,rgba(46,39,28,.96) 0%,rgba(46,39,28,.7) 55%,rgba(46,39,28,.25) 100%)}
  .hero .wrap{padding-top:120px;padding-bottom:34px}
}

.catalog{padding:34px 0 60px}
.layout{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
@media(max-width:860px){.layout{grid-template-columns:1fr;gap:18px}}

/* фильтры */
.filters{position:sticky;top:16px;background:#fff;border-radius:18px;padding:20px 20px 10px;
  box-shadow:0 2px 14px rgba(46,39,28,.06)}
.filters .search{width:100%;border:1.5px solid var(--sand);border-radius:12px;
  padding:11px 14px;font:inherit;font-size:15px;background:var(--cream);margin-bottom:6px}
.filters .search:focus{outline:none;border-color:var(--amber)}
.fgroup{padding:14px 0;border-bottom:1px solid var(--sand)}
.fgroup:last-of-type{border-bottom:0}
.fgroup h4{margin:0 0 10px;font-family:Montserrat,sans-serif;font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--sand);background:var(--cream);border-radius:999px;
  padding:6px 13px;font:inherit;font-size:14px;font-weight:600;color:var(--text-d);cursor:pointer;
  transition:.12s}
.chip small{color:var(--muted-d);font-weight:600;margin-left:3px}
.chip:hover{border-color:var(--amber)}
.chip.on{background:var(--choco);border-color:var(--choco);color:#fff}
.chip.on small{color:var(--muted-l)}
.chip:disabled{opacity:.4;cursor:default}
.reset{background:none;border:0;color:var(--amber-deep);font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;padding:12px 0;text-decoration:underline;text-underline-offset:3px}
.ftoggle{display:none}
.fclose{display:none}
@media(max-width:860px){
  .ftoggle{display:flex;width:100%;justify-content:space-between;align-items:center;
    background:#fff;border:1.5px solid var(--sand);border-radius:14px;padding:13px 18px;
    font-family:Montserrat,sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;
    color:var(--choco);cursor:pointer}
  .ftoggle .n{background:var(--amber);border-radius:999px;padding:1px 9px;font-size:13px}
  .filters{display:none;position:fixed;inset:0;z-index:50;border-radius:0;overflow:auto;
    padding:22px 22px 110px}
  .filters.open{display:block}
  .fclose{display:flex;position:fixed;left:22px;right:22px;bottom:22px;z-index:51}
  .fhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .fhead h3{font-size:20px}
}
@media(min-width:861px){.fhead{display:none}}
.fx{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--choco)}

.count{font-weight:600;color:var(--muted-d);margin:0 0 16px;font-size:15px}
.count b{color:var(--text-d)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
@media(max-width:560px){.grid{grid-template-columns:1fr;gap:18px}}
.card{background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;box-shadow:0 2px 14px rgba(46,39,28,.06);
  transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(46,39,28,.13)}
.card .ph{aspect-ratio:4/3;background:var(--sand) center/cover}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:22px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:var(--cream);border-radius:8px;padding:3px 10px;font-size:13px;font-weight:600;
  color:var(--muted-d)}
.card .hook{font-size:15px;color:var(--muted-d);line-height:1.45;margin:0}
.card .more{margin-top:auto;padding-top:6px;font-family:Montserrat,sans-serif;font-weight:800;
  text-transform:uppercase;font-size:13px;color:var(--amber-deep)}
.empty{background:#fff;border-radius:18px;padding:34px;text-align:center;color:var(--muted-d)}

.notfound{margin-top:44px;background:var(--choco);color:var(--text-l);border-radius:22px;
  padding:34px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.notfound h3{font-size:22px;color:#fff}
.notfound p{margin:8px 0 0;color:var(--muted-l);max-width:520px}

/* ─── карточка собаки ─── */
.tocat{display:flex;align-items:center;gap:14px;margin:18px 0 18px;background:#fff;border-radius:16px;
  padding:10px 16px 10px 12px;text-decoration:none;color:var(--text-d);box-shadow:0 2px 14px rgba(46,39,28,.07);
  border:1.5px solid transparent;transition:.15s}
.tocat:hover{border-color:var(--amber)}
.tocat .ava{display:flex;flex:0 0 auto}
.tocat .ava i{width:38px;height:38px;border-radius:50%;background:var(--sand) center/cover;
  border:2px solid #fff;margin-left:-10px}
.tocat .ava i:first-child{margin-left:0}
.tocat .t{flex:1;font-family:Montserrat,sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;line-height:1.25}
.tocat .t small{display:block;font-family:Manrope,sans-serif;text-transform:none;font-weight:600;
  font-size:13px;color:var(--muted-d);margin-top:2px}
.tocat .go{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--amber);color:var(--choco);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.allbtn{display:flex;margin:22px auto 0;max-width:420px}
.dog{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:860px){.dog{grid-template-columns:1fr;gap:18px}.tocat{margin:12px 0 14px}.tocat{padding:8px 12px 8px 10px}.tocat .t small{display:none}.tocat .ava i{width:32px;height:32px}.tocat .go{width:32px;height:32px;font-size:16px}}
.main-ph{border-radius:22px;overflow:hidden;background:var(--sand);aspect-ratio:4/3;cursor:zoom-in}
.main-ph img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto}
.thumbs button{flex:0 0 76px;height:58px;border-radius:10px;border:2px solid transparent;
  padding:0;background:var(--sand) center/cover;cursor:pointer;opacity:.75}
.thumbs button.on{border-color:var(--amber);opacity:1}
@media(max-width:860px){
  .main-ph{border-radius:0;margin:0 -22px;aspect-ratio:1/1}
  .main-ph{aspect-ratio:5/4}
  .thumbs{display:none}
}
.info h1{font-size:clamp(40px,6vw,58px)}
.info .lead{margin:10px 0 0;color:var(--muted-d);font-size:17px}
.info .cta{display:flex;gap:10px;margin:22px 0 6px}
.info .cta .btn{flex:1 1 auto}
.info .cta .share{flex:0 1 auto;min-width:0;padding:13px 16px;position:relative;gap:8px;
  font-family:Manrope,sans-serif;text-transform:none;letter-spacing:0;font-size:15px;font-weight:700}
.share .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info .cta .meet-btn{padding-left:18px;padding-right:18px}
.share svg{width:22px;height:22px;flex:0 0 auto;display:block}
.share .ok,.share .ic{display:none}
.share.done .lnk{display:none}.share.done .ok{display:block}
.share-tip{position:absolute;right:0;bottom:calc(100% + 10px);background:var(--choco);color:#fff;
  font-family:Manrope,sans-serif;font-weight:600;font-size:14px;text-transform:none;letter-spacing:0;
  white-space:nowrap;padding:8px 12px;border-radius:10px;opacity:0;transform:translateY(4px);
  transition:.2s;pointer-events:none}
.share.done .share-tip{opacity:1;transform:none}
@media(min-width:641px) and (pointer:fine){.share-tip{display:none}}
/* телефон: квадратная кнопка-иконка той же высоты, что «Познакомиться» */
/* телефон: квадратная кнопка с иконкой «поделиться», той же высоты, что «Познакомиться» */
@media(max-width:640px),(pointer:coarse){.info .cta .share{padding:0;width:56px}.share .lbl,.share .lnk{display:none}.share .ic{display:block}
  .share.done .ic{display:none}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.fact{background:#fff;border-radius:14px;padding:12px 16px}
.fact .k{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-d);font-family:Montserrat,sans-serif}
.fact .v{font-weight:600;font-size:16px;margin-top:2px}
.fact.wide{grid-column:1/-1}
.fact .v.unk{color:var(--muted-d);font-weight:600;font-style:italic}
.health{display:flex;flex-direction:column;gap:6px;margin-top:10px;background:#fff;
  border-radius:14px;padding:14px 16px}
.health .k{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-d);font-family:Montserrat,sans-serif;margin-bottom:2px}
.health div{font-weight:600;font-size:16px}
.health .y::before{content:"✓";color:var(--ok);font-weight:800;margin-right:9px}
.health .n::before{content:"·";color:var(--muted-d);font-weight:800;margin-right:9px}
@media(max-width:560px){.facts{grid-template-columns:1fr 1fr}}

.about{margin-top:46px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}
@media(max-width:860px){.about{grid-template-columns:1fr;margin-top:30px;gap:24px}}
.about h2{font-size:26px;margin-bottom:14px}
.about .text p{margin:0 0 14px;font-size:18px;line-height:1.7}
.meet{background:var(--sand);border-radius:22px;padding:26px;align-self:start}
.meet h3{font-size:18px;margin-bottom:14px}
.meet ol{margin:0;padding-left:22px}
.meet li{margin-bottom:8px}
.meet .btn{width:100%;margin-top:14px}

.gallery{margin-top:46px}
.gallery h2{font-size:26px;margin-bottom:16px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gal button{aspect-ratio:4/3;border:0;border-radius:14px;background:var(--sand) center/cover;
  cursor:zoom-in;padding:0}
@media(max-width:560px){.gal{grid-template-columns:1fr 1fr;gap:8px}}

.others{margin:56px 0 30px}
.others h2{font-size:26px;margin-bottom:16px}
.others .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(max-width:560px){.others .grid{grid-template-columns:1fr 1fr;gap:10px}
  .others .card .body{padding:10px 12px}.others .card h3{font-size:17px}
  .others .card .hook,.others .card .tags,.others .card .more{display:none}}

.helpband{margin:30px 0 0;background:var(--choco);color:var(--text-l);padding:40px 0}
.helpband .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.helpband h3{font-size:22px;color:#fff}
.helpband p{margin:8px 0 0;color:var(--muted-l);max-width:560px}

footer{background:var(--choco-2);color:var(--muted-l);font-size:14px;padding:22px 0}
footer a{color:var(--muted-l)}

/* окно просмотра фото и заглушка формы */
.lb{position:fixed;inset:0;background:rgba(20,16,10,.93);z-index:100;display:none;
  align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:88vh;border-radius:10px}
.lb .x,.lb .pv,.lb .nx{position:absolute;background:none;border:0;color:#fff;font-size:40px;
  cursor:pointer;padding:10px 16px}
.lb .x{top:10px;right:10px}.lb .pv{left:6px;top:50%}.lb .nx{right:6px;top:50%}
.modal{position:fixed;inset:0;background:rgba(20,16,10,.6);z-index:100;display:none;
  align-items:center;justify-content:center;padding:22px}
.modal.open{display:flex}
.modal .box{background:var(--cream);border-radius:22px;padding:28px;max-width:440px;width:100%}
.modal h3{font-size:22px;margin-bottom:10px}
.modal p{margin:0 0 16px;color:var(--muted-d)}
.modal .btn{width:100%}
.sticky-cta{display:none}
@media(max-width:860px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px;
    background:rgba(248,245,238,.96);backdrop-filter:blur(6px);box-shadow:0 -4px 18px rgba(46,39,28,.1);
    transform:translateY(110%);transition:transform .2s}
  .sticky-cta.show{transform:none}
  .sticky-cta .btn{width:100%}
}

/* ─── боевые добавки к макету ─── */
.card .ph{position:relative}
.badge{position:absolute;left:12px;top:12px;background:var(--choco);color:#fff;border-radius:8px;
  padding:4px 10px;font-family:Montserrat,sans-serif;font-weight:800;font-size:12px;text-transform:uppercase;
  letter-spacing:.04em}
.badge.home{background:var(--ok)}
.card.home .ph{filter:saturate(.85)}
.homeband{margin-top:46px}
.homeband h2{font-size:26px;margin-bottom:16px}
.status-note{margin-top:14px;background:#fff;border-left:4px solid var(--amber);border-radius:10px;
  padding:12px 16px;font-weight:600}
.status-note.home{border-color:var(--ok)}
.noph{display:flex;align-items:center;justify-content:center;color:var(--muted-d);font-weight:600}

/* форма «Познакомиться» */
.modal{align-items:flex-start;overflow:auto;padding:22px 14px}
.modal .box{position:relative;margin:auto}
.modal .msub{font-size:15px;margin:0 0 14px}
.fl{display:block;font-size:13px;font-weight:700;color:var(--muted-d);margin-bottom:10px}
.fl input,.fl textarea{display:block;width:100%;margin-top:4px;font:inherit;font-size:16px;font-weight:400;color:var(--text-d);
  border:1.5px solid var(--sand);border-radius:12px;padding:11px 13px;background:#fff}
.fl input:focus,.fl textarea:focus{outline:none;border-color:var(--amber)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted-d);line-height:1.4;margin:6px 0 12px}
.consent input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--amber);margin-top:1px}
.merr{color:#B3432B;font-weight:600;font-size:14px;min-height:0;margin-bottom:8px}
.merr:empty{display:none}
.mx{position:absolute;top:10px;right:12px;background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--muted-d)}

.mhead{display:flex;gap:14px;align-items:center;margin:0 30px 12px 0}
.mph{width:64px;height:64px;border-radius:50%;background:var(--sand) center/cover;flex:0 0 auto;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--amber)}
.mlabel{font-family:Montserrat,sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--amber-deep)}
.mhead h3{font-size:26px;margin:2px 0 0}
.fl .opt{font-weight:600;color:#9a917f}