/* ============================================================
МедФармИмпорт — тема WordPress
Геометрия перенесена 1:1 из макета (холст Figma 1920×6686).
1rem = 1rem при ширине окна 120rem; на 1200–1920 макет
масштабируется пропорционально (как в исходном прототипе),
ниже 1200 включается обычная адаптивная раскладка.
============================================================ */
/* ---------- 1. Масштаб и сброс ---------- */
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
@media (min-width: 1200px) {
html { font-size: calc(100vw / 120); }
}
@media (min-width: 1920px) {
html { font-size: 16px; }
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: #fff;
color: #0D0D0D;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 0.1875rem solid #43A702; outline-offset: 0.125rem; border-radius: 0.25rem; }
/* ---------- 2. Токены ---------- */
:root {
--navy: #1C2E44;
--navy-deep: #0B1C3C;
--navy-txt: #1C2A4F;
--green: #43A702;
--green-d: #3D9823;
--green-a: #3C9D31;
--red: #C42029;
--red-b: #E31E25;
--red-cart: #EF3E2E;
--ink: #0D0D0D;
--ink-2: #2D2723;
--gray-6: #64748B;
--gray-5: #94A3B8;
--line: #E2E8F0;
--line-2: #E5E7EB;
--foot: #1D1F1E;
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ---------- 3. Контейнеры ---------- */
/* три полосы контента из макета: 1762 / 1562 / 1538 */
.mfi-container { width: 110.125rem; max-width: calc(100% - 3rem); margin-inline: auto; }
.mfi-band { width: 97.625rem; max-width: calc(100% - 3rem); margin-inline: auto; }
.mfi-inner { width: 96.125rem; max-width: calc(100% - 3rem); margin-inline: auto; }
/* ---------- 4. Появление при скролле ---------- */
.mfi-rv {
opacity: 1;
transform: none;
transition: none;
}
.mfi-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.mfi-rv { opacity: 1; transform: none; transition: none; }
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* скрыто визуально, доступно скринридеру */
.mfi-sr {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mfi-skip {
position: absolute; left: 0.75rem; top: -3.75rem; z-index: 2000;
background: #fff; color: var(--navy); padding: 0.75rem 1.25rem; border-radius: 0.5rem;
font-weight: 600; transition: top .2s;
}
.mfi-skip:focus { top: 0.75rem; }
/* ============================================================
5. ШАПКА
============================================================ */
.mfi-topbar { background: var(--navy); position: sticky; top: 0; z-index: 300; box-shadow: 0 2px 12px rgba(15,23,42,.18); }
.mfi-topbar__inner { display: flex; align-items: center; height: 10.375rem; gap: 0; }
.mfi-logo { flex: none; display: block; }
.mfi-logo img { width: 8.25rem; height: 8.25rem; object-fit: contain; }
.mfi-nav { margin-left: 4.0625rem; }
.mfi-nav ul { display: flex; align-items: center; gap: 1.25rem; }
.mfi-nav li { position: relative; }
.mfi-nav > ul > li > a {
display: flex; align-items: center; gap: 0.1875rem;
font-weight: 500; font-size: 1.625rem; line-height: 2rem; color: #F7FFFF;
white-space: nowrap; transition: color .15s;
}
.mfi-nav > ul > li > a:hover { color: #9FE07A; }
.mfi-nav > ul > li.menu-item-has-children > a::after {
content: ""; width: 0.75rem; height: 1.5rem; flex: none;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform .2s;
}
.mfi-nav > ul > li.menu-item-has-children:hover > a::after { transform: rotate(90deg); }
/* выпадающее меню */
.mfi-nav .sub-menu {
position: absolute; left: -0.75rem; top: calc(100% + 0.5rem); min-width: 17.5rem; z-index: 60;
background: #fff; border: 1px solid #E4E9F0; border-radius: 0.75rem;
box-shadow: 0 1rem 2.5rem rgba(15,23,42,.18); padding: 0.5rem;
opacity: 0; visibility: hidden; transform: translateY(-0.375rem); transition: .18s;
}
.mfi-nav li:hover > .sub-menu,
.mfi-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mfi-nav .sub-menu a {
display: block; padding: 0.75rem 1rem; border-radius: 0.5rem; white-space: nowrap;
font-weight: 500; font-size: 1.0625rem; line-height: 1.4rem; color: #1F2937; transition: .12s;
}
.mfi-nav .sub-menu a:hover { background: #EAF2FB; color: #1C56A6; }
/* контакты в шапке */
.mfi-hcontacts { margin-left: auto; display: flex; flex-direction: column; gap: 1.1875rem; }
.mfi-hcontacts a { display: flex; align-items: center; gap: 0.625rem; }
.mfi-hcontacts span {
font-weight: 500; font-size: 1.5625rem; line-height: 1.875rem; color: #F7FFFF;
white-space: nowrap; transition: color .15s;
}
.mfi-hcontacts a:hover span { color: #9FE07A; }
.mfi-hcontacts svg { width: 1.9375rem; height: 1.9375rem; }
.mfi-cta {
margin-left: 3.6875rem; flex: none;
display: flex; align-items: center; justify-content: center; gap: 0.625rem;
width: 19.5rem; height: 3.0625rem; background: var(--red); border-radius: 0.9375rem;
border: 0; cursor: pointer;
font-weight: 500; font-size: 1.5rem; line-height: 1.8125rem; color: #fff; white-space: nowrap;
transition: filter .2s, transform .15s;
}
.mfi-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mfi-cta svg { width: 1.375rem; height: 1.375rem; }
/* бургер (появляется ниже 1200) */
.mfi-burger { display: none; }
/* ============================================================
6. ПОДШАПКА — клиент, задолженность, инструменты
============================================================ */
.mfi-subbar__inner { display: flex; align-items: flex-start; padding: 1.875rem 0 1.4375rem; }
.mfi-client {
width: 14.25rem; flex: none;
font-weight: 500; font-size: 1.625rem; line-height: 2rem; color: var(--ink);
}
.mfi-client a:hover { color: var(--green-d); }
.mfi-dz { margin-left: 2.625rem; }
.mfi-dz__title {
font-weight: 400; font-size: 1.3125rem; line-height: 1.75rem; color: #757575; white-space: nowrap;
}
.mfi-dz__row { display: flex; gap: 2.75rem; margin-top: 0.5625rem; }
.mfi-dz__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.mfi-dz__ico {
width: 2.3125rem; height: 2.3125rem; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
}
.mfi-dz__ico svg { width: 1rem; height: 1rem; }
.mfi-dz__ico--ok { background: #F0FDF4; }
.mfi-dz__ico--bad { background: #FEF2F2; }
.mfi-dz__lbl {
font-weight: 400; font-size: 1rem; line-height: 1.25rem; color: #293153; white-space: nowrap;
}
.mfi-dz__val {
margin-top: 0.4375rem;
font-weight: 600; font-size: 1rem; line-height: 1.25rem; color: var(--red-b); white-space: nowrap;
}
.mfi-dz__item--ok .mfi-dz__val { color: var(--green-d); }
/* панель инструментов */
.mfi-tools { margin-left: auto; padding-top: 1.0625rem; display: flex; gap: 1.0625rem; }
.mfi-tools a {
display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
text-align: center; transition: color .15s;
font-weight: 500; font-size: 0.875rem; line-height: 1.0625rem; color: #293153;
}
.mfi-tools a:hover { color: var(--green-d); }
.mfi-tools .mfi-tools__ico {
height: 2.125rem; display: flex; align-items: center; justify-content: center;
}
.mfi-tools .mfi-tools__ico img { width: 2.125rem; height: 2.125rem; object-fit: contain; }
.mfi-tools .mfi-tools__lbl { display: block; }
.mfi-tools__c { position: relative; }
.mfi-tools__b {
position: absolute; top: -0.375rem; right: -0.625rem; min-width: 1.125rem; height: 1.125rem;
border-radius: 0.5625rem; background: var(--red); color: #fff;
font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; padding: 0 0.3125rem;
}
/* ширины подписей повторяют макет, чтобы шаг колонок совпал */
.mfi-tools a[data-w="46"] .mfi-tools__lbl { width: 2.875rem; }
.mfi-tools a[data-w="56"] .mfi-tools__lbl { width: 3.5rem; }
.mfi-tools a[data-w="104"] .mfi-tools__lbl { width: 6.5rem; }
.mfi-tools a[data-w="52"] .mfi-tools__lbl { width: 3.25rem; }
.mfi-tools a[data-w="53"] .mfi-tools__lbl { width: 3.3125rem; }
.mfi-tools a[data-w="47"] .mfi-tools__lbl { width: 2.9375rem; }
/* гостевой вариант подшапки */
.mfi-guest { margin-left: 2.625rem; display: flex; align-items: center; gap: 1.125rem; padding-top: 0.25rem; }
.mfi-guest__btn {
display: inline-flex; align-items: center; gap: 0.625rem; height: 2.75rem; padding: 0 1.375rem;
border-radius: 0.625rem; background: var(--navy); color: #fff;
font-weight: 500; font-size: 1.0625rem; transition: filter .2s;
}
.mfi-guest__btn:hover { filter: brightness(1.15); }
.mfi-guest__txt { font-size: 1.0625rem; line-height: 1.5rem; color: var(--gray-6); }
/* ============================================================
7. БЫСТРЫЕ КАРТОЧКИ
============================================================ */
.mfi-quick { display: flex; justify-content: space-between; align-items: stretch; }
.mfi-qcard {
background: #fff; border: 1px solid var(--line); border-radius: 0.9375rem;
box-shadow: 0 1px 0.1875rem rgba(0,0,0,.1), 0 1px 0.125rem -1px rgba(0,0,0,.1);
min-height: 11.4375rem; flex: none;
}
.mfi-qcard--links { width: 26.3125rem; padding: 1.125rem 1.375rem; display: flex; flex-direction: column; justify-content: center; }
.mfi-qcard--cat { width: 25.3125rem; padding: 2.375rem 1.9375rem 0; }
.mfi-qcard--find { width: 33.125rem; padding: 2.375rem 1rem 0; }
.mfi-qcard--cart { width: 20.5rem; padding: 1.5rem 1.75rem; }
.mfi-qrow {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.375rem; border-radius: 0.375rem; transition: background .15s;
}
.mfi-qrow:hover { background: #F4F8FF; }
.mfi-qrow__ico {
width: 2.25rem; height: 2.25rem; flex: none; border-radius: 0.25rem; background: #EFF6FF;
display: flex; align-items: center; justify-content: center;
}
.mfi-qrow__ico svg { width: 1.25rem; height: 1.25rem; }
.mfi-qrow__t { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5rem; color: var(--navy-deep); }
.mfi-qrow__ch { margin-left: auto; width: 0.875rem; height: 0.875rem; }
.mfi-qsep { height: 1px; background: var(--line); margin: 0.75rem 0; }
.mfi-catbtn {
display: flex; align-items: center; gap: 0.75rem;
height: 4.625rem; padding: 0 1.5rem; border-radius: 0.625rem; background: var(--green-d);
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.125rem; line-height: 1.4375rem; color: #fff;
transition: filter .2s, transform .15s;
}
.mfi-catbtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mfi-catbtn svg { width: 1.375rem; height: 1.375rem; }
.mfi-qnote {
margin-top: 1.0625rem;
font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.4375rem; color: var(--gray-6);
}
.mfi-qsearch { position: relative; }
.mfi-qsearch input {
width: 100%; height: 4.625rem; padding: 0 1.375rem 0 3.75rem;
background: #fff; border: 1px solid var(--line); border-radius: 0.625rem;
box-shadow: 0 1px 0.1875rem rgba(0,0,0,.1);
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.1875rem; line-height: 1.4375rem; color: var(--navy-txt);
outline: none; transition: border-color .15s, box-shadow .15s;
}
.mfi-qsearch input::placeholder { color: var(--gray-6); }
.mfi-qsearch input:focus { border-color: var(--green-a); box-shadow: 0 0 0 0.1875rem rgba(60,157,49,.12); }
.mfi-qsearch__ico { position: absolute; left: 1.875rem; top: 1.625rem; width: 1.375rem; height: 1.375rem; pointer-events: none; }
.mfi-qsearch button { position: absolute; inset: 0 0 0 auto; width: 3.75rem; background: none; border: 0; cursor: pointer; border-radius: 0 0.625rem 0.625rem 0; }
/* живые подсказки поиска */
.mfi-sugg {
position: absolute; left: 0; right: 0; top: calc(100% + 0.375rem); z-index: 90;
background: #fff; border: 1px solid var(--line); border-radius: 0.625rem;
box-shadow: 0 1.125rem 2.75rem rgba(0,0,0,.16); overflow: hidden; display: none;
}
.mfi-sugg.is-open { display: block; }
.mfi-sugg a {
display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 1rem;
border-bottom: 1px solid #F1F5F9; transition: background .15s;
}
.mfi-sugg a:last-child { border-bottom: 0; }
.mfi-sugg a:hover, .mfi-sugg a.is-active { background: #F0FDF4; }
.mfi-sugg img { width: 2.75rem; height: 2.75rem; object-fit: contain; flex: none; }
.mfi-sugg__t { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.3125rem; color: var(--navy-txt); }
.mfi-sugg__p { margin-left: auto; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: var(--green-d); white-space: nowrap; }
.mfi-sugg__empty { padding: 1rem; font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--gray-6); }
.mfi-cart__head { display: flex; align-items: center; gap: 0.75rem; }
.mfi-cart__head svg { width: 1.375rem; height: 1.375rem; }
.mfi-cart__head span { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; color: var(--navy-deep); }
.mfi-cart__row {
display: flex; justify-content: space-between; margin-top: 1.375rem;
font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--gray-6);
}
.mfi-cart__row + .mfi-cart__row { margin-top: 0.75rem; }
.mfi-cart__row b { color: var(--navy-deep); font-weight: 600; }
/* ============================================================
8. ГЛАВНЫЙ ЭКРАН
============================================================ */
.mfi-hero-sec { padding-top: 3.875rem; }
.mfi-hero {
position: relative; height: 37rem; border-radius: 1.25rem; overflow: hidden;
display: flex; flex-direction: column; justify-content: center;
padding: 0 3.0625rem;
}
.mfi-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mfi-hero__shade {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(12,26,43,.82) 0%, rgba(12,26,43,.55) 38%, rgba(12,26,43,.12) 70%, rgba(12,26,43,0) 100%);
}
.mfi-hero__body { position: relative; z-index: 2; max-width: 49.6875rem; }
.mfi-hero h1 {
font-weight: 600; font-size: 3rem; line-height: 3.6875rem; color: #fff; max-width: 47.9375rem;
}
.mfi-hero p {
margin-top: 2.0625rem;
font-weight: 500; font-size: 1.5625rem; line-height: 1.875rem; color: #fff;
}
.mfi-hero__btns { margin-top: 2.3125rem; display: flex; gap: 1.375rem; }
.mfi-btn-hero {
display: flex; align-items: center; justify-content: center;
width: 22.625rem; height: 4.6875rem; border-radius: 1.25rem; border: 0; cursor: pointer;
font-weight: 600; font-size: 1.5rem; color: #fff; text-align: center;
transition: transform .15s, filter .2s;
}
.mfi-btn-hero:hover { filter: brightness(1.08); transform: translateY(-0.125rem); }
.mfi-btn-hero--red { background: var(--red); }
.mfi-btn-hero--green { background: var(--green); }
/* ============================================================
9. ПЛИТКИ КАТЕГОРИЙ
============================================================ */
.mfi-cats-sec { padding-top: 5.5625rem; }
.mfi-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.875rem; }
.mfi-cat {
height: 14.4375rem; background: #fff; border-radius: 0.625rem;
box-shadow: 0 0 1.25rem -0.4375rem rgba(0,0,0,.25);
display: flex; flex-direction: column; align-items: center;
padding: 1.8125rem 0.375rem 0; transition: transform .2s, box-shadow .2s;
}
.mfi-cat:hover { transform: translateY(-0.375rem); box-shadow: 0 0.875rem 1.875rem -0.625rem rgba(0,0,0,.28); }
.mfi-cat__ic {
width: 6.25rem; height: 6.25rem; flex: none;
display: flex; align-items: center; justify-content: center;
}
.mfi-cat__ic img { max-width: 6.25rem; max-height: 6.25rem; width: auto; height: auto; object-fit: contain; }
.mfi-cat__lb {
margin-top: 0.875rem;
font-weight: 500; font-size: 1.25rem; line-height: 1.5rem; text-align: center; color: var(--ink);
}
/* ============================================================
10. ЗАГОЛОВКИ СЕКЦИЙ
============================================================ */
.mfi-sec-title {
margin-bottom: 4.1875rem;
font-weight: 600; font-size: 3rem; line-height: 3.6875rem; text-align: center; color: var(--ink);
}
/* ============================================================
11. КАРТОЧКА ТОВАРА И СЛАЙДЕР
============================================================ */
.mfi-promo-sec { padding-top: 5.4375rem; }
.mfi-new-sec { padding-top: 4.1875rem; }
.mfi-slider { position: relative; }
.mfi-slider__track {
display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3.375rem) / 4);
gap: 1.125rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 0.25rem;
touch-action: pan-x; overscroll-behavior-x: contain;
}
.mfi-slider__track::-webkit-scrollbar { display: none; }
.mfi-slider__track > * { scroll-snap-align: start; }
.mfi-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
width: 4.1875rem; height: 4.1875rem; border-radius: 2.5rem; border: 0; cursor: pointer;
background: #fff; box-shadow: 0 0 1.25rem -0.4375rem rgba(0,0,0,.35);
display: flex; align-items: center; justify-content: center;
transition: background .15s, opacity .2s;
}
.mfi-arrow:hover { background: #F3F4F6; }
.mfi-arrow[disabled] { opacity: .35; cursor: default; }
.mfi-arrow svg { width: 1.125rem; height: 2.125rem; }
.mfi-arrow--prev { left: -3.4375rem; }
.mfi-arrow--next { right: -3.4375rem; }
.mfi-pcard {
position: relative; display: flex; flex-direction: column;
min-height: 42.0625rem; background: #fff; border: 1px solid #6B6B6B; border-radius: 0.625rem;
padding: 0.75rem 1.5rem 1.5rem; overflow: hidden;
transition: transform .2s, box-shadow .2s;
}
.mfi-pcard:hover { transform: translateY(-0.375rem); box-shadow: 0 1.125rem 2.375rem -1rem rgba(0,0,0,.3); }
.mfi-pcard__imgwrap {
height: 18.6875rem; flex: none; display: flex; align-items: center; justify-content: center;
}
.mfi-pcard__imgwrap img { max-width: 16.5rem; max-height: 18.6875rem; width: auto; height: auto; object-fit: contain; }
.mfi-pcard__title {
margin-top: 1.625rem; padding: 0 0.5625rem;
font-weight: 600; font-size: 1.6875rem; line-height: 2.0625rem; color: var(--ink-2);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
min-height: 6.1875rem;
}
.mfi-pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mfi-pcard__from {
margin-top: 1rem; padding: 0 0.5625rem;
font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 1.5625rem; line-height: 1.8125rem; color: var(--green);
}
.mfi-pcard__price {
margin-top: 1.375rem; padding: 0 0.5625rem;
font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.6875rem; line-height: 2rem; color: #343434;
}
.mfi-pcard__price del { color: #9AA0A6; font-size: 1.25rem; margin-right: 0.5rem; }
.mfi-pcard__price ins { text-decoration: none; }
.mfi-pcard__btn {
position: relative; z-index: 2; margin-top: auto;
display: flex; align-items: center; justify-content: center;
height: 4.25rem; border-radius: 0.9375rem; border: 0; cursor: pointer; background: var(--green);
font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 1.5rem; color: #FFF8F8;
transition: filter .2s;
}
.mfi-pcard__btn:hover { filter: brightness(1.08); }
.mfi-pcard__badge {
position: absolute; left: 1rem; top: 1rem; z-index: 3;
background: var(--red); color: #fff; border-radius: 0.5rem;
padding: 0.3125rem 0.75rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.25rem;
}
/* сетка карточек (каталог, поиск) */
.mfi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; }
.mfi-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* ============================================================
12. ПРЕИМУЩЕСТВА
============================================================ */
.mfi-adv-sec { padding-top: 5.9375rem; }
.mfi-advs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.875rem; }
.mfi-adv {
min-height: 23rem; background: #fff; border-radius: 0.625rem;
box-shadow: 0 0 1.25rem -0.4375rem rgba(0,0,0,.25);
display: flex; flex-direction: column; align-items: center;
padding: 4.25rem 1.1875rem 1.5rem; transition: transform .2s, box-shadow .2s;
}
.mfi-adv:hover { transform: translateY(-0.375rem); box-shadow: 0 1.125rem 2.375rem -1rem rgba(0,0,0,.28); }
.mfi-adv__ic { width: 8.4375rem; height: 8.4375rem; flex: none; display: flex; align-items: center; justify-content: center; }
.mfi-adv__ic img { max-width: 8.125rem; max-height: 7rem; width: auto; height: auto; object-fit: contain; }
.mfi-adv__t {
margin-top: 1.875rem;
font-weight: 600; font-size: 2rem; line-height: 2.4375rem; text-align: center; color: var(--ink);
}
/* ============================================================
13. ОТЗЫВЫ
============================================================ */
.mfi-rev-sec { padding-top: 4.125rem; }
.mfi-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.mfi-rev {
min-height: 26.25rem; background: #fff; border-radius: 0.625rem;
box-shadow: 0 0 1.25rem -0.4375rem rgba(0,0,0,.25); padding: 1.875rem 1.5rem 2.5rem;
}
.mfi-rev__head { display: flex; align-items: flex-start; gap: 0.875rem; }
.mfi-rev__ava {
width: 5.375rem; height: 5.375rem; flex: none; border-radius: 50%;
object-fit: cover; background: #DFE6EF;
}
.mfi-rev__ava--ph {
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 2rem; color: #fff; background: var(--green-d);
}
.mfi-rev__name { padding-top: 0.75rem; }
.mfi-rev__name b { display: block; font-weight: 600; font-size: 1.5rem; line-height: 1.875rem; color: var(--ink-2); }
.mfi-rev__name span { display: block; margin-top: 0.25rem; font-weight: 400; font-size: 1.125rem; line-height: 1.5rem; color: #6B7280; }
.mfi-rev__bubble {
position: relative; margin-top: 1.75rem;
background: #EBECF0; border-radius: 0.625rem; padding: 1.5rem 1.375rem;
font-weight: 400; font-size: 1.125rem; line-height: 1.5rem; color: #343434;
}
.mfi-rev__bubble::after {
content: ""; position: absolute; left: 2.25rem; bottom: -1.125rem;
border-width: 1.125rem 1.75rem 0 0; border-style: solid;
border-color: #EBECF0 transparent transparent transparent;
}
/* ============================================================
14. ДОСТАВКА
============================================================ */
.mfi-del-sec { padding-top: 6.875rem; }
.mfi-dels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.mfi-del { display: flex; flex-direction: column; align-items: center; }
.mfi-del__ic { height: 9.375rem; display: flex; align-items: center; justify-content: center; }
.mfi-del__ic img { max-width: 9.375rem; max-height: 8.125rem; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.mfi-del__t {
margin-top: 3.0625rem; max-width: 25rem;
font-weight: 500; font-size: 1.625rem; line-height: 2rem; text-align: center; color: var(--ink);
}
/* ============================================================
15. СВЯЖИТЕСЬ С НАМИ
============================================================ */
.mfi-contact-sec { padding-top: 7.6875rem; }
.mfi-contact-sec .mfi-sec-title {
font-family: 'Inter', sans-serif; font-weight: 700; font-size: 3rem; line-height: 3.3125rem; color: var(--navy-txt);
margin-bottom: 0.75rem;
}
.mfi-contact__sub {
font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 1.75rem;
text-align: center; color: var(--gray-6); margin-bottom: 3.1875rem;
}
.mfi-contact { display: grid; grid-template-columns: 29.375rem 1fr; gap: 5.625rem; align-items: start; }
.mfi-ci { display: flex; gap: 1.125rem; align-items: flex-start; margin-bottom: 1.875rem; }
.mfi-ci:last-child { margin-bottom: 0; }
.mfi-ci__ic {
width: 3.375rem; height: 3.375rem; flex: none; border-radius: 50%; background: #F0FDF4;
display: flex; align-items: center; justify-content: center;
}
.mfi-ci__ic svg { width: 1.625rem; height: 1.625rem; }
.mfi-ci__b { font-family: 'Inter', sans-serif; font-size: clamp(16px, 1.32rem, 20px); line-height: 1.55; color: var(--navy-txt); }
.mfi-ci__b b { display: block; font-weight: 600; font-size: clamp(16.5px, 1.28rem, 20px); margin-bottom: 0.3125rem; }
.mfi-ci__b a:hover { color: var(--green-a); }
.mfi-ci__sub { color: var(--gray-5); font-size: clamp(15px, 1.08rem, 17px); margin-top: 0.1875rem; }
.mfi-form-card {
background: #fff; border: 1px solid rgba(226,232,240,.4); border-radius: 1.5rem;
box-shadow: 0 0.5rem 1.875rem rgba(0,0,0,.04); padding: 2.25rem;
}
.mfi-form-card__t {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.625rem; line-height: 2.125rem;
color: var(--navy-txt); margin-bottom: 1.625rem;
}
.mfi-frow { display: flex; gap: 1.25rem; margin-bottom: 1.25rem; }
.mfi-fi { position: relative; flex: 1; margin-bottom: 1.25rem; }
.mfi-frow .mfi-fi { margin-bottom: 0; }
.mfi-fi__ico { position: absolute; left: 1.125rem; top: 1.125rem; width: 1.125rem; height: 1.125rem; pointer-events: none; }
.mfi-field {
width: 100%; height: 3.5rem; background: #fff; border: 1px solid var(--line); border-radius: 0.75rem;
padding: 0 1.125rem 0 3.25rem;
font-family: 'Inter', sans-serif; font-size: clamp(15.5px, 1.15rem, 18px); color: var(--navy-txt);
outline: none; transition: border-color .15s, box-shadow .15s;
}
.mfi-field::placeholder { color: var(--gray-5); font-size: clamp(15.5px, 1.15rem, 18px); }
.mfi-field:focus { border-color: var(--green-a); box-shadow: 0 0 0 0.1875rem rgba(60,157,49,.12); }
textarea.mfi-field { height: 8.25rem; padding: 1rem 1.125rem 1rem 3.25rem; resize: vertical; }
select.mfi-field { appearance: none; cursor: pointer; }
.mfi-fi--sel::after {
content: ""; position: absolute; right: 1.125rem; top: 1.5rem; width: 0.75rem; height: 0.5rem;
background: var(--gray-5); pointer-events: none;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.mfi-agree {
display: flex; align-items: flex-start; gap: 0.625rem; margin-bottom: 1.375rem; cursor: pointer;
font-family: 'Inter', sans-serif; font-size: 0.9375rem; line-height: 1.375rem; color: var(--gray-6);
}
.mfi-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.mfi-agree__box {
width: 1.25rem; height: 1.25rem; flex: none; border: 1.5px solid #CBD5E1; border-radius: 0.3125rem;
display: flex; align-items: center; justify-content: center; transition: .15s;
}
.mfi-agree input:checked + .mfi-agree__box { background: var(--green-a); border-color: var(--green-a); }
.mfi-agree input:checked + .mfi-agree__box::after {
content: ""; width: 0.6875rem; height: 0.375rem; border: 0.125rem solid #fff; border-top: 0; border-right: 0;
transform: rotate(-45deg) translate(1px, -1px);
}
.mfi-agree input:focus-visible + .mfi-agree__box { outline: 0.1875rem solid var(--green); outline-offset: 0.125rem; }
.mfi-agree a { color: var(--green-a); text-decoration: underline; }
.mfi-submit {
width: 100%; height: 4rem; background: var(--green-a); border: 0; border-radius: 0.75rem; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.25rem; color: #fff;
transition: filter .2s;
}
.mfi-submit:hover { filter: brightness(1.08); }
.mfi-submit[disabled] { opacity: .6; cursor: default; }
/* ответ формы */
.mfi-fmsg {
margin-top: 1rem; padding: 0.875rem 1.125rem; border-radius: 0.75rem;
font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.375rem; display: none;
}
.mfi-fmsg.is-ok { display: block; background: #E2F6E6; color: #227A3C; }
.mfi-fmsg.is-err { display: block; background: #FBE3E3; color: #B23434; }
.mfi-field.is-err { border-color: #D24B4B; box-shadow: 0 0 0 0.1875rem rgba(210,75,75,.12); }
.mfi-hp { position: absolute !important; left: -624.9375rem !important; opacity: 0; height: 0; }
/* ============================================================
16. ПОДВАЛ
============================================================ */
.mfi-footer { margin-top: 9.5625rem; background: var(--foot); color: #fff; padding: 5.9375rem 0 5.625rem; }
.mfi-footer__cols { display: grid; grid-template-columns: 33.5625rem 23.125rem 30.5625rem 19.25rem; gap: 0; }
.mfi-fh { font-weight: 700; font-size: 1.5625rem; line-height: 1.875rem; color: #fff; margin-bottom: 2.8125rem; }
.mfi-fline { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 2rem; }
.mfi-fline:last-child { margin-bottom: 0; }
.mfi-fline svg { width: 1.6875rem; height: 1.6875rem; margin-top: 1px; }
.mfi-fline__b { font-weight: 500; font-size: 1.4375rem; line-height: 1.75rem; color: #fff; max-width: 25.1875rem; }
.mfi-fline__b a { display: block; text-decoration: underline; transition: color .15s; }
.mfi-fline__b a:hover { color: #9FD58A; }
.mfi-footer nav li { margin-bottom: 1.75rem; }
.mfi-footer nav li:last-child { margin-bottom: 0; }
.mfi-footer nav a {
font-weight: 500; font-size: 1.4375rem; line-height: 1.75rem; color: #fff; transition: color .15s;
}
.mfi-footer nav a:hover { color: #9FD58A; }
.mfi-fsub input {
display: block; width: 19.25rem; max-width: 100%; height: 3.625rem; border: 0; border-radius: 0.625rem;
background: #fff; padding: 0 1.125rem; outline: none;
font-weight: 500; font-size: 1.375rem; color: #616161;
}
.mfi-fsub button {
display: block; width: 19.25rem; max-width: 100%; height: 3.625rem; margin-top: 1.125rem;
border: 0; border-radius: 0.625rem; background: var(--red); color: #fff; cursor: pointer;
font-weight: 600; font-size: 1.375rem; transition: filter .2s;
}
.mfi-fsub button:hover { filter: brightness(1.12); }
.mfi-fsub .mfi-fmsg { width: 19.25rem; max-width: 100%; }
.mfi-footer__bottom {
margin-top: 4.375rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.14);
display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
font-size: 1.0625rem; line-height: 1.5rem; color: rgba(255,255,255,.62);
}
.mfi-footer__bottom a:hover { color: #9FD58A; }
/* ============================================================
17. МОДАЛЬНОЕ ОКНО
============================================================ */
.mfi-modal {
position: fixed; inset: 0; z-index: 1000; padding: 1.25rem;
background: rgba(12,26,43,.55);
display: none; align-items: center; justify-content: center;
opacity: 0; transition: opacity .25s;
}
.mfi-modal.is-open { display: flex; opacity: 1; }
.mfi-modal__card {
position: relative; width: 100%; max-width: 27.5rem; background: #fff; border-radius: 1.25rem;
padding: 2.375rem 2.25rem 1.875rem; box-shadow: 0 1.875rem 5rem rgba(0,0,0,.35);
font-family: 'Inter', Arial, sans-serif;
transform: translateY(1rem) scale(.98); transition: transform .28s var(--ease);
max-height: calc(100vh - 2.5rem); overflow-y: auto;
}
.mfi-modal.is-open .mfi-modal__card { transform: none; }
.mfi-modal__close {
position: absolute; right: 1rem; top: 0.75rem; width: 2.125rem; height: 2.125rem;
border: 0; background: transparent; cursor: pointer;
font-size: 1.875rem; line-height: 1; color: var(--gray-5); transition: color .15s;
}
.mfi-modal__close:hover { color: var(--navy-txt); }
.mfi-modal__t { font-weight: 700; font-size: 1.625rem; line-height: 2rem; color: var(--navy-txt); margin-bottom: 0.5rem; }
.mfi-modal__s { font-size: 0.9375rem; line-height: 1.375rem; color: var(--gray-6); margin-bottom: 1.5rem; }
.mfi-modal .mfi-fi { margin-bottom: 1rem; }
.mfi-modal .mfi-field { height: 3.375rem; padding: 0 1rem 0 3rem; font-size: 1rem; }
.mfi-modal .mfi-fi__ico { left: 1rem; top: 1.0625rem; }
.mfi-modal .mfi-submit { height: 3.625rem; font-weight: 600; font-size: 1.125rem; margin-top: 0.375rem; }
.mfi-modal__note { font-size: 0.75rem; line-height: 1.0625rem; color: var(--gray-5); text-align: center; margin-top: 0.875rem; }
body.mfi-lock { overflow: hidden; }
/* ============================================================
18. ХЛЕБНЫЕ КРОШКИ И ШАПКИ РАЗДЕЛОВ
============================================================ */
.mfi-page { padding-top: 2.125rem; }
.mfi-bread {
font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.25rem; color: var(--gray-6);
margin-bottom: 2.125rem;
}
.mfi-bread a { color: var(--gray-6); transition: color .15s; }
.mfi-bread a:hover { color: var(--green-d); }
.mfi-bread .mfi-bread__cur { color: var(--ink); }
.mfi-chero {
position: relative; min-height: 18.75rem; border-radius: 1.125rem; overflow: hidden;
display: flex; align-items: center; padding: 3.5rem;
}
.mfi-chero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mfi-chero__sh {
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(12,26,43,.85), rgba(12,26,43,.4) 58%, rgba(12,26,43,0));
}
.mfi-chero__t { position: relative; z-index: 2; color: #fff; }
.mfi-chero__t h1 { font-weight: 600; font-size: 2.875rem; line-height: 3.5rem; }
.mfi-chero__t p { margin-top: 0.875rem; max-width: 47.5rem; font-weight: 500; font-size: 1.375rem; line-height: 1.875rem; }
/* директория подкатегорий */
.mfi-catbox {
margin-top: 2.375rem; background: #F3F7FB; border: 1px solid var(--line); border-radius: 1rem;
padding: 2.125rem 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem;
}
.mfi-catcol h4 {
font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.1875rem; line-height: 1.5rem;
color: var(--navy); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 0.125rem solid var(--green);
}
.mfi-catcol h4 + h4 { margin-top: 1.5rem; }
.mfi-catcol a {
display: block; font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.375rem;
color: #475569; padding: 0.3125rem 0; transition: color .15s;
}
.mfi-catcol h4 a { color: var(--navy); }
.mfi-catcol a:hover { color: var(--green-d); }
/* цветные плитки */
.mfi-ftiles { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8125rem; }
.mfi-ftile {
min-height: 11rem; border-radius: 1rem; padding: 1.75rem 2.125rem; color: #fff;
display: flex; flex-direction: column; justify-content: center;
transition: transform .2s, box-shadow .2s;
}
.mfi-ftile:hover { transform: translateY(-0.3125rem); box-shadow: 0 1.125rem 2.375rem -1rem rgba(0,0,0,.35); }
.mfi-ftile__t { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.5625rem; line-height: 1.9375rem; }
.mfi-ftile__s { margin-top: 0.625rem; font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.375rem; opacity: .92; }
.mfi-ftile--navy { background: linear-gradient(135deg, #1C2E44, #2F4A6B); }
.mfi-ftile--green { background: linear-gradient(135deg, #3D9823, #57B83C); }
.mfi-ftile--red { background: linear-gradient(135deg, #C42029, #E0353D); }
.mfi-pop { padding-top: 4rem; }
.mfi-pop .mfi-sec-title { font-size: 2.75rem; line-height: 3.3125rem; margin-bottom: 3.25rem; }
/* ---------- каталог: сетка с фильтром ---------- */
.mfi-shop { display: grid; grid-template-columns: 23.75rem 1fr; gap: 2rem; align-items: start; margin-top: 2.125rem; }
.mfi-side {
background: #fff; border: 1px solid var(--line); border-radius: 0.875rem;
box-shadow: 0 1px 0.1875rem rgba(0,0,0,.08); overflow: hidden;
}
.mfi-side + .mfi-side { margin-top: 1.5rem; }
.mfi-side__h {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.5rem;
color: var(--navy-txt); padding: 1.25rem 1.5rem; border-bottom: 1px solid #EEF2F7;
}
.mfi-side a {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
padding: 0.875rem 1.5rem; border-bottom: 1px solid #F1F5F9;
font-family: 'Inter', sans-serif; font-size: 1.0625rem; line-height: 1.375rem; color: #334155;
transition: background .15s, color .15s;
}
.mfi-side a:last-child { border-bottom: 0; }
.mfi-side a:hover { background: #F0FDF4; color: var(--green-d); }
.mfi-side a.is-act { background: var(--green-d); color: #fff; font-weight: 600; }
.mfi-side .mfi-cnt { font-size: 0.875rem; color: var(--gray-5); flex: none; }
.mfi-side a.is-act .mfi-cnt { color: #E7F6E2; }
.mfi-sortbar {
background: #fff; border: 1px solid var(--line); border-radius: 0.75rem;
display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
padding: 0 1.625rem; height: 4rem; margin-bottom: 1.625rem;
font-family: 'Inter', sans-serif; font-size: 1.0625rem; color: var(--gray-6);
}
.mfi-sortbar select {
border: 0; background: none; outline: none; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.0625rem; color: var(--navy-txt);
}
.mfi-empty {
padding: 3.75rem 1.875rem; text-align: center; background: #F7F9FC; border-radius: 0.875rem; width: 100%;
font-family: 'Inter', sans-serif; font-size: 1.1875rem; line-height: 1.75rem; color: var(--gray-6);
}
/* Пустой раздел — во всю ширину (без левой колонки категорий) */
.mfi-shop:has(.mfi-empty) { grid-template-columns: 1fr; }
.mfi-shop:has(.mfi-empty) .mfi-shop__side { display: none; }
/* пагинация */
.mfi-pager { margin-top: 2.875rem; display: flex; justify-content: center; gap: 0.625rem; flex-wrap: wrap; }
.mfi-pager .page-numbers {
display: flex; align-items: center; justify-content: center;
min-width: 3.25rem; height: 3.25rem; padding: 0 0.875rem; border-radius: 0.625rem;
border: 1px solid var(--line); background: #fff;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.0625rem; color: var(--navy-txt);
transition: .15s;
}
.mfi-pager .page-numbers:hover { border-color: var(--green-d); color: var(--green-d); }
.mfi-pager .page-numbers.current { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.mfi-pager .page-numbers.dots { border-color: transparent; }
/* ============================================================
19. КАРТОЧКА ТОВАРА (страница)
============================================================ */
.mfi-single { padding-top: 1.875rem; }
.mfi-single__title {
font-family: 'Inter', sans-serif; font-weight: 700; font-size: 2.125rem; line-height: 2.625rem;
color: #1F2937; max-width: 81.25rem; margin-bottom: 2.125rem;
}
.mfi-tcard {
background: #fff; border: 1px solid var(--line-2); border-radius: 0.875rem;
box-shadow: 0 1px 0.1875rem rgba(0,0,0,.06);
}
.mfi-tgrid { display: grid; grid-template-columns: 1fr 24.375rem; gap: 2.25rem; align-items: start; }
.mfi-tmain { padding: 2.625rem 1.9375rem 1.9375rem; }
.mfi-tmain__top { display: flex; gap: 3.125rem; align-items: flex-start; }
.mfi-tgal { width: 28.125rem; flex: none; }
.mfi-tgal__big {
width: 28.125rem; height: 25.625rem; background: #fff; border-radius: 0.5rem;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mfi-tgal__big img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mfi-tinfo { flex: 1; min-width: 0; }
.mfi-tinfo__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; }
.mfi-tinfo__head h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.5rem; color: #1F2937; }
.mfi-tinfo__reset { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.125rem; line-height: 1.5rem; color: var(--green); }
.mfi-tinfo__reset:hover { text-decoration: underline; }
.mfi-trow {
font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 1.5rem; color: #6B7280;
margin-top: 0.875rem;
}
.mfi-trow:first-of-type { margin-top: 1.5625rem; }
.mfi-trow b { color: #1F2937; font-weight: 600; }
.mfi-wa {
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
width: 32.5rem; max-width: 100%; height: 3.5rem; margin-top: 1.875rem;
background: #25D366; border-radius: 0.625rem;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.125rem; color: #fff;
transition: filter .2s, transform .15s;
}
.mfi-wa:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mfi-wa svg { width: 1.625rem; height: 1.625rem; }
.mfi-thumbs { margin-top: 1.875rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.mfi-thumb {
height: 9.375rem; background: #fff; border: 1px solid var(--line-2); border-radius: 0.5rem;
overflow: hidden; cursor: pointer; padding: 0; transition: border-color .15s;
}
.mfi-thumb:hover, .mfi-thumb.is-act { border-color: var(--green); }
.mfi-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* правая колонка */
.mfi-tbuy { padding: 2.625rem 2rem 2rem; position: sticky; top: 1.5rem; }
.mfi-tprice {
font-family: 'Inter', sans-serif; font-weight: 700; font-size: 2.5rem; line-height: 3rem; color: #1F2937;
}
.mfi-tprice del { display: block; font-size: 1.5rem; color: #9AA0A6; font-weight: 500; }
.mfi-tprice ins { text-decoration: none; }
.mfi-tstock { margin-top: 0.625rem; font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--green-d); }
.mfi-tstock.is-out { color: #D24B4B; }
.mfi-tqty { display: flex; align-items: center; gap: 0; margin-top: 1.25rem; width: 9.375rem; }
.mfi-tqty button {
width: 2.875rem; height: 3.125rem; border: 1px solid var(--line-2); background: #fff; cursor: pointer;
font-size: 1.375rem; color: var(--navy-txt); transition: background .15s;
}
.mfi-tqty button:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.mfi-tqty button:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.mfi-tqty button:hover { background: #F0FDF4; }
.mfi-tqty input {
width: 3.625rem; height: 3.125rem; border: 1px solid var(--line-2); border-left: 0; border-right: 0;
text-align: center; outline: none;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.0625rem; color: var(--navy-txt);
-moz-appearance: textfield;
}
.mfi-tqty input::-webkit-outer-spin-button, .mfi-tqty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mfi-addcart {
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
width: 100%; height: 3.5rem; margin-top: 1.25rem; border: 0; border-radius: 0.5rem; cursor: pointer;
background: var(--red-cart);
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.125rem; color: #fff;
transition: filter .2s, transform .15s;
}
.mfi-addcart:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mfi-addcart svg { width: 1.375rem; height: 1.375rem; }
.mfi-addcart.is-done { background: var(--green-d); }
.mfi-tsep { height: 1px; background: var(--line-2); margin: 2.25rem 0 2rem; }
.mfi-tpack__h { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.3125rem; line-height: 1.625rem; color: #1F2937; margin-bottom: 1.875rem; }
.mfi-tpack li {
position: relative; padding-left: 1.375rem; margin-bottom: 1.5rem;
font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.375rem; color: #6B7280;
}
.mfi-tpack li:last-child { margin-bottom: 0; }
.mfi-tpack li::before {
content: ""; position: absolute; left: 0; top: 0.4375rem; width: 0.5rem; height: 0.5rem;
border-radius: 50%; background: var(--green);
}
.mfi-tpack b { color: #1F2937; font-weight: 700; }
/* вкладки */
.mfi-tabs { margin-top: 1.875rem; display: flex; gap: 0.875rem; flex-wrap: wrap; }
.mfi-pill {
padding: 0.8125rem 1.5rem; border: 1px solid #D1D5DB; border-radius: 1.625rem; background: #fff; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1rem; color: #4B5563;
white-space: nowrap; transition: .15s;
}
.mfi-pill:hover { border-color: var(--green); }
.mfi-pill.is-on { border-color: var(--green); color: var(--green); }
.mfi-tabpanes { margin-top: 1.125rem; }
.mfi-tabpane { display: none; padding: 0.9375rem 1.9375rem 1.9375rem; }
.mfi-tabpane.is-on { display: block; }
.mfi-spec { width: 100%; border-collapse: collapse; }
.mfi-spec tr { border-bottom: 1px solid #EEF0F2; }
.mfi-spec tr:last-child { border-bottom: 0; }
.mfi-spec th, .mfi-spec td {
padding: 0.875rem 0; text-align: left; vertical-align: top;
font-family: 'Inter', sans-serif; font-size: 1.0625rem; line-height: 1.375rem;
}
.mfi-spec th { font-weight: 400; color: #6B7280; width: 31.25rem; }
.mfi-spec td { font-weight: 700; color: #1F2937; }
.mfi-prose { font-family: 'Inter', sans-serif; font-size: clamp(16.5px, 1.35rem, 21px); line-height: 1.72; color: #3D4657; max-width: none; }
.mfi-prose img { width: 100%; height: auto; }
.mfi-prose iframe { width: 100%; }
.mfi-prose p { margin-bottom: 1rem; }
.mfi-prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.mfi-prose li { margin-bottom: 0.55rem; }
.mfi-prose h2, .mfi-prose h3 { font-weight: 700; color: #1F2937; margin: 1.6rem 0 0.85rem; }
.mfi-prose h2 { font-size: clamp(23px, 2rem, 30px); line-height: 1.25; }
.mfi-prose h3 { font-size: clamp(19.5px, 1.62rem, 25px); line-height: 1.3; }
.mfi-prose a { color: var(--green-d); text-decoration: underline; }
.mfi-related { padding-top: 5rem; }
/* Сетки карточек на контентных страницах — 4×1, адаптивно */
.mfi-prose .mfi-g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.125rem; margin: 1.25rem 0 1.9rem; }
.mfi-prose .mfi-g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.125rem; margin: 1.25rem 0 1.9rem; }
.mfi-prose .mfi-pcardx {
background: #fff; border: 1px solid #E8EDF3; border-radius: 0.875rem;
padding: 1.4rem 1.45rem; box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.mfi-prose .mfi-pcardx h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: clamp(18px, 1.4rem, 22px); }
.mfi-prose .mfi-pcardx p { margin-bottom: 0; }
@media (max-width: 991px) {
.mfi-prose .mfi-g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 559px) {
.mfi-prose .mfi-g4, .mfi-prose .mfi-g2 { grid-template-columns: 1fr; }
}
/* ============================================================
20. ЛИЧНЫЙ КАБИНЕТ
============================================================ */
.mfi-cab { padding-top: 2.875rem; }
.mfi-cab__wrap { display: grid; grid-template-columns: 23rem 1fr; gap: 1.75rem; align-items: start; }
.mfi-cab__main .woocommerce-notices-wrapper:empty { display: none; }
.mfi-cab__main > .woocommerce-notices-wrapper:first-child:empty { margin: 0; }
.mfi-cab__side {
background: #fff; border: 1px solid #E8EDF3; border-radius: 1rem;
padding: 1.625rem 1.5rem; box-shadow: 0 1px 0.1875rem rgba(0,0,0,.04);
}
.mfi-cab__side h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.4375rem; color: var(--navy-txt); margin-bottom: 1.25rem; }
.mfi-cab__nav { display: flex; flex-direction: column; gap: 0.375rem; }
.mfi-cab__nav a {
display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem;
border-radius: 0.625rem; transition: background .15s, color .15s;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.0625rem; color: #334155;
}
.mfi-cab__nav a:hover { background: #F4F8FF; }
.mfi-cab__nav a.is-active { background: #EAF2FB; color: #1C56A6; }
.mfi-cab__nav svg { width: 1.375rem; height: 1.375rem; flex: none; }
.mfi-cab__nav .mfi-gp { margin-left: auto; display: flex; align-items: center; gap: 0.625rem; }
.mfi-badge {
background: #DCFCE7; color: #16A34A; border-radius: 0.5rem; padding: 1px 0.5625rem;
font-size: 0.8125rem; font-weight: 600;
}
.mfi-cab__help { margin-top: 1.875rem; background: #EEF3F9; border-radius: 0.875rem; padding: 1.375rem 1.25rem; }
.mfi-cab__help .hh {
display: flex; align-items: center; gap: 0.75rem;
font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.125rem; color: var(--navy-txt);
}
.mfi-cab__help p { font-family: 'Inter', sans-serif; font-size: 0.9375rem; line-height: 1.3125rem; color: var(--gray-6); margin: 0.8125rem 0 1.125rem; }
.mfi-cab__help button {
display: block; width: 100%; text-align: center; background: #fff; cursor: pointer;
border: 1px solid #DCE3EC; border-radius: 0.625rem; padding: 0.875rem;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: #1C56A6;
transition: background .15s;
}
.mfi-cab__help button:hover { background: #F4F8FF; }
.mfi-cab__main { display: flex; flex-direction: column; gap: 1.625rem; min-width: 0; }
.mfi-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.mfi-tile {
position: relative; background: #fff; border: 1px solid #E8EDF3; border-radius: 0.875rem;
padding: 1.25rem 1.125rem; transition: transform .18s, box-shadow .18s;
}
.mfi-tile:hover { transform: translateY(-0.1875rem); box-shadow: 0 0.875rem 1.875rem -1.125rem rgba(0,0,0,.3); }
.mfi-tile__i {
width: 2.625rem; height: 2.625rem; border-radius: 0.6875rem; margin-bottom: 1rem;
display: flex; align-items: center; justify-content: center;
}
.mfi-tile h4 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.1875rem; color: var(--navy-txt); margin-bottom: 0.5625rem; }
.mfi-tile p { font-family: 'Inter', sans-serif; font-size: 0.875rem; line-height: 1.1875rem; color: #7A8699; padding-right: 0.875rem; }
.mfi-tile__ch { position: absolute; right: 1rem; bottom: 1.375rem; }
.mfi-panel { background: #fff; border: 1px solid #E8EDF3; border-radius: 1rem; padding: 1.75rem 1.875rem; }
.mfi-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.mfi-panel__head h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.6875rem; color: var(--navy-txt); }
.mfi-all {
display: flex; align-items: center; gap: 0.4375rem;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: #2E8B57;
}
.mfi-all:hover { text-decoration: underline; }
.mfi-tbl { width: 100%; border-collapse: collapse; }
.mfi-tbl thead th {
background: #F7F9FC; text-align: left; padding: 0.9375rem 1rem;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9375rem; color: #8A93A6;
}
.mfi-tbl thead th:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.mfi-tbl thead th:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.mfi-tbl tbody td {
padding: 1.1875rem 1rem; border-bottom: 1px solid #EEF1F6; vertical-align: top;
font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: #2D3650;
}
.mfi-tbl tbody tr:last-child td { border-bottom: 0; }
.mfi-tbl a { color: #2E8B57; font-weight: 600; }
.mfi-tbl a:hover { text-decoration: underline; }
.mfi-st {
display: inline-block; border-radius: 0.5rem; padding: 0.3125rem 0.8125rem; white-space: nowrap;
font-size: 0.875rem; font-weight: 500;
}
.mfi-st--info { background: #E8EAF8; color: #5560B3; }
.mfi-st--ship { background: #E3F0FB; color: #2B7BC4; }
.mfi-st--proc { background: #FBF1D8; color: #B8860B; }
.mfi-st--done { background: #E2F6E6; color: #2E9E4F; }
.mfi-st--cancel { background: #FBE3E3; color: #D24B4B; }
.mfi-more {
display: block; width: 100%; text-align: center; padding-top: 1.5rem; background: none; border: 0; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: var(--gray-6);
}
.mfi-more:hover { color: var(--green-d); }
/* формы внутри кабинета */
.mfi-cab .mfi-panel .mfi-field { max-width: 32.5rem; }
.mfi-flabel {
display: block; margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--navy-txt);
}
.mfi-fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.375rem; }
.mfi-fgrid .mfi-fi { margin-bottom: 0; }
.mfi-fgrid .mfi-field { padding-left: 1.125rem; max-width: none; }
.mfi-docs li {
display: flex; align-items: center; gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid #EEF1F6;
font-family: 'Inter', sans-serif; font-size: 1rem; color: #2D3650;
}
.mfi-docs li:last-child { border-bottom: 0; }
.mfi-docs .mfi-doc__meta { margin-left: auto; font-size: 0.875rem; color: var(--gray-5); }
.mfi-docs .mfi-doc__dl { color: #2E8B57; font-weight: 600; }
/* ============================================================
21. ПЕРЕОПРЕДЕЛЕНИЕ WOOCOMMERCE
собственные стили вместо снятых woocommerce-general/layout
============================================================ */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper ul {
list-style: none; margin: 0 0 1.5rem; padding: 1.125rem 1.5rem; border-radius: 0.75rem;
font-family: 'Inter', sans-serif; font-size: 1.0625rem; line-height: 1.625rem;
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.woocommerce-message { background: #E2F6E6; color: #227A3C; border-left: 0.25rem solid #2E9E4F; }
.woocommerce-info { background: #E3F0FB; color: #22608F; border-left: 0.25rem solid #2B7BC4; }
.woocommerce-error { background: #FBE3E3; color: #B23434; border-left: 0.25rem solid #D24B4B; }
.woocommerce-error li { padding: 0; background: none; border: 0; margin: 0; }
.woocommerce-message .button, .woocommerce-info .button {
margin-left: auto; height: 2.75rem; padding: 0 1.375rem; border-radius: 0.625rem; background: var(--green-d);
color: #fff; display: inline-flex; align-items: center; font-weight: 600; font-size: 1rem;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { filter: brightness(1.08); }
.mfi-wc-btn, .woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce #respond input#submit {
display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
height: 3.5rem; padding: 0 1.75rem; border: 0; border-radius: 0.625rem; cursor: pointer;
background: var(--green-d); color: #fff;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.0625rem; line-height: 1;
transition: filter .2s, transform .15s;
}
.woocommerce .button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.woocommerce .button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #place_order { background: var(--red-cart); }
.woocommerce .button[disabled] { opacity: .5; cursor: default; transform: none; }
/* таблицы корзины / заказа */
.woocommerce table.shop_table {
width: 100%; border-collapse: collapse; background: #fff;
border: 1px solid #E8EDF3; border-radius: 1rem; overflow: hidden;
}
.woocommerce table.shop_table th {
background: #F7F9FC; text-align: left; padding: 1rem 1.125rem;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9375rem; color: #8A93A6;
}
.woocommerce table.shop_table td {
padding: 1.25rem 1.125rem; border-top: 1px solid #EEF1F6; vertical-align: middle;
font-family: 'Inter', sans-serif; font-size: 1rem; color: #2D3650;
}
.woocommerce table.shop_table img { width: 4.75rem; height: 4.75rem; object-fit: contain; }
.woocommerce table.shop_table .product-name a { font-weight: 600; color: var(--navy-txt); }
.woocommerce table.shop_table .product-name a:hover { color: var(--green-d); }
.woocommerce a.remove {
display: inline-flex; align-items: center; justify-content: center;
width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #FBE3E3; color: #D24B4B;
font-size: 1.25rem; line-height: 1; text-decoration: none; transition: .15s;
}
.woocommerce a.remove:hover { background: #D24B4B; color: #fff; }
.woocommerce .quantity { display: inline-flex; align-items: center; }
.woocommerce .quantity input.qty {
width: 4.875rem; height: 3.125rem; text-align: center; border: 1px solid var(--line-2); border-radius: 0.5rem;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; outline: none;
}
.woocommerce .cart-collaterals, .woocommerce .cart_totals { margin-top: 2.125rem; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3 {
font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.625rem; color: var(--navy-txt); margin-bottom: 1.125rem;
}
.woocommerce .coupon { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.woocommerce .coupon input {
height: 3.5rem; padding: 0 1.125rem; border: 1px solid var(--line); border-radius: 0.625rem; outline: none;
font-family: 'Inter', sans-serif; font-size: 1rem; min-width: 15rem;
}
/* поля чекаута */
.woocommerce form .form-row { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.woocommerce form .form-row label {
margin-bottom: 0.5rem;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--navy-txt);
}
.woocommerce form .form-row .required { color: #D24B4B; text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text, .woocommerce-account select {
width: 100%; height: 3.5rem; padding: 0 1.125rem;
background: #fff; border: 1px solid var(--line); border-radius: 0.75rem; outline: none;
font-family: 'Inter', sans-serif; font-size: 1.0625rem; color: var(--navy-txt);
transition: border-color .15s, box-shadow .15s;
}
.woocommerce form .form-row textarea { height: 7.5rem; padding: 1rem 1.125rem; resize: vertical; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
border-color: var(--green-a); box-shadow: 0 0 0 0.1875rem rgba(60,157,49,.12);
}
.woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order {
background: #fff; border: 1px solid #E8EDF3; border-radius: 1rem; padding: 1.75rem;
}
.woocommerce #payment ul.payment_methods { list-style: none; padding: 0; margin-bottom: 1.375rem; }
.woocommerce #payment ul.payment_methods li {
padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: 0.75rem; margin-bottom: 0.75rem;
font-family: 'Inter', sans-serif; font-size: 1rem;
}
.woocommerce #payment .payment_box {
margin-top: 0.75rem; background: #F7F9FC; border-radius: 0.625rem; padding: 0.875rem 1rem;
font-size: 0.9375rem; line-height: 1.375rem; color: var(--gray-6);
}
.woocommerce .price, .woocommerce-Price-amount { font-family: 'Roboto', sans-serif; }
.woocommerce .select2-container .select2-selection--single {
height: 3.5rem; border: 1px solid var(--line); border-radius: 0.75rem;
display: flex; align-items: center; padding: 0 0.75rem;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0.875rem; }
/* сообщение «товар добавлен» рядом с кнопкой */
.mfi-added { font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: var(--green-d); margin-top: 0.625rem; display: none; }
.mfi-added.is-on { display: block; }
/* ============================================================
22. АДАПТИВ
============================================================ */
@media (max-width: 1439px) {
.mfi-contact { grid-template-columns: 26.25rem 1fr; gap: 3.125rem; }
.mfi-footer__cols { grid-template-columns: 1.5fr 1fr 1.3fr .9fr; }
}
@media (max-width: 1199px) {
.mfi-container, .mfi-band, .mfi-inner { width: 100%; max-width: calc(100% - 2.5rem); }
/* шапка сворачивается в бургер */
.mfi-topbar__inner { height: 5.5rem; }
.mfi-logo img { width: 4rem; height: 4rem; }
.mfi-nav {
position: fixed; inset: 5.5rem 0 auto; z-index: 200; margin: 0;
background: var(--navy); padding: 0.75rem 1.25rem 1.5rem; display: none;
max-height: calc(100vh - 5.5rem); overflow-y: auto;
}
.mfi-nav.is-open { display: block; }
.mfi-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.mfi-nav > ul > li > a { font-size: 1.1875rem; line-height: 1.625rem; padding: 0.875rem 0; justify-content: space-between; }
.mfi-nav .sub-menu {
position: static; width: auto; opacity: 1; visibility: visible; transform: none;
background: rgba(255,255,255,.06); border: 0; box-shadow: none; border-radius: 0.5rem;
padding: 0.25rem 0; margin-bottom: 0.5rem; display: none;
}
.mfi-nav li.is-open > .sub-menu { display: block; }
.mfi-nav .sub-menu a { color: #DDE7F2; font-size: 1rem; }
.mfi-nav .sub-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.mfi-hcontacts { margin-left: auto; gap: 0.375rem; }
.mfi-hcontacts span { font-size: 0.9375rem; line-height: 1.25rem; }
.mfi-hcontacts svg { width: 1.25rem; height: 1.25rem; }
.mfi-cta { margin-left: 1.25rem; width: auto; height: 2.625rem; padding: 0 1.125rem; font-size: 1rem; border-radius: 0.625rem; }
.mfi-cta span { display: none; }
.mfi-burger {
display: flex; align-items: center; justify-content: center; order: 9;
width: 2.875rem; height: 2.875rem; margin-left: 1rem; flex: none;
background: rgba(255,255,255,.1); border: 0; border-radius: 0.625rem; cursor: pointer;
}
.mfi-burger span { display: block; width: 1.375rem; height: 0.125rem; background: #fff; position: relative; }
.mfi-burger span::before, .mfi-burger span::after {
content: ""; position: absolute; left: 0; width: 1.375rem; height: 0.125rem; background: #fff; transition: .2s;
}
.mfi-burger span::before { top: -0.4375rem; }
.mfi-burger span::after { top: 0.4375rem; }
.mfi-burger.is-on span { background: transparent; }
.mfi-burger.is-on span::before { top: 0; transform: rotate(45deg); }
.mfi-burger.is-on span::after { top: 0; transform: rotate(-45deg); }
.mfi-subbar__inner { flex-wrap: wrap; gap: 1.25rem; padding: 1.125rem 0; }
.mfi-client { width: auto; font-size: 1.1875rem; line-height: 1.5625rem; }
.mfi-dz { margin-left: 0; }
.mfi-tools { width: 100%; margin-left: 0; padding-top: 0.25rem; overflow-x: auto; gap: 1.375rem; }
.mfi-tools a { flex: none; }
.mfi-quick { flex-wrap: wrap; gap: 1rem; }
.mfi-qcard { flex: 1 1 calc(50% - 0.5rem); width: auto; min-height: 0; }
.mfi-hero { height: auto; min-height: 26.25rem; padding: 2.875rem 2.125rem; }
.mfi-hero h1 { font-size: 2.125rem; line-height: 2.75rem; }
.mfi-hero p { font-size: 1.1875rem; line-height: 1.625rem; margin-top: 1.25rem; }
.mfi-hero__shade { background: linear-gradient(90deg, rgba(12,26,43,.9) 0%, rgba(12,26,43,.72) 60%, rgba(12,26,43,.4) 100%); }
.mfi-btn-hero { width: auto; flex: 1; min-width: 11.25rem; height: 3.75rem; font-size: 1.125rem; border-radius: 0.875rem; }
.mfi-cats { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.mfi-cat { height: auto; padding: 1.5rem 0.625rem 1.375rem; }
.mfi-cat__lb { font-size: 1rem; line-height: 1.3125rem; }
.mfi-sec-title { font-size: 2rem; line-height: 2.625rem; margin-bottom: 2.5rem; }
.mfi-cats-sec, .mfi-promo-sec, .mfi-adv-sec, .mfi-rev-sec, .mfi-del-sec { padding-top: 3.75rem; }
.mfi-new-sec { padding-top: 3.125rem; }
.mfi-contact-sec { padding-top: 4.375rem; }
.mfi-hero-sec { padding-top: 2.125rem; }
.mfi-slider__track { grid-auto-columns: calc((100% - 1.125rem) / 2); }
.mfi-arrow--prev { left: -0.5rem; }
.mfi-arrow--next { right: -0.5rem; }
.mfi-arrow { width: 3rem; height: 3rem; }
.mfi-pcard { min-height: 0; padding: 0.75rem 1.125rem 1.125rem; }
.mfi-pcard__title { font-size: 1.25rem; line-height: 1.625rem; min-height: 4.875rem; margin-top: 1.125rem; }
.mfi-pcard__from { font-size: 1.125rem; margin-top: 0.75rem; }
.mfi-pcard__price { font-size: 1.3125rem; margin-top: 0.75rem; }
.mfi-pcard__btn { height: 3.5rem; font-size: 1.125rem; }
.mfi-pcard__imgwrap { height: 13.75rem; }
.mfi-grid { grid-template-columns: repeat(3, 1fr); }
.mfi-advs { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.mfi-adv { min-height: 0; padding: 2.5rem 1.25rem 2rem; }
.mfi-adv__t { font-size: 1.4375rem; line-height: 1.875rem; margin-top: 1.375rem; }
.mfi-revs { grid-template-columns: 1fr; gap: 1.5rem; }
.mfi-rev { min-height: 0; }
.mfi-dels { grid-template-columns: 1fr; gap: 2.75rem; }
.mfi-del__t { margin-top: 1.625rem; font-size: 1.25rem; line-height: 1.6875rem; }
.mfi-contact { grid-template-columns: 1fr; gap: 2.5rem; }
.mfi-footer { margin-top: 4.375rem; padding: 3.375rem 0 2.875rem; }
.mfi-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.875rem; }
.mfi-fh { margin-bottom: 1.625rem; font-size: 1.25rem; }
.mfi-fline__b, .mfi-footer nav a { font-size: 1.0625rem; line-height: 1.5rem; }
.mfi-fline { margin-bottom: 1.25rem; }
.mfi-footer nav li { margin-bottom: 1.125rem; }
.mfi-shop { grid-template-columns: 1fr; }
.mfi-side { display: none; }
.mfi-side.is-open { display: block; }
.mfi-tgrid { grid-template-columns: 1fr; }
.mfi-tmain__top { flex-direction: column; gap: 1.75rem; }
.mfi-tgal, .mfi-tgal__big { width: 100%; }
.mfi-tbuy { position: static; }
.mfi-catbox { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; padding: 1.625rem; }
.mfi-ftiles { grid-template-columns: 1fr; }
.mfi-chero { padding: 2.125rem; min-height: 13.75rem; }
.mfi-chero__t h1 { font-size: 1.875rem; line-height: 2.5rem; }
.mfi-chero__t p { font-size: 1.0625rem; line-height: 1.5625rem; }
.mfi-cab__wrap { grid-template-columns: 1fr; }
.mfi-tiles { grid-template-columns: repeat(2, 1fr); }
.mfi-single__title { font-size: 1.625rem; line-height: 2.125rem; }
.mfi-spec th { width: 45%; }
}
@media (max-width: 767px) {
.mfi-container, .mfi-band, .mfi-inner { max-width: calc(100% - 2rem); }
.mfi-hcontacts { display: none; }
.mfi-client { width: 100%; }
.mfi-guest { margin-left: 0; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.mfi-guest__btn { width: auto; }
.mfi-guest__txt { font-size: 0.95rem; line-height: 1.3rem; }
.mfi-qcard { flex: 1 1 100%; }
.mfi-cats { grid-template-columns: repeat(2, 1fr); }
.mfi-slider__track { grid-auto-columns: calc(100% - 2.875rem); }
.mfi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
.mfi-advs { grid-template-columns: 1fr; }
.mfi-tiles { grid-template-columns: 1fr; }
.mfi-catbox { grid-template-columns: 1fr; }
.mfi-frow { flex-direction: column; gap: 0; }
.mfi-frow .mfi-fi { margin-bottom: 1.25rem; }
.mfi-footer__cols { grid-template-columns: 1fr; gap: 2.125rem; }
.mfi-form-card { padding: 1.5rem 1.25rem; }
.mfi-hero { padding: 2.125rem 1.375rem; }
.mfi-hero__btns { flex-direction: column; gap: 0.875rem; }
.mfi-btn-hero { width: 100%; }
.mfi-thumbs { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
.mfi-tmain, .mfi-tbuy { padding: 1.5rem 1.25rem; }
.mfi-panel { padding: 1.25rem 1.125rem; }
.mfi-tabpane { padding: 0.75rem 1.125rem 1.25rem; }
.mfi-spec th, .mfi-spec td { display: block; width: auto; padding: 0.5rem 0; }
.mfi-spec th { padding-top: 0.875rem; }
.mfi-spec tr { display: block; padding-bottom: 0.5rem; }
.mfi-tbl thead { display: none; }
.mfi-tbl tbody tr { display: block; border: 1px solid #EEF1F6; border-radius: 0.75rem; margin-bottom: 0.875rem; padding: 0.375rem 0; }
.mfi-tbl tbody td { display: flex; justify-content: space-between; gap: 0.875rem; border: 0; padding: 0.5rem 1rem; text-align: right; }
.mfi-tbl tbody td::before { content: attr(data-l); color: #8A93A6; font-weight: 500; text-align: left; }
.woocommerce table.shop_table thead { display: none; }
.woocommerce table.shop_table tr { display: block; border-top: 1px solid #EEF1F6; }
.woocommerce table.shop_table td { display: flex; justify-content: space-between; gap: 0.875rem; border: 0; text-align: right; }
.woocommerce table.shop_table td::before { content: attr(data-title); color: #8A93A6; font-weight: 500; text-align: left; }
.mfi-fgrid { grid-template-columns: 1fr; }
}
/* ---------- компактная панель (страница товара) ---------- */
.mfi-ubar { background: #fff; border-bottom: 1px solid #E5E7EB; }
.mfi-ubar__inner { display: flex; align-items: center; padding: 1.875rem 0 2.6875rem; }
.mfi-ubar__cat {
display: flex; align-items: center; justify-content: center; gap: 0.625rem; flex: none;
width: 11.875rem; height: 3.75rem; border-radius: 0.625rem; background: var(--green-d); color: #fff;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.125rem;
transition: filter .2s;
}
.mfi-ubar__cat:hover { filter: brightness(1.08); }
.mfi-ubar__search { position: relative; width: 26.875rem; margin-left: 1.3125rem; flex: none; }
.mfi-ubar__search input {
width: 100%; height: 3.375rem; padding: 0 1.125rem 0 3rem;
border: 1px solid var(--line); border-radius: 0.625rem; outline: none; background: #fff;
font-family: 'Inter', sans-serif; font-size: 1.0625rem; color: var(--navy-txt);
transition: border-color .15s, box-shadow .15s;
}
.mfi-ubar__search input::placeholder { color: var(--gray-5); }
.mfi-ubar__search input:focus { border-color: var(--green-a); box-shadow: 0 0 0 0.1875rem rgba(60,157,49,.12); }
.mfi-ubar__ico { position: absolute; left: 1rem; top: 1.0625rem; width: 1.25rem; height: 1.25rem; pointer-events: none; }
.mfi-ubar__nav { margin-left: 9.25rem; }
.mfi-ubar__nav ul { display: flex; align-items: center; gap: 2.8125rem; }
.mfi-ubar__nav a {
font-weight: 500; font-size: 1.375rem; line-height: 1.6875rem; color: var(--navy); white-space: nowrap;
transition: color .15s;
}
.mfi-ubar__nav a:hover { color: var(--green-d); }
.mfi-ubar__nav .sub-menu { display: none; }
.mfi-ubar__cart { margin-left: auto; display: flex; align-items: center; gap: 0.875rem; }
.mfi-ubar__cart > span:last-child { font-weight: 500; font-size: 1.375rem; color: var(--navy); }
.mfi-ubar__cart:hover > span:last-child { color: var(--green-d); }
.mfi-ubar__cartico {
position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #F1F5F9;
display: flex; align-items: center; justify-content: center; color: var(--navy);
}
/* ---------- подвал: своя полоса 106.5rem ---------- */
.mfi-footer__inner { width: 106.5rem; max-width: calc(100% - 3rem); margin-inline: auto; }
/* ---------- слайдер отзывов ---------- */
.mfi-slider__track--rev { grid-auto-columns: calc((100% - 5rem) / 3); gap: 2.5rem; }
@media (max-width: 1199px) {
.mfi-ubar__inner { flex-wrap: wrap; gap: 0.875rem; padding: 1rem 0; }
.mfi-ubar__cat { width: auto; padding: 0 1.25rem; height: 3rem; font-size: 1rem; }
.mfi-ubar__search { width: auto; flex: 1; min-width: 12.5rem; margin-left: 0; }
.mfi-ubar__nav { display: none; }
.mfi-ubar__cart { margin-left: 0; }
.mfi-footer__inner { max-width: calc(100% - 2.5rem); }
.mfi-slider__track--rev { grid-auto-columns: calc(100% - 2.875rem); }
}
/* ===== MFI-CORR-2026 (корректировки клиента) ===== */
/* #1 — шире блок поиска, уже блок Корзины */
.mfi-qcard--find { width: 39rem; }
.mfi-qcard--cart { width: 15rem; }
@media (max-width:1200px){ .mfi-qcard--find, .mfi-qcard--cart { width: 100%; } }
/* #2 — первый блок (hero) поднят выше */
.mfi-hero-sec { padding-top: 1.25rem; }
/* ===== MFI-MEGA-2026 — выпадающее мега-меню каталога (#5) ===== */
.mfi-megawrap { position: relative; }
.mfi-catbtn { border: 0; cursor: pointer; width: 100%; }
.mfi-mega { position: absolute; top: calc(100% - 0.5rem); left: 0; z-index: 70; display: none; }
.mfi-mega--open .mfi-mega { display: block; }
.mfi-mega__list {
list-style: none; margin: 0; padding: 0.5rem 0; width: 25rem; max-height: 33rem; overflow-y: auto;
background: #fff; border: 1px solid #e5e9f0; border-radius: 0.9rem;
box-shadow: 0 1.2rem 3rem rgba(15,23,42,.18);
}
.mfi-mega__top { position: relative; }
.mfi-mega__top > a {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding: 0.62rem 1.15rem; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.97rem;
color: #0B1C3C; text-decoration: none; line-height: 1.25;
}
.mfi-mega__top.mfi-mega__has > a::after { content: '›'; color: #9aa6b8; font-size: 1.1rem; }
.mfi-mega__top:hover > a { background: #EAF6EE; color: #159a4b; }
.mfi-mega__fly {
position: absolute; top: -0.5rem; left: 100%; display: none; min-width: 26rem; max-width: 46rem;
max-height: 34rem; overflow-y: auto; padding: 0.6rem 1rem 0.9rem;
background: #fff; border: 1px solid #e5e9f0; border-radius: 0.9rem; box-shadow: 0 1.2rem 3rem rgba(15,23,42,.18);
}
.mfi-mega__top:hover > .mfi-mega__fly { display: block; }
.mfi-mega__lvl--root { columns: 2 17rem; column-gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.mfi-mega__sub { break-inside: avoid; list-style: none; margin: 0 0 0.15rem; padding: 0; }
.mfi-mega__sub > a {
display: block; padding: 0.32rem 0.4rem; font-family: 'Inter', sans-serif; font-size: 0.9rem;
color: #334155; text-decoration: none; border-radius: 0.35rem;
}
.mfi-mega__sub > a:hover { background: #F2F7FF; color: #0B1C3C; }
.mfi-mega__sub > .mfi-mega__lvl { list-style: none; margin: 0 0 0.35rem 0.65rem; padding: 0 0 0 0.6rem; border-left: 2px solid #eef2f7; columns: 1; }
.mfi-mega__sub > .mfi-mega__lvl .mfi-mega__sub > a { font-size: 0.84rem; color: #64748B; padding: 0.24rem 0.4rem; }
.mfi-mega__sub.mfi-mega__has > a { font-weight: 600; color: #0B1C3C; }
@media (max-width: 1200px){
.mfi-mega { position: static; }
.mfi-mega__list { width: 100%; }
.mfi-mega__fly { position: static; left: 0; max-width: 100%; box-shadow: none; border: 0; border-left: 2px solid #eef2f7; border-radius: 0; margin: 0 0 0.4rem 0.6rem; }
.mfi-mega__top:hover > .mfi-mega__fly { display: block; }
.mfi-mega__lvl--root { columns: 1; }
}
/* ===== MFI-HEROGRID-2026 — первый блок 2 колонки (как medservice) ===== */
.mfi-hero-sec .mfi-hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: stretch; }
.mfi-hero-grid > .mfi-hero { height: 100%; }
.mfi-hero-side { background:#fff; border:1px solid #e5e9f0; border-radius:1rem; padding:1.35rem 1.2rem; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.mfi-hero-side__tag { align-self:flex-start; background:#fdecec; color:#d1131a; font-weight:700; font-size:.8rem; padding:.3rem .7rem; border-radius:.5rem; margin-bottom:1rem; }
.mfi-hero-side__prod { display:block; text-decoration:none; color:inherit; }
.mfi-hero-side__img { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:#f4f7fb; border-radius:.7rem; overflow:hidden; margin-bottom:.9rem; }
.mfi-hero-side__img img { max-width:100%; max-height:100%; object-fit:contain; }
.mfi-hero-side__name { display:block; font-weight:600; font-size:1rem; line-height:1.3; color:#0B1C3C; margin-bottom:.7rem; }
.mfi-hero-side__price { margin-top:auto; display:flex; flex-direction:column; margin-bottom:.9rem; }
.mfi-hero-side__price span { color:#64748B; font-size:.85rem; }
.mfi-hero-side__price b { color:#0B1C3C; font-size:1.35rem; }
.mfi-hero-side__btn { display:block; text-align:center; background:#0B1C3C; color:#fff; text-decoration:none; padding:.7rem; border-radius:.6rem; font-weight:600; }
.mfi-hero-side__btn:hover { background:#13294f; }
@media (min-width:993px){ .mfi-hero-sec .mfi-hero-grid { grid-template-columns: minmax(0,1fr) 21rem; } }
/* ===== MFI-SUBMENU-2026 — подменю шапки вертикально, не вылезает за край ===== */
@media (min-width: 993px){
.mfi-nav .sub-menu { display: block; min-width: 18rem; max-width: 24rem; }
.mfi-nav .sub-menu li { width: 100%; }
.mfi-nav .sub-menu a { white-space: normal; line-height: 1.3; }
}
/* MFI-MEGA-2026-v2: full side-out flyout on every depth */
.mfi-mega__fly { overflow: visible; }
.mfi-mega__lvl--root { columns: 1 !important; column-gap: 0 !important; min-width: 22rem; }
.mfi-mega__sub { position: relative; }
.mfi-mega__sub.mfi-mega__has > a::after { content: '›'; margin-left: .35rem; color: #9aa6b8; }
.mfi-mega__fly--sub { display: none; position: absolute; top: 0; left: 100%; margin-left: .35rem; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.14); border: 1px solid #eef2f7; border-radius: 12px; padding: .55rem .65rem; min-width: 22rem; max-width: 26rem; z-index: 80; }
.mfi-mega__sub:hover > .mfi-mega__fly--sub { display: block; }
.mfi-mega__fly--sub > .mfi-mega__lvl { columns: 1; margin: 0; padding: 0; border: 0; }
.mfi-mega__fly--sub .mfi-mega__sub > a { padding: .32rem .5rem; font-size: .92rem; color: #0B1C3C; }
.mfi-mega__fly--sub .mfi-mega__sub > a:hover { background: #F2F7FF; }
@media (max-width:900px){
.mfi-mega__fly--sub { position: static; box-shadow: none; border: 0; padding: 0; margin: 0 0 .25rem .8rem; border-left: 2px solid #eef2f7; padding-left: .5rem; min-width: 0; max-width: none; }
.mfi-mega__sub:hover > .mfi-mega__fly--sub { display: block; }
}
/* MFI-MEGA-2026-v2-END */
/* MFI-PTABLE-2026: табличная выдача товаров */
.mfi-ptable-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e9f0; border-radius: 12px; background: #fff; }
.mfi-ptable { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.mfi-ptable--ls { min-width: 1180px; }
.mfi-ptable thead th { position: sticky; top: 0; background: #0B1C3C; color: #fff; font-weight: 600; text-align: left; padding: .7rem .6rem; font-size: .78rem; line-height: 1.2; white-space: nowrap; z-index: 2; }
.mfi-ptable tbody td { padding: .6rem .6rem; border-top: 1px solid #eef2f7; vertical-align: middle; }
.mfi-ptable tbody tr:hover { background: #F5F9FF; }
.mfi-ptable .mfi-pt-name { min-width: 220px; font-weight: 600; }
.mfi-ptable .mfi-pt-name a { color: #0B1C3C; text-decoration: none; }
.mfi-ptable .mfi-pt-name a:hover { color: #3D9823; text-decoration: underline; }
.mfi-ptable .mfi-pt-num { text-align: right; white-space: nowrap; }
.mfi-ptable .mfi-pt-dash { color: #b6c0cf; }
.mfi-ptable .price, .mfi-ptable ins, .mfi-ptable del { white-space: nowrap; }
.mfi-pt-buy { white-space: nowrap; }
.mfi-ord { display: inline-flex; gap: .3rem; align-items: center; }
.mfi-ord__q { width: 3.6rem; padding: .34rem .4rem; border: 1px solid #d5dce6; border-radius: 8px; font-size: .88rem; text-align: center; }
.mfi-ord__b { padding: .38rem .7rem; background: #3D9823; color: #fff; border: 0; border-radius: 8px; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mfi-ord__b:hover { background: #33801d; }
.mfi-ord__req { display: inline-block; padding: .38rem .7rem; background: #0B1C3C; color: #fff; border-radius: 8px; font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mfi-ord__req:hover { background: #14294f; }
@media (max-width: 640px) {
.mfi-ptable-wrap { border: 0; background: transparent; overflow: visible; }
.mfi-ptable, .mfi-ptable--ls { min-width: 0; display: block; }
.mfi-ptable thead { display: none; }
.mfi-ptable tbody, .mfi-ptable tr { display: block; }
.mfi-ptable tr { border: 1px solid #e5e9f0; border-radius: 12px; background: #fff; margin: 0 0 .8rem; padding: .5rem .7rem; }
.mfi-ptable td { display: flex; justify-content: space-between; gap: 1rem; border: 0; border-bottom: 1px dashed #eef2f7; padding: .42rem 0; text-align: right; }
.mfi-ptable td:last-child { border-bottom: 0; }
.mfi-ptable td::before { content: attr(data-l); font-weight: 600; color: #64748B; text-align: left; font-size: .78rem; }
.mfi-ptable .mfi-pt-name { font-size: 1rem; }
.mfi-pt-buy { justify-content: flex-end; }
}
/* MFI-PTABLE-2026-END */
/* MFI-PTABLE-2026-fix: контейнер не обрезается, узкие таблицы не тянутся */
.mfi-ptable-wrap { max-width: 100%; }
.mfi-ptable { min-width: 0; width: 100%; }
.mfi-ptable--wide { min-width: 900px; }
.mfi-ptable--ls { min-width: 0; }
.mfi-shop__main { min-width: 0; overflow: hidden; }
/* MFI-PTABLE-2026-fix-END */
/* MFI-NOSIDE-2026 */
.mfi-shop--nosd { display: block; }
.mfi-shop--nosd .mfi-shop__main { width: 100%; max-width: 100%; }
/* MFI-NOSIDE-2026-END */
/* ==========================================================================
MFI-FIX-2026-08-19 (v3) — первый блок + корзина + каскад меню (JS fixed-panels)
========================================================================== */
/* --- 1. Первый блок: ровный ряд, каталог крупнее, корзина уже --- */
.mfi-quick { display: flex; gap: 1.5rem; align-items: stretch; justify-content: flex-start; }
.mfi-qcard { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; }
.mfi-qcard--links { width: 24.5rem; }
.mfi-qcard--cat { width: 27rem; padding: 1.75rem 1.9375rem; }
.mfi-qcard--find { flex: 1 1 auto; width: auto; padding: 1.75rem 1.25rem; }
.mfi-qcard--cart { width: 13rem; padding: 1.5rem 1.375rem; }
.mfi-qcard--cat .mfi-qnote, .mfi-qcard--find .mfi-qnote { margin-top: 0.85rem; min-height: 2.9rem; }
.mfi-qcard--cart .mfi-cart__head { margin-bottom: 0.55rem; }
.mfi-cart__row { margin-top: 0.7rem; font-size: 0.95rem; }
.mfi-cart__row + .mfi-cart__row { margin-top: 0.45rem; }
.mfi-cart__row b { white-space: nowrap; }
@media (max-width: 1200px){
.mfi-quick { flex-wrap: wrap; }
.mfi-qcard--links, .mfi-qcard--cat, .mfi-qcard--find, .mfi-qcard--cart {
flex: 1 1 calc(50% - 0.75rem); width: auto;
}
}
/* --- 2. Каскад меню: список скроллится, панели показывает JS через position:fixed --- */
/* топ-список каталога скроллится, НЕ вываливается за пределы блока */
.mfi-mega__list { max-height: 33rem; overflow-y: auto; overflow-x: hidden; }
/* показ панелей — ТОЛЬКО по классу .mfi-open (ставит JS), гасим CSS :hover */
.mfi-mega__fly:not(.mfi-open), .mfi-mega__fly--sub:not(.mfi-open) { display: none !important; }
.mfi-mega__fly.mfi-open, .mfi-mega__fly--sub.mfi-open { display: block !important; z-index: 9999; }
/* открытая панель: длинный уровень скроллится сам, вложения (fixed) не обрежутся */
.mfi-mega__fly.mfi-open, .mfi-mega__fly--sub.mfi-open { max-height: 85vh; overflow-y: auto; overflow-x: visible; }
.mfi-mega__lvl--root { columns: 1 !important; column-gap: 0 !important; min-width: 21rem; }
.mfi-mega__sub { position: relative; }
.mfi-mega__sub > a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mfi-mega__sub.mfi-mega__has > a::after,
.mfi-mega__top.mfi-mega__has > a::after {
content: '\203A'; color: #9aa6b8; font-size: 1.05rem; line-height: 1; flex: none; margin-left: 0.4rem;
}
@media (max-width: 1200px){
/* на узких: тап раскрывает вложение вниз (JS ставит .mfi-open, позиционирование static) */
.mfi-mega__list { max-height: none; overflow: visible; }
.mfi-mega__fly.mfi-open, .mfi-mega__fly--sub.mfi-open {
position: static !important; left: auto !important; top: auto !important;
max-height: none; box-shadow: none; border: 0;
border-left: 2px solid #eef2f7; border-radius: 0; padding: 0 0 0 0.6rem;
margin: 0 0 0.3rem 0.8rem; min-width: 0; max-width: none;
}
}
/* MFI-FIX-2026-08-19-END */
/* ===== MFI-CATLEFT-2026-09-01: каталог раскрывается СЛЕВА (под левой колонкой), как на b2b.medservice.kz ===== */
.mfi-quick { position: relative; }
.mfi-megawrap { position: static; }
.mfi-mega { left: 0; top: calc(100% + 0.4rem); }
.mfi-mega__list { box-shadow: 0 1.4rem 3.4rem rgba(15,23,42,.20); }
@media (max-width: 1200px) {
.mfi-quick { position: static; }
.mfi-mega { position: static; top: auto; }
}
/* MFI-CATLEFT-2026-09-01-END */
/* ===== MFI-SMOOTH-2026-09-01: аккордеон — раскрытие СВЕРХУ ВНИЗ, сворачивание обратно ВВЕРХ ===== */
/* панель всегда в DOM (не display:none), высотой управляем через max-height -> анимация в обе стороны */
.mfi-mega {
display: block !important;
overflow: hidden;
max-height: 0;
opacity: 0;
visibility: hidden;
transition: max-height .38s cubic-bezier(.22,.61,.36,1), opacity .22s ease, visibility 0s linear .38s;
animation: none !important;
}
.mfi-mega--open .mfi-mega {
max-height: 34rem; /* ~= макс. высота списка (33rem + рамка); список сам скроллится */
opacity: 1;
visibility: visible;
transition: max-height .42s cubic-bezier(.22,.61,.36,1), opacity .26s ease .04s, visibility 0s;
}
.mfi-mega__list { overflow-y: auto; } /* внутренний скролл после раскрытия сохраняется */
/* флайауты подкатегорий позиционируются JS как position:fixed.
ВАЖНО: НЕ ставить transform на открытый флайаут — иначе он становится containing block
для вложенного position:fixed и 3-й уровень падает мимо. Только opacity-fade. */
@keyframes mfiFlyIn { from { opacity: 0; } to { opacity: 1; } }
.mfi-mega__fly.mfi-open,
.mfi-mega__fly--sub.mfi-open { animation: mfiFlyIn .16s ease-out both; }
.mfi-mega__top > a,
.mfi-mega__sub > a { transition: background-color .15s ease, color .15s ease; }
@media (prefers-reduced-motion: reduce) {
.mfi-mega, .mfi-mega--open .mfi-mega { transition: none; }
.mfi-mega__fly.mfi-open, .mfi-mega__fly--sub.mfi-open { animation: none; }
}
/* MFI-SMOOTH-2026-09-01-END */
/* MFI-2026-09 полировка кабинета и форм */
.woocommerce form .password-input { position: relative; display: flex; align-items: center; width: 100%; }
.woocommerce form .password-input input { width: 100%; padding-right: 3.25rem; }
.woocommerce form .show-password-input {
position: absolute; right: 1rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -0.75rem;
border: 0; background: transparent; padding: 0; cursor: pointer; opacity: .55;
}
.woocommerce form .show-password-input:hover, .woocommerce form .show-password-input.display-password { opacity: 1; }
.woocommerce form .show-password-input::after {
content: ''; display: block; width: 100%; height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1C3C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mfi-cab mark, .woocommerce-account mark { background: none; color: var(--navy-txt); font-weight: 600; }
.woocommerce-account fieldset { border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.25rem 1.25rem 0.25rem; margin: 1.5rem 0; }
.woocommerce-account fieldset legend { padding: 0 0.5rem; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--navy-txt); }
.woocommerce-account .woocommerce-EditAccountForm em, .woocommerce-account .woocommerce-EditAccountForm .description { font-style: normal; font-size: 0.9375rem; color: #94A3B8; }
@media (max-width: 767px) {
.mfi-sortbar { height: auto; padding: 0.875rem 1rem; flex-wrap: wrap; gap: 0.5rem 1rem; }
.mfi-sortbar > span { white-space: nowrap; }
}
/* MFI-2026-09-END */
/* MFI-2026-09-b: иконки контактов в шапке — зелёные (контраст на тёмном фоне), слайдер не режет рамку и тень карточки при наведении */
.mfi-hcontacts a, .mfi-hcontacts svg { color: #9FE07A; }
.mfi-hcontacts a:hover svg { color: #C4F0AA; }
.mfi-slider__track { padding: 0.625rem 0.375rem 2.5rem; margin: -0.625rem -0.375rem -2.5rem; }
/* MFI-2026-09-b-END */