@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter.woff2') format('woff2')}

/* ============================================================
   FastRocket — Redesign (светлая тема: белый + синий)
   Дизайн-система
   ============================================================ */

:root{
  /* Тема одна — светлая. Раньше здесь жила тёмная палитра, а светлая лежала
     отдельным файлом light.css и накрывала её через класс skin-light на <body>.
     Переключатель убран, палитра перенесена сюда, оверлей удалён. */
  color-scheme: light;

  /* поверхности */
  --bg:        #ffffff;
  --bg-2:      #f4f7fc;
  --surface:   #ffffff;
  --surface-2: #f2f6fb;
  --border:    #e3e9f1;
  --border-2:  #cdd7e4;

  /* текст */
  --text:      #0f1b2d;
  --muted:     #566377;
  --muted-2:   #8694a6;

  /* акцент */
  --accent:    #1f6bff;
  --accent-2:  #0a4fe0;
  --accent-ink:#ffffff;
  --accent-grad: linear-gradient(135deg,#3b86ff 0%,#1f5fff 100%);
  --accent-soft: rgba(31,107,255,.08);  /* подложка иконок, бейджей, выбранных пунктов */
  --accent-line: rgba(31,107,255,.2);   /* их рамка */
  --glow: 0 0 0 1px rgba(31,107,255,.18), 0 12px 40px -12px rgba(31,107,255,.32);

  /* тени: одна шкала на весь сайт (раньше в каждом блоке была своя, часть — от тёмной темы) */
  --sh-1: 0 1px 2px rgba(15,27,45,.05);
  --sh-2: 0 1px 2px rgba(15,27,45,.04), 0 10px 28px -14px rgba(15,27,45,.16);
  --sh-3: 0 1px 2px rgba(15,27,45,.04), 0 22px 48px -22px rgba(15,27,45,.26);
  --sh-accent: 0 8px 20px -10px rgba(31,107,255,.55);

  /* подложка фотографий товаров: белый фон снимков сливается с ней (mix-blend-mode),
     и карточки с разными фото выглядят одной серией */
  --photo-bg: #f3f6fa;

  /* статусы. Значения подобраны под белый фон: прежние (зелёный, янтарный,
     розовый) читались только на графите — на белом контраст падал до ~2:1. */
  --ok:     #0f7a4f;
  --warn:   #9a6700;
  --danger: #d92d3f;

  /* скелетоны загрузки */
  --skel:      #e6ebf3;
  --skel-hi:   #ffffff;
  --skel-img:  #dfe5ee;                 /* подложка фото всегда белая — скелетон светло-серый */
  --skel-img-hi: #ffffff;
  --radius-lg: 20px;                    /* крупные плашки: акция, CTA, блок «на тест» */
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1280px;
  --gap: 24px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.12; font-weight:800; letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
p{margin:0 0 1em}
::selection{background:var(--accent); color:var(--accent-ink)}

.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:84px 0}
.section--tight{padding:56px 0}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.eyebrow svg{width:15px; height:15px; flex-shrink:0}
.section-head{max-width:720px; margin:0 0 40px}
.section-head p{color:var(--muted); font-size:1.05rem; margin:0}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; border-radius:var(--radius-sm); font-weight:700; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:.2s ease; white-space:nowrap;
  line-height:1.2; text-align:center; min-height:46px; background-clip:padding-box}
.btn svg{width:18px;height:18px; flex-shrink:0}
.btn--primary{background-color:var(--accent); background-image:var(--accent-grad); color:var(--accent-ink); box-shadow:var(--sh-accent)}
.btn--primary:hover{transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(31,107,255,.6); filter:brightness(1.05)}
.btn--primary:active{transform:none; filter:brightness(.97)}
.btn--ghost{background:var(--surface); color:var(--text); border-color:var(--border-2); box-shadow:var(--sh-1)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled,.btn.disabled,.woocommerce .button.disabled,.woocommerce .button:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn--block{width:100%}
.btn--sm{padding:9px 16px; font-size:.85rem}
/* Кнопка на время сохранения. Страница кабинета не кэшируется и перезагружается пару
   секунд — без отклика форму отправляли второй раз (см. account.js). Иконку на это время
   подменяет крутилка: подпись меняет скрипт, гасить кнопку через disabled нельзя. */
.is-busy{pointer-events:none; opacity:.7}
.btn.is-busy{opacity:.85; transform:none; box-shadow:none}
.btn.is-busy>svg{display:none}
.btn.is-busy::before{content:""; width:18px; height:18px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; opacity:.9;
  animation:fr-spin .7s linear infinite}
@keyframes fr-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.btn.is-busy::before{animation-duration:2.4s}}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{background:var(--bg-2); border-bottom:1px solid var(--border); font-size:.84rem; color:var(--muted)}
.topbar .container{display:flex; align-items:center; justify-content:space-between; height:40px}
.topbar a{color:var(--muted); transition:.15s}
.topbar a:hover{color:var(--accent)}
.topbar__left{display:flex; gap:22px; align-items:center}
.topbar__right{display:flex; gap:18px; align-items:center}
.topbar .ic{display:inline-flex; gap:7px; align-items:center}
.topbar svg{width:15px;height:15px;color:var(--accent)}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid #edf1f6}
.site-header.scrolled{background:rgba(255,255,255,.96); box-shadow:0 6px 24px -18px rgba(15,27,45,.35)}
/* на мобильных убираем backdrop-filter — он пересчитывает размытие на каждом кадре скролла (рывки) */
@media (max-width:1024px){.site-header,.site-header.scrolled{background:rgba(255,255,255,.98); backdrop-filter:none; -webkit-backdrop-filter:none}}
/* Шапка не помещалась: при 1440 px кнопка «Заказать звонок» вылезала за сетку на 72 px,
   а на 1280 обрезалась краем окна. Отступы ужаты, ниже 1240 px кнопка — одна иконка. */
.header-main{display:flex; align-items:center; gap:18px; height:72px}

.logo{display:flex; align-items:center; gap:10px; flex-shrink:0}
.logo svg{width:30px;height:30px;color:var(--accent)}
.logo__img{height:50px; width:auto; display:block}
.logo b{font-size:1.28rem; font-weight:800; letter-spacing:.02em}
.logo b span{color:var(--accent)}

.primary-nav{flex:1; min-width:0}
.primary-menu{list-style:none; margin:0; padding:0; display:flex; gap:2px; align-items:center}
.primary-menu a{display:block; padding:9px 12px; border-radius:9px; font-weight:600; font-size:.92rem; color:var(--text); transition:.15s}
.primary-menu > li{position:relative}
.primary-menu > li > a{white-space:nowrap}
.primary-menu > li > a:hover,
.primary-menu > li:hover > a{color:var(--accent); background:var(--accent-soft)}
.primary-menu .sub-menu{list-style:none; margin:0; padding:6px; position:absolute; top:calc(100% + 6px); left:0;
  min-width:280px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--sh-3); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:.18s; z-index:60}
/* мостик над зазором, чтобы меню не схлопывалось, пока курсор идёт к нему */
.primary-menu .sub-menu::before{content:""; position:absolute; left:0; right:0; top:-8px; height:8px}
.primary-menu li:hover > .sub-menu{opacity:1; visibility:visible; transform:translateY(0)}
.primary-menu .sub-menu a{padding:9px 12px; font-weight:500; font-size:.9rem; color:var(--muted); border-radius:8px}
.primary-menu .sub-menu a:hover{color:var(--accent); background:var(--accent-soft)}
.primary-menu .sub-menu .sub-menu{top:-7px; left:100%}
.primary-menu .menu-item-has-children > a::after{content:""; width:5px; height:5px; margin:0 0 3px 8px; display:inline-block;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.55; transition:transform .2s}
.primary-menu > li:hover > a::after{transform:translateY(2px) rotate(225deg)}
.mobile-nav .menu-item-has-children > a::after{display:none}

.header-actions{display:flex; align-items:center; gap:2px; flex-shrink:0; margin-left:auto}
.icon-btn{width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; color:var(--muted); position:relative; transition:.15s; background:transparent; border:0; cursor:pointer}
.icon-btn:hover{color:var(--accent); background:var(--accent-soft)}
.icon-btn svg{width:21px;height:21px}
.icon-btn .badge{position:absolute; top:3px; right:3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:.66rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff}
.header-actions .btn{margin-left:10px}
@media (max-width:1240px){
  .header-actions .btn{width:46px; padding:0}
  .header-actions .btn .btn__label{display:none}
}
/* меню из пяти пунктов перестаёт помещаться раньше, чем на планшете: с 1100 px — бургер */
@media (max-width:1100px){
  .primary-nav{display:none}
  .burger{display:inline-flex}
}
.burger{display:none}
/* то же по факту, а не по ширине окна: классы ставит скрипт в header.php, когда меню не влезает */
.site-header.hdr-icon .header-actions .btn{width:46px; padding:0}
.site-header.hdr-icon .header-actions .btn .btn__label{display:none}
.site-header.hdr-burger .primary-nav{display:none}
.site-header.hdr-burger .burger{display:inline-flex}

/* search overlay */
.search-pop{position:absolute; top:100%; right:24px; margin-top:10px; width:min(440px,86vw);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px;
  box-shadow:var(--sh-3); display:none}
.search-pop.open{display:block}
.search-pop form{display:flex; gap:8px}
.search-pop input{flex:1; background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:11px 14px; font-size:.95rem; outline:none}
.search-pop input:focus{border-color:var(--accent)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(900px 500px at 78% -10%, rgba(31,107,255,.10), transparent 60%),
  radial-gradient(700px 500px at 5% 110%, rgba(31,107,255,.07), transparent 55%), var(--bg)}
.hero__inner{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-top:80px; padding-bottom:88px}
.hero__content{max-width:620px}
.hero h1{margin:.35em 0 .35em}
.hero h1 em{font-style:normal; color:transparent; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text}
.hero__sub{font-size:1.15rem; color:var(--muted); margin-bottom:30px}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap}
.hero__points{display:flex; gap:10px 22px; margin-top:30px; flex-wrap:wrap}
.hero__point{display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:500; color:var(--muted)}
.hero__point svg{width:17px;height:17px;color:var(--accent)}

.hero__visual{position:relative; display:flex; align-items:center; justify-content:center}
/* фото без рамки и тени — сливается с фоном */
/* без z-index: он создаёт свой слой (stacking context), и multiply
   у фото смешивался бы с пустотой рамки, а не с фоном hero */
.hero__frame{position:relative; width:100%; background:transparent}
/* белый фон снимка растворяется в голубом свечении hero — без «листа бумаги» под фото */
/* Фон у снимка не чисто белый, поэтому кромку дополнительно гасим маской по краям —
   иначе на свечении проступал светлый прямоугольник. */
.hero__frame img{width:100%; height:auto; display:block; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}

/* ============================================================
   STATS strip
   ============================================================ */
.stats{background:transparent}
/* Сетки, где число карточек задаёт админка (преимущества, услуги, шаги): не больше четырёх
   колонок, а три карточки встают на всю ширину, без пустой четвёртой ячейки. */
.stats__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(max(200px,calc((100% - 72px) / 4)),1fr)); gap:0 24px}
.stat{padding:30px 0; display:flex; gap:14px; align-items:flex-start}
/* иконка — в той же плашке, что у услуг, блока «на тест» и кабинета */
.stat svg{width:44px; height:44px; padding:11px; border-radius:12px; color:var(--accent); flex-shrink:0;
  background:var(--accent-soft); border:1px solid var(--accent-line)}
.stat b{display:block; font-size:1rem; font-weight:700; margin-top:1px}
.stat span{display:block; font-size:.86rem; line-height:1.45; color:var(--muted); margin-top:3px}

/* ============================================================
   CATEGORIES (catalog)
   ============================================================ */
.cats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
/* Плитка категории: фото сверху на светлой подложке, подпись под ним. Раньше подпись
   лежала поверх фото под белой вуалью — на тёмных снимках она тонула, а кадрирование
   cover резало подсветки пополам. Фон снимков (белый) растворяется в подложке. */
.cat-card{position:relative; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--photo-bg); display:flex; flex-direction:column; transition:.22s; box-shadow:var(--sh-1)}
/* было background-image в инлайн-стиле — браузер такую картинку не откладывает; теперь <img> */
.cat-card__img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  mix-blend-mode:multiply; transition:transform .35s ease}
.cat-card:hover{transform:translateY(-3px); border-color:var(--border-2); box-shadow:var(--sh-3)}
.cat-card:hover .cat-card__img{transform:scale(1.04)}
.cat-card__body{position:relative; background:var(--surface); border-top:1px solid var(--border);
  padding:14px 52px 15px 16px; flex:1}
.cat-card h3{font-size:1rem; line-height:1.25; margin:0 0 3px; color:var(--text); letter-spacing:-.01em}
.cat-card span{font-size:.8rem; color:var(--muted)}
.cat-card .arrow{position:absolute; right:14px; bottom:16px; z-index:2; width:30px; height:30px; border-radius:9px;
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent); transition:.2s}
.cat-card:hover .arrow{background:var(--accent); color:var(--accent-ink)}
.cat-card .arrow svg{width:15px;height:15px}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.products-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.product-card{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.2s; box-shadow:var(--sh-1)}
.product-card:hover{border-color:var(--border-2); transform:translateY(-3px); box-shadow:var(--sh-3)}
/* Фото на общей светлой подложке: белый фон снимков растворяется в ней (multiply), снимки
   «с интерьером» остаются как есть, но в одинаковой рамке — сетка читается одной серией. */
.product-card__media{position:relative; aspect-ratio:1/1; background:var(--photo-bg); overflow:hidden; display:block;
  margin:6px 6px 0; border-radius:calc(var(--radius) - 5px)}
.product-card__media img{width:100%; height:100%; object-fit:contain; padding:14px; mix-blend-mode:multiply; transition:.3s}
.product-card:hover .product-card__media img{transform:scale(1.04)}
.product-card__fav{position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--border); color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.18s; box-shadow:var(--sh-1)}
.product-card__fav:hover{color:#e5484d; border-color:#f3c4c6}
.product-card__fav svg{width:16px;height:16px}
.product-card__fav.active{color:#e5484d}
.product-card__fav.active svg{fill:currentColor}
.product-card__body{padding:14px 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1}
.product-card__title{font-size:.95rem; font-weight:600; line-height:1.35; color:var(--text); display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em}
.product-card__title:hover{color:var(--accent)}
.product-card__meta{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:auto}
.product-card__price{font-size:1.18rem; font-weight:800}
.product-card__price.req{font-size:.95rem; font-weight:600; color:var(--muted)}
.stock{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ok); white-space:nowrap}
.stock--order{color:var(--accent)}
.stock--out{color:var(--muted)}
.stock svg{width:13px;height:13px}
.product-card__btn{margin-top:2px; width:100%; white-space:normal; line-height:1.2}
/* «Выбрать параметры» ведёт на страницу товара, а не кладёт в корзину — поэтому
   тональная кнопка: сплошная синяя остаётся за действием «В корзину». Иначе в сетке
   стоит стена одинаковых синих кнопок, и главное действие не выделяется. */
.product-card__btn:not(.js-cart-add){background:var(--accent-soft); background-image:none; color:var(--accent);
  box-shadow:none; border-color:var(--accent-line)}
.product-card__btn:not(.js-cart-add):hover{background:var(--accent); color:var(--accent-ink); filter:none;
  box-shadow:var(--sh-accent)}
/* Озон-стиль: «В корзину» → степпер «− N в корзине +» */
/* «В корзину» и степпер лежат в одной ячейке и плавно перетекают друг в друга (без скачка высоты) */
.product-card__cart{display:grid; margin-top:2px}
.product-card__cart > .js-cart-add,
.product-card__cart > .qty-cart{grid-area:1 / 1; transition:opacity .2s ease, transform .2s ease}
.product-card__cart .is-off{opacity:0; transform:scale(.92); pointer-events:none}
.qty-cart{display:flex; align-items:stretch; width:100%; min-height:46px;
  border:1px solid var(--accent); border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface))}
