/* =============================================================================
   SMJ Marketplace — Card Unified  v3.0
   LOADED LAST (after design-system, style, smj-marketplace-ui, smj-dashboard).

   THIS FILE IS THE ENFORCEMENT LAYER.
   smj-marketplace-ui.css defines the single card component (.smj-card).
   This file enforces it everywhere by:
     1. Killing every competing card rule from older CSS layers
     2. Setting the correct grid columns per section (per design spec)
     3. Wiring the Dashboard to use the same component + management strip
   ============================================================================= */


/* =============================================================================
   §1  STRUCTURAL ENFORCEMENT — Theme-Control-Aware
   v6.4.8 — refactor: structural integrity stays hardcoded (display, flex,
   overflow, position, width); themeable visual properties now consume
   Theme Control CSS variables with the original hardcoded values as
   fallbacks. Default rendering is pixel-identical to the previous version
   when no admin values are set; the moment admin changes anything in the
   "Listings & Search" tab, those values flow through here.
   ============================================================================= */

/* Card shell — structure locked, visuals themeable */
.smj-card {
  /* — STRUCTURE — must not change */
  width:          100%          !important;
  display:        flex          !important;
  flex-direction: column        !important;
  overflow:       hidden        !important;
  position:       relative      !important;
  cursor:         pointer       !important;
  box-sizing:     border-box    !important;
  transition:     transform    var(--smj-listing-card-transition, 200ms) ease,
                  box-shadow   var(--smj-listing-card-transition, 200ms) ease,
                  border-color var(--smj-listing-card-transition, 200ms) ease !important;

  /* — DIMENSIONS — admin-controllable via Theme Control.
     Height is a MINIMUM, not a hard clamp: the card must be able to grow
     when a larger Title Size makes the 2-line title box taller, otherwise
     the price/specs/footer overflow and get clipped (the "broken card"
     bug). min-height keeps short cards uniform; content can extend it. */
  min-height:     var(--smj-card-height, 320px)     !important;
  height:         auto                              !important;

  /* — VISUALS — Theme Control listing tokens with sensible fallbacks */
  border-radius:  var(--smj-listing-card-radius, var(--smj-card-radius, 12px)) !important;
  background:     var(--smj-listing-card-bg, var(--smj-card-bg, #ffffff))      !important;
  box-shadow:     var(--smj-listing-card-shadow, var(--smj-card-shadow, 0 4px 12px rgba(0,0,0,.06))) !important;
  border:         1px solid var(--smj-listing-card-border, var(--smj-border, #e5e9f0)) !important;
}

/* Hover — only transform/shadow/border, never structural change.
   Fallback border color is the theme primary so every card surface
   (homepage, favorites, similar listings, search) shows the same
   green hover line when no explicit hover-border color is configured. */
.smj-card:hover {
  transform:    translateY(-4px)                                                  !important;
  box-shadow:   var(--smj-listing-card-hover-shadow, 0 8px 20px rgba(0,0,0,.08))  !important;
  border-width: var(--smj-listing-card-border-width, 2px)                          !important;
  border-style: var(--smj-listing-card-border-style, solid)                        !important;
  border-color: var(--smj-listing-card-hover-border, var(--smj-primary, #325d2a))  !important;
}

/* Image zone — aspect OR fixed height, admin-controllable.
   v6.4.11 — Robust strategy:
   - Wrapper is ALWAYS position:relative, providing the box.
   - Inner <img> is position:absolute + inset:0, filling the wrapper.
     This stops the <img> intrinsic dimensions (from WP's auto width=/
     height= HTML attrs on get_the_post_thumbnail) from forcing the
     wrapper to grow beyond what aspect-ratio dictates.
   - When admin sets --smj-listing-image-aspect, PHP also emits a
     companion --smj-listing-image-height:0, making `height: 0 !important`
     resolve to a zero baseline; aspect-ratio then takes precedence and
     computes height from the wrapper's width (100% of column).
   - When admin doesn't set aspect, both vars are unset → the fallbacks
     `auto` (aspect) and `170px` (height) apply → fixed-height behavior. */
.smj-card__img,
.smj-card__img-link {
  width:          100%    !important;
  flex-shrink:    0       !important;
  overflow:       hidden  !important;
  display:        block   !important;
  position:       relative !important;
  aspect-ratio:   var(--smj-listing-image-aspect, auto) !important;
  height:         var(--smj-listing-image-height, 170px) !important;
  min-height:     0     !important;
  max-height:     none  !important;
  border-radius:  var(--smj-listing-image-radius, 0) !important;
}
/* Inner image — absolutely positioned so it fills the wrapper exactly,
   regardless of its intrinsic dimensions or width=/height= HTML attrs. */
.smj-card__img img,
.smj-card__img-link img {
  position:   absolute !important;
  inset:      0       !important;
  width:      100%    !important;
  height:     100%    !important;
  object-fit: cover   !important;
  display:    block   !important;
}

/* Placeholder fills the image slot — same aspect-or-height logic */
.smj-card__img-placeholder {
  width:        100%   !important;
  flex-shrink:  0      !important;
  position:     relative !important;
  aspect-ratio: var(--smj-listing-image-aspect, auto) !important;
  height:       var(--smj-listing-image-height, 170px) !important;
  min-height:   0      !important;
  max-height:   none   !important;
  background:   var(--smj-light-section, #f1f5f9) !important;
  display:      flex !important;
  align-items:  center !important;
  justify-content: center !important;
}

/* Content section — fills remaining height */
.smj-card__body {
  flex:           1                 !important;
  overflow:       hidden            !important;
  display:        flex              !important;
  flex-direction: column            !important;
  min-height:     0                 !important;
  /* Padding now from Theme Control. Default 8px 10px 0 preserved as
     fallback so existing installs render identically. */
  padding:        var(--smj-listing-card-padding, 8px 10px 0) !important;
}

/* Title — admin-controllable typography */
.smj-card__title {
  font-size:    var(--smj-listing-title-size, 14px)         !important;
  font-weight:  var(--smj-listing-title-weight, 600)        !important;
  color:        var(--smj-listing-title-color, var(--smj-text-primary, #0f172a)) !important;
  line-height:  1.3               !important;
  /* Two-line clamp height MUST track the admin-set title size, otherwise a
     larger Title Size overflows the fixed box and overlaps the price.
     2 lines = font-size × line-height(1.3) × 2 = font-size × 2.6 */
  min-height:   calc(var(--smj-listing-title-size, 14px) * 2.6) !important;
  max-height:   calc(var(--smj-listing-title-size, 14px) * 2.6) !important;
  overflow:     hidden            !important;
  display:      -webkit-box       !important;
  -webkit-line-clamp: 2           !important;
  -webkit-box-orient: vertical    !important;
  margin:       0 0 3px           !important;
  flex-shrink:  0                 !important;
}

/* Price — admin-controllable size/weight/color */
.smj-price,
.smj-card__price {
  font-size:   var(--smj-listing-price-size, 16px)   !important;
  font-weight: var(--smj-listing-price-weight, 700)  !important;
  color:       var(--smj-listing-price-color, var(--smj-primary-hover, var(--smj-primary, #15803d))) !important;
  height:      auto    !important;
  min-height:  20px    !important;
  overflow:    hidden  !important;
  white-space: nowrap  !important;
  margin:      0 0 2px !important;
  flex-shrink: 0       !important;
  line-height: 1.35    !important;
}

/* Specs row — one chip row, locked structure, themeable colors */
.smj-card__specs {
  height:        20px   !important;
  min-height:    20px   !important;
  max-height:    20px   !important;
  overflow:      hidden !important;
  flex-shrink:   0      !important;
  margin-bottom: 3px    !important;
}

/* Footer — fixed bottom strip, themeable padding */
.smj-card__footer {
  flex-shrink:   0           !important;
  margin-top:    0           !important;
  display:       flex        !important;
  gap:           6px         !important;
  padding:       6px 10px 8px !important;
  min-height:    unset       !important;
}

/* Meta-top row — fixed single line */
.smj-card__meta-top {
  height:        16px   !important;
  min-height:    16px   !important;
  max-height:    16px   !important;
  overflow:      hidden !important;
  flex-shrink:   0      !important;
  margin-bottom: 3px    !important;
}

/* Location row — themeable meta color */
.smj-card__location {
  overflow:    hidden !important;
  white-space: nowrap !important;
  flex-shrink: 0      !important;
  margin-top:  auto   !important;
  font-size:   var(--smj-listing-meta-size, 11px) !important;
  color:       var(--smj-listing-meta-color, var(--smj-text-secondary, #6b7280)) !important;
}

/* Meta spec/year-tag — themeable color (was hardcoded inheriting) */
.smj-card__spec,
.smj-card__year-tag,
.smj-card__meta {
  font-size: var(--smj-listing-meta-size, 11px) !important;
  color:     var(--smj-listing-meta-color, var(--smj-text-secondary, #6b7280)) !important;
}

/* Featured/verified badges — themeable */
.smj-card__featured,
.smj-card__badge,
.smj-card__badges > span {
  background-color: var(--smj-listing-badge-bg, var(--smj-cta, #f97316)) !important;
  color:            var(--smj-listing-badge-text, #ffffff)               !important;
  border-radius:    var(--smj-listing-badge-radius, var(--smj-radius-sm, 5px)) !important;
  font-size:        var(--smj-listing-badge-size, 11px)                  !important;
}

/* Fav button — kill design-system.css circle/34px override.
   Visuals will be themed via class-theme-overrides.php Section v6.4.7. */
.smj-fav-btn {
  width:            auto              !important;
  height:           auto              !important;
  border-radius:    0                 !important;
  background:       transparent       !important;
  background-color: transparent       !important;
  border:           none              !important;
  box-shadow:       none              !important;
  font-size:        inherit           !important;
  color:            var(--smj-bg)     !important;
  filter:           drop-shadow(0 1px 4px rgba(0,0,0,.70)) !important;
}


/* =============================================================================
   §2  GRID SYSTEMS — Per-section column counts (design spec)
       v6.4.8: gap values now consume Theme Control --smj-listing-card-gap
       and --smj-search-grid-gap with the original spec values as fallbacks.

   Homepage / All Listings : 3 col desktop  →  2 col tablet  →  2 col mobile
   Similar Listings         : 4 col desktop  →  2 col ≤768px
   Favorite Listings        : 4 col desktop  →  2 col ≤768px
   Dashboard My Listings    : 3 col desktop  →  2 col ≤768px
   ============================================================================= */

/* Base homepage/all-listings grid */
.smj-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--smj-listing-card-gap, var(--smj-grid-gap, 16px));
  align-items:           start; /* card height is fixed — no stretch needed */
}

/* Similar Listings — up to 4 col, auto-fill prevents stretch when < 4 items */
.smj-similar-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   var(--smj-listing-card-gap, var(--smj-grid-gap, 16px));
  align-items:           start;
}
@media (min-width: 1024px) {
  .smj-similar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Favorite Listings — 4 col desktop.
   auto-fill base prevents stretch when fewer than 4 items are present. */
.smj-favorites-grid,
.smj-favorite-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   var(--smj-fav-grid-gap, var(--smj-listing-card-gap, var(--smj-grid-gap, 16px)));
  align-items:           start;
}
/* Cap at 4 columns on wide screens */
@media (min-width: 1024px) {
  .smj-favorites-grid,
  .smj-favorite-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Inside the User Dashboard the content column is narrower (sidebar
     takes space), so the Favourites tab uses 3 columns instead of 4. */
  body.smj-pg-dashboard .smj-favorites-grid,
  body.smj-pg-dashboard .smj-favorite-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}


/* Featured Listings — 3 col (matches homepage) */
.smj-featured-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--smj-listing-card-gap, var(--smj-grid-gap, 16px));
  align-items:           start;
}

/* Search Results — 4 col desktop, responsive per OLX spec */
.smj-search-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--smj-search-grid-gap, var(--smj-listing-card-gap, var(--smj-grid-gap, 20px)));
  align-items:           start;
}

/* Dashboard My Listings — 3 col, ALWAYS uses global grid-gap (not the
   listing-scoped token) to keep dashboard isolated from frontend changes. */
.smj-db__card-grid,
.smj-dashboard-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--smj-grid-gap, 16px);
  align-items:           start;
}

/* Width guards — all grid children must not blow out their track */
.smj-grid             > *,
.smj-similar-grid     > *,
.smj-favorites-grid   > *,
.smj-favorite-grid    > *,
.smj-featured-grid    > *,
.smj-search-grid      > *,
.smj-db__card-grid    > *,
.smj-dashboard-grid   > * {
  min-width: 0;
  width:     100%;
}


/* =============================================================================
   §3  SECTION TITLES
   ============================================================================= */

.smj-section-title,
.smj-similar-title,
.tmp-featured-title {
  font-size:      18px;
  font-weight:    700;
  color:          var(--smj-text-primary);
  margin:         0 0 16px;
  display:        flex;
  align-items:    center;
  gap:            10px;
  letter-spacing: -.01em;
  font-family:    var(--mk-font, 'Plus Jakarta Sans', system-ui, sans-serif);
}
.smj-section-title::after,
.smj-similar-title::after,
.tmp-featured-title::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: linear-gradient(to right, #e5e9f0, transparent);
}


/* =============================================================================
   §4  SECTION WRAPPERS
   ============================================================================= */

.smj-similar-section  { margin-top: 32px; }
.smj-favorites-wrap   { padding: 0; }

/* Inside the User Dashboard, the favourites tab is wrapped in a
 * .smj-db__section by dashboard_body() — the parent section provides
 * the white card chrome, so .smj-favorites-wrap stays transparent and
 * just controls inner spacing. */
body.smj-pg-dashboard .smj-db__section > .smj-favorites-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
body.smj-pg-dashboard .smj-db__section > .smj-favorites-wrap .smj-section-title {
  margin: 0 0 16px;
}


/* =============================================================================
   §5  DASHBOARD — Card wrapper + management strip
   ============================================================================= */

/* Wrapper stacks card + strip, provides overlay anchor */
.smj-db__card-wrap {
  display:        flex;
  flex-direction: column;
  position:       relative;
  min-width:      0;
}

/* Card inside dashboard wrapper: remove bottom radius → connects to strip.
   v6.4.8: also re-isolate dashboard cards from listing-scoped tokens —
   they should use the GLOBAL tokens, not the listing-page-scoped ones,
   so admin frontend changes don't leak into dashboard.                  */
.smj-db__card-wrap > .smj-card {
  border-bottom-left-radius:  0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom:              none !important;
  /* Flexible height — grows with title size, same as frontend cards. */
  height:         auto !important;
  min-height:     var(--smj-card-height, 320px) !important;

  /* v6.5 — Dashboard cards follow the "Listings & Search" Theme Control tab,
     matching every other card surface. (Previous re-isolation removed.) */
  border-radius:  var(--smj-listing-card-radius, var(--smj-card-radius, 12px)) var(--smj-listing-card-radius, var(--smj-card-radius, 12px)) 0 0 !important;
  background:     var(--smj-listing-card-bg, var(--smj-card-bg, #ffffff))                  !important;
  box-shadow:     var(--smj-listing-card-shadow, var(--smj-card-shadow, 0 4px 12px rgba(0,0,0,.06))) !important;
  border:         var(--smj-listing-card-border-width, 1px)
                  var(--smj-listing-card-border-style, solid)
                  var(--smj-listing-card-border-color, var(--smj-border, #e5e9f0)) !important;
  border-bottom:  none !important;
}
.smj-db__card-wrap > .smj-card .smj-card__body {
  padding: var(--smj-listing-card-padding, var(--smj-card-padding, 8px 10px 0)) !important;
}
.smj-db__card-wrap > .smj-card .smj-card__title {
  color:       var(--smj-listing-title-color, var(--smj-text-primary, #0f172a)) !important;
  font-size:   var(--smj-listing-title-size, 14px) !important;
  font-weight: var(--smj-listing-title-weight, 600) !important;
}
.smj-db__card-wrap > .smj-card .smj-card__price,
.smj-db__card-wrap > .smj-card .smj-price {
  color:       var(--smj-listing-price-color, var(--smj-primary-hover, var(--smj-primary, #15803d))) !important;
  font-size:   var(--smj-listing-price-size, 16px) !important;
  font-weight: var(--smj-listing-price-weight, 700) !important;
}
.smj-db__card-wrap > .smj-card .smj-card__img,
.smj-db__card-wrap > .smj-card .smj-card__img-link,
.smj-db__card-wrap > .smj-card .smj-card__img-placeholder {
  /* Image height follows the listing Image setting; radius from listing too. */
  height:     var(--smj-listing-image-height, 170px) !important;
  min-height: var(--smj-listing-image-height, 170px) !important;
  max-height: var(--smj-listing-image-height, 170px) !important;
  border-radius: var(--smj-listing-image-radius, 0) var(--smj-listing-image-radius, 0) 0 0 !important;
}

/* ── Dashboard badge column ─────────────────────────────────────────────────
   Wraps both the status badge and the card's smj-card__badges (Featured/
   Verified) into a single left-side flex column so they never overlap.
   The status badge is always on top; feature badges stack below it.
─────────────────────────────────────────────────────────────────────────── */

/* Ghost anchor: positions the unified column at top-left of the card image */
.smj-db__card-wrap > .smj-db__badge-col {
  position:        absolute;
  top:             8px;
  left:            8px;
  z-index:         10;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             4px;
  pointer-events:  none;
}

/* Status badge — now lives INSIDE .smj-db__badge-col, not free-floating */
.smj-db__card-status {
  display:         inline-block;
  font-size:       10px;
  font-weight:     800;
  text-transform:  uppercase;
  letter-spacing:  .05em;
  padding:         2px 8px;
  border-radius:   999px;
  line-height:     1.5;
  white-space:     nowrap;
  font-family:     var(--mk-font, system-ui, sans-serif);
  /* Remove old absolute positioning — column handles placement */
  position:        static;
}
.smj-db__card-status--publish { background: #dcfce7; color: #15803d; }
.smj-db__card-status--pending { background: #fef9c3; color: #a16207; }
.smj-db__card-status--draft   { background: #f1f5f9; color: #475569; }
.smj-db__card-status--sold    { background: #fee2e2; color: #b91c1c; }

/* Pull the card's own .smj-card__badges OUT of its default abs position
   when inside the dashboard wrapper — the column is already positioned.
   We override the inline style Appearance Settings emits via a higher-
   specificity selector so it cannot fight back.                          */
.smj-db__card-wrap .smj-card__badges {
  position:  static !important;
  top:       auto  !important;
  left:      auto  !important;
  z-index:   auto  !important;
  display:   flex  !important;
  flex-wrap: wrap  !important;
  gap:       4px   !important;
}

/* Views counter — top-right, behind the fav heart */
.smj-db__card-views {
  position:              absolute;
  top:                   8px;
  right:                 36px;
  z-index:               10;
  font-size:             10px;
  font-weight:           700;
  color:                 var(--smj-bg);
  background:            rgba(0,0,0,.45);
  padding:               2px 6px;
  border-radius:         999px;
  pointer-events:        none;
  white-space:           nowrap;
  font-family:           var(--mk-font, system-ui, sans-serif);
  backdrop-filter:       blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Management strip — attaches directly below the card */
.smj-db__mgmt-strip {
  background:     var(--smj-bg);
  border:         1px solid var(--smj-border);
  border-top:     none;
  border-radius:  0 0 12px 12px;
  padding:        8px 10px 10px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.smj-db__mgmt-expiry {
  font-size:   11px;
  font-weight: 600;
  color:       var(--smj-cta-hover);
  font-family: var(--mk-font, system-ui, sans-serif);
}

.smj-db__mgmt-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       5px;
}

.smj-db__mgmt-actions .db-btn {
  font-size:       11px;
  padding:         4px 10px;
  border-radius:   8px;
  font-weight:     700;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             3px;
  white-space:     nowrap;
  cursor:          pointer;
  border:          1.5px solid transparent;
  transition:      background .15s, color .15s, border-color .15s;
  font-family:     var(--mk-font, system-ui, sans-serif);
}


/* =============================================================================
   §6  RESPONSIVE BREAKPOINTS
   Cards stay 320px tall at ALL breakpoints — only columns change.
   ============================================================================= */

/* Tablet ≤1024px: search grid → 3 columns */
@media (max-width: 1024px) {
  .smj-search-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  /* Favorites grid — explicit 3 columns on tablet so it never falls back
     to the auto-fill base (which could pack in 4+ cramped cards). */
  .smj-favorites-grid,
  .smj-favorite-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

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

/* Mobile ≤480px: most grids → 1 col; search keeps 2 col per OLX spec */
@media (max-width: 480px) {
  .smj-grid,
  .smj-similar-grid,
  .smj-favorites-grid,
  .smj-favorite-grid,
  .smj-featured-grid,
  .smj-db__card-grid,
  .smj-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Search results: 2 col on mobile (OLX standard) */
  .smj-search-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* =============================================================================
   §7  LEGACY SUPPRESSION
   Hides old HTML structures on cached pages.
   ============================================================================= */

.smj-sc               { display: none !important; }
.smj-db__listing-card { display: none !important; }
.smj-db__listings     { display: none !important; }


/* ── Favourites — numbered pagination ──────────────────────────────────── */
.smj-fav-pagination {
  display:        flex;
  flex-wrap:      wrap;
  justify-content:center;
  align-items:    center;
  gap:            6px;
  margin:         28px 0 8px;
}
.smj-fav-pagination .smj-fav-page-item a,
.smj-fav-pagination .smj-fav-page-item span {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  min-width:      38px;
  height:         38px;
  padding:        0 12px;
  border-radius:  8px;
  border:         1px solid var(--smj-border, #e5e7eb);
  background:     var(--smj-bg, #fff);
  color:          var(--smj-text-primary, #1f2937);
  font-size:      14px;
  font-weight:    600;
  text-decoration:none;
  transition:     background-color .15s ease, color .15s ease, border-color .15s ease;
}
.smj-fav-pagination .smj-fav-page-item a:hover {
  background:     var(--smj-light-section, #f3f4f6);
  border-color:   var(--smj-primary, #325d2a);
}
.smj-fav-pagination .smj-fav-page-item span.current {
  background:     var(--smj-primary, #325d2a);
  border-color:   var(--smj-primary, #325d2a);
  color:          #fff;
}
.smj-fav-pagination .smj-fav-page-item span.dots {
  border:         none;
  background:     transparent;
  min-width:      auto;
  padding:        0 4px;
}
@media (max-width: 480px) {
  .smj-fav-pagination .smj-fav-page-item a,
  .smj-fav-pagination .smj-fav-page-item span {
    min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px;
  }
}

/* ── Similar Listings — numbered pagination ────────────────────────────
 * Colors / borders / hover / active states are driven by the Theme
 * Control "Pagination Buttons" accordion (shared rule lives in
 * class-theme-overrides.php). This block only owns layout + spacing. */
.smj-similar-pagination {
  display:        flex;
  flex-wrap:      wrap;
  justify-content:center;
  align-items:    center;
  gap:            6px;
  margin:         28px 0 8px;
}
.smj-similar-pagination .smj-similar-page-item a,
.smj-similar-pagination .smj-similar-page-item span {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  padding:        0 12px;
  font-size:      14px;
  font-weight:    600;
  text-decoration:none;
  box-sizing:     border-box;
}
.smj-similar-pagination .smj-similar-page-item span.dots {
  border:         none !important;
  background:     transparent !important;
  min-width:      auto !important;
  padding:        0 4px;
}
@media (max-width: 480px) {
  .smj-similar-pagination .smj-similar-page-item a,
  .smj-similar-pagination .smj-similar-page-item span {
    padding: 0 9px;
    font-size: 13px;
  }
}