/* =========================================================
   SELLNEX CATALOG MASTER
   Shared 1:1 shell for Producten + Listings.
   Upload: /public_html/telegram/assets/css/sellnex-catalog.css
   Load this file AFTER the page-specific <style> block.
   ========================================================= */

:root{
  --snx-bg:#f5f6f7;
  --snx-surface:#fff;
  --snx-soft:#eef0f2;
  --snx-text:#212529;
  --snx-muted:#7d848b;
  --snx-muted-2:#a0a6ac;
  --snx-border:rgba(33,37,41,.08);
  --snx-border-strong:rgba(33,37,41,.13);
  --snx-purple:#7777ff;
  --snx-green:#28a56b;
  --snx-yellow:#d99100;
  --snx-red:#e45757;
  --snx-glass:rgba(255,255,255,.72);
  --snx-glass-strong:rgba(255,255,255,.985);
  --snx-glass-border:rgba(255,255,255,.72);
  --snx-shadow-soft:0 8px 24px rgba(27,31,35,.055);
  --snx-highlight:inset 0 1px 0 rgba(255,255,255,.88);
  --snx-nav-height:74px;
}

html[data-theme="dark"]{
  --snx-bg:#111315;
  --snx-surface:#1b1e21;
  --snx-soft:#22262a;
  --snx-text:#f5f6f7;
  --snx-muted:#969da4;
  --snx-muted-2:#6f767d;
  --snx-border:rgba(255,255,255,.07);
  --snx-border-strong:rgba(255,255,255,.12);
  --snx-glass:rgba(27,30,33,.72);
  --snx-glass-strong:rgba(28,30,33,.985);
  --snx-glass-border:rgba(255,255,255,.08);
  --snx-shadow-soft:0 8px 24px rgba(0,0,0,.18);
  --snx-highlight:inset 0 1px 0 rgba(255,255,255,.055);
}

/* ---------- GLOBAL PAGE GEOMETRY ---------- */
html,body{
  width:100%;
  max-width:100%;
  min-height:100%;
}
body{
  margin:0!important;
  min-height:100dvh!important;
  overflow-x:hidden!important;
  color:var(--text,var(--snx-text))!important;
  background:
    radial-gradient(circle at 84% 8%,rgba(119,119,255,.075),transparent 28%),
    radial-gradient(circle at 12% 42%,rgba(40,165,107,.045),transparent 24%),
    var(--bg,var(--snx-bg))!important;
}

.app{
  width:100%!important;
  min-height:100dvh!important;
  padding:0 16px!important;
  position:relative!important;
}

/* ---------- EXACT SHARED BLACK HEADER ---------- */
.module-hero{
  width:auto!important;
  margin:0 -16px!important;
  padding:calc(16px + env(safe-area-inset-top)) 16px 54px!important;
  border-radius:0!important;
  color:#f5f6f7!important;
  position:relative!important;
  z-index:1!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 88% 7%,rgba(119,119,255,.22),transparent 30%),
    radial-gradient(circle at 7% 93%,rgba(40,165,107,.09),transparent 28%),
    linear-gradient(155deg,#1a1d21 0%,#101214 55%,#08090a 100%)!important;
  box-shadow:none!important;
}

.module-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,.06),
    transparent 28%,
    rgba(255,255,255,.018) 64%,
    transparent
  )!important;
}

.module-hero::after{
  content:none!important;
}

.module-hero .topbar{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:12px!important;
  position:relative!important;
  z-index:2!important;
}

.module-hero .back-button,
.module-hero .theme-button,
.module-hero .circle-button{
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:#f5f6f7!important;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.11),
    rgba(255,255,255,.055)
  )!important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
}

.module-hero .back-button svg,
.module-hero .circle-button svg{
  width:18px!important;
  height:18px!important;
}

.module-hero .module-switch{
  width:max-content!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:5px 8px 6px!important;
  border:1px solid transparent!important;
  border-radius:16px!important;
  background:transparent!important;
  color:#f5f6f7!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  justify-self:start!important;
  text-align:left!important;
}

.module-hero .module-switch.open{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.10)!important;
}

.module-hero .module-switch-main{
  min-width:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
}

.module-hero .module-switch-main strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:23px!important;
  line-height:1!important;
  letter-spacing:-.8px!important;
  font-weight:750!important;
}

