:root {
  --bg: #000000;
  --text: #ffffff;
  --gray: #888;
  --light: rgba(255,255,255,0.08);
  --hover: rgba(255,255,255,0.15);
  --accent: #ff6b6b;
}

/* ========================================= */
/* БАЗА */
/* ========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* Шум */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.08"/></svg>') repeat;
}



/* === МОБИЛЬНАЯ ШТОРКА — ПОСЛЕДНЯЯ ВЕРСИЯ, КАК В iOS 2025 === */
#mobileSidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100vw;
  max-width: 420px;
  height: 100dvh;
  background: rgba(20,20,22,0.98);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  border-right: 1px solid rgba(255,255,255,0.08);
  z-index: 9999;
  transition: left 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
  display: flex;
  flex-direction: column;
  color: #e8e8ea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#mobileSidebar.active { left: 0; }

/* === ВЕРХ — ЛОГОТИП + СТРЕЛКА СЛЕВА ПО ЦЕНТРУ === */
.sidebar-top {
  padding: max(48px, env(safe-area-inset-top)) 20px 24px;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}

.sidebar-logo-big {
  height: 60px;
  filter: brightness(0) invert(1);
}

html[data-theme="light"] .sidebar-logo-big { filter: none !important; }

/* Стрелка закрытия — тонкая, слева по центру, как в iOS */
.sidebar-close {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.sidebar-close:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-50%) scale(0.94);
}

/* === НАВИГАЦИЯ === */
.sidebar-nav-modern {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
}

.sidebar-link-modern {
  padding: 15px 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #e0e0e0;
  text-decoration: none;
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
}

.sidebar-link-modern:hover { color: #fff; transform: translateY(-1px); }
.sidebar-link-modern.active { color: #fff; font-weight: 700; }
.sidebar-link-modern.active::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 16px 32px;
}
.nav-divider.top { margin-bottom: 24px; }
.nav-divider.bottom { margin-top: 24px; }

/* === ТУМБЛЕР ТЕМЫ — ГОРИЗОНТАЛЬНЫЙ + ИКОНКИ СЛЕВА/СПРАВА === */
.sidebar-bottom-theme {
  padding: 1px 32px max(44px, env(safe-area-inset-bottom));
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.sidebar-theme-toggle {
  width: 64px;
  height: 36px;
  position: relative;
}

.sidebar-theme-toggle input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.sidebar-theme-toggle .theme-toggle-label {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.4s ease;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
}

.sidebar-theme-toggle .theme-toggle-label::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.54, 1.6, 0.48, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Иконки внутри тумблера */
.sidebar-theme-toggle .fa-moon,
.sidebar-theme-toggle .fa-sun {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  z-index: 1;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.sidebar-theme-toggle .fa-moon { left: 10px; color: #fff; }
.sidebar-theme-toggle .fa-sun  { right: 10px; color: #ffd700; opacity: 0; }

/* Включено — ползунок вправо, солнце видно */
#theme-toggle:checked + .theme-toggle-label::before {
  transform: translateX(28px);
}

#theme-toggle:checked + .theme-toggle-label .fa-moon { opacity: 0; }
#theme-toggle:checked + .theme-toggle-label .fa-sun  { opacity: 1; }

/* Светлая тема */
html[data-theme="light"] #mobileSidebar {
  background: rgba(255,255,255,0.97);
  border-right-color: rgba(0,0,0,0.08);
  color: #111;
}

html[data-theme="light"] .sidebar-close {
  background: rgba(0,0,0,0.1);
  color: #000;
}

html[data-theme="light"] .nav-divider { background: rgba(0,0,0,0.12); }
html[data-theme="light"] .sidebar-link-modern { color: #333; }
html[data-theme="light"] .sidebar-link-modern:hover,
html[data-theme="light"] .sidebar-link-modern.active { color: #000; }
html[data-theme="light"] .sidebar-link-modern.active::after { background: #000; }

html[data-theme="light"] .sidebar-theme-toggle .theme-toggle-label {
  background: rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.2);
}

html[data-theme="light"] .sidebar-theme-toggle .fa-moon { color: #666; }
html[data-theme="light"] .sidebar-theme-toggle .fa-sun  { color: #ff9500; }
/* ==================== НИЖНЯЯ ПАНЕЛЬ ==================== */
.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 92px;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); /* чуть больше боковых отступов */
  background: rgba(20,20,22,0.94);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  border-top: 0.5px solid rgba(255,255,255,0.12);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;               /* ← УВЕЛИЧИЛИ — теперь всё ровно и красиво */
  box-sizing: border-box;
}

/* ВСЕ КНОПКИ — включая #authBtn */
/* === НИЖНЯЯ ПАНЕЛЬ — ИДЕАЛЬНО ДЛЯ iPhone SE и всех узких экранов === */
.mobile-bottom-bar .bottom-bar-btn,
.mobile-bottom-bar #authBtn {
  flex: 1;
  position: relative;
  background: transparent;
  border: none;
  outline: none;
  color: #888;
  font-size: 1.52rem;                /* было 1.65rem → чуть меньше */
  height: 64px;                      /* было 68px → экономим место */
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;                          /* было 5px */
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  margin: 0;
  min-width: 0;                      /* важно для flex на узких экранах */
}

/* Активное состояние — масштаб чуть скромнее, чтобы не вылезало */
.mobile-bottom-bar .bottom-bar-btn:hover,
.mobile-bottom-bar .bottom-bar-btn.active,
.mobile-bottom-bar #authBtn:hover,
.mobile-bottom-bar #authBtn.active {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
  transform: scale(1.02);            /* было 1.05 → теперь безопасно */
}

/* Подписи — критически важные правки под SE */
.mobile-bottom-bar .bottom-bar-btn::after,
.mobile-bottom-bar #authBtn::after {
  content: attr(data-label);
  position: absolute;
  bottom: 6px;                       /* было 8px → подняли выше */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.64rem !important;     /* было 0.7rem → теперь влезает 100% */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;             /* было 0.6px → чуть плотнее */
  opacity: 0.88;
  white-space: nowrap;
  pointer-events: none;
}

/* Бейдж корзины — чуть меньше и ближе к центру иконки */
.mobile-bottom-bar .cart-count {
  position: absolute;
  top: 6px;                          /* было 8px */
  right: 8px;                        /* было 10px */
  background: #ff3b30;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

/* Экстра-компактность именно для iPhone SE и экранов ≤360px */
@media (max-width: 360px) {
  .mobile-bottom-bar .bottom-bar-btn,
  .mobile-bottom-bar #authBtn {
    font-size: 1.42rem;
    height: 60px;
    gap: 3px;
  }
  
  .mobile-bottom-bar .bottom-bar-btn::after,
  .mobile-bottom-bar #authBtn::after {
    font-size: 0.62rem !important;
    bottom: 5px;
    letter-spacing: 0.3px;
  }
  
  .mobile-bottom-bar .cart-count {
    top: 5px;
    right: 7px;
    min-width: 17px;
    height: 17px;
    font-size: 0.65rem;
  }
}

/* ==================== СВЕТЛАЯ ТЕМА ==================== */
html[data-theme="light"] #mobileSidebar {
  background: rgba(255,255,255,0.98);
  border-right-color: rgba(0,0,0,0.09);
}
html[data-theme="light"] .sidebar-logo { filter: none; }
html[data-theme="light"] .sidebar-close { background: rgba(0,0,0,0.1); color: #000; }
html[data-theme="light"] .sidebar-close:hover { background: rgba(0,0,0,0.18); }
html[data-theme="light"] .sidebar-link { color: #111; }
html[data-theme="light"] .sidebar-link:hover,
html[data-theme="light"] .sidebar-link.active { color: #000; }
html[data-theme="light"] .sidebar-link.active::after { background: #000; }
html[data-theme="light"] .sidebar-theme-toggle .theme-toggle-label { background: rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.18); }

html[data-theme="light"] .mobile-bottom-bar {
  background: rgba(255,255,255,0.94);
  border-top-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .mobile-bottom-bar .bottom-bar-btn,
html[data-theme="light"] .mobile-bottom-bar #authBtn {
  color: #666 !important;
}
html[data-theme="light"] .mobile-bottom-bar .bottom-bar-btn:hover,
html[data-theme="light"] .mobile-bottom-bar .bottom-bar-btn.active,
html[data-theme="light"] .mobile-bottom-bar #authBtn:hover,
html[data-theme="light"] .mobile-bottom-bar #authBtn.active {
  color: #000 !important;
  background: rgba(0,0,0,0.11) !important;
}
html[data-theme="light"] .mobile-bottom-bar .bottom-bar-btn::after,
html[data-theme="light"] .mobile-bottom-bar #authBtn::after {
  color: #444 !important;
}


#ai-assistant:hover { transform: scale(1.1); }

/* ========================================= */
/* ДЕСКТОП ≥1024px — ВСЁ РАБОТАЕТ КАК НАДО */
/* ========================================= */
@media (min-width: 1024px) {
  header.main-header {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 2rem 5%;
    height: 90px;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(20px);
    background: transparent;
    border-bottom: 1px solid var(--light);
    transition: all .4s ease;
  }

  header.main-header.scrolled {
    padding: 1.2rem 5%;
    height: 76px;
    background: rgba(0,0,0,0.7);
  }

  .logo-img { height: 120px; filter: brightness(0) invert(1); transition: all .4s; }
  header.scrolled .logo-img { height: 100px; }

  .desktop-nav { display: flex; gap: clamp(2rem, 4vw, 5rem); }
  .nav-link { font-weight: 400; font-size: clamp(0.95rem, 1.1vw, 1.1rem); letter-spacing: 2px; text-transform: uppercase; color: #aaa; text-decoration: none; position: relative; transition: color .4s; }
  .nav-link::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 0; height: 1px; background: var(--text); transition: width .4s; }
  .nav-link:hover::after, .nav-link.active::after { width: 100%; }
  .nav-link:hover, .nav-link.active { color: var(--text); }

  .header-icons { display: flex; gap: clamp(0.8rem, 1.8vw, 2rem); align-items: center; }
  .icon-btn { width: clamp(46px, 3.2vw, 52px); height: clamp(46px, 3.2vw, 52px); border-radius: 50%; background: transparent; border: 1px solid var(--light); display: flex; align-items: center; justify-content: center; transition: all .4s; font-size: clamp(1.1rem, 1.4vw, 1.5rem); color: var(--text); }
  .icon-btn:hover { background: var(--hover); border-color: var(--text); }

  .cart-count { position: absolute; top: -6px; right: -6px; background: #dfdedd; color: #000; font-size: 0.7rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

  /* Скрываем мобильные элементы */
  .mobile-bottom-bar,
  #mobileSidebar,
  .mobile-fullscreen-modal {
    display: none !important;
  }

  /* AI-робот на десктопе — в правом нижнем углу */
  #ai-assistant {
    bottom: 24px;
    right: 24px;
  }
}

.cart-count {
  position: absolute; top: -6px; right: -6px; background: #dfdedd; color: #000;
  font-size: 0.7rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
    .header-icons { display: flex; gap: 1rem; align-items: center; position: relative; }
/* КОРЗИНА — ВЫПАДАШКА */
#miniCartDropdown {
  position: absolute; top: 100%; right: 0; width: 380px; max-height: 70vh;
  background: rgba(15,15,15,0.98); border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px); z-index: 9999; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: all 0.35s ease; padding: 1.5rem;
}
#miniCartDropdown.show {
  opacity: 1; visibility: visible; transform: translateY(8px);
}
.mini-cart-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
  padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mini-cart-title {
  font-size: 1.4rem; font-weight: 300; letter-spacing: 2px;
}
.mini-cart-items { max-height: 45vh; overflow-y: auto; margin: 1rem 0; }
.mini-cart-empty { color: var(--gray); text-align: center; padding: 2rem; font-size: 0.95rem; }
.mini-cart-item {
  display: flex; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mini-cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.mini-cart-item-info { flex: 1; }
.mini-cart-item-title { font-size: 0.95rem; margin-bottom: 0.3rem; }
.mini-cart-item-price { font-size: 0.9rem; color: var(--gray); }
.mini-cart-footer {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem;
  display: flex; justify-content: space-between; align-items: center;
}
.mini-cart-total { font-size: 1.2rem; font-weight: 500; }
.go-to-cart-btn {
  background: #fff; color: #ffffff; padding: 0.7rem 1.4rem; border: none;
  border-radius: 10px; font-weight: 600; font-size: 0.9rem; letter-spacing: 1.5px;
  transition: all .3s;
}
.go-to-cart-btn:hover { background: #ddd; }

/* Абсолютная страховка */
@media (max-width: 1023px) {
  header.main-header { display: none !important; }
}
/* ФИКС: убираем овал только у мобильной кнопки входа */
.mobile-bottom-bar .bottom-bar-btn {
  flex: 1;
  position: relative;
  background: none;
  border: none;
  color: #888;
  font-size: 1.65rem;
  font-weight: 400;            /* ← было потеряно */
  height: 68px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  gap: 5px;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent; /* убирает серую вспышку на мобилках */
}
/* Активная кнопка (например, когда ты на странице профиля) */
.mobile-bottom-bar .bottom-bar-btn.active {
  color: #fff !important;
  background: rgba(255,255,255,0.15) !important;
  transform: scale(1.05);
}

/* Светлая тема — тоже работает */
html[data-theme="light"] .mobile-bottom-bar .bottom-bar-btn.active {
  color: #000 !important;
  background: rgba(0,0,0,0.11) !important;
}
/* Дополнительно — на всякий случай, если где-то ещё остался .icon-btn на мобиле */
@media (max-width: 1023px) {
  .mobile-bottom-bar .icon-btn,
  .mobile-bottom-bar #authBtn {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #888;
    font-size: 1.48rem;
    gap: 4px;
    transition: all 0.3s ease;
    position: relative;
  }
  
  .mobile-bottom-bar #authBtn::after {
    content: "Вход";
    font-size: 0.61rem;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.8;
  }
  
  .mobile-bottom-bar #authBtn.active::after,
  .mobile-bottom-bar #authBtn:hover::after {
    opacity: 1;
    color: var(--text);
  }
  
  .mobile-bottom-bar #authBtn:hover,
  .mobile-bottom-bar #authBtn.active {
    color: var(--text);
    transform: translateY(-3px);
  }
}

