/*
Theme Name: Щиток
Description: Тема provodka78.ru — «Проводка 78», электромонтаж в Петербурге и Ленобласти. Макет «вскрытая стена»: штукатурка, ниши, магистраль проводов слева. Части — из архива provodka78_assets_01-10 (только резка и сжатие), щиток и иконки — кодом (parts/svg.php). 06.11.2026.
Version: 1.0
Text Domain: shchitok
*/
/* Палитра макета «вскрытая стена»: штукатурка #F1ECE4, тёплый бетон #D0C7BC, олива #6D7258,
   графит #35342F, пыльная слива #7A686E, меловой #FAF7F1. Отступы — шкала 4/8/16/24/32/48. */
:root{
  --sht:#f1ece4;--beton:#d0c7bc;--oliva:#6d7258;--grafit:#35342f;--sliva:#7a686e;--mel:#faf7f1;
  --ink:#35342f;--ink2:#4f4d46;--ink3:#76716a;--line:#d0c7bc;
  --acc:#6d7258;--acc-ink:#faf7f1;--acc-soft:#e3e1d3;--acc2:#7a686e;
  /* для рисунков кодом */
  --stena:#e6ded3;--ramka:#faf7f1;--ramka-l:#a8a096;--lico:#f1ece4;--dyra:#35342f;--korpus:#bdb6ac;--nisha:#8f8880;
  --wl:#7a4f3a;--wn:#8796a0;--wpe:#8f9a5c;--wpe-p:#e6dfb8;--temno:#35342f;
  --r:8px;--font:"Golos Text","Segoe UI",Roboto,Arial,sans-serif;
  --img:url(assets/img/);
  --ten:0 1px 0 rgba(255,255,255,.7) inset,0 4px 8px rgba(53,52,47,.18),0 1px 2px rgba(53,52,47,.25);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;color:var(--ink);font:17px/1.6 var(--font);background:#e3d9ce url(assets/img/shtukaturka.webp) 0 0/512px repeat;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--oliva)}
h1,h2,h3{line-height:1.15;margin:0 0 16px;font-weight:800;letter-spacing:-.01em;color:var(--grafit)}
h1{font-size:clamp(30px,3.6vw,48px)}
h2{font-size:clamp(24px,2.4vw,32px)}
h3{font-size:19px;font-weight:700}
p{margin:0 0 16px}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--r);border:0;
  background:var(--oliva);color:var(--acc-ink);font:700 16px var(--font);text-decoration:none;cursor:pointer;box-shadow:var(--ten)}
.btn:hover{background:#5e6349}
.btn.line{background:var(--mel);color:var(--grafit);border:1.5px solid var(--grafit);box-shadow:none}
.btn.line:hover{background:#fff}

/* шапка */
.top{position:sticky;top:0;z-index:20;padding:8px 16px 0}
.top-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:24px;min-height:64px;padding:8px 16px 8px 24px;
  background:var(--mel);border-radius:var(--r);box-shadow:var(--ten)}
.logo{font:800 22px/1 var(--font);color:var(--grafit);text-decoration:none;white-space:nowrap;padding-right:24px;border-right:1.5px solid var(--beton)}
.nav{margin-right:auto}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:8px;border-radius:6px;color:var(--grafit);text-decoration:none;font-weight:600;font-size:14px;line-height:1.2}
.menu a:hover,.menu .current-menu-item>a{background:var(--acc-soft);color:var(--oliva)}
.tel{display:flex;flex-direction:column;color:var(--grafit);text-decoration:none;white-space:nowrap;line-height:1.15}
.tel b{font-size:16px;font-weight:800}
.tel small{font-size:12px;color:var(--ink3)}
.tel-ik,.burger{display:none}
.tel-ik{width:48px;height:48px;align-items:center;justify-content:center;color:var(--grafit)}
.tel-ik svg{width:24px;height:24px;fill:currentColor}
.burger{width:48px;height:48px;border:0;background:transparent;padding:12px;flex-direction:column;justify-content:space-between;cursor:pointer}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--grafit)}
@media (max-width:1180px){
  .top-in{gap:8px}
  .logo{border:0;padding-right:0;margin-right:auto}
  .nav{margin:0;position:absolute;left:16px;right:16px;top:80px}
  .menu{display:none;flex-direction:column;background:var(--mel);border-radius:var(--r);box-shadow:var(--ten);padding:8px}
  .menu.open{display:flex}
  .menu a{font-size:16px;padding:12px}
  .burger{display:flex}
  .top .tel,.top .btn{display:none}
  .tel-ik{display:inline-flex}
}

