:root{
  --bg:#0b0f17;
  --card:#121a27;
  --muted:#8fa3bf;
  --text:#eaf2ff;
  --line:rgba(255,255,255,.08);
  --accent:#6ee7ff;
  --accent2:#a78bfa;
  --shadow: 0 16px 40px rgba(0,0,0,.45);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color:var(--text);
}

/* =========================
   FIX: фон не повторяется при скролле
   ========================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;

  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(1000px 500px at 90% 0%, rgba(167,139,250,.18), transparent 55%),
    var(--bg);

  background-repeat:no-repeat;
  background-size:cover;
}

/* Компенсация фиксированной шапки (высота задаётся из JS) */
body{padding-top: var(--header-h, 86px);}

.container{max-width:1100px;margin:0 auto;padding:18px}
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(11,15,23,.65);
  border-bottom:1px solid var(--line);
}
.header__row{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ===== Название сайта в шапке ===== */
.site-title{
  flex: 1;
  display:flex;
  justify-content:center;
  text-decoration:none;
  color:var(--text);
  padding: 4px 8px;
  min-width: 180px;
}
.site-logo{
  width: min(526px, 58vw);
  max-width: 526px;
  height: auto;
  max-height: 64px;
  display:block;
  object-fit: contain;
}
.site-title__glow{
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 22px;
  line-height: 1;
  text-shadow:
    0 0 18px rgba(110,231,255,.18),
    0 0 22px rgba(167,139,250,.14);
}
.site-title:hover{ filter: brightness(1.08); }
@media (max-width: 780px){
  .site-title{justify-content:flex-start; flex: 0 0 auto; min-width:auto;}
  .site-title__glow{font-size:18px;}
}

.brand{display:flex;gap:10px;align-items:center}
.brand__logo{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(110,231,255,.25), rgba(167,139,250,.25));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  font-weight:800;
}
.brand__name{font-weight:800;letter-spacing:.2px}
.brand__sub{color:var(--muted);font-size:12px;margin-top:2px}

.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* =========================
   🛒 Cart UI
   ========================= */

.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;min-width:42px;padding:0 10px;border:1px solid rgba(255,255,255,0.14);border-radius:12px;background:rgba(255,255,255,0.06);color:inherit;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,0.09)}
.icon-btn:active{transform:translateY(1px)}
.icon-btn__icon{font-size:18px;line-height:1}

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,0.14)}

.btn--cart{width:42px;padding:0;justify-content:center}

.no-scroll{overflow:hidden}

.drawer__backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:999}
.drawer{position:fixed;top:0;right:0;width:min(420px,92vw);height:100vh;background:rgba(24,28,35,0.98);border-left:1px solid rgba(255,255,255,0.12);z-index:1000;transform:translateX(102%);transition:transform 180ms ease;display:flex;flex-direction:column}
.drawer--open{transform:translateX(0)}
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-bottom:1px solid rgba(255,255,255,0.12)}
.drawer__title{font-weight:800;font-size:18px}
.drawer__body{padding:12px 14px;overflow:auto;flex:1}
.drawer__footer{padding:12px 14px 16px;border-top:1px solid rgba(255,255,255,0.12)}
.drawer__total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.drawer__footerBtns{display:flex;gap:10px;flex-wrap:wrap}
.drawer__hint{opacity:0.75;font-size:12px;margin-top:10px;line-height:1.35}
.drawer__empty{opacity:0.75;padding:14px 0}

.drawer-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.drawer-item__img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:rgba(255,255,255,0.06)}
.drawer-item__info{flex:1;min-width:0}
.drawer-item__title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-item__meta{display:flex;justify-content:space-between;gap:10px;opacity:0.9;margin-top:4px}
.drawer-item__controls{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}

.qty-btn{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);color:inherit;cursor:pointer}
.qty-badge{min-width:28px;text-align:center;font-weight:800}
.link-btn{border:none;background:transparent;color:inherit;opacity:0.8;cursor:pointer;text-decoration:underline}