.theme-toggle-hanging {
  position: fixed;
  top: 90px;
  right: 6%;
  z-index: 999;
  pointer-events: auto;
  transform: translateY(-50%);
}
header.scrolled ~ .theme-toggle-hanging,
header.scrolled + .theme-toggle-hanging {
  top: 76px;
}
.theme-toggle-input { display: none; }
.theme-toggle-label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.theme-toggle-label:hover { transform: translateY(-4px); }
.theme-toggle-label:active { transform: translateY(6px); }
.rope.top {
  width: 2px;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.4), rgba(255,255,255,0.15));
  box-shadow: 0 0 8px rgba(255,255,255,0.25);
  position: relative;
  transition: all 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-theme="light"] .rope.top {
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.22), rgba(0,0,0,0.08));
  box-shadow: 0 0 6px rgba(0,0,0,0.12);
}
.rope.top::before {
  content: '';
  position: absolute;
  top: 0; left: -4px; right: -4px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  border-radius: 2px;
  animation: rope-shine 3s infinite ease-in-out;
}
[data-theme="light"] .rope.top::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.15), transparent);
}
@keyframes rope-shine {
  0%,100% { opacity: 0.2; }
  50% { opacity: 0.7; }
}
.bulb {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 28%, #fffbe6, #ffd700);
  border: 1.5px solid rgba(255,215,0,0.7);
  position: relative;
  box-shadow: 0 0 24px rgba(255,215,0,0.5), inset 0 0 12px rgba(255,255,255,0.7), 0 6px 12px rgba(0,0,0,0.3);
  transition: all 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bulb::before {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffbe6, #ffed9e);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
.bulb-light {
  position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,150,0.95), rgba(255,235,100,0.7), transparent 70%);
  opacity: 0;
  transition: opacity 1s ease;
}
.theme-toggle-input:checked + .theme-toggle-label .bulb-light { opacity: 1; }
.bulb-glow {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px;
  background: radial-gradient(circle, rgba(255,220,100,0.35), transparent 70%);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.theme-toggle-input:checked + .theme-toggle-label .bulb-glow { opacity: 1; }
.rope.bottom {
  width: 2px; height: 22px;
  background: inherit;
  margin-top: -3px;
}
[data-theme="light"] .bulb {
  background: radial-gradient(circle at 30% 30%, #f0f0f0, #bbbbbb);
  border-color: rgba(0,0,0,0.25);
  box-shadow: 0 0 10px rgba(0,0,0,0.15), inset 0 0 8px rgba(0,0,0,0.1), 0 6px 12px rgba(0,0,0,0.2);
}
[data-theme="light"] .bulb::before {
  background: radial-gradient(circle at 40% 40%, #ffffff, #dddddd);
}
[data-theme="light"] .bulb-light,
[data-theme="light"] .bulb-glow { opacity: 0 !important; }
/* === СКРЫВАЕМ ВИСЯЩУЮ ЛАМПОЧКУ НА МОБИЛКЕ === */
@media (max-width: 1023px) {
  .theme-toggle-hanging {
    display: none !important;
  }
}

main { padding: calc(90px + 15vh) 8% 20vh; display: flex; flex-direction: column; align-items: center; }

.page-title { font-size: 7.5rem; font-weight: 100; letter-spacing: 18px; margin-bottom: 1.5rem; }
.page-subtitle { font-size: 1.2rem; font-weight: 300; letter-spacing: 6px; color: var(--gray); margin-bottom: 14rem; }

.contacts-wrapper {
  width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8rem; align-items: start; justify-items: center; margin-bottom: 16rem;
}
.contact-block { text-align: center; }
.contact-label {
  font-size: 0.9rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gray); margin-bottom: 1.2rem; display: block;
}
.contact-value {
  font-size: 3.2rem; font-weight: 100; line-height: 1.2;
}
.contact-value a { color: var(--text); text-decoration: none; }
.contact-value a:hover { opacity: 0.55; }

.visit-us { margin: 20rem 0 16rem; text-align: center; }
.visit-us h2 { font-size: 5.5rem; font-weight: 100; letter-spacing: 14px; margin-bottom: 2rem; }
.visit-us p { font-size: 1.4rem; font-weight: 300; color: var(--gray); letter-spacing: 1px; max-width: 600px; margin: 0 auto; }

.divider {
  width: 100%; max-width: 600px; height: 1px; background: var(--light);
  margin: 16rem auto; position: relative; overflow: hidden;
}
.divider::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: var(--text);
  animation: infiniteLine 3.2s linear infinite;
}
@keyframes infiniteLine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.showroom { margin: 16rem 0 12rem; text-align: center; }
.showroom h2 { font-size: 4rem; font-weight: 100; letter-spacing: 12px; margin-bottom: 2rem; }
.showroom p { font-size: 1.4rem; font-weight: 300; color: var(--gray); letter-spacing: 1px; }

.philosophy {
  margin: 20rem 0; text-align: center; max-width: 800px;
}
.philosophy blockquote {
  font-size: 2.8rem; font-weight: 100; line-height: 1.4; letter-spacing: 2px;
  color: var(--gray); font-style: italic; overflow: visible;
}
.philosophy .typewriter {
  display: inline-block;
  white-space: pre;
  margin-left: -23vw;
  max-width: 90%;
}
.philosophy cite {
  display: block; margin-top: -15rem; font-size: 1rem; letter-spacing: 4px; color: var(--gray);
}

.instagram-feed { margin: 18rem 0; width: 100%; max-width: 1200px; }
.instagram-feed h2 { font-size: 4rem; font-weight: 100; letter-spacing: 12px; text-align: center; margin-bottom: 6rem; }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.insta-item {
  aspect-ratio: 1; background: var(--light); display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--gray); transition: all .6s ease;
}
.insta-item:hover { background: var(--hover); transform: scale(1.03); }

.newsletter { margin: 20rem 0 16rem; text-align: center; max-width: 700px; }
.newsletter h2 { font-size: 4rem; font-weight: 100; letter-spacing: 12px; margin-bottom: 2rem; }
.newsletter p { font-size: 1.2rem; color: var(--gray); margin-bottom: 3rem; letter-spacing: 1px; }
.newsletter-form { display: flex; justify-content: center; gap: 1rem; max-width: 500px; margin: 0 auto; }
.newsletter-input {
  background: transparent; border: 1px solid var(--light); padding: 1.2rem 2rem;
  color: var(--text); font-size: 1rem; letter-spacing: 2px; width: 100%; transition: all .4s;
  border-radius: 12px;
}
.newsletter-input:focus { outline: none; border-color: var(--text); background: var(--hover); }
.newsletter-btn {
  background: var(--text); color: var(--bg); padding: 1.2rem 3rem;
  border: none; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; transition: all .4s;
  border-radius: 12px;
}
.newsletter-btn:hover { background: var(--gray); color: var(--text); }

.social-wrapper { margin: 14rem 0; display: flex; gap: 4.5rem; justify-content: center; }
.social-wrapper a {
  color: var(--gray); font-size: 2.4rem; transition: all .5s ease;
  filter: grayscale(100%);
}
.social-wrapper a:hover {
  color: var(--text); transform: translateY(-10px) scale(1.15);
  filter: grayscale(0%) brightness(1.3);
}

/* ========================================= */
/* РЕКВИЗИТЫ — ВСЕГДА ПО ЦЕНТРУ НА ЛЮБОМ ЭКРАНЕ */
/* 2×2 на десктопе ■ 1 колонка на мобильных */
/* ========================================= */

/* ========================================= */
/* РЕКВИЗИТЫ — ЖЁСТКО ПО ЦЕНТРУ СТРАНИЦЫ НА ВСЕХ УСТРОЙСТВАХ */
/* ========================================= */

.requisites-wrapper {
  width: 100vw;                    /* на всю ширину экрана */
  max-width: 100%;                
  margin: 18rem 0 0;
  padding: 0 20px;
  position: relative;
  left: 50%;
  transform: translateX(-45%);
  display: flex;
  justify-content: center;
}

.requisites-grid {
  width: 100%;
  max-width: 920px;                /* чуть шире чем было — теперь точно по центру */
  margin: 0 auto;                 /* дополнительная страховка */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.8rem 7rem;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* Десктоп — 2×2 */
@media (min-width: 1025px) {
  .requisites-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem 8rem;
    
  }
}

/* ПЛАНШЕТ 768–1024px — отдельная корректировка */
@media (min-width: 768px) and (max-width: 1024px) {
  .requisites-wrapper {
    transform: translateX(-50%);      /* ← подвинь сюда правее (или левее) */
    /* попробуй по очереди: -41%, -42%, -43%, -44% — выберешь идеальное */
  }
}

