/* =====================================================================
   NexShelfy brand layer  (loaded LAST on every page that uses the shared shell)
   ---------------------------------------------------------------------
   1. Edit the tokens below when the real colour palette arrives.
      Everything that is "purple for now" reads from these variables.
   2. Only the components listed in this file were restyled; everything
      else on the site is untouched.
   ===================================================================== */

:root:root{
  /* ---- palette (from the brand infographic) ---- */
  --pal-purple:#A977F0;       /* the light purple of the palette (contrast colour) */
  --pal-yellow:#FFE670;       /* SECONDARY (pastel yellow) */
  --pal-lime:#AED056;
  --pal-teal:#5FA183;
  --pal-pink:#FC989A;
  --pal-terracotta:#EC8D71;
  --pal-orange:#FF924C;

  /* ---- brand tokens ---- */
  /* PRIMARY = the dark purple. LIGHT purple is only used as its contrast partner
     (gradient ends, tints, glows, pills, focus rings). */
  --brand-primary:#8F51D6;
  --brand-light:var(--pal-purple);
  --brand-primary-2:var(--pal-purple);
  --brand-primary-3:#D9C5FA;
  --brand-strong:var(--brand-primary);   /* kept as an alias so older rules still work */
  --brand-deep:#6A38BE;
  --brand-ink:#1B1230;
  --on-accent:#FFFFFF;        /* text/icon colour on accent fills (white, as requested) */
  --brand-soft:#F5EFFE;
  --brand-line:#E4D6FB;
  --brand-secondary:var(--pal-yellow);
  --brand-secondary-soft:#FFF8D2;
  --brand-footer:#14111F;
  --brand-section-bg:#F8F5FF;

  /* ---- fixed action colours used on every heart / save / share button ---- */
  --action-heart:#FF3734;
  --action-save:#FDCE04;
  --action-share:#2F6BFF;

  /* ---- per-element accent slots. Each card / tile reads only its slot. ---- */
  --card-accent-1:var(--brand-primary);
  --card-accent-2:var(--pal-yellow);
  --card-accent-3:var(--pal-teal);
  --card-accent-4:var(--pal-orange);
  --card-accent-5:var(--pal-pink);
  --card-accent-6:var(--pal-lime);
  --stat-accent-1:var(--brand-primary);
  --stat-accent-2:var(--pal-yellow);
  --stat-accent-3:var(--pal-teal);
  --stat-accent-4:var(--pal-orange);

  /* ---- the admin "sand" theme (orange) is injected into :root by PHP and JS;
          these !important values keep the public site on the brand colour ---- */
  --ns-accent:var(--brand-primary)!important;
  --ns-accent-2:var(--brand-primary-2)!important;
  --cp-accent:var(--brand-primary)!important;
  --cp-accent-2:var(--brand-primary-2)!important;
  --accent:var(--brand-primary)!important;
}

/* =====================================================================
   1. LOGO  (same mark as the favicon, everywhere)
   ===================================================================== */
