/* MXE Highlights – front-end styles (light-theme friendly, glass title) */

.mxe-highlights{ /* container populated by JS */ }

:root{
  /* defaults (overridden at runtime on container) */
  --page-bg:#f7fafc;
  --text:#0f172a;
  --muted:#475569;
  --feature-radius:22px;
  --radius:18px;
  --glass-blur:18px;
  --glass-tint-a:rgba(255,255,255,.70);
  --glass-tint-b:rgba(245,248,255,.55);
  --glass-border:rgba(2,6,23,.08);
  --teal:#2f7d6a;
  --blue:#2b6bb0;
  --card-bg:#ffffff;
  --card-br:rgba(2,6,23,.08);
  --shadow:0 12px 26px rgba(2,6,23,.06);
  --auction:#10b981;
  --used:#ef4444;
  --titlebar-width:360px;
  --titlebar-text:#0f172a;
  --titlebar-subtle:#475569;
  --title-grad-start:#0f766e;
  --title-grad-end:#2b6bb0;
  --title-grad-angle:90deg;
}

.mxe-wrap{max-width:1200px;margin:28px auto;padding:0 14px}
.mxe-feature{
  position:relative; display:grid; grid-template-columns:var(--titlebar-width) 1fr;
  border-radius:var(--feature-radius); overflow:hidden;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  box-shadow:0 24px 48px rgba(2,6,23,.06);
}

/* Rail behind the glass title */
.mxe-rail{grid-column:1 / -1; grid-row:1; z-index:1; position:relative; padding:18px 56px; overflow:hidden}
.mxe-track{display:flex; gap:16px; will-change:transform; cursor:grab}

.mxe-card{
  position:relative; flex:0 0 260px; height:300px;
  background:var(--card-bg); border:1px solid var(--card-br);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; transition:transform .18s, box-shadow .18s;
}
.mxe-card:hover{transform:translateY(-4px); box-shadow:0 20px 38px rgba(2,6,23,.10)}
.mxe-card a{display:block;height:100%;color:inherit;text-decoration:none}

.mxe-bg{position:absolute; inset:0; z-index:0}
.mxe-bg img,.mxe-bg video{width:100%; height:100%; object-fit:cover; display:block}

.mxe-ov{
  position:absolute; inset:auto 0 0 0; z-index:1; padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.72) 85%);
  color:#fff;
}
.mxe-title{font-weight:800;margin:0 0 4px;font-size:15px}
.mxe-desc{margin:0;opacity:.9;font-size:13px}
.mxe-price{margin-top:8px;font-weight:800}

.mxe-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  padding:6px 10px; border-radius:999px; color:#fff; font-weight:800; font-size:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.12)
}
.mxe-badge.auction{background:var(--auction)}
.mxe-badge.used{background:var(--used)}

/* Titlebar = real frosted glass (light) */
.mxe-titlebar{
  grid-column:1; grid-row:1; z-index:2;
  position:relative; color:var(--titlebar-text);
  display:flex; align-items:center; padding:26px;
  border-right:1px solid var(--glass-border);
  background:linear-gradient(180deg,var(--glass-tint-a),var(--glass-tint-b));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset -28px 0 54px rgba(2,6,23,.06);
}
.mxe-eyebrow{display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--titlebar-subtle); margin-bottom:6px;}
.mxe-titlebar h2{margin:0 0 6px;font-size:clamp(24px,3.6vw,40px);line-height:1.04; color:var(--titlebar-text)}
.mxe-titlebar p{margin:0;color:var(--titlebar-subtle);font-size:clamp(13px,1.8vw,16px)}

.mxe-gradient-text{
  background-image: linear-gradient(var(--title-grad-angle), var(--title-grad-start), var(--title-grad-end));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .mxe-gradient-text{ color: var(--titlebar-text); }
}

/* Arrows */
.mxe-nav{position:absolute; inset:0; pointer-events:none; z-index:1}
.mxe-arrow{
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(2,6,23,.08);
  background:rgba(255,255,255,.75); color:#111827; font-size:18px; cursor:pointer;
  display:grid; place-items:center; box-shadow:0 10px 20px rgba(2,6,23,.08);
  transition:background .2s ease, box-shadow .2s ease;
}
.mxe-arrow:hover{background:#fff; box-shadow:0 12px 24px rgba(2,6,23,.12)}
.mxe-prev{ left: calc(var(--titlebar-width) + 10px) }
.mxe-next{ right:10px }

@media (max-width:768px){
  .mxe-feature{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .mxe-titlebar{grid-column:1;grid-row:1;border-right:none;border-bottom:1px solid var(--glass-border)}
  .mxe-rail{grid-column:1;grid-row:2;padding:12px 14px}
  .mxe-card{flex-basis:240px;height:280px}
  .mxe-prev{left:10px}
  .mxe-arrow{display:none}
}
/* Force white overlay text inside plugin */
.mxe-highlights[data-mxe="1"] .mxe-ov { color:#fff !important; }

.mxe-highlights[data-mxe="1"] .mxe-title,
.mxe-highlights[data-mxe="1"] .mxe-desc,
.mxe-highlights[data-mxe="1"] .mxe-price {
  color:#fff !important;
  opacity:1 !important;          /* remove any gray fade */
  text-shadow:0 2px 6px rgba(0,0,0,.65); /* readability on dark/bright photos */
}