/* стена и магистраль */
.stena{position:relative;max-width:1280px;margin:0 auto;padding:24px 16px 0 136px}
.magistral{position:absolute;left:28px;top:0;bottom:0;width:72px;
  background:url(assets/img/provod-ver.webp) center top/44px auto repeat-y,
    linear-gradient(rgba(208,199,188,.35),rgba(208,199,188,.35)),url(assets/img/vskrytie.webp) 0 0/256px;
  box-shadow:inset 0 0 10px rgba(53,52,47,.45)}
.magistral .kr{position:absolute;top:0;bottom:0;width:30px;background:url(assets/img/kraj-ver.webp) 0 0/30px 512px repeat-y}
.magistral .kr.l{left:-18px}
.magistral .kr.r{right:-18px;transform:scaleX(-1)}
.soderzhimoe{min-width:0}
@media (max-width:760px){
  .stena{padding:16px 12px 0 56px}
  .magistral{left:8px;width:36px;background-size:26px auto,auto,256px}
  .magistral .kr{width:16px;background-size:16px 272px}
  .magistral .kr.l{left:-9px}.magistral .kr.r{right:-9px}
}

/* ниша — вскрытый участок стены с рваной кромкой */
.nisha{position:relative;margin:48px 0;padding:48px 32px 32px;border-radius:4px;
  background:linear-gradient(rgba(232,224,214,.84),rgba(232,224,214,.84)),url(assets/img/vskrytie.webp) center/900px;
  box-shadow:inset 0 3px 12px rgba(53,52,47,.4)}
.nisha::before,.nisha::after{content:"";position:absolute;left:0;right:0;height:30px;pointer-events:none;background:url(assets/img/kraj-gor.webp) 0 0/512px 30px repeat-x}
.nisha::before{top:-18px}
.nisha::after{bottom:-18px;transform:scaleY(-1);background-position:200px 0}
.nisha>h2{position:relative}
@media (max-width:760px){.nisha{padding:40px 16px 24px;margin:32px 0}}

/* плитка-панель */
.plita{background:var(--sht) url(assets/img/shtukaturka.webp) 0 0/256px;border-radius:var(--r);box-shadow:var(--ten)}
.plitki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.plitki a{display:grid;grid-template-columns:64px minmax(0,1fr) 16px;align-items:center;gap:16px;height:100%;min-height:96px;padding:16px;
  background:var(--sht) url(assets/img/shtukaturka.webp) 0 0/256px;border-radius:var(--r);box-shadow:var(--ten);color:var(--grafit);text-decoration:none}
