/*
Theme Name: Zapchasti Industrial Child
Template: storefront
Description: Дочерняя тема Storefront для запчастивмоскве.рф — промышленный дизайн v5 (асфальт/дорожный жёлтый/оранжевый). Наследует WooCommerce-шаблоны родителя, переопределяет header.php/footer.php/front-page.php.
Version: 1.0.37
Author: ГрандАвто
Text Domain: zapchasti-child
*/

:root{
  --asphalt:#1B1B1B;
  --asphalt-2:#262624;
  --yellow:#F5C400;
  --orange:#D64500;
  --concrete:#EDEAE2;
  --concrete-2:#E2DDCE;
  --steel:#5A5D57;
  --white:#FFFFFF;
  --success:#3C7A4B;
  --navy:#1A2B4A; /* родственный акцент из фирменного стиля grandautosnab.ru — только для секции #about, не для промышленной системы сайта */

  /* Аудит вёрстки 2026-07-22, пункты #4-5: единая шкала секционных H2 и единый
     вертикальный ритм секций — вместо разрозненных инлайн-значений. */
  --h2-section:32px;
  --h2-section-mobile:24px;
  --section-py:80px;
  --section-py-mobile:52px;
  --section-py-tight:56px 0 28px;
  --section-py-tight-mobile:40px 0 24px;
}


*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:'Work Sans', sans-serif;
  background:var(--concrete);
  color:var(--asphalt);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

h1,h2,h3,.display{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.005em;
  color:var(--asphalt);
  line-height:0.98;
  font-weight:800;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
.faq-item summary{font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;}
.mono{font-family:'JetBrains Mono', monospace;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{padding:var(--section-py) 0;}
@media (max-width:720px){ section{padding:var(--section-py-mobile) 0;} .wrap{padding:0 20px;} }

/* Секционные H2 (роль «заголовок секции») — единая шкала, не трогает h2 в
   товарной сетке WooCommerce (.woocommerce-loop-product__title — своя, более
   специфичная селекторная цепочка, всегда переопределяет эту базовую). */
h2{font-size:var(--h2-section);}
@media (max-width:720px){ h2{font-size:var(--h2-section-mobile);} }

/* Секции с осознанно уменьшенным вертикальным ритмом (например #process —
   сразу после hazard-полосы под трастовым блоком) — токен, а не магическое число. */
.section-tight{padding:var(--section-py-tight);}
@media (max-width:720px){ .section-tight{padding:var(--section-py-tight-mobile);} }

.hazard{
  height:14px;
  background:repeating-linear-gradient(135deg, var(--asphalt) 0 18px, var(--yellow) 18px 36px);
  background-size:200% 200%;
  animation:hazardMove 14s linear infinite;
}
@keyframes hazardMove{ from{background-position:0 0;} to{background-position:-101.8px 0;} }
@media (prefers-reduced-motion: reduce){ .hazard{animation:none;} }

.zm-header{
  position:sticky; top:0; z-index:100;
  background:var(--asphalt); color:var(--concrete);
}
/* У шапки свой контейнер, шире общего .wrap (1180px) — на широких экранах
   освобождает запас по бокам под 8 пунктов меню, не трогая ширину контента
   страниц (тот остаётся на .wrap/1180px без изменений). */
.header-row{max-width:1340px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:27px; letter-spacing:0.015em; color:var(--white); margin-right:12px; white-space:nowrap; flex-shrink:0;}
.logo span{color:var(--yellow); display:inline-block; animation:dotPulse 2.4s ease-in-out infinite;}
@keyframes dotPulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.4; transform:scale(1.3);} }
.zm-nav{display:flex; gap:6px; align-items:center; flex-wrap:nowrap;}
.zm-nav a{font-size:12px; font-weight:500; color:var(--concrete); text-transform:uppercase; letter-spacing:0.02em; transition:color .15s; white-space:nowrap;}
.zm-nav a:hover{color:var(--yellow);}
.header-phone{font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:500; color:var(--white); white-space:nowrap; text-align:right; flex-shrink:0;}
.header-phone a{color:inherit;}
.header-phone small{display:block; font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--white); font-weight:500;}
@media (max-width:1200px){ .zm-nav{display:none;} }

