/* ===========================
   Pills (categories then tags)
   =========================== */

/* Wrapper centers rows and controls vertical spacing (no gap used) */
.aya-pillwrap{
  margin:0 0 1rem;
  text-align:center; /* helps on very narrow viewports */
}

/* Each pill row */
.aya-pillbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* center the pills */
  width:100%;
  margin:0;                 /* keep spacing controlled below */
}

/* Pills (spacing via margin, not gap) */
.aya-pillbar .pill{
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:.45rem .9rem;
  margin:.3rem .3rem;       /* replaces gap between pills */
  background:#fff;
  color:#374151;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
.aya-pillbar .pill:hover{ border-color:#7F25D3; color:#7F25D3; }
.aya-pillbar .pill.is-active{ background:#7F25D3; border-color:#7F25D3; color:#fff; }

/* Tag row (secondary) — smaller + separator line above */
.aya-pillbar.is-secondary{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed #e5e7eb;  /* visual separator */
}
.aya-pillbar.is-secondary .pill{
  font-size:.85rem;
  padding:.35rem .7rem;
  margin:.25rem .25rem;           /* slightly tighter */
  opacity:.95;
}
/* Tag pill active color override */
.aya-pillbar.is-secondary .pill.is-active{
  background:#4B5563;
  border-color:#4B5563;
  color:#fff;
  box-shadow:0 4px 12px rgba(75,85,99,.18);
}
.aya-pillbar.is-secondary .pill:not(.is-active):hover{
  border-color:#4B5563;
  color:#4B5563;
}

/* ----- Mobile dropdowns for pill bars ----- */
.aya-filter-row{display:none;}             /* hidden by default */
.aya-filter-select{
  display:none;                           /* shown only on mobile */
  width:100%;
  max-width:320px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:.55rem .9rem;
  font-weight:600;
  background:#fff;
  color:#374151;
}

@media (max-width:720px){
  /* Hide category pill bar on mobile; keep tags visible */
  .aya-pillbar[data-kind="category"]{ display:none; }

  /* Row that holds the mobile selects, centered */
  .aya-filter-row{
    display:flex;
    justify-content:center;
    gap:.6rem;
    flex-wrap:wrap;
    margin:0 0 12px;
  }
  .aya-filter-select{ display:inline-block; }
}


/* ===========================
   Table shell
   =========================== */
.aya-table{ width:100%; border-collapse:separate; border-spacing:0; }
.aya-table thead th{
  background:#fafafa;
  font-weight:700;
  font-size:.96rem;
  padding:.9rem 1rem;
  text-align:left;
  color:#1f2937;
  border-bottom:1px solid #eef0f3;
  cursor:pointer;
  user-select:none;
}
/* Sort indicators (lint-friendly selectors) */
.aya-table .is-asc::after{ content:" ▲"; }
.aya-table .is-desc::after{ content:" ▼"; }

/* Rows as cards */
.aya-table tbody tr{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
  margin-top:14px;
}
.aya-table tbody tr:hover{ box-shadow:0 10px 24px rgba(17,24,39,.09); }
.aya-table tbody td{ padding:1.2rem 1rem; vertical-align:middle; border-bottom:0; }

/* Subtle vertical divider after the tool column */
.aya-table tbody tr td:nth-child(2){ border-right:1px dashed #eef0f3; }

/* Tool cell (logo + text) */
.aya-toolcell{ display:flex; align-items:flex-start; gap:1rem; }
.aya-logo{
  width:60px; height:60px; object-fit:contain;
  border-radius:10px; background:#fff; border:1px solid #eef0f3; padding:8px;
}
.aya-title{ font-weight:800; font-size:1.05rem; line-height:1.2; margin:2px 0 4px; color:#0f172a; }
.aya-oneliner{ font-size:.92rem; line-height:1.35; color:#4b5563; max-width:50ch; }

/* Numbers & price alignment */
.aya-table td[data-col="score"]{ font-weight:700; color:#111827; }
.aya-table td[data-col="price"]{ white-space:nowrap; color:#111827; }

/* CTA (button + read more stacked & centered) */
.aya-table td:last-child{ text-align:right; }
.aya-cta{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; }
.aya-table a.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:128px; height:42px; line-height:42px; padding:0 20px; border-radius:999px; font-weight:800;
  background:#7F25D3; color:#fff; border:none; text-decoration:none; box-shadow:0 8px 18px rgba(127,37,211,.24);
  transition:transform .06s, box-shadow .2s; white-space:nowrap;
}
.aya-table a.button:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(127,37,211,.30); background:#6a1ec7; }
.aya-readmore{ font-size:.85rem; color:#6b7280; text-decoration:none; line-height:1; }
.aya-readmore:hover{ color:#111827; text-decoration:underline; }

/* ===========================
   Mobile cards
   =========================== */
@media (max-width:720px){
  .aya-table thead{ display:none; }
  .aya-table tbody tr{ display:block; margin:14px 0; border-radius:14px; }
  .aya-table tbody td{ display:flex; justify-content:space-between; align-items:flex-start; padding:.85rem 1rem; border:none; }
  .aya-table tbody td::before{ content:attr(data-label); font-weight:700; color:#374151; margin-right:1rem; }
  .aya-logo{ width:54px; height:54px; }
  .aya-title{ font-size:1.02rem; }
  .aya-table td:last-child{ text-align:left; }
  .aya-cta{ align-items:flex-start; }
}