/* =========================================================
   Vet House — page.css
   Каркас внутренней страницы: хлебные крошки, заголовок, область контента.
   ========================================================= */
.page{padding:28px 0 0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs a:hover{color:var(--teal)}
.crumbs .i{font-size:9px;opacity:.6}
.crumbs [aria-current]{color:var(--ink-2)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.page-head h1{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.025em}
.page-head p{color:var(--muted);margin-top:8px;font-size:16px}
.page-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}
.page-slot{border-radius:22px;border:1.5px dashed #C9D5D3;background:repeating-linear-gradient(135deg, rgba(30,110,107,.035) 0 10px, transparent 10px 20px);min-height:420px;display:flex;align-items:center;justify-content:center;color:#8A9896;font-size:14px;text-align:center;padding:24px}
.page-slot--side{min-height:420px}
@media (max-width:1023px){
  .page{padding-top:16px}
  .page-head h1{font-size:28px}
  .page-layout{grid-template-columns:1fr}
  .page-slot--side{min-height:120px}
}
.page-gap{height:80px}
@media (max-width:1023px){ .page-gap{height:52px} }

/* ---------- корень каталога: карточки разделов ---------- */
.sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.section-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 160px;grid-template-rows:auto 1fr auto auto;column-gap:24px;padding:28px;border-radius:24px;background:var(--mist);min-height:300px}
.section-card--big{grid-column:1/-1;background:var(--teal-tint);grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px}
.sc-head{grid-column:1/2;display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.section-card--big .sc-head{grid-column:1/3}
.sc-ic{width:44px;height:44px;border-radius:14px;background:var(--paper);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.section-card--big .sc-ic{background:var(--teal);color:#fff}
.sc-head h2{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.section-card--big .sc-head h2{font-size:30px}
.sc-head h2 a:hover{color:var(--teal)}
.sc-n{font-size:14px;color:var(--muted)}
.sc-subs{grid-column:1/2;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.section-card--big .sc-subs{grid-column:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-content:start}
.sc-subs a{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(31,35,39,.08);font-size:15px;color:var(--ink-2)}
.sc-subs a:hover{color:var(--teal)}
.sc-subs a span{color:var(--muted);font-size:13px}
.sc-brands{grid-column:1/2;margin-top:14px;font-size:13px;color:var(--muted)}
.section-card--big .sc-brands{grid-column:1/3}
.sc-all{grid-column:1/2;margin-top:14px;font-size:14px}
.sc-ph{grid-column:2/3;grid-row:1/5;align-self:stretch;border-radius:18px;min-height:180px}
.section-card--big .sc-ph{grid-column:3/4}
@media (max-width:1199px){
  .section-card--big{grid-template-columns:minmax(0,1fr) 220px}
  .section-card--big .sc-head,.section-card--big .sc-subs,.section-card--big .sc-brands{grid-column:1/2}
  .section-card--big .sc-ph{grid-column:2/3}
  .section-card--big .sc-subs{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .page-head .btn{height:44px;font-size:14px;padding:0 16px}
  .sections{grid-template-columns:1fr;gap:10px}
  .section-card,.section-card--big{grid-template-columns:minmax(0,1fr) 72px;padding:18px;border-radius:20px;min-height:0}
  .section-card--big .sc-head h2,.sc-head h2{font-size:19px}
  .sc-head{grid-column:1/2;margin-bottom:10px}
  .sc-ic{width:38px;height:38px;border-radius:12px}
  .sc-subs,.section-card--big .sc-subs,.sc-brands,.sc-all,.section-card--big .sc-brands{grid-column:1/-1}
  .sc-subs a{font-size:14.5px}
  .sc-ph,.section-card--big .sc-ph{display:none}
  .section-card,.section-card--big{grid-template-columns:minmax(0,1fr)}
  .sc-head > div{min-width:0}
  .sc-head h2{overflow-wrap:anywhere}
}

/* =========================================================
   Текстовые и служебные страницы: документ с оглавлением, вопросы-ответы,
   заметка, статьи, производитель, 404, подбор по весу.
   ========================================================= */
.lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.note{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;background:var(--mist);color:var(--ink-2);font-size:14.5px;line-height:1.5}
.note .i{margin-top:3px;color:var(--teal)}
.note--warn{background:var(--coral-tint);color:var(--coral-ink)}
.note--warn .i{color:var(--coral-ink)}
.block{margin-top:56px}
.block > h2{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:20px}
.block > p.sub{color:var(--muted);margin:-12px 0 20px;max-width:62ch}

/* документ с оглавлением */
.doc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;padding:18px;border-radius:20px;background:var(--mist);font-size:14px}
.toc b{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:8px}
.toc a{padding:7px 10px;border-radius:10px;color:var(--ink-2);line-height:1.35}
.toc a:hover{background:var(--paper);color:var(--teal)}
.prose{max-width:72ch;font-size:16px;line-height:1.65;color:var(--ink-2)}
.prose > * + *{margin-top:14px}
.prose h2{font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-top:40px;scroll-margin-top:110px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;font-weight:600;color:var(--ink);margin-top:24px}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:6px}
.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--teal);text-decoration:underline}
.prose .note{margin-top:20px}
.doc-meta{font-size:14px;color:var(--muted);margin-top:32px}

/* вопросы и ответы */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:17px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--muted);transition:transform .2s var(--ease)}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq details > div{padding:0 0 18px;color:var(--ink-2);line-height:1.6;max-width:72ch}
.faq details > div a{color:var(--teal);text-decoration:underline}

/* статьи */
.post--big{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;margin-bottom:40px}
.post--big .ph{aspect-ratio:16/10}
.post--big h3{font-size:30px;line-height:1.15;letter-spacing:-.02em}
.post--big p{font-size:16.5px}
.article{max-width:760px;margin:0 auto}
.article-tag{font-size:14px;color:var(--teal);font-weight:600}
.article h1{font-size:44px;line-height:1.08;font-weight:700;letter-spacing:-.03em;margin-top:10px}
.article .lead{margin-top:16px}
.article-cover{aspect-ratio:16/9;border-radius:28px;margin:32px 0}
.article-toc{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;background:var(--mist);margin-bottom:32px;font-size:15px}
.article-toc b{font-size:13px;color:var(--muted);font-weight:500}
.article-toc a{color:var(--ink-2)}
.article-toc a:hover{color:var(--teal)}

/* производитель */
.brand-hero{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:center;margin-bottom:36px}
.brand-logo{position:relative;height:120px;border-radius:24px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:transparent;background:linear-gradient(160deg, #F6F9F8 0%, var(--mist) 100%)}
.brand-logo::before{content:"";position:absolute;left:-30px;top:-34px;width:96px;height:96px;border-radius:50%;background:var(--coral-tint);opacity:.7}
.brand-logo::after{content:"";position:absolute;right:-34px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:var(--teal-tint);opacity:.75}
.brand-mono--xl{width:72px;height:72px;border-radius:22px;font-size:24px}
.brand-hero h1{font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.025em}
.brand-hero .lead{margin-top:10px}

/* 404 */
.err{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:48px 0 16px}
.err-code{font-size:160px;line-height:.9;font-weight:700;letter-spacing:-.06em;color:var(--teal-tint);-webkit-text-stroke:2px var(--teal)}
.err h1{font-size:36px;font-weight:700;letter-spacing:-.02em}
.err p{color:var(--ink-2);max-width:52ch;font-size:17px;line-height:1.55}
.err-search{display:flex;width:min(560px,100%);height:52px;border:1.5px solid var(--teal);border-radius:var(--r-pill);padding:5px 5px 5px 18px;align-items:center;gap:10px;margin-top:8px;background:var(--paper)}
.err-search:focus-within{box-shadow:0 0 0 4px rgba(30,110,107,.16)}
.err-search input{flex:1;min-width:0;border:0;outline:0;font-size:16px;background:transparent}
.err-search .i{color:var(--teal)}
.err-search button{height:40px;padding:0 20px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-weight:600;font-size:14px}

/* подбор по весу: страница */
.dose-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
.dose-side{display:flex;flex-direction:column;gap:16px}
.dose-side .panel{padding:24px;border-radius:24px;background:var(--mist)}
.dose-side h2{font-size:20px;font-weight:700;margin-bottom:14px}
.tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-2);line-height:1.5}
.tips li{display:flex;gap:10px}
.tips .i{color:var(--teal);margin-top:4px}
.steps{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:18px}
.steps li{counter-increment:st;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;row-gap:2px}
.steps li::before{content:counter(st);grid-row:1/3;width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--teal);font-weight:700;display:flex;align-items:center;justify-content:center}
.steps b{font-size:16px}
.steps span{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.steps--big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps--big li{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:24px;background:var(--mist)}
.steps--big li::before{margin-bottom:6px;background:var(--teal);color:#fff;width:40px;height:40px;font-size:16px}
.steps--big b{font-size:18px}
.steps--big a{color:var(--teal);font-weight:600;font-size:14.5px;margin-top:auto}

@media (max-width:1199px){
  .doc{grid-template-columns:220px minmax(0,1fr);gap:32px}
  .steps--big{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dose-page{grid-template-columns:1fr}
}
@media (max-width:1023px){
  .lead{font-size:16px}
  .block{margin-top:40px}
  .block > h2{font-size:22px}
  .doc{grid-template-columns:1fr;gap:20px}
  .toc{position:static;padding:14px}
  .prose{font-size:15.5px}
  .prose h2{font-size:20px;margin-top:32px}
  .faq summary{font-size:15.5px;padding:15px 0}
  .post--big{grid-template-columns:1fr;gap:16px;margin-bottom:24px}
  .post--big h3{font-size:22px}
  .article h1{font-size:30px}
  .article-cover{border-radius:20px;margin:22px 0}
  .brand-hero{grid-template-columns:1fr;gap:16px}
  .brand-logo{height:96px;max-width:240px}
  .brand-mono--xl{width:60px;height:60px;border-radius:18px;font-size:20px}
  .brand-hero h1{font-size:30px}
  .err-code{font-size:110px}
  .err h1{font-size:26px}
  .err p{font-size:15.5px}
  .steps--big{grid-template-columns:1fr;gap:10px}
  .steps--big li{padding:18px;border-radius:20px}
}
@media (max-width:1023px){
  .posts.posts--grid{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0;gap:24px}
  .posts--grid .post{flex:none}
}

/* ---------- отзывы с Яндекс Карт ---------- */
.yrev{border-radius:24px;overflow:hidden;background:var(--mist)}
.yrev iframe{display:block;width:100%;border:0}
.yrev-frame{position:relative;background:var(--paper)}
.yrev-src{position:absolute;left:0;right:0;bottom:8px;padding:0 16px;text-align:center;font-size:10px;line-height:14px;color:#b3b3b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yrev--split{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:40px;align-items:start;background:none;border-radius:0;overflow:visible}
.yrev--split .yrev-frame{border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.yrev-aside{position:sticky;top:120px;padding:32px;border-radius:24px;background:var(--mist)}
.yrev-badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--paper);font-size:13px;font-weight:600;color:var(--ink-2)}
.yrev-badge .i{color:#FFB800}
.yrev-aside h2{margin:16px 0 10px;font-size:26px;line-height:1.2;letter-spacing:-.02em}
.yrev-aside p{color:var(--ink-2);line-height:1.6}
.yrev-list{list-style:none;margin:18px 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.yrev-list li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.yrev-list .i{color:var(--teal)}
.yrev-actions{display:flex;flex-wrap:wrap;gap:10px}
.yrev-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:48px 24px;min-height:320px;background:repeating-linear-gradient(135deg, rgba(30,110,107,.04) 0 10px, transparent 10px 20px), var(--mist);color:var(--ink-2)}
.yrev-ph .i{font-size:30px;color:var(--teal)}
.yrev-ph b{font-size:18px;color:var(--ink)}
.yrev-ph p{max-width:52ch;font-size:14.5px;color:var(--muted);line-height:1.55}
.yrev-ph code{background:var(--paper);padding:2px 6px;border-radius:6px;font-size:13px}
.yrev--page .yrev-ph{min-height:480px}

/* ---------- акции ---------- */
.promos{display:flex;flex-direction:column;gap:56px}
.promo{scroll-margin-top:100px}
.promo-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;margin-bottom:24px}
.promo-ph{aspect-ratio:16/8;border-radius:24px}
.promo-info{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.promo-info .bdg{height:28px;font-size:13px;padding:0 12px}
.promo-info h2{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.promo-info p{color:var(--ink-2);font-size:16px;line-height:1.55}
.promo-period{display:flex;align-items:center;gap:8px;color:var(--muted) !important;font-size:14.5px !important}
.promo-info .btn{margin-top:6px}
@media (max-width:1023px){
  .yrev{border-radius:20px}
  .yrev--split{grid-template-columns:1fr;gap:20px}
  .yrev--split .yrev-frame{border-radius:20px}
  .yrev-aside{position:static;padding:24px;order:-1}
  .promos{gap:40px}
  .promo-head{grid-template-columns:1fr;gap:16px}
  .promo-ph{border-radius:20px}
  .promo-info h2{font-size:22px}
}