/* NexShelfy audit fixes — 2026-08-15. Additive layer, loaded last on each page it applies to. */

/* Site width: .ns-shell (homepage-only, from css/nexshelfy-v2.css) was capped at 1280px while
   .ns-stats-strip has no max-width at all (just shell-padding), so on wide screens the stats strip
   visibly stretched edge-to-edge while other homepage sections stayed narrow. Widened via --ns-max-width
   below (homepage only, since only nexshelfy-v2.css/.ns-shell reads that variable).

   The SAME 1180px cap is separately hardcoded (not via --ns-max-width) in nexshelfy-shell.css on every
   other page's header, hero, listing grid, filter bar, FAQ section and article layout — that's the
   shared component system used site-wide (shop/resources/blog/collections/creators/product/article/
   collection-detail), so it needed its own matching override below or only the homepage would widen. */
:root{--ns-max-width:1680px!important}
.ns-global-header-inner,.ns-global-mobile-nav,.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-related-resources .ns-section-title,.ns-collection-search{
  width:min(1680px,calc(100% - 40px))!important;max-width:min(1680px,calc(100% - 40px))!important;
}
@media(max-width:820px){
  .ns-global-header-inner,.ns-global-mobile-nav,.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-related-resources .ns-section-title,.ns-collection-search{
    width:min(100% - 28px,1180px)!important;max-width:min(100% - 28px,1180px)!important;
  }
}

/* Homepage newsletter card: sits half above the footer's top edge, half inside it (landing-page
   pattern, homepage only — the footer's own content/links/copyright are unaffected on every other
   page, so this doesn't reintroduce the earlier footer-inconsistency issue). */
.ns-home-page .ns-newsletter{position:relative;z-index:5;margin-bottom:-130px}
.ns-home-page .ns-global-footer{padding-top:190px}
@media(max-width:760px){.ns-home-page .ns-newsletter{margin-bottom:-90px}.ns-home-page .ns-global-footer{padding-top:140px}}

/* Same half-above-half-below overlap for the "THE NEXSHELFY LETTER" newsletter card that appears
   inside the footer on every non-homepage page. It's the first child of <footer> here (not a sibling
   before it like the homepage version), so the overlap is achieved with a negative top margin instead,
   with extra bottom margin added back so the footer link columns below still have clean spacing.

   <footer> starts with zero gap right after </main>, so pulling the card up with a negative margin was
   overlapping/clipping whatever real content (FAQ section, creator cards, etc.) happened to be last
   inside <main> — visible on /shop/ and /creators/. Reserve a blank buffer at the bottom of <main> on
   these pages so the card has clear empty space to sit in instead of cutting into real content. */
body:not(.ns-home-page) main{padding-bottom:110px!important}
.ns-global-newsletter{position:relative;z-index:5;margin-top:-120px!important;margin-bottom:70px!important}
@media(max-width:760px){body:not(.ns-home-page) main{padding-bottom:70px!important}.ns-global-newsletter{margin-top:-70px!important;margin-bottom:46px!important}}

/* Footer content (logo/social column + Explore/Company link columns + copyright bar) was still capped
   at the old 1120px width alongside the newsletter card — widen all three together so the whole footer
   matches the new sitewide 1680px content width instead of looking narrow and off-center. */
.ns-global-newsletter,.ns-global-footer-grid,.ns-global-footer-bottom{width:min(1680px,calc(100% - 40px))!important}
@media(max-width:820px){.ns-global-newsletter,.ns-global-footer-grid,.ns-global-footer-bottom{width:min(100% - 28px,1120px)!important}}

/* Header "Saved" pill: a global rule (nexshelfy-app.css ".ns-header-btn span{color:var(--ns-bg);background:var(--ns-fg)}")
   turns every span inside ANY header button into an inverted (white-on-black) badge — only correct for the dark
   "Browse Library" pill. Undo both properties on the light Saved/Sign-in buttons. */
