/* Apex Bio Glass · надстройка над site.css для WordPress/WooCommerce (то, чего в статичном превью не было). */

/* панель админа сдвигает липкую шапку */
.admin-bar .head{top:32px}
@media (max-width:782px){.admin-bar .head{top:46px}}

/* счётчик корзины в шапке (обновляется фрагментом WooCommerce) */
.ico.cart{position:relative}
.ico.cart .cart-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sky-2);color:var(--ink);font:600 .68rem/18px var(--fb);text-align:center;letter-spacing:0}
.ico.cart .cart-count[data-n="0"]{display:none}

/* ajax «В корзину»: состояние загрузки и «добавлено»; ссылку «Перейти в корзину», которую дописывает WooCommerce, прячем (у нас тост) */
.btn.loading{opacity:.7;pointer-events:none}
.btn.added::after{content:"✓";margin-left:.4em}
a.added_to_cart{display:none!important}

/* карусель в герое: заготовки элементов не показываем, подставляет скрипт */
.hc-items{display:none}
.hc-foot{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* товар без фото: знак на плашке вместо пустого места */
.hpic.nopic{display:grid;place-items:center;background:var(--plate)}
.hpic.nopic img{width:38%;height:auto;object-fit:contain;opacity:.45;transform:none}
.hstock.off{color:var(--warn)}

/* доступность WordPress */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- каталог и карточка (WordPress-надстройка) ---------- */
/* товар без фото: знак на плашке вместо растянутого логотипа */
.k-pic.nopic{display:grid;place-items:center;background:var(--bg-3)}
/* товар без фото: логотип помельче и приглушённее, иначе белый знак на светлой подложке читался
   как «картинка не загрузилась» (найдено обходом 19.09.2026) */
.k-pic.nopic img{width:28%;height:auto;object-fit:contain;opacity:.22;filter:grayscale(1)}
/* подпись «фото готовится» убрана 28.09: в сетке с ценой и «в корзину» она читалась как недоделанный товар (обход телефона) */
.k-pic.nopic::after{content:none}
.p-stage.nopic{display:grid;place-items:center;background:var(--plate);-webkit-mask-image:none;mask-image:none;border-radius:var(--r-3)}
.p-stage.nopic img{width:40%;height:auto;object-fit:contain;opacity:.45}
/* кнопки WooCommerce в карточках: ссылку «Перейти в корзину» прячем, состояние загрузки */
.k-buy a.added_to_cart,.p-cta a.added_to_cart,.p-sticky a.added_to_cart{display:none!important}
/* описание: секции в DOM, показана одна; смена товара — растворением */
.p-sec[hidden]{display:none}
.p-desc,.p-use,.p-facts{transition:opacity .16s var(--e-out)}
.p-desc.fade,.p-use.fade,.p-facts.fade{opacity:0}
.p-panel h3+h3{margin-top:var(--s-4)}
.p-panel table,.p-use-b table{width:100%;margin:var(--s-4) 0 0;border-collapse:collapse;font-size:var(--fs-1);color:var(--muted);font-weight:300}
.p-panel td,.p-panel th,.p-use-b td{padding:10px 12px;border:1px solid var(--line);vertical-align:top}
.p-panel tr:first-child td{color:var(--sky-2);font-weight:500;font-size:var(--fs-0);letter-spacing:.06em;text-transform:uppercase}
.p-panel td:first-child{color:var(--text);font-weight:400}
.p-panel ul,.p-panel ol,.p-use-b ul,.p-use-b ol{display:grid;gap:var(--s-3);margin:var(--s-4) 0 0;padding:0;list-style:none;counter-reset:pl}
.p-panel li,.p-use-b li{position:relative;padding-left:26px;color:var(--muted);font-weight:300}
.p-panel ul li::before,.p-use-b ul li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sky)}
.p-panel ol li::before,.p-use-b ol li::before{content:counter(pl);counter-increment:pl;position:absolute;left:0;top:0;color:var(--sky-2);font:500 .8rem/1.6 var(--fb)}
.p-panel li b,.p-use-b li b{display:block;color:var(--text);font-weight:400}
.p-panel li span,.p-use-b li span{display:block}
.p-panel p+p,.p-use-b p+p{margin-top:var(--s-3)}
.p-panel a,.p-use-b a{color:var(--sky-2)}
.p-use-b b,.p-use-b strong{color:var(--text);font-weight:400}
.p-use-b i,.p-use-b em{color:var(--dim);font-style:normal;font-size:var(--fs-0)}
/* вопросы клиента */
.p-faq{margin:0 0 var(--s-2);border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-2)}
.p-faq summary{padding:12px 16px;cursor:pointer;list-style:none;color:var(--text);font-weight:400}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary::after{content:"+";float:right;color:var(--sky-2);font-size:1.2rem;line-height:1}
.p-faq[open] summary::after{content:"–"}
.p-faq>div{padding:0 16px 14px;color:var(--muted);font-weight:300}
/* липкая панель: кнопка WooCommerce внутри */
.p-sticky>div:last-child{flex:none}