/* Checkout */
.checkout__grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:16px;margin-top:12px}
.checkout__panel{border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;background:rgba(255,255,255,0.04)}
.checkout__title{margin:0 0 10px;font-size:16px}
.checkout__items{display:flex;flex-direction:column;gap:10px}
.checkout-item{display:flex;gap:10px;padding:10px;border:1px solid rgba(255,255,255,0.10);border-radius:14px;background:rgba(0,0,0,0.08)}
.checkout-item__img{width:76px;height:76px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,0.06)}
.checkout-item__info{flex:1;min-width:0}
.checkout-item__title{font-weight:800}
.checkout-item__meta{display:flex;justify-content:space-between;gap:10px;opacity:0.9;margin-top:6px}
.checkout-item__qty{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.checkout__total{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:16px}
.checkout__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.checkout__empty{opacity:0.8;padding:12px 0}
.checkout__hint{opacity:0.75;font-size:12px;line-height:1.35;margin:10px 0 0}

@media (max-width: 900px){.checkout__grid{grid-template-columns:1fr}}
.input,.select{
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(18,26,39,.75);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
.input{min-width:260px}
.select{min-width:180px}

.meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.meta__count{color:var(--muted)}

.btn{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(110,231,255,.35);
  background: rgba(110,231,255,.12);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{filter:brightness(1.08)}
.btn--ghost{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}

/* label + small action button (e.g., "Шаблон") */
.form__labelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.btn--tiny{
  height:30px;
  padding:0 10px;
  border-radius:10px;
  font-size:13px;
  white-space:nowrap;
}

.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(18,26,39,.72);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 320px;
}
@media (max-width: 980px){ .card{grid-column: span 6;} }
@media (max-width: 620px){
  .card{grid-column: span 12;}
  .input{min-width:100%}
  .select{min-width:100%}
  .controls{width:100%}
}

/* фиксируем место под медиа, чтобы карточки не "прыгали" */
.card__media{
  width:100%;
  height:160px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card__body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__title{font-weight:750}
.card__desc{color:var(--muted);font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.price{font-weight:800}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  width:fit-content;
}

.card__btn{
  margin-top:8px;
  display:flex;gap:8px;
}
.card__btn .btn{flex:1}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:1;
}
.modal__card{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin: 40px auto;
  border-radius: 22px;
  border:1px solid var(--line);
  background: rgba(18,26,39,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index:2;
  max-height: calc(100vh - 36px); /* ✅ модалка не вылезает за экран */
}
.modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  z-index:5;
}
.modal__content{display:grid;grid-template-columns: 1.1fr 1fr;gap:0;align-items:start}
@media (max-width: 860px){ .modal__content{grid-template-columns:1fr} .modal__card{margin:18px auto}}
.modal__img{width:100%;height:360px;max-height:360px;object-fit:cover;border-right:1px solid var(--line)}
@media (max-width: 860px){ .modal__img{border-right:none;border-bottom:1px solid var(--line)} }
@media (max-width: 860px){ .modal__img{height:240px;max-height:240px;} }
.modal__info{padding:16px; overflow:auto;} /* ✅ скролл внутри */
.modal__title{
  margin:0 0 8px;
  font-size:22px;

  padding-right:48px;          /* место под кнопку закрытия */
  word-break: break-word;      /* перенос длинных слов */
  line-height:1.3;
}
.modal__price{font-size:18px;font-weight:850;margin-bottom:10px}
.modal__desc{
  color: var(--muted);
  line-height: 1.45;
  white-space: pre-line; /* ✅ показывает переносы строк из textarea */
  word-break: break-word;
}
.modal__actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ===== Каталог-кнопка + dropdown ===== */
.catalog{
  position:relative;
  display:flex;
  align-items:center;
}

.catalog__btn{
  height:40px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(110,231,255,.12), rgba(167,139,250,.10));
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow: var(--shadow);
  transition: .2s ease;
}

.catalog__btn:hover{
  filter:brightness(1.08);
  border-color: rgba(110,231,255,.35);
}

.catalog__arrow{
  font-size:12px;
  color:var(--muted);
  transition: transform .2s ease;
}

.catalog.active .catalog__arrow{
  transform: rotate(180deg);
}


/* dropdown */
.catalog__dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:220px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(18,26,39,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  /* список может быть выше экрана на ноутбуках */
  max-height: calc(100vh - var(--header-h, 86px) - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
  display:none;
  padding:6px;
}

/* ✅ Mobile/touch: render dropdown as viewport panel (JS moves it to <body> as a portal) */
.catalog__dropdown.is-portal{
  display: block !important;
  position: fixed !important;
  top: calc(var(--header-h, 86px) + 10px) !important;
  /* ✅ не перекрываем весь экран: компактная панель слева */
  left: 8px !important;
  right: auto !important;
  bottom: 12px !important;
  width: min(420px, calc(100vw - 16px)) !important;
  max-width: min(420px, calc(100vw - 16px)) !important;
  max-height: none !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

@media (max-width: 620px){
  .catalog__dropdown.is-portal{
    bottom: 8px !important;
  }
}

/* ✅ Touch devices: submenus should open as an accordion inside the panel
   (иначе они уезжают вправо и выглядят как будто не открываются) */
@media (pointer: coarse){
  .catalog__dropdown .submenu{
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }
  .catalog__dropdown .submenu a{
    height: 36px;
    font-size: 13.5px;
  }
}

.catalog.active .catalog__dropdown{ display:block; }

.catalog__dropdown a{
  display:flex;
  align-items:center;
  height:38px;
  padding:0 12px;
  border-radius: 12px;
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  transition: .15s ease;
  border:1px solid transparent; /* ✅ чтобы hover не "прыгал" */
}

.catalog__dropdown a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(110,231,255,.25);
}

.catalog__dropdown a.is-active{
  background: rgba(255,255,255,.05);
  border-color: rgba(110,231,255,.35);
}

/* ===== Подкатегории (выпадающее меню второго уровня) ===== */
.catalog__dropdown .menu-item{
  position: relative;
}

.catalog__dropdown .menu-item > a{
  width: 100%;
}

.catalog__dropdown .menu-item.has-sub > a{
  justify-content: space-between;
}

.catalog__dropdown .submenu-arrow{
  margin-left: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}

.catalog__dropdown .submenu{
  position: absolute;
  top: -6px; /* чтобы красиво совпало с padding меню */
  left: 100%;
  margin-left: 6px;
  width: 240px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(18,26,39,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  z-index: 10000;
}


/* На десктопе подменю рисуем через JS-портал (иначе его режет overflow у скролла) */
@media (hover: hover) and (pointer: fine){
  .catalog__dropdown .submenu{ display:none !important; }
}

/* touch/мобилка: подменю раскрывается классом .open */
.catalog__dropdown .menu-item.open > .submenu{
  display: block;
}

/* мобилка/узкий экран: делаем подменю "аккордеоном" внутри списка */
@media (max-width: 980px){
  .catalog__dropdown .submenu{
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
    left: auto;
    top: auto;
  }
  .catalog__dropdown .submenu a{
    height: 36px;
    font-size: 13.5px;
  }

  .catalog{width:100%}
  .catalog__btn{width:100%; justify-content:space-between;}
  .catalog__dropdown{width:100%}
}

/* ===== Portal подменю (десктоп) ===== */
.spr-submenu-portal{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20000;
}

.spr-submenu-panel{
  position: fixed;
  pointer-events: auto;
  width: 260px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(18,26,39,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 6px;
}

.spr-submenu-panel a{
  display:flex;
  align-items:center;
  height:38px;
  padding:0 12px;
  border-radius: 12px;
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  transition: .15s ease;
  border:1px solid transparent;
}

.spr-submenu-panel a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(110,231,255,.25);
}

.spr-submenu-panel .menu-item{ position: relative; }
.spr-submenu-panel .menu-item.has-sub > a{ justify-content: space-between; }
.spr-submenu-panel .submenu-arrow{ margin-left:10px; color:var(--muted); }

/*
  FIX: предотвращаем "дублирование" 3-го уровня внутри 2-го.
  В portal-панели мы копируем submenu.innerHTML, где у пунктов могут быть вложенные
  <div class="submenu"> следующего уровня. В обычном dropdown они скрываются стилями
  .catalog__dropdown .submenu, но в portal эти правила не действуют — поэтому вложенные
  submenu становились видимыми и всё смешивалось.
  В portal скрываем все вложенные .submenu; открытие уровней делает JS, создавая новую панель.
*/
.spr-submenu-panel .submenu{ display: none !important; }

/* ===== nav-кнопки ===== */
.nav-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.nav-btn{
  min-height:48px;
  padding:10px 20px;
  border-radius:999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  text-decoration:none;
  color:var(--text);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);

  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  transition: transform .15s ease,
              filter .15s ease,
              border-color .15s ease,
              box-shadow .15s ease;

  white-space:nowrap;
  box-sizing:border-box;
  overflow:hidden; /* ✅ ничего не вылезает */
}

.nav-btn:hover{
  filter:brightness(1.08);
  transform: translateY(-1px);
  border-color: rgba(110,231,255,.35);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

.nav-btn:active{
  transform: translateY(0);
  filter:brightness(1.02);
}

.nav-btn__icon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.14));
  flex: 0 0 28px; /* ✅ фиксируем размер, чтобы не ломался */
}

