/* zem-catalog.css — Zemlogistika catalog page styles */
/* Active theme: tt_mirora1 | Sessions С-2 through С-14 */
/* Variable mapping: --zem-gold=#F8D04A (yellow links), --zem-gold-muted=#B18952 (active/hover) */

/* === BREADCRUMBS + TITLE ORDER (category pages) ===
   common.js appends: category-name first, then breadcrumb.
   Figma wants breadcrumbs ABOVE title — flip via flex order. */
body[class*="product-category"] .breadcrumbs .container {
  display: flex;
  flex-direction: column;
}
body[class*="product-category"] .breadcrumbs .breadcrumb,
body[class*="product-category"] .breadcrumbs .zem-svc-bc--listing,
body[class*="product-category"] .breadcrumbs .zem-svc-bc {
  order: -1;
}

/* Legacy ul.breadcrumb — same look as zem-svc-bc--listing (e.g. /katalog-tekhniki) */
body[class*="product-category"] .breadcrumbs .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  margin-bottom: 8px;
  list-style: none;
  padding: 0;
  background: none;
  text-transform: none;
}
body[class*="product-category"] .breadcrumbs .breadcrumb > li + li:before {
  content: " / ";
  color: #fff;
  opacity: .35;
  padding: 0;
}
body[class*="product-category"] .breadcrumbs .breadcrumb li:before {
  margin: 0;
}
body[class*="product-category"] .breadcrumbs .breadcrumb li a {
  color: #fff;
  opacity: .6;
  font-size: 12px;
  text-decoration: none;
  transition: opacity .15s;
}
body[class*="product-category"] .breadcrumbs .breadcrumb li a:hover {
  opacity: 1;
  color: #fff;
}
body[class*="product-category"] .breadcrumbs .breadcrumb li .zem-svc-bc__current {
  color: #b18952;
  opacity: 1;
  font-size: 12px;
}
body[class*="product-category"] .breadcrumbs .breadcrumb li:last-child a {
  color: #b18952;
  opacity: 1;
}
body[class*="product-category"] .breadcrumbs .container:has(.zem-svc-bc--listing) .breadcrumb,
body[class*="product-category"] .breadcrumbs .container:has(.zem-svc-bc) .breadcrumb {
  display: none !important;
}

/* Equipment catalog breadcrumbs (parity with services/blog zem-svc-bc--listing) */
body[class*="product-category"] .zem-svc-bc--listing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
body[class*="product-category"] .zem-svc-bc--listing a {
  color: #fff;
  opacity: .6;
  text-decoration: none;
  transition: opacity .15s;
}
body[class*="product-category"] .zem-svc-bc--listing a:hover {
  opacity: 1;
}
body[class*="product-category"] .zem-svc-bc--listing .zem-svc-bc__sep {
  color: #fff;
  opacity: .35;
}
body[class*="product-category"] .zem-svc-bc--listing .zem-svc-bc__current {
  color: #b18952;
}

/* === CATEGORY TITLE FONT ===
   .category-name is moved into .breadcrumbs by common.js.
   Override global 48px rule → Prata 32px #fff per Figma. */
body[class*="product-category"] .breadcrumbs .category-name {
  /*font-family: 'Prata', Georgia, serif;*/
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 32px;
  color: #fff;
  display: block;
  margin: 8px 0 0;
  /* 2026-06-17 P8 Stage A: H1/category title center per Figma 53:1372. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
  text-align: center;
  /* 2026-06-18: match Figma node 53:1416 — kill inherited capitalize (stylesheet.css:3314) + add letter-spacing. */
  text-transform: none;
  letter-spacing: 0.64px;
}

