/* ==========================================================
   compat.css — adapter for your current HTML markup
   Requires: Bootstrap 5 + max-style.css
   Load AFTER max-style.css
   ========================================================== */

/* 1) Перебиваем твои "light messenger" переменные на Max palette */
:root{
  /* твои переменные (используются в разметке/старых стилях) */
  --bg: #0b0f1a;
  --card: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.16);
  --hover: rgba(110,231,255,.10);

  --brand: #6ee7ff;
  --brand2: rgba(110,231,255,.18);

  --radius: 18px;

  /* max-style переменные уже есть, но пусть будут совместимы */
  color-scheme: dark;
}

body{
  background:
    radial-gradient(1200px 600px at 12% 10%, rgba(110,231,255,.16), transparent 60%),
    radial-gradient(900px 500px at 88% 22%, rgba(167,139,250,.14), transparent 55%),
    radial-gradient(900px 600px at 48% 92%, rgba(52,211,153,.10), transparent 60%),
    linear-gradient(180deg, #070a12 0%, #0b0f1a 55%, #070a12 100%) !important;
  color: var(--text) !important;
}

/* ссылки */
a{ color: inherit; }
a:hover{ color: var(--text); }

/* контейнер как в max-style */
.container{ max-width: 1200px; }

/* 2) NAVBAR (твои .nav-main + .chip + .btn-soft) */
.nav-main{
  background: rgba(10,14,24,.38) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px);
}
.navbar-brand{ color: var(--text) !important; }

.chip{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(110,231,255,.25) !important;
  background: rgba(255,255,255,.08) !important;
}

/* soft-кнопки (меню/заказать звонок) */
.btn-soft{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  font-weight: 750;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.btn-soft:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(110,231,255,.22) !important;
  transform: translateY(-1px);
}

/* брендовая кнопка (твой .btn-brand) */
.btn-brand{
  border: 0 !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  letter-spacing: .15px;
  color: #071018 !important;
  background: linear-gradient(135deg, rgba(110,231,255,.96), rgba(167,139,250,.96)) !important;
  box-shadow: 0 16px 36px rgba(110,231,255,.14);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-brand:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(110,231,255,.18);
  filter: saturate(1.05);
}

/* 3) HERO (твой .hero) */
.hero{
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
}

/* бейджи (твой .badge-soft) */
.badge-soft{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
}

/* 4) CARDS (твои .cardx + hover) */
.cardx{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px);
  color: var(--text);
}
.cardx-hover:hover{
  transform: translateY(-2px);
  border-color: rgba(110,231,255,.22) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.45) !important;
}

/* 5) PRODUCT IMAGE (твой .product-img) */
.product-img{
  height: 190px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
}

/* "Нет фото" плейсхолдер */
.product-img.d-flex{
  color: rgba(255,255,255,.65) !important;
}

/* 6) FORMS (твой input/select уже Bootstrap, доводим до max-style) */
.form-control,
.form-select{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(12,16,28,.58) !important;
  color: var(--text) !important;
}
.form-control::placeholder{ color: rgba(255,255,255,.45) !important; }

.form-control:focus,
.form-select:focus{
  border-color: rgba(110,231,255,.30) !important;
  box-shadow: 0 0 0 4px rgba(110,231,255,.18) !important;
}

/* 7) OFFCANVAS (fullscreen menu) */
.offcanvas-max{
  width: 100% !important;
  background: rgba(10,14,24,.92) !important;
  color: var(--text) !important;
  border-left: 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px);
}
.offcanvas .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* ссылки внутри меню */
.menu-link{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--text) !important;
  border-radius: 18px !important;
}
.menu-link:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(110,231,255,.22) !important;
}

