/* ============================================
   DESKTOP STYLES FOR MENU PAGE
   Адаптивный дизайн для страницы меню на компьютерах
   ============================================ */

@media (min-width: 1024px) {
  /* ============================================
     ОБЩИЕ НАСТРОЙКИ ДЛЯ МЕНЮ
     ============================================ */

  /* Контейнер меню - сетка вместо вертикального списка */
  .tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 20px !important; /* Добавляем боковые отступы */
    max-width: 900px !important; /* Ограничиваем максимальную ширину для всех элементов */
    margin: 0 auto !important; /* Центрируем контейнер */
    animation: menuFadeIn 0.8s ease-out;
    align-items: center; /* Центрируем элементы */
    justify-items: center !important; /* Центрируем содержимое внутри grid */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Универсальное правило для всех кнопок - компактный размер */
  .tiles .ecommerce-btn {
    min-height: 100px !important;
    padding: 18px 20px !important;
    width: 100% !important; /* Занимаем всю доступную ширину контейнера */
    box-sizing: border-box !important;
  }

  /* Исключение для кнопок внутри wrapper - они имеют свои стили */
  .tiles .ecommerce-btn-wrapper .ecommerce-btn {
    /* Стили определены ниже */
  }

  /* ============================================
     КНОПКА "ЗАКАЗАТЬ ОНЛАЙН" (INPOST)
     ============================================ */

  /* Обертка для кнопки доставки - занимает всю ширину контейнера, центрирована */
  .ecommerce-btn-wrapper {
    padding-top: 500px !important; /* Увеличиваем padding для показа всей фотографии */
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    overflow: visible !important; /* Убираем обрезку фотографии */
    border-radius: 28px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-left: auto !important; /* Центрируем */
    margin-right: auto !important;
  }

  /* Эффект свечения при hover */
  .ecommerce-btn-wrapper::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(91, 33, 182, 0.2));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    filter: blur(20px);
  }

  .ecommerce-btn-wrapper:hover::after {
    opacity: 1;
  }

  /* Фотография - показываем полностью на desktop */
  .ecommerce-btn-photo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important; /* Высота равна padding-top обертки */
    border-radius: 28px 28px 0 0;
    object-fit: contain !important; /* Показываем фотографию полностью без обрезки */
    object-position: center center;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
      0 28px 70px rgba(0, 0, 0, 0.5),
      0 10px 28px rgba(139, 92, 246, 0.4);
    filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.5)) brightness(1.05);
    will-change: transform, filter;
    /* Фон для пустых областей, если фотография меньше контейнера */
    background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 50%, #3B1A6B 100%);
    box-sizing: border-box;
    display: block !important;
  }

  /* Hover эффект для фотографии - вау эффект */
  .ecommerce-btn-wrapper:hover .ecommerce-btn-photo {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 
      0 40px 100px rgba(0, 0, 0, 0.6),
      0 16px 40px rgba(139, 92, 246, 0.6);
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.7)) brightness(1.2) saturate(1.1);
  }

  /* Кнопка под фотографией - компактный размер и такая же ширина как фотография */
  .ecommerce-btn-wrapper .ecommerce-btn {
    margin-top: -40px !important; /* Перекрытие для плавного слияния */
    min-height: 100px !important; /* Компактный размер как на мобильной */
    padding: 18px 20px !important; /* Компактные отступы */
    border-radius: 0 0 20px 20px !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 50%, #3B1A6B 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .ecommerce-btn-wrapper:hover .ecommerce-btn {
    transform: translateY(-6px);
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 8px 20px rgba(139, 92, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, #5B21B6 0%, #6D28D9 50%, #4C1D95 100%);
  }

  /* Компактные размеры иконок и текста */
  .ecommerce-btn-wrapper .ecommerce-btn__cart {
    width: 48px !important;
    height: 48px !important;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__cart svg {
    width: 24px !important;
    height: 24px !important;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__title {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__subtitle {
    font-size: 13px !important;
    font-weight: 500;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__arrow {
    width: 32px !important;
    height: 32px !important;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__arrow svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* ============================================
     КНОПКА "ОПТ ТОВАР"
     ============================================ */

  /* ОПТ кнопка - компактный размер как на мобильной версии, такая же ширина как фотография */
  /* Таргетим только кнопки, которые являются прямыми детьми tiles и не city */
  .tiles > .ecommerce-btn:not(.ecommerce-btn--city),
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city) {
    min-height: 100px !important; /* Компактный размер как на мобильной */
    padding: 18px 20px !important; /* Компактные отступы */
    border-radius: 20px !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 2px 8px rgba(139, 92, 246, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    position: relative;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important; /* Центрируем */
    margin-right: auto !important;
  }

  /* Эффект свечения для ОПТ кнопки */
  .tiles > .ecommerce-btn:not(.ecommerce-btn--city)::before,
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city)::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 152, 0, 0.15));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    filter: blur(15px);
  }

  .tiles > .ecommerce-btn:not(.ecommerce-btn--city):hover::before,
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city):hover::before {
    opacity: 1;
  }

  .tiles > .ecommerce-btn:not(.ecommerce-btn--city):hover,
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city):hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 
      0 24px 70px rgba(0, 0, 0, 0.5),
      0 10px 28px rgba(139, 92, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
  }

  .tiles > .ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__cart,
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__cart {
    width: 48px !important;
    height: 48px !important;
  }

  .tiles > .ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__cart svg,
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__cart svg {
    width: 24px !important;
    height: 24px !important;
  }

  .tiles > .ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__title,
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__title {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .tiles > .ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__subtitle,
  .tiles > a.ecommerce-btn:not(.ecommerce-btn--city) .ecommerce-btn__subtitle {
    font-size: 13px !important;
  }

  /* ============================================
     КНОПКА "СПИСОК ГОРОДОВ"
     ============================================ */

  /* Обертка для кнопки городов - занимает всю ширину, центрирована */
  .cities-btn-wrapper {
    padding-top: 500px !important; /* Увеличиваем padding для показа всей фотографии */
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    overflow: visible !important; /* Убираем обрезку фотографии */
    border-radius: 28px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important; /* Центрируем */
    margin-right: auto !important;
  }

  /* Эффект свечения при hover */
  .cities-btn-wrapper::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(91, 33, 182, 0.2));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    filter: blur(20px);
  }

  .cities-btn-wrapper:hover::after {
    opacity: 1;
  }

  /* Фотография городов - показываем полностью на desktop */
  .cities-btn-photo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important; /* Занимает весь контейнер */
    width: 100% !important;
    height: 500px !important; /* Высота равна padding-top обертки */
    border-radius: 28px 28px 0 0;
    object-fit: contain !important; /* Показываем фотографию полностью без обрезки */
    object-position: center center;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
      0 28px 70px rgba(0, 0, 0, 0.5),
      0 10px 28px rgba(139, 92, 246, 0.4);
    filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.5)) brightness(1.05);
    opacity: 1 !important;
    will-change: transform, filter;
    /* Фон для пустых областей, если фотография меньше контейнера */
    background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 50%, #3B1A6B 100%);
    box-sizing: border-box;
  }

  /* Hover эффект для фотографии городов - вау эффект */
  .cities-btn-wrapper:hover .cities-btn-photo {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 
      0 40px 100px rgba(0, 0, 0, 0.6),
      0 16px 40px rgba(139, 92, 246, 0.6);
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.7)) brightness(1.2) saturate(1.1);
  }

  /* Кнопка городов - подгоняем под размер фотографии */
  .cities-btn {
    margin-top: -60px !important; /* Перекрытие для плавного слияния */
    min-height: 180px; /* Увеличиваем высоту для desktop */
    border-radius: 0 0 28px 28px;
    padding: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(135deg, #2D1B4E 0%, #3B1A6B 50%, #1F1335 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cities-btn-wrapper:hover .cities-btn {
    transform: translateY(-6px);
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 8px 20px rgba(139, 92, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, #3B1A6B 0%, #4C1D95 50%, #2D1B4E 100%);
  }

  /* Контейнер скролла городов - desktop */
  .cities-scroll-wrapper {
    padding: 32px 120px; /* Увеличиваем padding для desktop */
    gap: 24px;
    min-height: 180px;
    display: flex;
    align-items: center;
  }

  /* Кнопки городов - desktop размеры */
  .ecommerce-btn--city {
    min-width: 340px;
    max-width: 440px;
    min-height: 150px;
    padding: 24px 32px;
    border-radius: 22px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
      0 10px 40px rgba(0, 0, 0, 0.35),
      0 4px 16px rgba(139, 92, 246, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.2);
  }

  .ecommerce-btn--city:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.45),
      0 8px 24px rgba(139, 92, 246, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 10;
    border-color: rgba(139, 92, 246, 0.4);
  }

  .ecommerce-btn--city .ecommerce-btn__cart {
    width: 56px;
    height: 56px;
  }

  .ecommerce-btn--city .ecommerce-btn__cart svg {
    width: 28px;
    height: 28px;
  }

  .ecommerce-btn--city .ecommerce-btn__title {
    font-size: 20px;
    font-weight: 700;
  }

  .ecommerce-btn--city .ecommerce-btn__subtitle {
    font-size: 14px;
  }

  /* Кнопки прокрутки - desktop */
  .cities-scroll-btn {
    width: 56px;
    height: 56px;
    box-shadow: 
      0 8px 24px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cities-scroll-btn:hover {
    transform: translateY(-50%) scale(1.15);
    box-shadow: 
      0 12px 32px rgba(139, 92, 246, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  .cities-scroll-btn svg {
    width: 28px;
    height: 28px;
  }

  .cities-scroll-btn--left {
    left: 16px;
  }

  .cities-scroll-btn--right {
    right: 16px;
  }

  /* ============================================
     ПЛАВНЫЕ АНИМАЦИИ И ВАУ ЭФФЕКТЫ
     ============================================ */

  /* Анимация появления элементов с bounce эффектом */
  @keyframes menuItemFadeIn {
    from {
      opacity: 0;
      transform: translateY(50px) scale(0.9);
    }
    60% {
      transform: translateY(-5px) scale(1.02);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Анимация пульсации для привлечения внимания */
  @keyframes subtlePulse {
    0%, 100% {
      box-shadow: 
        0 28px 70px rgba(0, 0, 0, 0.5),
        0 10px 28px rgba(139, 92, 246, 0.4);
    }
    50% {
      box-shadow: 
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 12px 32px rgba(139, 92, 246, 0.5);
    }
  }

  /* Применяем анимацию к элементам с задержкой */
  .ecommerce-btn-wrapper {
    animation: menuItemFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
  }

  .ecommerce-btn:not(.ecommerce-btn--city):not(.ecommerce-btn-wrapper .ecommerce-btn) {
    animation: menuItemFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  }

  .cities-btn-wrapper {
    animation: menuItemFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
  }

  /* Плавные переходы для всех интерактивных элементов */
  .ecommerce-btn,
  .ecommerce-btn-wrapper,
  .cities-btn-wrapper,
  .cities-btn {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Легкая пульсация фотографий */
  .ecommerce-btn-photo,
  .cities-btn-photo {
    animation: subtlePulse 4s ease-in-out infinite;
  }

  /* ============================================
     УЛУЧШЕНИЯ ДЛЯ DESKTOP
     ============================================ */

  /* Улучшаем читаемость текста */
  .ecommerce-btn__text {
    gap: 8px;
  }

  /* Улучшаем видимость иконок */
  .ecommerce-btn__icon-group {
    gap: 16px;
  }

  /* Улучшаем отступы в контейнере */
  .phone__inner {
    padding: 40px !important;
    max-width: 1400px;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Центрируем содержимое */
    justify-content: flex-start !important;
  }

  /* Улучшаем общий вид страницы */
  .layout {
    padding: 32px !important;
    display: flex !important;
    justify-content: center !important; /* Центрируем layout */
    align-items: flex-start !important;
  }

  /* Убеждаемся, что phone контейнер центрирован */
  .phone {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Градиентный фон для лучшего визуального эффекта */
  .tiles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(1200px 800px at 20% 10%, rgba(91, 33, 182, 0.2), transparent 60%),
      radial-gradient(1000px 700px at 80% 30%, rgba(76, 29, 149, 0.15), transparent 55%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
  }

  /* Улучшаем видимость разделителей */
  .tiles > * {
    position: relative;
    z-index: 1;
  }

  /* Плавное появление элементов при скролле */
  @keyframes slideInFromBottom {
    from {
      opacity: 0;
      transform: translateY(60px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Улучшаем видимость статуса */
  .status {
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }
}

/* ============================================
   LARGE DESKTOP STYLES (min-width: 1440px)
   Для больших мониторов
   ============================================ */

@media (min-width: 1440px) {
  .tiles {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 1400px;
    padding: 40px 0;
  }

  /* Еще больше увеличиваем размеры для больших экранов */
  .ecommerce-btn-wrapper,
  .cities-btn-wrapper {
    padding-top: 600px !important; /* Увеличиваем для больших экранов */
    overflow: visible !important;
  }

  .ecommerce-btn-photo,
  .cities-btn-photo {
    height: 600px !important; /* Увеличиваем высоту для больших экранов */
  }

  .ecommerce-btn-wrapper .ecommerce-btn,
  .cities-btn {
    min-height: 100px !important;
    margin-top: -40px !important;
    padding: 18px 20px !important;
  }

  .ecommerce-btn:not(.ecommerce-btn--city):not(.ecommerce-btn-wrapper .ecommerce-btn) {
    min-height: 100px !important;
    padding: 18px 20px !important;
  }

  .ecommerce-btn--city {
    min-width: 380px;
    max-width: 500px;
    min-height: 170px;
    padding: 28px 36px;
  }

  .cities-scroll-wrapper {
    padding: 36px 140px;
    min-height: 200px;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__title {
    font-size: 17px !important;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__subtitle {
    font-size: 13px !important;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__cart {
    width: 48px !important;
    height: 48px !important;
  }

  .ecommerce-btn-wrapper .ecommerce-btn__cart svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================
   TABLET LANDSCAPE (1024px - 1279px)
   Промежуточный размер
   ============================================ */

@media (min-width: 1024px) and (max-width: 1279px) {
  .tiles {
    gap: 24px;
    padding: 20px 0;
  }

  .ecommerce-btn-wrapper,
  .cities-btn-wrapper {
    padding-top: 400px !important;
    overflow: visible !important;
  }

  .ecommerce-btn-photo,
  .cities-btn-photo {
    height: 400px !important;
  }

  .ecommerce-btn-wrapper .ecommerce-btn,
  .cities-btn {
    min-height: 100px !important;
    margin-top: -40px !important;
    padding: 18px 20px !important;
  }

  .ecommerce-btn:not(.ecommerce-btn--city):not(.ecommerce-btn-wrapper .ecommerce-btn) {
    min-height: 100px !important;
    padding: 18px 20px !important;
  }

  .ecommerce-btn--city {
    min-width: 280px;
    max-width: 360px;
    min-height: 120px;
  }
}