/* ==== Груминг Златоуст — общая дизайн-система ==== */
html{scroll-behavior:smooth}
:root{
  --bg:#131211; --panel:#1b1916; --panel2:#121110; --ink:#f3f0ea; --soft:#c2bbb0; --muted:#a9a297; --faint:#8d867c;
  --line:#2b2722; --line2:#3d382f; --accent:#e2a755; --accent2:#f0be74; --accent-ink:#241708;
  --overlay:rgba(19,18,17,0.85); --overlay-ink:#e9e4db; --header:rgba(19,18,17,0.92);
  --promo1:#2a2013; --promo2:#1b1916; --promo-line:#4a3a20; --stripe1:#171512; --stripe2:#1b1916;
  --btn:#46301a; --btn2:#5a4023; --btn-line:#a5773f; --btn-ink:#f6e3c8;
}
[data-theme="steel"]{
  --bg:#101214; --panel:#171a1e; --panel2:#0f1113; --ink:#eef1f4; --soft:#bdc4cb; --muted:#a2aab2; --faint:#848c94;
  --line:#262b31; --line2:#39404a; --accent:#8fb7d9; --accent2:#a9cbe8; --accent-ink:#0c1520;
  --overlay:rgba(16,18,20,0.85); --overlay-ink:#e6ebf0; --header:rgba(16,18,20,0.92);
  --promo1:#16222d; --promo2:#171a1e; --promo-line:#2c4257; --stripe1:#131619; --stripe2:#171a1e;
  --btn:#1e2f40; --btn2:#28405a; --btn-line:#6e93b5; --btn-ink:#dcebf7;
}
[data-theme="pine"]{
  --bg:#101311; --panel:#171b18; --panel2:#0f120f; --ink:#eef2ec; --soft:#bec6bb; --muted:#a3aca0; --faint:#858e82;
  --line:#262c26; --line2:#3a443a; --accent:#8fc79b; --accent2:#a8d8b2; --accent-ink:#0d1a11;
  --overlay:rgba(16,19,17,0.85); --overlay-ink:#e7ede5; --header:rgba(16,19,17,0.92);
  --promo1:#17251b; --promo2:#171b18; --promo-line:#2c4a35; --stripe1:#131614; --stripe2:#171b18;
  --btn:#1e3627; --btn2:#2a4a36; --btn-line:#6da081; --btn-ink:#dcefe1;
}
[data-theme="light"]{
  --bg:#f2efe9; --panel:#faf8f4; --panel2:#efebe3; --ink:#221e18; --soft:#524c42; --muted:#6b6458; --faint:#8a8375;
  --line:#ddd6ca; --line2:#c4bcac; --accent:#a4641f; --accent2:#8a5117; --accent-ink:#fdf7ee;
  --overlay:rgba(250,248,244,0.92); --overlay-ink:#37312a; --header:rgba(242,239,233,0.92);
  --promo1:#f3e5d2; --promo2:#faf8f4; --promo-line:#d9b98c; --stripe1:#ece7dd; --stripe2:#f4f0e9;
  --btn:#6b4419; --btn2:#7d5220; --btn-line:#a97c42; --btn-ink:#fbeed8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent2)}
img{max-width:100%}
h1,h2,h3{font-family:'Unbounded',sans-serif;font-weight:600}
details summary::-webkit-details-marker{display:none}

/* ==== Контейнер ==== */
.container{max-width:1180px;margin:0 auto;padding:0 28px}

/* ==== Шапка ==== */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;background:var(--header);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-logo{display:flex;align-items:center;gap:12px;color:var(--ink)}
.site-logo img{width:38px;height:38px;border-radius:10px;object-fit:cover;background:var(--line)}
.site-logo .logo-text{font-family:'Unbounded';font-size:14px;font-weight:600;letter-spacing:0.04em}
.site-nav{display:flex;gap:22px;font-size:14px;font-weight:600;flex-wrap:wrap}
.site-nav a{color:var(--muted)}
.site-nav a:hover,.site-nav a.active{color:var(--ink)}
.btn-cta{background:var(--btn);border:1px solid var(--btn-line);color:var(--btn-ink);
  padding:10px 20px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap}
.btn-cta:hover{background:var(--btn2);color:var(--btn-ink)}
.header-actions{display:flex;align-items:center;gap:12px}
.vk-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;border:1px solid var(--line2);color:var(--muted);flex:none}
.vk-btn:hover{color:var(--accent);border-color:var(--accent)}
.vk-btn svg{width:22px;height:22px;display:block}

