/* Shop v1 (ms_shop_v1 + ms_v1_* bars). Card/grid/chips/panel base styling is
   reused from filter-panel.css. NOTE: the Zakra Page Header stays enabled. */

/* ---------- Header menu bar (filtering menu, never navigates) ---------- */
.msf-pg-hdr-bar { position: relative; z-index: 999; background: #fff; border-bottom: 1px solid #e8e8e8; }
.msf-ms-topbar { list-style: none; margin: 0; padding: 0 12px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.msf-ms-topitem { flex: 0 0 auto; }
.msf-ms-toplink { border: 0; background: transparent; padding: 12px 14px; font-size: 14px; font-weight: 600; color: #1d1e26; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.msf-ms-topitem.is-active .msf-ms-toplink, .msf-ms-toplink:hover, .msf-ms-toplink.is-active { color: #0757EE; border-bottom-color: #0757EE; }
.msf-ms-toplink .msf-bar-count { font-weight: 400; color: #6c757d; font-size: 12px; }
.msf-ms-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #e8e8e8; border-top: 0; box-shadow: 0 18px 40px rgba(0,0,0,.12); padding: 12px 16px 20px; }
.msf-ms-panel.is-hidden { display: none; }
.msf-ms-search { max-width: 420px; margin: 4px 0 12px; position: relative; }
.msf-ms-search input { width: 100%; padding: 9px 12px 9px 36px; border: 1px solid #ddd; border-radius: 999px; font-size: 13px; background: #f4f4f5 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="%23666" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center; }
.msf-ms-body { display: flex; gap: 0; max-height: 60vh; }
.msf-ms-lines { list-style: none; margin: 0; padding: 0 16px 0 0; width: 230px; flex: 0 0 230px; overflow-y: auto; border-right: 1px solid #eee; }
.msf-ms-line { margin: 0; padding: 0; }
.msf-ms-linebtn { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; color: #1d1e26; }
.msf-ms-linebtn:hover, .msf-ms-line.is-active .msf-ms-linebtn { background: #EFF4FF; color: #0757EE; }
.msf-ms-detail { flex: 1; overflow-y: auto; padding: 0 8px 0 20px; }
.msf-ms-sub { margin: 0 0 14px; }
.msf-ms-subtitle { display: inline-block; font-size: 13px; font-weight: 700; background: #f1f2f4; border-radius: 999px; padding: 3px 12px; margin: 0 0 8px; border: 1px solid transparent; cursor: pointer; color: #1d1e26; }
.msf-ms-subtitle:hover, .msf-ms-subtitle.is-active { background: #EFF4FF; color: #0757EE; border-color: #0757EE; }
.msf-ms-items { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px 18px; }
.msf-ms-items button { border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: left; padding: 4px 6px; font-size: 13px; cursor: pointer; color: #343a40; }
.msf-ms-items button:hover { color: #0757EE; text-decoration: underline; }
.msf-ms-items button.is-active { color: #0757EE; font-weight: 700; border-color: #0757EE; background: #EFF4FF; text-decoration: none; }
.msf-ms-empty { color: #6c757d; font-size: 13px; }

/* ---------- V1 sticky cats bar ---------- */
.msv1-cats-bar { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 8px 0; scrollbar-width: thin; }
.msv1-cat-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e0e0e0; background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: #1d1e26; }
.msv1-cat-btn i { font-size: 15px; color: #0d6efd; }
.msv1-cat-btn:hover { border-color: #0d6efd; }
.msv1-cat-btn.is-active { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.msv1-cat-btn.is-active i { color: #fff; }
.msv1-cat-btn .msf-bar-count { font-weight: 400; font-size: 12px; opacity: .75; }
.msf-v1 .msf-toggle-btn i { margin-right: 2px; }
.msf-v1 .msf-section-chevron { font-size: 12px; }
.msf-v1 .msf-checkbox-label i { color: #0d6efd; margin-right: 2px; }

/* ---------- Nested children (all levels, incl. lazy) ---------- */
.msf-v1 .msf-children-list, .msf-panel .msf-children-list { display: none; list-style: none; margin: 4px 0 4px 24px; padding: 0 0 0 10px; border-left: 2px solid #e8e8e8; }
.msf-v1 .msf-checkbox-item.is-expanded > .msf-children-list, .msf-panel .msf-checkbox-item.is-expanded > .msf-children-list { display: block; }
.msf-expand-children .fa-chevron-down, .msf-expand-children svg { transition: transform .15s; }
.msf-checkbox-item.is-expanded > .msf-expand-children .fa-chevron-down, .msf-checkbox-item.is-expanded > .msf-expand-children svg { transform: rotate(180deg); }
.msf-children-list .msf-checkbox-item { padding: 3px 0; }
.msf-children-list .msf-checkbox-label { font-size: 12.5px; }

/* ---------- Results head ---------- */
.msf-product-column { flex: 1; min-width: 0; }
.msv1-results-head { margin-bottom: 8px; }

@media (max-width: 860px) {
  .msf-ms-body { flex-direction: column; max-height: 70vh; }
  .msf-ms-lines { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid #eee; padding: 0 0 8px; margin-bottom: 8px; max-height: 30vh; }
  .msf-ms-items { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .msv1-cat-btn span:not(.msf-bar-count) { font-size: 12px; }
}