.qty-cart__btn{flex:0 0 46px; border:0; background:transparent; color:var(--accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s ease}
.qty-cart__btn:hover{background:color-mix(in srgb, var(--accent) 22%, transparent)}
.qty-cart__btn:active{transform:scale(.92)}
.qty-cart__btn svg{width:17px; height:17px}
.qty-cart__label{flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:.85rem; font-weight:700; color:var(--text); white-space:nowrap; user-select:none}
.qty-cart__label .js-cart-qty{color:var(--accent)}

/* ============================================================
   СКЕЛЕТОНЫ ЗАГРУЗКИ
   ============================================================
   Два разных случая:
   .fr-imgskel — фото карточки/товара ещё летит (класс вешает main.js на .product-card__media),
   .product-card--skel — карточки, которых ещё нет: подгрузка «Показать ещё» и смена сортировки.
   Геометрия скелетона повторяет реальную карточку теми же классами, поэтому при подстановке
   настоящих товаров сетка не дёргается. */
@keyframes fr-shimmer{from{transform:translateX(-100%)} to{transform:translateX(100%)}}
@keyframes fr-card-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* --- фото ещё грузится ---
   Класс стоит прямо в разметке (иначе заглушка не успевает появиться: main.js приезжает позже
   самих фотографий), поэтому все правила висят на .fr-js — без JavaScript снять их некому,
   и тогда карточка выглядит как раньше. Шиммер включает is-anim у карточек рядом с экраном. */
.fr-js .fr-imgskel{position:relative; overflow:hidden}
.fr-js .fr-imgskel::before,.fr-js .fr-imgskel::after{content:''; position:absolute; inset:0;
  pointer-events:none; transition:opacity .3s ease}
.fr-js .fr-imgskel::before{background:var(--skel-img)}
.fr-js .fr-imgskel::after{background:linear-gradient(100deg,transparent 25%,var(--skel-img-hi) 50%,transparent 75%);
  transform:translateX(-100%)}
.fr-js .fr-imgskel.is-anim::after{animation:fr-shimmer 1.5s ease-in-out infinite}
.fr-js .fr-imgskel img{opacity:0; transition:opacity .22s ease}
.fr-js .fr-imgskel.is-ready::before,.fr-js .fr-imgskel.is-ready::after{opacity:0}
.fr-js .fr-imgskel.is-ready::after{animation:none}
.fr-js .fr-imgskel.is-ready img{opacity:1}

/* --- карточка целиком --- */
.skel{position:relative; overflow:hidden; background:var(--skel); border-radius:8px}
.skel::after{content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 25%,var(--skel-hi) 50%,transparent 75%);
  transform:translateX(-100%); animation:fr-shimmer 1.5s ease-in-out infinite}
.product-card--skel{pointer-events:none}
.product-card--skel:hover{transform:none; box-shadow:none; border-color:var(--border)}
.product-card--skel .product-card__media{background:var(--skel-img)}
.product-card--skel .product-card__media::after{background:linear-gradient(100deg,transparent 25%,var(--skel-img-hi) 50%,transparent 75%)}
.product-card--skel .skel--line{height:13px}
.product-card--skel .skel--line-2{width:62%}
.product-card--skel .skel--price{display:block; width:92px; height:19px}
.product-card--skel .skel--stock{display:block; width:74px; height:12px; border-radius:6px}
.product-card--skel .skel--btn{height:46px; border-radius:10px; margin-top:2px}
/* волна: соседние карточки шиммерят с небольшим сдвигом */
.product-card--skel:nth-child(4n+2) .skel::after,
.product-card--skel:nth-child(4n+2) .product-card__media::after{animation-delay:.1s}
.product-card--skel:nth-child(4n+3) .skel::after,
.product-card--skel:nth-child(4n+3) .product-card__media::after{animation-delay:.2s}
.product-card--skel:nth-child(4n+4) .skel::after,
.product-card--skel:nth-child(4n+4) .product-card__media::after{animation-delay:.3s}

/* подставленные товары не появляются рывком */
.fr-card-in{animation:fr-card-in .4s ease both}

@media (prefers-reduced-motion: reduce){
  .fr-js .fr-imgskel::after,.skel::after,.product-card--skel .product-card__media::after{animation:none; opacity:.5}
  .fr-card-in{animation:none}
}

/* избранное / корзина: пустое состояние */
.fav-empty,.fr-cart-empty{text-align:center; max-width:440px; margin:18px auto; padding:48px 24px;
  border:1px dashed var(--border-2); border-radius:var(--radius); background:var(--surface)}
.fav-empty__ic,.fr-cart-empty__ic{width:60px; height:60px; margin:0 auto 16px; border-radius:16px; display:flex;
  align-items:center; justify-content:center; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line)}
.fav-empty__ic svg,.fr-cart-empty__ic svg{width:28px; height:28px}
.fav-empty h2,.fr-cart-empty h2{margin:0 0 8px; font-size:1.3rem}
.fav-empty p,.fr-cart-empty p{margin:0 0 18px}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:#f6f9fe}
.services__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(max(200px,calc((100% - 54px) / 4)),1fr)); gap:18px}
.service-card{border:1px solid var(--border); border-radius:var(--radius); padding:24px 22px; background:var(--surface);
  transition:.2s; display:flex; flex-direction:column; gap:12px; box-shadow:var(--sh-1)}
.service-card:hover{border-color:var(--border-2); transform:translateY(-3px); box-shadow:var(--sh-3)}
.service-card__ic{width:48px; height:48px; border-radius:12px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent); border:1px solid var(--accent-line)}
.service-card__ic svg{width:24px;height:24px}
.service-card h3{font-size:1.08rem; line-height:1.25; margin:2px 0 0; letter-spacing:-.01em}
.service-card p{font-size:.9rem; color:var(--muted); margin:0; flex:1}
.service-card .more{display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:600; font-size:.88rem}
.service-card .more svg{width:15px;height:15px; transition:.2s}
.service-card:hover .more svg{transform:translateX(4px)}
.service-card--wide{grid-column:span 2; flex-direction:row; align-items:center; gap:20px}

/* ============================================================
   PROCESS
   ============================================================ */
.process__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(max(200px,calc((100% - 54px) / 4)),1fr)); gap:18px}
.step{position:relative; padding:24px 22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--sh-1)}
.step__n{display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:32px; padding:0 10px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.9rem; font-weight:800;
  letter-spacing:.04em; line-height:1}
.step h3{font-size:1.05rem; margin:14px 0 6px}
.step p{font-size:.88rem; color:var(--muted); margin:0}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:52px 54px; margin:0 0 0;
  background:radial-gradient(520px 300px at 100% 0%, rgba(255,255,255,.22), transparent 70%), var(--accent-grad);
  color:var(--accent-ink); box-shadow:0 24px 50px -28px rgba(31,95,255,.6)}