.nav-btn__text{
  font-weight:800;
  letter-spacing:.2px;
}

.nav-btn--active{
  border-color: rgba(110,231,255,.45);
  background: linear-gradient(135deg, rgba(110,231,255,.14), rgba(167,139,250,.12));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.nav-btn--active .nav-btn__icon{
  border-color: rgba(110,231,255,.35);
}

.nav-btn--back{
  background: rgba(255,255,255,.03);
}

@media (max-width: 620px){
  .nav-actions{width:100%}
  .nav-btn{width:100%; justify-content:center;}
}

/* ===== Формы в модалках ===== */
.form{margin-top:10px}

.form__label{
  display:block;
  margin:10px 0 6px;
  color: var(--muted);
  font-size:12px;
}

.form__input{ width:100%; }

.form__textarea{
  width:100%;
  padding:10px 12px;
  resize:vertical;
  min-height: 92px;
  line-height:1.35;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(18,26,39,.75);
  color:var(--text);
  outline:none;
}

.form__error{
  margin-top:10px;
  color: rgba(255, 160, 160, .95);
  font-size:12px;
  min-height: 16px;
}

/* ===== nav-btn как button: ✅ фикс (не ломаем .nav-btn) ===== */
button.nav-btn{
  cursor:pointer;
  outline:none;

  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  color: inherit;

  /* НЕ обнуляем padding/border/background здесь! */
}
button.nav-btn::-moz-focus-inner{ border:0; }

button.nav-btn .nav-btn__icon,
button.nav-btn .nav-btn__text{
  pointer-events:none;
}

/* textarea конфликт с .input */
textarea.input{
  height:auto;
  padding:10px 12px;
}

/* ===== Danger-кнопка ===== */
.btn--danger{
  border:1px solid rgba(255, 90, 90, .45);
  background: rgba(255, 90, 90, .14);
  color: var(--text);
}
.btn--danger:hover{
  filter: brightness(1.08);
  border-color: rgba(255, 90, 90, .75);
}

/* confirm-модалка текст */
.modal__desc--muted{
  color: var(--muted);
  line-height: 1.45;
  margin-top: 0;
}

/* focus */
:where(.btn, .nav-btn, .catalog__btn, .input, .form__textarea, .catalog__dropdown a):focus-visible{
  outline: 2px solid rgba(110,231,255,.55);
  outline-offset: 2px;
}

/* карточка кнопки на узких */
@media (max-width: 420px){
  .card__btn{ flex-direction: column; }
  .card__btn .btn{ width:100%; }
}

/* ===== Footer ===== */
.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1150;
  margin-top: 0;
  flex-shrink: 0;
  padding: 8px 0 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 160% at 50% -55%, rgba(110,231,255,.13), transparent 58%),
    rgba(11,15,23,.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 -16px 38px rgba(0,0,0,.26);
}

.footer__inner{
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(18,26,39,.58);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  text-align: center;
}

.footer__brand{
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.footer__dot{
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(110,231,255,.98), rgba(167,139,250,.88));
  box-shadow: 0 0 0 4px rgba(110,231,255,.10), 0 0 18px rgba(110,231,255,.38);
}

.footer__brandText{
  min-width: 0;
  text-align: center;
}

.footer__name{
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .15px;
  line-height: 1.15;
}