.module-hero .module-switch-main svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 auto!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.1!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.module-hero .module-switch small{
  display:block!important;
  max-width:190px!important;
  margin-top:6px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:rgba(245,246,247,.48)!important;
  font-size:9px!important;
  line-height:1.15!important;
  font-weight:600!important;
  text-align:left!important;
}

/* ---------- EXACT SHARED WHITE SHEET ---------- */
.live-content{
  padding-top:0!important;
  margin:0 -16px!important;
  position:relative!important;
  z-index:2!important;
}

.catalog-sheet{
  width:auto!important;
  margin:-30px 0 0!important;
  min-height:calc(100dvh - 120px)!important;
  padding:26px 16px calc(var(--nav-height,var(--snx-nav-height)) + 28px + env(safe-area-inset-bottom))!important;
  border-radius:32px 32px 0 0!important;
  background:
    radial-gradient(circle at 84% 4%,rgba(119,119,255,.055),transparent 26%),
    radial-gradient(circle at 10% 42%,rgba(40,165,107,.035),transparent 24%),
    var(--bg,var(--snx-bg))!important;
  box-shadow:
    0 -10px 36px rgba(27,31,35,.075),
    inset 0 1px 0 rgba(255,255,255,.78)!important;
  position:relative!important;
  z-index:3!important;
}

html[data-theme="dark"] .catalog-sheet{
  box-shadow:
    0 -10px 36px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
}

/* Product title and Listing title same geometry */
.assortment-head,
.catalog-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 12px!important;
  padding:0 2px!important;
}

.assortment-title{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

.section-kicker,
.catalog-kicker{
  color:var(--muted,var(--snx-muted))!important;
  font-size:7px!important;
  font-weight:750!important;
  letter-spacing:1.05px!important;
  text-transform:uppercase!important;
}

.assortment-title strong,
.catalog-head h1{
  margin:0!important;
  font-size:15px!important;
  line-height:1.1!important;
  letter-spacing:-.3px!important;
  font-weight:750!important;
}

.catalog-head h1{margin-top:4px!important}

.results-meta{
  flex:0 0 auto!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:7.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
  text-align:right!important;
}

/* ---------- SEARCH: EXACT SAME ON BOTH ---------- */
.search-tools{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px!important;
  gap:8px!important;
  margin-bottom:9px!important;
}

#viewButton{
  display:none!important;
}