/* ---------- служебные страницы (WordPress-надстройка над pages.css) ---------- */
.pop-card .pic.nopic{display:grid;place-items:center;background:var(--plate)}
.pop-card .pic.nopic img{width:36%;height:auto;object-fit:contain;opacity:.45}
/* обычная страница: политика, оферта, сотрудничество */
.pg-content{max-width:78ch;font-weight:300;color:var(--muted);line-height:1.6}
.pg-content h2,.pg-content h3,.pg-content h4{margin:var(--s-6) 0 var(--s-3);color:var(--text);font:400 var(--fs-3)/1.25 var(--fd);letter-spacing:.04em}
.pg-content h3,.pg-content h4{font-size:var(--fs-2)}
.pg-content p{margin:0 0 var(--s-3)}
.pg-content ul,.pg-content ol{margin:0 0 var(--s-4);padding-left:1.4em}
.pg-content li{margin:0 0 var(--s-2)}
.pg-content a{color:var(--sky-2)}
.pg-content b,.pg-content strong{color:var(--text);font-weight:400}
.pg-content table{width:100%;border-collapse:collapse;margin:0 0 var(--s-4);font-size:var(--fs-1)}
.pg-content td,.pg-content th{padding:8px 10px;border:1px solid var(--line);vertical-align:top}
.pg-content img{max-width:100%;height:auto;border-radius:var(--r-2)}
.pg-content .elementor{max-width:none;color:inherit}
/* пагинация рубрики */
.pg-pages{margin-top:var(--s-6)}
.pg-pages ul{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.pg-pages a,.pg-pages span{display:inline-block;min-width:40px;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);text-decoration:none;font-size:var(--fs-0);text-align:center}
.pg-pages a:hover{color:var(--sky-2);border-color:var(--sky)}
.pg-pages .current{background:var(--sky-2);border-color:var(--sky-2);color:var(--ink)}
/* статья: текст клиента как есть */
.post-body p,.post-body li{font-weight:300;color:var(--muted);line-height:1.62}
.post-body h2,.post-body h3{margin:var(--s-7) 0 var(--s-3);color:var(--text);font:400 var(--fs-3)/1.25 var(--fd);letter-spacing:.04em;scroll-margin-top:calc(76px + var(--s-6))}
.post-body h3{font-size:var(--fs-2)}
.post-body p{margin:0 0 var(--s-4)}
.post-body ul,.post-body ol{margin:0 0 var(--s-4);padding-left:1.4em}
.post-body img{max-width:100%;height:auto;border-radius:var(--r-2)}
.post-body a{color:var(--sky-2)}
.post-body table{width:100%;border-collapse:collapse;margin:0 0 var(--s-4);font-size:var(--fs-1)}
.post-body td,.post-body th{padding:8px 10px;border:1px solid var(--line);vertical-align:top}
.post-body strong,.post-body b{color:var(--text);font-weight:400}
/* форма CF7 на контактах */
.cf7{max-width:640px;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-3);background:var(--bg-2)}
.cf7 p{margin:0 0 var(--s-3);color:var(--muted);font-weight:300}
.cf7 label{display:block;font:500 .68rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.cf7 input[type=text],.cf7 input[type=email],.cf7 input[type=tel],.cf7 textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--bg-3);color:var(--text);font:400 16px/1.3 var(--fb)}
.cf7 textarea{min-height:120px}
/* Contact Form 7 заворачивает каждое поле в inline-span: внутри него width:100% считать не от чего,
   и на узком экране поля схлопывались до 30px (найдено обходом 19.09.2026). Делаем обёртку блоком. */