/* === SIDEBAR === */
.zem-sidebar {
  background: var(--zem-bg-sidebar);
  padding: 20px;
  width: 244px;
  flex-shrink: 0;
}
/* .category-module h3 in stylesheet.css has specificity 0,1,1 — need 0,2,0 to win */
.zem-sidebar .zem-sidebar__title {
  font: 400 16px Montserrat, sans-serif;
  color: #fff;
  margin-bottom: 16px;
  /* 2026-06-17 P8 Stage A: Figma sidebar-title text-transform none (was inheriting capitalize). Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
  text-transform: none;
}
/* Higher specificity than .category-module .li a (0,0,2,1)
   Figma: normal=#FFFFFF, active=#F8D04A, font=Rubik Regular 12px */
.zem-sidebar .category-module .li a {
  font: 400 12px Montserrat, sans-serif;
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  line-height: 1.6;
  text-transform: none;
}
.zem-sidebar .category-module .li a.active,
.zem-sidebar .category-module .li a:hover { color: var(--zem-gold); }

/* Desktop: chevron hidden, list always visible (plain sidebar list) */
.zem-cat-nav__chev { display: none; }

/* === TOOLBAR === */
.zem-toolbar {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 16px;
  border-bottom: 1px solid rgba(90,90,90,0.5);
}
.zem-view-toggle { display: flex; gap: 8px; }
/* 2026-06-17 Figma 54:1959: иконки toggle через CSS mask (view-grid.svg / view-list.svg).
   Цвет = background-color (recolorable): неактив #616161, актив/hover белый — паритет Figma.
   Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
.zem-view-btn {
  width: 24px;
  height: 24px;
  border: none;
  cursor: pointer;
  padding: 0;
  background-color: #616161;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
#btn-grid { -webkit-mask-image: url(../image/icons/view-grid.svg); mask-image: url(../image/icons/view-grid.svg); }
#btn-list { -webkit-mask-image: url(../image/icons/view-list.svg); mask-image: url(../image/icons/view-list.svg); }
.zem-view-btn.active,
.zem-view-btn:hover { background-color: #fff; }

/* === TOOLBAR RIGHT (dropdowns + results) === */
.zem-toolbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.zem-toolbar label { font: 300 12px Montserrat, sans-serif; color: #fff; white-space: nowrap; }
.zem-results { font: 300 12px Montserrat, sans-serif; color: #fff; margin-right: 8px; }
.zem-select-wrap select {
  font: 300 12px Montserrat, sans-serif;
  color: #fff;
  border: none;
  background: var(--zem-bg-inactive);
  height: 30px;
  padding: 0 8px;
  cursor: pointer;
  outline: none;
  appearance: none;
}
/* 2026-06-17 Figma 54:1959: лимит-селект «15» — нейтральный фон (как сортировка), значение по центру.
   Был золотой (--zem-gold/#1D1D1D) — убрано. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
.zem-select-wrap--limit select { text-align: center; text-align-last: center; }

/* === PRODUCT GRID === */
.zem-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 242px);
  gap: 24px;
  margin-top: 16px;
}
/* BP1 Wide ≥1500 — 4 карточки в ряд на полном развороте (PM 2026-06-17).
   Колонки fluid + карточка тянется на ячейку (как в ≤1199). Порог легко менять.
   Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
@media (min-width: 1500px) {
  .zem-products-grid { grid-template-columns: repeat(3, 1fr); }
  .zem-card--grid { width: 100%; }
  .zem-card--grid .zem-card__img-wrap { width: 100%; }
}
.zem-card--grid {
  width: 242px;
  min-height: 417px;
  background: var(--zem-bg-card);
  display: flex;
  flex-direction: column;
}
.zem-card__img-wrap {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--zem-bg-card);
}
.zem-card__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.zem-card__overlay {
  position: absolute;
  inset: 0;
  /*background: rgba(0,0,0,0.6);*/
}
.zem-card__body {
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* 2026-06-17 P8 Stage A: card-title center + ls .02em per Figma 53:1372 (grid view). Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
.zem-card--grid .zem-card__title { text-align: center; }
.zem-card--grid .zem-card__title a {
  font: 400 16px Montserrat, sans-serif;
  color: var(--zem-white);
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .2s;
}

.zem-card--grid:hover .zem-card__title a { color: var(--zem-gold-muted); }

/* === SPECS === */
.zem-card__specs {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.zem-card__spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  border-bottom: 1px solid var(--zem-border);
}
.zem-spec-label,
.zem-spec-value { font: 300 12px Montserrat, sans-serif; color: var(--zem-white); }

/* === CARD PRICE === */
.zem-card__price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 27px;
  border-bottom: 1px solid var(--zem-border);
  margin-top: 8px;
  flex-shrink: 0;
}
.zem-price-label { font: 300 12px Montserrat, sans-serif; color: var(--zem-white); }
.zem-price-value { font: 300 12px Montserrat, sans-serif; color: var(--zem-yellow); }
/* Figma 56:1712 — category-card price 16px gold, single line; overrides leaked unscoped .zem-price-value{32px} from zem-product.css (2026-06-15) */
.zem-card .zem-price-value { font: 400 16px Montserrat, sans-serif; color: var(--zem-yellow); white-space: nowrap; }
.zem-card .zem-card__price-val { display: inline-flex; align-items: baseline; gap: 2px; }
/* 2026-06-17 P9 Stage A: price-unit «/ 8 год» 12px→10px per Figma 53:1372. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
.zem-card .zem-price-unit { font: 300 10px Montserrat, sans-serif; color: var(--zem-white); white-space: nowrap; }
/* In list mode: separate price row hidden — price lives inside actions */
.is-list .zem-card__price { display: none; }
/* price-inline hidden in grid mode */
.zem-card__price-inline { display: none; }
/* 2026-06-17 Figma 56:450: строка «Аренда от X / 8ч» прибита к нижней группе (над кнопкой),
   чтобы не «прыгала» при разном числе/переносах строк характеристик. margin-top:auto переезжает
   с .zem-card__actions на .zem-card__price; переменная высота specs уходит в зазор НАД ценой.
   Только grid-вид (в list цена = price-inline). Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
.zem-products-grid:not(.is-list) .zem-card__price { margin-top: auto; }
.zem-products-grid:not(.is-list) .zem-card__actions { margin-top: 0; }

/* === CARD ACTIONS === */
.zem-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.zem-btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--zem-icon-border);
  cursor: pointer;
  color: var(--zem-white);
  flex-shrink: 0;
}
.zem-btn-icon.active { border-color: var(--zem-gold); color: var(--zem-gold); }
.zem-btn-order {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 14px Montserrat, sans-serif;
  /* 2026-06-17 P3/C3 Stage A: action-gold #B18952/border #B28952 (was bright accent --zem-gold #F8D04A — E4 «wrong gold»). Reuse existing tokens, no new var. Hover = muted fill, not bright. Figma 53:1372. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
  color: var(--zem-gold-muted);
  border: 1px solid var(--zem-gold-border);
  text-decoration: none;
}
.zem-btn-order:hover { background: var(--zem-gold-muted); color: #fff; }

/* === LIST VIEW === */
.zem-products-grid.is-list {
  grid-template-columns: 1fr;
  gap: 16px;
}
.is-list .zem-card--grid {
  flex-direction: row;
  width: 100%;
  height: auto;
  min-height: unset;
  align-items: stretch;
}
.is-list .zem-card__img-wrap {
  width: 241px;
  height: auto;
  flex-shrink: 0;
}
.is-list .zem-card__body {
  padding: 19px 16px;
  flex: 1;
}
.is-list .zem-card__actions {
  flex-direction: row;
  align-items: center;
  margin-top: auto;
  padding-top: 0;
  gap: 8px;
}
/* List mode order: ЗАМОВИТИ → ♥ → ≈ → price */
.is-list .zem-btn-order   { order: 1; width: 240px; flex: none; }
.is-list .zem-btn-fav     { order: 2; }
.is-list .zem-btn-compare { order: 3; }
.is-list .zem-card__price-inline {
  order: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 173px;
  flex-shrink: 0;
  margin-left: auto;
  gap: 0;
}

/* === PAGINATION === */
.zem-pagination-bar {
  font: 300 12px Montserrat, sans-serif;
  color: #fff;
  margin-bottom: 8px;
}
.zem-pagination .pagination {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.zem-pagination .pagination li a,
.zem-pagination .pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font: 300 12px Montserrat, sans-serif;
  background: var(--zem-bg-inactive);
  /* 2026-06-17 Figma 56:595: неактивная цифра = белый @60% (было сплошной white). */
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  /* 2026-06-17 Figma 56:595: rounded 4px. */
  border-radius: 4px;
  /* 2026-06-17: kill inherited theme padding 6px 12px + nowrap — иначе «|<» (first-page) переносился на 2 строки. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
  padding: 0;
  white-space: nowrap;
}
/* 2026-06-17 Figma 56:595: активная/hover = приглушённый gold #B18952 + белый текст (было яркий #F8D04A + тёмный #1D1D1D). */
.zem-pagination .pagination li.active span { background: var(--zem-gold-muted); color: #fff; }
.zem-pagination .pagination li a:hover { background: var(--zem-gold-muted); color: #fff; }

/* === CATEGORY THUMB (banner below products) === */
.zem-cat-thumb { margin-top: 48px; max-width: 774px; }
.zem-cat-thumb img { width: 100%; height: auto; display: block; object-fit: cover; }

/* === CATEGORY DESCRIPTION === */
.zem-cat-desc { max-width: 100%; margin-top: 60px; }
/* 2026-06-16: +h1 so a stray <h1> typed in CKEditor desc (e.g. /vibroplita UA+RU) renders Prata 32 like h2/h3, not global Oswald 36/500. Admin h1->h2 save blocked by pre-existing dup SEO URL. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
.zem-cat-desc h1,
.zem-cat-desc h2,
.zem-cat-desc h3 { font: 400 32px Montserrat, sans-serif; color: #fff; margin-bottom: 16px; }
/* 2026-06-16: body 14px->16px + lh 24px to match Figma 53:1373 (Rubik Light 16/lh24, verified live via Dev Mode bridge get-node-properties on 53:1767/1777/1781/1785). Prior 14/1.6 was unverified. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css */
.zem-cat-desc p { font: 300 16px/24px Montserrat, sans-serif !important; color: #fff; margin-bottom: 16px; }
.zem-cat-desc ul, .zem-cat-desc ol, .zem-cat-desc li { font: 300 16px/24px Montserrat, sans-serif !important; color: #fff; }
.zem-cat-desc a { color: var(--zem-gold); font: 300 16px/24px Montserrat, sans-serif !important; }
/* Hide category banner-thumb below products + images in SEO description, on ALL category pages (2026-06-15) */
.zem-cat-thumb { display: none !important; }
.zem-cat-desc img {
  /*display: none !important; */
}
.zem-link-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 12px Montserrat, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 24px;
}
.zem-link-all:hover { color: var(--zem-gold); }

/* ============================================================
   2026-06-17 P6 / master C10 Stage B — RESPONSIVE (file had 0 media queries; master §3 main gap)
   Ladder = master §3.1. Desktop ≥1200 untouched.
   Layout: #product-category .col-order = [aside.zem-sidebar(244) + #content.col-md-9] via BS floats.
   <1200 the BS container (~970) is too narrow for 244+75% float → switch col-order to flex.
   ≤991 stack sidebar full-width ABOVE grid (DOM order: sidebar first → no reorder needed).
   Grid 3→2→1; toolbar wraps; list cards stack on mobile to avoid h-overflow.
   Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-catalog.css
   ============================================================ */

/* BP2 Laptop 992–1199 — flex row so sidebar(244)+content don't float-wrap */
@media (max-width: 1199px) {
  #product-category .col-order { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
  #product-category #content { flex: 1 1 0; min-width: 0; width: auto; }
  /* sidebar order:-1 beats theme .col-order order (content:1/sidebar:2) → sidebar LEFT in row, ABOVE in column (PM 2026-06-17: sidebar-above per master §3.1) */
  #product-category .zem-sidebar { flex: 0 0 244px; width: 244px; order: -1; }
  .zem-products-grid { grid-template-columns: repeat(3, 1fr); }
  .zem-card--grid { width: 100%; }
  .zem-card--grid .zem-card__img-wrap { width: 100%; }
}

/* BP3 Tablet ≤991 — stack: sidebar full-width + content full-width (column flex).
   NB reset #content flex:1 1 0 (row-only) → 0 0 auto, else flex-basis:0 collapses HEIGHT in column → overlap. */
@media (max-width: 991px) {
  #product-category .col-order { flex-direction: column; }
  #product-category #content { flex: 0 0 auto; width: 100%; }
  #product-category .zem-sidebar { flex: 0 0 auto; width: 100%; margin-bottom: 24px; padding: 0; background: transparent; }
  .zem-products-grid { grid-template-columns: repeat(2, 1fr); }
  .zem-toolbar { flex-wrap: wrap; height: auto; padding: 12px 0; }
  .zem-toolbar__right { margin-left: auto; flex-wrap: wrap; }

  /* Categories as a collapsible dropdown (select-like) */
  .zem-sidebar .zem-cat-nav {
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    background: #242424;
    overflow: hidden;
  }
  .zem-sidebar .zem-cat-nav .zem-sidebar__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font: 400 16px Montserrat, sans-serif;
    color: #fff;
  }
  .zem-sidebar .zem-cat-nav .zem-cat-nav__chev {
    display: block;
    flex: 0 0 auto;
    color: #b18952;
    transition: transform 0.25s ease;
  }
  .zem-sidebar .zem-cat-nav.is-open .zem-cat-nav__chev {
    transform: rotate(180deg);
  }
  .zem-sidebar .zem-cat-nav .zem-cat-nav__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .zem-sidebar .zem-cat-nav.is-open .zem-cat-nav__list {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #3a3a3a;
  }
  .zem-sidebar .zem-cat-nav .zem-cat-nav__list .li a {
    padding: 10px 18px;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .zem-sidebar .zem-cat-nav .zem-cat-nav__list .li:last-child a {
    border-bottom: 0;
  }
}

/* BP4 Mobile-L ≤767 — single column on phones (iPhone Plus/Pro Max >420px were stuck at 2-col) */
@media (max-width: 767px) {
  #product-category .zem-products-grid { grid-template-columns: 1fr; gap: 16px; }
  #product-category #content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .zem-card--grid .zem-card__body { padding: 16px; }
  .is-list .zem-card--grid { flex-direction: column; height: auto; }
  .is-list .zem-card__img-wrap { width: 100%; }
  .is-list .zem-card__actions { flex-wrap: wrap; }
  .is-list .zem-btn-order { width: 100%; order: 4; }
  .is-list .zem-card__price-inline { width: 100%; align-items: flex-start; margin-left: 0; }
}

/* BP5 Mobile-S ≤420 — single column; title down-scale */
@media (max-width: 420px) {
  .zem-products-grid { grid-template-columns: 1fr; }
  .zem-toolbar__right { margin-left: 0; }
  body[class*="product-category"] .breadcrumbs .category-name { font-size: 24px; }
}

/* === SEARCH PAGE (product/search only) === */
#product-search .col-order,
#product-search #content {
  width: 100%;
  max-width: 100%;
}

body.product-search .breadcrumbs .category-name {
  display: block;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: none;
  margin: 0 0 24px;
}

#product-search .zem-products-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Popular block reuses .zem-popular from homepage CMS; .zem-popular .row forces flex and breaks grid cards */
#product-search .zem-popular .zem-products-grid {
  display: grid !important;
}

#product-search .zem-card--grid,
#product-search .zem-card--grid .zem-card__img-wrap {
  width: 100%;
}

#product-search .zem-card__img-wrap {
  border: none;
  background: transparent;
}

#product-search .zem-card__img-wrap img {
  border: none;
}

