/* 11.6.60 — final conversion/UX pass.
 * Full-bleed hero background with aligned content, visible white-theme header,
 * scrollable live search, stronger mobile geometry, and reliable homepage filters.
 */

/* --------------------------------------------------------------------------
   Header: keep the real theme header visible, align it to the hero, and borrow
   only a small amount of the orange/purple marketplace language.
   -------------------------------------------------------------------------- */
html body.home.nt-clay.nt-v6.nt-principled #siteHeader{
  display:block!important;
  background:rgba(255,255,255,.985)!important;
  border-bottom:1px solid rgba(255,123,16,.16)!important;
  box-shadow:0 8px 28px rgba(42,31,76,.055)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-floating-header__inner{
  width:min(1280px,100%)!important;
  max-width:1280px!important;
}
html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-desktop-nav a{
  transition:color .18s ease,background .18s ease,transform .18s ease!important;
}
html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-desktop-nav a:hover{
  color:#f26b16!important;
  transform:translateY(-1px);
}
html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-header-shop-cta{
  border-color:#ff8b27!important;
  background:linear-gradient(135deg,#ffb41f,#ff6b1c)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(255,107,28,.18)!important;
}
html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-header-login-cta:hover,
html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-header-search:hover,
html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-header-icon:hover{
  border-color:rgba(242,107,22,.28)!important;
  color:#e85f10!important;
  background:#fff8f2!important;
}

/* --------------------------------------------------------------------------
   Hero: full-width dark atmosphere, aligned inner content. The card no longer
   looks like a pasted image floating inside a white rectangle.
   -------------------------------------------------------------------------- */
body.home .ntx-site-hero{
  position:relative!important;
  overflow:visible!important;
  padding:26px 0 34px!important;
  background:
    radial-gradient(circle at 74% 12%,rgba(34,103,255,.30),transparent 28%),
    radial-gradient(circle at 96% 31%,rgba(255,98,17,.34),transparent 27%),
    radial-gradient(circle at 62% 72%,rgba(255,177,43,.19),transparent 30%),
    linear-gradient(118deg,#020611 0%,#070b1a 48%,#101126 69%,#190d0a 100%)!important;
  border-top:1px solid rgba(255,194,89,.09)!important;
  border-bottom:1px solid rgba(255,134,31,.12)!important;
}
body.home .ntx-site-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:52px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.08));
}
body.home .ntx-site-hero__shell{
  width:min(1280px,calc(100% - 40px))!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding:0!important;
}
body.home .ntx-site-hero__card{
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.home .ntx-site-hero__card::before,
body.home .ntx-site-hero__card::after{display:none!important}
body.home .ntx-site-hero__ambient{opacity:.42!important}
body.home .ntx-site-hero__grid{padding:34px 0 20px!important;min-height:530px!important}
body.home .ntx-site-hero__tools{padding:10px 0 18px!important}
body.home .ntx-site-hero__footer{margin:0!important;padding:15px 0 4px!important}

/* Artwork remains a real visual component, not the whole site. */
body.home .ntx-site-hero__visual-frame{
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 50px rgba(39,103,255,.11)!important;
}

/* Category rail should genuinely scroll on desktop too. */
body.home .ntx-site-hero__tool-track{
  grid-auto-columns:142px!important;
  gap:11px!important;
  padding:3px 4px 8px!important;
  scroll-padding-inline:4px!important;
}
body.home .ntx-site-hero__tools-controls button:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
  transform:none!important;
}

/* --------------------------------------------------------------------------
   Search: scrollable, more results, native anchor navigation and clear feedback.
   -------------------------------------------------------------------------- */
body.home .ntx-site-search{
  width:min(100%,640px)!important;
  z-index:120!important;
}
body.home .ntx-site-search__results{
  top:calc(100% + 9px)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  max-height:min(520px,62vh)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  padding:8px!important;
  border-radius:17px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(243,162,22,.28) transparent!important;
  box-shadow:0 24px 64px rgba(12,8,24,.32),0 8px 22px rgba(12,8,24,.14)!important;
}
body.home .ntx-site-search__results::-webkit-scrollbar{width:8px!important}
body.home .ntx-site-search__results::-webkit-scrollbar-thumb{background:rgba(243,162,22,.26)!important;border-radius:999px!important}
body.home .ntx-site-search__results .nt-live-search-result{
  text-decoration:none!important;
  cursor:pointer!important;
}
body.home .ntx-site-search__results .nt-live-search-meta{
  position:sticky!important;
  top:0!important;
  z-index:4!important;
  margin:-2px -2px 6px!important;
  padding:8px 10px!important;
  border-bottom:1px solid rgba(112,97,72,.09)!important;
  border-radius:10px 10px 7px 7px!important;
  background:rgba(253,252,251,.97)!important;
  color:#766d7d!important;
  font-size:.69rem!important;
  font-weight:700!important;
  backdrop-filter:blur(10px)!important;
}
body.home .ntx-site-search.is-search-open{z-index:150!important}
body.home .ntx-site-hero__copy:has(.ntx-site-search.is-search-open){z-index:160!important}

