/* =============================================================================
   SMJ Marketplace — Premium Polish v7.0
   Surgical upgrade: trust signals, micro-interactions, clean hierarchy.
   Inspired by Cars24 · CarDekho · Airbnb card design.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Typography */
  --mk-font:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Brand */
  --mk-blue:       #2563eb;
  --mk-blue-dk:    #1d4ed8;
  --mk-blue-lt:    #eff6ff;
  --mk-blue-mid:   #3b82f6;
  --mk-green:      #16a34a;
  --mk-green-lt:   #f0fdf4;
  --mk-orange:     #f59e0b;
  --mk-red:        #ef4444;
  --mk-red-lt:     #fef2f2;

  /* Surfaces */
  --mk-bg:         #ffffff;
  --mk-card:       #ffffff;
  --mk-card-hover: #fafbff;
  --mk-border:     #e5e9f0;
  --mk-border-lt:  #f0f3f8;
  --mk-divider:    #eef1f6;

  /* Text */
  --mk-text-1:     #111827;   /* titles */
  --mk-text-2:     #374151;   /* body */
  --mk-text-3:     #6b7280;   /* meta */
  --mk-text-4:     #9ca3af;   /* placeholder */

  /* Shadows — layered, soft */
  --mk-shadow-card:  0 1px 3px rgba(17,24,39,.05), 0 4px 12px rgba(17,24,39,.06);
  --mk-shadow-hover: 0 4px 8px rgba(17,24,39,.04), 0 16px 40px rgba(37,99,235,.12);
  --mk-shadow-fav:   0 2px 8px rgba(0,0,0,.16);
  --mk-shadow-pill:  0 1px 4px rgba(0,0,0,.08);
  --mk-shadow-sidebar: 0 2px 16px rgba(17,24,39,.06);

  /* Radius */
  --mk-r-sm:   8px;
  --mk-r:      14px;
  --mk-r-lg:   18px;
  --mk-r-pill: 999px;

  /* Motion */
  --mk-ease:   cubic-bezier(.4, 0, .2, 1);
  --mk-fast:   .18s;
  --mk-mid:    .26s;
  --mk-slow:   .38s;

  /* Layout */
  --mk-sidebar-w: 272px;
  --mk-grid-gap:  16px;
  --mk-card-pad:  12px;
}

/* ─── 2. RESET SCOPE ───────────────────────────────────────────────────────── */
.smj-listings-wrap,
.smj-listings-wrap * {
  font-family: var(--mk-font);
  box-sizing:  border-box;
}
.smj-listings-wrap a { text-decoration: none; }
.smj-listings-wrap {
  background: #ffffff;
  padding-bottom: 48px;
}

/* ─── 3. LAYOUT ────────────────────────────────────────────────────────────── */
.smj-content-area {
  display:     flex;
  gap:         20px;
  align-items: flex-start;
}
.smj-listings-main { flex: 1; min-width: 0; }