.cf7 .wpcf7-form-control-wrap{display:block;width:100%}
/* Форма клиента свёрстана колонками .row/.md-4 (классы родительской темы, у нас их нет): без правил колонки
   сжимались по содержимому и поля становились 30px шириной. Раскладываем сами. */
/* у .row родительской темы горизонтальный padding ~86px на узком экране — от 284px оставалось 112,
   поля выглядели обрезками (найдено замером цепочки 19.09.2026). Свою раскладку ставим без него. */
.cf7 .row{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-4);margin:0;padding-inline:0}
.cf7 .row>[class*="md-"]{align-self:stretch;width:100%;min-width:0;padding:0;box-sizing:border-box}
@media (min-width:721px){
  .cf7 .row{flex-direction:row;flex-wrap:wrap}
  .cf7 .row>[class*="md-"]{flex:1 1 220px;width:auto}
  .cf7 .row>.md-12{flex:1 1 100%;width:100%}
}
.cf7 input:focus-visible,.cf7 textarea:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.cf7 input[type=submit],.cf7 button{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--sky-2);color:var(--ink);font:500 .76rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.cf7 .wpcf7-acceptance label{text-transform:none;letter-spacing:0;font:300 var(--fs-1)/1.4 var(--fb);color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.cf7 .wpcf7-not-valid-tip{color:var(--warn);font-size:var(--fs-0);margin-top:4px}
.cf7 .wpcf7-response-output{margin:var(--s-3) 0 0;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-1);color:var(--text);font-size:var(--fs-1)}
.cf7 .wpcf7-spinner{display:none}
/* CF7 держит кнопку выключенной, пока не отмечено согласие — показываем это состояние явно */
.cf7 input[type=submit]:disabled{opacity:.45;cursor:not-allowed}
.cf7 .wpcf7-acceptance{margin:var(--s-3) 0}
.cf7 .wpcf7-acceptance a{color:var(--sky-2);text-decoration:underline;text-underline-offset:3px}
.cf7 .wpcf7-acceptance input[type=checkbox]{width:18px;height:18px;accent-color:oklch(68% .13 225);flex:0 0 auto;margin-top:2px}
.grecaptcha-badge{display:none!important}   /* как на бою: бейдж скрыт, согласие подписано текстом под кнопкой */
/* форма клиента (CF7 №6: контакты, отзывы). Под кнопкой шла вторая строка согласия «…с нашей политикой конфидициальности»
   со ссылкой на оферту: повтор галочки, с опечаткой и не тем адресом. Галочка со ссылкой на политику есть — строку
   прячем. Пустые <br> в подписях полей давали дыры по 25 px между «Имя» и телефоном (повторный просмотр 24.09.2026). */
.wpcf7-form:has(.wpcf7-acceptance) .paragraf.mini{display:none}
.wpcf7-form label>br{display:none}
[id^="wpcf7-f6-"] .wpcf7-form [class*="md-"]>p:not(:has(input,textarea,select,button,a)){display:none}   /* только форма №6: чужой абзац без поля не прячем */
/* CF7 даёт пункту списка отступ слева 1em: галочка согласия стояла правее полей формы */
.cf7 .wpcf7-acceptance .wpcf7-list-item{margin:0}
/* калькулятор */
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5)}
.calc-form,.calc-out{display:grid;gap:var(--s-5);align-content:start;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-3);background:var(--bg-2)}
.calc-syr{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin:0;padding:0;border:0}
.calc-syr legend{grid-column:1/-1;margin-bottom:var(--s-2)}
.calc-radio{position:relative;display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-2);cursor:pointer;color:var(--muted)}
.calc-radio input{position:absolute;opacity:0;width:1px;height:1px}
.calc-radio span{font:400 var(--fs-2)/1 var(--fd);color:var(--text)}
.calc-radio small{font-size:.72rem;color:var(--dim)}
.calc-radio:has(input:checked){border-color:var(--sky);background:oklch(68% .13 225 / .12)}
.calc-radio:has(input:focus-visible){outline:2px solid var(--sky);outline-offset:2px}
.calc-field{display:grid;gap:6px}
.calc-field input{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--bg-3);color:var(--text);font:400 16px/1.3 var(--fb);font-variant-numeric:tabular-nums}
.calc-field input:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.calc-field small{font-size:var(--fs-0);color:var(--dim);font-weight:300}
/* подпись у слова «Результат»: объясняет, что в полях стоит рабочий пример, а не пустая форма */
.calc-hint{display:block;margin-top:4px;font:300 var(--fs-0)/1.4 var(--fb);letter-spacing:0;
  text-transform:none;color:var(--dim);font-style:normal}
