/* ══ Service.css — Сторінка послуги /<category>/p/<service> (герой, факти, стрічка).
   Правити тут; сторінка підключає чанк через site_css() у шаблоні. ══ */

.svc-hero { position:relative; background-size:cover; background-position:center;
            min-height:400px; display:flex; align-items:center;
            padding:40px 0 96px; color:#fff; }
.svc-hero .wrap { width:100%; }
.svc-hero::before { content:''; position:absolute; inset:0;
                    background:rgba(20,24,28,.55); }
.svc-hero-plain { background:#2F3A44; }
.svc-hero .wrap { position:relative; z-index:2; text-align:center; }
.svc-crumb { display:inline-flex; align-items:center; gap:9px;
             color:#fff; font-size:14px; text-decoration:none; opacity:.92; }
.svc-crumb:hover { text-decoration:underline; }
.svc-crumb .ic { flex:0 0 22px; width:22px; height:22px; }
.svc-crumb .ic svg { width:100%; height:100%; display:block; }
.svc-hero h1 { font-family:'Poppins',sans-serif; font-size:40px; font-weight:700;
               line-height:56px; color:#fff; margin:14px 0 34px; }
.svc-pick { display:flex; max-width:660px; margin:0 auto -124px;
            background:#fff; border-radius:4px; overflow:hidden;
            box-shadow:0 10px 30px rgba(0,0,0,.22); }
.svc-pick-city { flex:1; display:flex; align-items:center; gap:10px;
                 padding:0 18px; color:var(--muted); }
.svc-pick-city svg { flex:0 0 19px; width:19px; height:19px; }
.svc-pick select { flex:1; border:0; outline:0; background:none;
                   font-family:inherit; font-size:16px; color:var(--ink);
                   height:55px; cursor:pointer; }
.svc-pick button { flex:0 0 auto; border:0; cursor:pointer;
                   background:var(--green); color:#fff;
                   font-family:inherit; font-size:16px; font-weight:700;
                   padding:12px 25px 10px; }
.svc-pick button:hover { background:var(--green-d); }
.svc-main { display:grid; grid-template-columns:633px 1fr; gap:30px;
            align-items:start; padding-top:10px; }
.svc-facts { display:grid; grid-template-columns:1fr 1fr; gap:44px 30px; }
.svc-fact { text-align:center; }
.svc-fact svg { width:44px; height:44px; color:var(--ink-2);
                margin:0 auto 12px; display:block; }
.svc-fact b { display:block; font-size:18px; color:#414141; margin-bottom:6px; }
.svc-fact span { font-size:14px; line-height:21px; color:#676767; }
.svc-fact .star { color:var(--star); }
.svc-feed { width:307px; justify-self:end; }
.svc-feed-t { font-size:15px; font-weight:700; color:#414141;
              margin-bottom:10px; }
.svc-feed .feed-win { height:313px; }
.svc-other { margin-bottom:55px; }
.svc-other h2 { font-family:'Poppins',sans-serif; font-size:24px; line-height:36px; font-weight:500;
                color:#414141; margin-bottom:16px; }
.svc-other ul { list-style:none; columns:3; column-gap:25px; }
.svc-other li { line-height:30px; break-inside:avoid; }
.svc-other a { color:var(--link); font-size:14px; font-weight:400;
               text-decoration:none; }
.svc-other a:hover { text-decoration:underline; }
@media (max-width:900px) {
  .svc-hero { padding:30px 0 70px; }
  .svc-hero h1 { font-size:26px; line-height:36px; margin:10px 0 24px; }
  .svc-pick { flex-direction:column; margin-bottom:-96px; }
  .svc-pick-city { padding:0 14px; border-bottom:1px solid var(--line-2); }
  .svc-pick button { padding:14px 20px; }
  .svc-main { grid-template-columns:1fr; gap:26px; padding-top:120px;
                margin-bottom:36px; }
  .svc-facts { gap:26px 14px; }
  .svc-fact b { font-size:16px; }
  .svc-feed { width:auto; justify-self:stretch; }
  .svc-other ul { columns:1; }
  .svc-other a { font-size:14px; }
  .svc-other li { line-height:28px; }
}
.svc-jobs { margin-bottom:45px; }
.svc-jobs h2 { font-family:'Poppins',sans-serif; font-size:24px; line-height:36px; font-weight:500;
               color:#414141; margin-bottom:10px; }
.svc-jobs a { color:var(--link); font-size:14px; font-weight:400;
              text-decoration:none; }
.svc-jobs a:hover { text-decoration:underline; }
.svc-hero { position:relative; min-height:400px; padding:0;
            display:flex; align-items:center; justify-content:center;
            background-size:cover; background-position:center; color:#fff; }
.svc-hero::after { content:''; position:absolute; inset:0;
                   background:rgba(0,0,0,.28); }
.svc-hero .wrap { position:relative; z-index:2; width:100%;
                  text-align:center; }
.svc-hero-plain { background:#3C4650; }
.svc-hero-plain::after { background:rgba(0,0,0,.12); }
.svc-crumb { display:inline-flex; align-items:center; gap:12px;
             color:#fff; text-decoration:none; font-size:16px;
             margin-bottom:16px; }
.svc-crumb .ic { flex:0 0 42px; width:42px; height:42px; color:#fff; }
.svc-crumb .ic svg { width:100%; height:100%; display:block; }
.svc-crumb:hover span:last-child { text-decoration:underline; }
.svc-hero h1 { font-family:'Poppins',sans-serif; font-size:40px;
               font-weight:700; line-height:56px; color:#fff;
               margin:0; text-shadow:0 1px 14px rgba(0,0,0,.25); }
.svc-top { background:#F6F6F6; padding:0 0 50px; }
.svc-loc-slot { margin:-50px 0 34px; position:relative; z-index:5; }
.svc-loc { display:flex; flex-direction:column; background:#fff;
           border-radius:8px; padding:12px;
           box-shadow:0 12px 34px rgba(0,0,0,.14); }
.svc-loc-row { display:flex; flex:1; }
.svc-loc-t { display:none; font-family:'Poppins',sans-serif; font-size:22px;
             font-weight:700; color:#414141; text-align:center;
             margin:0 0 16px; }
.svc-loc.stuck { position:fixed; top:70px; left:0; right:0; z-index:56;
                 border-radius:0; padding:14px 20px 16px;
                 box-shadow:0 12px 28px rgba(0,0,0,.14); }
.svc-loc.stuck .svc-loc-t { display:block; }
.svc-loc.stuck .svc-loc-row { max-width:900px; width:100%; margin:0 auto; }
.svc-loc .svc-pick-city { flex:1; display:flex; align-items:center; gap:10px;
           border:1px solid var(--line); border-right:0;
           border-radius:4px 0 0 4px; padding:0 15px 0 15px;
           color:var(--muted); }
.svc-loc .svc-pick-city svg { flex:0 0 18px; width:18px; height:18px; }
.svc-loc select { flex:1; border:0; outline:0; background:none;
                  font-family:inherit; font-size:17px; color:var(--ink);
                  height:53px; cursor:pointer; }
.svc-loc button { flex:0 0 auto; height:55px; cursor:pointer;
                  background:var(--green); border:1px solid var(--green);
                  color:#fff; font-family:'Poppins',sans-serif;
                  font-size:14px; line-height:24px; font-weight:700;
                  padding:12px 25px 10px; border-radius:0 4px 4px 0; }
.svc-loc button:hover { background:var(--green-d); border-color:var(--green-d); }
.svc-facts { display:flex; flex-wrap:wrap; justify-content:space-between; }
.svc-fact { flex:0 0 307px; min-height:127px; margin-bottom:30px;
            text-align:center; padding:0 20px; }
.svc-fact svg { width:42px; height:42px; margin:0 auto 8px; display:block;
                color:#9AA1A8; }
.svc-fact b { display:block; font-size:16px; font-weight:600;
              color:#414141; margin-bottom:4px; }
.svc-fact span { font-size:13px; line-height:18px; color:#414141; }
.svc-fact .star { color:var(--star); }
@media (max-width:900px) {
  .svc-hero { min-height:245px; }
  .svc-hero::after { background:rgba(0,0,0,.38); }
  .svc-crumb { font-size:14px; gap:9px; margin-bottom:10px; }
  .svc-crumb .ic { flex:0 0 30px; width:30px; height:30px; }
  .svc-hero h1 { font-size:22px; line-height:31px; }
  .svc-loc-slot { margin:0 -15px 0; }
  .svc-loc { padding:15px; border-radius:0; box-shadow:none; }
  .svc-loc-row { flex-direction:column; gap:0; }
  .svc-loc.stuck { top:50px; padding:15px; }
  .svc-loc.stuck .svc-loc-t { font-size:18px; line-height:26px;
               margin:0 auto 10px; }
  .svc-loc .svc-pick-city { height:45px; margin-bottom:10px;
               border:2px solid var(--green); border-radius:4px;
               padding:0 15px 0 8px; gap:10px; }
  .svc-loc .svc-pick-city svg { flex:0 0 20px; width:20px; height:20px; }
  .svc-loc input#svcCity { height:41px; font-size:14px; line-height:16px; }
  .svc-loc .svc-city-fo { font-size:14px; left:38px; right:15px; }
  .svc-loc .svc-city-fo b, .svc-loc .svc-city-fo span { font-size:14px; }
  .svc-loc select { height:41px; font-size:14px; }
  .svc-loc button { flex:0 0 auto; width:100%; height:45px;
               font-size:14px; border-radius:4px; padding:12px 0 10px; }
  .svc-main { grid-template-columns:1fr; margin:0 -15px 26px;
                background:#F6F6F6; padding:24px 20px; }
  .svc-facts { display:block; }
  .svc-fact { flex:none; min-height:0; margin-bottom:24px; padding:0;
                text-align:left; display:grid;
                grid-template-columns:44px 1fr; column-gap:14px; }
  .svc-fact svg { grid-row:1 / span 2; margin:2px 0 0; width:38px; height:38px; }
  .svc-fact b { font-size:16px; }
  .svc-fact span { font-size:13px; }
  .svc-feed { width:auto; }
}
.svc-facts { width:613px; gap:0; }
.svc-fact { flex:0 0 50%; margin-bottom:22px;
            padding:0 20px; }
.svc-fact svg { width:38px; height:38px; margin:0 auto 10px; }
.svc-fact b { font-family:'Poppins',sans-serif; font-size:16px;
              font-weight:600; line-height:24px; margin-bottom:5px; }
.svc-fact span { font-size:13px; line-height:18px; }
.svc-feed-t { display:none; }
.svc-feed .feed-win { height:312px; }
.svc-feed .feed-it { background:#fff; border:1px solid #EBEBEB;
                     border-radius:4px; padding:15px; margin-bottom:10px;
                     box-shadow:0 2px 10px rgba(0,0,0,.1); }
.svc-feed .feed-av { flex:0 0 30px; width:30px; height:30px;
                     font-size:13px; }
.svc-feed .feed-tx { font-size:16px; line-height:23px; color:#414141; }
.svc-feed .feed-tx b { color:#414141; }
.svc-feed .feed-meta { font-size:13px; color:#A0A0A0; margin-top:5px; }
@media (max-width:900px) {
  .svc-facts { width:auto; }
  .svc-fact { flex:none; padding:0; min-height:0; margin-bottom:24px; }
  .svc-fact svg { margin:2px 0 0; }
  .svc-fact b { font-size:16px; line-height:22px; margin-bottom:2px; }
  .svc-feed-t { display:block; font-size:16px; font-weight:700;
                  color:#414141; margin:4px 0 12px; }
}
.svc-hero h1 { max-width:none; width:100%; margin:0; }
.svc-loc .svc-pick-city { position:relative; }
.svc-loc input#svcCity { flex:1; border:0; outline:0; background:none;
    font-family:inherit; font-size:17px; color:var(--ink);
    height:53px; min-width:0; }
.svc-loc input#svcCity::placeholder { color:#A0A0A0; }
.svc-city-fo { position:absolute; left:43px; right:15px; top:0; bottom:0;
    display:flex; align-items:center; pointer-events:none;
    font-size:17px; color:#A0A0A0; white-space:nowrap; overflow:hidden; }
.svc-city-fo b { font-weight:700; color:#414141; }
.svc-city-fo span { color:#A0A0A0; font-weight:400; }
.svc-city-fo svg { flex:0 0 16px; width:16px; height:16px; margin-left:7px;
    color:#414141; }
.svc-pick-city.fo-on input#svcCity,
.svc-pick-city.fo-on input#svcCity::placeholder { color:transparent; }
.svc-pick-city:not(.fo-on) .svc-city-fo { display:none; }
@media (max-width:900px) {
  .svc-city-fo svg { margin-left:auto; }
}
.loc-sg { position:absolute; left:0; right:0; top:100%; z-index:60;
    list-style:none; width:100%; margin:0; padding:15px 0;
    max-height:450px; overflow-y:auto; overflow-x:hidden;
    background:#fff; border:2px solid #EBEBEB; border-top:none;
    border-radius:0 0 4px 4px; box-shadow:0 5px 15px rgba(0,0,0,.05); }
.loc-sg li { display:block; width:100%; margin:0; padding:10px 25px;
    font-family:'Lato',sans-serif; font-size:15px; line-height:16px;
    font-weight:400; color:#414141; text-align:left; cursor:pointer; }
.loc-sg li span { color:#A0A0A0; }
.loc-sg li:hover { background:#F5F5F5; }
@media (max-width:900px) {
  .svc-loc input#svcCity { height:41px; font-size:14px; line-height:16px; }
  .loc-sg { border-radius:0; }
  .loc-sg li { padding:10px 20px; }
}
.loc-sg li.loc-big { font-weight:700; }
.loc-sg li.loc-big-last { margin-bottom:30px; position:relative; }
.loc-sg li.loc-big-last::after { content:''; display:block;
    position:absolute; bottom:-16px; width:calc(100% - 50px);
    height:1px; background:#EBEBEB; }
.svc-loc-err { display:block; text-align:center; color:#d82b2b;
    font-size:15px; line-height:22px; margin:9px 0 0; }
.svc-loc-err[hidden] { display:none; }
.svc-pick-city.err { border-color:#d82b2b; }
@media (max-width:900px) {
  .svc-loc-err { text-align:left; font-size:14px; }
  .svc-loc .svc-pick-city.err { border-color:#d82b2b; }
}