.mcj-song-table,
.mcj-track-filters,
.mcj-results-footer
{
  --white: var(--bricks-color-pjtzlr);
  --purple: var(--bricks-color-ujpclw);
  --purple-light: var(--bricks-color-izgnga);
  --card: var(--bricks-color-gpjgof, #1b1b1b);
  color: var(--white);
}

/* ===== Songs table (global) ===== */
.mcj-tracks {width: 100%;}
.mcj-song-table{ border-radius:16px; overflow:hidden; }


/* rows */
.mcj-song-row{
  display:grid;
  grid-template-columns:72px 1fr 140px;
  gap:16px;
  align-items:center;
  padding:12px 16px;
  background:var(--card);
  border-bottom:1px solid rgba(255,255,255,.06);
  margin: 10px 0;
}

/* art + play */
.mcj-art-wrap{ position:relative; width:56px; height:56px; border-radius:8px; overflow:hidden; background:#000; }
.mcj-art-wrap img{ width:100%; height:100%; object-fit:cover; }
.mcj-play-btn{ position:absolute; inset:auto 0 0 0; margin:auto; top:0; bottom:0; width:36px; height:36px; border-radius:999px; border:0; background:transparent; color:#fff; cursor:pointer; }
.mcj-play-btn i{ font-size:28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* title line (force same colors as band page) */
.col.col-titlemeta{ display:flex; flex-direction:column; align-items:flex-start; gap:0px; flex-wrap:wrap; color:#fff; }
.mcj-song-title{ font-weight:600; color:#fff; }
.mcj-sep{ opacity:.5; color:#fff; }
.mcj-song-len, .mcj-song-album{ opacity:.85; color:#fff; }

/* buy column */
.col.col-buy .button{ background:var(--purple); color:#fff; border-radius:999px; padding:8px 14px; }
.mcj-song-row:hover .col.col-buy .button { background:var(--purple-light);}


/* in-cart pill */
.mcj-in-cart{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:#1e8e3e; color:#fff; }

/* hide Woo "View cart" bubble for this layout */
.col.col-buy .added_to_cart { display:none !important; }

/* persist UI by data attribute (see JS + PHP) */
.mcj-song-row[data-incart="1"] .mcj-add-to-cart{ display:none !important; }
.mcj-song-row[data-incart="1"] .mcj-in-cart{ display:inline-flex !important; }


/* /elements/css/mcj-tracks.css (append) */
.mcj-track-filters{
  display:grid;
  grid-template-columns: 1fr 200px 200px 140px 120px 120px auto auto;
  gap:.5rem;
  align-items:center;
  margin: .5rem 0 1rem;
}

/* Push genres/length below the title on narrow screens */
  .mcj-song-row .mcj-title-line{
    display: flex;
    flex-wrap: wrap;           /* allow wrapping to next row */
    gap: 0px 6px;
  }
  .mcj-song-row .mcj-song-title{
    flex: 0 0 100%;            /* title takes whole row */
    margin-bottom: 2px;
  }
  .mcj-song-row .mcj-sep{      /* drop the tiny pipes/dashes on mobile */
    display: none;
  }
  /* optional: slightly tone down the subline */
  .mcj-song-row .mcj-genres,
  .mcj-song-row .mcj-song-len{
    opacity: .9;
  }

@media (max-width: 768px){
  .mcj-track-filters{
    grid-template-columns: 1fr 1fr;
  }
  .mcj-track-filters .mcj-apply,
  .mcj-track-filters .mcj-clear{
    justify-self:start;
  }
}

/* === MCJ Track Browser — match Vendor Browser === */
.mcj-tracks-results,
.mcj-track-filters{ width:100% }

.mcj-track-filters{
  --mcj-surface:#191a1c;
  --mcj-border:#2b2c2f;
  --mcj-text:#f1f1f1;
  --mcj-muted:#b8b8be;
  --mcj-accent:#7c5fff;
  --mcj-radius:14px;
  --mcj-gap:12px;
  --mcj-pad-x:20px;

  display:grid;
  grid-template-columns: 1fr 180px 180px 120px min-content; /* search, band, genre, per-page, clear */
  gap:var(--mcj-gap);
  align-items:center;
  margin:12px 0 20px;
  color-scheme:dark;
}
@media (max-width:1024px){
  .mcj-track-filters{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .mcj-track-filters{ grid-template-columns:1fr }
}

.mcj-track-filters input[type="search"],
.mcj-track-filters select,
.mcj-per-page select{
  width:100%;
  background:var(--mcj-surface);
  color:var(--mcj-text);
  border:1px solid var(--mcj-border);
  border-radius:var(--mcj-radius);
  padding:8px calc(var(--mcj-pad-x) + 18px) 8px var(--mcj-pad-x);
  min-height:36px;
  line-height:1.2;
  font-size:14px;
  outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
}
.mcj-track-filters input::placeholder{ color:var(--mcj-muted) }

.mcj-track-filters input:focus,
.mcj-track-filters select:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(124,95,255,.25);
}

.mcj-track-filters .mcj-clear{
  justify-self:end;
  background:var(--bricks-color-izgnga);
  color:#fff;
  border:1px solid var(--bricks-color-izgnga);
  border-radius:999px;
  padding:8px 14px;
  line-height:1;
  font-size:14px;
  cursor:pointer;
}
@media (max-width:1024px){
  .mcj-track-filters .mcj-clear{ justify-self:stretch }
}

/* Results footer */
.mcj-tracks-results .mcj-results-count{
  margin-top:12px; color:#b8b8be; font-size:14px;
}

/* Optional small spinner */
.mcj-song-table .mcj-loading{ padding:12px; color:#b8b8be; }


.mcj-results-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  padding-top:8px;
}

.mcj-results-count{
  color:#b8b8be;
  font-size:14px;
}

.mcj-per-page{
  display:flex;
  align-items:center;
  gap:8px;
}

.mcj-perpage-label{
  color:#b8b8be;
  font-size:14px;
}

@media(max-width:640px){
  .mcj-results-footer{flex-direction:column;align-items:stretch;gap:8px}
  .mcj-per-page{align-self:flex-end}
}

/* ================================
   Footer: Results per page (fix)
   ================================ */

/* 1) Stop inheriting 100% width from the filters */
.mcj-results-footer .mcj-per-page select.mcj-perpage-select{
  width: auto;                 /* not full width */
  min-width: 86px;             /* keep width steady as value changes */
  box-sizing: border-box;
  
  /* match dark UI */
  background: #191a1c;
  color: #f1f1f1;
  border: 1px solid #2b2c2f;
  border-radius: 999px;

  /* compact height to match your top inputs */
  padding: 6px 36px 6px 12px;
  min-height: 32px;
  line-height: 1.2;
  font-size: 14px;

  /* show custom arrow consistently */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}

/* 2) Focus ring like the filters */
.mcj-results-footer .mcj-per-page select.mcj-perpage-select:focus{
  border-color: var(--purple, #7c5fff);
  box-shadow: 0 0 0 3px rgba(124,95,255,.25);
}

/* 3) Footer layout polish */
.mcj-results-footer{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 8px;
}

.mcj-results-footer .mcj-per-page{
  display: flex;
  align-items: center;
  gap: 10px;
}

.mcj-results-footer .mcj-perpage-label{
  color: #b8b8be;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 640px){
  .mcj-results-footer{ flex-direction: column; align-items: stretch; gap: 8px; }
  .mcj-results-footer .mcj-per-page{ align-self: flex-end; }
}

.mcj-title-line{ display:flex; align-items:center; gap:8px; }
.mcj-meta-line{ margin-top:0px; opacity:.9; display:flex; flex-wrap:wrap; gap:8px; }
.mcj-meta-line .mcj-dash{ opacity:.7; }
.mcj-meta-line .mcj-band em{ font-style:italic; }

/* === MCJ Tracks: 2-column layout =================================== */
.mcj-song-table.is-2col{
  display: grid;
  grid-template-columns: 1fr 1fr;           /* two equal columns */
  gap: var(--mcj-row-gap, 10px);            /* column gap */
  border-radius: 16px;                       /* keep your rounding */
}

.mcj-song-table.is-2col .mcj-table-col{
  display: flex;
  flex-direction: column;
  gap: var(--mcj-row-gap, 10px);            /* vertical spacing between rows */
}

/* Mobile: collapse to one column automatically */
@media (max-width: 768px){
  .mcj-song-table.is-2col{
    grid-template-columns: 1fr;
  }
}

/* Do NOT dim rows without a preview */
.mcj-tracks .mcj-song-row[data-debug-preview="missing"],
.mcj-tracks .mcj-song-row[data-preview=""],
.mcj-tracks .mcj-song-row.mcj-no-preview {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* If any disabled play buttons slip in, don't grey them either */
.mcj-tracks .mcj-play-btn[disabled] {
  opacity: 1 !important;
  cursor: default !important;
}

/* ---------- Compact layout for small screens ---------- */
@media (max-width: 600px) {
  .mcj-song-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap: 8px 12px;          /* row/col gap */
    padding: 14px 12px;
  }

  /* Thumbnail / play */
  .mcj-song-row .col-art{
    width: 56px;            /* tighten art */
    flex: 0 0 56px;
  }
  .mcj-song-row .mcj-art-wrap img{
    width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  }

  /* Title + meta block sits to the right of art and can wrap */
  .mcj-song-row .col-titlemeta{
    flex: 1 1 calc(100% - 68px);
    min-width: 0;           /* allow text to shrink without overflowing */
  }
  .mcj-song-row .mcj-title-line{ margin-bottom: 0px; }
  .mcj-song-row .mcj-song-title{ line-height: 1.2; }
  /* Optional: hide the tiny pipe/dash separators on narrow screens */
  .mcj-song-row .mcj-sep{ display:none; }

  /* Move the CTA below; make it easy to tap */
  .mcj-song-row .col-buy{
    order: 3;               /* stack after title/meta */
    width: 100%;
    display: flex;
    justify-content: flex-start;   /* or center/right if you prefer */
    margin-top: 4px;
  }
  .mcj-song-row .mcj-add-to-cart,
  .mcj-song-row .mcj-in-cart{
    width: 100%;
    text-align: center;
    padding: 10px 14px;     /* bigger tap target */
    border-radius: 999px;   /* keep pill look */
  }

  /* Center the "In cart" pill text/icon on mobile */
  .mcj-song-row .mcj-in-cart{
    display: flex;             /* lets us center perfectly */
    justify-content: center;
    align-items: center;
    text-align: center;        /* fallback */
    width: 100%;               /* already full width from earlier rules */
  }

  .mcj-song-row .mcj-add-to-cart{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Optional extra tightening for very small phones */
@media (max-width: 380px){
  .mcj-song-row .mcj-song-title{ font-size: 0.95em; }
  .mcj-song-row .mcj-genres,
  .mcj-song-row .mcj-song-len{ font-size: 0.9em; }
}