.ns-global-brand>img.ns-logo-mark,.ns-logo-mark{width:32px;height:32px;border-radius:10px;object-fit:contain;background:#fff;display:block}
.ns-global-footer .ns-global-brand>img.ns-logo-mark{box-shadow:none}

/* =====================================================================
   2. HEADER  - active nav text and Saved counter use the brand colour
   ===================================================================== */
.ns-global-nav a:hover,
.ns-global-nav a.active,
.ns-global-mobile-nav a.active{color:var(--brand-strong)!important;background:var(--brand-soft)!important}
.ns-global-nav a.active{box-shadow:inset 0 0 0 1px var(--brand-line)!important}
.ns-header-actions .ns-header-btn .ns-action-count,
.ns-global-actions .ns-header-btn .ns-action-count{background:var(--brand-primary)!important;color:var(--on-accent)!important}
.ns-mobile-dock em{background:var(--brand-primary)!important;color:var(--on-accent)!important}
.ns-mobile-dock a.active,.ns-mobile-dock button:active{color:var(--brand-strong)!important}

/* =====================================================================
   3. STATS ROW  - one colour family, white icons
   ===================================================================== */
:is(.nxpro-home,body) .nxpro-stat:nth-child(1) .nxpro-stat-icon{--stat-c:var(--stat-accent-1)}
:is(.nxpro-home,body) .nxpro-stat:nth-child(2) .nxpro-stat-icon{--stat-c:var(--stat-accent-2)}
:is(.nxpro-home,body) .nxpro-stat:nth-child(3) .nxpro-stat-icon{--stat-c:var(--stat-accent-3)}
:is(.nxpro-home,body) .nxpro-stat:nth-child(4) .nxpro-stat-icon{--stat-c:var(--stat-accent-4)}
:is(.nxpro-home,body) .nxpro-stat:nth-child(n) .nxpro-stat-icon{
  background:var(--stat-c,var(--brand-primary))!important;
  color:var(--on-accent)!important;
  box-shadow:0 9px 20px color-mix(in srgb,var(--stat-c,var(--brand-primary)) 28%,transparent)!important;
}
:is(.nxpro-home,body) .nxpro-stat:nth-child(n) .nxpro-stat-icon i,
:is(.nxpro-home,body) .nxpro-stat:nth-child(n) .nxpro-stat-icon svg{color:var(--on-accent)!important;fill:var(--on-accent)}

/* =====================================================================
   4. CARDS - accents, equal sizes, hover glow
      Each card exposes --ns-card-accent; hover effects read only that variable.
   ===================================================================== */
:is(.nxpro-home,body) .nxpro-product,
:is(.nxpro-home,body) .nxpro-collection,
:is(.nxpro-home,body) .nxpro-article{--ns-card-accent:var(--brand-primary);--mx:50%;--my:0%;position:relative}

:is(.nxpro-home,body) .nxpro-product:nth-child(1){--ns-card-accent:var(--card-accent-1)}
:is(.nxpro-home,body) .nxpro-product:nth-child(2){--ns-card-accent:var(--card-accent-2)}
:is(.nxpro-home,body) .nxpro-product:nth-child(3){--ns-card-accent:var(--card-accent-3)}
:is(.nxpro-home,body) .nxpro-product:nth-child(4){--ns-card-accent:var(--card-accent-4)}
:is(.nxpro-home,body) .nxpro-product:nth-child(5){--ns-card-accent:var(--card-accent-5)}
:is(.nxpro-home,body) .nxpro-product:nth-child(6){--ns-card-accent:var(--card-accent-6)}
:is(.nxpro-home,body) .nxpro-collection:nth-child(1){--ns-card-accent:var(--card-accent-1)}
:is(.nxpro-home,body) .nxpro-collection:nth-child(2){--ns-card-accent:var(--card-accent-2)}
:is(.nxpro-home,body) .nxpro-collection:nth-child(3){--ns-card-accent:var(--card-accent-3)}
:is(.nxpro-home,body) .nxpro-collection:nth-child(4){--ns-card-accent:var(--card-accent-4)}
:is(.nxpro-home,body) .nxpro-article:nth-child(1){--ns-card-accent:var(--card-accent-1)}
:is(.nxpro-home,body) .nxpro-article:nth-child(2){--ns-card-accent:var(--card-accent-2)}
:is(.nxpro-home,body) .nxpro-article:nth-child(3){--ns-card-accent:var(--card-accent-3)}

/* ---- equal sizes: every card in a row has the same height, footers line up ---- */
:is(.nxpro-home,body) .nxpro-product-grid,
:is(.nxpro-home,body) .nxpro-blog-grid,
:is(.nxpro-home,body) .nxpro-collection-grid{align-items:stretch!important}
:is(.nxpro-home,body) .nxpro-product,
:is(.nxpro-home,body) .nxpro-article,
:is(.nxpro-home,body) .nxpro-collection{display:flex!important;flex-direction:column!important;height:100%!important;min-width:0}
:is(.nxpro-home,body) .nxpro-product-body,
:is(.nxpro-home,body) .nxpro-article-body{flex:1 1 auto!important;display:flex!important;flex-direction:column!important}
:is(.nxpro-home,body) .nxpro-product-foot,
:is(.nxpro-home,body) .nxpro-article-foot{margin-top:auto!important}
:is(.nxpro-home,body) .nxpro-product h3,
:is(.nxpro-home,body) .nxpro-article h3{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  line-height:1.25!important;min-height:2.5em;
}
:is(.nxpro-home,body) .nxpro-product p,
:is(.nxpro-home,body) .nxpro-article p{
  display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  min-height:4.8em;margin-bottom:15px!important;
}

/* ---- inner colours follow the card accent ---- */
:is(.nxpro-home,body) .nxpro-product:nth-child(n) .nxpro-get{background:var(--ns-card-accent)!important;color:var(--on-accent)!important}
:is(.nxpro-home,body) .nxpro-product:nth-child(n) .nxpro-type{color:color-mix(in srgb,var(--ns-card-accent) 48%,var(--brand-ink))!important}
:is(.nxpro-home,body) .nxpro-product:nth-child(n) .nxpro-free{color:color-mix(in srgb,var(--ns-card-accent) 48%,var(--brand-ink))!important;background:color-mix(in srgb,var(--ns-card-accent) 11%,#fff)!important}
:is(.nxpro-home,body) .nxpro-article:nth-child(n) .nxpro-category{
  color:color-mix(in srgb,var(--ns-card-accent) 48%,var(--brand-ink))!important;
  background:color-mix(in srgb,var(--ns-card-accent) 14%,#fff)!important;
  border-color:color-mix(in srgb,var(--ns-card-accent) 30%,#fff)!important;
}

/* ---- coloured top line (appears on hover). Cards clip it to their rounded corners ---- */
:is(.nxpro-home,body) .nxpro-product:nth-child(n):before,
:is(.nxpro-home,body) .nxpro-article:nth-child(n):before{background:var(--ns-card-accent)!important}

/* ---- soft, smoky light that follows the cursor ---- */
:is(.nxpro-home,body) .nxpro-product::after,
:is(.nxpro-home,body) .nxpro-collection::after,
:is(.nxpro-home,body) .nxpro-article::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(280px circle at var(--mx) var(--my),color-mix(in srgb,var(--ns-card-accent) 16%,transparent),transparent 70%);
}
:is(.nxpro-home,body) .nxpro-product:hover::after,
:is(.nxpro-home,body) .nxpro-collection:hover::after,
:is(.nxpro-home,body) .nxpro-article:hover::after{opacity:1}

/* ---- hover: lift + coloured glow (never black) ---- */
:is(.nxpro-home,body) .nxpro-product,
:is(.nxpro-home,body) .nxpro-collection,
:is(.nxpro-home,body) .nxpro-article{transition:transform .28s ease,box-shadow .3s ease,border-color .3s ease!important}
:is(.nxpro-home,body) .nxpro-product:hover,
:is(.nxpro-home,body) .nxpro-collection:hover,
:is(.nxpro-home,body) .nxpro-article:hover{
  transform:translateY(-7px)!important;
  border-color:color-mix(in srgb,var(--ns-card-accent) 42%,#E5E8F0)!important;
  box-shadow:
    0 26px 46px -16px color-mix(in srgb,var(--ns-card-accent) 42%,transparent),
    0 10px 30px color-mix(in srgb,var(--ns-card-accent) 16%,transparent)!important;
}
.ns-listing-card:hover,.cp-related-card:hover,.ns-product-card:hover{
  border-color:color-mix(in srgb,var(--brand-primary) 40%,#e5e8f0)!important;
  box-shadow:0 24px 44px -16px color-mix(in srgb,var(--brand-primary) 40%,transparent),0 8px 24px color-mix(in srgb,var(--brand-primary) 14%,transparent)!important;
}

/* =====================================================================
   5. COLLECTIONS  - rounded boxes, clipped top line, animated icon tiles
   ===================================================================== */
:is(.nxpro-home,body) .nxpro-collections{background:var(--brand-section-bg)!important}
:is(.nxpro-home,body) .nxpro-collections::before,
:is(.nxpro-home,body) .nxpro-collections::after{content:none!important;display:none!important}
:is(.nxpro-home,body) .nxpro-collection-decor{display:none!important}

:is(.nxpro-home,body) .nxpro-collection{
  overflow:hidden!important;border-radius:18px!important;padding:24px 22px 20px!important;text-decoration:none;
  background:radial-gradient(230px circle at 100% 0%,color-mix(in srgb,var(--ns-card-accent) 13%,#fff),#fff 72%)!important;
  border:1px solid color-mix(in srgb,var(--ns-card-accent) 14%,#E5E8F0)!important;
}
/* same top line as the blog/product cards: full width, clipped by the card's own rounded corners */
:is(.nxpro-home,body) .nxpro-collection::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:0;
  background:var(--ns-card-accent);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:2;
}
:is(.nxpro-home,body) .nxpro-collection:hover::before{opacity:1}

:is(.nxpro-home,body) .nxpro-collection:nth-child(n) .nxpro-collection-icon{
  width:54px!important;height:54px!important;border-radius:16px!important;display:grid;place-items:center;
  font-size:22px!important;color:var(--on-accent)!important;
  background:linear-gradient(145deg,var(--ns-card-accent),color-mix(in srgb,var(--ns-card-accent) 60%,#fff))!important;
  box-shadow:0 12px 22px -8px color-mix(in srgb,var(--ns-card-accent) 55%,transparent)!important;
  animation:nsIconFloat 4.4s ease-in-out infinite!important;
}
:is(.nxpro-home,body) .nxpro-collection:nth-child(2) .nxpro-collection-icon{animation-delay:.5s!important}
:is(.nxpro-home,body) .nxpro-collection:nth-child(3) .nxpro-collection-icon{animation-delay:1s!important}
:is(.nxpro-home,body) .nxpro-collection:nth-child(4) .nxpro-collection-icon{animation-delay:1.5s!important}
:is(.nxpro-home,body) .nxpro-collection:hover .nxpro-collection-icon{animation:nsIconPop .6s ease both!important}
:is(.nxpro-home,body) .nxpro-collection .nxpro-collection-icon i{color:var(--on-accent)!important}
:is(.nxpro-home,body) .nxpro-collection h3{margin:18px 0 8px!important;font-size:16px!important;letter-spacing:-.02em}
:is(.nxpro-home,body) .nxpro-collection p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  min-height:4.8em!important;margin:0 0 16px!important;font-size:11px!important;line-height:1.6!important;color:#6B7390!important;
}
:is(.nxpro-home,body) .nxpro-collection:nth-child(n) .nxpro-count{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:999px;font-size:10px;font-weight:800;
  color:color-mix(in srgb,var(--ns-card-accent) 48%,var(--brand-ink))!important;background:color-mix(in srgb,var(--ns-card-accent) 16%,#fff);
}

/* =====================================================================
   6. HEART / SAVE / SHARE  - fixed colours everywhere
      heart = red, save = yellow, share = blue
   ===================================================================== */
:is(.ns-like,[data-ns-like],.nxpro-save,[data-ns-product-save],.ns-card-heart,.ns-product-save,.ns-card-save,.ns-detail-save){--act:var(--action-heart)}
:is(.ns-save,[data-ns-bookmark],[data-ns-resource-save],.ns-bookmark-btn){--act:var(--action-save)}
:is(.ns-share,[data-share]){--act:var(--action-share)}

:is(.ns-like,[data-ns-like],.nxpro-save,[data-ns-product-save],.ns-card-heart,.ns-product-save,.ns-card-save,.ns-detail-save,
    .ns-save,[data-ns-bookmark],[data-ns-resource-save],.ns-bookmark-btn,.ns-share,[data-share]){
  color:var(--act)!important;
}
:is(.ns-like,[data-ns-like],[data-ns-product-save],.ns-card-heart,.ns-product-save,.ns-card-save,.ns-detail-save,
    .ns-save,[data-ns-bookmark],[data-ns-resource-save],.ns-bookmark-btn,.ns-share,[data-share]) svg{stroke:currentColor}

/* text-only "Save" buttons (no icon): ink text, yellow only as border/tint */
:is(.ns-save,[data-ns-bookmark],[data-ns-resource-save],.ns-bookmark-btn):not(:has(svg)):not(:has(i)){
  color:var(--brand-ink)!important;border-color:color-mix(in srgb,var(--action-save) 70%,#fff)!important;
  background:color-mix(in srgb,var(--action-save) 16%,#fff)!important;
}
/* hover + active / saved / liked: tinted background in the same colour */
:is(.ns-like,[data-ns-like],[data-ns-product-save],.ns-card-heart,.ns-product-save,.ns-card-save,.ns-detail-save,
    .ns-save,[data-ns-bookmark],[data-ns-resource-save],.ns-bookmark-btn,.ns-share,[data-share]):hover,
:is(.ns-like,[data-ns-like],[data-ns-product-save],.ns-card-heart,.ns-product-save,.ns-card-save,.ns-detail-save,
    .ns-save,[data-ns-bookmark],[data-ns-resource-save],.ns-bookmark-btn,.ns-share,[data-share]):is(.active,.saved,.liked,[aria-pressed="true"]),
.ns-product-meta-v3 button.saved,
.ns-card-action.ns-save.active,
.ns-action-button.ns-save.saved,
.ns-action-button.ns-like.active,
.ns-action-button.ns-share.active{
  color:var(--act)!important;
  background:color-mix(in srgb,var(--act) 12%,#fff)!important;
  border-color:color-mix(in srgb,var(--act) 38%,#fff)!important;
  box-shadow:none!important;
  animation:none;
}
:is(.ns-like,[data-ns-like],[data-ns-product-save],.ns-card-heart,.ns-product-save,.ns-card-save,.ns-detail-save,
    .ns-save,[data-ns-bookmark],[data-ns-resource-save],.ns-bookmark-btn):is(.active,.saved,.liked,[aria-pressed="true"]) svg{
  fill:currentColor!important;stroke:currentColor!important;
}

/* product card save control: bare icon, no box at any state (heart = red, bookmark = yellow via --act) */
:is(.nxpro-home,body) .nxpro-product .nxpro-save,
:is(.nxpro-home,body) .nxpro-product .nxpro-save:hover,
:is(.nxpro-home,body) .nxpro-product .nxpro-save:focus,
:is(.nxpro-home,body) .nxpro-product .nxpro-save:active,
:is(.nxpro-home,body) .nxpro-product .nxpro-save.saved,
:is(.nxpro-home,body) .nxpro-product .nxpro-save[aria-pressed="true"]{
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;outline:none;
  color:var(--act,var(--action-heart))!important;font-size:20px!important;line-height:1!important;
}
:is(.nxpro-home,body) .nxpro-product .nxpro-save:focus-visible{outline:2px solid color-mix(in srgb,var(--action-heart) 35%,#fff)!important;outline-offset:3px}

/* homepage blog actions: white buttons, colour from the rules above */
:is(.nxpro-home,body) .nxpro-article-actions .nxpro-action.ns-like,
:is(.nxpro-home,body) .nxpro-article-actions .nxpro-action.ns-save,
:is(.nxpro-home,body) .nxpro-article-actions .nxpro-action.ns-share{background:#fff;border:1px solid #E5E8EF!important;box-shadow:none!important}
:is(.nxpro-home,body) .nxpro-article-actions .nxpro-action:hover{transform:translateY(-2px)!important}

/* =====================================================================
   7. EYE  (blog covers + free resource library covers)
      purple, three lashes, opens when the WHOLE card is hovered
   ===================================================================== */
:is(.nxpro-home,body) :is(.nxpro-cover,.nxpro-article-cover) .nxpro-action--eye{
  position:absolute!important;z-index:5!important;top:12px!important;right:12px!important;
  width:34px!important;height:34px!important;display:grid!important;place-items:center!important;padding:0!important;
  color:var(--brand-primary)!important;background:rgba(255,255,255,.96)!important;
  border:1px solid var(--brand-line)!important;border-radius:10px!important;box-shadow:none!important;
  transition:background .25s ease,color .25s ease,transform .25s ease!important;
}
:is(.nxpro-home,body) .nxpro-product:hover .nxpro-action--eye,
:is(.nxpro-home,body) .nxpro-article:hover .nxpro-action--eye,
:is(.nxpro-home,body) :is(.nxpro-cover,.nxpro-article-cover) .nxpro-action--eye:hover,
:is(.nxpro-home,body) :is(.nxpro-cover,.nxpro-article-cover) .nxpro-action--eye:focus-visible{
  background:var(--brand-soft)!important;color:var(--brand-primary)!important;transform:translateY(-1px) scale(1.04)!important;
}
:is(.nxpro-home,body) :is(.nxpro-cover,.nxpro-article-cover) .nxpro-action--eye:hover{background:var(--brand-primary)!important;color:#fff!important;border-color:var(--brand-primary)!important}
:is(.nxpro-home,body) :is(.nxpro-cover,.nxpro-article-cover) .nxpro-action--eye svg{
  width:18px!important;height:18px!important;overflow:visible;
  fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
:is(.nxpro-home,body) .nxpro-action--eye .nx-eye-open,
:is(.nxpro-home,body) .nxpro-action--eye .nx-eye-closed{
  display:block!important;transform-box:fill-box;transform-origin:50% 55%;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .24s ease;
}
:is(.nxpro-home,body) .nxpro-action--eye .nx-eye-pupil{fill:currentColor!important;stroke:none!important}
/* resting = closed */
:is(.nxpro-home,body) .nxpro-action--eye .nx-eye-open{opacity:0;transform:scaleY(.12)}
:is(.nxpro-home,body) .nxpro-action--eye .nx-eye-closed{opacity:1;transform:scaleY(1)}
/* card hover / focus = open */
:is(.nxpro-home,body) .nxpro-product:hover .nxpro-action--eye .nx-eye-open,
:is(.nxpro-home,body) .nxpro-article:hover .nxpro-action--eye .nx-eye-open,
:is(.nxpro-home,body) .nxpro-action--eye:focus-visible .nx-eye-open{opacity:1;transform:scaleY(1)}
:is(.nxpro-home,body) .nxpro-product:hover .nxpro-action--eye .nx-eye-closed,
:is(.nxpro-home,body) .nxpro-article:hover .nxpro-action--eye .nx-eye-closed,
:is(.nxpro-home,body) .nxpro-action--eye:focus-visible .nx-eye-closed{opacity:0;transform:scaleY(.2)}

/* =====================================================================
   8. FOOTER  - flat, compact, centred copyright, round social icons
   ===================================================================== */
.ns-global-footer,
.nxpro-home footer.ns-global-footer,
.nxpro-home footer,
.nxpro-home .cp-footer{
  background:var(--brand-footer)!important;background-image:none!important;
  box-shadow:none!important;border:0!important;color:#EDE8FF;
}
.ns-global-footer::before,.ns-global-footer::after,
.nxpro-home footer::before,.nxpro-home footer::after,
.nxpro-home .cp-footer::before,.nxpro-home .cp-footer::after{
  content:none!important;display:none!important;animation:none!important;border:0!important;box-shadow:none!important;background:none!important;
}
.ns-global-footer-grid{gap:28px 38px}
.ns-global-footer p{margin-top:12px}
.ns-global-footer .ns-footer-socials{margin-top:14px}
.ns-global-footer-grid a:not(.ns-global-brand):hover{color:var(--brand-secondary)!important}
.ns-global-footer-grid>div:not(:first-child){gap:8px}
.ns-global-footer-bottom{
  border-top:0!important;margin-top:22px!important;padding-top:0!important;
  justify-content:center!important;text-align:center!important;
}
@media(min-width:701px){.ns-global-footer{padding-bottom:16px}}

/* social icons: round, original brand colours + glyphs */
.ns-global-footer .ns-footer-socials{display:flex;gap:10px}
.ns-global-footer .ns-footer-socials a{
  display:grid!important;place-items:center;width:40px!important;height:40px!important;
  border-radius:50%!important;border:0!important;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.ns-global-footer .ns-footer-socials a:hover{transform:translateY(-3px);filter:none;box-shadow:0 10px 20px -6px rgba(255,255,255,.28)}
.ns-global-footer .ns-footer-socials a[aria-label="Instagram"]{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)!important}
.ns-global-footer .ns-footer-socials a[aria-label="LinkedIn"]{background:#0A66C2!important}
.ns-global-footer .ns-footer-socials a[aria-label="WhatsApp"]{background:#25D366!important}
.ns-global-footer .ns-footer-socials a[aria-label="TikTok"]{background:#000!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ns-global-footer .ns-footer-socials a[aria-label="YouTube"]{background:#FF0000!important}
.ns-global-footer .ns-footer-socials a i,
.nxpro-home footer .ns-footer-socials a i.fa-brands{color:#fff!important;font-size:18px!important;line-height:1}

/* =====================================================================
   9. NEWSLETTER + FOOTER JOIN  (ONE component, every page)
      Box is 30% inside the footer, 70% above it. --nl-h = box height (nexshelfy-brand.js).
      audit-fixes.css has "body:not(.ns-home-page) main{padding-bottom:110px!important}" which
      pushed the box away from the footer; the html-body-main selectors below out-rank it.
   ===================================================================== */
html body:not(.ns-home-page) main,
html body.ns-home-page main{padding-bottom:0!important}
body{--ns-nl-gap:56px}
body.nxpro-home{--ns-nl-gap:15px}
.ns-nl{position:relative;z-index:12;margin:0;padding:var(--ns-nl-gap) 0 0;background:transparent}
.ns-nl-box{
  position:relative;overflow:hidden;box-sizing:border-box;width:min(1180px,calc(100% - 40px));margin:0 auto;
  padding:30px 40px;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-light));
  box-shadow:0 22px 44px -18px color-mix(in srgb,var(--brand-primary) 60%,transparent);
}
.ns-nl-box>*{position:relative;z-index:2}
.ns-nl-eyebrow{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-strong);font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ns-nl-box .ns-nl-title{max-width:600px;margin:10px 0 8px;font:700 36px/1.02 Inter,system-ui,sans-serif;letter-spacing:-.04em;color:#fff}
.ns-nl-box p{max-width:540px;margin:0;color:rgba(255,255,255,.88);font:400 11px/1.65 Inter,system-ui,sans-serif}
.ns-nl-form{max-width:590px;margin:12px 0 0}
.ns-nl-pill{display:flex;gap:5px;padding:5px;border-radius:13px;background:#fff}
.ns-nl-pill input{min-width:0;flex:1;height:37px;border:0;outline:0;padding:0 12px;font:500 10px Inter,system-ui,sans-serif;color:var(--brand-ink);background:transparent}
.ns-nl-pill button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:9px;padding:0 17px;height:37px;background:var(--brand-secondary);color:var(--brand-ink);font:800 9px Inter,system-ui,sans-serif;cursor:pointer}
.ns-nl-form .ns-inline-message{margin-top:8px;color:#fff;font-size:11px}
.ns-nl-box p.ns-nl-privacy{margin:10px 0 0;font-size:8px;color:rgba(255,255,255,.78)}
.ns-nl-orbit{position:absolute;display:block;border:1px solid rgba(255,255,255,.10);border-radius:50%;pointer-events:none;z-index:1}
.ns-nl-orbit--top{width:290px;height:290px;right:-70px;top:-70px;animation:nsOrbitCW 18s linear infinite}
.ns-nl-orbit--bottom{width:210px;height:210px;right:0;bottom:-100px;animation:nsOrbitCCW 14s linear infinite}
.ns-nl-dot{position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;transform:translateX(-50%);background:var(--brand-secondary);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-secondary) 18%,transparent),0 0 16px color-mix(in srgb,var(--brand-secondary) 45%,transparent)}
.ns-nl-orbit--bottom .ns-nl-dot{top:auto;bottom:-4px;background:var(--brand-primary-3)}
@keyframes nsOrbitCW{to{transform:rotate(360deg)}}
@keyframes nsOrbitCCW{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.ns-nl-orbit{animation:none!important}}
@media(max-width:700px){
  .ns-nl-box{width:min(100% - 28px,1180px);padding:26px 22px}
  .ns-nl-box .ns-nl-title{font-size:29px}
  .ns-nl-pill{display:block;padding:0;background:transparent}
  .ns-nl-pill input,.ns-nl-pill button{width:100%;height:42px;margin:4px 0;border-radius:10px;justify-content:center}
  .ns-nl-pill input{background:#fff}
}
/* the footer starts 30% of the way up the box */
html body .ns-global-footer{
  margin-top:calc(var(--nl-h,300px)*-.3)!important;
  padding-top:calc(var(--nl-h,300px)*.3 + 36px)!important;
}

/* =====================================================================
   11. ICON MOTION  - small, slow, professional. Off for reduced-motion users.
   ===================================================================== */
@keyframes nsIconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes nsIconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes nsIconWiggle{0%{transform:rotate(0)}25%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}100%{transform:rotate(0)}}
@keyframes nsIconPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.14) rotate(-6deg)}70%{transform:scale(.96) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes nsArrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes nsDownloadDrop{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* ambient (very slow) */
:is(.nxpro-home,body) .nxpro-stat:nth-child(n) .nxpro-stat-icon{animation:nsIconFloat 4.8s ease-in-out infinite}
:is(.nxpro-home,body) .nxpro-stat:nth-child(2) .nxpro-stat-icon{animation-delay:.4s}
:is(.nxpro-home,body) .nxpro-stat:nth-child(3) .nxpro-stat-icon{animation-delay:.8s}
:is(.nxpro-home,body) .nxpro-stat:nth-child(4) .nxpro-stat-icon{animation-delay:1.2s}
:is(.nxpro-home,body) .nxpro-eyebrow i{display:inline-block;animation:nsIconPulse 2.8s ease-in-out infinite}
.ns-nl-privacy i{display:inline-block;animation:nsIconPulse 3.4s ease-in-out infinite}

/* interactive */
:is(.nxpro-home,body) :is(.nxpro-link,.nxpro-get,.nxpro-btn,.nxpro-count) i{display:inline-block;transition:transform .25s ease}
:is(.nxpro-home,body) :is(.nxpro-link,.nxpro-get,.nxpro-btn,.nxpro-count):hover i,
:is(.nxpro-home,body) .nxpro-collection:hover .nxpro-count i{animation:nsArrowNudge .9s ease-in-out infinite}
:is(.nxpro-home,body) .nxpro-product:hover .nxpro-downloads i{display:inline-block;animation:nsDownloadDrop .9s ease-in-out infinite}
.ns-nl-pill button i{display:inline-block;transition:transform .3s ease}
.ns-nl-pill button:hover i{transform:translate(3px,-3px) rotate(10deg)}
.ns-footer-socials a i{display:inline-block}
.ns-footer-socials a:hover i{animation:nsIconWiggle .55s ease}
.ns-global-actions .ns-action-icon svg,.ns-action-button svg,.nxpro-action svg,.ns-card-action svg{transition:transform .25s ease}
.ns-global-actions .ns-header-btn:hover .ns-action-icon svg{animation:nsIconWiggle .5s ease}
:is(.ns-action-button,.nxpro-action.ns-like,.nxpro-action.ns-save,.nxpro-action.ns-share):hover svg{transform:scale(1.14)}
:is(.nxpro-home,body) .nxpro-save{transition:transform .2s ease}
:is(.nxpro-home,body) .nxpro-save:hover{transform:scale(1.18)!important}
.ns-global-brand:hover>img{animation:nsIconPop .6s ease}

@media (prefers-reduced-motion:reduce){
  :is(.nxpro-home,body) .nxpro-stat .nxpro-stat-icon,
  :is(.nxpro-home,body) .nxpro-collection .nxpro-collection-icon,
  :is(.nxpro-home,body) .nxpro-eyebrow i,.ns-nl-privacy i,
  :is(.nxpro-home,body) .nxpro-link i,:is(.nxpro-home,body) .nxpro-get i,:is(.nxpro-home,body) .nxpro-btn i,:is(.nxpro-home,body) .nxpro-count i,
  :is(.nxpro-home,body) .nxpro-product .nxpro-downloads i,.ns-footer-socials a i,.ns-global-brand>img{animation:none!important}
}

/* =====================================================================
   10. ALL OTHER PAGES  - same look as the homepage
       white header, lavender top band, pill eyebrows, ink headings,
       purple actions, glow cards, purple newsletter banner (30% in footer)
   ===================================================================== */
html body.cp-page,body:not(.nxpro-home){background:#fff!important;overflow-x:clip}
html:has(body:not(.nxpro-home)){overflow-x:clip}

/* header: identical on every page (solid white, soft shadow once scrolled) */
.ns-global-header,
body.ns-scrolled .ns-global-header{background:#fff!important;border-color:transparent!important;backdrop-filter:none!important}
body.ns-scrolled .ns-global-header{box-shadow:0 8px 28px rgba(31,42,70,.07)!important}

/* lavender band behind every page's hero (homepage hero colour) */
body:not(.nxpro-home) main{position:relative;isolation:isolate}
body:not(.nxpro-home) main::before{
  content:"";position:absolute;left:50%;width:100vw;margin-left:-50vw;top:0;height:min(440px,62vh);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#F8F6FF 0%,#F8F6FF 70%,rgba(248,246,255,0) 100%);
}

/* eyebrow labels -> pills */
body:not(.nxpro-home) .cp-kicker,
body:not(.nxpro-home) .ns-section-title>span,
body:not(.nxpro-home) .ns-section-title>div>span:first-child{
  display:inline-flex;align-items:center;gap:6px;width:auto;
  padding:7px 13px;border-radius:999px;background:#F8F5FF;border:1px solid #E7DEFF;
  color:var(--brand-strong)!important;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 5px 14px rgba(101,71,245,.07);
}

/* headings: homepage ink colour and weight */
body:not(.nxpro-home) main h1,
body:not(.nxpro-home) .ns-section-title h2,
body:not(.nxpro-home) .cp-section-heading h2,
body:not(.nxpro-home) .ns-faq-section h2{color:#102A43!important}
body:not(.nxpro-home) .ns-premium-hero h1,
body:not(.nxpro-home) .ns-split-hero h1,
body:not(.nxpro-home) .ns-creators-hero h1{font-weight:700;letter-spacing:-.055em;line-height:1.02}

/* cards: homepage radius, border and soft shadow */
body:not(.nxpro-home) .ns-listing-card,
body:not(.nxpro-home) .cp-related-card,
body:not(.nxpro-home) .ns-creator-card,
body:not(.nxpro-home) .ns-saved-card,
body:not(.nxpro-home) .ns-standalone-card,
body:not(.nxpro-home) .ns-sidebar-block,
body:not(.nxpro-home) .ns-product-side-card,
body:not(.nxpro-home) .ns-form-panel,
body:not(.nxpro-home) .ns-contact-form,
body:not(.nxpro-home) .ns-creator-apply-panel,
body:not(.nxpro-home) .ns-hero-featured-card,
body:not(.nxpro-home) .ns-filter-shell{
  border:1px solid #E3E7F0!important;border-radius:17px!important;box-shadow:0 10px 26px rgba(31,42,70,.067)!important;
}
body:not(.nxpro-home) .ns-listing-card,
body:not(.nxpro-home) .cp-related-card,
body:not(.nxpro-home) .ns-creator-card,
body:not(.nxpro-home) .ns-saved-card{position:relative;--mx:50%;--my:0%;transition:transform .28s ease,box-shadow .3s ease,border-color .3s ease!important}
body:not(.nxpro-home) .ns-listing-card:hover,
body:not(.nxpro-home) .cp-related-card:hover,
body:not(.nxpro-home) .ns-creator-card:hover,
body:not(.nxpro-home) .ns-saved-card:hover{transform:translateY(-7px)!important}

/* soft light that follows the cursor (same as homepage cards) */
body:not(.nxpro-home) .ns-listing-card::after,
body:not(.nxpro-home) .cp-related-card::after,
body:not(.nxpro-home) .ns-creator-card::after,
body:not(.nxpro-home) .ns-saved-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(280px circle at var(--mx) var(--my),color-mix(in srgb,var(--brand-primary) 16%,transparent),transparent 70%);
}
body:not(.nxpro-home) .ns-listing-card:hover::after,
body:not(.nxpro-home) .cp-related-card:hover::after,
body:not(.nxpro-home) .ns-creator-card:hover::after,
body:not(.nxpro-home) .ns-saved-card:hover::after{opacity:1}

/* type badge like the homepage */
body:not(.nxpro-home) .ns-card-badge{background:#fff;border:1px solid #E8EAF1;color:var(--brand-strong);border-radius:8px;padding:6px 9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10px}

/* collection covers: calm brand tile instead of mixed colours */
body:not(.nxpro-home) .ns-collection-cover{background:linear-gradient(135deg,#F3EEFF,#E7DCFF)!important}

/* download actions: brand purple instead of black */
body:not(.nxpro-home) .ns-action-button.ns-download,
body:not(.nxpro-home) .ns-card-action.ns-download{background:var(--brand-primary)!important;border-color:var(--brand-primary)!important;color:var(--on-accent)!important}
body:not(.nxpro-home) .ns-action-button.ns-download:hover,
body:not(.nxpro-home) .ns-card-action.ns-download:hover{background:var(--brand-deep)!important;border-color:var(--brand-deep)!important}
body:not(.nxpro-home) .ns-sticky-download{background:var(--brand-ink)!important}
body:not(.nxpro-home) .ns-sticky-download a{background:var(--brand-primary)!important;color:var(--on-accent)!important;border-radius:9px}

/* buttons: same small lift as the homepage */
body:not(.nxpro-home) .cp-btn,
body:not(.nxpro-home) .ns-btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
body:not(.nxpro-home) .cp-btn:hover,
body:not(.nxpro-home) .ns-btn:hover{transform:translateY(-1px)}
body:not(.nxpro-home) .cp-btn.primary,
body:not(.nxpro-home) .ns-btn{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--on-accent);box-shadow:0 12px 24px color-mix(in srgb,var(--brand-primary) 30%,transparent)}
body:not(.nxpro-home) .cp-btn.primary:hover,
body:not(.nxpro-home) .ns-btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}

/* FAQ block in the brand tint */
body:not(.nxpro-home) .ns-faq-section{background:var(--brand-section-bg)!important;border-color:#E5E0F7!important}

/* scroll reveal (class added by nexshelfy-brand.js, only when it is safe to hide) */
.nx-reveal-ready .nx-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:var(--nx-d,0ms)}
.nx-reveal-ready .nx-reveal.nx-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.nx-reveal-ready .nx-reveal{opacity:1;transform:none;transition:none}}

/* =====================================================================
   12. PALETTE LAYER  - legacy colour variables now resolve to the palette
       (old purple / blue / cyan / green / orange / gold names used by the
       homepage styles all map to palette colours, so nothing off-palette is left)
   ===================================================================== */
:root:root{
  --nx-purple:var(--brand-primary);--nx-purple-2:var(--brand-primary-2);--nx-purple-3:var(--brand-primary-3);
  --nx-purple-deep:var(--brand-deep);--nx-purple-ink:var(--brand-ink);--nx-purple-line:var(--brand-line);--nx-purple-soft:var(--brand-soft);
  --nx-v13-lilac:var(--brand-primary);--nx-v13-lavender:var(--brand-primary-3);--nx-v13-purple-deep:var(--brand-deep);--nx-v13-lilac-soft:var(--brand-soft);
  --nx-v14-lilac:var(--brand-primary);--nx-v14-purple:var(--brand-primary);--nx-v14-purple-dark:var(--brand-deep);--nx-v14-lilac-soft:var(--brand-soft);
  --nxpro-purple:var(--brand-primary);--nxpro-purple-2:var(--brand-primary-2);
  --v7-purple:var(--brand-primary);--v7-purple-deep:var(--brand-deep);--v7-violet:var(--brand-primary-2);
  --v7-pink:var(--pal-pink);--v7-blue:var(--brand-primary);--v7-cyan:var(--pal-teal);--v7-green:var(--pal-lime);
  --v7-orange:var(--pal-orange);--v7-gold:var(--pal-yellow);--v7-red:var(--action-heart);
  --dy-blue:var(--brand-primary);--dy-sky:var(--pal-teal);--dy-orange:var(--pal-orange);--dy-yellow:var(--pal-yellow);
  --dy-green:var(--pal-lime);--dy-red:var(--action-heart);
}
body.nxpro-home{--ig-red:var(--action-heart);--ig-gold:var(--action-save);--dy-action-blue:var(--action-share);--dy-action-cyan:var(--brand-primary)}

/* text that sits on white uses the strong purple so it stays readable */
:is(.nxpro-home,body) :is(.nxpro-link,.nxpro-eyebrow,.nxpro-section-eyebrow){color:var(--brand-strong)!important}
:is(.nxpro-home,body) .nxpro-eyebrow{background:var(--brand-soft)!important;border-color:var(--brand-line)!important}
:is(.nxpro-home,body) .nxpro-link:hover{color:var(--brand-deep)!important}

/* homepage hero buttons */
:is(.nxpro-home,body) .nxpro-btn-primary{background:var(--brand-primary)!important;border-color:var(--brand-primary)!important;color:var(--on-accent)!important;box-shadow:0 10px 22px color-mix(in srgb,var(--brand-primary) 32%,transparent)!important}
:is(.nxpro-home,body) .nxpro-btn-primary:hover{background:var(--brand-strong)!important;border-color:var(--brand-strong)!important;color:#fff!important}
:is(.nxpro-home,body) .nxpro-btn-primary i{color:inherit!important}

/* white glyphs on pastel fills: a faint shadow keeps them readable on yellow / lime / pink */
:is(.nxpro-home,body) .nxpro-stat-icon i,:is(.nxpro-home,body) .nxpro-collection-icon i{text-shadow:0 1px 2px rgba(27,18,48,.32)}
:is(.nxpro-home,body) .nxpro-stat-icon svg{filter:drop-shadow(0 1px 1px rgba(27,18,48,.32))}
:is(.nxpro-home,body) .nxpro-product .nxpro-get,
:is(.nxpro-home,body) .nxpro-btn-primary,
.ns-header-actions .ns-header-btn .ns-action-count,
.ns-global-actions .ns-header-btn .ns-action-count{text-shadow:0 1px 1px rgba(27,18,48,.28)}

/* =====================================================================
   13. ONE PAGE CONTAINER  - every page uses the homepage container (1180px, 20px side margin)
       audit-fixes.css had widened inner pages to 1680px while the homepage stayed at 1180px.
   ===================================================================== */
.ns-premium-hero,.ns-listing-grid,.ns-filter-shell,.ns-faq-section,
.ns-resource-detail-page .ns-section-title,.ns-article-page .ns-article-layout,
.ns-collection-search,.ns-article-shell,.cp-shell{
  width:min(1180px,calc(100% - 40px))!important;max-width:min(1180px,calc(100% - 40px))!important;
  margin-left:auto!important;margin-right:auto!important;
}
@media(max-width:820px){
  .ns-premium-hero,.ns-listing-grid,.ns-filter-shell,.ns-faq-section,
  .ns-resource-detail-page .ns-section-title,.ns-article-page .ns-article-layout,
  .ns-collection-search,.ns-article-shell,.cp-shell{width:min(100% - 28px,1180px)!important;max-width:min(100% - 28px,1180px)!important}
}