/* ==== Кнопки ==== */
.btn{display:inline-block;padding:14px 26px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent}
.btn.primary{background:var(--btn);border-color:var(--btn-line);color:var(--btn-ink)}
.btn.primary:hover{background:var(--btn2);color:var(--btn-ink)}
.btn.outline{border-color:var(--line2);color:var(--ink);background:transparent}
.btn.outline:hover{border-color:var(--accent);color:var(--ink)}

/* ==== Секции / типографика ==== */
.section{max-width:1180px;margin:0 auto;padding:56px 28px}
.eyebrow{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:0.08em;margin:0 0 6px}
.page-title{font-size:40px;line-height:1.15;margin:0 0 16px;text-wrap:pretty}
.lead{font-size:17px;line-height:1.6;color:var(--soft);margin:0 0 8px;max-width:60ch}
h2.block{font-size:26px;margin:0 0 8px}
.sub{color:var(--muted);font-size:14px;margin:0 0 28px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.chip{border:1px solid var(--line2);color:var(--muted);font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px}

/* ==== Хлебные крошки ==== */
.breadcrumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin:0 0 20px;flex-wrap:wrap}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--ink)}

/* ==== Карточки ==== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}
.card h2{font-size:19px;margin:0 0 14px}
.card h3{font-size:16px;margin:0 0 6px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.check-list,.process-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--soft);font-size:14px;line-height:1.55}
.process-list{counter-reset:step;list-style:none;padding-left:0}
.process-list li{position:relative;padding-left:34px}
.process-list li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--btn);color:var(--btn-ink);
  font-family:'Unbounded';font-size:12px;font-weight:700}

/* ==== Прайс ==== */
.price-table{width:100%;border-collapse:collapse;font-size:14px}
.price-table caption{text-align:left;font-family:'Unbounded';font-size:17px;font-weight:600;color:var(--ink);margin-bottom:12px}
.price-table th,.price-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.price-table th{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:0.04em;text-transform:uppercase}
.price-table td.p{font-family:'Unbounded';font-weight:600;color:var(--accent);white-space:nowrap}
.price-table tr:last-child td{border-bottom:none}
.price-note{font-size:13px;color:var(--muted);margin:14px 0 0}

/* ==== Прайс по породам / выбор породы ==== */
/* кастомный дропдаун выбора породы (в стиле сайта, открывается вниз, с поиском) */
.breed-dd{position:relative;z-index:20}
.breed-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font-family:'Manrope';font-size:15px;font-weight:600;cursor:pointer;text-align:left}
.breed-trigger:hover,.breed-trigger[aria-expanded="true"]{border-color:var(--accent)}
.breed-trigger .chev{flex:none;color:var(--muted);transition:transform .15s ease}
.breed-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.breed-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.4);padding:8px;display:none;flex-direction:column;max-height:340px;overflow:hidden}
.breed-panel.open{display:flex}
.breed-search{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-family:'Manrope';font-size:14px;margin-bottom:6px;flex:none}
.breed-search:focus{outline:none;border-color:var(--accent)}
.breed-list{list-style:none;margin:0;padding:0;overflow-y:auto;overflow-x:hidden}
.breed-list li{padding:11px 12px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:600;color:var(--soft)}
.breed-list li:hover,.breed-list li.active{background:var(--panel2);color:var(--ink)}
.breed-list li[aria-selected="true"]{color:var(--accent)}
.breed-empty{padding:12px;color:var(--muted);font-size:13px;text-align:center}
.sum-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--panel);display:block}
.sum-photo[hidden]{display:none}
.breed-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bp-row{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:14px}
.bp-row b{color:var(--accent);white-space:nowrap;font-family:'Unbounded';font-weight:600;font-size:13px}
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pl-list li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.pl-list li:last-child{border-bottom:none}
.pl-list b{color:var(--accent);white-space:nowrap;font-weight:700}
@media (max-width:820px){.breed-price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.breed-price-grid{grid-template-columns:1fr}}

