/* =============================================================
   GrandShkaf — Subdomain Design Upgrade v1.0
   Подключается ТОЛЬКО на субдоменах через mu-plugin
   ============================================================= */

/* ----- ПЕРЕМЕННЫЕ ----- */
:root {
  --gs-green: #296B33;
  --gs-green-light: #338e3d;
  --gs-green-hover: #1e5427;
  --gs-green-bg: #f0f7f1;
  --gs-shadow: 0 4px 20px rgba(0,0,0,.08);
  --gs-shadow-hover: 0 8px 32px rgba(0,0,0,.14);
  --gs-radius: 12px;
  --gs-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* =============================================================
   1. КАРТОЧКИ ТОВАРОВ — hover, тени, анимация
   ============================================================= */

.box {
  transition: transform var(--gs-transition), box-shadow var(--gs-transition);
  border: 1px solid #e8e8e8;
  border-radius: var(--gs-radius);
  overflow: hidden;
}
.box:hover {
  transform: translateY(-4px);
  box-shadow: var(--gs-shadow-hover);
  border-color: #d0d0d0;
}

/* Фото в карточке — плавный зум при наведении */
.box_img {
  overflow: hidden;
  border-radius: 8px;
}
.box_img img {
  transition: transform .4s ease;
}
.box:hover .box_img img {
  transform: scale(1.04);
}

/* Название товара */
.box_name a {
  transition: color var(--gs-transition);
}
.box_name a:hover {
  color: var(--gs-green-hover);
}

/* Кнопка "Подробнее" в карточке */
.box_but a {
  background: var(--gs-green-light);
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 15px;
  transition: background var(--gs-transition), transform var(--gs-transition);
}
.box_but a:hover {
  background: var(--gs-green-hover);
  opacity: 1;
  transform: translateY(-1px);
}

/* =============================================================
   2. CTA КНОПКИ — «Заказ звонка» и «Вызов замерщика»
   ============================================================= */

/* Кнопка с рамкой (Вызов замерщика) */
.header-info .head-menu__buttons a:last-child {
  transition: background .3s ease, color .3s ease, transform .2s ease, box-shadow .3s ease;
}
.header-info .head-menu__buttons a:last-child:hover {
  background: var(--gs-green);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(41,107,51,.3);
}

/* Ссылка с подчёркиванием (Заказ звонка) */
.header-info .head-menu__buttons a:first-child {
  transition: color var(--gs-transition), border-color var(--gs-transition);
}
.header-info .head-menu__buttons a:first-child:hover {
  color: var(--gs-green-hover);
}

/* Кнопка «Каталог» */
.maincatalog-link {
  transition: background var(--gs-transition), box-shadow var(--gs-transition);
}
.maincatalog-link:hover {
  background: var(--gs-green-hover);
  box-shadow: 0 4px 16px rgba(41,107,51,.25);
}

/* Выпадающий каталог — плавнее */
.catalog-popup {
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  transform: translateY(8px);
}
.maincatalog-link.opened + .catalog-popup {
  transform: translateY(0);
}

/* =============================================================
   3. ТИПОГРАФИКА — чуть больше воздуха
   ============================================================= */

.paragraph-one,
.right-section .paragraphs {
  line-height: 1.6;
}

.paragraph-one h2,
.right-section h2,
.desc-title {
  letter-spacing: -.01em;
}

/* =============================================================
   4. СЕКЦИЯ ПРЕИМУЩЕСТВ
   ============================================================= */

.why-we-item {
  transition: transform var(--gs-transition), box-shadow var(--gs-transition);
  border-radius: var(--gs-radius);
}
.why-we-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--gs-shadow);
}

/* Шаги "Как мы работаем" */
.how-work-item {
  transition: transform var(--gs-transition);
}
.how-work-item:hover {
  transform: translateY(-2px);
}

/* =============================================================
   5. МОБИЛЬНОЕ МЕНЮ (mmenu) — визуальное обновление
   ============================================================= */

/* Фон меню — белый чистый, тёмный текст */
.mm-menu {
  background: #fff !important;
  color: #1a1a1a !important;
}