/* --------------------------------------------------------------------------
   Homepage product filters: a clear control above the product cards. AJAX fills
   the grid from the complete live catalog; links remain valid fallbacks.
   -------------------------------------------------------------------------- */
body.home .nt-home-filter-block{
  margin:4px 0 20px!important;
  padding:14px!important;
  border:1px solid rgba(112,97,72,.11)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(55,39,75,.06)!important;
}
body.home .nt-home-filter-block__head{
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  margin:0 2px 10px!important;
}
body.home .nt-home-filter-block__head span{color:#292232!important;font-size:.86rem!important;font-weight:850!important}
body.home .nt-home-filter-block__head small{color:#817889!important;font-size:.72rem!important}
body.home .nt-home-filter-block .nt-toolfilter{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin:0!important;
  padding:2px 1px 4px!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin!important;
  scroll-snap-type:inline proximity!important;
}
body.home .nt-home-filter-block .nt-toolfilter__chip{
  flex:0 0 auto!important;
  scroll-snap-align:start!important;
  min-height:40px!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  text-decoration:none!important;
}
body.home #bm-listings.is-filter-loading .products-grid{
  opacity:.42!important;
  pointer-events:none!important;
  filter:saturate(.75)!important;
  transition:opacity .18s ease!important;
}
body.home #bm-listings.is-filter-loading .nt-home-filter-block::after{
  content:"Loading relevant products…";
  display:block;
  margin-top:9px;
  color:#93571a;
  font-size:.72rem;
  font-weight:750;
}