/* Мобильные — одна колонка */
@media (max-width: 767px) {
  .requisites-wrapper {
    padding: 0 5%;
    margin-top: 14rem;
  }
  .requisites-grid {
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Стили текста (чтобы было красиво) */
.req-title {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.5rem;
  display: block;
}
.req-title {
  font-size: 0.85rem; font-weight: 400; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gray); margin-bottom: 0.5rem; display: block;
}

footer {
  padding: 6rem 8% 3rem; border-top: 1px solid var(--light);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 4rem; align-items: center;
  font-size: 0.9rem; letter-spacing: 2px; color: var(--gray);
}
.footer-left { text-align: left; }
.footer-center { text-align: center; }
.footer-right { text-align: right; }
.footer-logo { height: 80px; filter: brightness(0) invert(1); opacity: 0.4; }
.footer-links { display: flex; gap: 2rem; justify-content: center; }
.footer-links a { color: var(--gray); text-decoration: none; transition: color .4s; }
.footer-links a:hover { color: var(--text); }

.back-to-top {
  position: fixed; bottom: 40px; right: 40px; z-index: 999;
  width: 44px; height: 44px; background: rgba(255,255,255,0.08);
  border: 1px solid var(--light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all .4s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--hover); border-color: var(--text); }

/* УДАЛЁН СТАРЫЙ .alert — ЭТО БЫЛ ЧЁРНЫЙ КВАДРАТ! */
/* Больше никаких квадратов сзади */

/* НОВЫЕ АЛЕРТЫ — ТОЛЬКО ДОБАВЛЕНО, НИЧЕГО НЕ СЛОМАНО */
.custom-alert-temp {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 999999 !important;
  min-width: 340px;
  max-width: 90vw;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 1.3rem 1.6rem;
  color: #000;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(20px);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.custom-alert-temp.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.custom-alert-temp.error { border-left: 6px solid #ff6b6b; }
.custom-alert-temp.success { border-left: 6px solid #4ade80; }
.custom-alert-temp .alert-content { display: flex; align-items: center; gap: 14px; }
.custom-alert-temp i { font-size: 2rem; color: #000; }
.custom-alert-temp .alert-text strong { font-size: 1.25rem; font-weight: 700; color: #000; display: block; margin-bottom: 4px; }
.custom-alert-temp .alert-text span { font-size: 1.05rem; color: #000; opacity: 0.88; line-height: 1.4; }
.custom-alert-temp .alert-close { background: none; border: none; color: #000; font-size: 1.8rem; cursor: pointer; opacity: 0.6; }
.custom-alert-temp .alert-close:hover { opacity: 1; }

/* МОДАЛКА — z-index ниже алертов */
#feedbackModal {
  z-index: 9998 !important;
}

/* ТАЙМЕР — ВИДЕН! */
.btn-cooldown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff !important;
  background: rgba(0,0,0,0.92);
  border-radius: 16px;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.btn-cooldown.active { display: flex !important; }
.btn-cooldown .timer {
  font-size: 2.4rem !important;
  font-weight: 900;
  color: #fff !important;
  text-shadow: 0 0 30px rgba(255,255,255,1);
}

/* ВСЁ ОСТАЛЬНОЕ — ТВОЁ, НЕ ТРОГАЛ */
.field-wrapper { position: relative; margin-bottom: 1.6rem; }
#feedbackForm input, #feedbackForm textarea {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 1.4rem; color: #fff; font-size: 1rem;
  letter-spacing: 1px; border-radius: 12px; transition: all .3s;
}
#feedbackForm input:focus, #feedbackForm textarea:focus {
  outline: none; border-color: #fff; background: rgba(255,255,255,0.05);
}
#feedbackForm textarea { min-height: 120px; resize: vertical; }

#feedbackForm button[type="submit"] {
  width: 100%; background: #fff; color: #000; padding: 1.1rem;
  border: none; border-radius: 12px; font-weight: 600; letter-spacing: 2px;
  cursor: pointer; transition: all .3s; position: relative; overflow: hidden;
}
#feedbackForm button[type="submit"]:hover { background: #ddd; }
#feedbackForm button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

.field-error {
  position: absolute; left: 0; bottom: -1.4rem;
  font-size: 0.82rem; font-weight: 400; letter-spacing: 1.2px;
  color: var(--accent); opacity: 0; transform: translateY(-6px);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; text-transform: uppercase;
}
.field-error.show { opacity: 1; transform: translateY(0); }

#feedbackForm input.error,
#feedbackForm textarea.error {
  border-color: var(--accent) !important;
  background: rgba(255, 107, 107, 0.08);
  box-shadow: 0 0 0 1px var(--accent);
}

.auth-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(16px); z-index: 9998; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.auth-modal.show { display: flex !important; opacity: 1; visibility: visible; }
.auth-modal-content { background: rgba(15,15,15,0.98); border: 1.5px solid rgba(255,255,255,0.12); border-radius: 24px; width: 100%; max-width: 420px; padding: 2.5rem 2rem; position: relative; box-shadow: 0 40px 100px rgba(0,0,0,0.6); }
.close-modal { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: #fff; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.auth-title { font-size: 1.8rem; text-align: center; margin-bottom: 2rem; }
.auth-input { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.2); padding: 1rem 1.4rem; margin: 1rem 0; color: #fff; border-radius: 12px; }
.auth-btn { width: 100%; background: #fff; color: #000; padding: 1rem; border: none; border-radius: 12px; font-weight: 600; margin-top: 1rem; cursor: pointer; }

@media (max-width: 860px) {
  .page-title { font-size: 5rem; letter-spacing: 10px; }
  .contacts-wrapper { grid-template-columns: 1fr; gap: 6rem; }
  .visit-us h2, .showroom h2, .instagram-feed h2, .newsletter h2 { font-size: 3.2rem; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter-form { flex-direction: column; }
  footer { grid-template-columns: 1fr; text-align: center; }
  .footer-left, .footer-right { text-align: center; }
  .footer-links { justify-content: center; margin: 1rem 0; }
  .back-to-top { bottom: 20px; right: 20px; }
  #miniCartDropdown { width: 340px; right: -20px; }
  .feedback-content { padding: 2rem 1.5rem; }
}

.btn-cooldown {
  position: absolute;
  inset: 0;
  display: none;                    /* ← начальное состояние */
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff !important;
  background: rgba(0,0,0,0.92);
  border-radius: 16px;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.btn-cooldown.active { 
  display: flex !important;         /* ← показываем при active */
}

    /* === ТОСТ-АЛЕРТЫ — ТЕКСТ ИДЕАЛЬНО ПО ЦЕНТРУ + БЕЗ СМЕЩЕНИЙ === */
.toast-alert {
  position: fixed !important;
  left: 50% !important;
  bottom: 50px !important;
  transform: translateX(-50%) translateY(24px) !important;
  z-index: 999999 !important;
  min-width: 500px !important;
  max-width: 94vw !important;
  background: rgba(15, 15, 15, 0.94) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1.4px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 18px !important;
  padding: 0 !important;                     /* УБРАЛИ padding отсюда */
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5) !important;
  font-family: 'Inter', sans-serif !important;
  color: #ffffff !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  height: 80px !important;
  overflow: hidden !important;
}

.toast-alert.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* УБРАЛИ .alert-content — он ломал центровку! */
.toast-alert i {
  font-size: 1.9rem !important;
  flex-shrink: 0;
  opacity: 0.95;
  /* УБРАЛ margin — теперь gap из родителя */
}

.toast-alert .alert-text {
  text-align: center !important;
  line-height: 1.35;
  flex: 1;
  margin-bottom: 1rem !important;
}

.toast-alert .alert-text strong {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px;
  color: #fff !important;
  display: block;
  margin-bottom: 3px;
}

.toast-alert .alert-text span {
  font-size: 0.98rem !important;
  color: rgba(255, 255, 255, 0.89) !important;
  font-weight: 400;
}

/* Крестик — позиционирован отдельно */
.toast-alert .alert-close {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.35s ease !important;
}
.toast-alert .alert-close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-50%) scale(1.12);
}

    /* === МОДАЛКА ОБРАТНОЙ СВЯЗИ === */
    .custom-alert {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      padding: 2rem;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
    }
    .custom-alert.show {
      display: flex !important;
      opacity: 1;
      visibility: visible;
    }
    .custom-alert .alert-content {
      background: rgba(15,15,15,0.98);
      border: 1.5px solid rgba(255,255,255,0.12);
      border-radius: 24px;
      width: 100%;
      max-width: 480px;
      padding: 2.8rem 2.4rem;
      position: relative;
      box-shadow: 0 40px 100px rgba(0,0,0,0.6);
      backdrop-filter: blur(20px);
    }
    .alert-close {
      position: absolute;
      top: 1.2rem;
      right: 1.2rem;
      width: 44px;
      height: 44px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      color: #fff;
      font-size: 1.4rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    .alert-close:hover {
      background: rgba(255,255,255,0.2);
      transform: scale(1.1);
    }
    .alert-icon {
      font-size: 3.6rem;
      color: #ff9500;
      margin-bottom: 1.2rem;
      text-shadow: 0 0 24px rgba(255,149,0,0.7);
      text-align: center;
    }
    .alert-text {
      text-align: center;
      margin-bottom: 2rem;
    }
    .alert-text strong {
      font-size: 1.55rem;
      font-weight: 700;
      letter-spacing: 1px;
      display: block;
      margin-bottom: 0.6rem;
      color: #fff;
    }
    .alert-text span {
      font-size: 1.08rem;
      color: rgba(255,255,255,0.88);
      line-height: 1.55;
    }
    .contact-form {
      margin-top: 1.8rem;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 1rem 1.4rem;
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.28);
      border-radius: 14px;
      color: #fff;
      font-size: 1rem;
      backdrop-filter: blur(12px);
      transition: all 0.35s ease;
    }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(255,255,255,0.65);
    }
    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: #ff9500;
      background: rgba(255,255,255,0.18);
      box-shadow: 0 0 0 4px rgba(255,149,0,0.15);
    }
    .contact-form textarea {
      min-height: 110px;
      resize: vertical;
    }
    .phone-field-wrapper {
      position: relative;
    }
    .phone-field-wrapper input[type="tel"] {
      padding-right: 115px !important;
    }
    .edit-phone-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.16);
      border: 1.2px solid rgba(255,255,255,0.28);
      color: #fff;
      padding: 8px 15px;
      border-radius: 10px;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      backdrop-filter: blur(14px);
      transition: all 0.35s ease;
    }
    .edit-phone-btn:hover {
      background: rgba(255,255,255,0.32);
      transform: translateY(-50%) scale(1.08);
    }
    .alert-login-btn {
      position: relative !important;
      overflow: hidden !important;
      margin-top: 1rem;
      padding: 1rem 2.4rem;
      background: #fff;
      color: #000;
      border: none;
      border-radius: 16px;
      font-weight: 600;
      font-size: 1.12rem;
      cursor: pointer;
      transition: all 0.38s ease;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    .alert-login-btn:hover:not(:disabled) {
      transform: translateY(-4px);
      box-shadow: 0 15px 35px rgba(255,255,255,0.35);
    }
    .alert-login-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .btn-text { transition: opacity 0.3s ease; }
    .btn-cooldown {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 1.25rem;
      font-weight: 700;
      color: #fff !important;
      background: rgba(0,0,0,0.92);
      border-radius: 16px;
      z-index: 20;
      backdrop-filter: blur(12px);
    }
    .btn-cooldown.active { display: flex !important; }
    .btn-cooldown .timer {
      font-weight: 900;
      font-size: 2rem;
      color: #fff !important;
      text-shadow: 0 0 25px rgba(255,255,255,1);
    }
    .alert-login-btn.cooldown .btn-text { opacity: 0; }
    .contact-form input.error,
    .contact-form textarea.error {
      border-color: #fafafa !important;
      background: rgba(255,107,107,0.12) !important;
      box-shadow: 0 0 0 4px rgba(255,107,107,0.2);
    }

    /* === ПОДСВЕТКА ИКОНОК ХЕДЕРА — КАК В ПРИМЕРЕ === */
.header-icons .icon-btn,
.header-icons button[id*="Btn"] {

  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.15) !important;
  justify-content: center !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.35s ease !important;
  cursor: pointer !important;
}

.loader {
  position: fixed; inset: 0; z-index: 9999; background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; pointer-events: none;
  transition: opacity 1.2s var(--transition);
}
.loader::before {
  content: ''; width: 110px; height: 110px;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 1.8s linear infinite;
  box-shadow: 0 0 60px rgba(255,255,255,0.18);
}
.loader::after {
  content: 'PILIGRIM';
  position: absolute;
  font-size: 1.2rem;
  letter-spacing: 12px;
  font-weight: 100;
  color: #fff;
  opacity: 0;
  animation: fadeIn 0.8s ease 0.3s forwards;   /* ← теперь появляется сразу и быстро */
}
.loader.hidden { opacity: 0; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { to { opacity: 1; } }

/* ==================================================================
   СВЕТЛАЯ ТЕМА — полностью рабочая версия (2025)
   Просто добавь в конец CSS и переключи через data-theme="light"
================================================================== */
html[data-theme="light"] {
  --bg: #fafafa;
  --text: #0f0f0f;
  --gray: #666666;
  --light: rgba(15,15,15,0.08);
  --hover: rgba(15,15,15,0.12);
  --accent: #ff6b6b;
  --border: rgba(15,15,15,0.12);

  /* Фон и шум */
  background: var(--bg);
  color: var(--text);
}
html[data-theme="light"] body::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.04"/></svg>');
}

/* Скроллбар */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* Курсор */
html[data-theme="light"] .custom-cursor { background: #000; }


html[data-theme="light"] .icon-btn:hover {
  background: rgba(15,15,15,0.18) !important;
  border-color: var(--text) !important;
}
html[data-theme="light"] .cart-count {
  background: #000 !important;
  color: #fff !important;
}

/* Мини-корзина */
html[data-theme="light"] #miniCartDropdown {
  background: rgba(255,255,255,0.98) !important;
  border: 1.5px solid rgba(15,15,15,0.12) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12) !important;
}



/* Делитель, бэк-то-топ, футер */
html[data-theme="light"] .divider { background: var(--border); }
html[data-theme="light"] footer { border-top: 1px solid var(--border); }
html[data-theme="light"] .back-to-top {
  background: rgba(15,15,15,0.08);
  border: 1px solid var(--border);
}
html[data-theme="light"] .back-to-top:hover {
  background: var(--hover);
  border-color: var(--text);
}
html[data-theme="light"] .footer-logo { filter: none !important; opacity: 0.7; }

/* Лоадер */
html[data-theme="light"] .loader {
  background: #fafafa;
}
html[data-theme="light"] .loader::before {
  border: 2px solid rgba(0,0,0,0.08);
  border-top-color: #000;
  box-shadow: 0 0 60px rgba(0,0,0,0.14);
}
html[data-theme="light"] .loader::after { color: #000; }

/* Все модалки и алерты */
html[data-theme="light"] .custom-alert-temp,
html[data-theme="light"] .custom-alert .alert-content,
html[data-theme="light"] .auth-modal-content,
html[data-theme="light"] #miniCartDropdown {
  background: rgba(255,255,255,0.98) !important;
  color: #000 !important;
  border-color: rgba(15,15,15,0.12) !important;
}
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea,
html[data-theme="light"] .auth-input {
  background: rgba(15,15,15,0.06) !important;
  border-color: rgba(15,15,15,0.25) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder {
  color: rgba(15,15,15,0.55) !important;
}

/* Кнопки в модалках */
html[data-theme="light"] .alert-login-btn,
html[data-theme="light"] .auth-btn,
html[data-theme="light"] #feedbackForm button[type="submit"] {
  background: #000 !important;
  color: #fff !important;
}
html[data-theme="light"] .alert-login-btn:hover,
html[data-theme="light"] .auth-btn:hover {
  background: #333 !important;
}

.center-last {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
  font-size: 1.1em;
}
/* ────────────────────────────────
   TYPEWRITER ЦИТАТА — ЛУЧШАЯ ВЕРСИЯ
   Поддержка тёмной/светлой темы + подчёркивание снизу
   ──────────────────────────────── */
/* ========================================= */

#typewriter {
  font-family: 'Georgia', 'Times New Roman', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5;
  ;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;

  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 10rem 5% 16rem;              /* большие фиксированные отступы сверху и снизу секции */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Убираем все min-height и justify-content: center — они и были виновниками прыжков */
#typewriter br {
  display: block;
  content: "";
  margin-top: 1.2em;
}

/* Основной текст цитаты */
#typewriter > *:not(.center-last) {
  margin: 0 0 5rem 0;                   /* фиксированный отступ снизу от цитаты до автора */
  padding: 0;
}

/* Ключевая строка с автором — всегда снизу на одном расстоянии */
#typewriter .center-last {
  display: block;
  margin: 5rem auto 0 auto;             /* ← главное: жёсткий отступ сверху */
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--text);
  position: relative;
  width: fit-content;
}

/* Подчёркивание под автором */
#typewriter .center-last::after {
  content: '';
  display: block;
  width: 90px;
  height: 1px;
  background: var(--text);
  opacity: 0.6;
  margin: 3.5rem auto 0;
  transition: all 0.4s ease;
}

#typewriter:hover .center-last::after {
  opacity: 1;
  width: 120px;
}

/* ========== АДАПТИВ ========== */
@media (max-width: 1024px) {
  #typewriter {
    font-size: 2.1rem;
    padding: 9rem 5% 14rem;
  }
  #typewriter > *:not(.center-last) { margin-bottom: 4.5rem; }
  #typewriter .center-last { 
    margin-top: 4.5rem; 
    font-size: 2.6rem; 
  }
}

@media (max-width: 768px) {
  #typewriter {
    font-size: 1.8rem;
    padding: 8rem 5% 12rem;
  }
  #typewriter > *:not(.center-last) { margin-bottom: 4rem; }
  #typewriter .center-last { 
    margin-top: 4rem; 
    font-size: 2.2rem; 
  }
  #typewriter .center-last::after { margin-top: 3rem; }
}

@media (max-width: 480px) {
  #typewriter {
    font-size: 1.55rem;
    padding: 7rem 5% 11rem;
  }
  #typewriter > *:not(.center-last) { margin-bottom: 3.5rem; }
  #typewriter .center-last { 
    margin-top: 3.5rem; 
    font-size: 1.9rem; 
  }
}


/* ФИКС: ВЕРНУТЬ КУРСОР НА КНОПКЕ "НАВЕРХ" */
.back-to-top,
.back-to-top i,
.back-to-top * {
  cursor: pointer !important;
}

/* Дополнительно — чуть ярче при наведении (по желанию) */
.back-to-top:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: #fff !important;
  transform: translateY(-4px);
}
html[data-theme="light"] .back-to-top:hover {
  background: rgba(0,0,0,0.18) !important;
  border-color: #000 !important;
}

/* СВЕТЛАЯ ТЕМА — ФИНАЛЬНЫЙ ВИД ХЕДЕРА (то, что ты хотел) */
html[data-theme="light"] header {
  background: transparent !important;
  border-bottom: 1px solid rgba(15,15,15,0.12) !important;
  backdrop-filter: blur(20px);
  transition: all .4s ease;
}