/* ─── 4. RESULTS TOOLBAR ────────────────────────────────────────────────────── */
.smj-results-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--mk-card);
  border:          1px solid var(--mk-border);
  border-radius:   var(--mk-r);
  padding:         11px 16px;
  margin-bottom:   var(--mk-grid-gap);
  gap:             10px;
  flex-wrap:       wrap;
}
.smj-results-count {
  font-size:   13px;
  color:       var(--mk-text-3);
  font-weight: 500;
}
.smj-results-count strong {
  font-size:   15px;
  font-weight: 700;
  color:       var(--mk-text-1);
}
.smj-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Toolbar sort */
.smj-toolbar-sort {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--mk-text-3);
  font-weight: 500;
}
.smj-toolbar-sort {
  position: relative; /* needed for the ::after arrow trick */
}
.smj-toolbar-sort select {
  padding:          6px 32px 6px 10px;
  border:           1.5px solid var(--mk-border);
  border-radius:    var(--mk-r-sm);
  background:       var(--mk-card);
  font-family:      var(--mk-font);
  font-size:        12px;
  font-weight:      600;
  color:            var(--mk-text-2);
  cursor:           pointer;
  /* DO NOT use appearance:none — it disables the native picker on iOS Safari,
     making the select completely unresponsive to touch.
     We use a ::after pseudo-element on the wrapper for a custom arrow instead. */
  transition: border-color var(--mk-fast) var(--mk-ease);
}
/* Custom dropdown arrow via wrapper pseudo-element (iOS-safe) */
.smj-toolbar-sort .smj-sort-wrap {
  position:   relative;
  display:    inline-block;
}
.smj-toolbar-sort .smj-sort-wrap::after {
  content:          '';
  position:         absolute;
  right:            10px;
  top:              50%;
  transform:        translateY(-50%);
  width:            0;
  height:           0;
  border-left:      5px solid transparent;
  border-right:     5px solid transparent;
  border-top:       5px solid var(--mk-text-3, #6b7280);
  pointer-events:   none;
}
.smj-toolbar-sort select:hover { border-color: var(--mk-blue); }

/* Filter toggle button */
.smj-sidebar-toggle {
  display:       none;
  align-items:   center;
  gap:           6px;
  padding:       8px 16px;
  background:    var(--mk-blue);
  color:         #fff;
  border:        none;
  border-radius: var(--mk-r-pill);
  font-family:   var(--mk-font);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  letter-spacing:.01em;
  transition:    background var(--mk-fast) var(--mk-ease), transform var(--mk-fast) var(--mk-ease), box-shadow var(--mk-fast) var(--mk-ease);
  box-shadow:    0 2px 8px rgba(37,99,235,.30);
  white-space:   nowrap;
}
.smj-sidebar-toggle:hover {
  background: var(--mk-blue-dk);
  box-shadow: 0 4px 14px rgba(37,99,235,.38);
  transform:  translateY(-1px);
}

/* List/grid toggle removed — grid-only layout */

/* ─── 5. LISTING GRID ────────────────────────────────────────────────────────── */
/* Base grid: 3 columns on desktop. Context-specific grids override in smj-card-unified.css */
.smj-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--mk-grid-gap, 16px);
  align-items:           start; /* let smj-card height:320px control uniformity, not stretch */
}

/* ─── 6. LISTING CARD — Single Source of Truth ─────────────────────────────── */
/*
   LOCKED DIMENSIONS (do not override per-section):
     Total card height : 320px  (compact — was 340px)
     Image height      : 170px  (better proportion — was 150px)
     Content area      : 150px  (320 - 170)
   These values implement the design system spec exactly.
   All sections — Homepage, All Listings, Similar, Featured, Favorites,
   Dashboard — render this identical component via SMJ_UI_Render::card().
*/