/* --------------------------------------------------------------------------
   Responsive hero: compact, readable, touch-first and still recognizably the
   same design rather than a shrunken desktop poster.
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  body.home .ntx-site-hero__shell{width:min(960px,calc(100% - 30px))!important}
  body.home .ntx-site-hero__grid{padding:28px 0 17px!important;grid-template-columns:minmax(0,1fr) minmax(320px,.82fr)!important;gap:22px!important}
  body.home .ntx-site-hero__tool-track{grid-auto-columns:136px!important}
  html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-floating-header__inner{width:min(960px,100%)!important}
}

@media (max-width:820px){
  html body.home.nt-clay.nt-v6.nt-principled #siteHeader{
    background:#fff!important;
    box-shadow:0 5px 18px rgba(41,28,74,.06)!important;
  }
  html body.home.nt-clay.nt-v6.nt-principled #siteHeader .nt-floating-header__inner{
    width:100%!important;
    max-width:none!important;
  }
  body.home .ntx-site-hero{
    padding:14px 0 20px!important;
    background:
      radial-gradient(circle at 85% 13%,rgba(34,103,255,.25),transparent 31%),
      radial-gradient(circle at 100% 42%,rgba(255,98,17,.25),transparent 30%),
      linear-gradient(180deg,#030712 0%,#080d1e 64%,#100c18 100%)!important;
  }
  body.home .ntx-site-hero__shell{
    width:100%!important;
    max-width:none!important;
    padding:0 14px!important;
  }
  body.home .ntx-site-hero__grid{
    grid-template-columns:1fr!important;
    min-height:0!important;
    gap:16px!important;
    padding:16px 0 9px!important;
  }
  body.home .ntx-site-hero__copy{max-width:none!important}
  body.home .ntx-site-hero__eyebrow{min-height:30px!important;padding:0 10px!important;font-size:.61rem!important}
  body.home .ntx-site-hero__title{
    max-width:100%!important;
    margin:12px 0 9px!important;
    font-size:clamp(2.12rem,9.5vw,3rem)!important;
    line-height:1.01!important;
    letter-spacing:-.046em!important;
  }
  body.home .ntx-site-hero__lead{margin-bottom:12px!important;font-size:.88rem!important;line-height:1.42!important}
  body.home .ntx-site-search{
    width:100%!important;
    min-height:56px!important;
    margin-bottom:12px!important;
    grid-template-columns:35px minmax(0,1fr) 50px!important;
    border-radius:15px!important;
  }
  body.home .ntx-site-search input{font-size:.82rem!important;min-height:46px!important}
  body.home .ntx-site-search button{width:50px!important;min-width:50px!important;min-height:46px!important;padding:0!important;justify-content:center!important;font-size:0!important}
  body.home .ntx-site-search button i{font-size:.88rem!important}
  body.home .ntx-site-search__results{
    max-height:min(430px,55dvh)!important;
    border-radius:15px!important;
    padding:6px!important;
  }
  body.home .ntx-site-search__results .nt-live-search-meta{font-size:.64rem!important;padding:7px 8px!important}
  body.home .ntx-site-hero__deal-row{grid-template-columns:minmax(0,1.2fr) minmax(116px,.8fr)!important;gap:8px!important;margin-bottom:12px!important}
  body.home .ntx-site-hero__discount{min-height:55px!important;padding:7px 12px!important;border-radius:18px!important}
  body.home .ntx-site-hero__discount strong{font-size:1.6rem!important}
  body.home .ntx-site-hero__secondary-cta{min-height:55px!important;padding:0 10px!important;font-size:.7rem!important}
  body.home .ntx-site-hero__benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  body.home .ntx-site-hero__benefits>div{min-height:52px!important;padding:7px!important}
  body.home .ntx-site-hero__visual{margin:0!important}
  body.home .ntx-site-hero__visual-frame{aspect-ratio:1.42/1!important;border-radius:18px!important}
  body.home .ntx-site-hero__visual-frame img{object-position:center 43%!important}
  body.home .ntx-site-hero__visual-shop{right:9px!important;bottom:9px!important;min-height:36px!important;padding:0 10px!important;font-size:.66rem!important}
  body.home .ntx-site-hero__tools{padding:9px 0 12px!important}
  body.home .ntx-site-hero__tools-head{margin:0 1px 8px!important}
  body.home .ntx-site-hero__tools-head small{display:block!important;font-size:.61rem!important}
  body.home .ntx-site-hero__tools-controls button{width:32px!important;height:32px!important}
  body.home .ntx-site-hero__tool-track{
    grid-auto-columns:122px!important;
    gap:8px!important;
    margin-right:-14px!important;
    padding-right:14px!important;
  }
  body.home .ntx-site-tool-card{min-height:112px!important;padding:10px!important}
  body.home .ntx-site-tool-card__icon{width:43px!important;height:43px!important}
  body.home .ntx-site-hero__footer{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    padding-top:11px!important;
  }
  body.home .ntx-site-hero__shop-now{grid-column:1/-1!important;grid-row:1!important;min-height:52px!important;font-size:1.04rem!important}
  body.home .ntx-site-hero__footer>div,
  body.home .ntx-site-hero__footer>a:not(.ntx-site-hero__shop-now){min-height:52px!important;padding:8px 6px!important}
  body.home .nt-home-filter-block{padding:11px!important;border-radius:15px!important}
  body.home .nt-home-filter-block__head{display:block!important;margin-bottom:8px!important}
  body.home .nt-home-filter-block__head small{display:block!important;margin-top:2px!important}
  body.home .nt-home-filter-block .nt-toolfilter{margin-right:-11px!important;padding-right:11px!important}
}

@media (max-width:480px){
  body.home .ntx-site-hero__shell{padding:0 10px!important}
  body.home .ntx-site-hero__grid{padding-top:12px!important}
  body.home .ntx-site-hero__title{font-size:clamp(1.98rem,10vw,2.65rem)!important}
  body.home .ntx-site-hero__lead{font-size:.82rem!important}
  body.home .ntx-site-search{grid-template-columns:31px minmax(0,1fr) 46px!important;padding-left:5px!important}
  body.home .ntx-site-search input{font-size:.76rem!important;padding-inline:5px!important}
  body.home .ntx-site-search button{width:46px!important;min-width:46px!important}
  body.home .ntx-site-hero__deal-row{grid-template-columns:1fr!important}
  body.home .ntx-site-hero__discount{width:100%!important;justify-content:center!important}
  body.home .ntx-site-hero__secondary-cta{min-height:44px!important}
  body.home .ntx-site-hero__visual-frame{aspect-ratio:1.32/1!important}
  body.home .ntx-site-hero__tools-head small{max-width:185px!important}
  body.home .ntx-site-hero__tool-track{grid-auto-columns:112px!important}
  body.home .ntx-site-hero__footer{grid-template-columns:1fr!important}
  body.home .ntx-site-hero__footer>div:nth-child(2){display:none!important}
  body.home .ntx-site-search__results{max-height:min(390px,52dvh)!important}
}

@media (max-width:370px){
  body.home .ntx-site-hero__title{font-size:1.92rem!important}
  body.home .ntx-site-hero__benefits{grid-template-columns:1fr!important}
  body.home .ntx-site-hero__visual-frame{aspect-ratio:1.22/1!important}
}