html[data-theme="light"] header.scrolled {
  background: rgba(250, 250, 250, 0.92) !important;   /* белый стеклянный бар */
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(15,15,15,0.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}

/* Логотип и иконки — всегда чёрные в светлой теме (и вверху, и после скролла) */
html[data-theme="light"] .logo-img {
  filter: none !important;                  /* чёрный логотип */
}
html[data-theme="light"] header.scrolled .logo-img {
  height: 100px;
  filter: none !important;                  /* остаётся чёрным */
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .header-icons .icon-btn,
html[data-theme="light"] .header-icons i,
html[data-theme="light"] .header-icons button {
  color: #000 !important;
  border-color: rgba(15,15,15,0.22) !important;
}
html[data-theme="light"] header.scrolled .nav-link,
html[data-theme="light"] header.scrolled .header-icons .icon-btn,
html[data-theme="light"] header.scrolled .header-icons i {
  color: #000 !important;
  border-color: rgba(15,15,15,0.28) !important;
}

/* При ховере — чуть темнее (как в macOS) */
html[data-theme="light"] .icon-btn:hover,
html[data-theme="light"] header.scrolled .icon-btn:hover {
  background: rgba(15,15,15,0.12) !important;
  border-color: rgba(15,15,15,0.4) !important;
}

/* 1. Человечек до входа — ЧЁРНЫЙ в светлой теме */
html[data-theme="light"] .icon-btn i.fas.fa-user {
  color: #000000 !important;
}
html[data-theme="light"] header.scrolled .icon-btn i.fas.fa-user {
  color: #000000 !important;
}

/* После входа — если у тебя там эмодзи, он и так чёрный, но на всякий случай */
html[data-theme="light"] .logged-in .live-emoji {
  color: #000000 !important;
}

/* 2. ВНУТРЕННЯЯ ПОИСКОВАЯ СТРОКА — ТЁМНАЯ В СВЕТЛОЙ ТЕМЕ */
html[data-theme="light"] .search-input {
  background: rgba(15, 15, 15, 0.08) !important;
  border: 1.5px solid rgba(15, 15, 15, 0.22) !important;
  color: #000000 !important;
  backdrop-filter: blur(12px) !important;
}
html[data-theme="light"] .search-input::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="light"] .search-input:focus {
  background: rgba(15, 15, 15, 0.14) !important;
  border-color: #000000 !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12) !important;
}

/* Иконка лупы в поиске — тоже чёрная */
html[data-theme="light"] .search-icon i {
  color: #000000 !important;
}

/* Кнопка очистки × — чёрная */
html[data-theme="light"] .search-clear {
  color: #000000 !important;
  background: rgba(15, 15, 15, 0.1) !important;
}
html[data-theme="light"] .search-clear:hover {
  background: rgba(15, 15, 15, 0.2) !important;
}

/* СВЕТЛАЯ ТЕМА — ДЕЛАЕМ КУРСОР ВИДНЫМ НА БЕЛОМ ФОНЕ */
html[data-theme="light"] .custom-cursor {
  background: #000 !important;
  mix-blend-mode: normal !important;     /* ← САМОЕ ГЛАВНОЕ! */
  opacity: 0.85;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

html[data-theme="light"] .custom-cursor.hover {
  background: #000 !important;
  transform: translate(-50%, -50%) scale(2.6);
  opacity: 1;
  box-shadow: 0 0 16px rgba(0,0,0,0.4);
}

/* ==================================================================
   МОДАЛКА ОБРАТНОЙ СВЯЗИ — СВЕТЛАЯ ТЕМА (2025)
   Добавь в самый конец CSS
================================================================== */
html[data-theme="light"] .custom-alert {
  background: rgba(250, 250, 250, 0.96) !important;
  backdrop-filter: blur(20px) !important;
}

html[data-theme="light"] .custom-alert .alert-content {
  background: #ffffff !important;
  border: 1.5px solid rgba(15, 15, 15, 0.15) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.14) !important;
  color: #000 !important;
}

html[data-theme="light"] .alert-close {
  background: rgba(15, 15, 15, 0.08) !important;
  border: 1.2px solid rgba(15, 15, 15, 0.22) !important;
  color: #000 !important;
}
html[data-theme="light"] .alert-close:hover {
  background: rgba(15, 15, 15, 0.18) !important;
  transform: scale(1.1);
}

html[data-theme="light"] .alert-icon {
  color: #ff9500 !important;
  text-shadow: 0 0469 24px rgba(255, 149, 0, 0.4) !important;
}

html[data-theme="light"] .alert-text strong,
html[data-theme="light"] .alert-text span {
  color: #000 !important;
}
html[data-theme="light"] .alert-text strong {
  font-weight: 700;
}
html[data-theme="light"] .alert-text span {
  opacity: 0.88;
}

/* Поля ввода */
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea {
  background: rgba(15, 15, 15, 0.06) !important;
  border: 1.5px solid rgba(15, 15, 15, 0.28) !important;
  color: #000 !important;
}
html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form textarea:focus {
  border-color: #ff9500 !important;
  background: rgba(15, 15, 15, 0.11) !important;
  box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.14) !important;
}

/* Кнопка "Изменить" номер */
html[data-theme="light"] .edit-phone-btn {
  background: rgba(15, 15, 15, 0.12) !important;
  border: 1.2px solid rgba(15, 15, 15, 0.28) !important;
  color: #000 !important;
}
html[data-theme="light"] .edit-phone-btn:hover {
  background: rgba(15, 15, 15, 0.22) !important;
}

/* Главная кнопка отправки */
html[data-theme="light"] .alert-login-btn {
  background: #000 !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22) !important;
}
html[data-theme="light"] .alert-login-btn:hover:not(:disabled) {
  background: #333 !important;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

/* Кулдаун оверлей (когда отправка на таймере) */
html[data-theme="light"] .btn-cooldown {
  background: rgba(0, 0, 0, 0.92) !important;
  color: #fff !important;
}
html[data-theme="light"] .btn-cooldown .timer {
  color: #fff !important;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
}

/* Ошибки полей */
html[data-theme="light"] .contact-form input.error,
html[data-theme="light"] .contact-form textarea.error {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, 0.11) !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.18) !important;
}

/* ЛОГОТИП — ЧЁРНЫЙ В СВЕТЛОЙ ТЕМЕ (хедер + футер) */
html[data-theme="light"] .logo-img,
html[data-theme="light"] .footer-logo {
  filter: none !important;           /* убираем инверсию */
  opacity: 1 !important;
}

html[data-theme="light"] header .logo-img,
html[data-theme="light"] header.scrolled .logo-img,
html[data-theme="light"] .footer-logo {
  filter: brightness(0) !important;  /* чисто чёрный цвет */
}

/* На всякий случай — если где-то ещё используется логотип */
html[data-theme="light"] img[src*="logo.png"],
html[data-theme="light"] img[src*="logo"] {
  filter: brightness(0) !important;
}
/* ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ КНОПКИ "ОФОРМИТЬ ЗАКАЗ" В МИНИ-КОРЗИНЕ — СВЕТЛАЯ ТЕМА */
html[data-theme="light"] .go-to-cart-btn,
html[data-theme="light"] .go-to-cart-btn.custom-cursor-on-hover,
html[data-theme="light"] #miniCartDropdown .go-to-cart-btn {
  background: #000000 !important;
  color: #ffffff !important;
  transition: all 0.35s ease !important;
}

html[data-theme="light"] .go-to-cart-btn:hover,
html[data-theme="light"] .go-to-cart-btn.custom-cursor-on-hover:hover,
html[data-theme="light"] #miniCartDropdown .go-to-cart-btn:hover {
  background: #1a1a1a !important;   /* тёмно-серый вместо чёрного при ховере */
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
}

/* ==================================================================
   АЛЕРТЫ И ТОСТЫ — СВЕТЛАЯ ТЕМА (2025) — contacts.css стиль
================================================================== */
html[data-theme="light"] .custom-alert-temp,
html[data-theme="light"] .toast-alert,
html[data-theme="light"] .alert-content,
html[data-theme="light"] .custom-alert .alert-content {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1.6px solid rgba(15, 15, 15, 0.16) !important;
  color: #000 !important;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.18),
    0 8px 25px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(24px) !important;
}

/* Успешный алерт — зелёная полоска слева */
html[data-theme="light"] .custom-alert-temp.success,
html[data-theme="light"] .toast-alert.success {
  border-left: 6px solid #4ade80 !important;
}

/* Ошибка — красная полоска */
html[data-theme="light"] .custom-alert-temp.error,
html[data-theme="light"] .toast-alert.error {
  border-left: 6px solid #ff6b6b !important;
}

/* Текст внутри */
html[data-theme="light"] .alert-text,
html[data-theme="light"] .alert-text strong,
html[data-theme="light"] .alert-text span,
html[data-theme="light"] .toast-alert .alert-text strong,
html[data-theme="light"] .toast-alert .alert-text span {
  color: #000 !important;
}

html[data-theme="light"] .alert-text strong,
html[data-theme="light"] .toast-alert .alert-text strong {
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: #000 !important;
}

html[data-theme="lightiot"] .alert-text span,
html[data-theme="light"] .toast-alert .alert-text span {
  opacity: 0.88 !important;
  font-size: 1.05rem !important;
}

/* Иконки */
html[data-theme="light"] .custom-alert-temp i,
html[data-theme="light"] .toast-alert i {
  color: #000 !important;
  opacity: 0.9;
}

/* Крестик закрытия */
html[data-theme="light"] .alert-close {
  background: rgba(15, 15, 15, 0.1) !important;
  border: 1.4px solid rgba(15, 15, 15, 0.25) !important;
  color: #000 !important;
}
html[data-theme="light"] .alert-close:hover {
  background: rgba(15, 15, 15, 0.22) !important;
  transform: scale(1.1) !important;
}

/* Таймер на кнопке (кулдаун) */
html[data-theme="light"] .btn-cooldown,
html[data-theme="light"] .btn-cooldown.active {
  background: rgba(0, 0, 0, 0.92) !important;
  color: #fff !important;
}
html[data-theme="light"] .btn-cooldown .timer {
  color: #fff !important;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.9) !important;
}

/* Специально для тостов внизу экрана */
html[data-theme="light"] .toast-alert {
  border: 1.6px solid rgba(15, 15, 15, 0.18) !important;
  background: #ffffff !important;
  backdrop-filter: blur(28px) !important;
}
html[data-theme="light"] .toast-alert.show {
  transform: translateX(-50%) translateY(0) !important;
}

    /* === ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ — ВИСЯЩАЯ ЛАМПОЧКА === */
.theme-toggle-hanging {
  position: fixed;
  top: 90px;           /* под хедером */
  right: 6%;
  z-index: 999;
  pointer-events: auto;
  transform: translateY(-50%);
}

/* При скролле хедера — лампочка опускается ниже */
header.scrolled ~ .theme-toggle-hanging,
header.scrolled + .theme-toggle-hanging {
  top: 76px;
}

.theme-toggle-input { display: none; }

.theme-toggle-label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.theme-toggle-label:hover { transform: translateY(-4px); }
.theme-toggle-label:active { transform: translateY(6px); }

/* Верёвка сверху */
.rope.top {
  width: 2px;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.4), rgba(255,255,255,0.15));
  box-shadow: 0 0 8px rgba(255,255,255,0.25);
  position: relative;
  transition: all 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-theme="light"] .rope.top {
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.22), rgba(0,0,0,0.08));
  box-shadow: 0 0 6px rgba(0,0,0,0.12);
}

/* Блеск на верёвке */
.rope.top::before {
  content: '';
  position: absolute;
  top: 0; left: -4px; right: -4px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  border-radius: 2px;
  animation: rope-shine 3s infinite ease-in-out;
}
[data-theme="light"] .rope.top::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.15), transparent);
}
@keyframes rope-shine {
  0%,100% { opacity: 0.2; }
  50% { opacity: 0.7; }
}

/* Лампочка */
.bulb {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 28%, #fffbe6, #ffd700);
  border: 1.5px solid rgba(255,215,0,0.7);
  position: relative;
  box-shadow: 0 0 24px rgba(255,215,0,0.5), inset 0 0 12px rgba(255,255,255,0.7), 0 6px 12px rgba(0,0,0,0.3);
  transition: all 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bulb::before {
  content: ''; position: absolute; inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffbe6, #ffed9e);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* Свет внутри лампочки */
.bulb-light {
  position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,150,0.95), rgba(255,235,100,0.7), transparent 70%);
  opacity: 0;
  transition: opacity 1s ease;
}
.theme-toggle-input:checked + .theme-toggle-label .bulb-light { opacity: 1; }