.search-box{
  height:54px!important;
  min-height:54px!important;
  padding:0 14px!important;
  border:1px solid rgba(33,37,41,.08)!important;
  border-radius:19px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:
    0 10px 28px rgba(27,31,35,.05),
    inset 0 1px 0 rgba(255,255,255,.98)!important;
  backdrop-filter:blur(22px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
}

html[data-theme="dark"] .search-box{
  background:rgba(31,34,38,.94)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.search-box > svg{
  width:19px!important;
  height:19px!important;
  flex:0 0 auto!important;
  stroke:var(--muted,var(--snx-muted))!important;
  fill:none!important;
  stroke-width:2!important;
}

.search-box input{
  width:100%!important;
  min-width:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:var(--text,var(--snx-text))!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:520!important;
  letter-spacing:-.15px!important;
}

.search-box input::placeholder{
  color:#9ba1a7!important;
  opacity:1!important;
}

html[data-theme="dark"] .search-box input::placeholder{
  color:#777e85!important;
}

.search-clear{
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
  border:0!important;
  border-radius:50%!important;
  place-items:center!important;
  background:var(--surface-soft,var(--snx-soft))!important;
  color:var(--muted,var(--snx-muted))!important;
}

.search-tool-button{
  width:54px!important;
  height:54px!important;
  padding:0!important;
  border:1px solid rgba(33,37,41,.08)!important;
  border-radius:19px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.92)!important;
  color:var(--text,var(--snx-text))!important;
  box-shadow:
    0 10px 28px rgba(27,31,35,.05),
    inset 0 1px 0 rgba(255,255,255,.98)!important;
}

html[data-theme="dark"] .search-tool-button{
  background:rgba(31,34,38,.94)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.search-tool-button svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* ---------- QUICK FILTERS ---------- */
.filters-scroll{
  overflow-x:auto!important;
  scrollbar-width:none!important;
  margin:0 -16px 12px!important;
  padding:0 16px!important;
}
.filters-scroll::-webkit-scrollbar{display:none!important}

.filters{
  display:flex!important;
  gap:6px!important;
  width:max-content!important;
}

.filter{
  min-height:38px!important;
  padding:0 14px!important;
  border:1px solid rgba(33,37,41,.07)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.80)!important;
  color:#6f757c!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:680!important;
  white-space:nowrap!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important;
}

html[data-theme="dark"] .filter{
  color:#a6adb4!important;
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.filter.active{
  color:#fff!important;
  background:#202327!important;
  border-color:transparent!important;
  box-shadow:0 8px 20px rgba(27,31,35,.13)!important;
}

.quick-filter-count,
.filter-count{
  display:inline-grid!important;
  min-width:19px!important;
  height:19px!important;
  margin-left:4px!important;
  padding:0 5px!important;
  place-items:center!important;
  border-radius:999px!important;
  background:var(--surface-soft,var(--snx-soft))!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:9px!important;
  font-weight:760!important;
}

.filter.active .quick-filter-count,
.filter.active .filter-count{
  background:rgba(255,255,255,.14)!important;
  color:inherit!important;
}

/* ---------- ENRICHMENT ---------- */
.enrichment-line,
.meta-line{
  min-height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:-1px 1px 8px!important;
  color:#90969d!important;
  font-size:9px!important;
}

.enrichment-progress{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}

.enrichment-dot{
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:var(--purple,var(--snx-purple))!important;
  box-shadow:0 0 0 4px rgba(119,119,255,.10)!important;
}

#viewLabel{display:none!important}

/* ---------- FLAT PRODUCT + LISTING ROWS ---------- */
.product-list,
.listing-list,
html[data-theme="dark"] .product-list,
html[data-theme="dark"] .listing-list{
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.product-card,
.listing-card,
.product-list.card-view .product-card,
.listing-list.card-view .listing-card{
  width:100%!important;
  min-height:96px!important;
  padding:12px 0!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) auto!important;
  grid-template-rows:none!important;
  gap:12px!important;
  align-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  position:relative!important;
  transform:none!important;
}

.product-card + .product-card::before,
.listing-card + .listing-card::before{
  content:""!important;
  position:absolute!important;
  left:76px!important;
  right:0!important;
  top:0!important;
  height:1px!important;
  background:var(--border,var(--snx-border))!important;
}

.product-card:active,
.listing-card:active{
  transform:none!important;
  background:rgba(119,119,255,.04)!important;
}

/* Images */
.product-image,
.listing-image,
.product-list.card-view .product-image,
.listing-list.card-view .listing-image{
  width:64px!important;
  height:70px!important;
  border:1px solid var(--border,var(--snx-border))!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:none!important;
}

.product-image img,
.listing-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#fff!important;
}

/* Main text */
.product-info,
.listing-info{min-width:0!important}

.product-status-row,
.listing-status-row{
  display:none!important;
}

.product-name,
.listing-name,
.product-list.card-view .product-name,
.listing-list.card-view .listing-name{
  margin:0!important;
  padding-right:4px!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  font-size:11.5px!important;
  line-height:1.18!important;
  letter-spacing:-.2px!important;
  font-weight:730!important;
}

.product-meta,
.listing-meta{
  margin-top:6px!important;
  display:block!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:7px!important;
  line-height:1.35!important;
}

.product-meta-item,
.listing-meta .meta-item{
  display:block!important;
}

.product-meta-item::before,
.listing-meta .meta-item::before{
  display:none!important;
}

.card-data-tags{display:none!important}

/* Right column */
.product-side,
.listing-side,
.product-list.card-view .product-side,
.listing-list.card-view .listing-side{
  width:82px!important;
  min-width:82px!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:7px!important;
}

.product-price,
.listing-price{
  font-size:10px!important;
  line-height:1!important;
  font-weight:750!important;
  white-space:nowrap!important;
}

.listing-mini{display:none!important}

.product-bottom,
.listing-bottom{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
}

.stock-badge{
  min-width:0!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:6.5px!important;
  line-height:1.1!important;
  font-weight:650!important;
}

.product-card .stock-badge::before,
.listing-card .stock-badge::before{
  content:"Voorraad "!important;
}

.product-arrow,
.listing-arrow{display:none!important}

/* Product / listing status pills */
.product-active-pill,
.listing-active-pill{
  min-height:25px!important;
  padding:0 9px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:750!important;
}

.product-active-pill.active,
.listing-active-pill.active{
  color:#167349!important;
  background:#c9f5db!important;
  border-color:rgba(40,165,107,.08)!important;
}

.product-active-pill.warning,
.listing-active-pill.warning{
  color:#9b6500!important;
  background:#fff0c7!important;
  border-color:rgba(217,145,0,.10)!important;
}

.product-active-pill.offline,
.listing-active-pill.offline{
  color:#8a3c3c!important;
  background:#fde0e0!important;
  border-color:rgba(228,87,87,.10)!important;
}

.product-active-pill.loading,
.listing-active-pill.loading{
  color:var(--muted,var(--snx-muted))!important;
  background:var(--surface-soft,var(--snx-soft))!important;
  border-color:var(--border,var(--snx-border))!important;
}

/* Existing listing status can also render as pill without HTML changes */
.listing-side .listing-status{
  min-height:25px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:7px!important;
  font-weight:750!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.listing-side .listing-status.active{
  color:#167349!important;
  background:#c9f5db!important;
}
.listing-side .listing-status.warning{
  color:#9b6500!important;
  background:#fff0c7!important;
}
.listing-side .listing-status.offline{
  color:#8a3c3c!important;
  background:#fde0e0!important;
}

html[data-theme="dark"] .product-active-pill.active,
html[data-theme="dark"] .listing-active-pill.active,
html[data-theme="dark"] .listing-side .listing-status.active{
  color:#7ce0ab!important;
  background:rgba(40,165,107,.18)!important;
}
html[data-theme="dark"] .product-active-pill.warning,
html[data-theme="dark"] .listing-active-pill.warning,
html[data-theme="dark"] .listing-side .listing-status.warning{
  color:#f0bc59!important;
  background:rgba(217,145,0,.16)!important;
}
html[data-theme="dark"] .product-active-pill.offline,
html[data-theme="dark"] .listing-active-pill.offline,
html[data-theme="dark"] .listing-side .listing-status.offline{
  color:#f08d8d!important;
  background:rgba(228,87,87,.16)!important;
}

.price-change{
  margin:0!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:6.2px!important;
  line-height:1.1!important;
  font-weight:650!important;
  white-space:nowrap!important;
}
.price-change.up{color:var(--green,var(--snx-green))!important}
.price-change.down{color:var(--red,var(--snx-red))!important}

/* ---------- SHARED FILTER SHEET ---------- */
.filter-sheet{
  background:var(--snx-glass-strong)!important;
  border-color:rgba(255,255,255,.98)!important;
}

html[data-theme="dark"] .filter-sheet{
  background:rgba(28,30,33,.985)!important;
  border-color:rgba(255,255,255,.09)!important;
}

.sheet-head h3{
  margin:0!important;
  font-size:29px!important;
  line-height:1.04!important;
  letter-spacing:-1.25px!important;
  font-weight:760!important;
}

.sheet-head p{
  margin-top:7px!important;
  color:#8b9299!important;
  font-size:12px!important;
  line-height:1.45!important;
}

html[data-theme="dark"] .sheet-head p{color:#9ca3aa!important}

.filter-group{padding:18px 0!important}
.filter-group-title{margin-bottom:11px!important}

.filter-group-title strong{
  color:var(--text,var(--snx-text))!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:760!important;
}

.filter-group-title small{
  color:#9aa0a6!important;
  font-size:10px!important;
}

.choice-grid{gap:8px!important}

.choice{
  min-height:40px!important;
  padding:0 14px!important;
  border:1px solid rgba(33,37,41,.09)!important;
  border-radius:999px!important;
  background:#f5f6f7!important;
  color:#737a81!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:680!important;
}

html[data-theme="dark"] .choice{
  color:#aab0b6!important;
  background:#22262a!important;
  border-color:rgba(255,255,255,.08)!important;
}

.choice.active{
  color:#5d5df5!important;
  background:#f0efff!important;
  border-color:rgba(119,119,255,.28)!important;
}

html[data-theme="dark"] .choice.active{
  color:#b2b2ff!important;
  background:rgba(119,119,255,.16)!important;
}

.sheet-action{
  height:48px!important;
  font-size:12px!important;
  font-weight:760!important;
}

/* ---------- MODULE MENU EXACT ---------- */
.module-menu{
  top:calc(66px + env(safe-area-inset-top))!important;
  width:min(276px,calc(100vw - 32px))!important;
}

/* ---------- MOBILE ---------- */
@media(max-width:699px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }

  .app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .module-hero,
  .live-content{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:0!important;
  }

  .module-hero{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .catalog-sheet{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

@media(max-width:430px){
  .search-box input{font-size:14px!important}
  .filter{font-size:11px!important;padding:0 13px!important}
  .sheet-head h3{font-size:27px!important}
  .choice{font-size:10.5px!important}

  .product-card,
  .listing-card,
  .product-list.card-view .product-card,
  .listing-list.card-view .listing-card{
    grid-template-columns:58px minmax(0,1fr) 76px!important;
    gap:10px!important;
    padding:11px 0!important;
  }

  .product-card + .product-card::before,
  .listing-card + .listing-card::before{
    left:68px!important;
    right:0!important;
  }

  .product-image,
  .listing-image,
  .product-list.card-view .product-image,
  .listing-list.card-view .listing-image{
    width:58px!important;
    height:64px!important;
    border-radius:14px!important;
  }

  .product-side,
  .listing-side,
  .product-list.card-view .product-side,
  .listing-list.card-view .listing-side{
    width:76px!important;
    min-width:76px!important;
  }

  .product-name,
  .listing-name,
  .product-list.card-view .product-name,
  .listing-list.card-view .listing-name{
    font-size:10.8px!important;
  }

  .product-active-pill,
  .listing-active-pill,
  .listing-side .listing-status{
    min-height:23px!important;
    padding:0 8px!important;
    font-size:6.7px!important;
  }
}

@media(max-width:370px){
  .app{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .module-hero{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .catalog-sheet{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .search-tools{
    grid-template-columns:minmax(0,1fr) 50px!important;
  }

  .search-tool-button{
    width:50px!important;
    height:54px!important;
  }
}

@media(min-width:700px){
  .app{
    max-width:720px!important;
    margin:0 auto!important;
  }

  .module-hero,
  .live-content{
    margin-left:0!important;
    margin-right:0!important;
  }
}


/* =========================================================
   INVENTORY ADAPTER — SAME SELLNEX CATALOG MASTER
   Alleen Voorraad-specifieke selectors. Producten/Listings
   worden hierdoor niet gewijzigd.
   ========================================================= */

.snx-inventory .module-hero .module-topbar{
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:12px!important;
  position:relative!important;
  z-index:2!important;
}

.snx-inventory .module-hero .module-back,
.snx-inventory .module-hero .module-more{
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:#f5f6f7!important;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
}

.snx-inventory .module-hero .module-back svg,
.snx-inventory .module-hero .module-more svg{
  width:18px!important;
  height:18px!important;
}

.snx-inventory .inventory-shell{
  width:auto!important;
  max-width:none!important;
  margin:-30px -16px 0!important;
  min-height:calc(100dvh - 120px)!important;
  padding:26px 16px calc(40px + env(safe-area-inset-bottom))!important;
  border-radius:32px 32px 0 0!important;
  background:
    radial-gradient(circle at 84% 4%,rgba(119,119,255,.055),transparent 26%),
    radial-gradient(circle at 10% 42%,rgba(40,165,107,.035),transparent 24%),
    var(--bg,var(--snx-bg))!important;
  box-shadow:
    0 -10px 36px rgba(27,31,35,.075),
    inset 0 1px 0 rgba(255,255,255,.78)!important;
  position:relative!important;
  z-index:3!important;
}

html[data-theme="dark"] .snx-inventory .inventory-shell{
  box-shadow:
    0 -10px 36px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.snx-inventory .inventory-shell .page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

.snx-inventory .inventory-shell .top{
  display:none!important;
}

/* Zelfde rustige cataloguskop als Producten/Listings */
.snx-inventory .inventory-shell .head{
  padding:0 2px 18px!important;
}

.snx-inventory .inventory-shell .head .eyebrow{
  color:var(--muted,var(--snx-muted))!important;
  font-size:7px!important;
  line-height:1.1!important;
  font-weight:750!important;
  letter-spacing:1.05px!important;
  text-transform:uppercase!important;
}

.snx-inventory .inventory-shell .head h1{
  margin:5px 0 8px!important;
  max-width:none!important;
  font-size:24px!important;
  line-height:1.02!important;
  letter-spacing:-.9px!important;
  font-weight:760!important;
}

.snx-inventory .inventory-shell .head p{
  margin:0!important;
  max-width:440px!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:9px!important;
  line-height:1.45!important;
}

/* Voorraadzoeker gelijk trekken met cataloguszoeker */
.snx-inventory .toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 96px!important;
  gap:7px!important;
  margin-top:18px!important;
}

.snx-inventory .search-wrap{
  min-width:0!important;
}

.snx-inventory .search{
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  padding:0 42px 0 14px!important;
  border:1px solid rgba(33,37,41,.08)!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.92)!important;
  color:var(--text,var(--snx-text))!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:520!important;
  letter-spacing:-.15px!important;
  box-shadow:0 10px 28px rgba(27,31,35,.05),inset 0 1px 0 rgba(255,255,255,.98)!important;
}

html[data-theme="dark"] .snx-inventory .search{
  background:rgba(31,34,38,.94)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.snx-inventory .search::placeholder{
  color:#9ba1a7!important;
  opacity:1!important;
}

html[data-theme="dark"] .snx-inventory .search::placeholder{
  color:#777e85!important;
}

.snx-inventory .search-icon{
  width:19px!important;
  height:19px!important;
  right:14px!important;
  stroke-width:2!important;
}

.snx-inventory .toolbar > .filter{
  width:96px!important;
  height:54px!important;
  min-height:54px!important;
  min-width:96px!important;
  padding:0 12px!important;
  border:1px solid rgba(33,37,41,.08)!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.92)!important;
  color:var(--text,var(--snx-text))!important;
  font-size:11px!important;
  font-weight:700!important;
  box-shadow:0 10px 28px rgba(27,31,35,.05),inset 0 1px 0 rgba(255,255,255,.98)!important;
}

html[data-theme="dark"] .snx-inventory .toolbar > .filter{
  background:rgba(31,34,38,.94)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.snx-inventory .toolbar > .filter svg{
  width:18px!important;
  height:18px!important;
}

/* Voorraadlijsten rustiger, maar instellingen blijven intact */
.snx-inventory .section-title{
  margin:22px 2px 10px!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:7px!important;
  font-weight:750!important;
  letter-spacing:1.05px!important;
  text-transform:uppercase!important;
}

.snx-inventory .list{
  display:block!important;
}

.snx-inventory .list .card{
  margin:0!important;
  padding:14px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
}

.snx-inventory .list .card + .card{
  border-top:1px solid var(--border,var(--snx-border))!important;
}

.snx-inventory .list .card::after{
  content:none!important;
}

.snx-inventory .product-row{
  grid-template-columns:64px minmax(0,1fr) 68px!important;
  gap:12px!important;
}

.snx-inventory .product-icon{
  width:64px!important;
  height:70px!important;
  border-radius:16px!important;
  border:1px solid var(--border,var(--snx-border))!important;
  background:#fff!important;
}

.snx-inventory .product-icon img{
  padding:0!important;
  object-fit:contain!important;
}

.snx-inventory .product-title{
  font-size:11.5px!important;
  line-height:1.18!important;
  letter-spacing:-.2px!important;
  font-weight:730!important;
}

.snx-inventory .product-ean{
  margin-top:6px!important;
  color:var(--muted,var(--snx-muted))!important;
  font-size:7px!important;
  line-height:1.35!important;
}

.snx-inventory .product-category{
  min-height:22px!important;
  margin-top:7px!important;
  padding:0 8px!important;
  font-size:6.5px!important;
}

.snx-inventory .stock{
  min-width:68px!important;
}

.snx-inventory .stock strong{
  font-size:20px!important;
  line-height:1!important;
  letter-spacing:-.8px!important;
}

.snx-inventory .stock span{
  margin-top:5px!important;
  font-size:6px!important;
}

.snx-inventory .status{
  min-height:25px!important;
  margin-top:12px!important;
  padding:0 9px!important;
  font-size:7px!important;
}

.snx-inventory .settings{
  margin-top:12px!important;
  padding-top:12px!important;
}

/* Instellingen als rustige liquid subsectie */
.snx-inventory .company-card{
  padding:15px!important;
  border:1px solid var(--glass-border,var(--snx-glass-border))!important;
  border-radius:22px!important;
  background:var(--glass,var(--snx-glass))!important;
  box-shadow:var(--shadow-soft,var(--snx-shadow-soft)),var(--highlight,var(--snx-highlight))!important;
}

@media(max-width:699px){
  .snx-inventory{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .snx-inventory .module-hero{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:0!important;
  }

  .snx-inventory .inventory-shell{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:0!important;
  }
}

@media(max-width:430px){
  .snx-inventory .toolbar{
    grid-template-columns:minmax(0,1fr) 92px!important;
  }

  .snx-inventory .toolbar > .filter{
    width:92px!important;
    min-width:92px!important;
  }

  .snx-inventory .search{
    font-size:14px!important;
  }

  .snx-inventory .product-row{
    grid-template-columns:58px minmax(0,1fr) 64px!important;
    gap:10px!important;
  }

  .snx-inventory .product-icon{
    width:58px!important;
    height:64px!important;
    border-radius:14px!important;
  }

  .snx-inventory .stock{
    min-width:64px!important;
  }

  .snx-inventory .product-title{
    font-size:10.8px!important;
  }
}

@media(max-width:370px){
  .snx-inventory{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .snx-inventory .module-hero{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .snx-inventory .inventory-shell{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}
/* =========================================================
   INVENTORY FILTER — DEFINITIEVE FULL-WIDTH FIX
   Zelfde edge-to-edge bottom sheet als Listings.
   BELANGRIJK: dit blok staat bewust BUITEN alle media queries.
   ========================================================= */

.snx-inventory .inventory-filter-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:5000!important;
  width:100vw!important;
  max-width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:rgba(13,15,18,.30)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .20s ease,visibility .20s ease!important;
}

.snx-inventory .inventory-filter-backdrop[hidden]{
  display:flex!important;
}

.snx-inventory .inventory-filter-backdrop.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

.snx-inventory .inventory-filter-sheet{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100vw!important;
  max-width:100vw!important;
  min-width:100vw!important;
  max-height:min(84dvh,760px)!important;
  margin:0!important;
  padding:10px 28px calc(18px + env(safe-area-inset-bottom))!important;

  border-top:1px solid rgba(255,255,255,.98)!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-radius:32px 32px 0 0!important;

  background:rgba(255,255,255,.985)!important;
  box-shadow:
    0 -22px 60px rgba(27,31,35,.18),
    inset 0 1px 0 rgba(255,255,255,1)!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;

  transform:translate3d(0,105%,0)!important;
  transform-origin:center bottom!important;
  opacity:1!important;

  backdrop-filter:blur(30px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(180%)!important;

  transition:transform .26s cubic-bezier(.2,.8,.2,1)!important;
}

.snx-inventory .inventory-filter-backdrop.open .inventory-filter-sheet{
  transform:translate3d(0,0,0)!important;
}

html[data-theme="dark"] .snx-inventory .inventory-filter-sheet{
  background:rgba(28,30,33,.985)!important;
  border-top-color:rgba(255,255,255,.09)!important;
  box-shadow:
    0 -22px 60px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* inhoud blijft mooi van de schermrand */
.snx-inventory .inventory-filter-sheet .filter-sheet-handle,
.snx-inventory .inventory-filter-sheet .filter-sheet-head,
.snx-inventory .inventory-filter-sheet .filter-group,
.snx-inventory .inventory-filter-sheet .filter-sheet-actions{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

.snx-inventory .inventory-filter-sheet .filter-sheet-handle{
  width:42px!important;
  height:4px!important;
  margin:2px auto 13px!important;
  border-radius:999px!important;
}

.snx-inventory .inventory-filter-sheet .filter-sheet-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:18px!important;
}

.snx-inventory .inventory-filter-sheet .filter-sheet-head h3{
  margin:0!important;
  font-size:29px!important;
  line-height:1.04!important;
  letter-spacing:-1.25px!important;
  font-weight:760!important;
}

.snx-inventory .inventory-filter-sheet .filter-sheet-head p{
  margin:7px 0 0!important;
  color:#8b9299!important;
  font-size:12px!important;
  line-height:1.45!important;
}

.snx-inventory .inventory-filter-sheet .filter-group{
  margin:0!important;
  padding:18px 0!important;
  border-top:1px solid var(--border,var(--snx-border))!important;
}

.snx-inventory .inventory-filter-sheet .filter-group:first-of-type{
  border-top:0!important;
  padding-top:0!important;
}

.snx-inventory .inventory-filter-sheet .filter-group-title{
  margin:0 0 11px!important;
  color:var(--text,var(--snx-text))!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:760!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

.snx-inventory .inventory-filter-sheet .filter-chip-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:0!important;
}

.snx-inventory .inventory-filter-sheet .filter-chip{
  min-height:40px!important;
  padding:0 14px!important;
  border:1px solid rgba(33,37,41,.09)!important;
  border-radius:999px!important;
  background:#f5f6f7!important;
  color:#737a81!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:680!important;
}

.snx-inventory .inventory-filter-sheet .filter-chip.active{
  color:#5d5df5!important;
  background:#f0efff!important;
  border-color:rgba(119,119,255,.28)!important;
}

.snx-inventory .inventory-filter-sheet .filter-sheet-actions{
  position:sticky!important;
  bottom:0!important;
  display:grid!important;
  grid-template-columns:1fr 1.5fr!important;
  gap:8px!important;
  margin-top:0!important;
  padding:12px 0 0!important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.985) 32%
  )!important;
}

.snx-inventory .inventory-filter-sheet .filter-reset,
.snx-inventory .inventory-filter-sheet .filter-apply{
  min-height:48px!important;
  border-radius:15px!important;
  font-size:12px!important;
  font-weight:760!important;
}

@media(max-width:430px){
  .snx-inventory .inventory-filter-sheet{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    padding-left:28px!important;
    padding-right:28px!important;
    border-radius:32px 32px 0 0!important;
  }

  .snx-inventory .inventory-filter-sheet .filter-sheet-head h3{
    font-size:27px!important;
  }

  .snx-inventory .inventory-filter-sheet .filter-chip{
    font-size:10.5px!important;
  }
}

@media(max-width:370px){
  .snx-inventory .inventory-filter-sheet{
    padding-left:22px!important;
    padding-right:22px!important;
  }
}

/* =========================================================
   INVENTORY FILTER — VIEWPORT FIX
   Filter staat buiten .snx-inventory in de DOM.
   Daarom bewust ongescoped op #inventoryFilterSheet.
   ========================================================= */

#inventoryFilterSheet.inventory-filter-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:5000!important;
  width:100vw!important;
  max-width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:stretch!important;
  overflow:hidden!important;
  background:rgba(13,15,18,.30)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .20s ease,visibility .20s ease!important;
}

#inventoryFilterSheet.inventory-filter-backdrop[hidden]{
  display:flex!important;
}

#inventoryFilterSheet.inventory-filter-backdrop.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#inventoryFilterSheet > .inventory-filter-sheet{
  position:relative!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  max-width:100vw!important;
  min-width:100vw!important;
  margin:0!important;
  padding:10px 28px calc(18px + env(safe-area-inset-bottom))!important;
  max-height:min(84dvh,760px)!important;

  border-top:1px solid rgba(255,255,255,.98)!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-radius:32px 32px 0 0!important;

  background:rgba(255,255,255,.985)!important;
  box-shadow:
    0 -22px 60px rgba(27,31,35,.18),
    inset 0 1px 0 rgba(255,255,255,1)!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;

  transform:translate3d(0,105%,0)!important;
  transform-origin:center bottom!important;
  opacity:1!important;

  backdrop-filter:blur(30px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(180%)!important;
  transition:transform .26s cubic-bezier(.2,.8,.2,1)!important;
}

#inventoryFilterSheet.open > .inventory-filter-sheet{
  transform:translate3d(0,0,0)!important;
}

html[data-theme="dark"] #inventoryFilterSheet > .inventory-filter-sheet{
  background:rgba(28,30,33,.985)!important;
  border-top-color:rgba(255,255,255,.09)!important;
  box-shadow:
    0 -22px 60px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
}

#inventoryFilterSheet .filter-sheet-head,
#inventoryFilterSheet .filter-group,
#inventoryFilterSheet .filter-sheet-actions{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

#inventoryFilterSheet .filter-sheet-actions{
  padding-left:0!important;
  padding-right:0!important;
}

@media(max-width:430px){
  #inventoryFilterSheet > .inventory-filter-sheet{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }
}

@media(max-width:370px){
  #inventoryFilterSheet > .inventory-filter-sheet{
    padding-left:22px!important;
    padding-right:22px!important;
  }
}