.plitki a:hover{background-color:var(--mel);box-shadow:var(--ten),0 0 0 2px var(--oliva)}
.plitki b{font-size:16px;font-weight:700;line-height:1.25}
.plitki i{font:400 28px/1 var(--font);color:var(--ink3);font-style:normal}
.plitki .ikonka{width:64px;height:64px;border-radius:6px;display:grid;place-items:center;background:#e6ded3;box-shadow:inset 0 2px 5px rgba(53,52,47,.3);overflow:hidden}
.plitki .ikonka img{width:60px;height:60px;object-fit:contain}
.plitki .ikonka .ik{width:48px;height:48px}
.plitki.stati a{grid-template-columns:minmax(0,1fr) 16px}
.plitki.stati span{grid-column:1;color:var(--ink2);font-size:15px;line-height:1.45}
.plitki.stati i{grid-column:2;grid-row:1/3}
@media (max-width:1020px){.plitki{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plitki{grid-template-columns:minmax(0,1fr)}}

/* первый экран: розетки в штробе */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:32px;align-items:center;padding:24px 0 16px}
.hero .lead{font-size:19px;color:var(--ink2);max-width:540px}
.hero-tel{display:none;margin:0 0 16px}
.ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
.ctas .btn{min-width:160px}
.hero-stena,.shchit-nisha{position:relative;container-type:inline-size;border-radius:4px;
  background:linear-gradient(rgba(214,205,194,.5),rgba(214,205,194,.5)),url(assets/img/vskrytie.webp) 30% 40%/760px;
  box-shadow:inset 0 3px 12px rgba(53,52,47,.45)}
.hero-stena{aspect-ratio:520/380}
.pv,.pg{position:absolute;display:block}
.pv{width:9cqw;background:url(assets/img/provod-ver.webp) center top/100% auto repeat-y}
.pg{height:9cqw;background:url(assets/img/provod-gor.webp) left center/auto 100% repeat-x}
.pribor{position:absolute;height:auto;filter:drop-shadow(0 6px 8px rgba(53,52,47,.3))}
.kr{position:absolute;pointer-events:none;z-index:2}
.hero-stena .kr.t,.hero-stena .kr.b,.shchit-nisha .kr.t,.shchit-nisha .kr.b{left:-6px;right:-6px;height:30px;background:url(assets/img/kraj-gor.webp) 0 0/512px 30px repeat-x}
.hero-stena .kr.t,.shchit-nisha .kr.t{top:-18px}
.hero-stena .kr.b,.shchit-nisha .kr.b{bottom:-18px;transform:scaleY(-1)}
.hero-stena .kr.l,.hero-stena .kr.r,.shchit-nisha .kr.l,.shchit-nisha .kr.r{top:-6px;bottom:-6px;width:30px;background:url(assets/img/kraj-ver.webp) 0 0/30px 512px repeat-y}
.hero-stena .kr.l,.shchit-nisha .kr.l{left:-18px}
.hero-stena .kr.r,.shchit-nisha .kr.r{right:-18px;transform:scaleX(-1)}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-stena{max-width:520px;width:calc(100% - 16px);margin:0 auto 16px}
}
@media (max-width:620px){
  .hero-tel{display:flex}
  .hero .lead{font-size:17px}
  .ctas{flex-direction:column}
  .ctas .btn{width:100%}
}