.footer__note{
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.footer__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.footer__navLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  text-decoration: none;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.footer__navLink:hover{
  color: var(--accent);
  border-color: rgba(110,231,255,.34);
  background: rgba(110,231,255,.10);
  transform: translateY(-1px);
}

.footer__copy{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.footer__link{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.footer__link:hover{
  color: var(--accent);
  border-color: var(--accent);
}

.footer__sep{
  opacity: .55;
}

@media (max-width: 1080px){
  .footer__inner{
    gap: 8px 12px;
  }
}

@media (max-width: 720px){
  .footer{
    padding: 7px 0 9px;
  }

  .footer__inner{
    min-height: 0;
    padding: 9px 10px;
    border-radius: 18px;
    gap: 7px 10px;
    flex-direction: column;
  }

  .footer__brand{
    width: 100%;
  }

  .footer__note{
    white-space: normal;
  }

  .footer__nav{
    width: 100%;
  }

  .footer__navLink{
    min-height: 29px;
    padding: 7px 10px;
  }

  .footer__copy{
    width: 100%;
  }
}

@media (max-width: 420px){
  .footer__inner{
    padding: 8px 9px;
    gap: 6px;
  }

  .footer__brand{
    gap: 8px;
  }

  .footer__note{
    display: none;
  }

  .footer__nav{
    gap: 5px;
  }

  .footer__navLink{
    min-height: 28px;
    padding: 6px 9px;
    font-size: 10.5px;
  }

  .footer__copy{
    gap: 5px;
    font-size: 10.5px;
  }
}

/* Sentinel для бесконечной подгрузки каталога.
   Он расположен сразу после сетки товаров внутри main, поэтому фиксированный footer
   больше не ломает автозагрузку следующих страниц. */
#scrollSentinel{
  height: 2px;
  width: 100%;
}

/* ===== Scroll To Top ===== */
.scroll-top{
  position: fixed;
  left: 24px;
  bottom: 146px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.18));
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);

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

  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  z-index:1500;
}

@media (max-width: 1080px){
  .scroll-top{ bottom: 188px; }
}

@media (max-width: 720px){
  .scroll-top{ left: 16px; bottom: 254px; }
}

@media (max-width: 420px){
  .scroll-top{ bottom: 308px; }
}

/* ===== Status badge (наличие) ===== */
.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  background: rgba(255,255,255,.04);
}
.status--in{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.14);
}
.status--out{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.14);
}
.status--wait{
  border-color: rgba(234,179,8,.55);
  background: rgba(234,179,8,.14);
}
.status--order{
  border-color: rgba(168,85,247,.55);
  background: rgba(168,85,247,.14);
}
.scroll-top.visible{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.scroll-top:hover{
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* ссылки-кнопки */
a.btn{ text-decoration:none; }

/* ======================================================
   ✅ Закреплённый footer + безопасный отступ для контента
   ====================================================== */

html, body { min-height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 104px;
}

/* main занимает свободное место, но footer уже зафиксирован в окне */
main{
  flex: 1 0 auto;
}

@media (max-width: 1080px){
  body{ padding-bottom: 118px; }
}

@media (max-width: 720px){
  body{ padding-bottom: 154px; }
}

@media (max-width: 420px){
  body{ padding-bottom: 132px; }
}


.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }

@media (max-width: 980px){
  .col-8,.col-4{grid-column: span 12;}
}

#contacts {
  height: fit-content;
}

.phone-dropdown {
  position: relative;
}

.phone-menu {
  position: absolute;
  bottom: 110%; /* чтобы открывалось вверх в модалке */
  left: 0;
  min-width: 220px;
  background: rgba(18,26,39,.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  padding: 8px;
  z-index: 1000;
}

.phone-menu a {
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  border-radius: 10px;
  font-weight: 600;
  transition: 0.2s;
}

.phone-menu a:hover {
  background: rgba(255,255,255,.06);
}

.phone-dropdown.active .phone-menu {
  display: flex;
}

/* ======================================================
   Phone dropdown в модалке (без JS, через <details>)
   ====================================================== */

.phone-dd{
  position: relative;
  display: inline-block;
}

.phone-dd__summary{
  list-style: none;
}
.phone-dd__summary::-webkit-details-marker{ display:none; }

.phone-dd__menu{
  position: absolute;
  bottom: calc(100% + 10px); /* открываем вверх — не обрезается в модалке */
  left: 0;
  min-width: 240px;

  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(18,26,39,.98);
  box-shadow: var(--shadow);

  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
}

.phone-dd[open] .phone-dd__menu{ display: flex; }

.phone-dd__item{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  background: rgba(255,255,255,.03);
}

.phone-dd__item:hover{
  background: rgba(255,255,255,.07);
}

/* ======================================================
   FIX: Кнопка "Подробнее" аккуратная на мобильных
   ====================================================== */
@media (max-width: 620px){
  .card__btn{
    width: 100%;
    flex-direction: column;
  }

  .card__btn .btn{
    width: 100%;
    display: flex;            /* сохраняем выравнивание как у .btn */
    text-align: center;
    padding: 14px 16px;
    border-radius: 14px;
  }
}
/* ======================================================
   FIX: Скролл в карточке товара (модалка) на мобильных
   - контент скроллится внутри .modal__info
   - кнопки (Уточнить / Закрыть) всегда доступны
   ====================================================== */

@media (max-width: 860px){
  /* модалка занимает почти весь экран */
  .modal__card{
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    margin: 12px auto;
  }

  /* сетка превращается в колонку и занимает всю высоту карточки */
  .modal__content{
    height: 100%;
  }

  /* картинка фиксированной высоты, остальное — под скролл */
  .modal__img{
    height: 240px;
    max-height: 240px;
  }

  /* делаем область справа/ниже гибкой и скроллимой */
  .modal__info{
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-height: calc(100vh - 24px - 240px);
    -webkit-overflow-scrolling: touch;
  }

  /* описание занимает место, чтобы кнопки не уезжали */
  #modalDesc{
    flex: 1 1 auto;
  }

  /* кнопки липнут к низу области, всегда видны */
  .modal__actions{
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-top: 12px;
    background: linear-gradient(to top, rgba(18,26,39,.98) 70%, rgba(18,26,39,0));
  }
}

