/* catalog-menu.css  (v2)
   Мега-меню «Каталог»: кнопка у стилі сайту (акцентні кнопки з glow-тінню
   та hover-підйомом, як .primary-btn / .hero-banner-btn), дропдаун під усім
   хедером на всю ширину з затемненням сторінки.
   Токени зі styles.css: --accent, --accent-dark, --dark, --muted,
   --bg, --radius, --shadow (з fallback-ами).
   Підключати ПІСЛЯ header.css та header-search.css.
*/

/* ============================================
   КНОПКА «КАТАЛОГ» (дизайн-мова сайту)
============================================ */
.catalog-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;

  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;

  box-shadow: 0 8px 20px rgba(0, 195, 255, .25);
  transition: transform .2s, box-shadow .2s, background .2s;
}

.catalog-btn:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 195, 255, .32);
}

.catalog-btn:active { transform: translateY(0); }

.catalog-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 195, 255, 0.25);
}

.catalog-btn-icon    { width: 18px; height: 18px; }
.catalog-btn-chevron { width: 15px; height: 15px; opacity: .85; transition: transform .2s; }

.catalog-btn.open {
  background: var(--accent-dark);
  transform: none;
  box-shadow: none;
}
.catalog-btn.open .catalog-btn-chevron { transform: rotate(180deg); }

/* ============================================
   ЗАТЕМНЕННЯ СТОРІНКИ
   (хедер fixed z-index:2000 лишається зверху,
    затемнюється тільки контент сайту)
============================================ */
.catalog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1995;

  background: rgba(8, 17, 32, .45);

  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  pointer-events: none;
}

.catalog-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================
   ДРОПДАУН ПІД УСІМ ХЕДЕРОМ
   (дочірній елемент header.site-header →
    top:100% = одразу під рядком пошуку)
============================================ */
.catalog-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2500;

  display: none;
  padding: 12px 0 24px;
}

.catalog-dropdown.open { display: block; }

/* Картка меню — як картки сайту (hero-cats): container 92% / 1280,
   білий фон, бордер #eef1f6, --radius, --shadow */
.catalog-shell {
  width: min(1280px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 3fr;   /* 1/4 : 3/4 */

  max-height: min(72vh, 640px);

  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 24px 60px rgba(15, 23, 42, .18)), 0 24px 60px rgba(15, 23, 42, .18);
  overflow: hidden;
}

/* -------- ліва колонка (1/4): кореневі — у стилі .hero-cats -------- */
.catalog-roots {
  display: flex;
  flex-direction: column;

  padding: 18px 14px;
  border-right: 1px solid #eef1f6;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.catalog-roots-title {
  padding: 2px 8px 12px;
  font-weight: 800;
  font-size: 15px;
  color: var(--dark);
}

.catalog-roots ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.catalog-roots li { margin: 0; }

.catalog-root {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 8px;
  border-radius: 10px;
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;

  transition: background .15s, color .15s;
}

.catalog-root:hover,
.catalog-root:focus-visible,
.catalog-root.is-active {
  background: rgba(0, 195, 255, .08);
  color: var(--accent-dark);
  outline: none;
}

.catalog-root-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-root-icon img {
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}

.catalog-root-dot {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 158, 209, .12);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 13px;
}

.catalog-root-name { flex: 1 1 auto; min-width: 0; }

.catalog-root-arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}

.catalog-root:hover .catalog-root-arrow,
.catalog-root.is-active .catalog-root-arrow {
  opacity: 1;
  transform: none;
}

.catalog-roots-all {
  margin-top: 10px;
  padding: 10px 8px;
  border-top: 1px solid #eef1f6;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-dark);
  text-decoration: none;
}
.catalog-roots-all:hover { text-decoration: underline; }

/* -------- права зона (3/4): панелі підкатегорій -------- */
.catalog-panels {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg, #f6f9fc);
}

.catalog-panels::-webkit-scrollbar { width: 10px; }
.catalog-panels::-webkit-scrollbar-thumb {
  background: #d9dfe8;
  border-radius: 999px;
  border: 3px solid #fff;
}

.catalog-panel { display: none; padding: 18px 24px 24px; }
.catalog-panel.is-active { display: block; }

.catalog-panel-title {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
  text-decoration: none;
}
.catalog-panel-title:hover { color: var(--accent-dark); }

.catalog-panel-empty {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.catalog-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px 22px;
}

.catalog-col-title {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
}
.catalog-col-title:hover { color: var(--accent-dark); }

.catalog-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.catalog-col-list li { margin: 0; }

.catalog-col-list a {
  font-size: 13px;
  color: #52607a;
  text-decoration: none;
  line-height: 1.45;
}
.catalog-col-list a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ============================================
   ПЛАНШЕТ / МОБІЛЬНІ
============================================ */
@media (max-width: 1100px) {
  /* ліва колонка вужча — як hero-shop-grid на цій ширині */
  .catalog-shell { grid-template-columns: 240px 1fr; }
}

@media (max-width: 800px) {
  /* на мобільних мега-меню ховаємо — каталог живе в бургер-меню */
  .catalog-btn,
  .catalog-dropdown,
  .catalog-backdrop { display: none !important; }
}

/* ============================================
   МОБІЛЬНИЙ АКОРДЕОН КАТАЛОГУ (в .mobile-nav)
============================================ */
.mcat { border-bottom: 1px solid #eef1f6; }

.mcat > summary,
.mcat-group > summary,
.mcat-sub > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 30px;
  -webkit-tap-highlight-color: transparent;
}
.mcat summary::-webkit-details-marker { display: none; }

/* стрілка-індикатор */
.mcat summary::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s;
}
.mcat details[open] > summary::after,
details.mcat[open] > summary.mcat-summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.mcat-summary {
  display: block;
  padding: 13px 30px 13px 14px;
  font-weight: 700;
  color: var(--dark);
}

.mcat-body { padding: 0 0 8px; }

.mcat-group > summary {
  display: block;
  padding: 11px 30px 11px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}

.mcat-group-body { padding: 2px 0 6px; }

.mcat-sub > summary {
  display: block;
  padding: 9px 30px 9px 36px;
  font-size: 13px;
  font-weight: 600;
  color: #3c4a63;
}

.mcat-sub-body { padding: 2px 0 4px; }

.mcat-leaf,
.mcat-view-all {
  display: block;
  padding: 8px 14px 8px 48px;
  font-size: 13px;
  color: #52607a;
  text-decoration: none;
}
.mcat-leaf:hover { color: var(--accent-dark); }

.mcat-leaf-root { padding-left: 24px; font-weight: 600; color: var(--dark); }

.mcat-view-all {
  font-weight: 700;
  color: var(--accent-dark);
}
.mcat-group-body > .mcat-view-all { padding-left: 36px; }
.mcat-all-root { padding: 10px 14px; }

/* поважаємо reduced motion */
@media (prefers-reduced-motion: reduce) {
  .catalog-btn,
  .catalog-btn-chevron,
  .catalog-root,
  .catalog-root-arrow,
  .catalog-backdrop,
  .mcat summary::after {
    transition: none;
  }
  .catalog-btn:hover { transform: none; }
}