/* Внешнее свечение */
.bulb-glow {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px;
  background: radial-gradient(circle, rgba(255,220,100,0.35), transparent 70%);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.theme-toggle-input:checked + .theme-toggle-label .bulb-glow { opacity: 1; }

/* Нижняя часть верёвки */
.rope.bottom {
  width: 2px; height: 22px;
  background: inherit;
  margin-top: -3px;
}

/* Светлая тема — лампочка выключена */
[data-theme="light"] .bulb {
  background: radial-gradient(circle at 30% 30%, #f0f0f0, #bbbbbb);
  border-color: rgba(0,0,0,0.25);
  box-shadow: 0 0 10px rgba(0,0,0,0.15), inset 0 0 8px rgba(0,0,0,0.1), 0 6px 12px rgba(0,0,0,0.2);
}
[data-theme="light"] .bulb::before {
  background: radial-gradient(circle at 40% 40%, #ffffff, #dddddd);
}
[data-theme="light"] .bulb-light,
[data-theme="light"] .bulb-glow { opacity: 0 !important; }

/* Адаптив */
@media (max-width: 992px) {
  .theme-toggle-hanging { right: 5%; }
}
@media (max-width: 768px) {
  .theme-toggle-hanging { right: 20px; top: 80px; }
  header.scrolled ~ .theme-toggle-hanging { top: 70px; }
}
/* ============================================= */
/* АДАПТАЦИЯ ХЕДЕРА ДЛЯ НОУТБУКОВ 1024–1440px    */
/* Самая важная часть — делаем хедер компактным  */
/* ============================================= */
@media (min-width: 1024px) and (max-width: 1440px) {
  header.main-header {
    padding: 1.8rem 4% !important;        /* меньше боковых отступов */
    height: 84px !important;
  }

  header.main-header.scrolled {
    padding: 1rem 4% !important;
    height: 70px !important;
  }

  .logo-img {
    height: 100px !important;
  }
  header.scrolled .logo-img {
    height: 84px !important;
  }

  /* Навигация — ближе друг к другу */
  .desktop-nav {
    gap: clamp(1.2rem, 2.8vw, 3.2rem) !important;
  }

  .nav-link {
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    letter-spacing: 1.4px !important;
  }

  /* Иконки справа — чуть меньше и ближе */
  .header-icons {
    gap: clamp(0.6rem, 1.4vw, 1.6rem) !important;
  }

  .icon-btn {
    width: clamp(42px, 2.8vw, 48px) !important;
    height: clamp(42px, 2.8vw, 48px) !important;
    font-size: clamp(1rem, 1.2vw, 1.3rem) !important;
  }

  /* Поисковая строка — чуть уже */
  .search-container {
    width: clamp(180px, 22vw, 260px) !important;
  }

  /* Лампочка темы — не уезжает в край */
  .theme-toggle-hanging {
    right: 4% !important;
  }
}

/* Дополнительно: для экранов 1024–1280px — ещё плотнее */
@media (min-width: 1024px) and (max-width: 1280px) {
  header.main-header {
    padding: 1.6rem 3% !important;
  }
  header.main-header.scrolled {
    padding: 0.9rem 3% !important;
  }

  .desktop-nav {
    gap: clamp(1rem, 2.2vw, 2.6rem) !important;
  }

  .nav-link {
    font-size: 0.92rem !important;
    letter-spacing: 1.2px !important;
  }

  .header-icons {
    gap: 0.8rem !important;
  }

  .icon-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .search-container {
    width: 200px !important;
  }
}

/* Финальный штрих: убираем слишком большие отступы в main на ноутбуках */
@media (max-width: 1440px) {
  main {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

@media (max-width: 1280px) {
  main {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
}
/* ===================================================== */
/* ПОЛНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ 320–480 px (iPhone SE и выше) */
/* Чёрно-белый минимализм 2025, ничего не вылезает      */
/* ===================================================== */

@media (max-width: 480px) {

  /* Основные отступы страницы */
  main {
    padding: 110px 4% 140px !important; /* место под фиксированный хедер + нижняя панель */
  }

  /* Заголовки страницы */
  .page-title {
    font-size: 2.8rem !important;
    letter-spacing: 6px !important;
    line-height: 1.1;
  }

  .page-subtitle {
    font-size: 0.94rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 6rem !important;
  }

  /* === КОНТАКТЫ === */
  .contacts-wrapper {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 8rem !important;
  }

  .contact-block {
    padding: 2rem 1.6rem !important;
    border-radius: 20px;
  }

  .contact-label {
    font-size: 0.72rem !important;
    letter-spacing: 3px !important;
  }

  .contact-value {
    font-size: 1.72rem !important;
    font-weight: 100 !important;
  }

  /* === VISIT US & SHOWROOM === */
  .visit-us,
  .showroom {
    margin: 8rem 0 !important;
    padding: 0 4% !important;
  }

  .visit-us h2,
  .showroom h2 {
    font-size: 3.4rem !important;
    letter-spacing: 7px !important;
  }

  .visit-us p,
  .showroom p {
    font-size: 1.12rem !important;
    line-height: 1.6;
  }

  /* === ДЕЛИТЕЛЬ === */
  .divider {
    max-width: 80% !important;
    margin: 8rem auto !important;
  }

  /* === ФИЛОСОФИЯ / TYPEWRITER === */
  .philosophy {
    margin: 9rem 0 !important;
    padding: 0 5% !important;
  }

  .philosophy blockquote,
  #typewriter {
    font-size: 1.62rem !important;
    line-height: 1.55;
    padding: 0 !important;
  }

  #typewriter .center-last {
    font-size: 2.1rem !important;
    margin-top: 3rem !important;
  }

  #typewriter .center-last::after {
    margin-top: 2.8rem !important;
  }

  .philosophy cite {
    margin-top: 2.5rem !important;
    font-size: 0.84rem !important;
  }

  /* === INSTAGRAM === */
  .instagram-feed h2 {
    font-size: 3.3rem !important;
    margin-bottom: 3.5rem !important;
  }

  .insta-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
  }

  .insta-item {
    border-radius: 12px;
  }

  /* === NEWSLETTER === */
  .newsletter h2 {
    font-size: 3.3rem !important;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 1rem;
  }

  .newsletter-input,
  .newsletter-btn {
    height: 56px;
    border-radius: 16px;
  }

  /* === СОЦСЕТИ === */
  .social-wrapper {
    gap: 2.4rem !important;
    margin: 7rem 0 !important;
  }

  .social-wrapper a {
    font-size: 2.4rem !important;
  }

  /* === РЕКВИЗИТЫ — больше не уезжают вправо === */
  .requisites-wrapper {
    margin: 8rem auto 0 !important;
    max-width: 100% !important;
    padding: 0 5% !important;
  }

  .requisites-grid {
    grid-template-columns: 1fr !important;
    gap: 2.2rem !important;
    text-align: center;
  }

  .req-title {
    font-size: 0.72rem !important;
    letter-spacing: 2.6px !important;
  }

  /* === ФУТЕР === */
  footer {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 5rem 5% 3rem !important;
    text-align: center;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    text-align: center;
  }

  .footer-links {
    justify-content: center;
    gap: 1.8rem;
  }

  .footer-logo {
    height: 64px !important;
  }

  /* Кнопка наверх */
  .back-to-top {
    width: 48px;
    height: 48px;
    bottom: 100px; /* над нижней панелью */
    right: 16px;
  }
}

/* Экстра-узкие экраны 320–360 px (iPhone SE 1-го поколения, 5/5s) */
@media (max-width: 360px) {
  .page-title       { font-size: 2.5rem !important; }
  .visit-us h2,
  .showroom h2      { font-size: 3rem !important; }
  .contact-value    { font-size: 1.58rem !important; }
  .philosophy blockquote,
  #typewriter       { font-size: 1.5rem !important; }
  #typewriter .center-last { font-size: 1.9rem !important; }
  main              { padding-left: 3% !important; padding-right: 3% !important; }
}

/* ============================================= */
/* АДАПТАЦИЯ ПЛАВАЮЩЕЙ КНОПКИ AI-ЧАТА           */
/* Работает на всех телефонах, включая iPhone SE */
/* ============================================= */

#ai-assistant {
  position: fixed;
  z-index: 998;                    /* ниже нижней панели (z-index:1000), но выше контента */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  border: 1.5px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.42s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ховер + активное состояние */
#ai-assistant:hover {
  transform: scale(1.12) translateY(-4px);
  background: rgba(255,255,255,0.16);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.35);
}

#ai-assistant:active {
  transform: scale(0.96);
}

/* === МОБИЛЬНАЯ АДАПТАЦИЯ === */
@media (max-width: 480px) {
  #ai-assistant {
    width: 58px !important;
    height: 58px !important;
    font-size: 1.9rem !important;
    bottom: 108px !important;   /* над нижней панелью (92px + safe-area) */
    right: 16px !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  }

  #ai-assistant:hover {
    transform: scale(1.14) translateY(-4px);
  }
}

/* Для самых узких экранов (iPhone SE 1-го поколения, 320px) */
@media (max-width: 360px) {
  #ai-assistant {
    width: 54px !important;
    height: 54px !important;
    font-size: 1.75rem !important;
    bottom: 104px !important;
    right: 14px !important;
  }
}

/* Светлая тема — иконка остаётся читаемой */
html[data-theme="light"] #ai-assistant {
  background: rgba(15,15,15,0.09) !important;
  border: 1.5px solid rgba(15,15,15,0.22) !important;
  color: #000 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}

html[data-theme="light"] #ai-assistant:hover {
  background: rgba(15,15,15,0.16) !important;
  border-color: rgba(15,15,15,0.38) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.24) !important;
}

@media (max-width: 1023px) {
  .back-to-top {
    display: none !important;
  }
}

/* ============================================= */
/* ФИНАЛЬНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ — 100% РАБОТАЕТ */
/* Нижняя панель + AI-робот + кнопка наверх     */
/* ============================================= */

@media (max-width: 1023px) {
  /* 1. Делаем место под нижнюю панель (92px + safe-area) */
  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  main {
    padding-bottom: 140px !important; /* запас под всё */
  }

  /* 2. Кнопка "наверх" — возвращаем и поднимаем над панелью */
  .back-to-top {
    display: flex !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important; /* над нижней панелью */
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
    background: rgba(255,255,255,0.11) !important;
    border: 1.5px solid rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(12px);
    z-index: 998 !important; /* ниже панели, но выше контента */
  }

  .back-to-top.visible {
    opacity: 1;
    visibility: visible;
  }

  /* 3. AI-робот — чуть выше кнопки "наверх" */
  #ai-assistant {
    bottom: calc(100px + env(safe-area-inset-bottom)) !important; /* над back-to-top */
    right: 16px !important;
    z-index: 997 !important;
  }

  /* Светлая тема — чтобы не сливалось */
  html[data-theme="light"] .back-to-top {
    background: rgba(15,15,15,0.11) !important;
    border-color: rgba(15,15,15,0.22) !important;
  }
  html[data-theme="light"] #ai-assistant {
    background: rgba(15,15,15,0.09) !important;
    border-color: rgba(15,15,15,0.22) !important;
  }
}

/* Экстра-узкие экраны (iPhone SE 1-го поколения) — чуть компактнее */
@media (max-width: 360px) {
  .back-to-top {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    width: 48px !important;
    height: 48px !important;
  }
  #ai-assistant {
    bottom: calc(158px + env(safe-area-inset-bottom)) !important;
    width: 54px !important;
    height: 54px !important;
  }
}

/* Полностью убираем кнопку "наверх" на всех устройствах */
.back-to-top,
.back-to-top * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================= */
/* МОБИЛЬНАЯ ШТОРКА ОБРАТНОЙ СВЯЗИ — iOS 18 STYLE */
/* Работает только на мобильных, на ПК — твоя модалка */
/* ============================================= */

/* === ОСНОВНАЯ ШТОРКА — ТОЛЬКО НА МОБИЛЕ === */
.feedback-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

.feedback-sheet.mobile-only {
  display: none;
}

@media (max-width: 1023px) {
  .feedback-sheet.mobile-only {
    display: block;
    pointer-events: auto;
  }
  
  .feedback-sheet.mobile-only.show {
    display: flex;
  }
}

/* === БЭКДРОП (затемнённый фон) === */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: auto;
}

.feedback-sheet.mobile-only.show .sheet-backdrop {
  opacity: 1;
}

/* === КОНТЕЙНЕР ШТОРКИ — ВЫЕЗЖАЕТ СНИЗУ === */
.sheet-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 95dvh; /* динамическая высота viewport */
  background: rgba(15, 15, 15, 0.98);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.feedback-sheet.mobile-only.show .sheet-container {
  transform: translateY(0);
}

/* === РУЧКА СВЕРХУ (как в iOS) === */
.sheet-handle {
  height: 4px;
  width: 40px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 12px auto 16px;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.feedback-sheet.mobile-only.show .sheet-handle {
  background: rgba(255, 255, 255, 0.4);
}

/* === КОНТЕНТ ШТОРКИ === */
.sheet-content {
  flex: 1;
  padding: 0 20px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
  display: flex;
  flex-direction: column;
}

/* === КНОПКА ЗАКРЫТИЯ — ПРАВАЯ ВЕРХНЯЯ === */
.sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.sheet-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.sheet-close:active {
  transform: scale(0.95);
}

/* === ИКОНА И ЗАГОЛОВОК === */
.sheet-icon {
  font-size: 3.2rem;
  color: #ff9500;
  margin: 8px auto 16px;
  text-align: center;
  text-shadow: 0 0 20px rgba(255, 149, 0, 0.6);
}

.sheet-title {
  text-align: center;
  margin-bottom: 24px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}

.sheet-subtitle {
  text-align: center;
  margin-bottom: 32px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* === ФОРМА В ШТОРКЕ === */
.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.sheet-form input,
.sheet-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sheet-form input::placeholder,
.sheet-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.sheet-form input:focus,
.sheet-form textarea:focus {
  outline: none;
  border-color: #ff9500;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
  transform: translateY(-1px);
}

.sheet-form textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

/* === ПОЛЕ ТЕЛЕФОНА — СПЕЦИАЛЬНОЕ === */
.phone-field-wrapper {
  position: relative;
}

.phone-field-wrapper input[type="tel"] {
  padding-right: 120px !important;
}

.edit-phone-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  display: none;
}

.edit-phone-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.05);
}

/* === КНОПКА ОТПРАВКИ === */
.sheet-submit-btn {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  color: #000;
  border: none;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
}

.sheet-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.sheet-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* === КУЛДАУН (таймер отправки) === */
.btn-cooldown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 16px;
  z-index: 5;
  backdrop-filter: blur(12px);
}

.btn-cooldown.active {
  display: flex !important;
}

.btn-cooldown .timer {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

/* === ОШИБКИ ПОЛЕЙ === */
.sheet-form input.error,
.sheet-form textarea.error {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2) !important;
}

/* === АНИМАЦИЯ ОТКРЫТИЯ КОНТЕНТА === */
.sheet-content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sheet-content > *:nth-child(1) { animation-delay: 0.1s; }
.sheet-content > *:nth-child(2) { animation-delay: 0.15s; }
.sheet-content > *:nth-child(3) { animation-delay: 0.2s; }
.sheet-content .sheet-form { animation-delay: 0.25s; }
.sheet-content .sheet-submit-btn { animation-delay: 0.3s; }

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================= */
/* АДАПТАЦИЯ ПОД iPhone SE (320px) — КОМПАКТНО! */
/* ============================================= */
@media (max-width: 360px) {
  .sheet-container {
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }
  
  .sheet-content {
    padding: 0 16px 28px;
  }
  
  .sheet-handle {
    width: 36px;
    margin: 10px auto 14px;
  }
  
  .sheet-close {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    top: 14px;
    right: 14px;
  }
  
  .sheet-icon {
    font-size: 2.8rem;
    margin: 6px auto 14px;
  }
  
  .sheet-title {
    font-size: 1.45rem;
    margin-bottom: 20px;
  }
  
  .sheet-subtitle {
    font-size: 0.95rem;
    margin-bottom: 28px;
    padding: 0 8px;
  }
  
  .sheet-form input,
  .sheet-form textarea {
    padding: 12px 14px;
    font-size: 0.95rem;
    border-radius: 14px;
  }
  
  .sheet-form textarea {
    min-height: 90px;
  }
  
  .sheet-submit-btn {
    padding: 14px 20px;
    font-size: 1rem;
    margin-top: 20px;
    border-radius: 14px;
  }
  
  .edit-phone-btn {
    right: 10px;
    padding: 5px 10px;
    font-size: 0.8rem;
  }
  
  .phone-field-wrapper input[type="tel"] {
    padding-right: 110px !important;
  }
}

/* ============================================= */
/* СВЕТЛАЯ ТЕМА — ШТОРКА */
/* ============================================= */
html[data-theme="light"] .feedback-sheet.mobile-only .sheet-container {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top-color: rgba(15, 15, 15, 0.12) !important;
}

