/* iso-listing-card.css — premium TIMELINE marketplace product card.
 * Restyles the native "added a listing" embed (image + iso-mk-card details, built by iso-pills.js)
 * into a polished shoppable card. iso-listing-card.js adds the .iso-lc* hook classes + carousel/
 * trust/CTA markup; this file is pure presentation. Targets STABLE iso-* classes only (survives a
 * MetaFox rebuild). MOBILE = stacked (image on top). DESKTOP (>=760px) = horizontal (image left). */

/* ── card frame ─────────────────────────────────────────────────────────── */
.iso-lc{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(15,23,42,.06);
  transition:box-shadow .16s ease,transform .16s ease;
}
.iso-lc:hover{box-shadow:0 10px 28px rgba(15,23,42,.13)}

/* ── media (image / carousel) ───────────────────────────────────────────── */
.iso-lc-media{position:relative;display:block;margin:0!important;background:#eef1f5;overflow:hidden}
.iso-lc-media img{display:block;width:100%;height:100%;object-fit:cover}
/* the native embed wraps the img in a 1:1 MuiImage box — keep it a clean square hero */
.iso-lc-media .MuiImage-root{width:100%!important;height:100%!important;border-radius:0!important}

/* overlay badges (condition / shipping / sale / popular) moved onto the image */
.iso-lc-badges{
  position:absolute;top:10px;left:10px;right:10px;z-index:3;
  display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;
}
.iso-lc-badges .iso-pill{
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  backdrop-filter:saturate(1.2);
}

/* photo counter + carousel dots */
.iso-lc-count{
  position:absolute;bottom:10px;right:10px;z-index:3;
  background:rgba(17,24,39,.6);color:#fff;font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:999px;letter-spacing:.3px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.iso-lc-dots{
  position:absolute;bottom:10px;left:0;right:0;z-index:3;
  display:flex;justify-content:center;gap:6px;pointer-events:none;
}
.iso-lc-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.4);transition:all .15s ease}
.iso-lc-dots span.on{background:#fff;width:18px;border-radius:3px}
/* prev/next hit-zones (desktop hover) */
.iso-lc-nav{position:absolute;top:0;bottom:0;width:38%;z-index:2;cursor:pointer;border:0;background:transparent;opacity:0;transition:opacity .15s ease}
.iso-lc-nav.prev{left:0}.iso-lc-nav.next{right:0}
.iso-lc-media:hover .iso-lc-nav{opacity:1}
.iso-lc-nav::before{content:"";position:absolute;top:50%;left:12px;width:26px;height:26px;transform:translateY(-50%);border-radius:50%;background:rgba(17,24,39,.5) center/14px no-repeat}
.iso-lc-nav.next::before{left:auto;right:12px}
.iso-lc-nav.prev::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='white' stroke-width='2.5' viewBox='0 0 24 24'><path d='M15 18l-6-6 6-6'/></svg>")}
.iso-lc-nav.next::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='white' stroke-width='2.5' viewBox='0 0 24 24'><path d='M9 18l6-6-6-6'/></svg>")}

/* ── body (details) ─────────────────────────────────────────────────────── */
/* The native .iso-mk-card is a flex column whose children carry order:1..5
   (title/pill-row/price/desc/stat). Our injected content sits in ONE flex item
   placed after them. We keep the existing green price + native description. */
.iso-lc .iso-mk-card{padding:12px 14px 14px!important}
/* pills were moved onto the image → hide the (now empty) in-body row */
.iso-lc .iso-mk-card>.iso-pill-row{display:none!important}

/* our body: trust + CTA (+ fallback desc), ordered after the native rows */
.iso-lc-body{order:6;width:100%}

/* fallback description (only injected when the embed rendered none) */
.iso-lc-desc{
  margin:8px 0 0;color:#5b6675;font-size:13px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* trust strip — outlined pill chips */
.iso-lc-trust{
  display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;
}
.iso-lc-trust span{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  border:1px solid rgba(0,0,0,.14);border-radius:999px;
  padding:6px 12px;background:rgba(0,0,0,.015);
  color:#344054;font-size:12px;font-weight:700;
}
.iso-lc-trust b{font-size:13px;line-height:1}

/* CTA row */
.iso-lc-cta{display:flex;gap:9px;margin:12px 0 0}
.iso-lc-btn{
  flex:1 1 0;min-width:0;text-align:center;cursor:pointer;border:0;
  font-size:13.5px;font-weight:800;letter-spacing:.2px;padding:11px 10px;border-radius:12px;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.iso-lc-btn:hover{transform:translateY(-1px)}
.iso-lc-view{
  color:#fff;
  background:radial-gradient(120% 85% at 50% 0%,rgba(255,255,255,.30),rgba(255,255,255,0) 55%),linear-gradient(140deg,#56D8F8,#2EA5F7 52%,#0A66E8);
  box-shadow:0 8px 18px -7px rgba(10,102,232,.6);
}
.iso-lc-view:hover{box-shadow:0 12px 22px -6px rgba(10,102,232,.7)}
.iso-lc-buy{
  color:#0a8a3e;background:#eafaf1;border:1.5px solid #12b76a;
}
.iso-lc-buy:hover{background:#dff6e8}
.iso-lc-btn svg{width:17px;height:17px}

/* ── DESKTOP: horizontal (image left, details right) ────────────────────── */
@media(min-width:760px){
  .iso-lc{display:grid;grid-template-columns:250px 1fr;align-items:center}
  /* media stretches to the full card height; the image covers it. If MetaFox's 1:1 ratio box
     resists stretching, the unfilled area falls back to the CARD background (transparent),
     never the grey placeholder. */
  .iso-lc-media{align-self:stretch;min-height:250px;background:transparent}
  .iso-lc-media>.MuiBox-root,
  .iso-lc-media .MuiImage-root,
  .iso-lc-media .MuiImage-root>div{height:100%!important;min-height:100%!important}
  .iso-lc-media img{width:100%!important;height:100%!important;object-fit:cover!important}
  .iso-lc .iso-mk-card{padding:16px 20px!important}
}

/* ── dark mode ──────────────────────────────────────────────────────────────
   Three signals, ALL styled identically so the card is never left white-with-light-text during
   the jet theme's async apply: .iso-jet-on (<html>, this site's definitive dark switch),
   :root[data-theme="dark"] (the theme toggle), and @media(prefers-color-scheme:dark). Each sets
   the dark card bg + light title/desc + light-outlined trust chips + green buy button. */
.iso-jet-on .iso-lc,
:root[data-theme="dark"] .iso-lc{background:#101317;border-color:rgba(255,255,255,.1)}
.iso-jet-on .iso-lc .iso-mk-title a,
:root[data-theme="dark"] .iso-lc .iso-mk-title a{color:#e8eef6!important}
.iso-jet-on .iso-lc-desc,
:root[data-theme="dark"] .iso-lc-desc{color:#9aa7b6}
.iso-jet-on .iso-lc-trust span,
:root[data-theme="dark"] .iso-lc-trust span{
  border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#cbd5e1;
}
.iso-jet-on .iso-lc-buy,
:root[data-theme="dark"] .iso-lc-buy{background:rgba(18,183,106,.14);color:#3ddc8a}
.iso-jet-on .iso-lc-buy:hover,
:root[data-theme="dark"] .iso-lc-buy:hover{background:rgba(18,183,106,.22)}

@media(prefers-color-scheme:dark){
  .iso-lc{background:#101317;border-color:rgba(255,255,255,.1)}
  .iso-lc .iso-mk-title a{color:#e8eef6!important}
  .iso-lc-desc{color:#9aa7b6}
  .iso-lc-trust span{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#cbd5e1}
  .iso-lc-buy{background:rgba(18,183,106,.14);color:#3ddc8a}
  .iso-lc-buy:hover{background:rgba(18,183,106,.22)}
}