/* КітКорм.com.ua — стилі за затвердженим дизайном */
:root{
  --bg:#F4F6F2; --ink:#14231D; --dark:#12392D; --green:#1E5A46; --accent:#F5A524; --accent-h:#E0900F;
  --good:#14703F; --line:#DDE3DC; --muted:#5A6B63; --mint:#E3EDE6; --mint2:#E3F3E8; --pale:#F2FAF5;
  --text2:#34463E; --bad:#B3261E; --warn:#8A5A00; --field:#BFD0C5; --chip:#CFDACF;
  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --head:'Unbounded',var(--font);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5}
a{color:var(--green)} a:hover{color:var(--dark)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.page{padding-top:24px;padding-bottom:72px}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:100;background:#fff;padding:8px 14px;border-radius:8px}
.muted{color:var(--muted)} .small{font-size:14px} .xs{font-size:12px} .strong{font-weight:600}
[hidden]{display:none!important}

/* заголовки */
.h1{margin:0 0 12px;font-family:var(--head);font-weight:700;font-size:36px;line-height:1.15;letter-spacing:-.01em}
.h1.xl{font-size:44px;max-width:820px;margin-bottom:20px}
.h1.sm{font-size:34px;line-height:1.2;margin-bottom:6px}
.h2{margin:0 0 8px;font-family:var(--head);font-weight:600;font-size:28px;letter-spacing:-.01em}
.h2.md{font-size:26px} .h2.sm{font-size:22px;margin-bottom:14px}
.eyebrow{margin:0 0 12px;font-weight:600;color:var(--green);font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.lead{margin:0 0 28px;font-size:18px;color:var(--text2);max-width:640px}
.lead-sm{margin:0 0 8px;max-width:760px;color:var(--text2)}
.sec-lead{margin:0 0 24px;max-width:680px}
.text{margin:0 0 14px;max-width:760px;color:var(--text2)}

/* кнопки */
.btn-cta,.btn-sec{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:12px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--ink)}
.btn-sec{background:#fff;border-color:var(--field);color:var(--dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-off{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:12px;background:#E4E8E3;color:var(--muted);font-weight:700}

/* ховеры (ссылки и кнопки должны реагировать на наведение) */
.hv-nav,.hv-brandmenu,.hv-tile,.hv-chip,.hv-size,.hv-cta,.hv-btn2,.hv-row,.hv-filter,.hv-link,.hv-flink,.hv-logo{transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s}
.hv-nav:hover{color:#fff!important;border-bottom-color:#8FB5A3!important}
.hv-brandmenu:hover{background:var(--mint2)!important;color:var(--dark)!important}
.hv-tile:hover{border-color:var(--green)!important;background:var(--pale)!important;box-shadow:0 4px 12px rgba(18,57,45,.12)}
.hv-chip:hover{background:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}
.hv-chip:hover .chip-sub{color:#fff!important}
.hv-size:hover{border-color:var(--green)!important;background:var(--mint2)!important}
.hv-cta:hover{background:var(--accent-h)!important;border-color:var(--accent-h)!important;color:var(--ink)!important}
.hv-btn2:hover{background:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}
.hv-row:hover{border-color:var(--green)!important;box-shadow:0 4px 14px rgba(18,57,45,.10)}
.hv-filter[aria-pressed="false"]:hover,.pager .hv-filter:not(.is-cur):hover{background:var(--mint)!important;border-color:var(--dark)!important}
.hv-link:hover{color:#B35C00!important}
.hv-flink:hover{color:var(--accent)!important;text-decoration:underline!important}
.hv-logo:hover{opacity:.85}

/* шапка */
.site-header{position:relative;background:var(--dark);color:var(--bg)}
.head-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;padding-top:16px;padding-bottom:4px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.logo:hover{color:#fff}
.logo-text{font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:-.01em;white-space:nowrap}
.logo-dom{color:var(--accent);font-weight:600;font-size:14px;letter-spacing:0}
.search{flex:1 1 360px;display:flex;gap:8px;min-width:0}
.search input{flex:1 1 auto;min-width:0;height:48px;border-radius:12px;border:0;padding:0 16px;font:inherit;color:var(--ink);background:#fff}
.search .btn-cta{height:48px;padding:0 24px}
.main-nav{display:flex;flex-wrap:wrap;gap:0 24px}
.nav-link{display:block;padding:14px 0 10px;color:#DCE8E0;text-decoration:none;font-weight:500;border-bottom:3px solid transparent}
.nav-link.is-active{border-bottom-color:var(--accent)}
.nav-link:hover{color:#fff}
.push-right{margin-left:auto}
.caret{font-size:11px}
.brands-menu{position:absolute;left:0;right:0;top:100%;z-index:50;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 18px 32px rgba(18,57,45,.18);padding:20px 0 24px}
.brands-menu p{margin:0 0 12px}
.brands-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 16px}
.hv-brandmenu{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:500}

/* хлебные крошки */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--muted);margin-bottom:24px}
.crumbs a{color:var(--green)} .crumb-cur{color:var(--ink);font-weight:500}

/* главная */
.hero{background:var(--mint)} .hero-in{padding-top:64px;padding-bottom:64px}
.sec{padding-top:48px;padding-bottom:24px} #brands.sec{padding-top:64px}
.sec.last{padding-bottom:72px}
.sec-tight{margin-top:48px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;font-weight:600}
.mono{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--mint2);color:var(--green);font-weight:700;font-size:14px}
.mono-img{object-fit:contain;background:#fff;border-radius:8px;width:56px;height:40px;background:transparent}
.tile-name{flex:1 1 auto;min-width:0}
.groups{display:flex;flex-direction:column;gap:16px}
.group{display:flex;flex-wrap:wrap;gap:16px 32px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px}
.group-head{flex:0 1 260px;min-width:200px}
.group-head h3{margin:0 0 4px;font-size:19px;line-height:1.3}
.group-head p{margin:0}
.group-items{flex:1 1 480px;min-width:0;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.chip{display:inline-flex;flex-direction:column;justify-content:center;padding:10px 18px;border-radius:999px;background:var(--bg);border:1px solid var(--chip);color:var(--ink);text-decoration:none;font-weight:600}
.chip-card{padding:16px 24px;border-radius:14px;min-width:240px}
.chip-sub{font-size:14px;font-weight:700;color:var(--good)}
.steps{display:flex;flex-wrap:wrap;gap:16px}
.step{flex:1 1 300px;min-width:0;padding:24px;border-radius:16px;background:var(--mint)}
.step-n{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--dark);color:var(--accent);font-weight:700;margin-bottom:14px}
.step h3{margin:0 0 6px;font-size:19px} .step p{margin:0;color:var(--text2)}

/* бренд */
.brand-head{display:flex;flex-wrap:wrap;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.brand-logo{flex:0 0 auto;width:168px;height:168px;border-radius:16px;object-fit:contain;background:#fff}
.brand-logo-ph{display:flex;align-items:center;justify-content:center;background:var(--mint2);color:var(--green);font-family:var(--head);font-weight:700;font-size:44px}
.brand-info{flex:1 1 420px;min-width:0}
.brand-info .h1{font-size:38px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.filter{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:999px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;border:1px solid var(--field);background:#fff;color:var(--ink);text-decoration:none}
.filter span{font-weight:500;opacity:.7}
.filter[aria-pressed="true"],.filter.is-cur{background:var(--dark);border-color:var(--dark);color:#fff}
.lines{display:flex;flex-direction:column;gap:16px}
.line{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.line-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;margin-bottom:16px}
.line-title{min-width:0} .line-title h3{margin:0;font-size:22px;line-height:1.3} .line-title p{margin:2px 0 0}
.price-from{margin:0;font-weight:700;color:var(--good);font-size:18px}
.sizes{display:flex;flex-wrap:wrap;gap:12px}
.size{flex:1 1 190px;max-width:260px;min-width:0;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;color:var(--ink);text-decoration:none;border:1px solid var(--line);background:#fff}
.size.is-best{border-color:#7DBE97;background:var(--pale)}
.size-sm{flex-basis:170px;max-width:240px;padding:12px 16px;border-width:2px}
.size-sm.is-cur{border-color:var(--green);background:var(--pale)}
.size-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.size-label{font-weight:700;font-size:18px}
.size-ppk{font-weight:700;color:var(--good)} .size-sm .size-ppk{font-weight:600;font-size:15px}
.size-total{font-size:14px;color:var(--muted)}
.badge{display:inline-block;font-size:12px;font-weight:700;color:var(--good);background:#D7EEDF;border-radius:999px;padding:2px 10px;white-space:nowrap}

/* списки товаров */
.plist{display:flex;flex-direction:column;gap:10px}
.pcard{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none}
.pcard-img{flex:0 0 72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:12px;overflow:hidden}
.pcard-img img{width:72px;height:72px;object-fit:contain}
.pcard-body{flex:3 1 260px;min-width:0;display:flex;flex-direction:column}
.pcard-brand{font-size:13px;color:var(--muted)}
.pcard-title{font-weight:700;font-size:18px;line-height:1.3}
.pcard-ua{font-size:14px;color:var(--muted)}
.pcard-price{flex:1 1 150px;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.pcard-sum{font-weight:700;font-size:20px} .pcard-ppk{font-weight:600;color:var(--good)}
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:28px}
.pager .filter{height:40px;padding:0 14px}
.notice{padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;max-width:760px}
.notice.ok{border-color:#7DBE97;background:var(--pale)} .notice.err{border-color:#E7B4B0;background:#FDF3F2}

/* товар */
.p-top{display:flex;flex-wrap:wrap;gap:32px;align-items:stretch}
.p-photo{flex:0 1 380px;min-width:260px;min-height:340px;background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}
.p-photo img{max-height:380px;object-fit:contain;width:auto;height:auto}
.p-main{flex:1 1 440px;min-width:0}
.p-ua{margin:0 0 20px;color:var(--muted);font-size:18px}
.best-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:16px}
.best-box p{margin:0}
.best-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.best-sum{font-family:var(--head);font-weight:700;font-size:40px;line-height:1.1;color:var(--good)}
.best-ppk{font-weight:600;font-size:18px;color:var(--text2)}
.best-box .muted{margin:8px 0 18px}
.best-none{font-weight:700;font-size:20px}
.facts{margin:0;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px}
.facts dt{color:var(--muted)} .facts dd{margin:0;font-weight:600}
.chart-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.chart-head .h2{margin:0}
.periods{display:flex;gap:8px} .periods .filter{height:40px;font-size:14px}
.chart-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.stats{display:flex;flex-wrap:wrap;gap:12px 40px;margin-bottom:20px}
.stat-l{margin:0;font-size:13px;color:var(--muted)} .stat-v{margin:0;font-weight:700;font-size:20px}
.stat-v.good{color:var(--good)} .stat-v.bad{color:var(--bad)}
.chart-row{display:flex;gap:12px}
.chart-axis{flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;height:200px;font-size:12px;color:var(--muted);text-align:right}
.chart{flex:1 1 auto;min-width:0;height:200px;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid var(--field);background:linear-gradient(#EEF2EC 1px,transparent 1px) 0 0/100% 50%}
.bar{flex:1 1 0;min-width:2px;border-radius:3px 3px 0 0;background:#9CC5B0} .bar.now{background:var(--dark)}
.chart-dates{display:flex;justify-content:space-between;margin:6px 0 0 56px;font-size:12px;color:var(--muted)}
.chart-note{margin:12px 0 0}
.offers{display:flex;flex-direction:column;gap:10px}
.offer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:#fff}
.offer.is-best{border-color:#7DBE97;background:var(--pale)}
.offer.is-out{opacity:.65}
.offer-shop{flex:2 1 200px;min-width:0} .offer-name{margin:0;font-weight:700;font-size:18px;overflow-wrap:anywhere}
.offer-col{flex:1 1 110px} .offer-col.sm{flex-basis:100px} .offer-col.md{flex-basis:150px}
.offer-col p{margin:0}
.offer-price{font-weight:700;font-size:20px} .offer-ppk{font-weight:600}
.avail{font-weight:600}.avail-in{color:var(--good)}.avail-pre{color:var(--warn)}.avail-out{color:var(--bad)}
.btn-shop{height:46px;padding:0 22px;flex:0 0 auto}
.foot-note{margin:14px 0 0}

/* контакты, документы */
.two-col{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-top:28px}
.col-info{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.col-info .h2{margin:0}
.col-form{flex:1 1 360px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.col-form .h2{margin-bottom:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.card h3{margin:0 0 4px;font-size:17px} .card p{margin:0}
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:15px}
.field input,.field textarea{border-radius:10px;border:1px solid var(--field);padding:0 14px;font:inherit;background:#fff;color:var(--ink)}
.field input{height:48px} .field textarea{padding:12px 14px;resize:vertical}
.form .btn-cta{align-self:flex-start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.doc{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;margin-top:28px}
.toc{flex:0 1 280px;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.toc h2{margin:0 0 2px;font-size:16px}
.doc-body{flex:1 1 520px;min-width:0;max-width:760px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px}
.doc-body section{margin-bottom:28px} .doc-body section:last-child{margin-bottom:0}
.doc-body h2{margin:0 0 8px;font-size:22px;line-height:1.3}
.doc-body p{margin:0 0 10px;color:var(--text2)}
.notfound{padding:48px 0}

/* подвал */
.site-footer{background:var(--dark);color:#DCE8E0;font-size:15px;line-height:1.55;margin-top:0}
.foot-cols{display:flex;flex-wrap:wrap;gap:32px 48px;padding-top:48px;padding-bottom:24px}
.foot-about{flex:2 1 320px;min-width:0} .foot-about p{margin:0;max-width:420px}
.foot-about .foot-logo{margin:0 0 12px;font-family:var(--head);font-weight:700;font-size:20px;color:#fff}
.foot-logo span{color:var(--accent);font-weight:600;font-size:13px}
.foot-col{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:8px}
.foot-col h2{margin:0 0 4px;font-size:16px;color:#fff}
.foot-col a{color:#DCE8E0;text-decoration:none}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px;color:#B7CABF;border-top:1px solid #2F5A4B;margin-top:0;padding-top:20px;padding-bottom:32px}

/* мобильная версия */
@media (max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  .h1{font-size:28px} .h1.xl{font-size:30px} .h1.sm{font-size:26px} .h2{font-size:22px} .h2.md{font-size:22px}
  .hero-in{padding-top:40px;padding-bottom:40px}
  .brand-head{padding:20px} .brand-logo{width:120px;height:120px}
  .brand-info .h1{font-size:28px}
  .best-sum{font-size:32px}
  .main-nav{gap:0 16px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .nav-link{white-space:nowrap}
  .push-right{margin-left:0}
  .group{padding:18px} .line{padding:18px}
  .size{max-width:none}
  .pcard-price{align-items:flex-start;text-align:left}
  .chart-dates{margin-left:0}
  .doc-body{padding:20px}
}