.zm-cart-link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  flex-shrink:0;
  color:var(--white);
  margin-left:10px;
  transition:color .15s;
}
.zm-cart-link:hover,
.zm-cart-link:focus-visible{color:var(--yellow);}
.zm-cart-count{
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; padding:0 3px;
  border-radius:50%;
  background:var(--yellow); color:var(--asphalt);
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.zm-cart-count:empty{display:none;}

/* Иконка звонка — дублирует .header-phone на мобильных, где текстовые номера
   физически не помещаются рядом с логотипом/корзиной/бургером (см. медиа-запрос ниже). */
.zm-phone-icon{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  flex-shrink:0;
  color:var(--white);
  transition:color .15s;
}
.zm-phone-icon:hover,
.zm-phone-icon:focus-visible{color:var(--yellow);}

@media (max-width:600px){
  .zm-cart-link{width:36px; height:36px; margin-left:2px;}
  .zm-phone-icon{width:36px; height:36px; margin-left:2px;}
  .zm-search-btn{width:36px; height:36px; margin-left:2px;}
}

/* Поиск в шапке — кнопка того же формата, что у корзины/звонка (44px, свободно
   помещается в кластер иконок на всех ширинах, см. проверку 390/800/1440 в отчёте).
   Сама панель с полем ввода — НЕ часть .header-row, а отдельная полоса под шапкой
   (тот же приём, что уже используется для .zm-mobile-nav), поэтому не отжимает
   .header-phone на узких экранах — та самая грабля из прошлого бага с корзиной. */
.zm-search-btn{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0; padding:0;
  color:var(--asphalt); background:var(--yellow); border:none; cursor:pointer;
  margin-left:10px; transition:transform .15s ease;
}
.zm-search-btn:hover,
.zm-search-btn:focus-visible{transform:translateY(-2px);}
/* Инлайн-SVG внутри <button> (в отличие от <a>) в этом флекс-контексте не берёт
   размер из HTML-атрибутов width/height — вычисляется width:0. Задаём размер
   явно в CSS, а не полагаемся на атрибуты SVG. */
.zm-search-btn svg{ width:20px; height:20px; flex-shrink:0; }

.zm-search-panel{
  display:none;
  background:var(--asphalt-2);
  border-top:1px solid #3A3A37;
  padding:16px 0;
}
.zm-search-panel.is-open{display:block;}
.zm-search-form{
  display:flex; gap:10px; max-width:640px; margin:0 auto; padding:0 32px;
}
@media (max-width:720px){ .zm-search-form{padding:0 20px;} }
.zm-search-input{
  flex:1; min-width:0; padding:12px 14px; border:2px solid var(--asphalt); background:var(--white);
  font-family:'Work Sans',sans-serif; font-size:14px; color:var(--asphalt);
}
.zm-search-form .btn{flex-shrink:0;}

.zm-search-results{
  display:none;
  max-width:640px; margin:10px auto 0; padding:0 32px;
  max-height:420px; overflow-y:auto;
}
@media (max-width:720px){ .zm-search-results{padding:0 20px;} }
.zm-search-results.is-visible{display:block;}
.zm-search-item{
  display:flex; align-items:center; gap:12px; padding:10px; background:var(--white);
  border:2px solid var(--asphalt); margin-bottom:8px; text-decoration:none;
  transition:box-shadow .15s ease, transform .15s ease;
}
.zm-search-item:hover,
.zm-search-item:focus-visible{box-shadow:4px 4px 0 var(--yellow); transform:translateY(-2px);}
.zm-search-item-img{
  width:48px; height:48px; object-fit:contain; background:var(--concrete);
  flex-shrink:0; border:1px solid var(--concrete-2);
}
.zm-search-item-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.zm-search-item-title{
  font-size:13.5px; font-weight:600; color:var(--asphalt); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.zm-search-item-sku{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--steel);}
.zm-search-item-sku mark{background:var(--yellow); color:var(--asphalt); padding:0 2px;}
.zm-search-item-price{
  font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:15px;
  color:var(--asphalt); white-space:nowrap; flex-shrink:0;
}
.zm-search-empty{
  padding:14px; background:var(--white); border:2px solid var(--asphalt);
  font-size:13.5px; color:var(--steel); text-align:center;
}

/* Бургер-меню — показывается только там, где .zm-nav скрыт (≤1200px) */
.zm-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px; height:44px;
  flex-shrink:0;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  margin-left:12px;
}
.zm-burger span{display:block; width:24px; height:2px; background:var(--white);}
.zm-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.zm-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.zm-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:1200px){ .zm-burger{display:flex;} }