/* Если у пользователя включён iOS/Android overscroll — не даём странице прыгать */
.modal__info{ overscroll-behavior: contain; }

/* ======================================================
   FIX v2: Кнопки в модалке всегда видны на мобильных
   Причина: на некоторых Android 100vh и max-height calc дают сдвиг,
   поэтому делаем flex-раскладку без вычислений.
   ====================================================== */

@media (max-width: 860px){
  .modal__content{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* важно для скролла вложенного блока */
  }

  .modal__img{
    flex: 0 0 240px;
    height: 240px;
    max-height: 240px;
  }

  .modal__info{
    flex: 1 1 auto;
    min-height: 0; /* важно: иначе overflow не работает как надо */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 84px; /* запас, чтобы контент не прятался под кнопками */
  }

  .modal__actions{
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 12px;
    padding: 12px 0 0;
    background: linear-gradient(to top, rgba(18,26,39,.98) 75%, rgba(18,26,39,0));
  }
}

/* ======================================================
   FIX: Страница "О компании" не плывёт на мобильных
   - принудительно складываем колонки в одну
   ====================================================== */

@media (max-width: 980px){
  /* если используется grid с 12 колонками */
  .about-grid{
    grid-template-columns: 1fr !important;
  }
  .about-grid > *{
    grid-column: 1 / -1 !important;
  }

  /* на всякий случай — для классов колонок */
  .col-8, .col-4, .col-7, .col-5, .col-12{
    grid-column: 1 / -1 !important;
  }
}


/* iOS safe-area */
.header{padding-top: env(safe-area-inset-top);}

/* ======================================================
   Product page (product.html)
   ====================================================== */

.product-page{padding-top: 18px; padding-bottom: 36px;}

.product-state{opacity:.85; padding: 14px 0;}

.product-card{
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(18,26,39,.55);
}

.product-card__media{background: rgba(255,255,255,.03);}
.product-card__img{width: 100%; height: 100%; max-height: 520px; object-fit: contain; display:block;}

.product-card__body{padding: 16px; min-width: 0;}
.product-card__top{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 10px;}
.product-card__title{margin: 0 0 10px; font-size: 22px; line-height: 1.25;}
.product-card__row{display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 12px;}
.product-card__desc{white-space: pre-wrap; opacity:.95; line-height: 1.55;}
.product-card__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;}

.product-related{margin-top: 22px;}
.section-title{margin: 0 0 12px; font-size: 18px;}
.product-empty{opacity:.8; padding: 8px 0;}

@media (max-width: 980px){
  .product-card{grid-template-columns: 1fr;}
  .product-card__img{max-height: 420px;}
}


/* Nested submenus (3rd+ levels) on desktop */
@media (hover: hover) and (pointer: fine){
  .catalog__dropdown .submenu .submenu{
    left: 100%;
  margin-left: 6px;
    top: 0;
  }
}

/* Mobile: indent nested submenus a bit for clarity */
@media (max-width: 620px){
  .catalog__dropdown .submenu{
    padding-left: 10px;
  }
}

/* Админские элементы по умолчанию скрыты (показываются только после проверки IP) */
.admin-only{display:none !important;}

/* ======================================================
   ✅ FIX: Кнопки карточки товара (Подробнее / 🛒 / Изменить / 🧹)
   - не "разбегаются"
   - иконки компактные
   - стабильно на мобильных
   ====================================================== */

.card__btn{
  display:flex;
  gap:8px;
  margin-top:8px;
  align-items:center;
  flex-wrap:nowrap;
}

.card__btn .btn{
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* корзина — компактная */
.card__btn .btn--cart{
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 18px;
  justify-content: center;
}

/* удалить — метёлка */
.card__btn .btn--danger{
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px){
  .card__btn{ gap:6px; }
  .card__btn .btn{ padding: 8px 10px; font-size: 13px; }
  .card__btn .btn--cart,
  .card__btn .btn--danger{ width: 40px; min-width: 40px; flex-basis: 40px; }
}

/* совсем узкие экраны — разрешаем перенос, но сохраняем компактность иконок */
@media (max-width: 360px){
  .card__btn{ flex-wrap: wrap; }
  .card__btn .btn{ flex: 1 1 calc(50% - 52px); }
  .card__btn .btn--cart,
  .card__btn .btn--danger{ flex: 0 0 40px; }
}



/* =========================
   Smart search UI
   ========================= */
.search-wrap{position:relative;flex:1;min-width:220px}
.search-wrap .input{width:100%}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;background:#0f1116;border:1px solid rgba(255,255,255,.10);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35);overflow:hidden}
.suggest__item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-size:14px;line-height:1.2}
.suggest__item:hover,.suggest__item[aria-selected="true"]{background:rgba(255,255,255,.06)}
.suggest__icon{opacity:.75}
.hl{background:rgba(255,255,0,.18);padding:0 .15em;border-radius:.25em}



.header__row { min-width: 0; }

.catalog__btn {
  max-width: min(680px, 60vw);
  overflow: hidden;
  min-width: 0;
}

.catalog__path {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  max-width: 100%;


}




/* ===== End header layout + category path truncation ===== */


/* ===== Header overlap hard-fix (v4) ===== */
@media (min-width: 640px){
  /* Force grid on wider screens even if old flex rules linger */
  .header .header__row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(320px, 1fr);
    align-items: center;
    gap: 20px;
  }

  .header .catalog{
    justify-self: stretch;
    overflow: hidden;      /* don't let long text leak under logo */
    min-width: 0;
    z-index: 2;
  }

  .header #catalogBtn.catalog__btn{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header .site-title{
    justify-self: center;
    min-width: 0;
    overflow: hidden;
    z-index: 1;
  }

  .header .site-logo{
    max-width: 240px;
    width: 100%;
    height: auto;
    display: block;
  }

  .header .controls{
    justify-self: end;
    min-width: 0;
  }
}
/* ===== End Header overlap hard-fix (v4) ===== */