.cta-band::after{content:""; position:absolute; right:-80px; bottom:-140px; width:340px; height:340px;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); box-shadow:0 0 0 46px rgba(255,255,255,.05)}
.cta-band__in{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.cta-band h2{margin:0 0 8px; color:var(--accent-ink)}
.cta-band p{margin:0; opacity:.85; max-width:560px}
.cta-band .btn{background:#0f1b2d; color:#fff; box-shadow:0 10px 30px -8px rgba(15,27,45,.35)}
.cta-band .btn:hover{background:#18263c; transform:translateY(-1px)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--bg-2); border-top:1px solid #edf1f6; margin-top:0}
/* только вертикальные отступы: сокращённое padding:60px 0 обнуляло боковые у .container,
   и подвал стоял на 24 px шире сетки страницы */
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-top:56px; padding-bottom:40px}
.footer-brand .logo{margin-bottom:16px}
.footer-brand p{color:var(--muted); font-size:.9rem; max-width:300px}
.footer-col h4{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.footer-col a{color:var(--muted); font-size:.92rem; transition:.15s}
.footer-col a:hover{color:var(--accent)}
.footer-contact a{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600; margin-bottom:12px}
.footer-contact svg{width:18px;height:18px;color:var(--accent)}
.footer-social{display:flex; gap:10px; margin-top:8px}
.footer-social a{width:40px;height:40px;border:1px solid var(--border); border-radius:10px; display:flex;
  align-items:center; justify-content:center; color:var(--muted); background:var(--surface); transition:.18s}
.footer-social a:hover{border-color:var(--accent); color:var(--accent)}
.footer-social svg{width:19px;height:19px}
/* Оригинальные логотипы мессенджеров/соцсетей (fr_brand_icon): в покое — нейтральные,
   на наведении подсвечиваются фирменным цветом бренда. Работает и в .footer-social, и в .contacts__social. */
.soc{--soc:var(--accent)}
.soc--tg{--soc:#29A9EB}
.soc--wa{--soc:#25D366}
.soc--yt{--soc:#FF0000}
/* MAX: знак фиолетово-бирюзовый градиентный, для однотонной подсветки берём
   фиолетовый край — он читается и на тёмной, и на светлой теме. */
.soc--max{--soc:#8419FF}
.footer-social a.soc:hover, .contacts__social a.soc:hover{border-color:var(--soc); color:var(--soc)}
/* линия — псевдоэлементом: border у .container тянулся бы и через боковые поля */
.footer-bottom{position:relative; padding-top:20px; padding-bottom:22px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; color:var(--muted-2); font-size:.84rem}
.footer-bottom::before{content:""; position:absolute; top:0; left:24px; right:24px; height:1px; background:var(--border)}
@media (max-width:560px){.footer-bottom::before{left:16px; right:16px}}
.footer-bottom a:hover{color:var(--accent)}

/* Уведомление об аналитических cookie; кнопка только запоминает закрытие. */
.fr-cookie-consent{position:fixed; z-index:1000; left:50%; bottom:18px; transform:translateX(-50%);
  width:min(920px,calc(100% - 32px)); display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px 22px; border:1px solid var(--border-2); border-radius:16px; background:var(--surface);
  color:var(--text); box-shadow:0 18px 50px -22px rgba(16,27,45,.3)}
.fr-cookie-consent__body{min-width:0}
.fr-cookie-consent__body strong{display:block; margin:0 0 5px; font-size:1rem}
.fr-cookie-consent__body p{margin:0; color:var(--muted); font-size:.86rem; line-height:1.5}
.fr-cookie-consent__body a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.fr-cookie-consent__actions{display:flex; flex:0 0 auto; gap:10px}
@media(max-width:700px){
  .fr-cookie-consent{bottom:10px; width:calc(100% - 20px); align-items:stretch; flex-direction:column; gap:14px; padding:18px}
  .fr-cookie-consent__actions{width:100%}
  .fr-cookie-consent__actions .btn{flex:1; padding-left:12px; padding-right:12px}
}

/* ============================================================
   POPUP (callback)
   ============================================================ */
.popup{position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease}
.popup.open{opacity:1; visibility:visible; pointer-events:auto}
html.fr-popup-open{overflow:hidden; overscroll-behavior:none}
body.fr-popup-open{position:fixed; left:0; right:0; width:100%; overflow:hidden; overscroll-behavior:none}
.popup__bg{position:absolute; inset:0; background:rgba(15,27,45,.55); backdrop-filter:blur(4px)}
.popup__box{position:relative; z-index:2; width:min(460px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px);
  box-shadow:0 28px 70px -28px rgba(16,27,45,.32);
  overflow-y:auto; overscroll-behavior:contain; transform:translateY(12px); transition:transform .24s ease}
.popup.open .popup__box{transform:translateY(0)}
.popup__close{position:sticky; z-index:3; top:0; float:right; margin:-16px -16px 0 10px; width:44px;height:44px;
  display:inline-flex; align-items:center; justify-content:center; border:0; background:var(--surface-2);
  border-radius:11px; color:var(--muted); cursor:pointer; font-size:1.1rem}
.popup__close:hover{color:var(--text)}
.popup h3{margin:0 0 6px}
.popup p{color:var(--muted); font-size:.9rem; margin:0 0 18px}
.popup input:not([type=checkbox]):not([type=radio]):not([type=submit]),.popup textarea{width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:12px 14px; font-size:.95rem; margin-bottom:12px; outline:none; font-family:inherit}
.popup textarea{min-height:112px; resize:vertical}
.popup input:focus,.popup textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,107,255,.12)}
.fr-callback-form{display:grid; gap:14px}
.fr-callback-field{display:block; color:var(--text); font-size:.84rem; font-weight:600; line-height:1.35}
.fr-callback-field label,.fr-callback-field label > span:first-child{display:block}
.fr-callback-field label > span:first-child{margin-bottom:7px}
.fr-callback-field em{color:var(--muted); font-size:.78rem; font-weight:500; font-style:normal}
.fr-cart-error{grid-area:2 / 1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px;
  margin-top:7px; color:var(--danger); font-size:.76rem; line-height:1.3; text-align:center}
.fr-cart-error button{padding:0; border:0; background:transparent; color:var(--accent); font:inherit; font-weight:700;
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:8px 6px;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.popup .fr-callback-field input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.popup .fr-callback-field textarea{margin:0}
.fr-callback-consent a,.fr-callback-unavailable a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.popup .fr-callback-consent .wpcf7-list-item label{margin:0}
.popup .wpcf7-form p{margin:0}
.popup .wpcf7-form-control-wrap{display:block}
.popup .wpcf7-list-item{margin:0}
.popup .wpcf7-list-item label{display:flex; align-items:flex-start; gap:9px; color:var(--muted); font-size:.78rem; line-height:1.4; margin:0 0 12px}
.popup .checkbox p{display:grid; grid-template-columns:16px 1fr; gap:9px; align-items:start; color:var(--muted); font-size:.78rem; line-height:1.4; margin:0 0 12px}
.popup .checkbox .wpcf7-form-control-wrap,
.popup .checkbox .wpcf7-form-control,
.popup .checkbox .wpcf7-list-item{display:contents}
.popup .wpcf7-quiz-label{display:block; color:var(--muted); font-size:.8rem; margin:0 0 6px}
.popup input[type=checkbox],.popup input[type=radio]{width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent); flex-shrink:0}
.popup button[type=submit],.popup input[type=submit],.popup .wpcf7 button{width:100%; min-height:46px; padding:13px; border:0; border-radius:10px;
  background-color:var(--accent); background-image:var(--accent-grad); color:var(--accent-ink); font-weight:700; cursor:pointer; font-family:inherit; line-height:1.2}
.popup button[type=submit]:hover,.popup input[type=submit]:hover{box-shadow:0 10px 28px -10px rgba(31,107,255,.65)}
.popup .wpcf7-spinner{display:block; margin:10px auto 0}
.popup .wpcf7-not-valid-tip{display:block; color:var(--danger); font-size:.78rem; margin:-7px 0 10px}
.popup .wpcf7-response-output{margin:12px 0 0!important; padding:10px 12px!important; border:1px solid var(--border)!important; border-left:3px solid var(--accent)!important; border-radius:10px; color:var(--text); font-size:.86rem}
@media(max-width:560px){
  .popup{padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
                 calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
  .popup__box{padding:20px; border-radius:15px;
    max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .popup__close{margin:-8px -8px 0 8px}
  .popup textarea{min-height:82px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr; gap:30px}
  .hero__visual{max-width:440px; margin:0 auto}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--border)}
  .cats__grid,.products-grid,.services__grid,.process__grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr; gap:32px 24px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .footer-contact{grid-column:1 / -1}
  .footer-brand p{max-width:520px}
  .primary-nav{display:none}
  .burger{display:inline-flex}
}
@media (max-width:1100px){
  .topbar__left{display:none}
  .topbar .container{justify-content:flex-end}
}
@media (max-width:560px){
  .section{padding:56px 0}
  /* карточки категорий/услуг/процесса — компактные, оставляем 2 колонки */
  .cats__grid,.services__grid,.process__grid{grid-template-columns:1fr 1fr}
  /* карточки товаров — тоже 2 в ряд: одна колонка выглядит слишком крупно.
     Чтобы CTA влезала в узкую карточку, ниже (в блоке «плитки/карточки»)
     у неё убрана иконка и уменьшены шрифты/отступы. */
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .service-card--wide{grid-column:span 2; flex-direction:column; align-items:flex-start}
  .cta-band{padding:32px}
  .header-actions .btn{display:none}
}

/* mobile slide nav */
.mobile-nav{position:fixed; inset:0 0 0 auto; width:min(360px,92vw); z-index:90; background:var(--bg-2);
  border-left:1px solid var(--border); overflow-y:auto; padding:20px; display:none}
.mobile-nav.open{display:block; animation:navIn .25s ease}
@keyframes navIn{from{transform:translateX(100%)} to{transform:translateX(0)}}
.mobile-nav__head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.mobile-nav ul{list-style:none; margin:0; padding:0}
.mobile-nav .primary-menu{flex-direction:column; align-items:stretch; gap:0}
.mobile-nav .primary-menu a{white-space:normal; overflow-wrap:break-word}
/* верхний уровень — заголовок категории */
.mobile-nav .primary-menu > li > a{display:block; padding:14px 0 6px; margin-top:10px; border-top:1px solid var(--border);
  font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.mobile-nav .primary-menu > li:first-child > a{border-top:0; margin-top:0; padding-top:2px}
/* подпункты всегда раскрыты, ровными строками */
.mobile-nav .primary-menu .sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
  background:transparent; border:0; padding:0; min-width:0; display:block}
.mobile-nav .primary-menu .sub-menu a{display:flex; gap:11px; padding:11px 0; font-size:1rem; font-weight:600; color:var(--text)}
/* буллет напротив каждой категории */
.mobile-nav .primary-menu .sub-menu a::before{content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-top:.58em}
.mobile-nav .primary-menu .sub-menu a:hover{color:var(--accent); background:transparent}
/* третий уровень — мельче, с отступом и приглушённым буллетом */
.mobile-nav .primary-menu .sub-menu .sub-menu{padding:2px 0 6px 13px; margin:0 0 4px 0}
.mobile-nav .primary-menu .sub-menu .sub-menu a{padding:8px 0; font-size:.92rem; font-weight:500; color:var(--muted)}
.mobile-nav .primary-menu .sub-menu .sub-menu a::before{width:5px; height:5px; background:var(--muted)}
.mobile-nav .primary-menu .sub-menu .sub-menu a:hover{color:var(--accent)}
.mobile-nav .primary-menu .sub-menu .sub-menu a:hover::before{background:var(--accent)}
.nav-backdrop{position:fixed; inset:0; background:rgba(15,27,45,.45); z-index:89; display:none}
.nav-backdrop.open{display:block}

/* ============================================================
   INNER PAGES (hero band + breadcrumbs + prose)
   ============================================================ */
.page-hero{background:
  radial-gradient(700px 300px at 85% -60%, rgba(31,107,255,.10), transparent 65%), #f8fafd;
  border-bottom:1px solid #edf1f6; padding:40px 0 36px}
.page-hero h1{margin:0; font-size:clamp(1.9rem,3.6vw,2.75rem)}
.page-hero p{max-width:720px}
/* на карточке товара в полосе только крошки — заголовок стоит рядом с фото */
.page-hero--crumbs{padding:18px 0 16px; background:transparent; border-bottom:0}
.page-hero--crumbs .crumbs{margin:0}
.page-hero--crumbs + .section--tight{padding-top:12px}
.crumbs{display:flex; gap:8px; align-items:center; font-size:.85rem; color:var(--muted); margin-bottom:14px; flex-wrap:wrap}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--accent)} .crumbs span{opacity:.5}

.prose{max-width:860px; color:var(--text); line-height:1.7}
.prose h2,.prose h3{margin:1.4em 0 .5em}
.prose h2{font-size:1.5rem} .prose h3{font-size:1.2rem; color:var(--accent)}
.prose p{margin:0 0 1.1em; color:var(--muted)}
.prose ul,.prose ol{margin:0 0 1.2em; padding-left:4px; list-style:none}
.prose ul li{position:relative; padding:5px 0 5px 24px; color:var(--text)}
.prose ul li::before{content:""; position:absolute; left:4px; top:.95em; width:7px; height:7px; border-radius:50%; background:var(--accent)}
/* Старый контент размечен инлайн-заливками (ярко-зелёный «СДЭК», жёлтый «Яндекс Доставкой») —
   приводим их к одной спокойной плашке в цветах сайта, текст не трогаем. */
.prose [style*="background-color"],.prose mark{background:var(--accent-soft)!important; color:var(--text)!important;
  padding:.05em .35em; border-radius:5px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.prose ol{counter-reset:i; padding-left:0}
.prose ol li{counter-increment:i; position:relative; padding:6px 0 6px 36px}
.prose ol li::before{content:counter(i); position:absolute; left:0; top:6px; width:24px; height:24px; border-radius:7px;
  background:rgba(31,107,255,.12); color:var(--accent); font-weight:700; font-size:.8rem; display:flex; align-items:center; justify-content:center}
.prose a{color:var(--accent); border-bottom:1px solid rgba(31,107,255,.4)}
.prose img{border-radius:var(--radius); margin:1em 0}
.prose strong{color:var(--text)}
.pagination .page-numbers{display:inline-flex; min-width:42px; height:42px; align-items:center; justify-content:center;
  padding:0 12px; margin:0 4px 4px 0; border:1px solid var(--border); border-radius:10px; color:var(--text); font-weight:600}
.pagination .page-numbers.current{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.pagination .page-numbers:hover{border-color:var(--accent); color:var(--accent)}

/* ============================================================
   CATALOG (archive toolbar / ordering / pagination)
   ============================================================ */
#catalog-products{scroll-margin-top:84px}
.catalog-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap}
.woocommerce-result-count{color:var(--muted); font-size:.9rem; margin:0}
.woocommerce-ordering{margin:0}
.woocommerce-ordering select, .catalog-toolbar select{appearance:none; -webkit-appearance:none; background:var(--surface)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23566377' stroke-width='2'><path d='M3 4.5 6 7.5 9 4.5'/></svg>") no-repeat right 14px center;
  color:var(--text); border:1px solid var(--border); border-radius:10px; padding:11px 38px 11px 14px;
  font-family:inherit; font-size:.9rem; outline:none; cursor:pointer; transition:.15s; min-height:44px}
.woocommerce-ordering select option, .catalog-toolbar select option{background:var(--surface); color:var(--text)}
.woocommerce-ordering select:hover{border-color:var(--border-2)}
.woocommerce-ordering select:focus{border-color:var(--accent)}

.catalog-load-more{margin-top:36px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.catalog-load-more .btn{min-width:220px; justify-content:center}
.catalog-load-more .btn.is-loading{opacity:.65; pointer-events:none}
.catalog-load-more__status{min-height:1.2em; color:var(--muted); font-size:.88rem}

/* WooCommerce notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:10px; padding:14px 18px; margin:0 0 20px; list-style:none; color:var(--text); overflow:hidden;
  box-shadow:0 12px 28px -24px rgba(16,27,45,.4)}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{float:none; margin:0 12px 8px 0}
.woocommerce-error{border-left-color:var(--danger)}

/* ============================================================
   PRODUCT PAGE (PDP)
   ============================================================ */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.pdp__main{background:var(--photo-bg); border:1px solid var(--border); border-radius:var(--radius-lg); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:zoom-in}
.pdp__main img{width:100%; height:100%; object-fit:contain; padding:30px; mix-blend-mode:multiply}
.pdp__thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.pdp-thumb{width:76px; height:76px; border-radius:12px; border:1px solid var(--border); background:var(--photo-bg);
  padding:0; cursor:pointer; overflow:hidden; transition:.15s}
.pdp-thumb img{width:100%; height:100%; object-fit:contain; padding:7px; mix-blend-mode:multiply}
.pdp-thumb:hover{border-color:var(--border-2)}
.pdp-thumb.active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}

.pdp__buy h1{font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 14px}
.pdp__price{font-size:2rem; font-weight:800; margin-bottom:10px}
.pdp__price.req{font-size:1.25rem; color:var(--muted); font-weight:700}
.pdp__price .amount{color:var(--text)}
.pdp__stock{display:inline-flex; align-items:center; gap:8px; color:var(--ok); font-size:.92rem; margin-bottom:26px}
.pdp__stock svg{width:16px; height:16px}
.pdp__stock.out{color:var(--muted)}
.pdp__stock.order{color:var(--accent)}
.pdp__stock.out svg{display:none}

/* плашка «под заказ» — корзина, оформление, страница заказа, письма */
.fr-order-hint{display:flex; gap:12px; align-items:flex-start; margin:0 0 22px;
  padding:14px 16px; border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background:color-mix(in srgb, var(--accent) 9%, var(--surface))}
.fr-order-hint__ic{width:20px; height:20px; flex-shrink:0; color:var(--accent); margin-top:1px}
.fr-order-hint__body{display:flex; flex-direction:column; gap:3px}
.fr-order-hint__body strong{font-size:.96rem; color:var(--text)}
.fr-order-hint__body span{font-size:.86rem; color:var(--muted); line-height:1.45}
.pdp__form{display:flex; flex-direction:column; gap:18px}
.pdp__buyrow{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}
.qty-control{display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface)}
.qty-control button{width:46px; height:50px; border:0; background:transparent; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s}
.qty-control button:hover{color:var(--accent); background:var(--surface-2)}
.qty-control button svg{width:16px; height:16px}
.qty-control input{width:56px; height:50px; border:0; background:transparent; color:var(--text); text-align:center;
  font-size:1.05rem; font-weight:700; outline:none; -moz-appearance:textfield}
.qty-control input::-webkit-outer-spin-button,.qty-control input::-webkit-inner-spin-button{-webkit-appearance:none}
.pdp__buyrow .btn{flex:1; min-width:210px; height:50px}
.pdp__facts{margin-top:28px; border-top:1px solid var(--border)}
.pdp__fact{display:flex; gap:18px; padding:13px 0; border-bottom:1px solid var(--border); font-size:.92rem}
.pdp__fact > span{color:var(--muted); min-width:120px; flex-shrink:0}
.pdp__fact a{color:var(--accent)}
.pdp__note{display:flex; gap:11px; align-items:flex-start; margin-top:22px; padding:15px 17px; background:var(--bg-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.86rem; color:var(--muted)}
.pdp__note svg{width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:1px}
.pdp__desc{margin-top:56px; padding-top:42px; border-top:1px solid var(--border)}
.pdp__desc .prose{max-width:none}
.pdp__desc h2.name,.pdp__desc .description h2{font-size:1.4rem; color:var(--text)}

/* опции товара — радио-пилюли (как на оригинале) */
.fr-opts{display:flex; flex-direction:column; gap:16px}
.fr-opt__label{font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:8px}
.fr-opt__choices{display:flex; flex-wrap:wrap; gap:8px}
.fr-opt__choices input{position:absolute; opacity:0; width:0; height:0}
.fr-opt__choices label{display:inline-flex; align-items:center; padding:9px 15px; border:1px solid var(--border-2);
  border-radius:10px; background:var(--surface); font-size:.9rem; font-weight:600; cursor:pointer; transition:.15s; user-select:none}
.fr-opt__choices label:hover{border-color:var(--accent)}
.fr-opt__choices input:checked + label{border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent)}
.fr-opt__choices input:focus-visible + label{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent)}
/* сочетания без готовой вариации не прячем: помечаем пунктиром «под заказ» и объясняем подсказкой */
.fr-opt__choices label.is-order{border-style:dashed; border-color:var(--border-2); color:var(--muted)}
.fr-opt__choices label.is-order:hover{border-color:var(--accent); color:var(--text)}
.fr-opt__choices input:checked + label.is-order{border-style:dashed; color:var(--accent)}
.fr-opt__choices label[data-tip]{position:relative}
.fr-opt__choices label[data-tip]::after{content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px); width:max-content; max-width:min(260px, 78vw); padding:8px 11px;
  border:1px solid var(--border-2); border-radius:10px; background:var(--surface-2); color:var(--text);
  font-size:.78rem; font-weight:500; line-height:1.35; text-align:left; white-space:normal;
  box-shadow:0 18px 44px -22px rgba(16,27,45,.28); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s, transform .15s; z-index:5}
.fr-opt__choices label[data-tip]:hover::after,
.fr-opt__choices input:focus-visible + label[data-tip]::after{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
/* на узком экране подсказку вешаем на всю строку опций: у края экрана её обрезал бы overflow-x body */
@media (max-width:600px){
  .fr-opt__choices{position:relative}
  .fr-opt__choices label[data-tip]{position:static}
  .fr-opt__choices label[data-tip]::after{left:0; max-width:100%; transform:translateY(4px)}
  .fr-opt__choices label[data-tip]:hover::after,
  .fr-opt__choices input:focus-visible + label[data-tip]::after{transform:translateY(0)}
}
.fr-opt__note{margin:14px 0 0; font-size:.9rem; line-height:1.45; color:var(--accent)}
.fr-opt__note--order{color:var(--muted); border-left:2px solid var(--accent); padding-left:10px}
.pdp__form .single_add_to_cart_button[disabled]{opacity:.55; cursor:not-allowed; filter:grayscale(.9)}

/* вкладки карточки товара: Описание / Технические параметры / Документация */
.pdp__tabs{margin-top:56px; padding-top:8px}
.tabs__nav{display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:26px}
.tab-btn{background:none; border:0; padding:13px 18px; font-family:inherit; font-weight:700; font-size:.96rem;
  color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.15s}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent); border-bottom-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block; animation:fr-fade .2s ease}
@keyframes fr-fade{from{opacity:0} to{opacity:1}}
.tab-panel .prose{max-width:none}

/* документация */
.pdp-docs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.pdp-docs a{display:inline-flex; align-items:center; gap:10px; width:fit-content; padding:12px 18px;
  border:1px solid var(--border-2); border-radius:12px; color:var(--text); font-weight:600; transition:.15s}
.pdp-docs a:hover{border-color:var(--accent); color:var(--accent)}
.pdp-docs svg{width:18px; height:18px; flex-shrink:0; color:var(--accent)}
@media (max-width:860px){ .pdp{grid-template-columns:1fr; gap:28px} }

/* ============================================================
   WooCommerce generic (cart / checkout / account) — dark
   ============================================================ */
.wc-page{max-width:none}
.woocommerce, .woocommerce-page{color:var(--text)}
/* sr-only: woo выгружает свои стили, поэтому прячем служебные подписи (label у поля количества) сами */
.screen-reader-text{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* только ссылки внутри контента (#content), чтобы правило не красило логотип/меню/подвал в шапке */
.woocommerce #content a:not(.btn):not([class*="product-card"]){color:var(--accent)}
/* font-family:inherit обязателен: #place_order и «Оформить заказ» — это <button>/<input>,
   а элементы формы шрифт не наследуют. Без него кнопка «Подтвердить заказ» рисовалась
   системным шрифтом браузера, а не Inter — на чекауте это было заметнее всего. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button,
.woocommerce #respond input#submit, .woocommerce .checkout-button{
  display:inline-flex; align-items:center; justify-content:center; font-family:inherit;
  background-color:var(--accent)!important;
  background-image:var(--accent-grad)!important; color:var(--accent-ink)!important; border:0!important; border-radius:10px!important;
  padding:13px 24px!important; font-weight:700; font-size:.92rem; cursor:pointer; transition:.2s; line-height:1.2; text-align:center; min-height:46px}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover{transform:translateY(-2px); box-shadow:0 10px 28px -10px rgba(31,107,255,.6)}

.woocommerce form .form-row label, .woocommerce-checkout label, .woocommerce-account label,
.woocommerce .quantity label{color:var(--muted); font-size:.88rem}
.woocommerce input[type=text], .woocommerce input[type=email], .woocommerce input[type=tel],
.woocommerce input[type=password], .woocommerce input[type=number], .woocommerce textarea, .woocommerce select,
.select2-container--default .select2-selection--single{
  background:var(--surface)!important; border:1px solid var(--border)!important; color:var(--text)!important;
  border-radius:10px!important; padding:11px 14px!important; font-family:inherit; font-size:.95rem; outline:none;
  min-height:46px; box-shadow:none!important}
.woocommerce input:focus, .woocommerce textarea:focus, .woocommerce select:focus{border-color:var(--accent)!important}
.select2-dropdown{background:var(--surface); border-color:var(--border); color:var(--text)}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--text); line-height:24px; padding:0}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:44px; right:8px}
.select2-results__option--highlighted{background:var(--accent)!important; color:var(--accent-ink)!important}

/* Шрифт таблиц прописан явно, а не унаследован: таблицы — единственное место, где
   браузеры исторически рвут наследование шрифта (quirks-режим, надстройки доступности),
   и «Ваш заказ» на чекауте — как раз таблица. Дешевле повторить, чем ловить разнобой. */
.woocommerce table.shop_table, .woocommerce-checkout #order_review, .woocommerce-checkout #payment{font-family:var(--font)}
.woocommerce table.shop_table{border:1px solid var(--border)!important; border-radius:14px; border-collapse:separate;
  border-spacing:0; overflow:hidden; background:var(--surface); width:100%; margin-bottom:24px}
.woocommerce table.shop_table th{background:var(--bg-2); color:var(--text); padding:14px 16px; text-align:left;
  font-weight:700; border:0; border-bottom:1px solid var(--border)}
.woocommerce table.shop_table td{padding:14px 16px; border-top:1px solid var(--border)!important; color:var(--text)}
.woocommerce table.shop_table a{color:var(--text)} .woocommerce table.shop_table a:hover{color:var(--accent)}
.woocommerce .cart_item .product-thumbnail img{width:60px; border-radius:8px}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review,
.woocommerce-checkout #payment{background:var(--surface)!important; border:1px solid var(--border); border-radius:14px; padding:22px}
.woocommerce .cart_totals h2, .woocommerce #order_review_heading, .woocommerce-account h2, .woocommerce h3{color:var(--text)}
.woocommerce .quantity .qty{background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:9px; padding:10px; width:72px; text-align:center}
.woocommerce .cart .actions .coupon{display:flex; gap:10px; flex-wrap:wrap}
.woocommerce .cart .actions .coupon .input-text{min-width:220px; flex:1}
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px}
.woocommerce .woocommerce-info, .woocommerce-message{color:var(--text)}

/* Cart: compact vertical list */
.woocommerce-cart .woocommerce-cart-form{margin:0}
.woocommerce-cart .fr-cart-list{display:grid; gap:14px; margin:0 0 18px}
.woocommerce-cart .fr-cart-card{display:grid;
  grid-template-columns:96px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;
  grid-template-areas:"media body price qty remove";
  column-gap:30px; align-items:start;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px}
.woocommerce-cart .fr-cart-card__media{grid-area:media; align-self:center}
.woocommerce-cart .fr-cart-card__body{grid-area:body}
.woocommerce-cart .fr-cart-card__price{grid-area:price}
.woocommerce-cart .fr-cart-card__qty{grid-area:qty}
.woocommerce-cart .fr-cart-card__remove{grid-area:remove; align-self:center; justify-self:end}
.woocommerce-cart .fr-cart-card__media{display:flex; align-items:center; justify-content:center; width:96px; height:96px;
  background:var(--bg-2); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.woocommerce-cart .fr-cart-card__media img{width:100%; height:100%; object-fit:contain; padding:8px}
.woocommerce-cart .fr-cart-card__body{min-width:0}
.woocommerce-cart .fr-cart-card__title{font-size:1rem; line-height:1.3; margin:0 0 10px; letter-spacing:0}
.woocommerce-cart .fr-cart-card__title a{color:var(--text)}
.woocommerce-cart .fr-cart-card__title a:hover{color:var(--accent)}
/* ---- Выбранные опции позиции ----
   Свёрнуты по умолчанию (обёртку рисует fr_cart_item_options()): развёрнутыми пять
   параметров занимают больше места, чем сам товар. */
.fr-opts{margin:0 0 8px}
.fr-opts>summary{display:inline-flex; align-items:center; gap:8px; padding:2px 0; cursor:pointer;
  font-size:.82rem; font-weight:600; color:var(--muted); list-style:none; user-select:none; transition:color .15s ease}
.fr-opts>summary::-webkit-details-marker{display:none}   /* свой треугольник вместо системного */
.fr-opts>summary:hover{color:var(--accent)}
.fr-opts>summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.fr-opts__n{min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--border); color:var(--muted); font-size:.7rem; font-weight:700; line-height:1}
.fr-opts__caret{width:6px; height:6px; flex:none; transform:translateY(-2px) rotate(45deg);
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transition:transform .2s ease}
/* Стрелка доворачивается на те же 220 мс, что и высота (см. main.js), — раскрытие идёт
   одним движением. Цвет самого счётчика на открытии не трогаем: смена заливки на акцент
   происходит мгновенно и на фоне плавной высоты выглядела вспышкой. */
.fr-opts[open]>summary .fr-opts__caret{transform:translateY(1px) rotate(-135deg)}
.fr-opts[open]>summary{color:var(--text)}

/* Сами пары — подпись сверху, значение под ней. Двумя колонками не выходит: подписи
   слишком разной длины («Режим работы» против «Спектр свечения светодиодов»), и колонка,
   как её ни задай (долей, max-content, по значению), в узкой сводке чекаута сжимает
   соседнюю до нечитаемого — то значение сыплется по букве в строку, то подпись рвётся
   посреди слова. В пару строк всё встаёт при любой ширине: подписи начинаются с одной
   линии, значения с другой, переносов внутри слов нет.
   Двоеточие после подписи снимает fr_cart_item_options() — в столбик оно ни к чему.
   Правило общее для корзины и оформления — список приходит из одной
   и той же wc_get_formatted_cart_item_data(). */
.woocommerce dl.variation{display:grid; gap:3px; margin:10px 0 0; font-size:.84rem; line-height:1.35}
.woocommerce dl.variation dt{margin:0; font-size:.76rem; font-weight:400; color:var(--muted-2)}
.woocommerce dl.variation dd{margin:0 0 7px; font-weight:500; color:var(--text); overflow-wrap:anywhere}
.woocommerce dl.variation dd:last-child{margin-bottom:0}
.woocommerce dl.variation dd p{margin:0}
.woocommerce-cart .fr-cart-card__price,.woocommerce-cart .fr-cart-card__qty{display:grid; gap:8px; align-content:start}
.woocommerce-cart .fr-cart-card__price span,.woocommerce-cart .fr-cart-card__qty span{color:var(--muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.woocommerce-cart .fr-cart-card__price strong{font-size:1rem; color:var(--text)}
/* количество: число текстом + кнопки −/+ */
.woocommerce-cart .fr-qty{display:inline-flex; align-items:center; width:max-content;
  border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden}
.woocommerce-cart .fr-qty__btn{width:42px; height:46px; border:0; background:transparent; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s ease}
.woocommerce-cart .fr-qty__btn:hover:not([disabled]){color:var(--accent); background:var(--surface-2)}
.woocommerce-cart .fr-qty__btn[disabled]{opacity:.45; cursor:not-allowed}
.woocommerce-cart .fr-qty__btn svg{width:16px; height:16px}
.woocommerce-cart .fr-qty__val{min-width:38px; text-align:center; font-weight:700; font-size:1rem; color:var(--text)}
.woocommerce-cart .fr-cart-card__remove{display:inline-flex!important; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--muted)!important; transition:.18s ease}
.woocommerce-cart .fr-cart-card__remove svg{width:19px; height:19px}
.woocommerce-cart .fr-cart-card__remove:hover{border-color:#ff5a66; color:#ff5a66!important; background:rgba(255,90,102,.08)}
.woocommerce-cart .cart-collaterals{display:flex; justify-content:flex-end}
.woocommerce-cart .cart-collaterals .cart_totals{width:min(100%,430px)}
.woocommerce-cart .cart_totals h2{font-size:1.25rem; margin-bottom:16px}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{width:100%}

/* ---- Итоги корзины и оформления: сводка, а не таблица ----
   Карточку вокруг уже рисуют .cart_totals / #order_review, поэтому у самой таблицы
   снимаем рамку, заливку шапки и рамки ячеек, а строки раскладываем флексом:
   подпись слева, значение справа. Разметка остаётся табличной намеренно — строки итогов
   приходят из хуков WooCommerce готовыми <tr> (доставка, купоны, налоги, НДС).
   Класс fr-totals стоит на <table> в корзине и на <tfoot> в оформлении — отсюда две
   ветки в каждом селекторе; три класса нужны, чтобы перебить общее правило shop_table. */
.woocommerce .shop_table.fr-totals,
.woocommerce .shop_table .fr-totals,
.woocommerce .shop_table.fr-totals tbody,
.woocommerce .shop_table .fr-totals tbody{display:block; width:100%}
.woocommerce table.shop_table.fr-totals{border:0!important; border-radius:0; background:transparent;
  margin:0 0 20px; overflow:visible}
.woocommerce .shop_table.fr-totals tr,
.woocommerce .shop_table .fr-totals tr{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:13px 0; border-top:1px solid var(--border)}
.woocommerce .shop_table.fr-totals tr:first-child,
.woocommerce .shop_table .fr-totals tr:first-child{border-top:0; padding-top:0}
.woocommerce .shop_table.fr-totals th,
.woocommerce .shop_table .fr-totals th{background:transparent!important; border:0!important; padding:0!important;
  font-weight:500; font-size:.95rem; color:var(--muted); text-align:left; white-space:nowrap}
.woocommerce .shop_table.fr-totals td,
.woocommerce .shop_table .fr-totals td{border:0!important; padding:0!important; min-width:0;
  text-align:right; color:var(--text); font-weight:600}
.woocommerce .shop_table.fr-totals .cart-subtotal,
.woocommerce .shop_table .fr-totals .cart-subtotal{display:none!important}   /* дублирует строку «Товары» */
/* итог — крупно, с отбивкой; под ним только справка про НДС */
.woocommerce .shop_table.fr-totals .order-total,
.woocommerce .shop_table .fr-totals .order-total{margin-top:4px; padding-top:16px; border-top:1px solid var(--border-2)}
.woocommerce .shop_table.fr-totals .order-total th,
.woocommerce .shop_table .fr-totals .order-total th{font-size:1.05rem; font-weight:700; color:var(--text)}
.woocommerce .shop_table.fr-totals .order-total td,
.woocommerce .shop_table .fr-totals .order-total td{font-size:1.4rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap}
.woocommerce .shop_table.fr-totals .order-total td strong,
.woocommerce .shop_table .fr-totals .order-total td strong{font-weight:800}
/* Только вертикальные отступы: сокращённая запись padding обнуляла бы и боковые, а на
   чекауте строки итогов отбиты от края карточки на 16px — строка НДС вылезала за общую
   колонку и не совпадала ни подписью слева, ни суммой справа. */
.woocommerce .shop_table.fr-totals .fr-vat-note,
.woocommerce .shop_table .fr-totals .fr-vat-note{border-top:0; padding-top:8px; padding-bottom:0}
.woocommerce .shop_table.fr-totals .fr-vat-note th,
.woocommerce .shop_table .fr-totals .fr-vat-note th,
.woocommerce .shop_table.fr-totals .fr-vat-note td,
.woocommerce .shop_table .fr-totals .fr-vat-note td{font-size:.85rem; font-weight:500; color:var(--muted-2)}
/* доставка: способ — значение строки, пояснение тихой подписью под ним */
.woocommerce .shop_table.fr-totals .shipping td,
.woocommerce .shop_table .fr-totals .shipping td{display:flex; flex-direction:column; align-items:flex-end; gap:7px}
.fr-ship{list-style:none; margin:0; padding:0; display:grid; gap:8px; justify-items:end; width:100%}
.fr-ship li{margin:0; display:flex; align-items:center; gap:9px}
.fr-ship label{margin:0; font-weight:600; color:var(--text); cursor:default}
.fr-ship--multi{justify-items:stretch}
.fr-ship--multi li{justify-content:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:10px}
.fr-ship--multi li:has(input:checked){border-color:var(--accent)}
.fr-ship--multi label{font-weight:500; cursor:pointer}
.fr-ship--multi input[type=radio]{width:16px; height:16px; margin:0; accent-color:var(--accent)}
.fr-ship__note{margin:0; font-size:.83rem; line-height:1.45; font-weight:400; color:var(--muted-2); text-align:right}
.fr-ship__note strong{color:var(--muted); font-weight:600}
/* калькулятор доставки — ссылкой, форма раскрывается под строкой */
.woocommerce .shop_table.fr-totals .woocommerce-shipping-calculator,
.woocommerce .shop_table .fr-totals .woocommerce-shipping-calculator{margin:0; width:100%; text-align:right}
.woocommerce .shop_table.fr-totals .shipping-calculator-button,
.woocommerce .shop_table .fr-totals .shipping-calculator-button{font-size:.83rem; font-weight:600;
  color:var(--accent)!important; border-bottom:1px dashed currentColor}
.woocommerce .shop_table.fr-totals .shipping-calculator-button:hover,
.woocommerce .shop_table .fr-totals .shipping-calculator-button:hover{color:var(--accent-2)!important}
.woocommerce .shop_table.fr-totals .shipping-calculator-form,
.woocommerce .shop_table .fr-totals .shipping-calculator-form{text-align:left; margin-top:12px; display:grid; gap:10px}
.woocommerce .shop_table.fr-totals .shipping-calculator-form p,
.woocommerce .shop_table .fr-totals .shipping-calculator-form p{margin:0}
.woocommerce .shop_table.fr-totals .shipping-calculator-form button,
.woocommerce .shop_table .fr-totals .shipping-calculator-form button{width:100%}
/* выбранный адрес доставки: название — кнопкой, подробности раскрываются под ней.
   Показать, но не править: адреса живут в кабинете (cart/shipping-calculator.php) */
.fr-shipaddr__name{display:flex; align-items:center; justify-content:flex-end; gap:7px; width:100%;
  margin:0 0 7px; padding:0; border:0; background:none; font:inherit; font-size:.9rem; font-weight:700;
  color:var(--text); cursor:pointer; text-align:right}
.fr-shipaddr__pin{width:15px; height:15px; flex:none; color:var(--accent)}
.fr-shipaddr__name>span{border-bottom:1px dashed var(--border-2); transition:.15s ease}
.fr-shipaddr__name:hover>span{color:var(--accent); border-bottom-color:var(--accent)}
.fr-shipaddr__caret{width:7px; height:7px; flex:none; transform:translateY(-2px) rotate(45deg);
  border-right:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2); transition:transform .2s ease}
.fr-shipaddr__name[aria-expanded=true] .fr-shipaddr__caret{transform:translateY(2px) rotate(-135deg)}
.fr-shipaddr__card{width:100%; margin:0 0 9px; padding:11px 13px; text-align:left; font-size:.85rem;
  line-height:1.5; font-weight:400; display:grid; gap:2px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-2)}
.fr-js .fr-shipaddr__card{display:none}
.fr-js .fr-shipaddr__card.is-open{display:grid}
/* выбор адреса из книги */
.fr-shipaddr__list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.fr-shipaddr__list li{margin:0}
.fr-shipaddr__opt{display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px; cursor:pointer;
  border:1px solid var(--border); border-radius:10px; transition:.15s ease}
.fr-shipaddr__opt:hover{border-color:var(--accent)}
.fr-shipaddr__opt:has(input:checked){border-color:var(--accent); background:var(--surface-2)}
.fr-shipaddr__opt input{width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--accent)}
.fr-shipaddr__opt>span{display:grid; gap:2px; min-width:0}
.fr-shipaddr__opt b{font-size:.9rem; font-weight:700; color:var(--text)}
.fr-shipaddr__opt i{font-style:normal; font-size:.8rem; line-height:1.4; color:var(--muted-2); overflow-wrap:anywhere}
/* поля разового адреса: два поля вровень, подписи над ними (в стандартном шаблоне
   город получал class form-row-first из локали и подпись уезжала вбок) */
.fr-shipaddr__new{display:grid; gap:10px}
/* когда выше есть список сохранённых — поля читаются как продолжение «Другого адреса» */
.fr-shipaddr__list+.fr-shipaddr__new{margin-left:8px; padding:2px 0 2px 14px; border-left:2px solid var(--border)}
.fr-js .fr-shipaddr__new{display:none}
.fr-js .fr-shipaddr__new.is-open{display:grid}
.fr-shipaddr .fr-field{margin:0}
@media(max-width:460px){
  .fr-shipaddr__name{justify-content:flex-start; text-align:left}
}
/* В оформлении итоги лежат в <tfoot> таблицы «Ваш заказ». Флексовые строки внутри
   табличной раскладки схлопываются по ширине колонки, поэтому всю таблицу переводим
   в блочную: позиции становятся карточками (см. checkout/review-order.php), итоги —
   строками «слева название, справа сумма». Шапки «Товар / Сумма» больше нет: над
   карточками с фотографиями она не нужна. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table{display:block}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody{display:grid; gap:12px; width:100%}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr{display:block}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td{display:block;
  padding:0!important; border:0!important}
.woocommerce-checkout .shop_table .fr-totals{border-top:1px solid var(--border); padding:14px 0 16px; margin-top:16px}
.woocommerce-checkout .shop_table .fr-totals tr{padding-left:16px; padding-right:16px}

/* ---- Позиция заказа в сводке «Ваш заказ» ----
   Та же карточка, что в корзине, но без действий: фото с пилюлей количества, название,
   опции, сумма. Фото важно именно здесь — на чекауте это последняя возможность заметить,
   что в заказ уехал не тот товар, а по одному названию подсветки не различаются. */
.fr-sum-item{display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:start;
  padding:14px; border-radius:12px; background:var(--bg-2)}
.fr-sum-item__media{position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:10px}
.fr-sum-item__media img{width:100%; height:100%; object-fit:contain; padding:6px}
.fr-sum-item__badge{position:absolute; right:-6px; bottom:-6px; min-width:24px; height:24px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font-size:.74rem; font-weight:700; line-height:1;
  box-shadow:0 0 0 3px var(--bg-2)}
.fr-sum-item__body{min-width:0}
.fr-sum-item__title{font-size:.95rem; font-weight:600; line-height:1.35; margin:0 0 8px; overflow-wrap:anywhere}
.fr-sum-item__title a{color:var(--text)}
.fr-sum-item__title a:hover{color:var(--accent)}
.fr-sum-item__price{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.fr-sum-item__unit{font-size:.82rem; color:var(--muted-2); white-space:nowrap}
.fr-sum-item__total{margin-left:auto; font-size:1rem; font-weight:700; color:var(--text); white-space:nowrap}
@media(max-width:420px){
  .fr-sum-item{grid-template-columns:60px minmax(0,1fr); gap:12px; padding:12px}
  .fr-sum-item__media{width:60px; height:60px}
}
@media(max-width:460px){
  .woocommerce .shop_table.fr-totals .shipping,
  .woocommerce .shop_table .fr-totals .shipping{flex-direction:column; align-items:stretch; gap:8px}
  .woocommerce .shop_table.fr-totals .shipping td,
  .woocommerce .shop_table .fr-totals .shipping td{align-items:flex-start}
  .fr-ship{justify-items:start}
  .fr-ship__note,
  .woocommerce .shop_table.fr-totals .woocommerce-shipping-calculator,
  .woocommerce .shop_table .fr-totals .woocommerce-shipping-calculator{text-align:left}
}

.woocommerce-cart .wp-block-woocommerce-cart-order-summary-subtotal-block{display:none!important}
.woocommerce-cart .wc-block-cart-items{display:grid!important; gap:14px; border:0!important}
.woocommerce-cart .wc-block-cart-items thead{display:none!important}
.woocommerce-cart .wc-block-cart-items tbody{display:grid!important; gap:14px}
.woocommerce-cart .wc-block-cart-items tr.wc-block-cart-items__row{display:grid!important; grid-template-columns:96px minmax(0,1fr) 44px; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--border)!important; border-radius:14px; padding:16px!important}
.woocommerce-cart .wc-block-cart-item__image{width:96px!important; padding:0!important}
.woocommerce-cart .wc-block-cart-item__image img{width:96px!important; height:96px!important; object-fit:contain; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:8px}
.woocommerce-cart .wc-block-cart-item__product{padding:0!important}
.woocommerce-cart .wc-block-cart-item__total{display:none!important}
.woocommerce-cart .wc-block-cart-item__remove-link{width:42px; height:42px; padding:0!important; border:1px solid var(--border)!important; border-radius:10px; overflow:hidden;
  text-indent:-999px; position:relative; background:transparent!important}
.woocommerce-cart .wc-block-cart-item__remove-link:before{content:""; position:absolute; inset:0; display:block; text-indent:0; color:var(--muted);
  background:currentColor; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>') center/19px 19px no-repeat}
.woocommerce-cart .wc-block-cart-item__remove-link:hover{border-color:#ff5a66!important; background:rgba(255,90,102,.08)!important}
.woocommerce-cart .wc-block-cart-item__remove-link:hover:before{color:#ff5a66}
@media(max-width:700px){
  .woocommerce-cart .fr-cart-card{grid-template-columns:74px minmax(0,1fr) auto;
    grid-template-areas:"media body remove" "media price qty"; column-gap:14px; row-gap:14px; padding:14px}
  .woocommerce-cart .wc-block-cart-items tr.wc-block-cart-items__row{grid-template-columns:74px minmax(0,1fr) 40px; gap:12px; align-items:start; padding:12px!important}
  .woocommerce-cart .wc-block-cart-item__image{width:74px!important}
  .woocommerce-cart .wc-block-cart-item__image img{width:74px!important; height:74px!important}
  .woocommerce-cart .fr-cart-card__media{width:74px; height:74px; border-radius:10px}
  .woocommerce-cart .fr-cart-card__title{font-size:.95rem; margin-bottom:8px}
  .woocommerce-cart .fr-cart-card__remove{width:38px; height:38px}
  .woocommerce-cart .cart-collaterals{display:block}
  .woocommerce-cart .cart-collaterals .cart_totals{width:100%}
}
@media(max-width:460px){
  .woocommerce-cart .fr-cart-card{grid-template-columns:66px minmax(0,1fr) auto; padding:12px}
  .woocommerce-cart .wc-block-cart-items tr.wc-block-cart-items__row{grid-template-columns:66px minmax(0,1fr) 36px; padding:10px!important}
  .woocommerce-cart .wc-block-cart-item__image{width:66px!important}
  .woocommerce-cart .wc-block-cart-item__image img{width:66px!important; height:66px!important}
  .woocommerce-cart .fr-cart-card__media{width:66px; height:66px}
  .woocommerce-cart .fr-cart-card__remove{width:36px; height:36px}
}

/* ---- Кабинет: сайдбар «разделы» + контент (только для залогиненных, чтобы не ломать вход).
   Flex (а не grid), т.к. WooCommerce вставляет .woocommerce-notices-wrapper доп. потомком. ---- */
body.logged-in.woocommerce-account .wc-page .woocommerce{display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start}
body.logged-in.woocommerce-account .wc-page .woocommerce > .woocommerce-notices-wrapper{flex:0 0 100%; width:100%}
.fr-acc-nav{flex:0 0 290px; max-width:290px; min-width:0}
.fr-acc-nav ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.fr-acc-nav li{list-style:none}
.fr-acc-nav a{display:flex; align-items:center; gap:13px; padding:14px 16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); color:var(--text); text-decoration:none; transition:.16s}
.fr-acc-nav a:hover{border-color:var(--accent); box-shadow:var(--glow); transform:translateY(-1px)}
.fr-acc-nav__ic{width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line)}
.fr-acc-nav__ic svg{width:21px; height:21px}
.fr-acc-nav__label{font-weight:700; font-size:.98rem; min-width:0}
.fr-acc-nav .is-active a{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent)}
.fr-acc-nav .is-active .fr-acc-nav__ic{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.fr-acc-nav .woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--muted)}
.fr-acc-nav .woocommerce-MyAccount-navigation-link--customer-logout .fr-acc-nav__ic{color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,transparent); border-color:transparent}
.woocommerce-MyAccount-content{flex:1 1 300px; min-width:0}
.woocommerce-MyAccount-content > h3:first-child{margin-top:0}
@media(max-width:900px){
  body.logged-in.woocommerce-account .wc-page .woocommerce{gap:20px}
  .fr-acc-nav{flex-basis:100%; max-width:none}
  .woocommerce-MyAccount-content{flex-basis:100%}
  .fr-acc-nav ul{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .fr-acc-nav a{padding:12px 14px}
}
@media(max-width:480px){ .fr-acc-nav ul{grid-template-columns:1fr} }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword{background:var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:26px; max-width:480px}
/* ===== Оформление заказа (checkout) ===== */
.woocommerce .col2-set{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; margin:0 0 30px}
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2{width:auto; float:none; margin:0}
.woocommerce-checkout h3{font-size:1.25rem; margin:0 0 16px}
/* поле: подпись над полем, поле на всю ширину */
.woocommerce-checkout .form-row{display:flex; flex-direction:column; gap:6px; margin:0 0 16px; padding:0}
.woocommerce-checkout .form-row label{color:var(--muted); font-size:.88rem; margin:0; line-height:1.3}
.woocommerce-checkout .form-row label .required{color:var(--accent); border:0; text-decoration:none}
.woocommerce-checkout .form-row label .optional{color:var(--muted); font-weight:400}
.woocommerce-checkout .woocommerce-input-wrapper{display:block; width:100%}
.woocommerce-checkout .input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select{width:100%!important}
.woocommerce-checkout .select2-container{width:100%!important}
.woocommerce-checkout textarea{min-height:120px; resize:vertical}
/* имя и фамилия — в одну строку, остальные поля на всю ширину */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row{grid-column:1 / -1}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first{grid-column:1 / 2}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last{grid-column:2 / 3}
/* заголовки групп полей: печатаются такой же строкой формы (см. fr_checkout_groups),
   поэтому раскладку задаём здесь, а не в разметке */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .fr-fgroup{margin:10px 0 14px}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .fr-fgroup:first-child{margin-top:0}
.woocommerce-checkout .fr-fgroup__t{display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2); padding-bottom:8px; border-bottom:1px solid var(--border)}

