/* =====================================================================
   NexShelfy shared components  (loaded on every page, before nexshelfy-brand.css)
   ---------------------------------------------------------------------
   The homepage design is the reference. These rules give every other page the
   same typography, section headings and cards, so a change here (or in
   includes/ns-components.php) is a site-wide change.
   Colours come from the tokens in nexshelfy-brand.css.
   ===================================================================== */

:root{
  --txt-ink:#102A43;
  --txt-body:#39435B;
  --txt-muted:#69758B;
  --line:#E3E7F0;
}

/* ---------- 1. typography: same font and text colours as the homepage ---------- */
html body.cp-page,
html body.nxpro-home{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  color:var(--txt-ink);
}
button,input,select,textarea{font-family:inherit}
html body.cp-page :is(h1,h2,h3,h4){font-family:inherit}

/* ---------- 2. section headings: same as the homepage ".nxpro-heading" ---------- */
:is(.ns-section-title,.cp-section-heading){
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:34px;
}
:is(.ns-section-title,.cp-section-heading) h2{margin:10px 0 8px;font-size:40px;line-height:1.02;letter-spacing:-.045em;font-weight:700}
:is(.ns-section-title,.cp-section-heading) p{margin:0;max-width:650px;color:var(--txt-muted);font-size:13px;line-height:1.7}
:is(.ns-section-title,.cp-section-heading)>a{color:var(--brand-strong,#8F51D6);text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap}
:is(.ns-section-title,.cp-section-heading)>a:hover{color:var(--brand-deep,#6A38BE)}
@media(max-width:700px){
  :is(.ns-section-title,.cp-section-heading){display:block}
  :is(.ns-section-title,.cp-section-heading) h2{font-size:31px}
  :is(.ns-section-title,.cp-section-heading)>a{display:inline-block;margin-top:12px}
}

/* ---------- 3. card grids ---------- */
.nxpro-product-grid,.nxpro-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.nxpro-collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;align-items:stretch}
.ns-card-grid{width:min(1180px,calc(100% - 40px));margin:0 auto 54px}
@media(max-width:1000px){
  .nxpro-product-grid,.nxpro-blog-grid,.nxpro-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .nxpro-product-grid,.nxpro-blog-grid,.nxpro-collection-grid{grid-template-columns:1fr}
  .ns-card-grid{width:min(100% - 28px,1180px)}
}
.ns-card-grid>.cp-empty{grid-column:1/-1;text-align:center;padding:38px 20px;color:var(--txt-muted)}

/* ---------- 4. cards: product / resource / blog / collection ---------- */
.nxpro-product,.nxpro-article,.nxpro-collection{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;
  box-shadow:0 10px 26px rgba(31,42,70,.065);color:inherit;text-decoration:none;
}
html body .nxpro-product[hidden],html body .nxpro-article[hidden]{display:none!important}

/* covers */
.nxpro-cover,.nxpro-article-cover{display:block;position:relative;flex:none;height:190px;overflow:hidden;background:#eef1fa}
.nxpro-cover img,.nxpro-article-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.nxpro-product:hover .nxpro-cover img,.nxpro-article:hover .nxpro-article-cover img{transform:scale(1.045)}
.nxpro-cover-fallback{display:block;width:100%;height:100%}
.nxpro-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,16,35,.12));pointer-events:none}
.nxpro-type{
  position:absolute;z-index:2;left:12px;top:12px;padding:6px 9px;border-radius:8px;
  background:#fff;border:1px solid #E8EAF1;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
/* eye badge (position, size and blink are set in nexshelfy-brand.css) */
.nxpro-action--eye{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;pointer-events:none}

/* bodies */
.nxpro-product-body,.nxpro-article-body{padding:17px}
.nxpro-product-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.nxpro-free{font-size:8px;font-weight:800;padding:5px 7px;border-radius:7px}
.nxpro-save{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
.nxpro-save svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nxpro-product h3,.nxpro-article h3{margin:0 0 7px;font-size:15px;letter-spacing:-.02em;font-weight:700}
.nxpro-article h3{margin-top:11px}
.nxpro-product h3 a,.nxpro-article h3 a{color:var(--txt-ink);text-decoration:none}
.nxpro-product p,.nxpro-article p{margin:0;color:#758096;font-size:10px;line-height:1.6}
.nxpro-product-foot,.nxpro-article-foot{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:12px;border-top:1px solid #eef0f5}
.nxpro-downloads{font-size:8px;color:#8a93a5}
.nxpro-downloads i{margin-right:3px}
.nxpro-get{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:8px;text-decoration:none;font-size:8px;font-weight:800}
.nxpro-category{display:inline-block;padding:5px 8px;border-radius:7px;font-size:8px;font-weight:800}
.nxpro-article-foot{color:#8992a4;font-size:8px}
.nxpro-article-actions{display:flex;align-items:center;gap:10px}
.nxpro-article-actions .nxpro-action{
  display:grid;place-items:center;width:30px;height:30px;min-width:30px;padding:0;border:0;border-radius:10px;
  background:#fff;box-shadow:0 5px 12px rgba(16,42,67,.08);cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.nxpro-article-actions .nxpro-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* collections */
.nxpro-collection{padding:24px 22px 20px}
.nxpro-collection-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;font-size:22px}
.nxpro-collection h3{margin:18px 0 8px;font-size:16px;letter-spacing:-.02em;font-weight:700;color:var(--txt-ink)}
.nxpro-collection p{margin:0 0 16px;color:#6B7390;font-size:11px;line-height:1.6}
.nxpro-count{font-size:10px;font-weight:800}

/* ---------- 5. listing pages that now use the shared cards ---------- */
.ns-card-grid.nxpro-product-grid,.ns-card-grid.nxpro-blog-grid,.ns-card-grid.nxpro-collection-grid{margin-bottom:54px}

/* related strips that sit inside a narrower article column */
.nxpro-blog-grid.in-column{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}