.calc-res{display:grid;gap:4px;margin:0}
.calc-res b{font:400 clamp(2.4rem,5vw,3.6rem)/1 var(--fd);color:var(--sky-2);font-variant-numeric:tabular-nums}
.calc-res span{font:500 .68rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.calc-note{margin:0;color:var(--muted);font-weight:300;min-height:2.6em}

/* рисунок шприца вместо полоски прогресса: видно, сколько набрать (метка «понятнее», 20.09.2026) */
.calc-syringe{display:grid;grid-template-columns:minmax(0,1fr) 26px;align-items:center;gap:0;margin:0}
.cs-body{position:relative;height:38px;border:1px solid var(--line-2);border-radius:var(--r-1) 4px 4px var(--r-1);
  background:linear-gradient(180deg,oklch(96% .01 230 / .06),transparent);overflow:hidden}
.cs-fill{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(180deg,oklch(85% .07 220 / .9),oklch(68% .13 225 / .75));
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .35);transition:width .45s var(--e-out),background .3s}
.cs-fill.over{background:linear-gradient(180deg,oklch(85% .12 80 / .9),oklch(70% .15 60 / .8))}
.cs-ticks{position:absolute;inset:0;pointer-events:none}
.cs-ticks i{position:absolute;top:0;bottom:55%;width:1px;background:oklch(96% .01 230 / .35)}
.cs-ticks i:nth-child(even){bottom:35%;background:oklch(96% .01 230 / .5)}
.cs-needle{position:relative;height:3px;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,oklch(72% .02 240),oklch(88% .01 235))}
.cs-needle::before{content:"";position:absolute;left:-4px;top:-7px;width:8px;height:17px;border-radius:2px;
  background:oklch(60% .02 240)}
.calc-syringe figcaption{grid-column:1/2;display:flex;justify-content:space-between;margin-top:6px;
  font:500 .68rem/1 var(--fb);letter-spacing:.14em;color:var(--dim)}
.calc-syringe figcaption i{font-style:normal;font-variant-numeric:tabular-nums}

/* быстрые значения под полем */
.calc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.calc-chips button{padding:5px 11px;border:1px solid var(--line-2);border-radius:var(--pill);
  color:var(--muted);font:500 .74rem/1.4 var(--fb);font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.calc-chips button:hover{border-color:var(--sky);color:var(--text)}
.calc-chips button.on{border-color:var(--sky);background:oklch(68% .13 225 / .14);color:var(--text)}

/* производные величины и раскрываемая формула */
.calc-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:0;
  padding:var(--s-4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-more dt{margin-bottom:4px;font:500 .66rem/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.calc-more dd{margin:0;font:400 var(--fs-2)/1.2 var(--fb);color:var(--text);font-variant-numeric:tabular-nums}
.calc-how summary{cursor:pointer;list-style:none;font:500 var(--fs-0)/1 var(--fb);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sky-2)}
.calc-how summary::-webkit-details-marker{display:none}
.calc-how summary::after{content:" +";color:var(--dim)}
.calc-how[open] summary::after{content:" –"}
.calc-how p{margin:var(--s-3) 0 0;font-size:var(--fs-1);font-weight:300;color:var(--muted)}
.calc-how b{color:var(--text);font-weight:500}
.calc-steps{display:grid;gap:var(--s-3);margin:0;padding:var(--s-4) 0 0;border-top:1px solid var(--line);list-style:none;counter-reset:cs}
.calc-steps li{position:relative;padding-left:34px}
.calc-steps li::before{content:counter(cs);counter-increment:cs;position:absolute;left:0;top:0;width:24px;height:24px;border:1px solid var(--line-2);border-radius:50%;color:var(--sky-2);font:500 .7rem/22px var(--fb);text-align:center}
.calc-steps b{display:block;color:var(--text);font-weight:400}
.calc-steps span{display:block;font-size:var(--fs-1);color:var(--dim);font-weight:300}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr}}
@media(max-width:560px){.calc-more{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .calc-more > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
  .calc-more dt{margin:0}}