/**
 * EK-Theme for Modesy — v1.4
 * Fixes: logo overflow, burger to category bar, blue bleed, sticky header, category mosaic
 */

:root {
  --ek-blue: #1e3a78;
  --ek-blue-dark: #152c5c;
  --ek-blue-mid: #2a4d9b;
  --ek-orange: #ff6b00;
  --ek-orange-hover: #e65c00;
  --ek-orange-light: #fff4eb;
  --ek-topbar-bg: #f0f2f5;
  --ek-header-bg: #1e3a78;
  --ek-body-bg: #f4f6f9;
  --ek-card-bg: #ffffff;
  --ek-text: #1a1a1a;
  --ek-text-muted: #5a5a5a;
  --ek-border: #dde1e8;
  --ek-border-light: #eef0f4;
  --ek-price: #d32f2f;
  --ek-badge-new: #43a047;
  --ek-badge-hit: #ff6b00;
  --ek-star: #ffb300;
  --ek-shadow: 0 1px 4px rgba(0,0,0,.06);
  --ek-shadow-hover: 0 4px 16px rgba(30,58,120,.12);
  --ek-radius: 8px;
  --ek-radius-sm: 6px;
  --ek-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ek-container: 1240px;
}

/* ========== BASE ========== */
body {
  font-family: var(--ek-font) !important;
  background: var(--ek-body-bg) !important;
  color: var(--ek-text) !important;
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--ek-blue-mid); text-decoration: none; transition: color .15s; }
a:hover { color: var(--ek-orange); }
/* .container, .container-fluid { max-width: var(--ek-container); } */

/* ========== TOP-BAR СКРЫТ ========== */
#header .top-bar,
.top-bar { display: none !important; }

/* =====================================================
   HEADER — синий блок
   ===================================================== */
#header {
  position: relative;
  z-index: 1000;
  background: transparent !important; /* важно: не синий на весь header */
  box-shadow: none !important;
}

/* Только nav-top — синий */
#header .main-menu {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}

#header .main-menu > .container-fluid,
#header .main-menu > .container-fluid > .row {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* === СИНИЙ БЛОК С ПОИСКОМ === */
#header .nav-top {
  background: var(--ek-header-bg) !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border: none !important;
  transition: padding .25s ease, box-shadow .25s ease;
}

#header .nav-top .container {
  display: flex !important;
  align-items: center !important;
  max-width: var(--ek-container);
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
}

#header .nav-top .row.align-items-center {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Левая часть: лого + поиск */
#header .nav-top-left {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

#header .nav-top-left .row-align-items-center {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px;
  margin: 0 !important;
}

/* ЛОГО — не вылезает */
#header .logo {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 160px;
  overflow: hidden;
}
#header .logo a {
  display: block;
  line-height: 0;
  max-width: 100%;
}
#header .logo img {
  max-height: 38px !important;
  max-width: 150px !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

/* ПОИСК */
#header .top-search-bar {
  flex: 1 1 auto !important;
  max-width: 560px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#header .top-search-bar .form_search_main,
#header #form_validate_search {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  height: 42px;
}
#header .top-search-bar .input-search,
#header #input_search_main {
  flex: 1 1 auto !important;
  height: 42px !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #222 !important;
  outline: none !important;
}
#header .top-search-bar .btn-search,
#header .top-search-bar button.btn-search {
  flex: 0 0 auto !important;
  height: 42px !important;
  width: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--ek-orange) !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-size: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s;
  box-shadow: none !important;
}
#header .top-search-bar .btn-search:hover { background: var(--ek-orange-hover) !important; }
#header .top-search-bar .btn-search i { color: #fff !important; font-size: 17px; margin: 0; }

/* Правая часть — иконки (БЕЗ гамбургера) */
#header .nav-top-right {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 0 0 12px !important;
  margin-left: auto !important;
  background: transparent !important;
}
#header .nav-top-right .nav,
#header .ek-header-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#header .ek-header-icons .ek-icon-btn,
#header .nav-top-right .nav-item a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.95) !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  transition: background .15s;
  position: relative;
  min-width: 44px;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  text-decoration: none !important;
}
#header .ek-header-icons .ek-icon-btn:hover,
#header .nav-top-right .nav-item a:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
#header .ek-header-icons .ek-icon-btn i,
#header .nav-top-right .nav-item a i {
  font-size: 20px !important;
  color: #fff !important;
  margin-bottom: 2px;
  line-height: 1;
}
#header .ek-header-icons .ek-icon-label,
#header .nav-top-right .label-nav-icon {
  font-size: 10px !important;
  color: rgba(255,255,255,.88) !important;
  white-space: nowrap;
}
#header .ek-header-icons .ek-badge,
#header .nav-top-right .notification,
#header .nav-top-right .span_cart_product_count {
  position: absolute !important;
  top: 1px !important;
  right: 3px !important;
  background: var(--ek-orange) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
  border-radius: 50% !important;
  text-align: center !important;
  padding: 0 3px !important;
}
#header .btn-sell-now { display: none !important; }

