/* =========================================================
   Category List - Shared Frontend Core
   Template-specific color/layout rules are loaded separately.
========================================================= */
.clist-wrap,
.clist-modal-box {
  --clist-primary: #7c3aed;
  --clist-secondary: #2563eb;
  --clist-accent: #10b981;
  --clist-bg: #ffffff;
  --clist-item-bg: #ffffff;
  --clist-text: #0f172a;
  --clist-muted: #64748b;
  --clist-border: #e8edf5;
  --clist-radius: 22px;
  --clist-row-radius: 16px;
  --clist-gap: 12px;
  --clist-shadow: 0 18px 45px rgba(15,23,42,.08);
  box-sizing: border-box;
  color: var(--clist-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.clist-wrap *,
.clist-modal *,
.clist-modal-box * { box-sizing: border-box; }

.clist-wrap { 
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  padding: 22px;
  border: 1px solid var(--clist-border) !important;
  border-radius: var(--clist-radius);
  background: var(--clist-bg) !important;
  box-shadow: var(--clist-shadow);
}

.clist-wrap .clist-head,
.clist-modal-box .clist-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
}

.clist-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.clist-title-copy { min-width: 0; }
.clist-kicker { display:block; margin:0 0 4px; color:var(--clist-muted)!important; font-size:10px; font-weight:900; letter-spacing:.11em; line-height:1; text-transform:uppercase; }

.clist-wrap .clist-title-wrap h2,
.clist-modal-box .clist-title-wrap h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--clist-text) !important;
  font-family: inherit !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

.clist-title-icon {
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:14px;
  background:linear-gradient(135deg,var(--clist-primary),var(--clist-secondary))!important;
  color:#fff!important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--clist-primary) 26%,transparent);
}
.clist-title-icon img,.clist-title-icon svg { display:block;width:25px;height:25px;object-fit:contain; }
.clist-title-icon .dashicons { width:25px;height:25px;font-size:25px;line-height:25px; }

.clist-view-all {
  flex:0 0 auto;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0;
  padding:0 15px;
  border:1px solid color-mix(in srgb,var(--clist-primary) 24%,var(--clist-border))!important;
  border-radius:999px;
  background:color-mix(in srgb,var(--clist-bg) 90%,#fff)!important;
  color:var(--clist-primary)!important;
  font:800 13px/1 inherit!important;
  text-decoration:none!important;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.clist-view-all:hover { transform:translateY(-1px); box-shadow:0 12px 25px color-mix(in srgb,var(--clist-primary) 18%,transparent); }
.clist-view-all .dashicons { width:16px;height:16px;font-size:16px;line-height:16px; }

.clist-items,.clist-modal-items { display:grid; gap:var(--clist-gap); }
.clist-item {
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:14px;
  border:1px solid var(--clist-border)!important;
  border-radius:var(--clist-row-radius);
  background:var(--clist-item-bg)!important;
  color:var(--clist-text)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.055);
  overflow:hidden;
  text-decoration:none!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease;
}
.clist-item:hover { transform:translateY(-2px); color:var(--clist-text)!important; box-shadow:0 17px 34px rgba(15,23,42,.10); }

.clist-icon {
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(135deg,var(--clist-primary),var(--clist-secondary))!important;
  color:#fff!important;
  box-shadow:0 10px 21px color-mix(in srgb,var(--clist-primary) 23%,transparent);
}
.clist-icon .dashicons { width:24px;height:24px;font-size:24px;line-height:24px;color:currentColor!important; }

.clist-info { position:relative;z-index:2;flex:1 1 auto;min-width:0; }
.clist-info strong { display:block;overflow:hidden;margin:0!important;color:var(--clist-text)!important;font:900 17px/1.18 inherit!important;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap; }
.clist-info small { display:block;overflow:hidden;margin:4px 0 0!important;color:var(--clist-muted)!important;font:700 12px/1.2 inherit!important;text-overflow:ellipsis;white-space:nowrap; }

.clist-count { position:relative;z-index:2;flex:0 0 auto;min-width:44px;height:38px;display:grid;place-items:center;padding:0 8px;border-radius:12px;background:color-mix(in srgb,var(--clist-primary) 10%,var(--clist-item-bg))!important;color:var(--clist-primary)!important;font:900 15px/1 inherit!important; }
.clist-arrow { position:relative;z-index:2;flex:0 0 auto;color:var(--clist-muted)!important;display:grid;place-items:center; }
.clist-arrow .dashicons { width:18px;height:18px;font-size:18px;line-height:18px; }
.clist-rank { position:relative;z-index:2;flex:0 0 auto;color:var(--clist-primary)!important;font:900 14px/1 inherit!important;letter-spacing:.04em; }
.clist-empty { padding:16px;border:1px dashed var(--clist-border);border-radius:var(--clist-row-radius);color:var(--clist-muted);text-align:center; }

.clist-featured-layout { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:var(--clist-gap); }
.clist-featured-stack { display:grid;gap:var(--clist-gap);align-content:start; }

/* Mobile sizing lives entirely in mobile-premium.css (782px / 390px breakpoints),
   loaded after this file, so every template scales from one consistent set of
   breakpoints instead of two overlapping ones with mismatched values. */