/* ===== Header: fixed width catalog + safe truncation (v5) ===== */
/* Let header items shrink for ellipsis */
.header__row{ min-width:0; }
.header__row > *{ min-width:0; }

/* Desktop/tablet: 3 columns */
@media (min-width: 640px){
  .header__row{
    display:grid !important;
    grid-template-columns: minmax(220px, 520px) auto minmax(320px, 1fr);
    align-items:center;
    gap:20px;
  }
  .catalog{
    justify-self:start;
    width:100%;
    max-width:520px;
    overflow:hidden; /* prevents text from bleeding under logo */
    z-index:3;
  }
  .site-title{
    justify-self:center;
    overflow:hidden;
    z-index:2;
  }
  .site-logo{
    max-width:240px;
    width:100%;
    height:auto;
    display:block;
  }
  .controls{
    justify-self:end;
    z-index:1;
  }
}

/* Catalog button: takes catalog width, but text is clipped */
.catalog__btn{
  width:100%;
  min-width:0;
  justify-content:space-between;
}

.catalog__path{
  flex: 1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis; /* CSS fallback */
}

/* ===== End Header v5 ===== */


/* ===== Catalog button width + label visibility (v6 final override) ===== */
@media (min-width: 820px){
  .header__row{
    display:grid !important;
    grid-template-columns: minmax(220px, 460px) auto auto !important;
    align-items:center;
    gap:20px;
  }

  .catalog{
    width:auto !important;
    max-width:460px !important;
    justify-self:start !important;
    overflow:hidden !important;
  }

  .catalog__btn{
    width:100% !important;            /* fill only the bounded catalog column */
    justify-content:flex-start !important;
    gap:10px !important;
  }

  .catalog__path{
    flex:1 1 auto;
    min-width:0;
    text-align:left;
  }

  .site-title{ justify-self:center !important; }
  .controls{ justify-self:end !important; }
  .site-logo{ max-width:240px; width:100%; height:auto; display:block; }
}
/* ===== End v6 override ===== */


/* ===== HEADER FINAL OVERRIDE (stable layout + truncation) ===== */
/* Important: make ellipsis work inside flex/grid */
.header__row{ min-width:0; }
.header__row > *{ min-width:0; }

/* Desktop & wide tablets: 3-column grid (Catalog | Logo | Search) */
@media (min-width: 900px){
  .header__row{
    display:grid !important;
    grid-template-columns: minmax(220px, 460px) 1fr minmax(360px, 520px);
    align-items:center;
    gap:18px;
  }

  /* Catalog sits left and never stretches beyond its column */
  .catalog{ justify-self:start; width:100%; max-width:460px; }
  .catalog__btn{ width:100%; max-width:460px; }

  /* Logo always truly centered */
  .site-title{ justify-self:center; display:flex; justify-content:center; }
  .site-logo{ max-width:240px; width:100%; height:auto; display:block; }

  /* Controls to the right */
  .controls{ justify-self:end; }
}

/* The path text: single line + ellipsis (CSS fallback). JS will do middle-ellipsis when needed. */
#catPath, .catalog__path{
  flex: 1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
/* Keep arrow visible */
.catalog__arrow{ flex: 0 0 auto; }

/* ===== END HEADER FINAL OVERRIDE ===== */


/* ===== Header FINAL override (v8) ===== */
/* Goals:
   1) Logo truly centered
   2) Catalog button bounded but NOT clipping dropdown
   3) Path text ellipsis inside the button only
*/
@media (min-width: 900px){
  .header__row{
    display:grid !important;
    grid-template-columns: 1fr auto 1fr !important; /* center column stays centered */
    align-items:center !important;
    gap:18px !important;
  }

  /* Left: catalog (bounded), keep dropdown visible */
  .catalog{
    justify-self:start !important;
    max-width:460px !important;
    width:100% !important;
    overflow:visible !important; /* IMPORTANT: don't hide dropdown */
    z-index:4;
  }
  .catalog__btn{
    width:100% !important;
    max-width:460px !important;
    justify-content:flex-start !important;
  }

  /* Center: logo */
  .site-title{
    justify-self:center !important;
    flex:0 0 auto !important;   /* cancel earlier flex:1 */
    min-width:0 !important;
    padding:4px 0 !important;
  }
  .site-logo{
    max-width:240px !important;
    width:240px !important;
    height:auto !important;
    display:block !important;
  }

  /* Right: controls (bounded) */
  .controls{
    justify-self:end !important;
    max-width:520px !important;
    width:100% !important;
  }
}

/* Ensure dropdown is always above header and not clipped */
.catalog__dropdown{
  z-index: 10000 !important;
}
/* ===== End Header FINAL override (v8) ===== */