/* ── Card shell ── */
.smj-card {
  /* Structure */
  display:        flex;
  flex-direction: column;
  width:          100%;
  height:         320px;       /* LOCKED — identical across all sections */
  overflow:       hidden;
  position:       relative;
  cursor:         pointer;

  /* Appearance */
  background:    #ffffff;
  border:        1px solid var(--mk-border, #e5e9f0);
  border-radius: 12px;
  box-shadow:    0 4px 12px rgba(0,0,0,.06);

  /* Motion */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

  /* Typography scope */
  font-family: var(--mk-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  color:       var(--mk-text-1, #111827);
}

/* Full-card invisible link for right-click / keyboard nav */
.smj-card > .smj-card__permalink {
  position: absolute;
  inset:    0;
  z-index:  1;
  opacity:  0;
}
/* Fav + footer buttons must sit above the permalink overlay */
.smj-card__fav,
.smj-card__footer .smj-btn {
  position: relative;
  z-index:  2;
}

/* Hover: lift + deeper shadow */
.smj-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 8px 20px rgba(0,0,0,.08);
  border-color: rgba(37,99,235,.18);
}

/* State modifiers */
.smj-card--featured {
  border-color: rgba(245,158,11,.4);
  box-shadow:   0 4px 12px rgba(0,0,0,.06), 0 0 0 2px rgba(245,158,11,.12);
}
.smj-card--sold { opacity: .75; }

/* ── Image — LOCKED 170px height ── */
.smj-card__img,
.smj-card__img-link {
  display:     block;
  width:       100%;
  height:      170px;   /* LOCKED */
  overflow:    hidden;
  position:    relative;
  flex-shrink: 0;       /* never compress below 150px */
  background:  #f3f4f6;
  /* Raise this stacking context above .smj-card__permalink (z-index:1)
     so the fav heart button nested inside is always interactive. */
  z-index:     2;
}
.smj-card__img img,
.smj-card__img-link img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .38s ease;
}
.smj-card:hover .smj-card__img img,
.smj-card:hover .smj-card__img-link img {
  transform: scale(1.055);
}

/* No-photo placeholder fills the 150px image zone */
.smj-card__img-placeholder {
  width:           100%;
  height:          170px;
  background:      linear-gradient(145deg, #f1f5f9, #e2e8f0);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  flex-shrink:     0;
}
.smj-card__img-placeholder::before {
  content:   '🚗';
  font-size: 32px;
  opacity:   .45;
}
.smj-card__img-placeholder small {
  font-size:   10px;
  color:       var(--mk-text-4, #9ca3af);
  font-weight: 600;
}

/* Sold overlay on image */
.smj-card__sold-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,.52);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         3;
  font-size:       18px;
  font-weight:     900;
  color:           #fff;
  letter-spacing:  .14em;
  pointer-events:  none;
  backdrop-filter: blur(1px);
}

/* ── Badges (top-left of image) ── */
.smj-card__badges {
  position:  absolute;
  top:       8px;
  left:      8px;
  display:   flex;
  gap:       4px;
  flex-wrap: wrap;
  z-index:   2;
}
.smj-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  padding:        2px 7px;
  border-radius:  999px;
  font-family:    var(--mk-font);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height:    1.4;
  white-space:    nowrap;
}
.smj-badge--featured { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; box-shadow: 0 2px 6px rgba(245,158,11,.38); }
.smj-badge--sold     { background: #ef4444; color: #fff; }
.smj-badge--new      { background: #16a34a; color: #fff; }
.smj-badge--info     { background: rgba(37,99,235,.12); color: #2563eb; }
.smj-badge--verified { background: #f0fdf4; color: #16a34a; border: 1px solid rgba(22,163,74,.2); }

/* ── Wishlist heart (top-right of image) ── */
.smj-card__fav {
  position: absolute;
  top:      8px;
  right:    8px;
  z-index:  2;
}
.smj-fav-btn {
  display:    inline-flex;
  align-items: center;
  justify-content: center;
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  outline:     none !important;
  cursor:      pointer;
  padding:     0;
  margin:      0;
  color:       #ffffff;
  filter:      drop-shadow(0 1px 4px rgba(0,0,0,.70));
  transition:  transform .18s ease, color .18s ease;
  -webkit-appearance: none;
  appearance:  none;
}
.smj-fav-btn svg       { display: block; width: 20px; height: 20px; flex-shrink: 0; pointer-events: none; }
.smj-fav-btn:hover     { transform: scale(1.2); filter: drop-shadow(0 2px 6px rgba(0,0,0,.80)); }
.smj-fav-btn--active,
.smj-fav-active     { color: #ff3b5c; filter: drop-shadow(0 1px 4px rgba(255,59,92,.55)); }
.smj-fav-btn--pop,
.smj-heart-pop      { animation: mk-fav-pop .35s ease; }
@keyframes mk-fav-pop  { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 70%{transform:scale(.92)} 100%{transform:scale(1)} }

/* Theme resets for fav button */
.smj-card__fav .smj-fav-btn,
.smj-card__fav .smj-fav-btn:focus,
.smj-card__fav .smj-fav-btn:active,
.smj-card__fav .smj-fav-btn:focus-visible {
  background: transparent !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
}

/* ── Content section ── 150px body (320px card − 170px image) ──
   Budget: 8px padding-top + 16 meta + 3 gap + 34 title + 3 gap +
           20 price + 2 gap + 20 specs + auto push + 18 location + 26 footer = 150px
   No justify-content:space-between — each element controls its own gap.
*/
.smj-card__body {
  padding:        8px 10px 0;
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

/* Date row — 16px tight */
.smj-card__meta-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          16px;
  margin-bottom:   3px;
  flex-shrink:     0;
  overflow:        hidden;
}
.smj-card__year-tag {
  font-size:      10px;
  font-weight:    700;
  color:          #2563eb;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space:    nowrap;
}
.smj-card__seller-type {
  font-size:      10px;
  font-weight:    700;
  padding:        1px 6px;
  border-radius:  999px;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space:    nowrap;
}
.smj-card__seller-type--dealer { background: rgba(37,99,235,.10); color: #2563eb; }
.smj-card__seller-type--owner  { background: rgba(22,163,74,.10);  color: #16a34a; }

/* Title — 2 lines × 14px × 1.22lh = 34px */
.smj-card__title {
  font-size:          14px;
  font-weight:        600;
  color:              var(--mk-text-1, #111827);
  line-height:        1.22;
  height:             34px;
  min-height:         34px;
  max-height:         34px;
  margin:             0 0 3px;
  overflow:           hidden;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-shrink:        0;
}
.smj-card__title a       { color: inherit; text-decoration: none; }
.smj-card__title a:hover { color: #2563eb; }

/* Price — 20px slot */
.smj-card__price {
  font-size:    18px;
  font-weight:  700;
  color:        #16a34a;
  line-height:  1.1;
  height:       20px;
  min-height:   20px;
  max-height:   20px;
  margin:       0 0 2px;
  overflow:     hidden;
  white-space:  nowrap;
  flex-shrink:  0;
}

/* Specs — one row, 20px, nowrap */
.smj-card__specs {
  display:       flex;
  gap:           4px;
  flex-wrap:     nowrap;
  height:        20px;
  overflow:      hidden;
  flex-shrink:   0;
  margin-bottom: 0;
}
.smj-card__spec {
  font-size:     10px;
  font-weight:   600;
  color:         var(--mk-text-3, #6b7280);
  background:    var(--mk-bg, #f8f9fb);
  border:        1px solid var(--mk-border, #e5e9f0);
  padding:       1px 7px;
  border-radius: 999px;
  white-space:   nowrap;
  line-height:   1.7;
}

/* Location — pushed to bottom by margin-top:auto */
.smj-card__location {
  display:       flex;
  align-items:   center;
  gap:           4px;
  font-size:     11px;
  color:         var(--mk-text-3, #6b7280);
  margin-top:    auto;
  padding-top:   3px;
  border-top:    1px solid var(--mk-divider, #eef1f6);
  font-weight:   500;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  flex-shrink:   0;
}
.smj-card__location-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mk-text-4,#9ca3af); flex-shrink: 0; }
.smj-card__posted       { color: var(--mk-text-4,#9ca3af); font-size: 10px; }

/* ── Footer — 26px (5px top pad + ~16px button height + 5px bottom pad) ── */
.smj-card__footer {
  display:     flex;
  gap:         6px;
  padding:     5px 10px 6px;
  flex-shrink: 0;
}
/* Call button */
.smj-btn--call {
  flex:            1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  padding:         6px 8px;
  background:      transparent;
  color:           #2563eb;
  border:          1.5px solid #2563eb;
  border-radius:   999px !important;
  font-family:     var(--mk-font);
  font-size:       11px;
  font-weight:     700;
  cursor:          pointer;
  white-space:     nowrap;
  text-decoration: none;
  transition:      background .18s ease, color .18s ease, transform .18s ease;
}
.smj-btn--call:hover { background: #2563eb; color: #fff; transform: translateY(-1px); }

/* WhatsApp button */
.smj-btn--wa {
  flex:            1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  padding:         6px 8px;
  background:      #25D366;
  color:           #fff;
  border:          1.5px solid #25D366;
  border-radius:   999px !important;
  font-family:     var(--mk-font);
  font-size:       11px;
  font-weight:     700;
  cursor:          pointer;
  white-space:     nowrap;
  text-decoration: none;
  transition:      background .18s ease, transform .18s ease;
}
.smj-btn--wa:hover { background: #1ebe57; border-color: #1ebe57; transform: translateY(-1px); }

/* Kill ghost buttons */
.smj-card__footer .smj-btn--ghost-ui { display: none !important; }

/* ─── 7. CATEGORY PILLS ───────────────────────────────────────────────────── */
.smj-search-bar__cat-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  padding:     12px 0 2px;
  align-items: center;
}
.smj-cat-pill,
button.smj-cat-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       6px 16px;
  border-radius: var(--mk-r-pill);
  border:        1.5px solid var(--mk-border);
  background:    var(--mk-card);
  color:         var(--mk-text-2);
  font-family:   var(--mk-font);
  font-size:     13px;
  font-weight:   600;
  text-decoration: none;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    border-color var(--mk-fast) var(--mk-ease),
                 color var(--mk-fast) var(--mk-ease),
                 background var(--mk-fast) var(--mk-ease),
                 box-shadow var(--mk-fast) var(--mk-ease),
                 transform var(--mk-fast) var(--mk-ease);
  box-shadow:    var(--mk-shadow-pill);
  --cat-color:   var(--mk-blue);
  /* button-element reset */
  -webkit-appearance: none;
  appearance:    none;
  line-height:   1;
}
.smj-cat-pill:hover,
button.smj-cat-pill:hover {
  border-color:  var(--cat-color);
  color:         var(--cat-color);
  box-shadow:    0 2px 8px rgba(37,99,235,.12);
  transform:     translateY(-1px);
  text-decoration: none;
}
.smj-cat-pill--active,
button.smj-cat-pill--active {
  background:   var(--cat-color) !important;
  border-color: var(--cat-color) !important;
  color:        #fff !important;
  box-shadow:   0 3px 12px rgba(37,99,235,.25) !important;
}

/* ─── 8. TOP SEARCH AREA ─────────────────────────────────────────────────── */
.smj-top-search {
  background:    var(--mk-card);
  border:        1px solid var(--mk-border);
  border-radius: var(--mk-r);
  padding:       14px 18px;
  margin-bottom: var(--mk-grid-gap);
}

/* ─── 9. FILTER SIDEBAR — Clean SaaS look ────────────────────────────────── */
.smj-listings-sidebar {
  width:        var(--mk-sidebar-w);
  flex-shrink:  0;
  position:     sticky;
  top:          20px;
  /* No internal scroll — page scrolls, sidebar stays in view */
  overflow:     visible;
  height:       fit-content;
}
/* Override design-system.css .smj-sidebar--sticky which sets max-height + overflow-y:auto */
.smj-sidebar--sticky {
  max-height:  none !important;
  overflow-y:  visible !important;
  overflow-x:  visible !important;
}

.smj-sidebar-panel {
  background:    var(--mk-card);
  border:        1px solid var(--mk-border);
  border-radius: var(--mk-r);
  box-shadow:    var(--mk-shadow-sidebar);
  overflow:      hidden;
}

/* Header — light, not dark */
.smj-sidebar-panel__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px 12px;
  border-bottom:   1px solid var(--mk-divider);
  background:      var(--mk-card);
}
.smj-sidebar-panel__title {
  font-family: var(--mk-font);
  font-size:   14px;
  font-weight: 800;
  color:       var(--mk-text-1);
  margin:      0;
  display:     flex;
  align-items: center;
  gap:         7px;
  letter-spacing: -.01em;
}
.smj-sidebar-panel__title::before {
  content:       '';
  display:       inline-block;
  width:         3px;
  height:        14px;
  background:    var(--mk-blue);
  border-radius: 2px;
}
.smj-sidebar-panel__clear {
  font-family:   var(--mk-font);
  font-size:     12px;
  color:         var(--mk-blue);
  text-decoration:none;
  font-weight:   600;
  padding:       3px 9px;
  border-radius: var(--mk-r-pill);
  border:        1.5px solid rgba(37,99,235,.25);
  transition:    background var(--mk-fast) var(--mk-ease),
                 border-color var(--mk-fast) var(--mk-ease);
  /* button-reset so it works for both <a> and <button> */
  background:    transparent;
  cursor:        pointer;
  line-height:   1.4;
  display:       inline-flex;
  align-items:   center;
}
.smj-sidebar-panel__clear:hover {
  background:   var(--mk-blue-lt);
  border-color: var(--mk-blue);
  text-decoration: none;
}

/* Body */
.smj-sidebar-panel__body { padding: 0; }
.smj-sidebar-panel__body form { margin: 0; }

/* Filter group */
.smj-filter-group {
  padding:      0;
  border-bottom:1px solid var(--mk-divider);
  overflow:     hidden;
}
.smj-filter-group:last-of-type { border-bottom: none; }

/* Collapsible label */
.smj-filter-group__label {
  font-family:    var(--mk-font);
  font-size:      12px;
  font-weight:    700;
  color:          var(--mk-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  padding:        12px 16px;
  margin:         0;
  cursor:         pointer;
  user-select:    none;
  transition:     background var(--mk-fast) var(--mk-ease), color var(--mk-fast) var(--mk-ease);
}
.smj-filter-group__label:hover { background: var(--mk-bg); color: var(--mk-blue); }
.smj-filter-group__label::after {
  content:    '';
  display:    inline-block;
  width:      8px;
  height:     8px;
  border-right: 2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:  rotate(45deg) translateY(-2px);
  opacity:    .5;
  transition: transform var(--mk-mid) var(--mk-ease), opacity var(--mk-mid) var(--mk-ease);
  flex-shrink:0;
}
.smj-filter-group.is-collapsed .smj-filter-group__label::after {
  transform: rotate(-45deg) translateY(1px);
}
.smj-filter-group.is-collapsed .smj-filter-group__label { color: var(--mk-text-3); }

/* Collapsible body */
.smj-filter-group__body {
  padding:    0 16px 14px;
  transition: max-height var(--mk-mid) var(--mk-ease);
}
.smj-filter-group.is-collapsed .smj-filter-group__body {
  display: none;
}

/* Price row */
.smj-filter-group__price-row {
  display:     flex;
  align-items: center;
  gap:         7px;
}
.smj-filter-group__price-sep { font-size: 12px; color: var(--mk-text-4); flex-shrink: 0; }

/* Category pills inside sidebar */
.smj-filter-group--cats { overflow: visible; }
.smj-sidebar-cat-pills  { display: flex; flex-wrap: wrap; gap: 5px; }
.smj-sidebar-cat-pills .smj-cat-pill {
  font-size: 12px;
  padding:   4px 12px;
}

/* Inputs inside sidebar */
.smj-sidebar-panel input[type="number"],
.smj-sidebar-panel input[type="text"],
.smj-sidebar-panel select,
.smj-sidebar-panel .smj-input,
.smj-sidebar-panel .smj-select {
  width:         100%;
  padding:       8px 11px;
  border:        1.5px solid var(--mk-border);
  border-radius: var(--mk-r-sm);
  font-family:   var(--mk-font);
  font-size:     13px;
  color:         var(--mk-text-2);
  background:    #fafbfc;
  box-sizing:    border-box;
  appearance:    none;
  -webkit-appearance: none;
  transition:    border-color var(--mk-fast) var(--mk-ease), box-shadow var(--mk-fast) var(--mk-ease);
}
.smj-sidebar-panel input:focus,
.smj-sidebar-panel select:focus {
  outline:      none;
  border-color: var(--mk-blue);
  box-shadow:   0 0 0 3px rgba(37,99,235,.10);
  background:   #fff;
}
.smj-sidebar-panel select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:       30px;
}

/* Radio pills */
.smj-sidebar-panel input[type="radio"] { display: none; }
.smj-sidebar-panel input[type="radio"] + label {
  display:       inline-flex;
  align-items:   center;
  padding:       4px 12px;
  border:        1.5px solid var(--mk-border);
  border-radius: var(--mk-r-pill);
  background:    #fafbfc;
  color:         var(--mk-text-3);
  font-family:   var(--mk-font);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    border-color var(--mk-fast) var(--mk-ease),
                 background var(--mk-fast) var(--mk-ease),
                 color var(--mk-fast) var(--mk-ease);
  user-select:   none;
}
.smj-sidebar-panel input[type="radio"]:checked + label {
  background:   var(--mk-blue);
  border-color: var(--mk-blue);
  color:        #fff;
}

/* Checkbox list */
.smj-sidebar-panel input[type="checkbox"] {
  width:        15px !important;
  height:       15px !important;
  accent-color: var(--mk-blue);
  cursor:       pointer;
  flex-shrink:  0;
}

/* Apply button */
.smj-sidebar-panel .smj-btn--primary,
.smj-btn--primary.smj-btn--full {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           100%;
  padding:         11px 16px;
  background:      var(--mk-blue);
  color:           #fff;
  border:          none;
  border-radius:   var(--mk-r-sm) !important;
  font-family:     var(--mk-font);
  font-size:       13px;
  font-weight:     700;
  cursor:          pointer;
  letter-spacing:  .01em;
  box-shadow:      0 3px 10px rgba(37,99,235,.28);
  transition:      background var(--mk-fast) var(--mk-ease),
                   transform var(--mk-fast) var(--mk-ease),
                   box-shadow var(--mk-fast) var(--mk-ease);
  text-align:      center;
  text-decoration: none;
}
.smj-sidebar-panel .smj-btn--primary:hover,
.smj-btn--primary.smj-btn--full:hover {
  background:   var(--mk-blue-dk);
  transform:    translateY(-1px);
  box-shadow:   0 5px 16px rgba(37,99,235,.36);
}

/* ─── 10. EMPTY STATE ─────────────────────────────────────────────────────── */
.smj-empty {
  grid-column:     1 / -1;
  text-align:      center;
  padding:         56px 24px;
  background:      var(--mk-card);
  border:          1px solid var(--mk-border);
  border-radius:   var(--mk-r);
}
.smj-empty__icon  { font-size: 48px; display: block; margin-bottom: 14px; opacity: .55; }
.smj-empty__title { font-size: 20px; font-weight: 800; color: var(--mk-text-1); margin: 0 0 8px; font-family: var(--mk-font); }
.smj-empty__text  { font-size: 14px; color: var(--mk-text-3); margin: 0 0 18px; max-width: 340px; margin-left: auto; margin-right: auto; font-family: var(--mk-font); }

/* ─── 11. SKELETON ───────────────────────────────────────────────────────── */
@keyframes mk-shimmer { 0%{ background-position: -700px 0 } 100%{ background-position: 700px 0 } }
.smj-skeleton {
  background:      linear-gradient(90deg, #f3f4f6 25%, #e9ebee 50%, #f3f4f6 75%);
  background-size: 1400px 100%;
  animation:       mk-shimmer 1.4s infinite;
  border-radius:   var(--mk-r-sm);
}
.smj-skeleton-card                    { background: var(--mk-card); border: 1px solid var(--mk-border); border-radius: var(--mk-r); overflow: hidden; }
.smj-skeleton-card__img               { aspect-ratio: 4/3; }
.smj-skeleton-card__body              { padding: var(--mk-card-pad); }
.smj-skeleton-card__line              { height: 12px; margin-bottom: 9px; }
.smj-skeleton-card__line--short       { width: 55%; }
.smj-skeleton-card__line--price       { height: 20px; width: 44%; margin-top: 6px; }

/* ─── 12. PAGINATION ─────────────────────────────────────────────────────── */
.smj-pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  margin-top:      32px;
  flex-wrap:       wrap;
  font-family:     var(--mk-font);
}
.smj-pagination a,
.smj-pagination span {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 8px;
  border-radius:   var(--mk-r-sm);
  border:          1.5px solid var(--mk-border);
  background:      var(--mk-card);
  color:           var(--mk-text-2);
  font-size:       13px;
  font-weight:     600;
  text-decoration: none;
  transition:      background var(--mk-fast) var(--mk-ease),
                   border-color var(--mk-fast) var(--mk-ease),
                   color var(--mk-fast) var(--mk-ease),
                   transform var(--mk-fast) var(--mk-ease);
}
.smj-pagination a:hover,
.smj-pagination .current {
  background:   var(--mk-blue);
  border-color: var(--mk-blue);
  color:        #fff;
  transform:    translateY(-1px);
}
.smj-pagination .dots { border-color: transparent; background: transparent; }

/* ─── 13. MOBILE SIDEBAR DRAWER ──────────────────────────────────────────── */
.smj-sidebar-backdrop {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,.45);
  z-index:          999;
  backdrop-filter:  blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation:        mk-fade .22s var(--mk-ease);
}
.smj-sidebar-backdrop.is-open { display: block; }
@keyframes mk-fade { from { opacity:0 } to { opacity:1 } }

.smj-sidebar-close-btn {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px;
  background:      var(--mk-card);
  border-bottom:   1px solid var(--mk-divider);
  font-family:     var(--mk-font);
  font-size:       14px;
  font-weight:     800;
  color:           var(--mk-text-1);
}
.smj-sidebar-close-btn button {
  background:    transparent;
  border:        none;
  color:         var(--mk-text-3);
  width:         28px;
  height:        28px;
  border-radius: 50%;
  cursor:        pointer;
  font-size:     18px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  line-height:   1;
  transition:    color var(--mk-fast) var(--mk-ease), background var(--mk-fast) var(--mk-ease);
}
.smj-sidebar-close-btn button:hover { background: #f3f4f6; color: var(--mk-text-2); border-color: #d1d5db; }

/* Close button: hidden on desktop, only shows inside mobile drawer */
.smj-sidebar-close-btn { display: none; }

/* ─── 14. RESPONSIVE ─────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — card dimensions are LOCKED at 320px/170px at all breakpoints.
   Only layout (columns, sidebar) changes per breakpoint.
   Card font-size overrides removed — unified card handles its own sizing.
   ───────────────────────────────────────────────────────────────────────────── */

/* Tablet ≤1024px: sidebar narrower */
@media (max-width: 1024px) {
  :root { --mk-sidebar-w: 256px; }
  /* Homepage/All-Listings grid: 2 col at tablet */
  .smj-listings-main > .smj-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ≤900px: sidebar becomes mobile drawer */
@media (max-width: 900px) {
  .smj-content-area      { flex-direction: column; gap: 0; }
  .smj-sidebar-toggle    { display: inline-flex; }
  .smj-sidebar-close-btn { display: flex; }
  .smj-listings-sidebar {
    position:    fixed;
    top:         0; left: 0;
    width:       290px; max-width: 88vw;
    height:      100vh; max-height: 100vh;
    z-index:     1000;
    transform:   translateX(-105%);
    transition:  transform .3s var(--mk-ease, cubic-bezier(.4,0,.2,1));
    border-radius: 0;
    overflow-y:  auto;
    border:      none; box-shadow: none;
  }
  .smj-listings-sidebar.is-open {
    transform:  translateX(0);
    box-shadow: 6px 0 40px rgba(0,0,0,.16);
  }
}

/* ≤768px: all grids → 2 columns (per spec) */
@media (max-width: 768px) {
  .smj-grid,
  .smj-featured-grid,
  .smj-similar-grid,
  .smj-favorite-grid,
  .smj-favorites-grid,
  .smj-db__card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ≤480px: all grids → 1 column */
@media (max-width: 480px) {
  .smj-grid,
  .smj-featured-grid,
  .smj-similar-grid,
  .smj-favorite-grid,
  .smj-favorites-grid,
  .smj-db__card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Sticky bottom filter button */
  .smj-sidebar-toggle {
    position:   fixed;
    bottom:     18px; left: 50%;
    transform:  translateX(-50%);
    z-index:    998;
    box-shadow: 0 6px 20px rgba(37,99,235,.38);
    font-size:  13px; padding: 11px 26px;
  }
  .smj-sidebar-toggle:hover { transform: translateX(-50%) translateY(-2px); }
}

/* ≥1280px: wider sidebar */
@media (min-width: 1280px) {
  :root { --mk-sidebar-w: 285px; --mk-grid-gap: 20px; }
}