.zm-mobile-nav{
  display:none;
  flex-direction:column;
  background:var(--asphalt);
  border-top:1px solid var(--asphalt-2);
}
.zm-mobile-nav.is-open{display:flex;}
.zm-mobile-nav a{
  padding:16px 20px;
  font-family:'Work Sans',sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--concrete);
  text-transform:uppercase;
  letter-spacing:0.02em;
  border-bottom:1px solid var(--asphalt-2);
}
.zm-mobile-nav a:hover,
.zm-mobile-nav a:focus-visible{color:var(--yellow); background:rgba(245,196,0,0.06);}
.zm-mobile-nav a:last-child{border-bottom:none;}
.zm-mobile-nav-phone{font-family:'JetBrains Mono',monospace; color:var(--yellow) !important;}

/* На мобильных текстовые номера в шапке заменяются одной иконкой-кнопкой
   (.zm-phone-icon) — рядом с логотипом/корзиной/бургером тексту физически
   некуда деться (см. .zm-phone-icon выше). Оба номера остаются доступны
   текстом в выпадающем мобильном меню (.zm-mobile-nav-phone). Логотип и
   отступы вокруг иконок тоже слегка уменьшены под самые узкие экраны (~390px). */
@media (max-width:600px){
  .logo{font-size:19px; margin-right:10px;}
  .zm-burger{margin-left:2px; width:36px; height:36px;}
  .header-phone{display:none;}
  .zm-phone-icon{display:flex;}
  .zm-search-btn{width:36px; height:36px; margin-left:2px;}
}

.hero{
  background:
    radial-gradient(ellipse 760px 480px at 88% -8%, rgba(214,69,0,.38), transparent 62%),
    radial-gradient(ellipse 620px 420px at 102% 104%, rgba(245,196,0,.14), transparent 58%),
    var(--asphalt);
  color:var(--concrete); position:relative; overflow:hidden; isolation:isolate;
}
.hero::before{
  content:'';
  position:absolute; inset:-60% -20%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(245,196,0,.10) 6deg, transparent 16deg, transparent 360deg);
  animation:beaconSweep 9s linear infinite;
  z-index:0; pointer-events:none;
}
@keyframes beaconSweep{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .hero::before{ animation:none; opacity:0; } }
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:stretch; padding:64px 0 48px;}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; padding-top:40px;} }

.stamp{
  display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
  font-size:11.5px; letter-spacing:0.06em; color:var(--asphalt); background:var(--yellow);
  padding:6px 12px; text-transform:uppercase; margin-bottom:22px; transform:rotate(-1deg);
}

