/* SMJ Marketplace Pro — Single Listing styles
   Extracted from template; enqueued via wp_enqueue_style(). */

/* ─────────────────────────────────────────────────────────────────────────
   SMJ Single Listing — Compact & Clean UI  v3.0
   CSS-only refresh. Zero PHP / JS / HTML changes.
   All functionality (Call, WA, Enquiry, Lightbox, Favourites) is preserved.
───────────────────────────────────────────────────────────────────────── */

/* ── Scoped reset ── */
.smj-sl-wrap *,.smj-sl-wrap *::before,.smj-sl-wrap *::after{box-sizing:border-box}
.smj-sl-wrap a{text-decoration:none}
.smj-sl-wrap ul{list-style:none;margin:0;padding:0}
.smj-sl-wrap button{cursor:pointer;font-family:inherit}
.smj-sl-wrap img{display:block;max-width:100%}

/* ── Page container ── */
.smj-sl-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:16px 14px 64px;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:14px;
    color:#333;
    line-height:1.55;
}

/* .smj-sl-bc styles moved to smj-pages.css (shared, loads globally) */


/* ── 2-column layout ── */
.smj-sl-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
}

/* ── Card shell ── */
.smj-sl-card{
    background:var(--smj-bg);
    border:1px solid #e8e8e8;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:12px;
}
.smj-sl-card:last-child{margin-bottom:0}
.smj-sl-cb{padding:14px 16px}
.smj-sl-ch{
    font-size:13px;font-weight:600;color:#444;
    margin:0 0 10px;
    display:flex;align-items:center;gap:7px;
}
.smj-sl-ch::after{content:'';flex:1;height:1px;background:#f0f0f0}
.smj-sl-ch svg{
    width:13px;height:13px;
    stroke:#888;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}

/* ═══════════════════════════════
   GALLERY
═══════════════════════════════ */
.smj-sl-gallery{margin-bottom:12px}

/* Main image — slightly shorter aspect for compactness */
.smj-sl-main{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    background:#111;
    aspect-ratio:16/9;
    cursor:zoom-in;
}
.smj-sl-main img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .3s ease,opacity .2s;
    will-change:transform;
}
.smj-sl-main:hover img{transform:scale(1.02)}

/* Counter badge */
.smj-sl-counter{
    position:absolute;bottom:8px;right:10px;
    background:rgba(0,0,0,.5);color:var(--smj-bg);
    font-size:11px;font-weight:500;
    padding:3px 8px;border-radius:12px;
    pointer-events:none;z-index:2;
}

/* Overlay badges */
.smj-sl-badges{
    position:absolute;top:8px;left:8px;
    display:flex;flex-direction:column;gap:4px;z-index:2;
}
.smj-sl-bdg{
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:600;
    padding:3px 8px;border-radius:12px;
}
.smj-sl-bdg--feat{background:#fef3c7;color:#92400e}
.smj-sl-bdg--sold{background:#fee2e2;color:#991b1b}

/* Nav arrows */
.smj-sl-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.9);border:none;border-radius:50%;
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    z-index:3;box-shadow:0 1px 4px rgba(0,0,0,.15);
    padding:0;transition:background .15s,transform .15s;
}
.smj-sl-nav:hover{background:var(--smj-bg);transform:translateY(-50%) scale(1.06)}
.smj-sl-nav--p{left:8px}.smj-sl-nav--n{right:8px}
.smj-sl-nav svg{
    width:15px;height:15px;stroke:#222;
    stroke-width:2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
}

/* Thumbnails — smaller, tighter */
.smj-sl-thumbs{
    display:flex;gap:6px;
    margin-top:7px;
    overflow-x:auto;
    scrollbar-width:thin;scrollbar-color:#ddd transparent;
    padding-bottom:2px;
}
.smj-sl-thumbs::-webkit-scrollbar{height:3px}
.smj-sl-thumbs::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.smj-sl-thumb{
    flex-shrink:0;width:64px;height:46px;
    border-radius:5px;overflow:hidden;
    border:2px solid transparent;
    cursor:pointer;opacity:.65;
    transition:opacity .15s,border-color .15s;
}
.smj-sl-thumb img{width:100%;height:100%;object-fit:cover}
.smj-sl-thumb:hover{opacity:.9}
.smj-sl-thumb.is-on{border-color:var(--smj-secondary);opacity:1}

/* No image placeholder */
.smj-sl-no-img{
    aspect-ratio:16/9;background:#f7f7f7;border-radius:8px;
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:6px;color:#bbb;
    border:1.5px dashed #e0e0e0;margin-bottom:12px;
}
.smj-sl-no-img svg{width:38px;height:38px;stroke:#ddd;fill:none;stroke-width:1.5}

/* ═══════════════════════════════
   TITLE & META
═══════════════════════════════ */
.smj-sl-title{
    font-size:19px;font-weight:600;
    color:#222;line-height:1.3;
    margin:0 0 8px;
}
.smj-sl-meta{
    display:flex;align-items:center;flex-wrap:wrap;
    gap:10px;font-size:12px;color:#888;
}
.smj-sl-meta-i{display:flex;align-items:center;gap:3px}
.smj-sl-meta-i svg{
    width:12px;height:12px;stroke:currentColor;
    fill:none;stroke-width:2;flex-shrink:0;
    stroke-linecap:round;stroke-linejoin:round;
}

/* ═══════════════════════════════
   KEY SPECS STRIP
═══════════════════════════════ */
.smj-sl-strip{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
    background:#ececec;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:14px;
    border:1px solid #ececec;
}
/* When strip is inside a card (.smj-sl-strip--inline), remove double border/radius */
.smj-sl-strip--inline{
    border-radius:6px;
    margin-bottom:14px;
}
.smj-sl-strip-i{
    background:var(--smj-bg);
    padding:9px 14px;
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1 1 110px;
    min-width:100px;
    max-width:200px;
}
.smj-sl-strip-ico{font-size:15px;line-height:1}
.smj-sl-strip-lbl{
    font-size:10px;color:#aaa;font-weight:500;
    text-transform:uppercase;letter-spacing:.04em;
}
.smj-sl-strip-val{font-size:12px;font-weight:600;color:#333}
/* Strip: cap item width when only 1–2 items present */
.smj-sl-strip-i:only-child,
.smj-sl-strip-i:first-child:nth-last-child(2),
.smj-sl-strip-i:first-child:nth-last-child(2) ~ .smj-sl-strip-i{
    max-width:180px;
}

/* ═══════════════════════════════
   DESCRIPTION
═══════════════════════════════ */
.smj-sl-desc{
    font-size:13.5px;color:#444;line-height:1.7;
    max-height:180px;overflow:hidden;position:relative;
    transition:max-height .4s ease;
}
.smj-sl-desc.open{max-height:9999px}
.smj-sl-desc-fade{
    position:absolute;bottom:0;left:0;right:0;height:48px;
    background:linear-gradient(transparent,var(--smj-bg));
    pointer-events:none;transition:opacity .3s;
}
.smj-sl-desc.open+.smj-sl-desc-fade{opacity:0}
.smj-sl-rm{
    margin-top:5px;background:none;border:none;
    color:var(--smj-secondary);font-size:12px;font-weight:500;padding:0;
}
.smj-sl-rm:hover{text-decoration:underline}

/* ═══════════════════════════════
   SPECS TABLE
═══════════════════════════════ */
.smj-sl-tbl{width:100%;border-collapse:collapse}
.smj-sl-tbl tr:nth-child(even) th,
.smj-sl-tbl tr:nth-child(even) td{background:#fafafa}
.smj-sl-tbl th{
    text-align:left;padding:7px 12px;
    font-size:12px;color:#888;font-weight:500;
    width:42%;border-bottom:1px solid #f0f0f0;
}
.smj-sl-tbl td{
    padding:7px 12px;font-size:13px;
    font-weight:500;color:#333;
    border-bottom:1px solid #f0f0f0;
}
.smj-sl-tbl tr:last-child th,
.smj-sl-tbl tr:last-child td{border-bottom:none}

/* ═══════════════════════════════
   SIDEBAR
═══════════════════════════════ */
.smj-sl-sidebar{
    display:flex;flex-direction:column;gap:10px;
    position:sticky;top:16px;
}

/* Price card — compact */
.smj-sl-price-card{
    background:#f0f5ff;
    border:1px solid #c7d9f8;
    border-radius:8px;
    padding:14px 16px;
    text-align:center;
}
.smj-sl-price{
    font-size:24px;font-weight:700;
    color:var(--smj-secondary-hover);letter-spacing:-.5px;line-height:1.1;
}
.smj-sl-price-note{
    font-size:11px;color:#777;margin-top:3px;
    display:flex;align-items:center;justify-content:center;gap:3px;
}
.smj-sl-price-note svg{width:11px;height:11px;stroke:#10b981;fill:none;stroke-width:2.5}
.smj-sl-sold-banner{
    display:inline-flex;align-items:center;gap:5px;
    font-size:13px;font-weight:600;color:#991b1b;
    background:#fee2e2;padding:6px 14px;border-radius:6px;
}

/* Location pill */
.smj-sl-loc{
    display:flex;align-items:center;gap:7px;
    font-size:12.5px;color:#444;font-weight:400;
    background:#f9f9f9;border:1px solid #e8e8e8;
    border-radius:7px;padding:8px 12px;
}
.smj-sl-loc svg{
    width:13px;height:13px;stroke:#e55;fill:none;
    stroke-width:2;flex-shrink:0;
    stroke-linecap:round;stroke-linejoin:round;
}

/* ═══════════════════════════════
   CTA BUTTONS — compact, functional
   Call and WhatsApp behaviour is unchanged.
═══════════════════════════════ */
.smj-sl-actions{display:flex;flex-direction:column;gap:8px}

.smj-sl-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:10px 14px;
    border-radius:7px;font-size:13.5px;font-weight:600;
    border:none;text-align:center;line-height:1;cursor:pointer;
    transition:filter .15s,box-shadow .15s,transform .12s;
}
.smj-sl-btn:hover{transform:translateY(-1px)}
.smj-sl-btn:active{transform:translateY(0)}
.smj-sl-btn svg{width:16px;height:16px;flex-shrink:0}

/* Call */
.smj-sl-btn-call{
    background:var(--smj-secondary-hover);color:var(--smj-bg) !important;
    box-shadow:0 2px 8px rgba(29,78,216,.3);
}
.smj-sl-btn-call:hover{filter:brightness(1.08);color:var(--smj-bg) !important;box-shadow:0 4px 12px rgba(29,78,216,.4)}
.smj-sl-btn-call svg{fill:var(--smj-bg)}

/* WhatsApp */
.smj-sl-btn-wa{
    background:#1da851;color:var(--smj-bg) !important;
    box-shadow:0 2px 8px rgba(29,168,81,.28);
}
.smj-sl-btn-wa:hover{filter:brightness(1.06);color:var(--smj-bg) !important;box-shadow:0 4px 12px rgba(29,168,81,.38)}
.smj-sl-btn-wa svg{fill:var(--smj-bg)}

/* Favourite */
.smj-sl-fav-wrap{display:flex;justify-content:center}
.smj-sl-fav-wrap .smj-heart-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:9px 14px;border-radius:7px;
    font-size:13px;font-weight:500;color:#555;
    background:var(--smj-bg);border:1px solid #e0e0e0;
    transition:background .15s,border-color .15s,color .15s;
}
/* FIX 5: Suppress the global scale(1.15) from heart_js — keep subtle color change only */
.smj-sl-fav-wrap .smj-heart-btn:hover{background:#fff5f5;border-color:#fca5a5;color:#dc2626;transform:none}
.smj-sl-fav-wrap .smj-heart-btn.smj-fav-active{background:#fff5f5;border-color:#dc2626;color:#dc2626}
.smj-sl-fav-wrap .smj-heart-ico{width:15px;height:15px;stroke:#dc2626;fill:transparent;stroke-width:2;transition:fill .15s}
.smj-sl-fav-wrap .smj-heart-btn.smj-fav-active .smj-heart-ico{fill:#dc2626}

/* Trust badges */
.smj-sl-trust{
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:10px;
    padding:9px 12px;border-top:1px solid #f0f0f0;
}
.smj-sl-trust-i{
    display:flex;align-items:center;gap:3px;
    font-size:11px;color:#888;font-weight:400;
}
.smj-sl-trust-i svg{
    width:11px;height:11px;stroke:#10b981;fill:none;
    stroke-width:2;flex-shrink:0;
    stroke-linecap:round;stroke-linejoin:round;
}

/* Seller card */
.smj-sl-seller{display:flex;align-items:center;gap:10px;padding:12px 14px}
.smj-sl-av{
    width:38px;height:38px;border-radius:50%;
    background:#dbeafe;color:#1e40af;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;flex-shrink:0;overflow:hidden;
}
.smj-sl-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.smj-sl-seller-name{font-size:13px;font-weight:600;color:#222}
.smj-sl-seller-since{font-size:11px;color:#999;margin-top:1px}
.smj-sl-verified{
    display:inline-flex;align-items:center;gap:3px;
    font-size:11px;font-weight:500;color:#059669;margin-top:2px;
}
.smj-sl-verified svg{width:11px;height:11px;fill:#059669}

/* Enquiry form padding */
.smj-sl-enq{padding:14px 16px}

/* ═══════════════════════════════
   LIGHTBOX (functional, untouched logic)
═══════════════════════════════ */
.smj-lb{
    position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:999999;
    display:flex;align-items:center;justify-content:center;
    padding:12px;opacity:0;pointer-events:none;transition:opacity .22s;
}
.smj-lb.open{opacity:1;pointer-events:all}
.smj-lb-inner{
    position:relative;max-width:1080px;width:100%;
    display:flex;flex-direction:column;align-items:center;gap:8px;
}
.smj-lb-img-wrap{
    position:relative;width:100%;max-height:78vh;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px;
    /* FIX 2: overflow must NOT be hidden — it clips the arrow buttons */
    overflow:visible;
    background:#111;
}
.smj-lb-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:6px;transition:opacity .18s}
.smj-lb-close{
    position:absolute;top:-12px;right:-12px;width:30px;height:30px;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    border-radius:50%;color:var(--smj-bg);display:flex;align-items:center;
    justify-content:center;font-size:15px;z-index:2;transition:background .15s;
}
.smj-lb-close:hover{background:rgba(255,255,255,.22)}
.smj-lb-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    border-radius:50%;width:38px;height:38px;color:var(--smj-bg);
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;z-index:2;
}
.smj-lb-nav:hover{background:rgba(255,255,255,.22)}
/* FIX 2: Arrows positioned INSIDE img-wrap (not outside — overflow:hidden clips them) */
.smj-lb-nav--p{left:16px}.smj-lb-nav--n{right:16px}
.smj-lb-nav svg{
    width:18px;height:18px;stroke:var(--smj-bg);stroke-width:2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
}
.smj-lb-cnt{color:rgba(255,255,255,.6);font-size:12px;font-weight:400}
.smj-lb-thumbs{
    display:flex;gap:4px;max-width:100%;overflow-x:auto;
    scrollbar-width:none;padding:2px;
}
.smj-lb-thumbs::-webkit-scrollbar{display:none}
.smj-lb-tn{
    flex-shrink:0;width:52px;height:38px;border-radius:4px;overflow:hidden;
    border:2px solid transparent;cursor:pointer;opacity:.5;transition:all .15s;
}
.smj-lb-tn img{width:100%;height:100%;object-fit:cover}
.smj-lb-tn:hover{opacity:.85}.smj-lb-tn.on{border-color:var(--smj-bg);opacity:1}
body.smj-lb-open{overflow:hidden}

/* ═══════════════════════════════
   SIMILAR LISTINGS
   Grid + card dimensions are fully controlled by smj-card-unified.css.
   Only section wrapper margin lives here.
═══════════════════════════════ */
.smj-similar,
.smj-similar-section { margin-top: 24px; }

/* smj-similar-title styling deferred to smj-card-unified.css §3 */

/* Kill legacy small-card class */
.smj-sc { display: none !important; }


/* ═══════════════════════════════
   MOBILE STICKY CTA BAR
   Call / WhatsApp remain fully functional.
═══════════════════════════════ */
.smj-sl-sticky{
    display:none;position:fixed;bottom:0;left:0;right:0;
    z-index:9998;background:var(--smj-bg);border-top:1px solid #e0e0e0;
    padding:8px 12px;gap:8px;
    box-shadow:0 -2px 12px rgba(0,0,0,.08);
}
.smj-sl-sticky .smj-sl-btn{
    flex:1;padding:10px 8px;font-size:13px;border-radius:6px;
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media(max-width:860px){
    .smj-sl-layout{grid-template-columns:1fr}
    .smj-sl-sidebar{position:static}
    .smj-sl-actions{display:none}
    .smj-sl-sticky{display:flex}
    .smj-sl-title{font-size:17px}
    .smj-sl-price{font-size:20px}
    .smj-lb-nav--p{left:4px}.smj-lb-nav--n{right:4px}
    /* Similar grid breakpoints are in smj-card-unified.css §6 — do not override here */
}
@media(max-width:500px){
    .smj-sl-wrap{padding:10px 10px 74px}
    .smj-sl-strip{grid-template-columns:repeat(2,1fr)}
    .smj-sl-btn{padding:10px 8px;font-size:12.5px}
}

/* ════════════════════════════════════════════════════════════════════
   v6.4 — SINGLE LISTING GLITCH FIXES
   Addresses: oversized placeholder icons, broken aspect ratios, sidebar
   alignment, mobile overflow, sticky sidebar bounds, spec-table responsive
   wrapping, button height consistency, gallery image rendering. Additive
   only — does not change existing working selectors.
   ════════════════════════════════════════════════════════════════════ */

/* FIX 1 — Constrain the gallery + placeholder so they NEVER blow up on
   wide containers. The `aspect-ratio` rule alone lets height grow with
   width unbounded; `max-height` caps it to a sensible reading height.
   The override layer's --smj-single-gallery-max-h variable controls
   the cap from the admin. */
.smj-sl-main,
.smj-sl-no-img{
    max-height: var(--smj-single-gallery-max-h, 480px);
    width:100%;
    margin-left:auto;margin-right:auto;
}
.smj-sl-main img{
    /* Force the inner image to honor the container's max-height too —
       prevents huge native-resolution photos from pushing past the cap. */
    max-height: var(--smj-single-gallery-max-h, 480px);
}

/* FIX 2 — No-image placeholder: clamp the SVG icon and add proper
   centering. Without this, the SVG inherits any global icon-size rule
   and balloons on big containers. */
.smj-sl-no-img{
    min-height:200px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;
}
.smj-sl-no-img svg{
    width:48px !important;height:48px !important;
    flex-shrink:0;
}
.smj-sl-no-img p{margin:0;font-size:13px}

/* FIX 3 — Sidebar sticky behavior.
 * v6.4.3: previous version added `max-height + overflow-y:auto` which
 * caused the bottom of buttons (specifically "View Seller Details") to
 * be clipped when the sidebar fit the viewport. Better behavior:
 *  - Default: `overflow: visible` so nothing ever gets clipped.
 *  - Only when the sidebar's content genuinely exceeds viewport height
 *    do we enable inner scroll, via the .smj-sl-sidebar--scroll modifier
 *    class. Since we don't toggle this from JS, we use a CSS-only
 *    fallback: `min-height:0` on the grid item (already set by FIX 4's
 *    `* { min-width: 0 }` cascade). The natural sticky behavior of
 *    modern browsers handles long sidebars on tall pages correctly. */
.smj-sl-sidebar{
    top: clamp(12px, 2vw, 24px);
    /* No max-height / no overflow → buttons never clip.
     * The sidebar will naturally scroll WITH the page when its content
     * exceeds viewport height — which is the standard pattern for
     * sticky sidebars and what users expect. */
    overflow: visible;
}
/* When the user disables sticky from admin (body class), kill the sticky
 * positioning entirely. */
body.smj-sl-no-sidebar-sticky .smj-sl-sidebar{
    position: static !important;
}

/* FIX 4 — Mobile overflow guard. The .smj-sl-wrap has horizontal padding
   but child elements with their own min-widths (long titles, spec values,
   gallery counter) could push the page wider than viewport on narrow
   devices. This forces children to respect the container. */
.smj-sl-wrap, .smj-sl-wrap *{ min-width: 0; }
.smj-sl-wrap{ overflow-x: clip; }

/* FIX 5 — Specification table responsive wrap. On narrow screens the
   42% th + value can overflow with long terms (e.g. "Year of Manufacture").
   Stack rows on small screens for readability. */
@media(max-width:600px){
    .smj-sl-tbl, .smj-sl-tbl tbody, .smj-sl-tbl tr{display:block;width:100%}
    .smj-sl-tbl tr{
        padding:8px 0;
        border-bottom:1px solid #f0f0f0;
    }
    .smj-sl-tbl tr:last-child{border-bottom:none}
    .smj-sl-tbl th, .smj-sl-tbl td{
        display:block;width:auto;padding:2px 12px;
        border-bottom:none;
    }
    .smj-sl-tbl tr:nth-child(even) th,
    .smj-sl-tbl tr:nth-child(even) td{background:transparent}
    .smj-sl-tbl tr:nth-child(even){background:#fafafa;border-radius:6px}
    .smj-sl-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
    .smj-sl-tbl td{font-size:13.5px;font-weight:500}
}

/* FIX 6 — Button height consistency. The Call/WA/Favourite buttons used
   to render at slightly different heights because Call/WA had `line-height:1`
   but the favorite button (renders from class-favorites) inherits a different
   line-height from the heart_js global. Lock all three to identical box. */
.smj-sl-actions .smj-sl-btn,
.smj-sl-actions .smj-heart-btn,
.smj-sl-actions .smj-fav-btn{
    min-height: 42px;
    box-sizing: border-box;
    line-height: 1.2;
}

/* FIX 7 — Card height/padding consistency. Some cards in the sidebar
   had visually inconsistent inner padding because .smj-sl-cb defines
   one padding, but the seller card and price card override with their
   own. Normalize visible spacing so cards align as a column. */
.smj-sl-card + .smj-sl-card{margin-top:0}
.smj-sl-sidebar .smj-sl-card,
.smj-sl-sidebar .smj-sl-price-card{
    margin-bottom: 0; /* gap is handled by flex column */
}

/* FIX 8 — Inline icon sizing. Many SVGs in the template don't carry an
   explicit width/height attribute and inherit auto-sizing from the parent.
   This caused the meta icons to render huge in some themes that set
   `svg{width:100%}` globally. Lock them down. */
.smj-sl-meta svg,
.smj-sl-loc svg,
.smj-sl-trust-i svg,
.smj-sl-verified svg{
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
}
.smj-sl-ch svg{
    width: 13px !important;
    height: 13px !important;
}

/* FIX 9 — Lightbox image rendering on hi-DPI displays. `object-fit:contain`
   was applied but no `image-rendering` hint was set, leading to slightly
   blurry zoomed images on retina screens. */
.smj-lb-img{
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* FIX 10 — Thumbnail consistent aspect on mobile. Original 64×46
   thumbs are fine on desktop but get cropped weirdly when the
   --smj-single-thumb-size variable is dragged smaller. Use the
   variable's calc'd height (set in overrides) and constrain min size. */
.smj-sl-thumb{
    min-width: 40px;
    min-height: 28px;
}

/* FIX 11 — Description fade gradient was hardcoded to var(--smj-bg).
   When card bg uses the single-listing var, the gradient fade can
   look mismatched against the surrounding card. Use the resolved
   card bg instead. */
.smj-sl-desc-fade{
    background: linear-gradient(transparent, var(--smj-single-card-bg, var(--smj-card-bg, #fff)));
}

/* FIX 12 — Mobile sticky CTA bar safe-area inset (iOS notch / home bar). */
.smj-sl-sticky{
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* ════════════════════════════════════════════════════════════════════
   v6.4.1 — NUCLEAR ICON-SIZE FIX
   Some host themes / parent CSS apply a global `svg { width: 100% }` or
   `img, svg { max-width: 100% }` rule that blows every inline SVG up to
   container size. The screenshots showed: gigantic green checkmark in
   the price card, full-width clock + eye icons in meta, full-width
   Description / Specifications header icons, full-width red heart in
   the Save-to-Favourites button.

   Fix is multi-layered:
   (1) Template now ships explicit `width` / `height` HTML attributes on
       every <svg> — strongest possible size signal, browsers honor it
       above any global CSS.
   (2) The rules below pin every SVG inside the single-listing wrapper
       to its intended size with body-level specificity + !important so
       no upstream theme rule can override them.
   (3) Safety net: any SVG that somehow escapes both layers gets a hard
       `max-width: 24px; max-height: 24px` cap so it can never balloon.
   ════════════════════════════════════════════════════════════════════ */

/* ── (3) SAFETY NET — caps ALL svg under .smj-sl-wrap so nothing ever
   blows up to container width. Specific rules below override this. */
body.smj-pg-listing .smj-sl-wrap svg{
    max-width: 24px;
    max-height: 24px;
    width: auto;
    height: auto;
}

/* ── (2) Specific size locks per icon context. Selectors carry both
   the body class and the wrapper class for high specificity. ── */

/* Breadcrumb icons (rendered via background-image — already constrained,
   but include the home/listings icon SVG case if any host theme injects). */
body.smj-pg-listing .smj-sl-wrap .smj-sl-bc svg{
    width: 12px !important;
    height: 12px !important;
}

/* Card heading icons — Description, Specifications, Send Enquiry */
body.smj-pg-listing .smj-sl-wrap .smj-sl-ch svg{
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
}

/* Meta strip icons — clock, eye, location pin under the title */
body.smj-pg-listing .smj-sl-wrap .smj-sl-meta svg,
body.smj-pg-listing .smj-sl-wrap .smj-sl-meta-i svg{
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
}

/* Price-note checkmark ("Price is negotiable") — was rendering as a giant
   green tick filling the entire price card. */
body.smj-pg-listing .smj-sl-wrap .smj-sl-price-note svg{
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0;
}

/* Sidebar location pill icon */
body.smj-pg-listing .smj-sl-wrap .smj-sl-loc svg{
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
}

/* Trust-badge checkmarks (Verified Listing / Safe & Secure / No Broker Fee) */
body.smj-pg-listing .smj-sl-wrap .smj-sl-trust-i svg,
body.smj-pg-listing .smj-sl-wrap .smj-sl-verified svg{
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0;
}

/* Gallery navigation arrows */
body.smj-pg-listing .smj-sl-wrap .smj-sl-nav svg{
    width: 15px !important;
    height: 15px !important;
}

/* No-image placeholder icon — keep it visible but bounded */
body.smj-pg-listing .smj-sl-wrap .smj-sl-no-img svg{
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}

/* Action button icons (Call / WhatsApp on the page + sticky bar). */
body.smj-pg-listing .smj-sl-wrap .smj-sl-btn svg{
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

/* View Seller Details popup-button icon */
body.smj-pg-listing .smj-sl-wrap .smj-seller-popup-btn svg{
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

/* Lightbox arrows + close (max-width safety only — they have their own size rules) */
body.smj-pg-listing .smj-lb svg{
    max-width: 22px !important;
    max-height: 22px !important;
}
body.smj-pg-listing .smj-lb-nav svg{
    width: 18px !important;
    height: 18px !important;
}

/* ──────────────────────────────────────────────────────────────────
   FAVOURITE HEART — the worst offender in the screenshots.
   The button is rendered by TMP_Favorites::render_button() (a global
   class outside the single-listing scope), so we cannot patch its
   markup from here. Instead we lock down the heart SVG via CSS,
   targeting it ONLY when it's inside .smj-sl-fav-wrap (which lives in
   the single-product template — i.e. single-listing scope).
   ────────────────────────────────────────────────────────────────── */

/* Pin the wrapper to a sensible button width so it can't expand to fill
   the sidebar column. */
body.smj-pg-listing .smj-sl-fav-wrap{
    display: block;
    width: 100%;
    max-width: 100%;
}
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn,
body.smj-pg-listing .smj-sl-fav-wrap .smj-fav-btn{
    /* Constrain the button itself — it was filling the entire sidebar
       column with its inner SVG free to grow to button-width. */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 9px 14px !important;
    min-height: 42px;
    line-height: 1.2;
}

/* Lock the heart SVG to a sane icon size regardless of inherited rules.
   Multi-selector covers both the .smj-heart-ico variant (render_button
   path) and the bare-svg fallback. The !important is critical — a host
   theme rule like `.entry-content svg { width: 100% }` would otherwise
   override the plugin's stylesheet on this exact selector. */
body.smj-pg-listing .smj-sl-fav-wrap svg,
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-ico,
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn svg,
body.smj-pg-listing .smj-sl-fav-wrap .smj-fav-btn svg{
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Modal trust banner icons (View Seller Details popup) */
body.smj-pg-listing .smj-modal__trust-banner svg{
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

/* ── Side effect cleanup: the giant icons were also misaligning their
   parent flex containers. Re-establish proper alignment now that they
   are correctly sized. ── */
body.smj-pg-listing .smj-sl-wrap .smj-sl-meta,
body.smj-pg-listing .smj-sl-wrap .smj-sl-meta-i,
body.smj-pg-listing .smj-sl-wrap .smj-sl-ch,
body.smj-pg-listing .smj-sl-wrap .smj-sl-loc,
body.smj-pg-listing .smj-sl-wrap .smj-sl-price-note,
body.smj-pg-listing .smj-sl-wrap .smj-sl-trust-i,
body.smj-pg-listing .smj-sl-wrap .smj-sl-verified{
    align-items: center;
}

/* ── Sidebar column sanity: the giant heart pushed sidebar height to 800px+.
   Constrain the sidebar to a normal max-width so it can't grow beyond
   the admin-controlled width even when child elements misbehave. ── */
body.smj-pg-listing .smj-sl-wrap .smj-sl-sidebar{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Price card: now that the giant checkmark is fixed, restore the
   intended compact look + make sure the card itself doesn't have
   leftover huge padding from the old broken state. ── */
body.smj-pg-listing .smj-sl-wrap .smj-sl-price-card{
    padding: 14px 16px;
}
body.smj-pg-listing .smj-sl-wrap .smj-sl-price-note{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: #777;
    margin-top: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   v6.4.2 — SECOND-PASS PATCH (post-screenshot review)
   Two more issues surfaced after the first round of icon fixes were
   deployed: (a) the "Send Enquiry" / "Chat with Seller" button rendered
   as a giant orange block because its inner SVG had no size attribute
   and the button itself had no height cap, and (b) the favourite button
   had no visible text label because TMP_Favorites::render_button()
   stores the label in `aria-label` only — it never renders text content.
   Both classes (SMJ_Chat, TMP_Favorites) are out of scope to modify per
   instructions, so we fix from CSS only, scoped to single-listing.
   ════════════════════════════════════════════════════════════════════ */

/* ── (A) CHAT / ENQUIRY BUTTON ────────────────────────────────────── */

/* The widget wrapper inside the enquiry card. Force a sensible height
   ceiling so it can't expand to fill all available column height. */
body.smj-pg-listing .smj-sl-enq .smj-chat-widget{
    display: block;
    width: 100%;
}

/* The actual button — pin its layout, size, and color contract. */
body.smj-pg-listing .smj-sl-enq .smj-chat-open-btn,
body.smj-pg-listing .smj-sl-enq .smj-chat-guest-btn{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    max-height: 48px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    border: none !important;
    /* Use the same blue brand color as the Call button for visual
       consistency in the sidebar action stack. */
    background: var(--smj-secondary-hover, #1d4ed8) !important;
    color: #fff !important;
    transition: filter .15s, box-shadow .15s, transform .12s !important;
}
body.smj-pg-listing .smj-sl-enq .smj-chat-open-btn:hover,
body.smj-pg-listing .smj-sl-enq .smj-chat-guest-btn:hover{
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, .25);
}

/* The chat-bubble SVG inside the button — was rendering at button width. */
body.smj-pg-listing .smj-sl-enq .smj-chat-open-btn svg,
body.smj-pg-listing .smj-sl-enq .smj-chat-guest-btn svg{
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    stroke: #fff !important;
    fill: none !important;
}

/* The .smj-sl-enq card padding: original was 14px 16px which is fine. */
body.smj-pg-listing .smj-sl-wrap .smj-sl-enq{
    padding: 14px 16px;
}

/* Tighten the gap between the "Send Enquiry" heading and the button. */
body.smj-pg-listing .smj-sl-wrap .smj-sl-enq .smj-sl-ch{
    margin-bottom: 8px;
}

/* ── (B) FAVOURITE BUTTON LABEL ──────────────────────────────────── */

/* TMP_Favorites::render_button() outputs <button aria-label="..."><svg/></button>
   with NO text content. We restore the visible label via CSS ::after.
   Scoped to .smj-sl-fav-wrap so listing-grid hearts (which are
   intentionally icon-only) are not affected. */

body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn{
    /* Restore the pill button look */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn:hover{
    background: #fff5f5 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    transform: none !important;
}
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn.smj-fav-active{
    background: #fff5f5 !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

/* Inject visible label via ::after — clean string, no leading heart
   character (the icon is already there as an SVG sibling). */
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn::after{
    content: "Save to Favourites";
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn.smj-fav-active::after{
    content: "Saved to Favourites";
}

/* Heart icon sizing + color states */
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn .smj-heart-ico,
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn svg{
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    stroke: #dc2626 !important;
    fill: transparent !important;
    stroke-width: 2 !important;
    transition: fill .15s !important;
}
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn.smj-fav-active svg,
body.smj-pg-listing .smj-sl-fav-wrap .smj-heart-btn.smj-fav-active .smj-heart-ico{
    fill: #dc2626 !important;
}

/* ════════════════════════════════════════════════════════════════════
   v6.4.3 — THIRD-PASS PATCH
   Issue: "View Seller Details" button is clipped at the bottom inside
   the seller card. Root cause: .smj-sl-card has `overflow: hidden`,
   and the button — which is a direct child of the card (not wrapped in
   .smj-sl-cb) — has its own `margin-top: 14px` plus padding, but the
   card has no bottom padding to contain it. The button's bottom edge
   sits outside the card's box and gets clipped.

   Also rolling back v6.4's sidebar inner-scroll which clipped the
   button when the sidebar fit the viewport.
   ════════════════════════════════════════════════════════════════════ */

/* (a) Give the seller card proper bottom breathing room so the
   View Seller Details button has space to render fully inside it. */
body.smj-pg-listing .smj-sl-wrap .smj-sl-card:has(.smj-seller-popup-btn){
    padding-bottom: 14px;
}

/* (b) Fallback for browsers without :has() support. Targets the same
   card by structural sibling pattern: any .smj-sl-card whose direct
   child is .smj-sl-seller (i.e. the seller card) gets bottom padding.
   This catches the same card without relying on :has(). */
body.smj-pg-listing .smj-sl-wrap .smj-sl-card > .smj-sl-seller{
    /* The seller info row: nothing to change here, but its presence
       lets us style the parent card via `+` selector below. */
}
body.smj-pg-listing .smj-sl-wrap .smj-sl-card > .smj-sl-seller + .smj-seller-popup-btn{
    /* The button is now properly spaced from the seller info AND has
       its own internal margin to keep distance from the card's bottom. */
    margin: 12px 14px 14px !important;
    width: calc(100% - 28px) !important;
}

/* (c) Lift the overflow:hidden constraint on cards that contain the
   popup button, just to be safe. Doing this on ALL cards would risk
   leaking gallery overflow, so we scope narrowly. */
body.smj-pg-listing .smj-sl-wrap .smj-sl-card:has(.smj-seller-popup-btn){
    overflow: visible;
}

/* (d) The button itself: explicit display + box-sizing so its rendered
   height is predictable, and ensure no other rule has shrunk it. */
body.smj-pg-listing .smj-sl-wrap .smj-seller-popup-btn{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}