/* ГАМБУРГЕР — скрываем из синего хедера (переносим в category bar) */
#header .nav-top .ek-burger-wrap,
#header .nav-top #ek-burger,
#header .nav-top #ek-burger-menu {
  display: none !important;
}

/* =====================================================
   CATEGORY BAR — белая полоса + гамбургер справа
   ===================================================== */
#header .nav-main {
  background: #fff !important;
  border-bottom: 1px solid var(--ek-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 999;
  /* Критично: не даём синему фону наезжать */
  clear: both;
  overflow: visible;
}

#header .nav-main .container {
  display: flex !important;
  align-items: center !important;
  max-width: var(--ek-container);
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fff !important;
}

#header .nav-main .navbar-nav,
#header .nav-main ul.navbar-nav,
#header .nav-main > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent !important;
}
#header .nav-main .navbar-nav::-webkit-scrollbar { display: none; }

#header .nav-main .navbar-nav > li,
#header .nav-main ul > li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

#header .nav-main .navbar-nav > li > a,
#header .nav-main ul > li > a {
  display: block !important;
  padding: 10px 14px !important;
  color: #222 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color .15s, border-color .15s;
}
#header .nav-main .navbar-nav > li > a:hover,
#header .nav-main .navbar-nav > li:hover > a {
  color: var(--ek-orange) !important;
  background: transparent !important;
  border-bottom-color: var(--ek-orange) !important;
}

#header .nav-main .dropdown-menu {
  border: 1px solid var(--ek-border) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: var(--ek-shadow-hover) !important;
  padding: 8px 0 !important;
  margin-top: 0 !important;
  background: #fff !important;
}
#header .nav-main .dropdown-menu a {
  color: #222 !important;
  padding: 8px 16px !important;
  font-size: 13px;
  display: block;
}
#header .nav-main .dropdown-menu a:hover {
  background: var(--ek-orange-light) !important;
  color: var(--ek-orange) !important;
}

/* Гамбургер в category bar (синий) */
#header .nav-main .ek-burger-wrap {
  position: relative;
  display: flex !important;
  align-items: center;
  margin-left: auto;
  flex: 0 0 auto;
  padding-left: 8px;
}

#header .nav-main .ek-burger {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background .15s;
}
#header .nav-main .ek-burger:hover,
#header .nav-main .ek-burger.is-active {
  background: rgba(30,58,120,.08) !important;
}

#header .nav-main .ek-burger-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
#header .nav-main .ek-burger-lines span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ek-blue) !important; /* СИНИЙ */
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
#header .nav-main .ek-burger.is-active .ek-burger-lines span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#header .nav-main .ek-burger.is-active .ek-burger-lines span:nth-child(2) { opacity: 0; }
#header .nav-main .ek-burger.is-active .ek-burger-lines span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

#header .nav-main #ek-burger-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 8px 0;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none;
}
#header .nav-main #ek-burger-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
#header .nav-main #ek-burger-menu a {
  display: block;
  padding: 11px 20px;
  color: #222 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  border-bottom: none !important;
}
#header .nav-main #ek-burger-menu a:hover {
  background: var(--ek-orange-light) !important;
  color: var(--ek-orange) !important;
}

/* =====================================================
   STICKY HEADER (только nav-top)
   ===================================================== */
#header .nav-top.is-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: 6px 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2) !important;
  animation: ekStickyIn .28s ease forwards;
}

@keyframes ekStickyIn {
  from { transform: translateY(-100%); opacity: .7; }
  to   { transform: translateY(0); opacity: 1; }
}

/* placeholder чтобы контент не прыгал */
#header .nav-top-placeholder {
  display: none;
  height: 0;
}
#header .nav-top-placeholder.is-active {
  display: block;
}

/* =====================================================
   CATEGORY MOSAIC (кирпичная кладка как ek.ua)
   ===================================================== */
.ek-category-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  gap: 12px;
  margin: 24px 0 32px;
  padding: 0 4px;
}

.ek-mosaic-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #e8eef6;
  display: flex;
  align-items: flex-end;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
  box-shadow: var(--ek-shadow);
}
.ek-mosaic-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--ek-shadow-hover);
}

.ek-mosaic-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.ek-mosaic-item:hover img { transform: scale(1.06); }

.ek-mosaic-item .ek-mosaic-label {
  position: relative;
  z-index: 2;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  background: linear-gradient(transparent, rgba(0,0,0,.45));
  width: 100%;
}

/* Размеры плиток (кирпичная кладка) */
.ek-mosaic-item.wide  { grid-column: span 2; }
.ek-mosaic-item.tall  { grid-row: span 2; }
.ek-mosaic-item.big   { grid-column: span 2; grid-row: span 2; }