.hero h1{font-size:58px; color:var(--white); margin-bottom:22px; max-width:640px;}
@media (max-width:960px){ .hero h1{font-size:38px;} }
.hero-sub{font-size:16.5px; color:#C9C6BB; max-width:480px; margin-bottom:32px;}

.cta-stack{display:flex; flex-direction:column; align-items:stretch; gap:8px; width:fit-content;}
.segtabs{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.segtabs button{
  font-family:'Work Sans',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em;
  padding:12px 20px; background:var(--yellow); color:var(--asphalt); border:2px solid var(--yellow); cursor:pointer; transition:.15s;
  white-space:nowrap;
}
.segtabs button:hover{opacity:0.85;}

.btn{
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:14.5px; padding:15px 28px;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.02em;
  transition:transform .12s ease; border:2px solid transparent;
}
.btn-primary{background:var(--yellow); color:var(--asphalt);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:3px 3px 0 var(--orange);}
.btn-outline{background:transparent; color:var(--white); border-color:#4A4944;}
.btn-outline:hover{border-color:var(--orange);}
.btn-outline-dark{background:transparent; color:var(--asphalt); border-color:var(--asphalt);}
.btn-outline-dark:hover{border-color:var(--orange); color:var(--orange);}

.bintag{
  background:var(--concrete); color:var(--asphalt); padding:22px; position:relative;
  border:2px solid var(--asphalt-2); height:100%; display:flex; flex-direction:column;
}
.bintag::before, .bintag::after{
  content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--asphalt); top:50%; transform:translateY(-50%);
}
.bintag::before{left:-8px;}
.bintag::after{right:-8px;}

.trust{background:var(--concrete);}
.trust-row{display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--asphalt); border-bottom:2px solid var(--asphalt);}
@media (max-width:700px){ .trust-row{grid-template-columns:1fr;} }
.trust-item{padding:28px 26px; border-right:2px solid var(--asphalt);}
.trust-item:last-child{border-right:none;}
@media (max-width:700px){ .trust-item{border-right:none; border-bottom:2px solid var(--asphalt);} .trust-item:last-child{border-bottom:none;} }
.trust-num{font-family:'Big Shoulders Display',sans-serif; font-size:40px; font-weight:800; line-height:1;}
.trust-label{font-size:12.5px; color:var(--steel); margin-top:6px; text-transform:uppercase; letter-spacing:0.03em;}
.etp-row{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  padding:16px 32px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--steel);
}
.etp-row b{color:var(--asphalt); font-family:'Work Sans',sans-serif; font-weight:700; text-transform:uppercase; font-size:11.5px;}

.kicker{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.06em; margin-bottom:10px; text-transform:uppercase; opacity:0.7;}
#about .kicker{color:var(--navy); opacity:1;}

.catalog-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; flex-wrap:wrap; gap:16px;}
.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
@media (max-width:1050px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .cat-grid{grid-template-columns:1fr;} }
.cat-tag{
  background:var(--white); border:2px solid var(--asphalt); padding:16px 14px 14px; position:relative; transition:.15s; display:block;
}
.cat-tag::before{
  content:''; position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; border:2px solid var(--asphalt);
}
.cat-loc{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--orange); margin-bottom:10px; display:block; font-weight:500;}
.cat-title{font-family:'Big Shoulders Display',sans-serif; font-size:16px; text-transform:uppercase; margin-bottom:6px; line-height:1.08; font-weight:700;}
.cat-sub{font-size:11px; color:var(--steel); line-height:1.35;}
.cat-tag:hover{box-shadow:6px 6px 0 var(--yellow); transform:translateY(-3px);}

.brand-filter{margin-bottom:48px;}
.brand-more{margin-top:18px;}
.brand-more summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:0.02em; color:var(--asphalt); padding:10px 0;
}
.brand-more summary::-webkit-details-marker{display:none;}
.brand-more summary::after{content:'+'; font-size:18px; color:var(--orange); transition:transform .3s ease;}
.brand-more[open] summary::after{transform:rotate(135deg);}

.brand-seo-intro{order:3; margin-bottom:40px; text-align:left;}
.brand-seo-intro p{max-width:72ch; margin:0 0 16px; line-height:1.6; color:var(--asphalt); text-align:left;}
.brand-seo-intro .etp-row{margin-top:24px; justify-content:flex-start; text-align:left; padding-left:0;}

.process-strip{display:flex; border-top:2px solid var(--asphalt); border-bottom:2px solid var(--asphalt);}
@media (max-width:800px){ .process-strip{flex-direction:column;} }
.process-step{flex:1; padding:32px 26px; border-right:2px solid var(--asphalt); position:relative;}
.process-step:last-child{border-right:none;}
@media (max-width:800px){ .process-step{border-right:none; border-bottom:2px solid var(--asphalt);} .process-step:last-child{border-bottom:none;} }
.process-num{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--orange); font-weight:700; margin-bottom:10px;}
.process-step h3{font-size:19px; margin-bottom:8px; font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase;}
.process-step p{font-size:13.5px; color:var(--steel);}