@media (max-width: 1199px) {
  #product-search .zem-products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  #product-search .zem-products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  body.product-search .breadcrumbs .category-name { font-size: 24px; }
  #product-search .zem-products-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES / BLOG SIDEBAR (.zem-svc-sidebar) — mobile: categories dropdown + search toggle
   ============================================================ */
/* Desktop: search-toggle button hidden (search field always visible) */
.zem-svc-search-toggle { display: none; }

@media (max-width: 991px) {
  body.product-category-162 .zem-svc-sidebar,
  .zem-svc-sidebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100%;
  }

  /* ── categories → collapsible dropdown ── */
  body.product-category-162 .zem-svc-block--cats,
  .zem-svc-sidebar .zem-svc-block--cats {
    flex: 1 1 auto !important;
    min-width: 0;
    background: #242424 !important;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0 !important;
    overflow: hidden;
  }
  body.product-category-162 .zem-svc-block--cats .zem-svc-block__title,
  .zem-svc-sidebar .zem-svc-block--cats .zem-svc-block__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0 16px;
    min-height: 48px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
  }
  body.product-category-162 .zem-svc-block--cats .zem-cat-nav__chev,
  .zem-svc-sidebar .zem-svc-block--cats .zem-cat-nav__chev {
    display: block;
    flex: 0 0 auto;
    color: #b18952;
    transition: transform 0.25s ease;
  }
  body.product-category-162 .zem-svc-block--cats.is-open .zem-cat-nav__chev,
  .zem-svc-sidebar .zem-svc-block--cats.is-open .zem-cat-nav__chev {
    transform: rotate(180deg);
  }
  body.product-category-162 .zem-svc-block--cats .zem-svc-nav,
  .zem-svc-sidebar .zem-svc-block--cats .zem-svc-nav {
    max-height: 0;
    overflow: hidden;
    gap: 0 !important;
    transition: max-height 0.3s ease;
  }
  body.product-category-162 .zem-svc-block--cats.is-open .zem-svc-nav,
  .zem-svc-sidebar .zem-svc-block--cats.is-open .zem-svc-nav {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #3a3a3a;
  }
  body.product-category-162 .zem-svc-block--cats .zem-svc-nav li a,
  .zem-svc-sidebar .zem-svc-block--cats .zem-svc-nav li a {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  body.product-category-162 .zem-svc-block--cats .zem-svc-nav li:last-child a,
  .zem-svc-sidebar .zem-svc-block--cats .zem-svc-nav li:last-child a {
    border-bottom: 0;
  }

  /* ── search → button that opens the field ── */
  body.product-category-162 .zem-svc-block--search,
  .zem-svc-sidebar .zem-svc-block--search {
    flex: 0 0 auto !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.product-category-162 .zem-svc-block--search .zem-svc-block__title,
  .zem-svc-sidebar .zem-svc-block--search .zem-svc-block__title {
    display: none;
  }
  body.product-category-162 .zem-svc-search-toggle,
  .zem-svc-sidebar .zem-svc-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    background: #242424;
    color: #fff;
    cursor: pointer;
  }
  body.product-category-162 .zem-svc-search-toggle:hover,
  .zem-svc-sidebar .zem-svc-search-toggle:hover {
    color: var(--zem-gold, #f8d04a);
  }
  body.product-category-162 .zem-svc-block--search .zem-svc-search,
  .zem-svc-sidebar .zem-svc-block--search .zem-svc-search {
    display: none !important;
  }
  body.product-category-162 .zem-svc-block--search.is-open,
  .zem-svc-sidebar .zem-svc-block--search.is-open {
    flex: 1 1 100% !important;
    order: 3;
  }
  body.product-category-162 .zem-svc-block--search.is-open .zem-svc-search-toggle,
  .zem-svc-sidebar .zem-svc-block--search.is-open .zem-svc-search-toggle {
    display: none;
  }
  body.product-category-162 .zem-svc-block--search.is-open .zem-svc-search,
  .zem-svc-sidebar .zem-svc-block--search.is-open .zem-svc-search {
    display: flex !important;
    width: 100%;
    height: 48px;
  }
}

/* ── Service leaf (subcategory) — «Схожі послуги» collapsible dropdown ── */
@media (max-width: 991px) {
  body[class*="product-category-162_"] .zem-svc-related {
    background: #242424;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }
  body[class*="product-category-162_"] .zem-svc-related__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    min-height: 48px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
  }
  body[class*="product-category-162_"] .zem-svc-related .zem-cat-nav__chev {
    display: block;
    flex: 0 0 auto;
    color: #b18952;
    transition: transform 0.25s ease;
  }
  body[class*="product-category-162_"] .zem-svc-related.is-open .zem-cat-nav__chev {
    transform: rotate(180deg);
  }
  body[class*="product-category-162_"] .zem-svc-related__list {
    max-height: 0;
    overflow: hidden;
    gap: 0 !important;
    transition: max-height 0.3s ease;
  }
  body[class*="product-category-162_"] .zem-svc-related.is-open .zem-svc-related__list {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #3a3a3a;
  }
  body[class*="product-category-162_"] .zem-svc-related__list li a {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  body[class*="product-category-162_"] .zem-svc-related__list li:last-child a {
    border-bottom: 0;
  }

  /* title moved above breadcrumbs on mobile */
  body[class*="product-category-162_"] .breadcrumbs .container .zem-svc-title {
    text-align: center;
    margin: 0 0 12px;
  }
}

/* ── Blog single (article) — mobile: title above breadcrumbs, meta below, image after ── */
@media (max-width: 991px) {
  body.blog-article .breadcrumbs .container .zem-svc-title {
    text-align: center;
    margin: 0 0 12px;
  }
  body.blog-article .breadcrumbs .container .zem-blog-meta {
    margin: 0 0 12px;
  }
  /* breadcrumbs wrap by words */
  body.blog-article .zem-svc-bc {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}