/* Пункты меню — МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ */
.mm-listitem > a,
.mm-listitem > span,
.mm-menu .mm-listitem > a,
.mm-menu .mm-listitem > span,
.mm-menu .mm-listview .mm-listitem > a,
.mm-menu .mm-listview .mm-listitem > span,
.mm-menu .mm-panels .mm-panel .mm-listview .mm-listitem > a,
.mm-menu .mm-panels .mm-panel .mm-listview .mm-listitem > span,
html body .mm-menu a,
html body .mm-menu span,
html body .mm-menu .mm-listitem a,
html body .mm-menu .mm-listitem span,
.mm-menu_theme-white .mm-listitem > a,
.mm-menu_theme-white .mm-listitem > span,
.mm-menu_theme-dark .mm-listitem > a,
.mm-menu_theme-dark .mm-listitem > span {
  padding: 14px 20px !important;
  font-size: 16px !important;
  color: #1a1a1a !important;
  font-weight: 500;
}
.mm-menu a,
.mm-menu a:link,
.mm-menu a:visited,
.mm-menu a:active,
.mm-menu a:hover,
.mm-menu span,
.mm-listview a,
.mm-panel a,
html body .mm-menu a:link,
html body .mm-menu a:visited,
html body .mm-menu a:hover {
  color: #1a1a1a !important;
}

/* Разделители — тоньше */
.mm-listitem:after {
  border-color: #f0f0f0 !important;
}

/* Заголовок "МЕНЮ" */
.mm-navbar {
  background: var(--gs-green) !important;
  border: none !important;
  height: 52px !important;
}
.mm-navbar > * {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 16px 0 !important;
}

/* Стрелки навигации — зелёные */
.mm-btn:after,
.mm-btn:before {
  border-color: #fff !important;
}
.mm-listview .mm-btn_next:after {
  border-color: var(--gs-green) !important;
}

/* Кнопка "Назад" */
.mm-navbar .mm-btn:after,
.mm-navbar .mm-btn:before {
  border-color: #fff !important;
}

/* Активный пункт */
.mm-listitem > a:active,
.mm-listitem_selected > a:not(.mm-btn_next) {
  background: var(--gs-green-bg) !important;
}

/* Плавнее анимация открытия */
.mm-menu_offcanvas {
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}

/* =============================================================
   6. МОБИЛЬНАЯ ШАПКА — чище
   ============================================================= */

@media (max-width: 900px) {
  /* Шапка компактнее */
  header.mainhead {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
  }

  /* Бургер-иконка — крупнее, удобнее тап */
  .adapt_menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  /* Телефоны — компактнее */
  .header-info .phone-info .tel {
    font-size: 16px;
  }
}

/* =============================================================
   7. STICKY КНОПКА ЗВОНКА (мобайл) — современнее
   ============================================================= */

@media (max-width: 768px) {
  .callback-mobile {
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999;
  }
  .callback-mobile a {
    background: var(--gs-green) !important;
    padding: 14px !important;
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: .02em;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* Отступ снизу у контента чтобы кнопка не перекрывала */
  body {
    padding-bottom: 52px;
  }
}

/* =============================================================
   8. СЛАЙДЕР — скругления, аккуратнее
   ============================================================= */

.slider-item img {
  border-radius: 16px;
}

/* Стрелки слайдера */
.slider .slick-arrow {
  transition: opacity var(--gs-transition), transform var(--gs-transition);
}
.slider .slick-arrow:hover {
  opacity: .9;
  transform: translateY(-50%) scale(1.1);
}

/* Доты слайдера */
.slick-dots li button:before {
  font-size: 10px;
  color: var(--gs-green-light);
}
.slick-dots li.slick-active button:before {
  color: var(--gs-green);
}

/* =============================================================
   9. ФУТЕР — чуть современнее
   ============================================================= */

footer {
  border-top: 1px solid #e8e8e8;
}

/* =============================================================
   10. ПЛАВАЮЩАЯ WHATSAPP КНОПКА — не перекрывать контент
   ============================================================= */

/* Если есть плагинная зелёная кнопка WhatsApp — сдвигаем выше sticky панели */
@media (max-width: 768px) {
  .whatsapp-btn,
  [class*="whatsapp-widget"],
  [class*="wa-button"],
  .wa-float-btn {
    bottom: 65px !important;
  }
}