html[data-theme="light"] .feedback-sheet.mobile-only .sheet-backdrop {
  background: rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] .sheet-handle {
  background: rgba(15, 15, 15, 0.25) !important;
}

html[data-theme="light"] .feedback-sheet.mobile-only.show .sheet-handle {
  background: rgba(15, 15, 15, 0.35) !important;
}

html[data-theme="light"] .sheet-close {
  background: rgba(15, 15, 15, 0.1) !important;
  border-color: rgba(15, 15, 15, 0.25) !important;
  color: #000 !important;
}

html[data-theme="light"] .sheet-close:hover {
  background: rgba(15, 15, 15, 0.2) !important;
}

html[data-theme="light"] .sheet-title {
  color: #000 !important;
}

html[data-theme="light"] .sheet-subtitle {
  color: rgba(15, 15, 15, 0.75) !important;
}

html[data-theme="light"] .sheet-form input,
html[data-theme="light"] .sheet-form textarea {
  background: rgba(15, 15, 15, 0.06) !important;
  border-color: rgba(15, 15, 15, 0.25) !important;
  color: #000 !important;
}

html[data-theme="light"] .sheet-form input::placeholder,
html[data-theme="light"] .sheet-form textarea::placeholder {
  color: rgba(15, 15, 15, 0.5) !important;
}

html[data-theme="light"] .sheet-form input:focus,
html[data-theme="light"] .sheet-form textarea:focus {
  border-color: #ff9500 !important;
  background: rgba(15, 15, 15, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15) !important;
}

html[data-theme="light"] .edit-phone-btn {
  background: rgba(15, 15, 15, 0.12) !important;
  border-color: rgba(15, 15, 15, 0.25) !important;
  color: #000 !important;
}

html[data-theme="light"] .edit-phone-btn:hover {
  background: rgba(15, 15, 15, 0.25) !important;
}

html[data-theme="light"] .sheet-submit-btn {
  background: linear-gradient(135deg, #000 0%, #333 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="light"] .sheet-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #333 0%, #555 100%) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="light"] .sheet-form input.error,
html[data-theme="light"] .sheet-form textarea.error {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2) !important;
}

/* === СВАЙП ДЛЯ ЗАКРЫТИЯ (iOS-style gesture) === */
.sheet-container {
  touch-action: pan-y;
}

@media (max-width: 1023px) {
  .sheet-container {
    transition: none; /* отключаем CSS-анимацию для свайпа */
  }
  
  /* Состояние во время свайпа */
  .sheet-swiping {
    transition: none !important;
  }
}

/* === ФИНАЛЬНЫЕ ШТРИХИ ДЛЯ iPhone SE === */
@media (max-width: 360px) and (max-height: 640px) {
  .sheet-container {
    max-height: 90dvh !important;
  }
  
  .sheet-content {
    padding-bottom: 24px !important;
  }
  
  .sheet-form {
    gap: 14px !important;
  }
  
  .sheet-submit-btn {
    margin-top: 20px !important;
    padding: 14px 20px !important;
  }
}

/* === ПОДДЕРЖКА SAFE AREA (iPhone X и новее) === */
@supports (padding: max(0px)) {
  .sheet-content {
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
  }
  
  .sheet-container {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ============================================ */
/* МОБИЛЬНАЯ ШТОРКА ФИДБЕКА — ФИНАЛЬНАЯ ВЕРСИЯ */
/* ============================================ */

/* === ШТОРКА СВЕРХУ — ПОЛНОСТЬЮ СКРЫТА === */
.mobile-feedback-top {
  display: none !important; /* ✅ УБИРАЕМ НАВСЕГДА */
}

/* === ОСНОВНАЯ ШТОРКА — ✅ ДО САМОГО ТЕЛЕФОНА === */
.mobile-feedback-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-primary);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-height: calc(100vh - env(safe-area-inset-bottom)); /* ✅ ДО САМОГО ТЕЛЕФОНА */
  height: calc(100vh - env(safe-area-inset-bottom)); /* ✅ ФИКСИРОВАННАЯ ВЫСОТА */
  overflow-y: auto;
  backdrop-filter: blur(30px);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3);
}

.mobile-feedback-sheet.active {
  transform: translateY(0);
}

/* ✅ УБИРАЕМ РУЧКУ — НЕ НУЖНА ПРИ ПОЛНОЙ ВЫСОТЕ */
.sheet-handle {
  display: none !important;
}

/* === ХЕДЕР ШТОРКИ — БОЛЬШЕ ПАДДИНГ СВЕРХУ === */
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px; /* ✅ МЕНЬШЕ ПАДДИНГ СНИЗУ */
  margin-bottom: 0; /* ✅ УБИРАЕМ МАРЖИН */
}

.sheet-back-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.sheet-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(0.98);
}

.sheet-title-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  gap: 12px;
}

.sheet-title-wrapper i {
  color: var(--accent-primary);
  font-size: 20px;
}

.sheet-title-wrapper h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

/* === ФОРМА — ✅ БЕЗ ДОПОЛНИТЕЛЬНОГО ПАДДИНГА СНИЗУ === */
.sheet-form {
  padding: 24px 24px 24px; /* ✅ МЕНЬШЕ ПАДДИНГ СНИЗУ */
  min-height: calc(100% - 80px); /* ✅ ЗАПОЛНЯЕТ ВСЮ ВЫСОТУ */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ✅ КНОПКА ОТПРАВКИ — ВСЕГДА ВНИЗУ ЭКРАНА */
.sheet-submit-btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  margin-top: 12px; /* ✅ МАЛЕНЬКИЙ МАРЖИН */
  flex-shrink: 0; /* ✅ НЕ СЖИМАЕТСЯ */
  order: 999; /* ✅ ВСЕГДА ПОСЛЕДНЯЯ */
}

.sheet-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.sheet-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

/* === ПОЛЯ ФОРМЫ === */
.sheet-field {
  margin-bottom: 20px; /* ✅ МЕНЬШЕ МАРЖИН */
  flex: 1;
}

.sheet-field:last-child {
  margin-bottom: 0; /* ✅ УБИРАЕМ МАРЖИН У ПОСЛЕДНЕГО */
}

.sheet-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}

.required {
  color: var(--accent-danger);
}

.sheet-field input,
.sheet-field textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 17px;
  transition: all 0.2s ease;
  backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.sheet-field input:focus,
.sheet-field textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

.sheet-field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.sheet-field input::placeholder,
.sheet-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ✅ КНОПКА "ИЗМЕНИТЬ" */
.edit-phone-btn {
  position: absolute !important;
  right: 12px !important;
  top: 60% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  backdrop-filter: blur(14px) !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
}

.edit-phone-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-50%) scale(0.98) !important;
}

/* === ТЕМНАЯ ТЕМА — ЧЕРНАЯ === */
[data-theme="dark"] .mobile-feedback-sheet {
  background: #0a0a0a !important;
}

[data-theme="dark"] .sheet-field input,
[data-theme="dark"] .sheet-field textarea {
  background: rgba(20, 20, 20, 0.9) !important;
  border-color: rgba(50, 50, 50, 0.8) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .sheet-field input::placeholder,
[data-theme="dark"] .sheet-field textarea::placeholder {
  color: rgba(150, 150, 150, 0.6) !important;
}

[data-theme="dark"] .sheet-field input:focus,
[data-theme="dark"] .sheet-field textarea:focus {
  background: rgba(25, 25, 25, 0.95) !important;
  border-color: var(--accent-primary) !important;
}

/* === АНИМАЦИЯ === */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-feedback-sheet.active {
  animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === iOS SAFARI ФИКС === */
@supports (padding: max(0px)) {
  .mobile-feedback-sheet {
    max-height: calc(100vh - max(0px, env(safe-area-inset-bottom)));
    height: calc(100vh - max(0px, env(safe-area-inset-bottom)));
  }
}

/* === БЛОКИРОВКА СКРОЛЛА === */
body.sheet-open {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* ✅ УБИВАЕМ ВСЕ ЛОАДЕРЫ НАВСЕГДА! */
.sheet-submit-btn .btn-loading,
.sheet-submit-btn .fa-spinner,
.sheet-submit-btn [class*="loading"],
.sheet-submit-btn .btn-cooldown {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ ЕСЛИ КРУЖОК ВНУТРИ КНОПКИ */
.sheet-submit-btn::before,
.sheet-submit-btn::after {
  display: none !important;
}

/* ===================================================== */
/* ПОЛНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ 2025 — iPhone SE и выше  */
/* Работает на 320–480px, включая старый SE (320×568)    */
/* ===================================================== */

@media (max-width: 480px) {
  /* Отступы страницы — место под хедер + нижняя панель */
  main {
    padding: 100px 5% 160px !important; /* сверху место под шапку, снизу под bottom bar + safe-area */
  }

  /* Заголовки */
  .page-title {
    font-size: 2.9rem !important;
    letter-spacing: 6px !important;
    line-height: 1.1;
    word-break: keep-all;
  }
  .page-subtitle {
    font-size: 0.95rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 5rem !important;
  }

  /* Контакты */
  .contacts-wrapper {
    grid-template-columns: 1fr !important;
    gap: 3.5rem !important;
    margin-bottom: 9rem !important;
  }
  .contact-value {
    font-size: 1.8rem !important;
  }
  .contact-label {
    font-size: 0.75rem !important;
  }

  /* Блоки Visit Us / Showroom / Instagram / Newsletter */
  .visit-us h2,
  .showroom h2,
  .instagram-feed h2,
  .newsletter h2 {
    font-size: 3.3rem !important;
    letter-spacing: 8px !important;
  }
  .visit-us p,
  .showroom p {
    font-size: 1.15rem !important;
  }

  /* Typewriter цитата */
  #typewriter, .philosophy blockquote {
    font-size: 1.65rem !important;
    line-height: 1.5;
  }
  #typewriter .center-last,
  .philosophy .center-last {
    font-size: 2.1rem !important;
    margin-top: 3rem !important;
  }
  #typewriter .center-last::after {
    margin-top: 2.8rem !important;
  }

  /* Instagram */
  .insta-grid {
    gap: 4px !important;
  }

  /* Форма рассылки */
  .newsletter-form {
    flex-direction: column;
    gap: 1rem;
  }
  .newsletter-input,
  .newsletter-btn {
    height: 56px !important;
    border-radius: 16px !important;
  }

  /* Соцсети */
  .social-wrapper {
    gap: 2.2rem !important;
    margin: 8rem 0 !important;
  }
  .social-wrapper a {
    font-size: 2.3rem !important;
  }

  /* Реквизиты — по центру */
  .requisites-wrapper {
    margin: 9rem auto 0 !important;
    padding: 0 6% !important;
  }
  .requisites-grid {
    grid-template-columns: 1fr !important;
    gap: 2.2rem !important;
    text-align: center;
  }

  /* Футер */
  footer {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 5rem 6% 4rem !important;
    text-align: center;
  }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }
  .footer-logo {
    height: 66px !important;
  }

  /* Нижняя панель — ещё компактнее */
  .mobile-bottom-bar {
    height: 86px !important;
    padding: 6px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 18px !important;
  }
  .mobile-bottom-bar .bottom-bar-btn,
  .mobile-bottom-bar #authBtn {
    font-size: 1.45rem !important;
    height: 62px !important;
    gap: 3px !important;
  }
  .mobile-bottom-bar .bottom-bar-btn::after,
  .mobile-bottom-bar #authBtn::after {
    font-size: 0.62rem !important;
    bottom: 5px !important;
  }

  /* AI-чат и кнопка наверх — поднимаем выше нижней панели */
  #ai-assistant {
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.8rem !important;
  }
}

/* Экстра-узкие экраны: iPhone SE 1-го поколения, iPhone 5/5s (320px) */
@media (max-width: 360px) {
  main { padding: 100px 4% 150px !important; }

  .page-title { font-size: 2.55rem !important; letter-spacing: 5px !important; }
  .contact-value { font-size: 1.65rem !important; }

  .visit-us h2,
  .showroom h2,
  .instagram-feed h2,
  .newsletter h2 { font-size: 3rem !important; }

  #typewriter,
  .philosophy blockquote { font-size: 1.5rem !important; }
  #typewriter .center-last { font-size: 1.95rem !important; }

  .mobile-bottom-bar {
    height: 82px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .mobile-bottom-bar .bottom-bar-btn,
  .mobile-bottom-bar #authBtn {
    font-size: 1.4rem !important;
  }

  #ai-assistant {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.7rem !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

/* Safe Area для iPhone с чёлкой и без */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-bar {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ============================================= */
/* TELEGRAM-КАРУСЕЛЬ 2025 — ТОНКИЙ БАР, РАБОТАЕТ БЕЗ БАГОВ */
/* Первый слайд активен сразу, при свайпе — только текущий горит */
/* ============================================= */

.instagram-feed h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-weight: 700;
  font-size: 1.9rem;
}

.insta-wrapper {
  position: relative;
  margin: 5rem 0;
  padding: 0 16px;
}

/* ДЕСКТОП — СЕТКА */
@media (min-width: 1025px) {
  .insta-wrapper { margin: 7rem 0; padding: 0 8px; }
  #instaCarousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .insta-slide { aspect-ratio: 1/1; border-radius: 28px; overflow: hidden; box-shadow: 0 14px 45px rgba(0,0,0,.28); transition: all .45s ease; }
  .insta-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
  .insta-slide:hover { transform: translateY(-10px); box-shadow: 0 32px 70px rgba(0,0,0,.4); }
  .insta-slide:hover img { transform: scale(1.18); }
  .insta-bottom-ui { display: none !important; }
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 1024px) {
  #instaCarousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 0 8px 44px 8px;
  }
  #instaCarousel::-webkit-scrollbar { display: none; }

  .insta-slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1/1;
    scroll-snap-align: center;
  }
  .insta-slide a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 55px rgba(0,0,0,.48);
  }
  .insta-slide img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 28px;
  }

  /* ТОНКИЙ И КРАСИВЫЙ БАР */
  .insta-bottom-ui {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 9px 18px;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(16px);
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    z-index: 10;
  }

  .insta-progress {
    display: flex;
    gap: 8px;
  }

  .insta-progress > div {
    width: 36px;           /* тоньше и короче */
    height: 3px;           /* супер-тонкий! */
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }

  .insta-progress > div::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 10px rgba(255,255,255,.8);
  }

  /* ВАЖНО: убираем активность со всех по умолчанию */
  .insta-progress > div::after { transform: scaleX(0); }

  /* Только текущий (через JS) будет активен */
  .insta-progress > div.active::after {
    transform: scaleX(1);
  }

  /* СВЕТЛАЯ ТЕМА */
  [data-theme="light"] .insta-bottom-ui {
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 35px rgba(0,0,0,.15);
  }
  [data-theme="light"] .insta-progress > div { background: rgba(0,0,0,.2); }
  [data-theme="light"] .insta-progress > div::after {
    background: #000;
    box-shadow: 0 0 12px rgba(0,0,0,.5);
  }
}
/* ================================================= */
/* ФИКС ЦИТАТЫ — ТОЛЬКО НА МОБИЛЬНЫХ (≤1023px)      */
/* На десктопе — всё остаётся как было изначально   */
/* ================================================= */
@media (max-width: 1023px) {
  .philosophy {
    margin: 14rem 0 18rem;
    padding: 0 1.5rem;
  }

  .philosophy blockquote {
    font-size: clamp(1.75rem, 5.8vw, 2.6rem) !important;
    line-height: 1.48 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .philosophy .typewriter {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    white-space: normal !important;
  }

  /* Самое важное — подпись всегда под текстом и не уезжает вверх */
  .philosophy cite {
    display: block !important;
    margin-top: 5rem !important;        /* большой отступ от текста */
    margin-bottom: -1rem !important;
    font-size: 0.98rem !important;
    letter-spacing: 5px !important;
    color: var(--gray) !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2;
  }
}

/* Дополнительно — для iPhone SE и совсем узких экранов */
@media (max-width: 380px) {
  .philosophy {
    margin: 12rem 0 16rem;
  }
  
  .philosophy blockquote {
    font-size: 1.7rem !important;
  }
  
  .philosophy cite {
    margin-top: 6rem !important;
    font-size: 0.92rem !important;
  }
}

/* Светлая тема — чтобы подпись не сливалась */
html[data-theme="light"] .philosophy cite {
  color: #555 !important;
}

#authAlert .alert-content {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
  padding: 2.8rem 2rem 2.4rem !important;
}