/* ---- ошибки полей ----
   Штатная валидация WooCommerce пишет одно и то же трижды: плашкой над формой, подписью
   под полем и красной рамкой. Плашку и подпись снимает account.js, здесь — вид того, что
   остаётся: подсказка рядом с подписью поля и красная рамка. display:none у подписи —
   страховка на случай, если скрипт снимет её на кадр позже. */
.woocommerce-checkout .checkout-inline-error-message{display:none}
.woocommerce-checkout .form-row .fr-fhint{color:var(--danger); font-weight:600; font-size:.8rem; margin-left:8px}
.woocommerce-checkout .form-row.woocommerce-invalid > label{color:var(--text)}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single{
  border-color:var(--danger)!important}

/* ---- «Создать личный кабинет» на оформлении ----
   Галочку и поля под ней печатает штатный form-billing.php, раскрывает и прячет их
   штатный checkout.js (slideDown у div.create-account). Отделяем блок линией: иначе
   пароль читается как ещё одно поле плательщика. */
.woocommerce-checkout .woocommerce-account-fields{margin:2px 0 22px; padding-top:18px;
  border-top:1px solid var(--border)}
.woocommerce-checkout .woocommerce-account-fields label.checkbox{display:flex; align-items:flex-start;
  gap:10px; margin:0; color:var(--text); font-size:.95rem; font-weight:600; line-height:1.45; cursor:pointer}
