/* =============================================================================
   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 {
  /* NOTE: no position:absolute — that stacked all carousel slides on top of
     each other. Slides are flex items (see .smj-card__slide) and must flow. */
  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 — 4 col desktop (admin-overridable). Tablet/
   mobile counts are set in §6 below. minmax(0,1fr) prevents track blow-out. */
.smj-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 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 — 4 col desktop (matches all-listings) */
.smj-featured-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 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  (spec: 4 desktop / 3 tablet / 2 mobile)
   Cards keep their fixed height at ALL breakpoints — only columns change.
   The authoritative mobile-first rules live in smj-responsive.css (loaded last);
   these mirror them so the fallback is correct even if that sheet is missing.
   ============================================================================= */

/* Tablet 768–1199px → 3 columns (every listing grid) */
@media (max-width: 1199px) {
  .smj-grid,
  .smj-listings-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(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Mobile <768px → 2 columns (every listing grid, never collapses to 1) */
@media (max-width: 767px) {
  .smj-grid,
  .smj-listings-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, minmax(0, 1fr));
    gap: 12px;
  }
}


/* =============================================================================
   §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;
  }
}

/* ═══════════════════════════════════════════════════════════
   E-COMMERCE PRODUCT CARD (v6.20.49) — Amazon/Myntra-style
   Applies site-wide (home, category, search, related, wishlist).
   Appended last so it wins over legacy marketplace card rules.
   ═══════════════════════════════════════════════════════════ */