#authAlert .alert-icon {
  margin-bottom: 1.4rem !important;
}

#authAlert .alert-text {
  margin-bottom: 1.8rem !important;
}

#authAlert .alert-login-btn,
#authAlert #authBtnFeedback {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

/* Дополнительно — на совсем узких экранах (iPhone SE) */
@media (max-width: 370px) {
  #authAlert .alert-content {
    padding: 2.4rem 1.6rem !important;
  }
  #authAlert .alert-login-btn {
    font-size: 1rem !important;
    padding: 0.9rem 1.6rem !important;
  }
}

/* ======================================================= */
/* ФИКС ПОИСХОДА ПОИСКА НА 1024–1440 px (ноутбуки, планшеты) */
/* ======================================================= */
@media (max-width: 1440px) and (min-width: 1024px) {
  /* 1. Сужаем логотип при открытом поиске */
  header.main-header.search-active .logo-img {
    height: 80px !important;           /* было 120px → теперь влезает */
    transition: height 0.4s ease;
  }

  /* 2. Сдвигаем навигацию и иконки чуть левее, когда поиск открыт */
  header.main-header.search-active .desktop-nav {
    gap: 1.8rem;                      /* вместо clamp(2rem,4vw,5rem) */
  }

  header.main-header.search-active .header-icons {
    gap: 0.8rem;                      /* сильно экономим место справа */
  }

  /* 3. Если всё равно не влезает — прячем иконку корзины и профиля,
        оставляем только крестик закрытия поиска */
  header.main-header.search-active .header-icons .icon-btn:not(.search-close-btn) {
    opacity: 0;
    visibility: hidden;
    width: 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.4s ease;
  }

  /* 4. Крестик закрытия поиска делаем чуть меньше и ближе к краю */
  header.main-header.search-active .search-close-btn {
    width: 42px !important;
    height: 42px !important;
    margin-right: 12px !important;
  }

  /* 5. Сама поисковая строка — чуть меньше шрифт и отступы */
  header.main-header.search-active .search-input {
    font-size: 1.1rem !important;
    padding: 0.8rem 1.4rem !important;
    max-width: 460px !important;       /* ограничиваем, чтобы не разъезжалось */
  }
}

/* Дополнительно — если экран совсем узкий (1024–1200px), прячем ещё и навигацию */
@media (max-width: 1200px) and (min-width: 1024px) {
  header.main-header.search-active .desktop-nav {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
    transition: all 0.4s ease;
  }

  header.main-header.search-active .logo-img {
    height: 76px !important;
  }
}

/* МОБИЛЬНАЯ ВЕРСИЯ — PILIGRIM MANIFESTO ПРИЖИМАЕМ К ЛИНИИ */
@media (max-width: 768px) {
  .manifesto-title,
  .piligrim-manifesto-title,
  [class*="manifesto"] h2,
  [class*="manifesto"] .title,
  .quote-title,
  h2:contains("Piligrim Manifesto"),
  .section-title:contains("Piligrim Manifesto") {
    margin-top: 0.8rem !important;     /* ← расстояние ОТ ЛИНИИ до надписи */
    margin-bottom: 1.2rem !important;  /* ← расстояние ОТ надписи до текста цитаты */
    padding-top: 0 !important;
    line-height: 1.35 !important;
  }

  /* Если линия — это hr или ::before/::after */
  .manifesto-section hr,
  .manifesto-section::before,
  .quote-section hr {
    margin-bottom: 0.1rem !important;  /* ← точно такой же отступ, как сверху */
  }
}

@media (max-width: 1024px) {
  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

/* ФИКС: поднимаем подпись "PILIGRIM MANIFESTO" выше — ближе к прогресс-бару */
@media (max-width: 1024px) {
  .philosophy {
    margin: 14rem 0 8rem !important; /* было 18rem снизу → стало 8rem */
  }

  .philosophy cite {
    margin-top: 2.8rem !important;     /* было 5–6rem → теперь 2.8rem */
    margin-bottom: 6rem !important;    /* ← это и есть расстояние от подписи до полосок */
    padding-bottom: env(safe-area-inset-bottom); /* чтобы не налезало на safe-area */
  }

  /* Если вдруг подпись всё ещё далеко — дополнительно прижимаем на очень узких экранах */
  @media (max-width: 380px) {
    .philosophy cite {
      margin-top: 2.4rem !important;
      margin-bottom: 5.5rem !important;
    }
  }
}

/* ============================================================================= */
/* БОКОВАЯ ШТОРКА — ПОЛНОСТЬЮ РАБОЧАЯ ВЕРСИЯ 2025 (СВАЙП + СКРОЛЛ) */
/* ============================================================================= */
.mobile-sidebar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 86vw;
  max-width: 380px;
  height: 100dvh;
  background: var(--bg-primary, #0a0a0a);
  z-index: 9999;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;

  transform: translate3d(-100%, 0, 0);
  visibility: hidden;
  pointer-events: none;

  transition: transform 0.56s cubic-bezier(0.22, 0.88, 0.177, 1),
              visibility 0s linear 0.56s;
  will-change: transform;
}

.mobile-sidebar.open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: all;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

/* Бекдроп — как у тебя было */
body.sidebar-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

body.sidebar-open::before {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

@keyframes slideDown {
  from { transform: translateX(-50%) translateY(-100px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
#global-cart-flood-alert i { font-size: 1.8rem; }

/* 🔥 ВЕРХНИЙ БЛОК - СУПЕР ЖЁСТКИЙ СДВИГ ВЛЕВО - ВЕРХ contacts.css 🔥 */
@media (max-width: 767px) {
  /* === ВЕРХНИЙ БЛОК - МАКСИМАЛЬНЫЙ СДВИГ ВЛЕВО === */
  .contacts-wrapper {
    width: 100vw !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2rem 8% 2rem 1.5% !important; /* ← ЛЕВЫЙ 1.5% ПРАВЫЙ 8% */
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    justify-items: center !important;
    align-items: center !important;
    /* 🔥 ЖЁСТКИЙ СДВИГ ВЛЕВО 🔥 */
    position: relative !important;
    left: -6% !important;
    transform: translateX(-5%) !important;
  }

  /* === НИЖНИЙ БЛОК - НЕ ТРОГАЕМ === */
  .requisites-wrapper {
    width: 100vw !important;
    max-width: 100% !important;
    margin: 12rem 0 0 0 !important;
    padding: 0 5% !important;
    left: 0 !important;
    transform: none !important;
    display: block !important;
  }

  .requisites-grid {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 2rem 0 !important;
  }
}



/* 🔥 КРИТИЧЕСКАЯ ИСПРАВЛЕНИЕ — РАЗБЛОКИРОВКА СКРОЛЛА */
#mobileFeedbackSheet.dragging,
#mobileFeedbackSheet.active {
  overscroll-behavior: contain; /* ← ЭТО ОСНОВНОЕ ИСПРАВЛЕНИЕ! */
  touch-action: none; /* блокируем стандартный скролл */
}

#mobileFeedbackSheet.dragging {
  transition: none !important;
}

/* Принудительная разблокировка после анимации */
#mobileFeedbackSheet:not(.active) {
  touch-action: auto !important;
  overscroll-behavior: auto !important;
}

/* Глобальная разблокировка */
body:not(.sidebar-open):not([style*="overflow: hidden"]) {
  overscroll-behavior: auto;
  touch-action: auto;
}

/* ==================================================================
   КОНТАКТЫ — МОБИЛЬНАЯ АДАПТАЦИЯ (375–1024 px)
   Работает идеально на iPhone SE, 12/13/14/15/16, iPad Air/Pro
   ================================================================== */

/* ============================================= */
/* МОБИЛЬНЫЕ УСТРОЙСТВА — ИДЕАЛЬНОЕ ЦЕНТРИРОВАНИЕ НА ВСЕХ ТЕЛЕФОНАХ */
/* ============================================= */
@media (max-width: 1024px) {
  main {
    padding: 120px 5dvw 100px !important;   /* 5dvw = 5% от ширины viewport */
    gap: 6rem;
    box-sizing: border-box;
  }

  .page-title {
    font-size: clamp(3.2rem, 10dvw, 5.5rem) !important;
    letter-spacing: 8px !important;
    margin-bottom: 1rem !important;
    text-align: center;
  }

  .page-subtitle {
    font-size: 1rem !important;
    letter-spacing: 4px !important;
    margin-bottom: 6rem !important;
    text-align: center;
  }

  /* ==================== КОНТАКТЫ ==================== */
  .contacts-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 8rem;
    width: 100%;
    max-width: 90dvw;           /* гарантия, что не вылезет за экран */
    margin-left: auto;
    margin-right: auto;
    padding: 0 5dvw;
    box-sizing: border-box;
  }

  .contact-block {
    text-align: center;
    width: 100%;
  }

  .contact-label {
    font-size: 0.8rem !important;
    letter-spacing: 3px;
    margin-bottom: 0.8rem !important;
  }

  .contact-value {
    font-size: clamp(2.2rem, 7dvw, 3rem) !important;
    line-height: 1.3 !important;
  }

  /* ==================== ЦИТАТА ==================== */
  .philosophy {
    margin: 8rem 5dvw !important;
    text-align: center;
  }

  #typewriter {
    font-size: clamp(1.5rem, 5.5dvw, 2.4rem) !important;
    padding: 4rem 5dvw 6rem !important;
    text-align: center;
  }

  #typewriter .center-last {
    font-size: clamp(1.8rem, 6dvw, 2.8rem) !important;
    margin-top: 3rem !important;
  }

  /* ==================== РЕКВИЗИТЫ ==================== */
  .requisites-wrapper {
    width: 100%;
    max-width: 90dvw;
    margin: 8rem auto 0 !important;
    padding: 0 5dvw;
    box-sizing: border-box;
  }

  .requisites-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.8rem;
    text-align: center;
  }

  .req-title {
    font-size: 0.75rem !important;
    letter-spacing: 2px;
  }

  /* ==================== РАССЫЛКА ==================== */
  .newsletter {
    margin: 8rem 5dvw !important;
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .newsletter-input,
  .newsletter-btn {
    width: 100% !important;
    max-width: 100%;
  }

  /* ==================== СОЦСЕТИ ==================== */
  .social-wrapper {
    margin: 6rem 0 !important;
    gap: 3rem;
    justify-content: center;
  }

  .social-wrapper a {
    font-size: 2rem !important;
  }
}

/* =============== УЛЬТРА-МАЛЕНЬКИЕ ЭКРАНЫ (iPhone SE и т.п.) =============== */
@media (max-width: 480px) {
  main { padding: 100px 4dvw 80px !important; }

  .page-title { font-size: 2.8rem !important; }

  .contact-value { font-size: 2rem !important; }

  .visit-us h2,
  .showroom h2,
  .instagram-feed h2,
  .newsletter h2 {
    font-size: 2.4rem !important;
  }

  #typewriter {
    font-size: 1.4rem !important;
    padding: 3rem 4dvw 5rem !important;
  }

  #typewriter .center-last {
    font-size: 1.7rem !important;
  }
}

/* =============== ПЛАНШЕТЫ 768–1024px =============== */
@media (min-width: 768px) and (max-width: 1024px) {
  main { padding: 140px 6dvw 120px !important; }

  .contacts-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    max-width: 92dvw;
    margin-left: auto;
    margin-right: auto;
  }

  .requisites-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    text-align: left;
  }

  .requisites-wrapper {
    max-width: 92dvw;
  }
}
@media (max-width: 1024px) {
  .contacts-wrapper {
    /* Полное переопределение всех свойств позиционирования */
    width: 100%;
    max-width: 90dvw;
    margin: 0 auto 8rem auto !important;  /* Единственный способ центрирования */
    padding: 0 !important;               /* Убираем ВСЕ внутренние отступы */
    position: relative !important;     /* Сбрасываем возможные абсолютные позиции */
    left: 0 !important;                /* Сбрасываем любые сдвиги */
    transform: none !important;       /* Сбрасываем любые трансформации */
    box-sizing: border-box;
  }

  .contacts-wrapper .contact-block {
    /* Каждый блок внутри также должен быть строго по центру */
    width: 100%;
    max-width: 400px;                   /* Ограничиваем ширину блока */
    margin: 0 auto;                    /* Центрируем каждый блок */
    padding: 0;                        /* Убираем любые внутренние отступы */
    text-align: center;
  }
}