/* ===== Распродажа ===== */
.sale-box{display:flex;align-items:center;gap:10px;margin:10px 0 6px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);cursor:pointer}
.sale-box input{width:18px;height:18px;accent-color:#ff4d4f;cursor:pointer}
.sale-box span{font-weight:700}
.sale-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#ff4d4f,#ff7a45);color:#fff;font-weight:900;font-size:12px;box-shadow:0 8px 22px rgba(255,77,79,.32)}
.card__media{position:relative}
.price-block{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.price-old{font-size:.9em;color:var(--muted);text-decoration:line-through}
.price-sale{color:#ff5a5f;font-weight:900}
.nav-btn--sale-active{border-color:rgba(255,90,95,.45);box-shadow:0 0 0 1px rgba(255,90,95,.18) inset;background:rgba(255,90,95,.08)}

.sale-badge-static{background:rgba(255,90,95,.12);border:1px solid rgba(255,90,95,.28);color:#ff696d;font-weight:800}

/* ======================================================
   FIX: красивый внутренний скролл в модалках админки
   - карточка больше не уезжает за нижний край экрана
   - кнопки Сохранить / Отмена остаются доступными
   ====================================================== */
.modal__card{
  margin:18px auto !important;
  max-height:calc(100vh - 36px) !important;
  max-height:calc(100dvh - 36px) !important;
}

#addModal .modal__card,
#editModal .modal__card,
#authModal .modal__card,
#confirmModal .modal__card{
  display:flex;
  flex-direction:column;
}

#addModal .modal__info,
#editModal .modal__info,
#authModal .modal__info,
#confirmModal .modal__info{
  max-height:calc(100vh - 36px);
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:18px;
}

#addModal .modal__actions,
#editModal .modal__actions{
  position:sticky;
  bottom:0;
  z-index:9;
  margin:16px -2px 0;
  padding:14px 2px 4px;
  background:linear-gradient(to top, rgba(18,26,39,.98) 78%, rgba(18,26,39,.82) 92%, rgba(18,26,39,0));
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}

#addModal .modal__actions .btn,
#editModal .modal__actions .btn{
  min-height:44px;
}

.modal__info{
  scrollbar-width:thin;
  scrollbar-color:rgba(59,208,255,.75) rgba(255,255,255,.07);
}

.modal__info::-webkit-scrollbar{
  width:10px;
}

.modal__info::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
  margin:12px 0;
}

.modal__info::-webkit-scrollbar-thumb{
  border:2px solid rgba(18,26,39,.95);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,208,255,.9), rgba(82,116,255,.75));
  box-shadow:0 0 14px rgba(59,208,255,.25);
}

.modal__info::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(107,222,255,1), rgba(117,145,255,.95));
}

@media (max-width:620px){
  #addModal .modal__actions,
  #editModal .modal__actions{
    flex-direction:column;
  }
  #addModal .modal__actions .btn,
  #editModal .modal__actions .btn{
    width:100%;
  }
}

/* ======================================================
   HEADER PRO 2026: единая адаптивная шапка для всех страниц
   - компактные, информативные кнопки
   - логотип всегда по центру на desktop
   - аккуратное поведение на планшетах и телефонах
   ====================================================== */
.header{
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  background:
    linear-gradient(180deg, rgba(11,15,23,.88), rgba(11,15,23,.70));
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}

.header .container.header__row{
  max-width:1280px;
  padding-top:10px;
  padding-bottom:10px;
}

.header__row,
.header__row > *{min-width:0;}

.header .site-title{
  padding:0;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.28));
}

.header .site-logo{
  width:clamp(150px, 16vw, 230px) !important;
  max-width:230px !important;
  max-height:48px;
  object-fit:contain;
}

.header .controls,
.header .nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}

.header .controls{flex-wrap:nowrap;}
.header .nav-actions{flex-wrap:wrap;}

.header .search-wrap{
  flex:1 1 260px;
  min-width:180px;
  max-width:360px;
}

.header .input[type="search"]{
  height:38px;
  min-width:0;
  border-radius:999px;
  padding-left:14px;
  padding-right:14px;
}

.nav-btn,
.catalog__btn,
.icon-btn,
.btn{
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}