/* как работаем: шаги на проводе с коробками */
.shagi{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.shagi::before{content:"";position:absolute;left:-32px;right:-32px;bottom:24px;height:32px;background:url(assets/img/provod-gor.webp) left center/auto 100% repeat-x}
.shagi li{display:flex;flex-direction:column;align-items:center;gap:16px}
.shag{display:block;width:100%;min-height:64px;padding:16px;text-align:center;font-weight:700;line-height:1.3;
  background:var(--sht) url(assets/img/shtukaturka.webp) 0 0/256px;border-radius:var(--r);box-shadow:var(--ten)}
.uzel{position:relative;width:80px;height:80px;filter:drop-shadow(0 4px 5px rgba(53,52,47,.3))}
@media (max-width:760px){
  .shagi{grid-template-columns:minmax(0,1fr);gap:16px}
  .shagi::before{left:24px;right:auto;top:-40px;bottom:-24px;width:18px;height:auto;background:url(assets/img/provod-ver.webp) center top/100% auto repeat-y}
  .shagi li{flex-direction:row-reverse;justify-content:flex-end}
  .shag{text-align:left;min-height:0}
  .uzel{width:64px;height:64px;flex:none}
}

/* цены */
.ceny-sloj{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;align-items:center}
.tablica{width:100%;border-collapse:separate;border-spacing:0;background:var(--mel);border-radius:var(--r);box-shadow:var(--ten);overflow:hidden;font-size:15px}
.tablica th{background:var(--oliva);color:var(--acc-ink);text-align:left;font-weight:700;padding:8px 16px}
.tablica td{padding:8px 16px;border-top:1px solid #e6ded3;vertical-align:top}
.tablica .chislo{font-weight:700;white-space:nowrap}
.tablica td:last-child{color:var(--ink3);font-size:14px}
.tablica td:last-child a{color:var(--ink3)}
.podpis{color:var(--ink2);font-size:15px;margin:16px 0 0}
.shchit-nisha{aspect-ratio:1/1;max-width:320px;width:100%;justify-self:center;display:grid;place-items:center}
.shchit-nisha svg{width:80%;height:auto;position:relative;top:8%;filter:drop-shadow(0 8px 10px rgba(53,52,47,.35))}
.shchit-nisha .pv{z-index:0}
.shchit-nisha .pv{width:12cqw}
@media (max-width:900px){.ceny-sloj{grid-template-columns:minmax(0,1fr)}.shchit-nisha{max-width:240px}}
@media (max-width:620px){
  .tablica thead{display:none}
  .tablica,.tablica tbody,.tablica tr,.tablica td{display:block}
  .tablica tr{padding:8px 16px;border-top:1px solid #e6ded3}
  .tablica tr:first-child{border-top:0}
  .tablica td{padding:0;border:0}
  .tablica .chislo{margin-top:4px}
}

/* рисунки кодом (parts/svg.php) */
.pr{fill:none;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.wl{stroke:var(--wl)}.wn{stroke:var(--wn)}.wpe{stroke:var(--wpe)}
.wpe-p{stroke:var(--wpe-p);stroke-width:1.6;stroke-dasharray:6 7}
.star{stroke:var(--ramka-l);stroke-dasharray:3 4}
.ramka{fill:var(--ramka);stroke:var(--ramka-l);stroke-width:1.6}
.lico{fill:var(--lico);stroke:var(--ramka-l);stroke-width:1.2}
.dyra{fill:var(--dyra)}
.zazem,.vint{fill:var(--ramka-l)}.shlic{stroke:var(--ramka);stroke-width:1.2}
.korpus{fill:#e9e3da;stroke:#a8a096;stroke-width:1.6}
.shchitok .nisha{fill:#cfc8be}
.rejka{fill:#a8a096}
.avt{fill:var(--mel);stroke:#a8a096;stroke-width:1.2}
.avt.vvod{fill:var(--acc-soft)}.avt.uzo{fill:var(--lico)}
.rych{fill:var(--oliva)}
.test{fill:var(--sliva)}
.podpis-avt,.shchitok .podpis{fill:var(--beton)}
.stena-svg,.ik .stena{fill:var(--stena)}
.kladka{stroke:var(--ramka-l);stroke-width:1.4}.shtroba{stroke:var(--nisha);stroke-width:12}
.list{fill:var(--ramka);stroke:var(--ramka-l);stroke-width:1.6}.liniya{fill:none;stroke:var(--ink3);stroke-width:2.4;stroke-linecap:round}

/* страница */
.kroshki{font-size:14px;color:var(--ink3);padding:8px 0 0}
.kroshki a{color:var(--ink3)}
.stranica{padding:16px 0 0}
.stranica.uzko{max-width:860px}
.stranica .data{color:var(--ink3);font-size:15px}
.sloj{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.sloj-glav{display:flex;flex-direction:column;gap:24px;min-width:0}
@media (max-width:1020px){.sloj{grid-template-columns:minmax(0,1fr)}}
.telo{padding:32px;max-width:100%;overflow-wrap:break-word}
.telo>*:last-child{margin-bottom:0}
.telo h2{margin-top:32px;font-size:clamp(22px,2vw,28px)}
.telo h2:first-child{margin-top:0}
.telo ul{padding-left:0;list-style:none}
.telo ul li{position:relative;padding-left:32px;margin:8px 0}
.telo ul li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ramka-l);
  background:radial-gradient(circle at 33% 50%,var(--dyra) 0 1.8px,transparent 2.2px),radial-gradient(circle at 67% 50%,var(--dyra) 0 1.8px,transparent 2.2px),var(--mel)}
.telo ol{padding-left:24px}
.telo ol li{margin:8px 0}
.telo ol li::marker{font-weight:800;color:var(--oliva)}
.telo table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:15px;display:block;overflow-x:auto;background:var(--mel);border-radius:var(--r)}
.telo th,.telo td{padding:8px 16px;border-bottom:1px solid #e6ded3;text-align:left;vertical-align:top}
.telo thead th{background:var(--oliva);color:var(--acc-ink)}
@media (max-width:620px){.telo table{font-size:14px}.telo th,.telo td{min-width:132px;padding:8px}.telo th:last-child,.telo td:last-child{min-width:96px}}
.telo img{border-radius:var(--r)}
.glavnaya-tekst{margin:48px 0}
.bok{position:sticky;top:104px;display:flex;flex-direction:column;gap:24px}
.bok .karta{padding:24px}
.bok .karta h3{margin:0 0 8px}
.bok .karta p{font-size:15px;color:var(--ink2)}
.bok .karta .btn{width:100%;margin-bottom:16px}
.bok .karta ul{list-style:none;padding:0;margin:0}
.bok .karta li{padding:8px 0;border-top:1px solid #e6ded3;font-size:15px}
.bok .karta li:first-child{border:0}
.bok .karta a:not(.btn):not(.tel){text-decoration:none;color:var(--grafit)}
.bok .karta a:not(.btn):not(.tel):hover{color:var(--oliva)}
@media (max-width:1020px){.bok{position:static}}
@media (max-width:620px){.telo{padding:24px 16px}}
.pusto{padding:24px;margin-bottom:24px}

/* форма в нише */
.forma h2{margin-bottom:8px}
.forma .podpis{margin:0 0 24px}
.forma form{padding:24px;background:var(--sht) url(assets/img/shtukaturka.webp) 0 0/256px;border-radius:var(--r);box-shadow:var(--ten)}
.polya{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:16px}
label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:15px}
input,textarea{font:inherit;font-weight:400;font-size:16px;padding:8px 16px;min-height:48px;border:1px solid #bdb6ac;border-radius:6px;background:var(--mel);color:var(--ink);box-shadow:inset 0 1px 3px rgba(53,52,47,.15)}
textarea{resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--oliva);outline-offset:1px}
.otpravka{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;flex-wrap:wrap}
.soglasie{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;font-size:14px}
.soglasie input{min-height:0;width:20px;height:20px;margin:0;accent-color:var(--oliva);flex:none}
.otpravka .btn{min-width:240px}
.lovushka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.soobshchenie{padding:8px 16px;border-radius:6px;background:#efe4e6;border-left:4px solid var(--sliva)}
.soobshchenie.ok{background:var(--acc-soft);border-left-color:var(--oliva)}
.forma .ili{margin:16px 0 0;font-size:15px;color:var(--ink2)}
@media (max-width:900px){.polya{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.polya .shire{grid-column:1/-1}}
@media (max-width:620px){.polya{grid-template-columns:minmax(0,1fr)}.otpravka .btn{width:100%}.forma form{padding:16px}}

/* подвал */
.niz{padding:48px 16px 16px}
.niz-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:16px 24px;background:var(--mel);border-radius:var(--r);box-shadow:var(--ten);font-size:15px;color:var(--ink2)}
.niz-in>span{padding-left:24px;border-left:1.5px solid var(--beton)}
.niz-ssylki{margin-left:auto;display:flex;gap:16px}
.niz-ssylki a{color:var(--ink2)}
@media (max-width:760px){.niz-in{flex-direction:column;align-items:flex-start;gap:8px}.niz-in>span{padding:0;border:0}.niz-ssylki{margin:8px 0 0}.niz .logo{border:0}}