/* Цветные фоны если нет картинки */
.ek-mosaic-item.c1 { background: #3a6bc0; }
.ek-mosaic-item.c2 { background: #5b8def; }
.ek-mosaic-item.c3 { background: #f07814; }
.ek-mosaic-item.c4 { background: #2a9d8f; }
.ek-mosaic-item.c5 { background: #e76f51; }
.ek-mosaic-item.c6 { background: #264653; }

@media (max-width: 991px) {
  .ek-category-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px;
  }
  .ek-mosaic-item.wide,
  .ek-mosaic-item.big { grid-column: span 2; }
  .ek-mosaic-item.tall { grid-row: span 1; }
  .ek-mosaic-item.big { grid-row: span 1; }
}
@media (max-width: 575px) {
  .ek-category-mosaic {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    grid-auto-rows: 100px;
  }
}

/* ========== КАРТОЧКИ ТОВАРОВ ========== */
.product-item,
.col-product .product-item {
  background: #fff !important;
  border: 1px solid var(--ek-border-light) !important;
  border-radius: 8px !important;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-item:hover {
  box-shadow: var(--ek-shadow-hover) !important;
  transform: translateY(-2px);
}
.product-item .img-product,
.product-item .product-image {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #fafafa;
}
.product-item .img-product img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .3s;
}
.product-item:hover .img-product img { transform: scale(1.04); }
.product-item .badge-new, .product-item .label-new {
  position: absolute; top: 10px; left: 10px;
  background: var(--ek-badge-new) !important; color: #fff !important;
  font-size: 11px !important; font-weight: 600;
  padding: 3px 10px !important; border-radius: 20px !important; z-index: 2;
}
.product-item .badge-hit, .product-item .label-hit {
  position: absolute; top: 10px; left: 10px;
  background: var(--ek-badge-hit) !important; color: #fff !important;
  font-size: 11px !important; font-weight: 600;
  padding: 3px 10px !important; border-radius: 20px !important; z-index: 2;
}
.product-item .product-title, .product-item h3 {
  font-size: 13px !important; font-weight: 400 !important;
  color: #222 !important; line-height: 1.35;
  margin: 0 0 6px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 36px;
}
.product-item .product-title a { color: #222 !important; }
.product-item .product-title a:hover { color: var(--ek-blue-mid) !important; }
.product-item .price, .product-item .product-price {
  font-size: 16px !important; font-weight: 700 !important;
  color: #1a1a1a !important; margin-top: auto;
}
.product-item .price-old {
  font-size: 13px; color: #999; text-decoration: line-through;
  font-weight: 400; margin-right: 6px;
}
.product-item .item-meta, .product-item .product-item-footer {
  padding: 10px 12px 14px !important;
  display: flex; flex-direction: column; flex: 1;
}

/* ========== FOOTER / BUTTONS / UTILS ========== */
.section-header .title, .section .title {
  font-size: 22px !important; font-weight: 600 !important; color: #1a1a1a !important;
}
.btn-primary, .btn-custom, .btn-add-to-cart {
  background: var(--ek-orange) !important; border-color: var(--ek-orange) !important;
  color: #fff !important; border-radius: 6px !important; font-weight: 600;
}
.btn-primary:hover, .btn-custom:hover { background: var(--ek-orange-hover) !important; }

#footer {
  background: #1a1f2e !important; color: #b0b8c4 !important;
  padding-top: 40px !important; margin-top: 48px;
}
#footer .footer-title { color: #fff !important; font-size: 15px !important; font-weight: 600; }
#footer a { color: #a0a8b4 !important; font-size: 13px; }
#footer a:hover { color: var(--ek-orange) !important; }
#footer .footer-bottom {
  background: #12151f !important; border-top: 1px solid #2a3040;
  padding: 14px 0; margin-top: 30px;
}
#footer .newsletter-button {
  background: var(--ek-orange) !important; border: none !important;
  color: #fff !important; font-weight: 600;
}

.row-product { margin-left: -8px; margin-right: -8px; }
.col-product { padding-left: 8px; padding-right: 8px; margin-bottom: 16px; }
.section-slider { margin-bottom: 16px; }

/* Мобильный */
@media (max-width: 991px) {
  #header .nav-top .row.align-items-center { flex-wrap: wrap !important; }
  #header .nav-top-left { width: 100% !important; margin-bottom: 6px; }
  #header .top-search-bar { max-width: 100% !important; }
  #header .nav-top-right { width: 100% !important; justify-content: flex-end; padding-left: 0 !important; }
  #header .logo img { max-height: 32px !important; }
  #header .ek-header-icons .ek-icon-label,
  #header .nav-top-right .label-nav-icon { display: none; }
}
@media (max-width: 575px) {
  #header .top-search-bar .input-search,
  #header #input_search_main { height: 38px !important; font-size: 13px !important; }
  #header .top-search-bar .btn-search {
    height: 38px !important; width: 42px !important; min-width: 42px !important;
  }
}