.header .nav-btn,
.nav-actions .nav-btn{
  min-height:38px;
  height:38px;
  padding:0 13px;
  gap:8px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.header .nav-btn__icon,
.nav-actions .nav-btn__icon{
  width:24px;
  height:24px;
  flex-basis:24px;
  font-size:13px;
}

.header .nav-btn__text,
.nav-actions .nav-btn__text{
  font-size:13px;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
}

.header .catalog__btn{
  min-height:38px;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  gap:10px;
  font-size:13px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.header .icon-btn{
  height:38px;
  min-width:44px;
  padding:0 10px;
  border-radius:13px;
}

.header .badge{
  min-width:18px;
  height:18px;
  padding:0 6px;
  font-size:11px;
}

.btn{
  min-height:38px;
  height:auto;
  padding:9px 13px;
  border-radius:12px;
  font-size:14px;
  font-weight:750;
  line-height:1.15;
}

.card__btn .btn,
.product-card__actions .btn,
.modal__actions .btn,
.checkout__actions .btn,
.drawer__footerBtns .btn{
  min-height:38px;
  padding:8px 12px;
}

.product-card__actions{
  gap:8px;
}

.product-card__actions .btn,
.product-card__actions .phone-dd__summary{
  white-space:nowrap;
}

@media (min-width:980px){
  .header .header__row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:16px !important;
    flex-wrap:nowrap !important;
  }

  .header .catalog,
  .header .header__row > .nav-btn--back{
    justify-self:start !important;
    width:min(100%, 360px) !important;
    max-width:360px !important;
  }

  .header .header__row > .nav-btn--back{
    width:auto !important;
  }

  .header .site-title{
    justify-self:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
  }

  .header .controls,
  .header .nav-actions{
    justify-self:end !important;
    width:auto !important;
    max-width:100% !important;
  }
}

@media (max-width:979px){
  .header .header__row{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding-top:8px;
    padding-bottom:8px;
  }

  .header .site-title{
    order:-3;
    flex:1 0 100% !important;
    justify-content:center !important;
  }

  .header .site-logo{
    width:clamp(150px, 38vw, 210px) !important;
    max-height:44px;
  }

  .header .catalog,
  .header .header__row > .nav-btn--back{
    order:-2;
    flex:1 1 190px !important;
    max-width:none !important;
  }

  .header .catalog__btn,
  .header .header__row > .nav-btn--back{
    width:100% !important;
  }

  .header .controls,
  .header .nav-actions{
    order:-1;
    flex:1 1 300px !important;
    width:auto !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
  }

  .header .search-wrap{
    flex:1 1 220px;
    max-width:none;
  }
}

@media (max-width:560px){
  .header .container.header__row{
    padding-left:10px;
    padding-right:10px;
  }

  .header .site-logo{
    width:min(190px, 72vw) !important;
  }

  .header .catalog,
  .header .header__row > .nav-btn--back,
  .header .controls,
  .header .nav-actions{
    flex-basis:100% !important;
  }

  .header .controls,
  .header .nav-actions{
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;
  }

  .header .controls > .nav-btn,
  .header .nav-actions > .nav-btn,
  .header .controls > .search-wrap{
    width:100%;
    max-width:none;
  }

  .header .controls > .nav-btn:nth-of-type(1),
  .header .controls > .nav-btn:nth-of-type(2),
  .header .nav-actions > .nav-btn{
    grid-column:auto;
  }

  .header .search-wrap{
    grid-column:1 / -1;
  }

  .header .icon-btn{
    min-width:46px;
  }

  .header .nav-btn,
  .nav-actions .nav-btn,
  .header .catalog__btn{
    height:36px;
    min-height:36px;
    padding:0 11px;
    font-size:12px;
  }

  .header .nav-btn__text,
  .nav-actions .nav-btn__text{
    font-size:12px;
  }
}

@media (max-width:380px){
  .header .nav-btn,
  .nav-actions .nav-btn,
  .header .catalog__btn{
    padding-left:9px;
    padding-right:9px;
  }

  .header .nav-btn__icon,
  .nav-actions .nav-btn__icon{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
}

/* ======================================================
   MOBILE CATALOG DENSITY FIX
   Показываем больше товаров в видимой области телефона:
   2 карточки в ряд + компактная карточка без потери действий.
   ====================================================== */
@media (max-width: 620px){
  .grid{
    margin-top: 10px;
    gap: 10px;
  }

  .card{
    grid-column: span 6;
    min-height: 0;
    border-radius: 16px;
  }

  .card__media{
    height: 116px;
  }

  .card__body{
    padding: 8px 8px 10px;
    gap: 5px;
  }

  .pill{
    max-width: 100%;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card__title{
    min-height: 45px;
    font-size: 12px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card__desc{
    display: none;
  }

  .row{
    margin-top: 2px;
    gap: 5px;
    align-items: flex-start;
    flex-direction: column;
  }

  .price{
    font-size: 13px;
    line-height: 1.2;
  }

  .status{
    max-width: 100%;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .card__btn{
    width: 100%;
    margin-top: 4px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
    flex-direction: row !important;
  }

  .card__btn .btn{
    width: auto !important;
    min-width: 0;
    min-height: 34px;
    height: 34px;
    padding: 0 6px !important;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .card__btn .btn--cart,
  .card__btn .btn--danger{
    width: 36px !important;
    min-width: 36px;
    padding: 0 !important;
  }
}

/* На совсем узких экранах оставляем одну колонку,
   чтобы карточки не становились нечитаемыми. */
@media (max-width: 340px){
  .card{
    grid-column: span 12;
  }

  .card__media{
    height: 148px;
  }
}

/* ======================================================
   FIX: корзина всегда выше закрепленного footer
   - backdrop перекрывает весь экран вместе с подвалом
   - drawer открывается поверх footer
   - 100dvh корректнее на мобильных браузерах
   ====================================================== */
.drawer__backdrop{
  z-index: 21000 !important;
}

.drawer{
  z-index: 21010 !important;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
}

.drawer__body{
  min-height: 0;
}

.drawer__footer{
  flex: 0 0 auto;
}

/* ======================================================
   FIX: product.html — похожие товары не прячутся под fixed footer
   Footer остаётся закреплённым, а у страницы товара появляется
   дополнительная безопасная зона для финальной прокрутки.
   ====================================================== */
.product-page{
  padding-bottom: 170px;
}

@media (max-width: 720px){
  .product-page{
    padding-bottom: 210px;
  }
}

@media (max-width: 420px){
  .product-page{
    padding-bottom: 190px;
  }
}

/* ======================================================
   FIX: checkout.html — кнопки под списком товаров
   не прячутся за закреплённым footer.
   Добавляем безопасную зону для финальной прокрутки.
   ====================================================== */
.checkout{
  padding-bottom: 180px;
}

@media (max-width: 720px){
  .checkout{
    padding-bottom: 220px;
  }
}

@media (max-width: 420px){
  .checkout{
    padding-bottom: 200px;
  }
}

/* ======================================================
   FIX: add/edit/admin modals are always above fixed footer
   - footer no longer overlaps Save/Cancel buttons
   - modal backdrop dims footer as well
   ====================================================== */
.modal{
  z-index: 22000 !important;
}

.modal__backdrop{
  z-index: 1;
}

.modal__card{
  z-index: 2;
}

/* Keep the long add/edit forms comfortably scrollable */
#addModal .modal__card,
#editModal .modal__card{
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}

#addModal .modal__info,
#editModal .modal__info{
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
}


/* ======================================================
   FIX 13.05: catalog bottom safe-zone above fixed footer
   When a filtered subcategory has only one short final row,
   the last card must be scrollable fully above the footer.
   --footer-h is updated in app.js; fallback keeps it safe without JS.
   ====================================================== */
.catalog-page{
  padding-bottom: calc(var(--footer-h, 92px) + 56px);
}

@media (max-width: 720px){
  .catalog-page{
    padding-bottom: calc(var(--footer-h, 168px) + 44px);
  }
}

@media (max-width: 420px){
  .catalog-page{
    padding-bottom: calc(var(--footer-h, 148px) + 38px);
  }
}