.smj-card{display:flex;flex-direction:column;height:100%}
.smj-card__body{display:flex;flex-direction:column;flex:1;gap:2px;padding:12px 14px 14px}
.smj-card__swatches{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.smj-card__sw{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);display:inline-block;flex:0 0 auto}
.smj-card__sw-more{font-size:12px;color:#2563eb;font-weight:600;line-height:1}
.smj-card__brand{font-weight:700;font-size:14px;color:#111827;margin:0}
.smj-card__title{font-size:14px;font-weight:400;line-height:1.35;margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.smj-card__title a{color:#111827;text-decoration:none}
.smj-card__title a:hover{color:#c45500}
.smj-card__rating{display:flex;align-items:center;gap:5px;font-size:13px;margin:4px 0 0}
.smj-card__rating-num{font-weight:600;color:#111827}
.smj-card__stars{color:#f59e0b;letter-spacing:1px;font-size:14px}
.smj-card__rating-cnt{color:#2563eb}
.smj-card__purchase{font-size:12px;color:#6b7280;margin:3px 0 0}
.smj-card__deal{align-self:flex-start;background:#cc0c39;color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:4px;margin:6px 0 2px;line-height:1.3}
.smj-card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:8px 0 0;margin-top:auto;padding-top:6px}
.smj-card__now{font-size:20px;font-weight:800;color:#111827}
.smj-card__now:before{content:"";}
.smj-card__mrp{font-size:12px;color:#6b7280}
.smj-card__mrp del{text-decoration:line-through}
.smj-card__off{font-size:12px;color:#6b7280;font-weight:600}
/* Consistent image aspect ratio + equal-height cards in any grid */
.smj-card__img{aspect-ratio:3/4;overflow:hidden;position:relative;background:#f4f4f5}
.smj-card__img img{width:100%;height:100%;object-fit:cover;display:block}

/* Hover carousel — images slide right→left while the cursor is over the card */

/* ── FIXES (v6.20.51) after motion review ──────────────────────────────
   The legacy `.smj-card__img img{position:absolute;inset:0!important}` rule
   stacked every carousel slide on top of each other, so the slider could
   never move. Override it at higher specificity so slides sit in a flex row. */
/* Equal-height product cards in every listing grid.
   NOTE: use ONLY align-items:stretch — do NOT set height:100% on grid items.
   On an auto-height row, height:100% is circular and resolves to min-content,
   which makes the card shorter than its content and clips the price (card
   overflow is hidden for rounded corners). align-items:stretch stretches
   auto-height items to equal height with no clipping. */
/* ── BULLETPROOF anti-clip (v6.20.54) ─────────────────────────────────
   The card can never clip its content, no matter what height any legacy
   rule tries to force: overflow is VISIBLE on the card, and the rounded
   corners are handled by the image (top) + the card's own background
   (bottom). Combined with height:auto the box simply grows to fit. */
.smj-card{height:auto!important;min-height:var(--smj-card-height,320px)!important;overflow:visible!important}
.smj-card__img,.smj-card__img-link,.smj-card__img-placeholder{overflow:hidden!important;border-top-left-radius:var(--smj-radius,12px)!important;border-top-right-radius:var(--smj-radius,12px)!important;flex:0 0 auto!important;min-height:0!important}
.smj-card__body{flex:1 0 auto!important;min-height:0!important}
.smj-card > .smj-card__body{flex:1 0 auto!important}
/* The grid + results wrapper must not clip the (now taller) card either. */
.smj-grid,.smj-results,.smj-results-grid,.smj-search-results,.smj-listing-results{overflow:visible!important}
.smj-grid{align-items:stretch!important}

/* ── Amazon-style refinements (v6.20.55) ──────────────────────────────
   Full image (no top crop), tighter spacing, compact Add-to-Cart. */
.smj-card__img{background:#f7f7f8!important}
/* Slightly tighter body + a touch more bottom room */
.smj-card__body{gap:1px!important;padding:10px 12px 12px!important}
.smj-card__brand{margin-top:2px!important}
.smj-card__title{margin-top:1px!important;min-height:2.6em}
.smj-card__rating{margin-top:3px!important}
.smj-card__deal{margin:5px 0 3px!important}
.smj-card__price{margin-top:6px!important}
/* Compact Add-to-Cart button, pinned to the card bottom */
.smj-atc--card{margin-top:8px!important;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--smj-primary-cta,var(--smj-primary,#325D2A));color:#fff;border:none;border-radius:8px;padding:9px 12px;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:filter .15s,transform .05s;line-height:1.2}
.smj-atc--card:hover{filter:brightness(1.08)}
.smj-atc--card:active{transform:translateY(1px)}
.smj-atc--card svg{flex:0 0 auto}
.smj-atc--card.is-added{background:#166534}

/* ── v6.20.56 — compact Amazon layout + guaranteed no-clip ─────────────
   Scoped with `body .smj-card` (specificity 0,2,1) so these win over the
   wp_head-9999 override layer (`.smj-card …` = 0,2,0) without editing it. */
body .smj-card{overflow:visible!important;height:auto!important}
body .smj-card__img{background:#f7f7f8!important;aspect-ratio:3/4!important;height:auto!important;flex:0 0 auto!important}
body .smj-card .smj-card__body{display:flex!important;flex-direction:column!important;flex:1 0 auto!important;gap:1px!important;padding:9px 12px 12px!important}
body .smj-card__swatches{margin:0 0 4px!important}
body .smj-card__brand{margin:1px 0 0!important}
body .smj-card__title{margin:1px 0 0!important;min-height:2.5em}
body .smj-card__rating{margin:3px 0 0!important}
body .smj-card__purchase{margin:2px 0 0!important}
body .smj-card__deal{margin:5px 0 2px!important}
/* price flows naturally (no margin-top:auto → nothing gets pushed/clipped) */
body .smj-card__price{margin:4px 0 0!important;padding-top:0!important}
body .smj-atc--card{margin-top:8px!important}

/* ── v6.20.57 — immersive edge-to-edge image + compact centered CTA ────── */
/* Image fills the frame to the top/left/right edges (no letterbox margins),
   proportioned (cover keeps aspect, no distortion); object-position biased
   toward the top so the product/subject stays in view. */
body .smj-card__img{background:#f7f7f8!important;aspect-ratio:3/4!important;height:auto!important}
/* Compact, centered, pill Add-to-Cart button */
body .smj-atc--card{align-self:center!important;width:auto!important;min-width:132px;max-width:82%;margin:10px auto 2px!important;padding:7px 20px!important;font-size:12.5px!important;font-weight:700!important;border-radius:999px!important;gap:6px!important;box-shadow:0 2px 10px rgba(50,93,42,.22)!important;letter-spacing:.01em!important}
body .smj-atc--card svg{width:14px;height:14px}

/* ── v6.20.58 — clip image to the card's rounded corners ───────────────
   The card now grows to fit its content (height:auto everywhere), so
   overflow:hidden clips the image to the rounded corners WITHOUT clipping
   the price. The image radius is matched to the card radius as a backup. */
body .smj-card{overflow:hidden!important}
body .smj-card > .smj-card__img,
body .smj-card > .smj-card__img-link,
body .smj-card > .smj-card__img-placeholder{
  overflow:hidden!important;
  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;
}
/* v6.20.67 ROOT-CAUSE FIX: the slider is the MOVING track. Its own box is
   pinned to 100% width (inset:0), so overflow:hidden on it clipped slides
   2..N (which sit at +100%,+200%… OUTSIDE its box) — only slide 1 could ever
   paint, and translating the track revealed the clipped (blank) region.
   Clipping belongs solely to the stationary viewport .smj-card__img, which
   already has overflow:hidden + border-radius. Track must be overflow:visible. */
body .smj-card > .smj-card__img > .smj-card__slider{border-radius:inherit!important;overflow:visible!important}

/* keep the wishlist heart above the image */
body .smj-card > .smj-card__img > .smj-card__fav,
body .smj-card > .smj-card__img > .smj-card__badges{z-index:3!important}

/* ── v6.20.61 — AUTHORITATIVE carousel layout (beats all prior rules) ─────
   Slider is a nowrap flex row; each slide is exactly 100% wide and never
   shrinks, so the track width = N×100% and translateX reveals the next
   real image (no empty background, no stacking). */
body .smj-card__img{position:relative!important;overflow:hidden!important}
body .smj-card__img .smj-card__slider{
  position:absolute!important;inset:0!important;
  display:flex!important;flex-wrap:nowrap!important;
  width:100%!important;height:100%!important;overflow:visible!important; /* v6.20.67: track must NOT clip its own off-screen slides; viewport (.smj-card__img) clips */
  will-change:transform;
}
body .smj-card__img .smj-card__slider .smj-card__slide{
  position:relative!important;inset:auto!important;
  flex:0 0 100%!important;width:100%!important;min-width:100%!important;max-width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center 20%!important;
  display:block!important;border-radius:0!important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * v6.20.118 — Inventory availability label on product cards.
 * Shown in the add-to-cart slot when a product is Currently Unavailable /
 * Available Soon, mirroring the single product page. The card still links
 * to the product; this is a non-purchasable status pill, not a button.
 * ═══════════════════════════════════════════════════════════════════════ */
.smj-card__avail{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:8px;padding:7px 12px;width:100%;
  font-size:12.5px;font-weight:700;border-radius:9px;letter-spacing:.01em;
  box-sizing:border-box;
}
.smj-card__avail--unavailable{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.smj-card__avail--coming_soon{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

/* ═══════════════════════════════════════════════════════════════════════
 * v6.20.123 — Premium hover interaction for the favorite heart.
 * On card hover, a NON-favorited heart gently pulses with a soft glow to
 * invite the save action. The moment it becomes a favorite (JS adds
 * .smj-fav-btn--active / .tmp-fav-active), the :not() selector stops matching
 * and the animation ceases immediately — the filled heart sits still.
 *
 * Performance: hover-capable pointers only (skips touch), animates just
 * transform + filter (GPU-composited), and the keyframes run only while the
 * card is hovered, so there is no idle CPU cost.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* Smooth baseline so the heart eases in/out of the animated state. */
  .smj-card .smj-fav-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active),
  .smj-card .smj-heart-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active) {
    transition: transform .25s ease, filter .25s ease;
    will-change: transform, filter;
  }
  .smj-card:hover .smj-fav-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active),
  .smj-card:hover .smj-heart-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active) {
    animation: smjFavPulse 1.6s ease-in-out infinite;
  }
  /* Pause the pulse while the user is actually hovering the heart itself, so
     it feels responsive and "ready to click" rather than moving under cursor. */
  .smj-card .smj-fav-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active):hover,
  .smj-card .smj-heart-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active):hover {
    animation: none;
    transform: scale(1.14);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.70)) drop-shadow(0 0 8px rgba(255,63,108,.65)) !important;
  }
  /* Favorited hearts never animate, even on hover. */
  .smj-card:hover .smj-fav-btn--active,
  .smj-card:hover .tmp-fav-active,
  .smj-card:hover .smj-fav-active {
    animation: none !important;
  }
}
@keyframes smjFavPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.70)) drop-shadow(0 0 0 rgba(255,63,108,0)) !important;
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.70)) drop-shadow(0 0 7px rgba(255,63,108,.60)) !important;
  }
}
/* Respect users who prefer reduced motion — glow only, no pulsing scale. */
@media (prefers-reduced-motion: reduce) {
  .smj-card:hover .smj-fav-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active),
  .smj-card:hover .smj-heart-btn:not(.smj-fav-btn--active):not(.tmp-fav-active):not(.smj-fav-active) {
    animation: none;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.70)) drop-shadow(0 0 7px rgba(255,63,108,.55)) !important;
  }
}