.price-panel{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px}
.price-panel .label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0.08em}
.price-panel .big{font-family:'Unbounded';font-size:32px;font-weight:700;color:var(--accent)}
.price-panel ul{list-style:none;margin:12px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.price-panel li{display:flex;justify-content:space-between;font-size:14px}
.price-panel li b{color:var(--accent)}

/* ==== Меню услуг (сайдбар) ==== */
.service-menu{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.service-menu .label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0.08em}
.service-menu ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.service-menu a{display:block;padding:9px 12px;border-radius:10px;color:var(--soft);font-weight:600;font-size:14px}
.service-menu a:hover{background:var(--panel2);color:var(--ink)}
.service-menu a.active{background:var(--btn);color:var(--btn-ink)}

/* ==== CTA полоса ==== */
.cta-strip{background:linear-gradient(135deg,var(--promo1),var(--promo2));border:1px solid var(--promo-line);
  border-radius:18px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-strip h2{font-size:19px;margin:0 0 6px}
.cta-strip p{margin:0;color:var(--soft);font-size:14px}

/* ==== Инфо-строки (контакты) ==== */
.info-row{display:flex;gap:12px;font-size:15px;align-items:flex-start}
.info-row .ic{color:var(--accent)}

/* ==== Подвал ==== */
.site-footer{border-top:1px solid var(--line);background:var(--panel)}
.site-footer .in{max-width:1180px;margin:0 auto;padding:24px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.site-footer a{font-weight:600}

/* ==== Лэйаут страницы услуги ==== */
.svc-layout{grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}

/* даём сеткам/флексам сжиматься ниже min-content, иначе на узких экранах распирает */
.cfg-grid, .cfg-grid *, .svc-layout, .svc-layout > *{min-width:0}

/* ==== Адаптив ==== */
@media (max-width:900px){
  .site-nav{display:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .page-title{font-size:30px}
}
@media (max-width:860px){
  /* секции с инлайновой сеткой — перебиваем через !important */
  #top{grid-template-columns:1fr !important}
  .cfg-grid{grid-template-columns:1fr !important}
  .ba-grid{grid-template-columns:1fr !important}
  .treats-grid{grid-template-columns:1fr !important}
  .contacts-grid{grid-template-columns:1fr !important}
  .steps-grid{grid-template-columns:repeat(2,1fr) !important}
  .svc-layout{grid-template-columns:1fr}
  .svc-layout aside{position:static !important}
}
@media (max-width:600px){
  .container,.section{padding-left:16px;padding-right:16px}
  .grid-2{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr !important}
  .cta-strip{flex-direction:column;align-items:flex-start}
  h1[style]{font-size:32px !important}
  /* компактнее горизонтальные отступы инлайновых секций главной */
  #root > section{padding-left:16px !important;padding-right:16px !important}
  #root > section > div[style*="56px 28px"]{padding-left:16px !important;padding-right:16px !important}
  /* конфигуратор: меньше отступов, чтобы цена и время не зажимались */
  #zapis > div{padding:18px !important}
  .cfg-grid > div:last-child{padding:18px !important}
  .sum-row{flex-wrap:wrap;gap:2px 10px}
  #sum-price{font-size:30px !important}
  /* шапка компактнее */
  .site-header{padding:12px 16px;gap:10px}
  .btn-cta{padding:9px 15px}
}
@media (max-width:360px){
  .site-header{padding:10px 12px;gap:8px}
  .header-actions{gap:8px}
  .site-logo{gap:8px}
  .site-logo img{width:34px;height:34px}
  .site-logo .logo-text{font-size:12px;letter-spacing:0.02em}
  .vk-btn{width:36px;height:36px}
  .btn-cta{padding:8px 12px;font-size:13px}
  #sum-price{font-size:27px !important}
}