.woocommerce-checkout .woocommerce-account-fields input[type=checkbox]{width:18px; height:18px;
  margin:1px 0 0; flex:0 0 auto; accent-color:var(--accent)}
.woocommerce-checkout .woocommerce-account-fields div.create-account{margin:16px 0 0}
.woocommerce-checkout .woocommerce-account-fields div.create-account .form-row:last-child{margin-bottom:0}
/* согласие на обработку ПДн — тем же тоном, что и на регистрации: подпись обычная,
   пояснение со ссылкой на политику под ней */
.woocommerce-checkout .fr-consent-row label.checkbox{font-weight:400; color:var(--muted); font-size:.88rem}
.woocommerce-checkout .fr-consent-row .description{display:block; margin:6px 0 0 28px;
  color:var(--muted); font-size:.82rem; line-height:1.45}
.woocommerce-checkout .fr-consent-row .description a{color:var(--accent)}

/* блок «Ваш заказ» */
.woocommerce-checkout #order_review_heading{font-size:1.35rem; margin:6px 0 16px}
.woocommerce-checkout .cart-subtotal{display:none!important}
.woocommerce-checkout #payment{margin-top:18px}
/* нет онлайн-способов оплаты: подпись о менеджере — не «плашка», а деловая заметка */
.woocommerce-checkout #payment ul.payment_methods{margin:0; padding:0; border:0; list-style:none}
.woocommerce-checkout #payment ul.payment_methods > li{margin:0; padding:0; list-style:none; background:transparent}
.woocommerce-checkout #payment ul.payment_methods .woocommerce-info{
  background:transparent; border:0; border-left:0; border-radius:0; overflow:visible;
  padding:0 0 0 26px; margin:0 0 18px; color:var(--muted); font-size:.92rem; line-height:1.5; position:relative}
.woocommerce-checkout #payment ul.payment_methods .woocommerce-info::before{
  content:""; position:absolute; left:0; top:2px; width:16px; height:16px; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>') center/contain no-repeat}
.woocommerce-checkout #place_order{width:100%; margin-top:8px}
.woocommerce-checkout .woocommerce-privacy-policy-text{font-size:.85rem; color:var(--muted)}
.woocommerce-checkout .woocommerce-privacy-policy-text p{margin:0 0 12px}
@media(max-width:760px){
  .woocommerce .col2-set{grid-template-columns:1fr; gap:0}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last{grid-column:1 / -1}
}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(4,6,9,.93); display:flex; align-items:center; justify-content:center; padding:44px}
.lightbox__img{max-width:90vw; max-height:88vh; border-radius:10px; user-select:none; -webkit-user-drag:none}
.lightbox__close{position:absolute; top:18px; right:20px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.25rem; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition:.15s}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:0; padding-bottom:5px; transition:.15s}
.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__prev{left:18px} .lightbox__next{right:18px}
.lightbox__count{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:.88rem;
  background:rgba(255,255,255,.14); padding:5px 13px; border-radius:999px; backdrop-filter:blur(4px)}
@media(max-width:560px){.lightbox{padding:16px}.lightbox__nav{width:42px; height:42px; font-size:1.6rem}.lightbox__prev{left:8px}.lightbox__next{right:8px}}


/* ============================================================
   MOBILE FIXES (анти-«съезжание»)
   ============================================================ */
html, body{max-width:100%; overflow-x:hidden}
img, svg, video{max-width:100%}
.container{width:100%}

/* верхняя плашка контактов прячется на мобильных (дублируется в меню/подвале) */
@media (max-width:768px){ .topbar{display:none} }

/* большой CTA в шапке прячем заранее — он есть в мобильном меню */
@media (max-width:860px){ .header-actions .btn{display:none} }

@media (max-width:1024px){
  .header-main{height:64px; gap:14px}
  .logo b{font-size:1.15rem}
  .logo svg{width:26px; height:26px}
  .logo__img{height:48px}
  .header-actions{gap:2px}
}

/* блок «позвонить/заявка» в мобильном меню */
.mobile-nav__cta{margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border)}
.mobile-nav__cta .btn{width:100%}