/* Дополнительная страховка от внешних отступов */
@media (max-width: 1024px) {
  .contacts-wrapper {
    /* Создаем изолированное центрирование, независимо от родительских padding */
    display: block !important;        /* Переключаем на block для более предсказуемого центрирования */
    width: 100%;
    max-width: 90dvw;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Для планшетов сохраняем сетку, но контейнер остается строго по центру */
@media (min-width: 768px) and (max-width: 1024px) {
  .contacts-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    width: 100%;
    max-width: 900px;                 /* Фиксированная максимальная ширина */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }
}
/* ===================================================== */
/* СУПЕР-ПЛОТНАЯ МОБИЛЬНАЯ ВЕРСТКА 2025                */
/* Работает ТОЛЬКО на телефонах и планшетах (≤1024px)   */
/* Десктоп (≥1025px) — полностью не трогается!         */
/* ===================================================== */

@media (max-width: 1024px) {

  main {
    padding: 90px 5% 90px !important;   /* было 120–140px → теперь компактно */
  }

  /* Заголовки страницы */
  .page-title {
    font-size: clamp(2.8rem, 9vw, 4.2rem) !important;
    margin-bottom: 1rem !important;
  }

  .page-subtitle {
    font-size: 0.94rem !important;
    margin-bottom: 3.8rem !important;   /* было 6–7rem */
  }

  /* Контакты — сильно прижимаем */
  .contacts-wrapper {
    gap: 2.6rem !important;            /* было 4–6rem */
    margin-bottom: 5rem !important;   /* было 8–10rem */
  }

  /* Все основные секции — уменьшаем вертикальные отступы в 2 раза */
  .visit-us,
  .showroom,
  .philosophy,
  .instagram-feed,
  .newsletter,
  .social-wrapper,
  .requisites-wrapper {
    margin: 4.8rem 0 !important;       /* было 8–14rem → теперь везде 4.8rem */
  }

  .divider {
    margin: 4.8rem auto !important;    /* было 8rem+ */
  }

  /* Философия — главная "пожирательница" места */
  .philosophy {
    margin: 5rem 0 !important;         /* было 14rem+18rem → теперь 5rem сверху и снизу */
  }

  .philosophy blockquote,
  #typewriter {
    font-size: clamp(1.55rem, 5.5vw, 2.1rem) !important;
    padding: 0 5% !important;
  }

  .philosophy cite {
    margin-top: 2.4rem !important;     /* было 5–6rem */
    margin-bottom: 4rem !important;
  }

  /* Instagram и рассылка */
  .instagram-feed h2,
  .newsletter h2 {
    font-size: 2.9rem !important;
    margin-bottom: 1.4rem !important;
  }

  /* Соцсети */
  .social-wrapper {
    gap: 2.6rem !important;
  }

  /* Реквизиты */
  .requisites-wrapper {
    margin-top: 5rem !important;
  }

  /* Футер */
  footer {
    padding: 4.5rem 6% 4rem !important;
    gap: 2.2rem !important;
  }
}

/* Ещё плотнее на узких телефонах (320–428 px: iPhone SE, 12 mini, 13 mini, 14, 15, 16) */
@media (max-width: 428px) {
  main { padding: 85px 4% 85px !important; }

  .page-subtitle { margin-bottom: 3.4rem !important; }

  .contacts-wrapper { gap: 2.3rem !important; margin-bottom: 4.5rem !important; }

  .visit-us,
  .showroom,
  .philosophy,
  .instagram-feed,
  .newsletter,
  .social-wrapper,
  .requisites-wrapper {
    margin: 4.2rem 0 !important;
  }

  .philosophy { margin: 4.5rem 0 !important; }
  .philosophy cite { margin-top: 2.2rem !important; }

  .divider { margin: 4.2rem auto !important; }
}
/* 100% РАБОЧЕЕ РЕШЕНИЕ — ЧИСТЫЙ CSS (НЕ SCSS!) */
/* Делает перенос email + центрирует, НО НЕ ТРОГАЕТ РАЗМЕР ШРИФТА */
@media (max-width: 1024px) {
  p, div, span, a, li, td {
    /* Применяем стили только к непустым элементам, содержащим @ */
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    
    /* УБИРАЕМ ВСЁ, ЧТО МЕНЯЕТ ШРИФТ — оставляем только перенос и центровку */
    /* font-size: 1.32rem !important;  ← УДАЛЕНО */
    /* line-height: 1.5 !important;    ← УДАЛЕНО */
    /* padding: 0 6px !important;      ← УДАЛЕНО */
  }
}

/* ===================================================== */
/* МОБИЛЬНАЯ ШТОРКА — ЛОГОТИП 100% ПО ЦЕНТРУ НА ЛЮБОМ ЭКРАНЕ */
/* Динамически адаптируется под ширину, высоту и safe-area   */
/* Работает идеально на всех iPhone и Android                */
/* ===================================================== */

#mobileSidebar .sidebar-top {
  position: relative;
  padding: max(56px, env(safe-area-inset-top)) 20px 28px 20px !important;
  height: max(120px, calc(56px + env(safe-area-inset-top))) !important;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  overflow: hidden;
}

#mobileSidebar .sidebar-logo-big {
  height: clamp(78px, 22vw, 96px) !important;   /* от 78px на SE до 96px на больших */
  width: auto !important;
  max-width: 78vw !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;   /* ТОЧНО по центру шторки */
  z-index: 2;
  pointer-events: none;
  filter: brightness(0) invert(1);
  transition: height 0.4s ease;
}

/* Светлая тема — логотип чёрный */
html[data-theme="light"] #mobileSidebar .sidebar-logo-big {
  filter: none !important;
}

/* Стрелка закрытия — слева, не мешает центровке */
#mobileSidebar .sidebar-close {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: auto;
}

/* На очень узких экранах (≤360px) — чуть меньше логотип */
@media (max-width: 360px) {
  #mobileSidebar .sidebar-logo-big {
    height: clamp(72px, 20vw, 84px) !important;
  }
}

/* КРАСИВЫЙ ПЕРЕНОС "Код отправлен на" НА МАЛЕНЬКИХ ЭКРАНАХ */
.auth-info {
  text-align: center;
  color: #aaa;
  margin: 1.4rem auto 1.6rem;
  font-size: clamp(0.88rem, 3.2vw, 0.94rem);
  line-height: 1.48;
  max-width: 92%;
  padding: 0 8px;
}

/* Скрываем <br> на больших экранах, показываем на маленьких */
.mobile-break {
  display: none;
}

@media (max-width: 380px) {
  .mobile-break {
    display: inline !important;   /* ← только на iPhone SE и узких экранах */
  }
}


/* На телефонах и планшетах — включаем перенос */
@media (max-width: 1025px) {
  .mobile-break {
    display: inline !important;
  }
}

/* ╔══════════════════════════════════════════════════╗
   ║  УБОЙНЫЙ ФИКС — СВЕТЛАЯ ТЕМА, МОБИЛЬНАЯ ШТОРКА   ║
   ║  Задний фон больше НИКОГДА не будет просвечивать ║
   ╚══════════════════════════════════════════════════╝ */

@media (max-width: 1023px) {
  
  /* Перебиваем любой предыдущий backdrop-filter и background */
  html[data-theme="light"] .feedback-sheet.mobile-only .sheet-backdrop,
  html[data-theme="light"] .sheet-backdrop {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(42px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(42px) saturate(190%) !important;
  }

  /* На случай, если у тебя где-то ещё есть .sheet-backdrop без класса mobile-only */
  html[data-theme="light"] .sheet-backdrop {
    background: rgba(255, 255, 255, 0.97) !important;
  }

  /* Сама шторка — максимально непрозрачная */
  html[data-theme="light"] .feedback-sheet.mobile-only .sheet-container,
  html[data-theme="light"] .sheet-container {
    background: rgba(255, 255, 255, 0.99) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
  }

  /* Если у тебя шторка называется mobile-feedback-sheet (видел у тебя в коде) */
  html[data-theme="light"] .mobile-feedback-sheet {
    background: rgba(255, 255, 255, 0.99) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
  }

  html[data-theme="light"] body.sheet-open::before,
  html[data-theme="light"] .sheet-backdrop {
    background: rgba(255, 255, 255, 0.97) !important;
  }
}

/* Экстра-страховка для iOS 18+ (иногда нужен ещё больший блюр) */
@supports (-webkit-backdrop-filter: blur(50px)) {
  html[data-theme="light"] .sheet-backdrop,
  html[data-theme="light"] .mobile-feedback-sheet {
    -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
    backdrop-filter: blur(50px) saturate(200%) !important;
  }
}

/* ===================================================== */
/* CONTACTS — ТОЛЬКО МОБИЛЬНАЯ АДАПТАЦИЯ ТЕКСТА 2025   */
/* Работает только на экранах ≤1024px                  */
/* Десктоп остаётся 100% нетронутым                    */
/* ===================================================== */

@media screen and (max-width: 1024px) {

  /* Заголовок "Контакты" */
  .page-title {
    font-size: clamp(2.4rem, 9.5vw, 4.2rem) !important;
    line-height: 1.18 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
  }

  /* Подзаголовок "Связаться с нами" */
  .page-subtitle {
    font-size: clamp(1.05rem, 4.4vw, 1.35rem) !important;
    line-height: 1.7 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    margin-bottom: clamp(2.5rem, 8vw, 4rem) !important;
  }

  /* Метки (Телефон, Адрес, E-mail и т.д.) */
  .contact-label {
    font-size: clamp(0.88rem, 3.8vw, 1.02rem) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  /* Значения (номер, адрес, почта) */
  .contact-value,
  .contact-value a {
    font-size: clamp(1.12rem, 4.8vw, 1.48rem) !important;
    line-height: 1.68 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* VISIT US + SHOWROOM */
  .visit-us h2,
  .showroom h2,
  .newsletter h2,
  .instagram-feed h2 {
    font-size: clamp(2.1rem, 8.2vw, 3.6rem) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  .visit-us p,
  .showroom p,
  .newsletter p {
    font-size: clamp(1.05rem, 4.4vw, 1.34rem) !important;
    line-height: 1.78 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    max-width: 94% !important;
    margin: 0 auto !important;
  }

  /* Реквизиты */
  .req-title {
    font-size: clamp(0.92rem, 4vw, 1.1rem) !important;
    letter-spacing: 0.1em !important;
  }

  .requisites-grid p {
    font-size: clamp(1rem, 4.3vw, 1.28rem) !important;
    line-height: 1.7 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Цитата в манифесте */
  .philosophy blockquote {
    font-size: clamp(1.35rem, 5.8vw, 2.1rem) !important;
    line-height: 1.75 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  .philosophy cite {
    font-size: clamp(0.95rem, 4.1vw, 1.15rem) !important;
  }

  /* Подпись под инстаграмом */
  .instagram-feed h2 {
    margin-bottom: clamp(1.8rem, 6vw, 2.8rem) !important;
  }

  /* Форма подписки */
  .newsletter-input::placeholder {
    font-size: clamp(0.98rem, 4.2vw, 1.18rem) !important;
  }

  /* Для самых узких экранов — чуть меньше */
  @media (max-width: 380px) {
    .page-title { font-size: clamp(2.2rem, 10.5vw, 3.8rem) !important; }
    .contact-value { font-size: clamp(1.05rem, 5vw, 1.38rem) !important; }
  }
}

/* ===================================================== */
/* CONTACTS — ДОПОЛНЕНИЕ: КОПИРАЙТ + ЦИТАТА 2025       */
/* Только на мобильных (≤1024px)                        */
/* Десктоп не трогаем                                   */
/* ===================================================== */

@media screen and (max-width: 1024px) {

  /* КОПИРАЙТ В ФУТЕРЕ */
  .footer-left {
    font-size: clamp(0.88rem, 3.8vw, 1.05rem) !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
    padding: 0 1rem !important;
  }

  /* ЦИТАТА — МАНИФЕСТ */
  .philosophy blockquote {
    font-size: clamp(1.42rem, 6.2vw, 2.3rem) !important;
    line-height: 1.72 !important;
    word-break: break-word !important;
    hyphens: auto !important;
    padding: clamp(2rem, 8vw, 3.5rem) clamp(1rem, 5vw, 2rem) !important;
    margin: clamp(3rem, 10vw, 5rem) 0 !important;
  }

  .philosophy cite {
    font-size: clamp(0.98rem, 4.2vw, 1.22rem) !important;
    letter-spacing: 0.12em !important;
  }

  /* На самых узких экранах — ещё чуть компактнее */
  @media (max-width: 380px) {
    .footer-left {
      font-size: clamp(0.84rem, 4.1vw, 0.98rem) !important;
    }
    .philosophy blockquote {
      font-size: clamp(1.35rem, 7vw, 2.1rem) !important;
    }
  }
}

/* ===================================================== */
/* БЛОК ЦИТАТЫ — ИДЕАЛЬНЫЕ ПЕРЕНОСЫ + РОВНАЯ ШИРИНА     */
/* Только на мобильных (≤1024px)                        */
/* Десктоп не трогаем                                   */
/* ===================================================== */

@media screen and (max-width: 1024px) {

  /* Сам блок цитаты */
  .philosophy {
    padding: clamp(3.5rem, 10vw, 5.5rem) clamp(1.5rem, 6vw, 3rem) !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(4rem, 12vw, 6rem) auto !important;
  }

  /* Текст цитаты */
  .philosophy blockquote {
    font-size: clamp(1.45rem, 6.5vw, 2.4rem) !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    
    /* ГЛАВНОЕ — ПЕРЕНОС ПО СЛОВАМ */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;           /* красиво по словам */
    text-align: center !important;
    
    /* Ровно по ширине — как в профиле */
    max-width: 92% !important;
    width: fit-content !important;
    display: block !important;
  }

  /* Убираем возможные старые стили, которые ломают переносы */
  .philosophy blockquote span,
  .philosophy blockquote * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Подпись "PILIGRIM MANIFESTO" */
  .philosophy cite {
    display: block !important;
    margin-top: clamp(2rem, 6vw, 3rem) !important;
    font-size: clamp(0.98rem, 4.2vw, 1.22rem) !important;
    letter-spacing: 0.15em !important;
    color: #888 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
  }

  /* На самых маленьких экранах — чуть компактнее */
  @media (max-width: 380px) {
    .philosophy blockquote {
      font-size: clamp(1.38rem, 7.2vw, 2.1rem) !important;
      max-width: 96% !important;
    }
  }
}