.ns-header-actions .ns-header-btn:not(.ns-free-link),
.ns-global-actions .ns-header-btn:not(.ns-free-link){background:#fff!important;color:#111!important;border-color:rgba(15,23,42,.1)!important}
.ns-header-actions .ns-header-btn:not(.ns-free-link) span:not(.ns-action-count),
.ns-global-actions .ns-header-btn:not(.ns-free-link) span:not(.ns-action-count){color:#111!important;background:transparent!important}
.ns-header-actions .ns-header-btn:not(.ns-free-link) .ns-action-icon svg,
.ns-global-actions .ns-header-btn:not(.ns-free-link) .ns-action-icon svg{width:18px!important;height:18px!important;fill:none!important;stroke:#111!important;stroke-width:2!important}
.ns-header-actions .ns-header-btn .ns-action-count,
.ns-global-actions .ns-header-btn .ns-action-count{background:var(--ns-accent,#4f46e5)!important;color:#fff!important}

/* Collections topic search: no results list shown until the visitor actually types something. */
.ns-collection-search .ns-topic-results:empty{display:none}

/* Toast notifications ("Saved to your shelf" etc.): css/nexshelfy-v2.css (homepage only) redefines .ns-toast
   with a white card background for a different icon+title+description toast layout that the JS never actually
   builds — the real toast() function just drops plain text in a bare div, so on the homepage it inherited that
   white background while keeping nexshelfy-app.css's white text, making it unreadable. Force the simple dark
   pill style everywhere so it always matches what the JS actually renders. */
.ns-toast{background:#111!important;color:#fff!important;border:none!important;backdrop-filter:none!important}

/* Preview eye icon: closed by default (squashed to a line), opens on hover/focus. */
.ns-action-button.ns-preview svg{transition:transform .18s ease;transform:scaleY(.22)}
.ns-listing-cover:hover .ns-action-button.ns-preview svg,
.ns-action-button.ns-preview:hover svg,
.ns-action-button.ns-preview:focus-visible svg{transform:scaleY(1)}

/* Search inputs: one magnifying-glass icon in front of the input. The old design stacked an icon,
   a visible "Search"/"Search products" label AND the input's own placeholder together, which read as
   the word "search" three times in a row. The label text is now screen-reader-only (still accessible),
   and the icon lives on the <label> itself so hiding the span's text doesn't hide the icon with it. */
.ns-filter-search,.ns-glass-search label{display:flex;align-items:center;gap:8px}
.ns-filter-search::before,.ns-glass-search label::before{
  content:"";width:15px;height:15px;flex:0 0 15px;
  background-color:currentColor;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Resources page: search box moved into the right-hand hero panel. */
.ns-resources-page .ns-hero-panel .ns-search-right{margin-bottom:18px}
.ns-resources-page .ns-hero-panel .ns-search-right .ns-glass-search,
.ns-resources-page .ns-hero-panel .ns-glass-search{margin:0 0 18px}
.ns-resource-filter-shell{justify-content:flex-start}

/* Collections: simplified cards with an image/gradient cover, name, count, Explore button. */
.ns-collection-grid-simple{grid-template-columns:repeat(3,minmax(0,1fr))}
.ns-collection-card-simple{text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.ns-collection-card-simple:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(15,23,42,.14)}
.ns-collection-cover{display:flex;align-items:center;justify-content:center;height:150px}
.ns-collection-emoji{font-size:44px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
.ns-collection-card-simple .ns-listing-body{display:flex;flex-direction:column;gap:8px}
.ns-collection-card-simple h2{margin:2px 0 0}
.ns-collection-card-simple .ns-listing-meta{color:#667085;font:700 12px/1 Inter,sans-serif}
.ns-collection-card-simple .ns-card-action{margin-top:6px;font-weight:800;color:var(--ns-accent,#4f46e5);text-decoration:none}
@media(max-width:820px){.ns-collection-grid-simple{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ns-collection-grid-simple{grid-template-columns:1fr}}

/* Collection search widget: sits below the hero, not above everything (width handled by the
   site-wide 1180px→1680px override near the top of this file). */
.ns-collection-search{margin:0 auto 40px}

/* Blog article: eye + view count, sits inline with the date/read-time meta row (no absolute positioning —
   that previously escaped its container and floated disconnected near the top of the page). */
.ns-article-page .ns-view-count-badge{display:inline-flex!important;align-items:center;gap:5px}
.ns-article-page .ns-view-count-badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}

/* Creator application forms. */
.ns-inline-file-label,.ns-inline-captcha{display:grid;gap:6px;margin:10px 0;font-size:13px;font-weight:700;color:#475569}
.ns-inline-file-label input,.ns-inline-captcha input{border:1px solid rgba(17,17,17,.12);border-radius:12px;padding:11px 12px;font:inherit;background:#fff}
.ns-verified-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:#16a34a;color:#fff;font-size:11px;vertical-align:middle;margin-left:4px}
.ns-creator-avatar-photo{object-fit:cover}

/* Homepage: hero CTAs smaller and side-by-side. */
.ns-home-page .ns-hero-actions{flex-wrap:nowrap;align-items:center}
.ns-home-page .ns-hero-actions .ns-btn{padding:12px 20px!important;font-size:.92rem!important;white-space:nowrap}
@media(max-width:520px){.ns-home-page .ns-hero-actions{flex-wrap:wrap}.ns-home-page .ns-hero-actions .ns-btn{flex:1 1 auto;justify-content:center}}

/* Homepage: single newsletter block, overlapping the footer edge instead of stacking a second one. */

/* Footer social icons: brand colors for the newly added LinkedIn and WhatsApp icons. */
/* Footer social icons: real Font Awesome brand glyphs, sized and colored to match each platform. */
.ns-footer-socials a{width:38px!important;height:38px!important;border-radius:11px!important}
.ns-footer-socials i{font-size:16px;line-height:1}
.ns-footer-socials a[aria-label="Instagram"]{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);border-color:transparent}
.ns-footer-socials a[aria-label="LinkedIn"]{background:#0a66c2;border-color:transparent}
.ns-footer-socials a[aria-label="WhatsApp"]{background:#25d366;border-color:transparent}
.ns-footer-socials a[aria-label="TikTok"]{background:#000;border-color:transparent}
.ns-footer-socials a[aria-label="YouTube"]{background:#ff0000;border-color:transparent}
.ns-footer-socials a[aria-label="Instagram"] i,.ns-footer-socials a[aria-label="LinkedIn"] i,.ns-footer-socials a[aria-label="WhatsApp"] i,.ns-footer-socials a[aria-label="TikTok"] i,.ns-footer-socials a[aria-label="YouTube"] i{color:#fff}
.ns-footer-socials a:hover{transform:translateY(-2px);filter:brightness(1.08)}