@media (max-width:560px){
  .container{padding:0 16px}
  .section{padding:48px 0}
  .section--tight{padding:40px 0}

  /* шапка: оставляем поиск + профиль (ЛК) + корзину + бургер; избранное — в меню */
  .header-actions .icon-btn[aria-label="Избранное"]{display:none}

  /* hero */
  .hero__inner{padding-top:30px; padding-bottom:40px; gap:24px}
  .hero h1{font-size:1.7rem}
  .hero__sub{font-size:1rem; margin-bottom:22px}
  .hero__cta{gap:10px; flex-direction:column}
  .hero__cta .btn{width:100%; justify-content:center}
  .hero__points{gap:12px 18px; margin-top:22px}
  .eyebrow{font-size:.72rem}

  /* заголовки секций с кнопкой «Все товары» — переносим */
  .section-head{flex-wrap:wrap; gap:12px !important}

  /* тулбар каталога — в столбик */
  .catalog-toolbar{flex-direction:column; align-items:stretch; gap:12px}
  .woocommerce-ordering, .woocommerce-ordering select{width:100%}

  /* плитки/карточки: 2 колонки на телефоне → всё внутри компактнее */
  .products-grid, .cats__grid, .services__grid, .process__grid{gap:10px}
  /* плитка категории в две колонки: стрелку убираем — вся плитка и так ссылка, а название
     без неё не рвётся на четыре строки */
  .cat-card__body{padding:11px 12px 12px}
  .cat-card h3{font-size:.9rem}
  .cat-card .arrow{display:none}
  .product-card__media{margin:4px 4px 0}
  .product-card__media img{padding:8px}
  .product-card__fav{top:10px; right:10px; width:30px; height:30px}
  .product-card__fav svg{width:15px; height:15px}
  .product-card__body{padding:10px; gap:6px}
  .product-card__title{font-size:.82rem; min-height:2.4em}
  .product-card__price{font-size:.98rem}
  /* цена и наличие — в столбик: рядом в 2 колонки они не помещаются */
  .product-card__meta{flex-direction:column; align-items:flex-start; gap:2px}
  .stock{font-size:.72rem}
  .stock svg{width:12px; height:12px}
  .product-card__btn{font-size:.76rem; padding:9px 8px; gap:6px}
  .product-card__btn svg{display:none}   /* иконка съедает ширину узкой карточки */
  /* степпер «− N в корзине +»: в узкой карточке оставляем только число */
  .qty-cart{min-height:40px}
  .qty-cart__btn{flex:0 0 34px}
  .qty-cart__btn svg{width:15px; height:15px}
  .qty-cart__label{font-size:.8rem}
  .qty-cart__word{display:none}
  .stat{padding:20px 16px}
  .stats__grid{grid-template-columns:1fr}
  .stat{border-right:0}
  .stat:nth-child(1),.stat:nth-child(2),.stat:nth-child(3){border-bottom:1px solid var(--border)}
  .step__n{font-size:2rem}

  /* карточка товара */
  .pdp__buyrow{flex-direction:column; align-items:stretch}
  .pdp__buyrow .btn{min-width:0; width:100%}
  .qty-control{align-self:flex-start}
  .pdp__price{font-size:1.6rem}
  .pdp__buy h1{font-size:1.4rem}

  /* CTA-баннер */
  .cta-band{padding:26px 20px}
  .cta-band__in{gap:16px}
  .cta-band h2{font-size:1.4rem}
}

@media (max-width:380px){
  .header-main{gap:8px}
  .logo{gap:8px}
  .logo__img{height:42px}
  .logo b{font-size:1.02rem}
  .icon-btn{width:38px; height:38px; border-radius:9px}
  .icon-btn svg{width:20px; height:20px}
  .search-pop{right:12px; width:calc(100vw - 24px)}
  .mobile-nav{padding:18px 16px}
}

/* фикс ловушки grid/flex min-width: большая hero-картинка не распирает колонку */
.hero__content, .hero__visual{min-width:0}
.hero__frame{max-width:100%}
.products-grid > *, .cats__grid > *, .services__grid > *, .process__grid > *{min-width:0}

/* hero на мобильных/планшете — простой стек вместо grid (гарантия от переполнения) */
@media (max-width:768px){
  .hero__inner{display:block}
  .hero__content{max-width:100%}
  .hero__visual{max-width:520px; margin:26px auto 0}
}

/* жёсткая привязка ширины hero-контента к вьюпорту — защита от любого переполнения родителя */
@media (max-width:768px){
  .hero__content{max-width:calc(100vw - 32px)}
  .hero h1{overflow-wrap:anywhere}
}

/* hero mobile — приоритетный flex-стек */
@media (max-width:768px){
  .hero{overflow:hidden}
  .hero > .hero__inner{display:flex !important; flex-direction:column !important; align-items:stretch !important}
  .hero > .hero__inner > .hero__content{width:100% !important; max-width:100% !important; min-width:0 !important; flex:0 0 auto !important}
  .hero > .hero__inner > .hero__visual{width:100% !important; max-width:100% !important; min-width:0 !important; flex:0 0 auto !important; order:2; margin:24px auto 0 !important}
  .hero h1{font-size:1.55rem !important; line-height:1.16; overflow-wrap:anywhere}
  .hero__sub{font-size:.98rem !important}
}



/* ============================================================
   PROMO (баннер акции) + переключатель темы
   ============================================================ */
.promo{position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:22px 26px;
  background:radial-gradient(420px 200px at 100% 0%, rgba(255,255,255,.2), transparent 70%), var(--accent-grad);
  color:var(--accent-ink); display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 18px 40px -22px rgba(31,107,255,.55)}
.promo::after{content:""; position:absolute; right:-70px; bottom:-150px; width:300px; height:300px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); box-shadow:0 0 0 40px rgba(255,255,255,.05)}
/* бейдж — белым по синему: розовая плашка спорила с палитрой сайта */
.promo__badge{position:relative; z-index:2; flex-shrink:0; display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:999px;
  font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:.74rem}
.promo__badge svg{width:16px; height:16px}
.promo__body{position:relative; z-index:2; flex:1; min-width:240px}
.promo__body h3{margin:0 0 4px; font-size:1.32rem; color:var(--accent-ink)}
.promo__body p{margin:0; opacity:.92; font-size:.96rem}
.promo .btn{position:relative; z-index:2; flex-shrink:0; background:#fff; color:#1f5fff; border:0}
.promo .btn svg{width:16px; height:16px}
.promo .btn:hover{transform:translateY(-1px); background:#eef3ff; color:#1746d6; box-shadow:0 12px 30px -12px rgba(15,27,45,.35)}
@media (max-width:560px){
  .promo{padding:20px 18px; gap:14px}
  .promo__body h3{font-size:1.12rem}
  .promo .btn{width:100%; justify-content:center}
}

/* попап «Условия акции» */
.popup__box--wide{width:min(540px,100%)}
.promo-terms{max-width:none}
.promo-terms p:first-child{margin-top:0; color:var(--text); font-weight:600}
.promo-terms ul{margin:14px 0}
.promo-terms li b{color:var(--accent)}
.promo-terms__note{font-size:.82rem !important; color:var(--muted) !important; margin:16px 0 0 !important; line-height:1.55}
.promo-terms__note::before{display:none !important}

/* ============================================================
   TRIAL (блок «оборудование на тест»)
   ============================================================ */
.trial{position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--sh-2);
  background:radial-gradient(620px 320px at 100% -10%, rgba(31,107,255,.10), transparent 60%), var(--surface);
  padding:40px; display:grid; grid-template-columns:1.25fr .85fr; gap:40px; align-items:center}
.trial__main{min-width:0}
.trial__badge{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.trial__badge svg{width:15px; height:15px}
.trial h3{margin:16px 0 10px; font-size:1.6rem; line-height:1.2}
.trial__lead{margin:0 0 24px; color:var(--muted); font-size:1.02rem; max-width:520px}
.trial__cta{display:flex; gap:12px; flex-wrap:wrap}
.trial__cta .btn svg{width:16px; height:16px}
.trial__points{list-style:none; margin:0; padding:0 0 0 32px; border-left:1px solid var(--border);
  display:flex; flex-direction:column; gap:16px}
.trial__points li{display:flex; align-items:flex-start; gap:14px}
.trial__ic{flex-shrink:0; width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line)}
.trial__ic svg{width:20px; height:20px}
.trial__txt{display:flex; flex-direction:column}
.trial__txt b{font-size:.98rem; color:var(--text)}
.trial__txt em{font-style:normal; font-size:.85rem; color:var(--muted); margin-top:2px; line-height:1.4}
@media (max-width:860px){
  .trial{grid-template-columns:1fr; gap:28px; padding:30px}
  .trial__points{border-left:0; border-top:1px solid var(--border); padding:24px 0 0}
}
@media (max-width:560px){
  .trial{padding:24px 20px}
  .trial h3{font-size:1.3rem}
  .trial__cta .btn{flex:1; justify-content:center}
}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ (dashboard / реквизиты / заказы)
   ============================================================ */
/* приветствие + быстрые карточки */
.fr-dash__hi{font-size:1.15rem; margin:0 0 4px}
.fr-account-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:22px 0 8px}
.fr-acc-card{display:flex; flex-direction:column; gap:6px; padding:20px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); transition:.18s}
.fr-acc-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--glow)}
.fr-acc-card__ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); margin-bottom:6px}
.fr-acc-card__ic svg{width:22px; height:22px}
.fr-acc-card b{font-size:1rem; color:var(--text)}
.fr-acc-card__sub{font-size:.84rem; color:var(--muted)}
/* недавние заказы на дашборде + бейджи статусов */
.fr-orders-recent{margin:26px 0 4px}
.fr-orders-recent__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px}
.fr-orders-recent__head h3{margin:0; font-size:1.05rem}
.fr-orders-recent__all{display:inline-flex; align-items:center; gap:5px; font-size:.86rem; color:var(--accent); white-space:nowrap}
.fr-orders-recent__all svg{width:15px; height:15px}
.fr-orders-recent__empty{padding:18px; border:1px dashed var(--border); border-radius:var(--radius-sm)}
.fr-orders-table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden}
.fr-orders-table th{background:var(--bg-2); text-align:left; padding:12px 16px; font-size:.76rem; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.03em}
.fr-orders-table td{padding:13px 16px; border-top:1px solid var(--border); font-size:.9rem; color:var(--text)}
.fr-orders-table tbody tr:hover{background:color-mix(in srgb, var(--accent) 5%, transparent)}
.fr-orders-table__act a{color:var(--accent); font-weight:600}
.fr-orders-table__act a:hover{text-decoration:underline}
.fr-order-status{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:.78rem; font-weight:700; white-space:nowrap; color:var(--muted);
  border:1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  background:color-mix(in srgb, var(--muted) 12%, transparent)}
.fr-order-status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto}
.fr-order-status--on-hold,.fr-order-status--pending{color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 13%,transparent)}
.fr-order-status--processing{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fr-order-status--completed{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 45%,transparent); background:color-mix(in srgb,var(--ok) 13%,transparent)}
.fr-order-status--cancelled,.fr-order-status--failed{color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 45%,transparent); background:color-mix(in srgb,var(--danger) 12%,transparent)}
/* пользовательские статусы воронки */
.fr-order-status--fr-manager{color:#6d4fd6;
  border-color:color-mix(in srgb,#6d4fd6 45%,transparent); background:color-mix(in srgb,#6d4fd6 14%,transparent)}
.fr-order-status--fr-agreed{color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 13%,transparent)}
.fr-order-status--fr-production{color:var(--accent-2);
  border-color:color-mix(in srgb,var(--accent-2) 48%,transparent); background:color-mix(in srgb,var(--accent-2) 14%,transparent)}
.fr-order-status--fr-shipped{color:#0e7490;
  border-color:color-mix(in srgb,#0e7490 45%,transparent); background:color-mix(in srgb,#0e7490 14%,transparent)}
@media(max-width:640px){
  .fr-orders-table thead{display:none}
  .fr-orders-table,.fr-orders-table tbody,.fr-orders-table tr,.fr-orders-table td{display:block; width:100%}
  .fr-orders-table tr{border-top:1px solid var(--border)}
  .fr-orders-table tr:first-child{border-top:0}
  .fr-orders-table td{border:0; padding:7px 16px; display:flex; justify-content:space-between; gap:16px; align-items:center}
  .fr-orders-table td::before{content:attr(data-th); color:var(--muted); font-size:.8rem; font-weight:700}
  .fr-orders-table td.fr-orders-table__act{justify-content:flex-end}
  .fr-orders-table td.fr-orders-table__act::before{display:none}
}

.fr-dash__danger{margin-top:28px; padding-top:18px; border-top:1px solid var(--border)}
.fr-link-danger{background:none; border:0; padding:0; color:var(--muted-2); font:inherit; font-size:.85rem;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:.15s}
.fr-link-danger:hover{color:#ff5a66}

/* форма реквизитов */
.fr-req__intro{margin:0 0 20px; max-width:680px}
.fr-req__group{border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px 6px; margin:0 0 20px; min-width:0}
.fr-req__group legend{padding:0 8px; font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.fr-req__grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.fr-field{display:flex; flex-direction:column; gap:6px; margin:0 0 16px; min-width:0}
.fr-field label{color:var(--muted); font-size:.86rem; line-height:1.3}
.fr-req input.input-text, .fr-req select, .fr-req textarea{width:100%}
.fr-req textarea{min-height:84px; resize:vertical}
.fr-map-toggle{align-self:flex-start; margin-top:8px}
.fr-map{height:320px; margin-top:12px; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.fr-map [class*="ground-pane"]{filter:none}
.fr-req__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px}
.fr-field__hint{margin:0 0 12px; font-size:.84rem}
@media(max-width:600px){ .fr-req__grid{grid-template-columns:1fr} }

/* ---- Подсказки адреса (DaData) ----
   Список рисует assets/js/dadata.js и кладёт его рядом с полем: якорь — родитель
   поля (span.woocommerce-input-wrapper на оформлении, .fr-field в кабинете),
   ему добавляется .fr-sg-host. */
.fr-sg-host{position:relative}
.fr-sg{position:absolute; z-index:60; top:calc(100% + 4px); left:0; right:0; margin:0; padding:4px;
  list-style:none; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius-sm);
  box-shadow:0 18px 40px -18px rgba(15,27,45,.35); max-height:288px; overflow-y:auto}
.fr-sg__item{padding:8px 10px; border-radius:8px; cursor:pointer; font-size:.92rem; line-height:1.35}
.fr-sg__item:hover, .fr-sg__item.is-active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.fr-sg__hint{display:block; margin-top:2px; color:var(--muted-2); font-size:.78rem}
.fr-sg__brand{margin:4px -4px -4px; padding:6px 10px; border-top:1px solid var(--border); text-align:right}
.fr-sg__brand a{color:var(--muted-2); font-size:.72rem; letter-spacing:.02em}
.fr-sg__brand a:hover{color:var(--accent)}

/* ---- Адресная книга ---- */
.fr-addr__list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:0 0 26px}
.fr-addr-card{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:16px 18px;
  display:flex; flex-direction:column; gap:10px}
.fr-addr-card.is-default{border-color:var(--accent); box-shadow:var(--glow)}
.fr-addr-card__head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.fr-addr-card__head b{font-size:1rem}
.fr-addr-card__def{display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:700; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px; padding:3px 9px; white-space:nowrap}
.fr-addr-card__def svg{width:13px; height:13px}
.fr-addr-card__body{font-size:.9rem; color:var(--text); display:flex; flex-direction:column; gap:3px}
.fr-addr-card__line{color:var(--muted)}
.fr-addr-card__actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:4px}
.fr-addr-card__actions form{margin:0}
.fr-addr__form{margin-top:8px}
.fr-addr__form-title{font-size:1.1rem; margin:0 0 14px}
.fr-addr__empty{padding:18px; border:1px dashed var(--border); border-radius:var(--radius-sm); margin:0 0 22px}

/* форма нового адреса раскрывается по кнопке «+ Добавить адрес».
   Высота анимируется через grid-template-rows 0fr→1fr: не нужно мерить
   содержимое из JS и ничего не дёргается при подстановке подсказок адреса. */
.fr-addr__toggle{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; width:100%;
  border:1px dashed var(--border-2); border-radius:var(--radius); background:var(--surface);
  color:var(--text); font:inherit; font-weight:600; cursor:pointer; text-align:left;
  transition:border-color .18s ease, color .18s ease, background .18s ease}
.fr-addr__toggle:hover{border-color:var(--accent); color:var(--accent); background:var(--surface-2)}
.fr-addr__toggle-ic{width:20px; height:20px; flex:none; transition:transform .28s ease}
.fr-addr__new.is-open .fr-addr__toggle-ic{transform:rotate(45deg)}
.fr-js .fr-addr__panel{display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden;
  transition:grid-template-rows .32s ease, opacity .22s ease, visibility 0s linear .32s}
.fr-js .fr-addr__panel-in{overflow:hidden; min-height:0}
/* пока панель едет — содержимое режется по высоте; когда доехала, отпускаем
   overflow, иначе выпадашка подсказок адреса обрезается по нижнему краю */
.fr-js .fr-addr__new.is-shown .fr-addr__panel-in{overflow:visible}
.fr-js .fr-addr__new.is-open .fr-addr__panel{grid-template-rows:1fr; opacity:1; visibility:visible; transition-delay:0s}
.fr-addr__new .fr-addr__form{margin-top:14px}
@media (prefers-reduced-motion: reduce){
  .fr-js .fr-addr__panel{transition:none}
  .fr-addr__toggle-ic{transition:none}
}

/* ---- выбор сохранённого адреса на оформлении ---- */
.fr-checkout-saved select{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:11px 14px; min-height:46px; color:var(--text); font:inherit}

/* согласие 152-ФЗ в форме регистрации */
.fr-consent{display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:.85rem; line-height:1.45; cursor:pointer}
.fr-consent input[type=checkbox]{width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--accent)}
.fr-consent a{color:var(--accent)}

/* реквизиты в карточке заказа (кабинет) */
.fr-order-req{margin-top:30px}
.fr-order-req h2{font-size:1.25rem; margin:0 0 14px}
.fr-order-req__table{width:100%; border:1px solid var(--border); border-radius:14px; border-collapse:separate;
  border-spacing:0; overflow:hidden; background:var(--surface)}
.fr-order-req__table th,.fr-order-req__table td{padding:11px 16px; text-align:left; font-size:.92rem; vertical-align:top}
.fr-order-req__table th{width:38%; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border)}
.fr-order-req__table td{color:var(--text); border-bottom:1px solid var(--border)}
.fr-order-req__table tr:last-child th,.fr-order-req__table tr:last-child td{border-bottom:0}
/* группы реквизитов на детальной странице заказа */
.fr-order-req__group{margin:0 0 18px}
.fr-order-req__group:last-child{margin-bottom:0}
.fr-order-req__group h3{font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px}

