/* Фомиксид — оформление каталога. Товары строками, единая типографика фильтров. */
:root{
  --fmx-line:#e5e7eb; --fmx-line-2:#cfd4dc; --fmx-ink:#101828; --fmx-mute:#667085;
  --fmx-accent:#1f8a4c; --fmx-accent-dk:#166b3b; --fmx-bg:#fff;
}

/* ---------- колонки страницы: сайдбар фиксированной ширины ---------- */
.wp-block-columns.fmx-cols{align-items:flex-start!important;gap:28px}
.wp-block-column.fmx-side{
  flex:0 0 272px!important;max-width:272px!important;
  border:1px solid var(--fmx-line);border-radius:14px;padding:16px 16px 8px;background:var(--fmx-bg)}
.wp-block-columns.fmx-cols>.wp-block-column:last-child{
  flex:1 1 auto!important;max-width:none!important;min-width:0}

/* ---------- фильтры: одна типографика вместо трёх ---------- */
.fmx-side h1,.fmx-side h2,.fmx-side h3,.fmx-side h4,
.fmx-side .wp-block-heading,.fmx-side .wc-block-filter-title{
  font-size:12px!important;line-height:1.4!important;font-weight:700!important;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fmx-mute)!important;
  margin:18px 0 8px!important}
.fmx-side select,.fmx-side .wc-block-attribute-filter select{
  width:100%;border:1px solid var(--fmx-line-2);border-radius:10px;padding:9px 12px;
  font-size:14px;color:var(--fmx-ink);background-color:#fff}
.fmx-side ul{margin-left:0;padding-left:0}

/* меню категорий: было чёрным блоком */
.fmx-side .menu,.fmx-side nav ul{background:transparent!important}
.fmx-side .menu li a,.fmx-side nav li a{
  color:var(--fmx-ink)!important;font-size:14px;padding:7px 2px;display:block;
  border-bottom:1px solid #f2f4f7;text-decoration:none}
.fmx-side .menu li a:hover,.fmx-side nav li a:hover{color:var(--fmx-accent)!important}

/* ---------- список товаров строками ---------- */
ul.wc-block-product-template{display:block!important;gap:0!important;margin:0!important;padding:0!important}
ul.wc-block-product-template>li.wc-block-product{
  /* без border-box отступы прибавляются к сотне процентов, и строка вылезает
     за правый край: на узком экране появлялась горизонтальная прокрутка */
  box-sizing:border-box;max-width:100%;
  width:100%!important;margin:0 0 12px!important;padding:14px 18px!important;
  display:grid!important;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;
  border:1px solid var(--fmx-line);border-radius:14px;background:var(--fmx-bg);
  transition:border-color .18s ease,box-shadow .18s ease}
ul.wc-block-product-template>li.wc-block-product:hover{
  border-color:var(--fmx-line-2);box-shadow:0 6px 20px rgba(16,24,40,.08)}
li.wc-block-product>.wp-block-group:first-child{margin:0!important;padding:0!important}
li.wc-block-product .wc-block-components-product-image img{
  height:104px!important;width:100%!important;object-fit:contain;border-radius:8px}

li.wc-block-product>.wp-block-group.is-vertical{
  min-width:0;max-width:100%;
  display:grid!important;grid-template-columns:minmax(0,1fr) 200px;
  grid-template-areas:"t p" "m b";column-gap:24px;row-gap:8px;
  min-height:0!important;align-items:center;margin:0!important}
li.wc-block-product .wp-block-post-title{
  grid-area:t;text-align:left!important;margin:0!important;min-width:0;overflow-wrap:anywhere;
  font-size:16px!important;font-weight:600!important;line-height:1.35!important}
li.wc-block-product .wp-block-post-title a{color:var(--fmx-ink)!important;text-decoration:none}
li.wc-block-product .wp-block-post-title a:hover{color:var(--fmx-accent)!important}
li.wc-block-product .fmx-meta{
  grid-area:m;font-size:13px;line-height:1.4;color:var(--fmx-mute);align-self:start}
li.wc-block-product .fmx-dot{opacity:.5;padding:0 2px}
li.wc-block-product .wp-block-woocommerce-product-price,
li.wc-block-product .wc-block-components-product-price{
  grid-area:p;text-align:right!important;background:none!important;
  font-size:20px!important;font-weight:700!important;color:var(--fmx-ink)!important;
  margin:0!important;padding:0!important;line-height:1.2!important}
li.wc-block-product .fmx-ask{font-size:15px!important;font-weight:600!important;color:var(--fmx-mute)!important}
li.wc-block-product .wp-block-woocommerce-product-button{
  grid-area:b;margin:0!important;justify-self:end;width:auto!important}
li.wc-block-product .wp-block-woocommerce-product-button a,
li.wc-block-product .wp-block-woocommerce-product-button button{
  width:auto!important;min-width:180px;padding:11px 22px!important;border-radius:10px!important;
  background:var(--fmx-accent)!important;border:1px solid var(--fmx-accent)!important;
  color:#fff!important;font-size:14px!important;font-weight:600!important;white-space:nowrap}
li.wc-block-product .wp-block-woocommerce-product-button a:hover,
li.wc-block-product .wp-block-woocommerce-product-button button:hover{
  background:var(--fmx-accent-dk)!important;border-color:var(--fmx-accent-dk)!important}

/* заголовок и счётчик */
.fmx-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.fmx-count{font-size:14px;color:var(--fmx-mute)}
.fmx-filters-btn{display:none}
/* выдвижная панель фильтров — только для телефона; на большом экране её быть не должно
   вовсе, иначе внизу страницы висят голые «Фильтры ×» и «Показать товары» */
.fmx-side-host{display:none}

/* нумерация страниц: «138» больше не переносится */
.wc-block-pagination-numbers .page-numbers,
.woocommerce-pagination .page-numbers li a,.woocommerce-pagination .page-numbers li span{
  min-width:40px;height:40px;padding:0 12px!important;width:auto!important;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  border-radius:10px;border:1px solid var(--fmx-line);text-decoration:none}
.wc-block-pagination-numbers .page-numbers.current{
  background:var(--fmx-accent);border-color:var(--fmx-accent);color:#fff}

/* ---------- телефон и планшет ---------- */
@media (max-width:900px){
  .wp-block-columns.fmx-cols{flex-direction:column!important;gap:0}
  .fmx-side-host{
    position:fixed;inset:0;z-index:99999;background:rgba(16,24,40,.45);
    display:none;overflow:hidden}
  .fmx-side-host.is-open{display:block}
  .fmx-side-panel{
    position:absolute;inset:0 0 0 auto;width:min(420px,92vw);background:#fff;
    display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(16,24,40,.2)}
  .fmx-side-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;border-bottom:1px solid var(--fmx-line);font-weight:700}
  .fmx-side-body{overflow-y:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch}
  /* в выдвижной панели своя рамка не нужна */
  .fmx-side-body .wp-block-column.fmx-side{
    border:0!important;padding:0!important;max-width:none!important;flex:1 1 auto!important}
  .wp-block-columns.fmx-cols>.wp-block-column{
    border:0!important;padding-left:0!important;padding-right:0!important;max-width:none!important}
  .fmx-side-foot{padding:12px 16px;border-top:1px solid var(--fmx-line)}
  .fmx-side-foot button{
    width:100%;padding:13px;border:0;border-radius:10px;background:var(--fmx-accent);
    color:#fff;font-size:16px;font-weight:600}
  .fmx-x{border:0;background:none;font-size:26px;line-height:1;color:var(--fmx-mute);padding:0 4px}
  .fmx-filters-btn{
    display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;
    border:1px solid var(--fmx-line-2);background:#fff;font-size:15px;font-weight:600;
    color:var(--fmx-ink)}
  .fmx-filters-btn .fmx-badge{
    background:var(--fmx-accent);color:#fff;border-radius:20px;padding:1px 8px;font-size:12px}
  .fmx-toolbar{position:sticky;top:0;z-index:20;background:#fff;padding:10px 0;
    border-bottom:1px solid var(--fmx-line)}
  ul.wc-block-product-template>li.wc-block-product{
    grid-template-columns:88px minmax(0,1fr);gap:14px;padding:12px!important}
  li.wc-block-product .wc-block-components-product-image img{height:78px!important}
  li.wc-block-product>.wp-block-group.is-vertical{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "m" "p" "b";row-gap:6px}
  li.wc-block-product .wp-block-post-title{font-size:15px!important}
  li.wc-block-product .wp-block-woocommerce-product-price,
  li.wc-block-product .wc-block-components-product-price{
    text-align:left!important;font-size:18px!important}
  li.wc-block-product .wp-block-woocommerce-product-button{justify-self:stretch}
  li.wc-block-product .wp-block-woocommerce-product-button a,
  li.wc-block-product .wp-block-woocommerce-product-button button{
    width:100%!important;min-width:0}
}

/* ---------- правки после первого просмотра ---------- */
/* меню категорий в сайдбаре: было чёрным блоком с нечитаемым текстом */
.fmx-side #mega-menu-wrap-max_mega_menu_1,
.fmx-side .mega-menu-wrap,
.fmx-side #mega-menu-max_mega_menu_1,
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item{background:transparent!important}
.fmx-side #mega-menu-max_mega_menu_1{padding:0!important;display:block!important}
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item{
  display:block!important;width:100%!important;float:none!important;margin:0!important}
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link{
  background:transparent!important;color:#101828!important;height:auto!important;
  line-height:1.4!important;padding:9px 4px!important;font-size:14px!important;
  font-weight:500!important;border-bottom:1px solid #f2f4f7!important;
  display:block!important;white-space:normal!important;text-transform:none!important}
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link:hover{
  color:var(--fmx-accent)!important;background:#f7faf8!important}
.fmx-side .mega-menu-toggle{display:none!important}
.fmx-side>h3:empty{display:none}

/* кнопка товара: зелёная заливка поверх стилей темы */
li.wc-block-product .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button .wp-block-button__link{
  background-color:var(--fmx-accent)!important;background-image:none!important;
  color:#fff!important;border-color:var(--fmx-accent)!important;
  padding:11px 22px!important;margin:0!important;border-radius:10px!important;
  min-width:170px;font-size:14px!important;font-weight:600!important}
li.wc-block-product .wp-block-button__link:hover{
  background-color:var(--fmx-accent-dk)!important;border-color:var(--fmx-accent-dk)!important}

/* строка товара плотнее, текст прижат кверху */
ul.wc-block-product-template>li.wc-block-product{align-items:start;padding:16px 18px!important}
li.wc-block-product>.wp-block-group.is-vertical{
  grid-template-rows:auto auto;align-items:start;row-gap:10px}
li.wc-block-product .wc-block-components-product-image img{height:92px!important}
li.wc-block-product .wp-block-woocommerce-product-price,
li.wc-block-product .wc-block-components-product-price{align-self:start}
li.wc-block-product .wp-block-woocommerce-product-button{align-self:end}

/* заливка кнопки: цвет сидит на обёртке .wp-block-button, а не на ссылке */
li.wc-block-product .wp-block-woocommerce-product-button,
li.wc-block-product .wc-block-components-product-button,
li.wc-block-product .wp-block-button{
  background-color:transparent!important;background:none!important;
  padding:0!important;border:0!important;border-radius:10px!important}
li.wc-block-product .wp-block-woocommerce-product-button>a,
li.wc-block-product .wp-block-woocommerce-product-button>button,
li.wc-block-product a.wp-block-button__link,
li.wc-block-product button.wp-block-button__link{
  background-color:#1f8a4c!important;background:#1f8a4c!important;color:#fff!important;
  border:1px solid #1f8a4c!important;box-shadow:none!important}
li.wc-block-product a.wp-block-button__link:hover,
li.wc-block-product button.wp-block-button__link:hover{
  background-color:#166b3b!important;background:#166b3b!important;border-color:#166b3b!important}
li.wc-block-product .wp-block-woocommerce-product-button.is-style-outline>a,
li.wc-block-product .wp-block-woocommerce-product-button.is-style-outline>button{
  background-color:#1f8a4c!important;color:#fff!important}

/* строка ниже: меньше воздуха */
ul.wc-block-product-template>li.wc-block-product{padding:14px 18px!important;gap:18px}
li.wc-block-product .wc-block-components-product-image img{height:84px!important}
li.wc-block-product>.wp-block-group.is-vertical{row-gap:6px}
li.wc-block-product .wp-block-woocommerce-product-button{align-self:start}
li.wc-block-product .fmx-meta{align-self:center}

/* активный пункт меню категорий: был красным, приводим к акценту сайта */
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-category-ancestor > a.mega-menu-link,
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-category > a.mega-menu-link,
.fmx-side #mega-menu-max_mega_menu_1 > li.mega-menu-item[class*="current"] > a.mega-menu-link{
  background:#eaf5ee!important;color:#166b3b!important;font-weight:600!important;
  border-left:3px solid #1f8a4c!important;padding-left:9px!important}

/* «от» перед ценой — помельче и приглушённо, чтобы не спорило с суммой */
.fmx-from{font-size:.72em;font-weight:500;color:var(--fmx-mute);margin-right:4px;display:inline}
/* «от» должно стоять перед суммой в строку, а не падать под неё отдельным блоком */
.wc-block-components-product-price,.woocommerce-Price-amount{display:inline}
.summary .price,.wp-block-woocommerce-product-price .price{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}

/* ---------- посадочный текст раздела ---------- */
.wp-block-term-description{max-width:900px;margin:8px 0 34px;color:#243043;font-size:16px;line-height:1.65}
.wp-block-term-description>p{margin:0 0 14px}
.wp-block-term-description h2{
  font-size:22px!important;line-height:1.3;font-weight:700;color:var(--fmx-ink);
  margin:30px 0 12px!important;padding-top:18px;border-top:1px solid var(--fmx-line)}
.wp-block-term-description h2:first-child{border-top:0;padding-top:0;margin-top:0!important}
.wp-block-term-description h3{font-size:17px!important;font-weight:700;margin:22px 0 8px!important}
.wp-block-term-description ul,.wp-block-term-description ol{margin:0 0 16px;padding-left:22px}
.wp-block-term-description li{margin:0 0 7px}
.wp-block-term-description a{color:var(--fmx-accent);text-decoration:none;border-bottom:1px solid rgba(31,138,76,.35)}
.wp-block-term-description a:hover{color:var(--fmx-accent-dk);border-bottom-color:var(--fmx-accent-dk)}
.wp-block-term-description table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:15px}
.wp-block-term-description th,.wp-block-term-description td{
  border:1px solid var(--fmx-line);padding:9px 12px;text-align:left;vertical-align:top}
.wp-block-term-description th{background:#f7f8fa;font-weight:600}
.wp-block-term-description .fmx-note{
  background:#f4faf6;border-left:3px solid var(--fmx-accent);padding:12px 16px;margin:0 0 18px;border-radius:0 8px 8px 0}
@media (max-width:900px){
  .wp-block-term-description{font-size:15px}
  .wp-block-term-description h2{font-size:19px!important}
  .wp-block-term-description table{display:block;overflow-x:auto}
}

/* активный пункт меню категорий: у меги-меню селектор с двумя id, перебиваем тем же весом */
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item[class*="current"] > a.mega-menu-link{
  background:#eaf5ee!important;color:#166b3b!important;font-weight:600!important;
  border-left:3px solid #1f8a4c!important;padding-left:9px!important}


/* ---------- шапка на телефоне ----------
   Замер: до первого содержимого уходило 296 пикселей — логотип 83, слоган 49, иконки 36,
   поиск 53. Человек открывал карточку и видел шапку, а не товар. Ужимаем только размеры,
   ничего не убирая: телефон, мессенджеры и поиск остаются на месте.
   Правило: трогать конкретные элементы, а не все .wp-block-group подряд — первая попытка
   через общий отступ сделала шапку выше (382 вместо 296). */
@media (max-width:900px){
  header.wp-block-template-part img.custom-logo{max-height:46px!important;height:auto!important;width:auto!important}
  header.wp-block-template-part h2{font-size:13px!important;line-height:1.3!important}
  header.wp-block-template-part .wp-block-social-links{gap:8px!important}
  header.wp-block-template-part .wp-block-social-link .wp-block-social-link-anchor{padding:4px!important}
  header.wp-block-template-part .wp-block-search__input{
    padding-top:9px!important;padding-bottom:9px!important}
  header.wp-block-template-part .wp-block-search__button{
    padding-top:9px!important;padding-bottom:9px!important}
}

/* Кнопка «Узнать цену» на карточке товара без цены (25.09.2026).
   Раньше человек видел «Цена по запросу» и уходил: связаться было неоткуда. */
.fmx-ask-btn{display:inline-flex;align-items:center;gap:.45rem;margin:.7rem 0 .2rem;
  padding:.62rem 1.05rem;border-radius:10px;background:#25d366;color:#fff!important;
  font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition:transform .15s ease,box-shadow .15s ease}
.fmx-ask-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.16);color:#fff!important}
.fmx-ask-note{display:block;font-size:13px;color:#5b6b64;margin-bottom:.4rem}
li.wc-block-product .fmx-ask-btn,li.wc-block-product .fmx-ask-note{display:none!important}

/* Блок «Инструкция и документы» на карточке химии (26.09.2026).
   Запросы вида «<название> инструкция по применению» дают показы без кликов —
   в сниппете и на странице не было ответа на этот вопрос. */
.fmx-instr{margin:1.8rem 0 0;padding:16px 18px;border:1px solid #dbe6f0;
  border-radius:12px;background:#f5f9fd}
.fmx-instr h3{margin:0 0 .5rem!important;font-size:1.05rem!important;color:#16202b}
.fmx-instr p{margin:0 0 .9rem;line-height:1.6;color:#3b4a55}
.fmx-instr-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.05rem;
  border-radius:10px;background:#25d366;color:#fff!important;font-weight:700;
  text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.fmx-instr-btn:hover{transform:translateY(-1px);color:#fff!important}
.fmx-instr-note{display:block;margin-top:.45rem;font-size:13px;color:#5b6b64}
li.wc-block-product .fmx-instr{display:none!important}

/* Вопросы-ответы на карточке товара.
   В head.css .fmx-faq — двухколоночная сетка для главной страницы, и она
   разносила вопрос и ответ по разным колонкам (нашёл 26.09.2026).
   На карточке товара это простой текстовый блок. */
.single-product .fmx-faq{display:block!important;grid-template-columns:none!important;
  margin:1.6rem 0 0;padding:16px 18px;border:1px solid #e0e7e3;border-radius:12px;background:#fbfdfc}
.single-product .fmx-faq h3{margin:0 0 .4rem!important;font-size:1.05rem!important;color:#16202b}
.single-product .fmx-faq-q{margin:.9rem 0 .2rem!important;color:#16202b}
.single-product .fmx-faq-a{margin:0!important;color:#3b4a44;line-height:1.6}

/* Оговорка про цвет на карточках инвентаря (26.09.2026). */
.fmx-color-note{margin:1rem 0 0;padding:10px 14px;border-left:3px solid #25a15b;
  background:#f4faf6;border-radius:0 8px 8px 0;font-size:15px;color:#3b4a44;line-height:1.55}
.fmx-color-note a{color:#16202b;font-weight:600}