.case-card{
  background:var(--asphalt); color:var(--concrete); padding:36px;
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
}
@media (max-width:700px){ .case-card{grid-template-columns:1fr;} }
.case-metric{font-family:'Big Shoulders Display',sans-serif; font-size:38px; color:var(--yellow); line-height:1; white-space:nowrap; font-weight:800;}
.case-card p{font-size:14.5px; color:#D3D0C5;}

.about-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:0; border:2px solid var(--asphalt);}
@media (max-width:800px){ .about-grid{grid-template-columns:1fr;} }
.about-text{padding:40px;}
.about-text h2{margin-bottom:16px;}
.about-facts{display:grid; grid-template-columns:1fr 1fr; border-left:2px solid var(--asphalt);}
@media (max-width:800px){ .about-facts{border-left:none; border-top:2px solid var(--asphalt);} }
.fact-box{padding:22px; border-right:2px solid var(--asphalt); border-bottom:2px solid var(--asphalt);}
.fact-box:nth-child(2n){border-right:none;}
.fact-box .n{font-family:'Big Shoulders Display',sans-serif; font-size:28px; font-weight:800;}
.fact-box .l{font-size:11.5px; color:var(--steel); margin-top:4px; text-transform:uppercase;}

.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){ .reviews-grid{grid-template-columns:1fr;} }
.review-card{background:var(--white); border:2px solid var(--asphalt); padding:26px; display:flex; flex-direction:column; gap:16px; transition:.15s;}
.review-quote{font-size:14px; line-height:1.65; color:var(--asphalt);}
.review-role{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--orange); text-transform:uppercase; letter-spacing:0.03em; padding-top:14px; border-top:1px dashed #C8C3B4;}
.review-card:hover{box-shadow:6px 6px 0 var(--yellow); transform:translateY(-3px);}

.faq-list{border-top:2px solid var(--asphalt); max-width:900px;}
.faq-item{border-bottom:2px solid var(--asphalt);}
.faq-item summary{padding:22px 4px; font-family:'Big Shoulders Display',sans-serif; font-size:18px; text-transform:uppercase; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:24px; color:var(--orange); font-family:'Work Sans',sans-serif; flex-shrink:0; display:inline-block; transition:transform .3s ease;}
.faq-item[open] summary::after{transform:rotate(135deg);}
.faq-item p{padding:0 4px 22px; font-size:14px; color:var(--steel); max-width:700px; line-height:1.6;}

.final-cta{background:var(--asphalt); color:var(--concrete);}
.final-grid{display:grid; grid-template-columns:1fr 0.9fr; gap:48px;}
@media (max-width:850px){ .final-grid{grid-template-columns:1fr;} }
.final-cta h2{color:var(--white); margin-bottom:14px;}
.final-cta p{color:#B9B6AB; font-size:15px; margin-bottom:26px; max-width:440px;}
.contact-line{display:flex; gap:12px; align-items:baseline; margin-bottom:12px; font-size:15px;}
.contact-line .l{color:#8B887E; font-size:11.5px; width:110px; flex-shrink:0; text-transform:uppercase;}
.lead-form{background:var(--yellow); padding:30px;}
.lead-form h3{font-size:20px; color:var(--asphalt); margin-bottom:18px; font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase;}
.lead-form input{
  width:100%; padding:13px 14px; margin-bottom:12px; border:2px solid var(--asphalt); background:var(--concrete);
  font-family:'Work Sans',sans-serif; font-size:14px;
}
.lead-form .btn{width:100%; justify-content:center; background:var(--asphalt); color:var(--yellow);}
.lead-form .btn:disabled{opacity:0.6; cursor:default;}
.zm-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden;}
.zm-form-msg{margin-top:12px; font-size:13px; font-weight:500; min-height:1em;}
.zm-form-msg.is-success{color:var(--success);}
.zm-form-msg.is-error{color:#B3261E;}

footer{background:#111110; color:#8B887E; padding:28px 0; font-size:12.5px; position:relative;}
footer::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--yellow);}
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

::selection{background:var(--yellow); color:var(--asphalt);}

#scrollProgress{position:fixed; top:0; left:0; height:3px; background:var(--yellow); width:0%; z-index:200; transition:width .1s linear;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }
.cat-grid .reveal:nth-child(5n+1){transition-delay:0s;}
.cat-grid .reveal:nth-child(5n+2){transition-delay:.06s;}
.cat-grid .reveal:nth-child(5n+3){transition-delay:.12s;}
.cat-grid .reveal:nth-child(5n+4){transition-delay:.18s;}
.cat-grid .reveal:nth-child(5n+5){transition-delay:.24s;}
.reviews-grid .reveal:nth-child(2){transition-delay:.1s;}
.reviews-grid .reveal:nth-child(3){transition-delay:.2s;}
.process-strip .reveal:nth-child(2){transition-delay:.1s;}
.process-strip .reveal:nth-child(3){transition-delay:.2s;}
.process-strip .reveal:nth-child(4){transition-delay:.3s;}
.trust-row .reveal:nth-child(2){transition-delay:.1s;}
.trust-row .reveal:nth-child(3){transition-delay:.2s;}

/* Карточки товаров в каталоге WooCommerce (архив категории/магазин) — единый размер фото + акцентная цена */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img{
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--white);
  border:2px solid var(--asphalt);
  padding:12px;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  font-size:22px;
  color:var(--asphalt);
  display:block;
  margin:10px 0;
}
.woocommerce ul.products li.product .price del{
  opacity:0.5;
  font-weight:400;
  font-size:0.7em;
}
/* Реальная причина "зачёркнутой" цены: у символа ₽ есть свой горизонтальный
   штрих (часть дизайна знака рубля в любом шрифте), и при нулевом отступе перед
   суммой на маленьком размере он визуально сливается с первой цифрой, создавая
   иллюзию перечёркнутой цены. Небольшой отступ полностью убирает иллюзию. */