/* пилюля статуса оплаты — рядом со статусом заказа (та же геометрия, что .fr-order-status) */
.fr-pay-status{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:.78rem; font-weight:700; white-space:nowrap; color:var(--muted);
  border:1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  background:color-mix(in srgb, var(--muted) 12%, transparent)}
.fr-pay-status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto}
.fr-pay-status--paid{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 45%,transparent); background:color-mix(in srgb,var(--ok) 13%,transparent)}
.fr-pay-status--unpaid{color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 13%,transparent)}
.fr-pay-status--refunded{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fr-pay-status--void{color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 45%,transparent); background:color-mix(in srgb,var(--danger) 12%,transparent)}

/* список заказов карточками (вкладка «Мои заказы») */
.fr-orders-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin:6px 0 8px}
.fr-order-card{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); overflow:hidden; transition:.18s}
.fr-order-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--glow)}
.fr-order-card__main{display:flex; flex-direction:column; gap:12px; padding:18px 20px; color:inherit; text-decoration:none; flex:1}
.fr-order-card__top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.fr-order-card__num{font-weight:800; font-size:1.02rem; color:var(--text)}
.fr-order-card__date{color:var(--muted); font-size:.86rem; white-space:nowrap}
.fr-order-card__badges{display:flex; flex-wrap:wrap; gap:8px}
.fr-order-card__thumbs{display:flex; gap:8px}
.fr-order-card__thumb{width:46px; height:46px; object-fit:cover; border-radius:10px; border:1px solid var(--border); background:var(--bg-2)}
.fr-order-card__foot{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:auto}
.fr-order-card__total{font-size:1.15rem; font-weight:800; color:var(--text)}
.fr-order-card__count{color:var(--muted); font-size:.84rem; white-space:nowrap}
.fr-order-card__actions{display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 18px}
.fr-orders-pagination{display:flex; align-items:center; justify-content:center; gap:16px; margin:22px 0 4px}
.fr-orders-pagination__pos{color:var(--muted); font-size:.86rem}

/* фильтр по статусу + сортировка на вкладке «Мои заказы» */
.fr-ofilter{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin:2px 0 20px; min-width:0; max-width:100%}
.fr-ofilter__chips{display:flex; flex-wrap:wrap; gap:8px; min-width:0; max-width:100%}
.fr-ofilter__chip{display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:.85rem; font-weight:600;
  text-decoration:none; transition:.15s; white-space:nowrap}
.fr-ofilter__chip:hover{border-color:var(--border-2); color:var(--text)}
.fr-ofilter__chip.is-active{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); color:var(--text)}
.fr-ofilter__chip .fr-order-status{padding:0; border:0; background:none} /* пилюля внутри чипа — свой цвет, без рамки */
.fr-ofilter__n{font-size:.76rem; font-weight:700; color:var(--muted); background:var(--bg-2);
  border-radius:999px; padding:1px 7px; min-width:19px; text-align:center}
