/* ─────────────────────────────────────────────────────────────
   КЛУМБА — мобильный адаптивный слой (≤760px).
   Переопределяет инлайн-стили React по точным подстрокам.
   Подключается ПОСЛЕ klumba.css на каждой странице.
   ───────────────────────────────────────────────────────────── */
@keyframes kl-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 760px) {

  /* ── Нижняя таб-навигация ── */
  .kl2 { padding-bottom: 60px; }
  .mtab {
    position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: 50;
    display: flex; background: var(--milk); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(43,37,33,0.07);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* липкая кнопка покупки на карточке товара — над таб-баром */
  .kl2.has-buybar { padding-bottom: 122px; }
  .mbuybar {
    position: fixed; left: 0; right: 0; bottom: 60px; z-index: 49;
    display: flex; align-items: center; gap: 14px;
    background: var(--milk); border-top: 1px solid var(--line);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -6px 22px rgba(43,37,33,0.07);
  }
  /* инпуты 16px — чтобы iOS не зумил при фокусе */
  input, textarea, select, .kselect { font-size: 16px !important; }
  /* убрать подсветку тапа */
  a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }

  /* ── Контейнеры: ужать горизонтальные поля ── */
  [style*="max-width: 1440px"],
  [style*="max-width: 1280px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1000px"],
  [style*="max-width: 900px"],
  [style*="max-width: 880px"],
  [style*="max-width: 760px"] {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── Вертикальные отступы секций ── */
  [style*="padding: 120px 0"],
  [style*="padding: 110px 0"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 100px 0"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="padding: 90px 0"]  { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 80px 0"]  { padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding: 70px 0"]  { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding: 64px 0"]  { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* ── Стекируем многоколоночные сетки ── */
  /* repeat() — оба варианта: с пробелом и без (браузер может нормализовать по-разному) */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"]   { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]   { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"]   { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

  /* Двухколоночные fr-сетки → одна колонка */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"]          { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1fr 0.82fr"],
  [style*="grid-template-columns:1fr 0.82fr"]        { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1fr 0.8fr"],
  [style*="grid-template-columns:1fr 0.8fr"]         { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1fr 0.85fr"],
  [style*="grid-template-columns:1fr 0.85fr"]        { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1fr 0.78fr"],
  [style*="grid-template-columns:1fr 0.78fr"]        { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1fr 0.9fr"],
  [style*="grid-template-columns:1fr 0.9fr"]         { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 0.9fr 1.1fr"]     { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1.1fr 0.9fr"]     { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1.05fr 0.95fr"]   { grid-template-columns: minmax(0,1fr) !important; }

  /* Сайдбары и панели с фиксированной шириной → одна колонка */
  [style*="grid-template-columns: 264px 1fr"],
  [style*="grid-template-columns:264px 1fr"]         { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1fr 392px"],
  [style*="grid-template-columns: 1fr 400px"],
  [style*="grid-template-columns:1fr 400px"]         { grid-template-columns: minmax(0,1fr) !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1.2fr"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 26px !important; }

  /* Галерея товара: уменьшить полосу миниатюр на мобиле */
  [style*="grid-template-columns:84px 1fr"],
  [style*="grid-template-columns: 84px 1fr"]         { grid-template-columns: 60px 1fr !important; }
  /* Миниатюры 84px → вписываются в 60px-колонку */
  [style*="width:84px;height:105px"],
  [style*="width: 84px; height: 105px"]               { width: 100% !important; height: 75px !important; }

  /* Строка товара в корзине */
  [style*="grid-template-columns: 100px 1fr auto"],
  [style*="grid-template-columns:100px 1fr auto"]    { grid-template-columns: 70px minmax(0,1fr) auto !important; gap: 12px !important; }
  [style*="grid-template-columns: 96px 1fr auto"]    { grid-template-columns: 70px minmax(0,1fr) auto !important; gap: 12px !important; }

  /* Уменьшаем крупные gap */
  [style*="gap: 80px"], [style*="gap:80px"]    { gap: 28px !important; }
  [style*="gap: 56px"], [style*="gap:56px"]    { gap: 24px !important; }
  [style*="gap: 36px"], [style*="gap:36px"]    { gap: 16px !important; }
  [style*="gap: 32px"], [style*="gap:32px"]    { gap: 16px !important; }
  [style*="gap: 28px"]                               { column-gap: 16px !important; }
  [style*="gap: 24px"]                               { column-gap: 16px !important; }

  /* ── Mobile filter bar ── */
  .mob-filterbar { display:flex; border-bottom:1px solid var(--line); background:var(--milk); }
  .mob-filterbtn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; background:none; border:none; border-right:1px solid var(--line); font-size:14px; font-family:inherit; cursor:pointer; position:relative; color:var(--ink); }
  .mob-filterbtn:last-child { border-right:none; }
  .mob-filterbtn__dot { width:6px; height:6px; border-radius:50%; background:var(--accent,#0e9f6e); position:absolute; top:10px; right:20px; }

  /* ── Drawer overlay ── */
  .mob-overlay { display:none; position:fixed; inset:0; background:rgba(43,37,33,0.5); z-index:200; }
  .mob-overlay.open { display:block; }

  /* ── Drawer sheet ── */
  .mob-drawer { position:fixed; bottom:0; left:0; right:0; background:var(--milk); z-index:201; border-radius:18px 18px 0 0; transform:translateY(100%); transition:transform .32s cubic-bezier(.32,0,.67,0); max-height:82vh; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom,0); }
  .mob-drawer.open { transform:translateY(0); }
  .mob-drawer__handle { width:36px; height:4px; border-radius:2px; background:var(--line); margin:12px auto 0; flex-shrink:0; }
  .mob-drawer__head { display:flex; align-items:center; padding:4px 16px 0; flex-shrink:0; border-bottom:1px solid var(--line); }
  .mob-dtab { flex:0; background:none; border:none; border-bottom:2px solid transparent; font-size:15px; font-family:inherit; padding:12px 16px; margin-bottom:-1px; cursor:pointer; color:var(--muted); white-space:nowrap; }
  .mob-dtab.active { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
  .mob-drawer__close { background:none; border:none; font-size:22px; cursor:pointer; padding:8px 4px; color:var(--muted); margin-left:auto; line-height:1; }
  .mob-drawer__panel { display:flex; flex-direction:column; flex:1; overflow:hidden; }
  .mob-drawer__scroll { overflow-y:auto; flex:1; padding:20px 20px 32px; -webkit-overflow-scrolling:touch; }

  /* ── Filter items ── */
  .mob-fsec { margin-bottom:28px; }
  .mob-fsec__label { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:10px; }
  .mob-fitem { display:flex; align-items:center; gap:10px; padding:13px 16px; border:1px solid var(--line); margin-bottom:6px; font-size:15px; cursor:pointer; text-decoration:none; color:var(--ink); }
  .mob-fitem--on { background:var(--ink); color:var(--milk); border-color:var(--ink); }
  .mob-fitem__check { flex-shrink:0; }
  .mob-fitem--on .mob-fitem__check path { stroke:var(--milk); }
  .mob-sortitem { display:flex; align-items:center; padding:17px 0; border-bottom:1px solid var(--line); font-size:16px; text-decoration:none; color:var(--ink); }
  .mob-sortitem--on { font-weight:700; }
  .mob-sortitem--on::after { content:'✓'; margin-left:auto; color:var(--ink); }
  .mob-reset { display:block; text-align:center; padding:14px; font-size:14px; color:var(--muted); border-top:1px solid var(--line); margin-top:4px; text-decoration:none; }
  .mob-drawer__foot { display:flex; align-items:center; gap:12px; padding:14px 20px; border-top:1px solid var(--line); flex-shrink:0; background:var(--milk); padding-bottom:calc(14px + env(safe-area-inset-bottom,0)); }
  .mob-drawer__reset { font-size:14px; color:var(--muted); text-decoration:none; white-space:nowrap; }
  .mob-drawer__apply { flex:1; justify-content:center; }
  .mob-fitem { background:none; border:1px solid var(--line); text-align:left; font-family:inherit; }
  /* активное состояние должно перебивать базовый background:none выше */
  .mob-fitem.mob-fitem--on { background:var(--ink); color:var(--milk); border-color:var(--ink); }

  /* Панели итого (корзина, оформление): уменьшить padding */
  [style*="padding: 36px 32px"],
  [style*="padding:36px 32px"]                       { padding: 20px 16px !important; }

  /* Витрина-герой портфолио (weddings): сбросить span/autorows */
  [style*="grid-auto-rows: 220px"] { grid-auto-rows: 150px !important; }
  [style*="grid-column: span 2"] { grid-column: auto !important; }
  [style*="grid-row: span 2"]    { grid-row: auto !important; }

  /* ── Снимаем sticky, чтобы фильтры/галерея не наезжали ── */
  [style*="position: sticky"],
  [style*="position:sticky"] { position: static !important; top: auto !important; }

  /* ── Фиксированные высоты героев → авто ── */
  [style*="height: 760px"] { height: auto !important; }
  [style*="height: 540px"] { height: auto !important; min-height: 440px !important; }
  [style*="min-height: 640px"] { min-height: 360px !important; }
  [style*="min-height: 520px"] { min-height: auto !important; }
  [style*="min-height: 600px"] { min-height: 420px !important; }

  /* ── Крупная типографика ── */
  [style*="font-size: 104px"], [style*="font-size: 92px"],
  [style*="font-size: 88px"],  [style*="font-size: 84px"],
  [style*="font-size: 82px"],  [style*="font-size: 80px"],
  [style*="font-size: 78px"],  [style*="font-size: 76px"] { font-size: 40px !important; }
  [style*="font-size: 64px"] { font-size: 36px !important; }
  [style*="font-size: 60px"] { font-size: 33px !important; }
  [style*="font-size: 56px"] { font-size: 32px !important; }
  [style*="font-size: 54px"] { font-size: 31px !important; }
  [style*="font-size: 52px"] { font-size: 30px !important; }
  [style*="font-size: 50px"] { font-size: 30px !important; }
  [style*="font-size: 48px"] { font-size: 29px !important; }
  [style*="font-size: 46px"] { font-size: 28px !important; }
  [style*="font-size: 44px"] { font-size: 27px !important; }
  [style*="font-size: 42px"] { font-size: 26px !important; }
  [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size: 38px"] { font-size: 27px !important; }
  [style*="font-size: 36px"] { font-size: 26px !important; }
  [style*="font-size: 34px"] { font-size: 25px !important; }
  [style*="font-size: 30px"] { font-size: 23px !important; }
  [style*="font-size: 26px"] { font-size: 21px !important; }
  [style*="font-size: 24px"] { font-size: 20px !important; }
  [style*="font-size: 23px"] { font-size: 18px !important; }

  /* длинные названия в карточках не должны распирать колонку */
  .card h3, .cat .serif { overflow-wrap: anywhere; }

  /* ── Корзина: компактная строка товара ── */
  [style*="grid-template-columns: 96px 1fr auto"] { grid-template-columns: 60px minmax(0,1fr) auto !important; gap: 12px !important; }
  .photo[style*="height: 116px"] { width: 60px !important; height: 76px !important; }
  .qty button { width: 32px; height: 36px; font-size: 15px; }
  .qty span { width: 30px; }

  /* ── Футер: уменьшить верх/низ ── */
  [style*="padding: 88px 80px 40px"] { padding-top: 52px !important; padding-bottom: 28px !important; }

  /* ── Уменьшить большие gap, чтобы не было пустот ── */
  [style*="gap: 80px"] { gap: 36px !important; }
  [style*="gap: 64px"] { gap: 32px !important; }
  [style*="gap: 56px"] { gap: 28px !important; }

  /* ── Кнопки на всю ширину в герое лендинга/CTA удобнее ── */
  .btn { padding-left: 24px; padding-right: 24px; }

  /* ── Плавающие мессенджеры чуть компактнее ── */
  .msgr { right: 16px; bottom: 16px; gap: 10px; }
  .msgr a { width: 46px; height: 46px; }

  /* ── Исключения: мобильные hero-заголовки должны остаться крупными ── */
  .mhero-h1 { font-size: 40px !important; }
}