.woocommerce-Price-currencySymbol{ margin-right:3px; }
.woocommerce ul.products li.product .price ins{
  color:var(--orange);
  text-decoration:none;
}

/* Единый фирменный жёлтый акцент для всех кнопок WooCommerce (каталог,
   товар, корзина, чекаут) — вместо разномастных дефолтов Storefront. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  background:var(--yellow);
  color:var(--asphalt);
  font-family:'Work Sans',sans-serif;
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.02em;
  border:2px solid transparent;
  border-radius:0;
  padding:12px 26px;
  transition:transform .12s ease, background .12s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--yellow);
  transform:translateY(-2px);
}

/* Единый фирменный focus-outline (жёлтый) — вместо браузерного дефолта,
   на всех интерактивных элементах сайта: ссылки, кнопки, поля форм. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}

/* WCAG AA contrast fix: Storefront/WooCommerce default breadcrumb + pagination
   link colors fail 4.5:1 on this theme's warm background (#727272/#6d6d6d на
   #edeae2/#e7e4dd = 4.0/4.07:1). Переопределено в дочерней теме без правки родителя. */
.storefront-breadcrumb a,
.woocommerce-pagination .page-numbers{ color:#606060; }
.woocommerce-pagination .page-numbers li .page-numbers:not(.current){ color:#606060; }

/* Коммерческие страницы (page-commercial.php), 2026-07-22 — единственный
   новый компонент, которого не было в дизайн-системе: чек-маркированный
   список преимуществ. Всё остальное (.hero, .case-card, .process-strip,
   .review-card, .cat-grid, .final-cta/.lead-form) переиспользовано как есть. */
.commercial-bullets{list-style:none; padding:0; margin:0 0 8px; display:grid; gap:14px;}
.commercial-bullets li{padding-left:28px; position:relative; font-size:15px; color:var(--asphalt); line-height:1.5;}
.commercial-bullets li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--orange); font-weight:700;}

/* Аудит вёрстки 2026-07-22: у сайта было два несинхронизированных контейнера —
   кастомный .wrap (1180px, 32/32/20px) на главной/коммерческих страницах и
   дефолтный Storefront .col-full (~1148px, em-based отступы) на каталоге,
   категориях, марках, товаре и простых страницах — отсюда «прыжки» левого края
   и разная ширина контента между типами страниц. Приводим .col-full к точным
   параметрам .wrap, чтобы вся система контейнеров сайта была одна. */
.col-full{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding:0 32px;
  box-sizing:border-box;
}
@media (max-width:720px){
  .col-full{ padding:0 20px; }
}

/* Аудит вёрстки 2026-07-22, пункт #6: заголовок Storefront-страниц (каталог,
   категории, марки, простые страницы) не адаптируется на мобильных — родитель
   задаёт h1 фиксированным em-размером (~59px) без медиа-запроса. */
@media (max-width:600px){
  .entry-title, .page-title{ font-size:32px; }
}