/* SPANTAR patch layer — CSS. v14 (26.07.2026) */

/* ===== Видео-фон: вуаль + матовая карточка текста БЕЗ зависимости от .has-bgvideo =====
   Класс has-bgvideo при мягкой навигации не держится (его перетирает React-лейаут),
   поэтому вуаль и матовый .prose привязываем к наличию нашего <video class="pagebg-video">.
   Патч всегда создаёт это видео на страницах о-компании/доставка и удаляет при уходе. */
body:has(.pagebg-video) .pagebg-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:var(--bg,#0C1613);opacity:.6;
}
body:has(.pagebg-video) main,
body:has(.pagebg-video) .site-footer{position:relative;z-index:2}
body:has(.pagebg-video) main .prose{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid var(--line,#E2EAE5);
  border-radius:var(--r,20px);
  padding:30px 34px;
  box-shadow:var(--shadow,0 18px 44px -18px rgba(16,49,36,.18));
}
[data-theme="dark"] body:has(.pagebg-video) main .prose{background:rgba(18,32,26,.84)}
body:has(.pagebg-video) main .crumbs{text-shadow:0 1px 10px rgba(0,0,0,.18)}
[data-theme="dark"] body:has(.pagebg-video) main .crumbs{text-shadow:0 1px 12px rgba(0,0,0,.5)}
@media (max-width:640px){ body:has(.pagebg-video) main .prose{padding:22px 18px} }


/* #2 Логотип в футере: блочный flex */
.f-logo{display:flex !important;align-items:center;gap:12px;width:-moz-fit-content;width:fit-content}
/* #3 Крыша логотипа в футере — зелёная как в хедере (svg stroke=currentColor) */
.f-logo svg{color:#2FC08A}

/* ===== Блог: хаб — карточки кластеров в адаптивную сетку (убираем пустоту справа) ===== */
.blog-hub-head{margin:6px 0 4px}
.blog-hub-head h1{margin:0 0 8px}
.blog-hub-head p{color:var(--mut,#6C7E74);max-width:760px;margin:0}
.blog-hub-head a{color:#2FC08A;text-decoration:underline;text-underline-offset:2px}
.blog-hub-head a:hover{opacity:.85}
.blog-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin-top:24px}
.blog-cluster{background:var(--surface,#fff);border:1px solid var(--line,#E2EAE5);border-radius:var(--r,20px);
  padding:20px 24px;box-shadow:var(--shadow,0 18px 44px -18px rgba(16,49,36,.18))}
.blog-cluster h2{margin:0 0 12px;font-size:18px;line-height:1.2}
.blog-cluster ul{margin:0;padding:0 0 0 1.15em;list-style:disc}
.blog-cluster li::marker{color:#2FC08A}
.blog-cluster li{margin:7px 0;line-height:1.35}
.blog-cluster a{color:#2B3B33;text-decoration:none;transition:color .15s}
.blog-cluster a:hover{color:#2FC08A;text-decoration:underline}
[data-theme="dark"] .blog-cluster{background:rgba(18,32,26,.72)}
[data-theme="dark"] .blog-cluster a{color:#CDD8D1}
[data-theme="dark"] .blog-cluster a:hover{color:#2FC08A}

/* #1 Популярные товары: убрать «Брезентовая штора» → 8 (2×4) */
.pcard:has(a[href$="/product/shtora-3x2-450/"]){display:none !important}

/* ============ Контакты — две равные карточки ============ */
.wrap > .sp-contacts-title{margin:6px 0 6px;line-height:1.05}

.wrap .sp-contacts-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  align-items:stretch;   /* равная высота колонок */
  margin-top:12px;
}

/* левая карточка — контакты */
.wrap .sp-contacts-grid > .prose{
  max-width:none; margin:0;
  display:flex; flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--line,#E2EAE5);
  border-radius:var(--r,20px);
  padding:30px 34px;
  box-shadow:var(--shadow,0 18px 44px -18px rgba(16,49,36,.18));
}
[data-theme="dark"] .wrap .sp-contacts-grid > .prose{background:rgba(18,32,26,.72)}
.wrap .sp-contacts-grid > .prose > *:first-child{margin-top:0}
.wrap .sp-contacts-grid > .prose h2{margin-top:26px}

/* правая карточка — карта, тянется на всю высоту */
.sp-contacts-map{
  height:100%;
  display:flex; flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--line,#E2EAE5);
  border-radius:var(--r,20px);
  padding:16px;
  box-shadow:var(--shadow,0 18px 44px -18px rgba(16,49,36,.18));
}
[data-theme="dark"] .sp-contacts-map{background:rgba(18,32,26,.72)}
.sp-map-head{
  font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink,#101F18);
  margin:4px 6px 12px; display:flex; align-items:center; gap:9px;
}
.sp-map-head::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--em,#0E8A5F);box-shadow:0 0 0 4px var(--em-soft,#DCF0E7)}
[data-theme="dark"] .sp-map-head{color:var(--hd-fg,#EAF4EE)}
.sp-map-frame{flex:1 1 auto;min-height:360px;border-radius:14px;overflow:hidden;line-height:0;border:1px solid var(--line,#E2EAE5)}
.sp-contacts-map iframe{display:block;width:100%;height:100%;min-height:360px;border:0}
.sp-map-cap{font-size:13px;line-height:1.5;color:var(--mut,#6C7E74);margin:12px 6px 4px}

@media (max-width:980px){
  .wrap .sp-contacts-grid{grid-template-columns:1fr;gap:20px}
  .sp-contacts-map{height:auto}
  .sp-map-frame,.sp-contacts-map iframe{min-height:300px}
}

/* v25 — #4 форма «Где купить» в карточке товара: контраст полей в светлой и тёмной теме */
.buy-box .fform input{background:var(--bg);border:1.5px solid var(--line);color:var(--ink)}
.buy-box .fform input::placeholder{color:var(--mut);opacity:1}
.buy-box .fform input:focus{border-color:var(--em)}
.buy-box .fform small{color:var(--mut);opacity:1}
.buy-box .fform b{color:var(--ink)}
/* v25 — #2 хедер: переключатель языка того же размера/вида, что кнопка темы */
.hctl > .lang-menu > details > summary,
.hctl > #themeBtn{height:38px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--hd-border);border-radius:12px;background:var(--hd-soft)}
.hctl > .lang-menu > details > summary{padding:0 12px;gap:6px}

/* v27 — #хедер: убрать обводку (рамку) у переключателя языка и кнопки темы, оставить мягкий фон */
.hctl > .lang-menu > details > summary,
.hctl > #themeBtn{border-color:transparent}

/* v28 — блок языка: схлопнуть внешнюю обёртку .lang-menu (у неё был padding 8px + рамка → высота 56px). Делает блок компактным 38px, как кнопка темы. */
.hctl .lang-menu{padding:0 !important;border:none !important;background:none !important;height:38px !important;display:inline-flex !important;align-items:center !important}
.hctl .lang-menu > details{height:38px}

/* v29 — плитка «Клейкие ленты»: широкий баннер (2:1) в почти квадратной плитке — кадрируем от левого края, чтобы не срезалась «С» в слове СКОТЧ */
.cat img[src*="cat-kleykaya"]{object-position:left center}

/* ==================== v30 — МОБИЛЬНЫЙ АДАПТИВ (десктоп не затрагивается) ==================== */
/* нижний нав-таб скрыт везде, кроме телефонов */
.sp-tabbar{display:none}

@media (max-width:768px){
  /* 3. убрать верхнюю зелёную плашку */
  .topbar{display:none !important}

  /* 4. переключатель языка и темы — к правому краю */
  .hrow .hctl{margin-left:auto}

  /* 1. нижний нав-таб */
  .sp-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--surface,#fff);border-top:1px solid var(--line,#E2EAE5);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 24px rgba(0,0,0,.07)
  }
  .sp-tabbar a{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-decoration:none;color:var(--mut,#6C7E74);font-size:11px;line-height:1.15;padding:5px 2px;
    border-radius:12px;transition:color .18s,background .18s;min-width:0
  }
  .sp-tabbar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .sp-tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .sp-tabbar a.on{color:var(--em,#0E8A5F);background:var(--em-soft,#DCF0E7)}
  body{padding-bottom:70px}
  .cookiebar{bottom:74px}

  /* 2. карусели на ГЛАВНОЙ: категории и популярные товары (следующая карточка подглядывает) */
  body:has(.hero) .sec .grid,
  body:has(.hero) .sec .cats{
    display:flex !important;grid-template-columns:none !important;
    overflow-x:auto;overflow-y:hidden;gap:12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px 16px 10px;margin-left:-16px;margin-right:-16px;
    scrollbar-width:none
  }
  body:has(.hero) .sec .grid::-webkit-scrollbar,
  body:has(.hero) .sec .cats::-webkit-scrollbar{display:none}
  body:has(.hero) .sec .grid > *,
  body:has(.hero) .sec .cats > *{
    flex:0 0 78%;scroll-snap-align:start;min-width:0
  }

  /* 5. блок «СПАНТАР — укрывные материалы»: центрируем содержимое */
  .about{text-align:center}
  .about .geo{justify-content:center;flex-wrap:wrap}
  .about .stats{justify-items:center;text-align:center}
  .about > div > p, .about h2{margin-left:auto;margin-right:auto}

  /* 6. футер — все блоки по центру */
  .site-footer .frow{align-items:center;text-align:center}
  .site-footer .frow > *{align-items:center}
  .site-footer .fform form{margin-left:auto;margin-right:auto}
  .site-footer .soc{justify-content:center}
  .site-footer .fbottom{text-align:center}
  .site-footer .frow ul,.site-footer .frow nav{align-items:center}
}

/* ==================== v31 — МОБИЛЬНАЯ КОМПАКТНОСТЬ (десктоп не затрагивается) ==================== */
@media (max-width:768px){
  /* 1. блок «СПАНТАР — укрывные материалы»: компактные чипы и плитки цифр */
  .about{padding:22px 16px}
  .about .geo{gap:8px}
  .about .geo > *{padding:6px 12px;font-size:12.5px;line-height:1.25}
  .about .stats{gap:10px;margin-top:16px}
  .about .stats .stat{padding:14px 10px;border-radius:14px}
  .about .stats .stat b{font-size:19px;line-height:1.15;white-space:nowrap;display:block}
  .about .stats .stat span,.about .stats .stat p{font-size:11.5px;line-height:1.3;margin-top:4px}

  /* 2. футер: убираем колонку «Покупателям» (эти разделы есть в нижнем нав-табе) */
  .site-footer .frow > div:nth-child(3){display:none}

  /* 3. страница «Каталог»: плитки категорий компактнее, по 2 в ряд */
  body:not(:has(.hero)) .cats{grid-template-columns:1fr 1fr !important;gap:10px}
  body:not(:has(.hero)) .cat{min-height:132px;padding:12px;border-radius:16px}
  body:not(:has(.hero)) .cat b,body:not(:has(.hero)) .cat strong{font-size:13.5px;line-height:1.2}
  body:not(:has(.hero)) .cat span,body:not(:has(.hero)) .cat p{font-size:11px;line-height:1.25}

  /* 4. карточки товаров в категории: плитка 2 в ряд (по образцу маркетплейсов) */
  body:not(:has(.hero)) .grid{grid-template-columns:1fr 1fr !important;gap:10px}
  body:not(:has(.hero)) .pcard{border-radius:14px}
  body:not(:has(.hero)) .pcard .imgw{height:150px;padding:8px}
  body:not(:has(.hero)) .pcard .pb{padding:8px 9px 6px}
  body:not(:has(.hero)) .pcard .pb b{font-size:12.5px;line-height:1.25;display:block}
  body:not(:has(.hero)) .pcard .short{font-size:11px;line-height:1.25;margin-top:2px}
  body:not(:has(.hero)) .pcard .btn-row{padding:0 9px 9px;gap:6px}
  body:not(:has(.hero)) .pcard .mchip{font-size:11.5px;padding:8px 4px;border-radius:9px}
  body:not(:has(.hero)) .pcard .hit,body:not(:has(.hero)) .pcard [class*="badge"]{font-size:10.5px;padding:3px 8px}
}

/* ==================== v32 — КОНТАКТЫ/СТАТИКА на мобиле: текст ближе к левому краю + кликабельные телефоны ==================== */
@media (max-width:768px){
  .prose{padding:20px 16px 10px}
  .prose ul{margin-left:0;padding-left:20px}
  .prose ol{margin-left:0;padding-left:22px}
  .prose li{padding-left:2px}
  .prose h2{margin-left:0}
  .sp-tap{color:var(--em,#0E8A5F);text-decoration:none;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--em,#0E8A5F) 45%,transparent)}
}

/* v32.1 — перебиваем более специфичные правила отступов на мобиле (контакты и страницы с видео-фоном) */
@media (max-width:768px){
  .wrap .sp-contacts-grid > .prose{padding:20px 16px}
  body:has(.pagebg-video) main .prose{padding:20px 16px}
  .wrap .sp-contacts-grid > .prose h2{margin-top:20px}
}