.fr-ofilter__chip.is-active .fr-ofilter__n{color:var(--accent-ink); background:var(--accent)}
.fr-ofilter__sort{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.fr-ofilter__sort label{color:var(--muted); font-size:.85rem; white-space:nowrap}
.fr-ofilter__sort select{background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:8px 12px; color:var(--text); font:inherit; font-size:.85rem; min-height:40px; cursor:pointer}
@media(max-width:640px){
  .fr-ofilter{flex-direction:column; align-items:stretch; gap:12px}
  /* чипы переносятся на новые строки; горизонтальный скролл раздувал ширину и ломал страницу на iOS */
  .fr-ofilter__chips{flex-wrap:wrap; max-width:100%}
  .fr-ofilter__sort{justify-content:space-between}
  .fr-ofilter__sort label{flex:0 0 auto}
  .fr-ofilter__sort select{flex:1 1 auto; min-width:0; max-width:100%}
}

/* детальная страница заказа: шапка + действия + примечания */
.fr-order-detail{margin:0 0 8px}
.fr-order-detail__head{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px}
.fr-order-detail__title h1{font-size:1.5rem; margin:0}
.fr-order-detail__date{color:var(--muted); font-size:.9rem}
.fr-order-detail__badges{display:flex; flex-wrap:wrap; gap:8px; padding-top:4px}
.fr-order-actions{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 6px}
.fr-order-notes{margin:24px 0}
.fr-order-notes h2{font-size:1.15rem; margin:0 0 12px}
.fr-order-notes .notes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.fr-order-notes .note{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:12px 14px}
.fr-order-notes .meta{color:var(--muted); font-size:.82rem; margin:0 0 4px}
.fr-order-notes .description p{margin:0}
/* ============================================================
   ПОДТВЕРЖДЁННЫЙ ЗАКАЗ: «Спасибо за заказ» и карточка заказа в кабинете
   ============================================================
   Обе страницы собирает один и тот же woocommerce_order_details, поэтому и стили
   общие. Позиции печатаются карточками .fr-sum-item (те же, что в сводке «Ваш
   заказ»), а таблица вокруг них нужна лишь потому, что итоги приходят из хуков
   WooCommerce готовыми <tr>: раскладываем её флексом, от таблицы остаётся семантика. */

/* шапка подтверждения */
.fr-thanks__head{display:flex; align-items:flex-start; gap:16px; padding:22px 24px; margin:0 0 18px;
  border:1px solid color-mix(in srgb,var(--ok) 32%,transparent); border-radius:var(--radius);
  background:color-mix(in srgb,var(--ok) 7%,transparent)}
.fr-thanks__ic{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:42px; height:42px; border-radius:50%; background:var(--ok); color:#fff}
.fr-thanks__ic svg{width:22px; height:22px; stroke-width:3}
.fr-thanks__title{margin:2px 0 4px; font-size:1.35rem; line-height:1.25}
.fr-thanks__lead{margin:0; color:var(--muted); line-height:1.5}
.fr-thanks__head--failed{border-color:color-mix(in srgb,var(--danger) 32%,transparent);
  background:color-mix(in srgb,var(--danger) 7%,transparent)}
.fr-thanks__head--failed .fr-thanks__ic{background:var(--danger)}

/* ключевые факты о заказе — карточками, а не маркированным списком */
.fr-thanks__facts{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fr-thanks__facts li{display:flex; flex-direction:column; gap:6px; padding:13px 16px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
.fr-thanks__facts li span{color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.fr-thanks__facts li strong{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:1rem; color:var(--text); overflow-wrap:anywhere}
.fr-thanks__actions{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 4px}

/* ссылка на заказ для гостя: кабинета у него нет, ссылку надо отдать в руки */
.fr-keep{margin:18px 0 0; padding:18px 20px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface)}
.fr-keep__t{display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:1.05rem}
.fr-keep__ic{flex:0 0 auto; width:20px; height:20px; color:var(--accent)}
.fr-keep__lead{margin:0 0 14px; color:var(--muted); font-size:.94rem; line-height:1.5}
.fr-keep__row{display:flex; flex-wrap:wrap; align-items:stretch; gap:10px}
.fr-keep__url{flex:1 1 260px; min-width:0; padding:10px 14px; font:inherit; font-size:.9rem;
  color:var(--text); background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); text-overflow:ellipsis}
.fr-keep__row .btn{flex:0 0 auto}
.fr-keep__row .btn.is-done{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.fr-keep__reg{margin:14px 0 0; color:var(--muted); font-size:.9rem; line-height:1.5}
.fr-keep__reg a{color:var(--accent); font-weight:600}

/* состав заказа: от таблицы остаётся семантика, вид — карточки + сводка итогов.
   Селекторы длинные не от хорошей жизни: общее правило .woocommerce table.shop_table
   ставит рамку и заливку шапки через !important (той же цепочкой перебивает их
   .fr-totals в корзине). */
.woocommerce-order-details{margin:26px 0 0}
.woocommerce-order-details__title{font-size:1.25rem; margin:0 0 14px}
.woocommerce table.shop_table.woocommerce-table--order-details{display:block; width:100%; margin:0;
  border:0!important; border-radius:0; background:transparent}
.woocommerce-table--order-details thead{display:none}
.woocommerce-table--order-details tbody{display:grid; gap:10px}
.woocommerce-table--order-details tbody tr{display:block}
.woocommerce table.shop_table.woocommerce-table--order-details tbody td{display:block; padding:0!important; border:0!important}
/* позиция: фото → название с параметрами → сумма справа (в сводке чекаута колонки две) */
.fr-sum-item--order{grid-template-columns:72px minmax(0,1fr) auto; align-items:start; gap:16px}
.fr-sum-item--order .fr-sum-item__price{margin:0; justify-content:flex-end}
.fr-sum-item--order .fr-sum-item__title{margin-bottom:6px}
/* примечание к товару (purchase note) — под карточкой, обычным текстом */
.woocommerce table.shop_table.woocommerce-table--order-details .product-purchase-note td{
  padding:10px 14px!important; color:var(--muted);
  border:1px dashed var(--border)!important; border-radius:var(--radius-sm); background:var(--bg-2)}
.woocommerce-table--order-details .product-purchase-note p{margin:0}
/* итоги: подпись слева, значение справа */
.woocommerce-table--order-details tfoot{display:block; margin:16px 0 0; border-top:1px solid var(--border)}
.woocommerce-table--order-details tfoot tr{display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; padding:11px 2px; border-bottom:1px solid var(--border)}
.woocommerce-table--order-details tfoot tr:last-child{border-bottom:0}
.woocommerce table.shop_table.woocommerce-table--order-details tfoot th{background:transparent!important;
  border:0!important; padding:0!important; text-align:left; font-weight:600; color:var(--muted); font-size:.92rem}
.woocommerce table.shop_table.woocommerce-table--order-details tfoot td{border:0!important; padding:0!important;
  text-align:right; color:var(--text); font-weight:600}
.woocommerce-table--order-details tfoot .fr-order-total--order_total th,
.woocommerce-table--order-details tfoot .fr-order-total--order_total td{font-size:1.1rem; font-weight:800; color:var(--text)}
.woocommerce-table--order-details tfoot .fr-order-total--note td{font-weight:400; color:var(--muted)}
.woocommerce table.shop_table.woocommerce-table--order-details tfoot .fr-order-total--actions td{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}

/* адреса под заказом */
.woocommerce-customer-details{margin:26px 0 0}
.woocommerce-customer-details .woocommerce-column__title{font-size:1.25rem; margin:0 0 14px}
.woocommerce-customer-details address{font-style:normal; line-height:1.6; color:var(--text);
  padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
.woocommerce-customer-details address p{margin:6px 0 0; color:var(--muted)}
.woocommerce-columns--addresses{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.woocommerce-columns--addresses .woocommerce-column__title{margin-top:0}
/* WooCommerce печатает пустую обёртку адреса, когда доставка равна плательщику */
.woocommerce-customer-details + .address:empty{display:none}

@media(max-width:640px){
  .fr-thanks__head{flex-direction:column; gap:12px; padding:18px}
  .fr-thanks__title{font-size:1.2rem}
  .fr-thanks__actions .btn{width:100%; justify-content:center}
  .fr-keep{padding:16px}
  .fr-keep__row .btn{width:100%; justify-content:center}
  .woocommerce-table--order-details tfoot tr{flex-wrap:wrap; gap:4px}
  .woocommerce table.shop_table.woocommerce-table--order-details tfoot td{text-align:left}
  .woocommerce table.shop_table.woocommerce-table--order-details tfoot .fr-order-total--actions td{justify-content:flex-start}
  /* сумма позиции уезжает под название — три колонки в 320 px не встают */
  .fr-sum-item--order{grid-template-columns:60px minmax(0,1fr); gap:12px}
  .fr-sum-item--order .fr-sum-item__price{grid-column:1/-1; justify-content:flex-start; margin-top:2px}
}

/* суммы в таблицах заказа не рвём по разряду («35 000 ₽» одной строкой) */
.woocommerce-table--order-details .amount,
.woocommerce-orders-table .amount,
.shop_table td.product-total .amount,
.shop_table .order-total .amount,
.shop_table tfoot .amount{white-space:nowrap}

/* формы кабинета: вход / регистрация / сброс пароля / профиль — выровненная раскладка */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-ResetPassword .form-row,
.woocommerce-EditAccountForm .form-row{display:flex; flex-direction:column; gap:6px; margin:0 0 16px; padding:0; width:100%}
.woocommerce-form-login label:not(.woocommerce-form-login__rememberme),
.woocommerce-form-register label,
.woocommerce-ResetPassword label,
.woocommerce-EditAccountForm label{display:block; color:var(--muted); font-size:.86rem; margin:0; font-weight:500}
.woocommerce-form-login .input-text,
.woocommerce-form-register .input-text,
.woocommerce-ResetPassword .input-text,
.woocommerce-EditAccountForm .input-text{width:100%}
/* поле «показать пароль» (WooCommerce оборачивает input в .password-input) */
.woocommerce-password-hint{display:block; color:var(--muted-2); font-size:.8rem; margin-top:4px}
.password-input{display:block; position:relative; width:100%}
.password-input .input-text{width:100%; padding-right:44px!important}
.show-password-input{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; border-radius:8px; transition:.15s;
  border:0; background:transparent; padding:0; -webkit-appearance:none; appearance:none; box-shadow:none}
.show-password-input:hover{color:var(--text); background:color-mix(in srgb, var(--muted) 14%, transparent)}
.show-password-input::after{content:""; display:block; width:20px; height:20px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.show-password-input.display-password{color:var(--accent)}
.show-password-input.display-password::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A9.1 9.1 0 0 1 12 4c6.4 0 10 7 10 7a18 18 0 0 1-2.3 3.3'/%3E%3Cpath d='M6.6 6.6A17.8 17.8 0 0 0 2 11s3.6 7 10 7a9 9 0 0 0 3.4-.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A9.1 9.1 0 0 1 12 4c6.4 0 10 7 10 7a18 18 0 0 1-2.3 3.3'/%3E%3Cpath d='M6.6 6.6A17.8 17.8 0 0 0 2 11s3.6 7 10 7a9 9 0 0 0 3.4-.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E")}
/* строка «запомнить меня» + «Войти» */
.woocommerce-form-login__rememberme{display:inline-flex!important; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; cursor:pointer; margin:0 0 14px}
.woocommerce-form-login__rememberme input{width:18px; height:18px; margin:0; accent-color:var(--accent)}
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce-ResetPassword .woocommerce-Button{width:100%; margin:0 0 12px}
.woocommerce-LostPassword{margin:8px 0 0; font-size:.9rem}
.woocommerce-LostPassword a{color:var(--accent)}
/* Вход и Регистрация — РАЗДЕЛЬНЫЕ экраны, одна центрированная карточка
   (шаблон woocommerce/myaccount/form-login.php показывает только одну форму). */
.fr-auth{max-width:440px; margin:0 auto}
.fr-auth__card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px}
.fr-auth__card h2{font-size:1.3rem; margin:0 0 20px}
/* форма внутри карточки уже без собственной рамки/фона — карточка одна.
   Спецификой перекрываем и .woocommerce form.login/.register (0,2,1), и .woocommerce-form-* */
.woocommerce .fr-auth form.login,
.woocommerce .fr-auth form.register,
.fr-auth .woocommerce-form-login,
.fr-auth .woocommerce-form-register,
.fr-auth .woocommerce-verify-email{background:none; border:0; border-radius:0; padding:0; max-width:none; margin:0}
.fr-auth__lead{margin:-8px 0 18px; color:var(--muted); font-size:.94rem; line-height:1.5}
/* Над формой подтверждения WooCommerce успевает напечатать «Ваш заказ принят» — рядом с
   просьбой доказать, что заказ ваш, это сбивает с толку. Прячем только в этом случае. */
.woocommerce:has(> .fr-auth--verify) > .woocommerce-thankyou-order-received{display:none}
.fr-auth__switch{margin:20px 0 0; padding-top:18px; border-top:1px solid var(--border);
  color:var(--muted); font-size:.92rem; text-align:center}
.fr-auth__switch a{color:var(--accent); font-weight:600}
@media(max-width:520px){ .fr-auth__card{padding:22px} }

/* ============================================================
   ФОТОГАЛЕРЕЯ (шорткод [fr_gallery])
   ============================================================ */
.fr-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:10px 0}
.fr-gallery__item{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--bg-2); cursor:zoom-in; position:relative; z-index:0;
  transition:transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s cubic-bezier(.22,.8,.3,1), border-color .25s, z-index 0s .45s}
.fr-gallery__img{width:100%; height:100%; object-fit:cover; display:block}
/* наведение: плитка целиком приподнимается над соседями (фото внутри не зумится); только мышь — на тач-экране :hover залипает */
@media (hover:hover) and (pointer:fine){
  .fr-gallery__item:hover{transform:translateY(-6px) scale(1.03); border-color:var(--border-2);
    box-shadow:0 2px 4px rgba(15,27,45,.06), 0 20px 36px -14px rgba(15,27,45,.34);
    z-index:1; transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){ .fr-gallery__item:hover{transform:none} }
@media(max-width:520px){ .fr-gallery{grid-template-columns:repeat(2,1fr); gap:10px} }

/* ---------- страница контактов (перенос page-111.php старой темы) ---------- */
.contacts{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:24px; align-items:stretch}
.contacts__card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px}
.contacts__line{display:flex; align-items:flex-start; gap:10px; color:var(--text); text-decoration:none; padding:9px 0; font-weight:600}
.contacts__line svg{width:18px; height:18px; color:var(--accent); flex:0 0 18px; margin-top:3px}
a.contacts__line:hover{color:var(--accent)}
.contacts__block{margin-top:20px; padding-top:18px; border-top:1px solid var(--border)}
.contacts__block h3{margin:0 0 12px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.contacts__social{display:flex; gap:10px}
.contacts__social a{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--border-2); color:var(--muted)}
.contacts__social a:hover{border-color:var(--accent); color:var(--accent)}
.contacts__social svg{width:18px; height:18px}
.contacts__legal{color:var(--muted); font-size:.92rem; line-height:1.6}
.contacts__legal p{margin:0 0 .7em}
.contacts__map{min-height:460px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.contacts__map iframe{width:100%; height:100%; min-height:460px; border:0; display:block}
/* карта не задана — карточка одна и не прижимается к узкой колонке */
.contacts > .contacts__card:only-child{grid-column:1 / -1; max-width:560px}
@media (max-width:900px){
  .contacts{grid-template-columns:1fr}
  .contacts__map, .contacts__map iframe{min-height:320px}
}

/* ============================================================
   ГЛАВНАЯ ИЗ АДМИНКИ (новая CMS): ритм блоков в любом порядке
   ============================================================
   В CMS блоки главной переставляют и выключают в админке, у каждого есть data-home-block.
   Отступ поэтому не может зависеть от соседа (прежний padding-top:0 у акции, «теста»,
   товаров и CTA был рассчитан на один порядок): блок отвечает только за отступ над собой,
   нижний добавляет последний. Блоки с заливкой (hero, услуги) держат поля внутри себя.
   В теме WordPress атрибута data-home-block нет — её эти правила не касаются. */
:root{--hb-gap:72px}
#content > [data-home-block]{padding-top:var(--hb-gap); padding-bottom:0}
#content > [data-home-block]:last-child{padding-bottom:var(--hb-gap)}
/* плашки — ближе к соседям, у полосы преимуществ свои поля внутри (.stat) */
#content > [data-home-block="promo"],
#content > [data-home-block="trial"],
#content > [data-home-block="cta"]{padding-top:calc(var(--hb-gap) / 2)}
#content > [data-home-block="stats"]{padding-top:calc(var(--hb-gap) / 2)}
#content > [data-home-block="hero"]{padding:0}
#content > [data-home-block="hero"] + [data-home-block]{padding-top:0}
/* услуги — на своей заливке: поля внутри, от соседа сверху — белый зазор */
#content > [data-home-block="services"],
#content > [data-home-block="hero"] + [data-home-block="services"]{padding-top:var(--hb-gap); padding-bottom:var(--hb-gap)}
#content > [data-home-block="services"]{margin-top:var(--hb-gap)}
#content > [data-home-block="services"]:first-child,
#content > [data-home-block="hero"] + [data-home-block="services"]{margin-top:0}
#content > [data-home-block="services"] + [data-home-block]{padding-top:var(--hb-gap)}
#content > [data-home-block="services"] + [data-home-block="stats"]{padding-top:calc(var(--hb-gap) / 2)}
@media (max-width:560px){ :root{--hb-gap:48px} }

/* Дополнения новой системы к стилям темы (main.css не трогаем, чтобы сверяться с ней). */
.fr-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fr-callback-form input, .fr-callback-form textarea { width: 100%; }
.fr-callback-form [aria-invalid="true"] { border-color: #d92d20 !important; box-shadow: 0 0 0 3px rgba(217, 45, 32, .15); }
.fr-field-err { display: block; color: #b42318; font-size: .85rem; margin-top: 4px; }
.fr-form-msg { color: #b42318; margin: 8px 0; }
.fr-form-done h3 { margin-top: 0; }
.js-lead-form.is-sending button[type=submit] { opacity: .6; pointer-events: none; }
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.search-page { display: flex; gap: 8px; margin-top: 14px; max-width: 560px; }
.search-page input { flex: 1; }
/* корзина и оформление */
.fr-cart, .fr-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.fr-cart__line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border, #e3e7ef); }
.fr-cart__line img, .fr-cart__noimg { width: 80px; height: 80px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--border, #e3e7ef); }
.fr-cart__line.is-gone { opacity: .6; }
.fr-cart__info a { font-weight: 600; } .fr-cart__price { margin-top: 4px; }
.fr-cart__del { background: none; border: 0; font-size: 18px; cursor: pointer; color: #6b7489; min-width: 44px; min-height: 44px; }
.fr-cart__sum { position: sticky; top: 90px; border: 1px solid var(--border, #e3e7ef); border-radius: 14px; padding: 20px; background: #fff; display: grid; gap: 12px; }
.fr-cart__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.15rem; }
.fr-checkout__form fieldset { border: 1px solid var(--border, #e3e7ef); border-radius: 14px; padding: 16px 18px; margin: 0 0 18px; display: grid; gap: 12px; }
.fr-checkout__form legend { font-weight: 700; padding: 0 6px; }
.fr-checkout__form label { display: grid; gap: 6px; font-weight: 500; }
.fr-checkout__form label .hint { font-weight: 400; color: #6b7489; font-size: .88rem; }
.fr-checkout__form input[type=text], .fr-checkout__form input[type=tel], .fr-checkout__form input[type=email], .fr-checkout__form textarea { width: 100%; }
/* поля как в оформлении темы (там они оформлены через .woocommerce, которого здесь нет) */
.fr-checkout__form input[type=text], .fr-checkout__form input[type=tel], .fr-checkout__form input[type=email], .fr-checkout__form textarea {
  min-height: 46px; padding: 11px 14px; border: 1px solid var(--border, #e3e7ef); border-radius: 10px; background: var(--surface, #fff);
  color: var(--text, inherit); font: inherit; font-size: .95rem; font-weight: 400; outline: none; }
.fr-checkout__form input:focus, .fr-checkout__form textarea:focus { border-color: var(--accent, #2563eb); }
.fr-checkout__form textarea { min-height: 96px; resize: vertical; }
.fr-checkout__form [aria-invalid="true"] { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .15); }
.js-payer-legal { display: grid; gap: 12px; }
.fr-radio-row { display: flex; gap: 18px; flex-wrap: wrap; } .fr-radio-row label { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.fr-consent { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: flex-start; font-weight: 400 !important; margin: 14px 0; }
.fr-consent > span { flex: 1; min-width: 0; } .fr-consent .fr-field-err { flex-basis: 100%; }
.fr-checkout__line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border, #e3e7ef); }
.js-checkout-form.is-sending button[type=submit] { opacity: .6; pointer-events: none; }
.fr-order-done { padding: 24px; border: 1px solid var(--border, #e3e7ef); border-radius: 14px; }
.fr-added { margin-top: 10px; color: #0f7b4a; }
.hint { color: #6b7489; font-size: .88rem; }
@media (max-width: 900px) { .fr-cart, .fr-checkout { grid-template-columns: 1fr; } .fr-cart__sum { position: static; } }
/* телефон: фото | описание, под описанием — количество и «удалить» (в колонке фото степпер обрезался) */
@media (max-width: 560px) {
  .fr-cart__line { grid-template-columns: 60px minmax(0, 1fr) 44px; row-gap: 8px; }
  .fr-cart__line img, .fr-cart__noimg { width: 60px; height: 60px; }
  .fr-cart__info { grid-column: 2 / 4; }
  .fr-cart__line > :nth-child(3) { grid-column: 2; justify-self: start; }
  .fr-cart__del { grid-column: 3; }
}

/* ---------- личный кабинет ---------- */
.fr-acc__box { max-width: 520px; border: 1px solid var(--border, #e3e7ef); border-radius: 14px; padding: 20px 22px; background: #fff; display: grid; gap: 12px; margin: 0 0 18px; }
.fr-acc label { display: grid; gap: 6px; font-weight: 500; }
.fr-acc label .hint, .fr-acc .hint { font-weight: 400; color: #6b7489; font-size: .88rem; }
.fr-acc input[type=text], .fr-acc input[type=tel], .fr-acc input[type=email], .fr-acc input[type=password] { width: 100%; }
.fr-acc [aria-invalid=true] { border-color: #b42318; box-shadow: 0 0 0 2px rgba(180, 35, 24, .12); }
.fr-acc .fr-form-msg.is-ok { color: #067647; }
.fr-acc__links { font-size: .92rem; }
.fr-acc__cab { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.fr-acc__nav { display: grid; gap: 4px; position: sticky; top: 90px; }
.fr-acc__nav a, .fr-acc__nav button { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.fr-acc__nav a:hover, .fr-acc__nav button:hover { background: #f2f5fb; }
.fr-acc__nav a[aria-current=page] { background: #e8effd; color: var(--accent, #1f5fe0); font-weight: 600; }
.fr-acc__nav svg { width: 20px; height: 20px; flex: none; }
.fr-acc__panes form, .fr-acc__panes section { display: grid; gap: 12px; max-width: 720px; }
.fr-acc__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.fr-acc__addr { border: 1px solid var(--border, #e3e7ef); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; display: grid; gap: 10px; }
.fr-acc__orders { display: grid; gap: 8px; }
.fr-acc__order { display: grid; grid-template-columns: 110px 100px 1fr 70px 130px; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--border, #e3e7ef); border-radius: 12px; color: inherit; text-decoration: none; }
.fr-acc__order:hover { border-color: var(--accent, #1f5fe0); }
.fr-acc__order > b:last-child { text-align: right; }
.fr-acc__status { justify-self: start; padding: 2px 10px; border-radius: 99px; background: #e8effd; font-size: .9rem; }
.fr-acc__status.is-final { background: #ecf3ec; }
.fr-acc__receipt { font-size: .9rem; margin: -2px 0 6px 16px; }
@media (max-width: 900px) {
  .fr-acc__cab { grid-template-columns: 1fr; }
  .fr-acc__nav { position: static; grid-auto-flow: column; overflow-x: auto; grid-auto-columns: max-content; }
  .fr-acc__order { grid-template-columns: 1fr auto; }
  .fr-acc__order > :nth-child(n+3) { grid-column: auto; }
}

/* блок «купить у производителя» на главной идёт вплотную за «Как мы работаем», как на WordPress */
.home-about{padding-top:0}
/* фотогалерея внутри текста страницы: .prose a / .prose img не должны переписывать плитку
   (синее подчёркивание снизу и отступ 1em у фото внутри рамки 4:3) */
.prose .fr-gallery { margin: 1.2em 0; }
.prose .fr-gallery__item { border-bottom: 1px solid var(--border); }
.prose .fr-gallery__item:hover { border-color: var(--border-2); }
.prose .fr-gallery__img { margin: 0; border-radius: 0; }

/* Мессенджеры и YouTube рядом с контактами (шаблоны social/socrow): в покое нейтральные,
   на наведении — цвет бренда (--soc из main.css). */
.soc-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.soc-row a { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--muted); background: var(--surface); transition: .18s; }
.soc-row a:hover { border-color: var(--soc); color: var(--soc); }
.soc-row svg { width: 19px; height: 19px; }
.cta-band .soc-row { margin-top: 0; }
.cta-band .soc-row a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: var(--accent-ink); }
.cta-band .soc-row a:hover { background: #fff; border-color: #fff; color: var(--soc); }
.topbar__soc { display: inline-flex; gap: 12px; align-items: center; padding-left: 18px; border-left: 1px solid var(--border); }
.topbar__soc a { display: inline-flex; }
.topbar__soc a:hover { color: var(--soc); }
.topbar .topbar__soc svg { width: 16px; height: 16px; color: currentColor; }
.fr-form-done .soc-row, .js-order-missing .soc-row { margin-top: 14px; }
.js-order-missing .soc-row { display: flex; }