/* 8) FOOTER (у тебя <footer> без .footer-area — приводим по месту) */
footer{
  background: rgba(8,10,18,.60) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.78) !important;
}
footer .footer-card{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 24px !important;
}
footer a{ color: rgba(255,255,255,.76) !important; }
footer a:hover{ color: #fff !important; text-shadow: 0 0 18px rgba(110,231,255,.22); }

/* 9) мелкие правки читабельности */
.small, .text-muted{ color: rgba(255,255,255,.62) !important; }
hr, .border-top{ border-color: rgba(255,255,255,.12) !important; }
/* ====== HEADER LIKE SCREENSHOT ====== */
.mf-topbar{
  background:#111417;
  color:rgba(255,255,255,.85);
  font-weight:600;
  font-size:.95rem;
}
.mf-topbar a{color:rgba(255,255,255,.85);text-decoration:none}
.mf-topbar a:hover{color:#fff;text-decoration:underline}
.mf-topbar .mf-topitem{display:inline-flex;align-items:center;gap:.5rem}
.mf-topbar .mf-ico{color:#3aa0ff}

.mf-header{
  background: linear-gradient(180deg,#1b1f24,#14181c);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mf-brand{
  display:flex;align-items:center;gap:.75rem;
  text-decoration:none;color:#fff;
  font-weight:800;
}
.mf-brand:hover{color:#fff}
.mf-brand-logo{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.mf-brand-title{font-size:1.25rem;letter-spacing:.2px}
.mf-nav{
  display:flex;align-items:center;justify-content:center;
  gap:1.7rem;
}
.mf-nav a{
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-weight:700;
  padding:.75rem .25rem;
  position:relative;
}
.mf-nav a:hover{color:#fff}
.mf-nav a::after{
  content:"";
  position:absolute;left:50%;bottom:.35rem;
  width:0;height:2px;background:#3aa0ff;
  transition:.18s ease;transform:translateX(-50%);
  opacity:.9;border-radius:3px;
}
.mf-nav a:hover::after{width:70%}

.mf-actions{
  display:flex;align-items:center;justify-content:flex-end;
  gap:.6rem;
}
.mf-iconbtn{
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  position:relative;
}
.mf-iconbtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color:#fff;
}
.mf-badge-red{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px;height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ff2d2d;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #14181c;
}

.mf-dd{
  position:relative;
}
.mf-dd > a{display:inline-flex;align-items:center;gap:.45rem}
.mf-dd-menu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background:#151a1f;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:.5rem;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  display:none;
  z-index:1050;
}
.mf-dd:hover .mf-dd-menu{display:block}
.mf-dd-menu a{
  display:flex;
  padding:.65rem .75rem;
  border-radius:12px;
  color:rgba(255,255,255,.9);
}
.mf-dd-menu a:hover{background:rgba(255,255,255,.06);color:#fff}

/* mobile */
.mf-mobilebar{
  background: linear-gradient(180deg,#1b1f24,#14181c);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mf-mobilebar .btn-soft{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.mf-mobilebar .btn-soft:hover{background: rgba(255,255,255,.10)}

/* ====== HEADER BASE ====== */
.mf-header { background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); }
.mf-navbar { gap: 12px; }

/* ВАЖНО: убираем любые отрицательные маргины и фиксируем бренд */
.mf-brand { display: inline-flex; align-items: center; text-decoration: none; margin: 0; padding: 0; }

/* “рамка” под логотип, чтобы он не распирал контейнер */
.mf-logo-wrap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;         /* можно менять */
  height: 52px;         /* можно менять */
  overflow: hidden;     /* критично: не вылазит */
}
.mf-logo-wrap img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* мобильный лого чуть меньше */
.mf-logo-wrap--sm{ width: 150px; height: 44px; }

/* ====== NAV ====== */
.mf-nav .nav-link{ padding: .4rem .55rem; border-radius: 10px; }
.mf-nav .nav-link:hover{ background: rgba(0,0,0,.04); }

/* ====== ACTIONS ====== */
.mf-actions{ display:flex; align-items:center; gap:10px; }
.mf-iconbtn{
  border: 0; background: transparent;
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 10px; border-radius: 12px;
}
.mf-iconbtn:hover{ background: rgba(0,0,0,.05); }

.mf-badge-red{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: #e11d48; color: #fff;
  font-size: 12px; font-weight: 700;
}

/* ====== MOBILE BOTTOM BAR ====== */
.mf-bottom-bar{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid rgba(0,0,0,.08);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  z-index: 1030;
}
.mf-bottom-btn{
  padding: 10px 8px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:0; background: transparent; text-decoration:none; color: inherit;
}
.mf-bottom-ico{ font-size: 1.15rem; line-height: 1; }

.mf-bottom-badge{
  position: absolute;
  transform: translate(14px,-32px);
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e11d48; color: #fff;
  font-size: 11px; font-weight: 700;
  display:inline-flex; align-items:center; justify-content:center;
}
    :root{
      --muted:#9aa6b2;
      --bg0:#0b0f14;
      --bg1:#0f141b;
      --bg2:#121923;
      --card:#111827;
      --card2:#0f172a;
      --line:rgba(255,255,255,.10);
      --line2:rgba(255,255,255,.08);
      --text:rgba(255,255,255,.92);
      --text2:rgba(255,255,255,.78);
      --brand:#2b6cb0;
      --brand2:#1e4e8c;
      --danger:#ff2d2d;
    }

    body{background:radial-gradient(1000px 700px at 20% 0%, rgba(43,108,176,.14), transparent 60%),
                    radial-gradient(900px 650px at 90% 10%, rgba(0,190,255,.10), transparent 60%),
                    var(--bg0);
         color:var(--text);}

    .muted{color:var(--muted)}
    a{color:#c7d2fe;text-decoration:none}
    a:hover{text-decoration:underline;color:#e0e7ff}

    /* ==== CARDS / UI ==== */
    .cardx{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
      border: 1px solid var(--line2);
      border-radius: 22px;
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
    }
    .cardx-hover{transition:.15s ease}
    .cardx-hover:hover{transform:translateY(-2px);box-shadow:0 24px 80px rgba(0,0,0,.45)}
    .product-img{
      width:100%;height:220px;object-fit:contain;border-radius:18px;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08)
    }

    .mf-product-link{display:block;text-decoration:none;color:inherit}
    .mf-product-link:hover .fw-semibold{text-decoration:underline}
    .badge-soft{
      display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;
      background: rgba(59,130,246,.14);
      color: rgba(191,219,254,.95);
      font-weight:700;border:1px solid rgba(59,130,246,.20);
    }

    .mf-partners-wrap{
      overflow:hidden;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
    }
    .mf-partners-track{
      display:flex;gap:14px;
      padding:14px;
      will-change: transform;
    }
    .mf-partner{
      flex:0 0 auto;
      min-width: 220px;
      display:flex;align-items:center;gap:12px;
      padding:14px 14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(10,16,24,.55);
    }
    .mf-partner-logo{
      width:44px;height:44px;border-radius:16px;
      display:flex;align-items:center;justify-content:center;
      font-weight:900;
      background:linear-gradient(180deg, rgba(58,160,255,.9), rgba(34,211,238,.55));
      color:#04101b;
      box-shadow:0 16px 40px rgba(58,160,255,.14);
    }

    .mf-modal .modal-content{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(10,16,24,.98);
      box-shadow:0 24px 70px rgba(0,0,0,.55);
    }
    .mf-modal .modal-header{background:transparent}

    .btn-brand{background:var(--brand);color:#fff;border:1px solid rgba(255,255,255,.10)}
    .btn-brand:hover{background:var(--brand2);color:#fff}
    .btn-outline-secondary{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}
    .btn-outline-secondary:hover{background:rgba(255,255,255,.08);color:#fff}

    .btn-soft{
      display:inline-flex;gap:.5rem;align-items:center;padding:.55rem .85rem;border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      text-decoration:none;color:inherit
    }
    .btn-soft:hover{background:rgba(255,255,255,.10);text-decoration:none}

    .chip{
      display:inline-flex;gap:.45rem;align-items:center;padding:.45rem .75rem;border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      text-decoration:none;color:inherit
    }
    .chip:hover{background:rgba(255,255,255,.10);text-decoration:none}

    /* ==== HERO ==== */
    .hero{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 26px;
    }

    /* ==== HEADER LIKE SCREENSHOT ==== */
    .mf-topbar{
      background: linear-gradient(180deg, #111417, #0d1116);
      border-bottom:1px solid rgba(255,255,255,.06);
      color:rgba(255,255,255,.86);
      font-weight:700;
      font-size:.95rem;
    }
    .mf-topbar a{color:rgba(255,255,255,.86);text-decoration:none}
    .mf-topbar a:hover{color:#fff;text-decoration:underline}
    .mf-topitem{display:inline-flex;align-items:center;gap:.5rem}
    .mf-topico{color:#3aa0ff}

    .mf-header{
      background: linear-gradient(180deg,#1b1f24,#14181c);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .mf-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
}

.mf-brand:hover {
  color: #fff;
  text-decoration: none;
}

.mf-brand-logo {
  height: 44px; /* Keep the desired height for the navbar */
  display: flex;
  align-items: center;
  justify-content: center;
}

.mf-brand-logo img {
  height: 100%; /* Make the image fill the height */
  width: auto; /* Keep the width auto for aspect ratio */
  object-fit: cover; /* Ensure the image covers the designated area */
}

.mf-brand-title {
  font-size: 1.25rem;
  letter-spacing: .2px;
}

/* Ensure your navbar has a set height for consistency */
.navbar {
  display: flex;
  align-items: center; /* Vertically center items */
}

    .mf-nav{
      display:flex;align-items:center;justify-content:center;
      gap:1.6rem;
    }
    .mf-nav a,
    .mf-nav .dropdown-toggle{
      color:rgba(255,255,255,.90);
      text-decoration:none;
      font-weight:800;
      padding:.8rem .2rem;
      position:relative;
    }
    .mf-nav a:hover{color:#fff}
    .mf-nav a::after{
      content:"";
      position:absolute;left:50%;bottom:.35rem;
      width:0;height:2px;background:#3aa0ff;
      transition:.18s ease;transform:translateX(-50%);
      opacity:.9;border-radius:3px;
    }
    .mf-nav a:hover::after{width:70%}
.mf-nav .dropdown-toggle{cursor:pointer}
    .mf-nav .dropdown-toggle::after{margin-left:.35rem;vertical-align:.15rem}
    .mf-dd{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(10,16,24,.96);
      box-shadow:0 18px 55px rgba(0,0,0,.35);
      padding:.55rem;
      min-width: 240px;
    }
    .mf-dd .dropdown-item{
      border-radius:14px;
      font-weight:800;
      color:rgba(255,255,255,.92);
      padding:.55rem .8rem;
    }
    .mf-dd .dropdown-item:hover{background:rgba(58,160,255,.14)}
    .mf-dd .dropdown-divider{border-color:rgba(255,255,255,.12)}

    .mf-actions{
      display:flex;align-items:center;justify-content:flex-end;
      gap:.6rem;
    }
    .mf-iconbtn{
      width:42px;height:42px;border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color:#fff;
      display:inline-flex;align-items:center;justify-content:center;
      text-decoration:none;
      position:relative;
    }
    .mf-iconbtn:hover{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.16);
      color:#fff;
      text-decoration:none;
    }
    .mf-badge-red{
      position:absolute;
      top:-6px; right:-6px;
      min-width:18px;height:18px;
      padding:0 5px;
      border-radius:999px;
      background:var(--danger);
      color:#fff;
      font-size:.72rem;
      font-weight:900;
      display:flex;align-items:center;justify-content:center;
      border:2px solid #14181c;
    }

    /* Mobile header */
    .mf-mobilebar{
      background: linear-gradient(180deg,#1b1f24,#14181c);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    /* Offcanvas */
    .offcanvas-max{width:min(520px, 94vw)}
    .offcanvas, .offcanvas-header, .offcanvas-body{
      background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.98));
      color: var(--text);
    }
    .offcanvas .text-muted{color:rgba(255,255,255,.70)!important}
    .menu-link{
      display:flex;justify-content:space-between;align-items:center;
      padding:.9rem 1rem;border-radius:16px;text-decoration:none;color:inherit;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05)
    }
    .menu-link:hover{background:rgba(255,255,255,.08);text-decoration:none}

    /* Inputs */
    .form-control,.form-select{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      color:rgba(255,255,255,.92);
    }
    .form-control::placeholder{color:rgba(255,255,255,.55)}
    .form-control:focus,.form-select:focus{
      background:rgba(255,255,255,.08);
      border-color:rgba(59,130,246,.35);
      box-shadow:0 0 0 .25rem rgba(59,130,246,.15);
      color:#fff;
    }

    /* Footer */
    footer{background:linear-gradient(180deg,#0b0f14,#070a0e);color:#e5e7eb}
    footer a{color:#c7d2fe;text-decoration:none}
    footer a:hover{text-decoration:underline}
    .footer-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px}

    /* Cart */
    .qty-input{width:72px;text-align:center}

    /* Mobile bottom bar (optional but nice) */
    .mf-bottom-bar{
      position: fixed;left: 0; right: 0; bottom: 0; z-index: 1030;
      background: rgba(17,24,39,.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid rgba(255,255,255,.10);
      padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
    }
    .mf-bottom-btn{
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      border-radius: 16px;
      padding: 10px 12px;
      text-decoration:none;color: rgba(255,255,255,.92);
      display:flex;flex-direction: column;align-items:center;justify-content:center;
      gap: 4px;font-size: .82rem;position: relative;
    }
    .mf-bottom-btn:hover{background: rgba(255,255,255,.10);text-decoration:none;color:#fff}
    .mf-bottom-badge{
      position:absolute; right: 8px;
      min-width: 20px; height: 20px; padding: 0 6px;
      border-radius: 999px; background: var(--danger); color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-size:.72rem; font-weight:900;
      border:2px solid rgba(17,24,39,.92);
    }
    @media (max-width: 991.98px){
      body{ padding-bottom: 92px; }
    }
/* === Offcanvas: единый стиль (меню + корзина) === */
.offcanvas-max .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.offcanvas-max .offcanvas-title,
.offcanvas-max .fw-bold{
  letter-spacing: .2px;
}
.offcanvas-max .offcanvas-body{
  background: transparent;
}

/* кнопка закрытия (твои btn-soft уже ок, просто чуть выровняем) */
.offcanvas-max .btn-soft{
  border: 1px solid rgba(255,255,255,.12);
}

/* ссылки в меню — чтобы не выглядели "системно" */
.menu-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.9rem 1rem;
  border-radius:18px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.menu-link:hover{
  background: rgba(255,255,255,.09);
}

/* корзина: карточки items, инпут qty */
#cartItems .cardx{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.qty-input{
  width: 64px;
  text-align:center;
  border-radius:14px;
}

/* ===== OFFCANVAS BASE ===== */
.offcanvas {
  background: rgba(20, 22, 28, 0.96);
  backdrop-filter: blur(10px);
  color: #fff;
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.offcanvas-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

/* Заголовки */
.offcanvas .fw-bold {
  color: #fff;
}
.btn-soft {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 14px;
  padding: .55rem .9rem;
}

.btn-soft:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
}


.mf-topico svg,
.mf-iconbtn svg,
.mf-bottom-ico svg {
  vertical-align: middle;
}

/* ====== FEATHER: fixed width по умолчанию (аналог fa-fw) ====== */
svg.feather {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.25em;
  height: 1.25em;

  vertical-align: middle;
  flex-shrink: 0;
}

/* ===== Payment methods block ===== */

.payment-card{
  border-radius: 22px;
  background: rgba(20,20,22,.88);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 12px 34px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.05) inset;
}

/* Text */
.payment-text{
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

/* Logos */
.payment-logos{
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment-logos img{
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: .95;
}

/* Mobile */
@media (max-width: 576px){
  .payment-logos img{
    max-width: 100%;
  }
}
.about-card{
  border-radius: 22px;
  background: rgba(20,20,22,.88);
  border: 1px solid rgba(255,255,255,.08);
}

.about-brand img{ max-width:180px; }
.about-brand__subtitle{ color:rgba(255,255,255,.75); }

.about-text{ color:rgba(255,255,255,.88); line-height:1.8; }

.badge-soft{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
}

.badge-soft--accent{
  background:rgba(10,132,255,.18);
  color:#cfe3ff;
}

.partners-marquee{ overflow:hidden; }
.partners-track{
  display:flex;
  gap:24px;
  animation: partners-scroll var(--partners-duration,24s) linear infinite;
}
.partner-box{
  width:160px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.partner-box img{
  max-width:120px;
  max-height:48px;
  object-fit:contain;
}
@keyframes partners-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--partners-shift)))}
}
/* iOS-style feature cards — DARK MODE */
.ios-feature{
  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 22px;
  background: rgba(20,20,22,.88);            /* iOS dark card */
  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 12px 34px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.05) inset;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

/* hover — мягкий iOS lift */
.ios-feature:hover{
  transform: translateY(-4px);
  box-shadow:
    0 20px 46px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* Title */
.ios-feature__title{
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* Icon container */
.ios-feature__icon{
  width: 76px;
  height: 76px;
  margin: 16px 0 14px;

  border-radius: 999px;                      /* perfect circle */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.04)
  );

  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 8px 18px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.15) inset;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG icon — iOS SF-like */
.ios-feature__icon svg{
  width: 40px;
  height: 40px;

  fill: none;
  stroke: #0a84ff;                           /* iOS System Blue */
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Description */
.ios-feature__desc{
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255,255,255,.88);
}

/* Optional: reduce text contrast on very small screens */
@media (max-width: 576px){
  .ios-feature__desc{
    font-size: .9rem;
  }
}
/* iOS-style feature cards */
.ios-feature{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 22px;                 /* iOS big rounding */
  background: rgba(255,255,255,.72);   /* frosted */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.6) inset;
  backdrop-filter: blur(10px);         /* iOS blur (если поддерживается) */
}

.ios-feature__title{
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;             /* “SF-like” */
}

.ios-feature__icon{
  width: 76px;
  height: 76px;
  margin: 16px 0 14px;
  border-radius: 999px;                /* круг */
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 8px 18px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.9) inset;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-feature__icon svg{
  width: 40px;
  height: 40px;
  fill: none;
  stroke: #0a84ff;                     /* iOS system blue */
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ios-feature__desc{
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255,255,255,.88);   /* хорошо читается */
}
/* ====== OFFCANVAS SKIN (Menu + Cart) ====== */
.offcanvas-max{
  --oc-bg: rgba(16,18,24,.92);
  --oc-border: rgba(255,255,255,.10);
  --oc-muted: rgba(255,255,255,.65);
  --oc-text: rgba(255,255,255,.92);
  --oc-radius: 24px;
  --oc-shadow: 0 18px 60px rgba(0,0,0,.45);

  background: var(--oc-bg);
  color: var(--oc-text);
  border-left: 1px solid var(--oc-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--oc-shadow);
}

.offcanvas-max .offcanvas-header{
  border-bottom: 1px solid var(--oc-border);
  padding: 18px 18px;
}

.offcanvas-max .offcanvas-title,
.offcanvas-max #menuMaxLabel,
.offcanvas-max #cartLabel{
  color: var(--oc-text);
}

.offcanvas-max .text-muted,
.offcanvas-max .muted,
.offcanvas-max .small.muted{
  color: var(--oc-muted) !important;
}

.offcanvas-max .offcanvas-body{
  padding: 18px 18px 22px;
}

/* Close button unified */
.offcanvas-max .btn-soft{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--oc-border);
  background: rgba(255,255,255,.06);
  color: var(--oc-text);
}
.offcanvas-max .btn-soft:hover{
  background: rgba(255,255,255,.10);
}

/* Cards inside offcanvas */
.offcanvas-max .cardx,
.offcanvas-max .footer-card{
  border-radius: 20px;
  border: 1px solid var(--oc-border);
  background: rgba(255,255,255,.06);
}

/* Links inside menu */
.offcanvas-max .menu-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--oc-border);
  background: rgba(255,255,255,.05);
  color: var(--oc-text);
  text-decoration:none;
}
.offcanvas-max .menu-link:hover{
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}
.offcanvas-max .menu-link span:last-child{
  color: rgba(255,255,255,.55);
}

/* Inputs in offcanvas */
.offcanvas-max .form-control{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--oc-text);
}
.offcanvas-max .form-control::placeholder{
  color: rgba(255,255,255,.45);
}
.offcanvas-max .form-control:focus{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.06);
}

/* Buttons in offcanvas (make less “bootstrapy”) */
.offcanvas-max .btn{
  border-radius: 16px;
}
.offcanvas-max .btn-outline-secondary{
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
}
.offcanvas-max .btn-outline-secondary:hover{
  background: rgba(255,255,255,.10);
}
.offcanvas-max .btn-outline-danger{
  border-color: rgba(255,80,80,.35);
  color: rgba(255,200,200,.95);
}
.offcanvas-max .btn-outline-danger:hover{
  background: rgba(255,80,80,.12);
}

/* Cart items spacing/typography */
.offcanvas-max #cartItems .cardx{
  padding: 10px !important;
}
.offcanvas-max #cartItems .qty-input{
  max-width: 64px;
  text-align:center;
}

/* ====== DROPDOWN BASE ====== */
.mf-dropdown {
  position: relative;
}

.mf-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 240px;

  background: #111;
  border-radius: 14px;
  padding: 10px 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s;

  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 1000;
}

/* SHOW ON HOVER */
.mf-dropdown:hover .mf-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* LINKS */
.mf-dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #fff;
  font-size: .95rem;
  text-decoration: none;
  transition: background .15s ease;
}

.mf-dropdown-menu a:hover {
  background: rgba(255,255,255,.08);
}

/* DIVIDER */
.mf-dd-divider {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 6px 0;
}

/* NAV LINKS */
.mf-nav .nav-link {
  padding: 8px 14px;
  border-radius: 10px;
  transition: background .15s ease;
}

.mf-nav .nav-link:hover {
  background: rgba(0,0,0,.05);
}
/* FIX: horizontal desktop nav */
@media (min-width: 992px) {
  .mf-navbar .navbar-nav {
    flex-direction: row;
  }
}

/* ====== DROPDOWN: убрать любые полоски при hover ====== */
.mf-dropdown-menu a {
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.mf-dropdown-menu a:hover,
.mf-dropdown-menu a:focus,
.mf-dropdown-menu a:active {
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none;
}
.mf-dropdown-menu a::before,
.mf-dropdown-menu a::after {
  display: none !important;
  content: none !important;
}
/* ====== OFFCANVAS CLOSE BUTTON ====== */
.offcanvas-header {
  position: relative;
}

.offcanvas-close {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  line-height: 1;

  border-radius: 50%;
}

/* ====== MOBILE MENU CATALOG ====== */
.menu-accordion .menu-link {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
}

.menu-arrow {
  transition: transform .2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-arrow {
  transform: rotate(90deg);
}

.menu-sub {
  padding-left: 14px;
  display: grid;
  gap: 6px;
  margin: 6px 0 10px;
}

.menu-sub a {
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  font-size: .95rem;
  background: rgba(0,0,0,.04);
}

.menu-sub a:hover {
  background: rgba(0,0,0,.08);
}
/* =========================
   HERO IMAGE
   ========================= */

.hero-image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: visible;
}

/* PNG */
.hero-image {
  max-height: 360px;
  width: auto;
  display: block;

  filter: drop-shadow(0 30px 50px rgba(0,0,0,.45));
}

/* мягкий блик за врачом */
.hero-image-wrap::before {
  content: "";
  position: absolute;
  inset: -10% -8% -8% -8%;
  filter: blur(42px);
  background: radial-gradient(
    circle at 50% 40%,
    rgba(43,140,255,.35),
    rgba(43,140,255,.15),
    transparent 65%
  );
  z-index: -1;
}

/* =========================
   MOBILE: hide image
   ========================= */

/* =========================
   FLOAT PREP
   ========================= */

.hero-image-wrap {
  position: relative;
  overflow: visible;
}

.hero-image {
  will-change: transform;
  transform: translateZ(0);
}

.hero-image-wrap::before {
  will-change: transform;
  transform: translateZ(0);
}

/* =========================
   FLOAT EFFECT
   ========================= */

.hero-image-wrap::before {
  transform:
    translate(
      var(--glow-x, 0),
      var(--glow-y, 0)
    );
}

.cat-carousel-wrap{
  overflow: hidden;

  /* ИМИТАЦИЯ .row */
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}


/* трек */
.cat-carousel{
  display: flex;
  transition: transform .45s ease;
}

/* карточка = bootstrap колонка */
.cat-slide{
  flex: 0 0 calc(100% / 3);
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-right: calc(var(--bs-gutter-x) * .5);
}
@media (max-width: 991.98px){
  .cat-slide{
    flex-basis: 50%;
  }
}

@media (max-width: 575.98px){
  .cat-slide{
    flex-basis: 100%;
  }
}
/* ===== Carousel layers ===== */

.cat-carousel-clip{
  overflow: visible; /* hover НЕ режется */
}

.cat-carousel-wrap{
  overflow: hidden;

  /* имитация .row (совпадение с container) */
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.cat-carousel{
  display: flex;
  transition: transform .45s ease;
  will-change: transform;

  /* КРИТИЧНО ДЛЯ iOS */
  touch-action: pan-y;           /* разрешаем вертикальный скролл */
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

.cat-carousel:active{
  cursor: grabbing;
}

/* ===== Slides = bootstrap columns ===== */

.cat-slide{
  flex: 0 0 calc(100% / 3);
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-right: calc(var(--bs-gutter-x) * .5);
}

/* tablet */
@media (max-width: 991.98px){
  .cat-slide{
    flex-basis: 50%;
  }
}

/* mobile */
@media (max-width: 575.98px){
  .cat-slide{
    flex-basis: 100%;
  }
}

/* ===== CONTEXT BAR ===== */

.mf-context{
  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 16px;
  margin:14px 0 24px;

  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(14px);
}

/* back */
.mf-back{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:10px 14px;
  border-radius:999px;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);

  font-weight:800;
  text-decoration:none;
  color:#fff;
}

.mf-back:hover{
  background:rgba(255,255,255,.14);
}

/* text */
.mf-context-text{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.mf-context-path{
  font-size:.82rem;
  font-weight:700;
  color:rgba(255,255,255,.65);
}

.mf-context-title{
  font-size:1.05rem;
  font-weight:900;
  color:#fff;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* mobile */
@media (max-width: 576px){
  .mf-context{
    gap:10px;
    padding:12px 14px;
  }

  .mf-back span{display:none}
}
.mf-context a,
.mf-context a:hover,
.mf-context a:focus,
.mf-context a:active{
  text-decoration: none !important;
}