/* ═══════════════════════════════════════════════════════════════
   FMST · THE PARTNER SHELVES · stage-6
   Brand-wall refinement layer (homepage #brands section only).
   Additive: same 53 logos, same links — new presentation.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Category auras — ambient department color ──────────── */
.b3-category{ position:relative; --shelf-hue:28; }
.b3-category[data-wm="bwm-lighting"]  { --shelf-hue:36;  }  /* amber   */
.b3-category[data-wm="bwm-cables"]    { --shelf-hue:217; }  /* blue    */
.b3-category[data-wm="bwm-switches"]  { --shelf-hue:262; }  /* violet  */
.b3-category[data-wm="bwm-pipes"]     { --shelf-hue:184; }  /* teal    */
.b3-category[data-wm="bwm-solar"]     { --shelf-hue:142; }  /* green   */
.b3-category[data-wm="bwm-batteries"] { --shelf-hue:158; }  /* mint    */
.b3-category[data-wm="bwm-breakers"]  { --shelf-hue:0;   }  /* red     */
.b3-category[data-wm="bwm-security"]  { --shelf-hue:200; }  /* steel   */
.b3-category::before{
  content:''; position:absolute; inset:-10px -40px;
  background:radial-gradient(55% 90% at 18% 55%,
    hsla(var(--shelf-hue), 85%, 55%, .055) 0%, transparent 70%);
  pointer-events:none; z-index:0;
  opacity:0; transition:opacity 1.2s ease;
}
.b3-category.shelf-in::before{ opacity:1; }

/* ── 2 · Header row — name · count · view-all ───────────────── */
.b3-cat-label{
  font-size:11px !important;
  color:rgba(255,255,255,.45) !important;
  letter-spacing:3.2px !important;
}
.b3-cat-label::before{
  background:linear-gradient(to right,
    hsla(var(--shelf-hue), 90%, 60%, .9),
    hsla(var(--shelf-hue), 90%, 60%, .15)) !important;
}
.shelf-meta{
  display:inline-flex; align-items:center; gap:14px;
  margin-left:auto; flex-shrink:0;
  font-size:10.5px; font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase;
}
.shelf-count{ color:rgba(255,255,255,.28); }
.shelf-viewall{
  color:hsla(var(--shelf-hue), 85%, 66%, .9);
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:gap .3s cubic-bezier(.16,1,.3,1), color .25s ease;
}
.shelf-viewall::after{ content:'→'; font-size:12px; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.shelf-viewall:hover{ gap:9px; color:hsla(var(--shelf-hue), 95%, 74%, 1); }
.shelf-viewall:hover::after{ transform:translateX(2px); }
/* re-balance the label's stretch line so meta sits at the right edge */
.b3-cat-label::after{ flex:1; }

/* ── 3 · The silver wall — grayscale rest state ─────────────── */
.b3-logo-item img{
  filter:grayscale(1) brightness(1.32) contrast(.96) !important;
  opacity:.58 !important;
  transition:opacity .5s cubic-bezier(.16,1,.3,1), filter .5s cubic-bezier(.16,1,.3,1),
             transform .45s cubic-bezier(.16,1,.3,1) !important;
}
/* Color bloom on hover */
.b3-logo-item:hover img{
  filter:grayscale(0) brightness(1.08) contrast(1) !important;
  opacity:1 !important;
  transform:scale(1.05) !important;
}
/* dept-tinted hover ring + bloom */
.b3-logo-item:hover{
  border-color:hsla(var(--shelf-hue), 80%, 62%, .35) !important;
  box-shadow:
    0 18px 52px rgba(0,0,0,.6),
    0 0 0 1px hsla(var(--shelf-hue), 80%, 60%, .14),
    0 0 44px hsla(var(--shelf-hue), 85%, 55%, .10) !important;
}
.b3-logo-item::before{
  background:radial-gradient(circle at 50% 60%,
    hsla(var(--shelf-hue), 85%, 58%, .13) 0%, transparent 65%) !important;
}

/* ── 4 · Trust revelation — badge slides up on hover ────────── */
.b3-auth-badge{
  display:flex !important;
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  align-items:center; justify-content:center; gap:6px;
  padding:5px 8px 6px;
  font-size:8.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:#7BE5A0;
  background:linear-gradient(to top, rgba(5,8,7,.94), rgba(5,8,7,.72) 70%, transparent);
  transform:translateY(102%);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.b3-auth-badge::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:#22C55E; box-shadow:0 0 7px rgba(34,197,94,.9); flex-shrink:0;
  animation:shelfDot 2.2s ease-in-out infinite;
}
@keyframes shelfDot{ 0%,100%{opacity:1} 50%{opacity:.45} }
.b3-logo-item:hover .b3-auth-badge{ transform:translateY(0); }

/* ── 5 · Flagship hero tile — first brand of each shelf ─────── */
.shelf-hero{ overflow:hidden; }
.shelf-hero img{
  filter:grayscale(0) brightness(1.06) !important;
  opacity:.94 !important;
}
.shelf-hero{
  border-color:hsla(var(--shelf-hue), 75%, 60%, .28) !important;
  background:
    radial-gradient(120% 110% at 50% 115%,
      hsla(var(--shelf-hue), 80%, 55%, .10) 0%, transparent 60%),
    rgba(255,255,255,.035) !important;
}
.shelf-hero::after{
  content:'★ FLAGSHIP';
  position:absolute; top:7px; left:9px; right:auto; height:auto;
  font-size:7.5px; font-weight:800; letter-spacing:1.8px;
  color:hsla(var(--shelf-hue), 90%, 72%, .95);
  background:hsla(var(--shelf-hue), 70%, 45%, .14);
  border:1px solid hsla(var(--shelf-hue), 75%, 60%, .3);
  padding:3px 7px; border-radius:5px;
  pointer-events:none; z-index:5;
}

/* ── 6 · Entry choreography — shelf fade + one light sweep ──── */
.b3-category{ opacity:0; transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.b3-category.shelf-in{ opacity:1; transform:none; }
.b3-logos{ position:relative; }
.shelf-sweep{
  position:absolute; top:0; bottom:0; width:220px; z-index:4;
  background:linear-gradient(100deg, transparent,
    rgba(255,255,255,.05) 40%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 60%, transparent);
  pointer-events:none; left:-260px; opacity:0;
}
.shelf-in .shelf-sweep{ animation:shelfSweep 1.5s cubic-bezier(.4,0,.2,1) .25s 1 forwards; }
@keyframes shelfSweep{
  0%{ left:-260px; opacity:1; }
  100%{ left:110%; opacity:1; }
}

/* ═══ v2 · CINEMATIC SCROLLABLE SHELVES (stage-7) ═══════════ */

/* ── 8 · The shelf itself — real scroll, hidden bar, mask edges */
.b3-logos.shelf-scroll{
  display:flex; align-items:stretch; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  padding:6px 2px 10px;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  cursor:grab;
}
.b3-logos.shelf-scroll::-webkit-scrollbar{ display:none; }
.b3-logos.shelf-scroll.shelf-grabbing{ cursor:grabbing; }
.b3-logos.shelf-scroll.shelf-grabbing .b3-logo-item{ pointer-events:none; }
/* old marquee edge overlays retired on scroll shelves */
.b3-logos.shelf-scroll::before, .b3-logos.shelf-scroll::after{ display:none !important; }
/* un-fade the edge you're resting against */
.b3-logos.shelf-scroll[data-at-start]{
  mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 70px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 70px), transparent 100%);
}
.b3-logos.shelf-scroll[data-at-end]{
  mask-image:linear-gradient(to right, transparent 0, #000 70px, #000 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 70px, #000 100%);
}
/* snap for touch momentum flicks only — drift stays free on desktop */
@media (pointer:coarse){
  .b3-logos.shelf-scroll{ scroll-snap-type:x proximity; }
  .b3-logos.shelf-scroll .b3-logo-item{ scroll-snap-align:start; }
}

/* ── 9 · Wide flagship hero tile ────────────────────────────── */
.shelf-hero-wide{
  width:440px !important; flex-shrink:0;
  flex-direction:row !important; gap:14px !important;
  padding:14px 22px 14px 16px !important;
  justify-content:flex-start !important;
}
.shelf-hero-wide img{
  width:44% !important; height:82% !important;
  flex-shrink:0; align-self:center;
}
.shelf-hero-caption{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  min-width:0; text-align:left; z-index:2;
}
.shc-name{
  font-size:15px; font-weight:800; letter-spacing:-.2px;
  color:rgba(255,255,255,.94); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shc-line{
  font-size:9px; font-weight:600; letter-spacing:.9px; text-transform:uppercase;
  color:rgba(255,255,255,.42); line-height:1.45;
}
.shc-explore{
  display:inline-flex; align-items:center; gap:6px; margin-top:3px;
  font-size:10.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:hsla(var(--shelf-hue), 88%, 68%, .95);
  transition:gap .3s cubic-bezier(.16,1,.3,1);
}
.shc-explore::after{ content:'→'; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.shelf-hero-wide:hover .shc-explore{ gap:9px; }
.shelf-hero-wide:hover .shc-explore::after{ transform:translateX(3px); }
/* hero carries its seal in the caption — no slide-up badge on top */
.shelf-hero-wide .b3-auth-badge{ display:none !important; }
/* ★ chip sits above the logo half only */
.shelf-hero-wide::after{ top:8px; left:10px; }

/* ── 10 · Scroll progress hairline under header ─────────────── */
.shelf-progress{
  height:2px; margin:10px 0 16px;
  background:rgba(255,255,255,.055);
  border-radius:2px; overflow:hidden;
}
.shelf-progress i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(to right,
    hsla(var(--shelf-hue), 85%, 58%, .85),
    hsla(var(--shelf-hue), 90%, 66%, .45));
  border-radius:2px;
  transition:transform .15s linear;
}

/* ── 11 · 40ms entry cascade ────────────────────────────────── */
.shelf-ready .b3-logo-item{ opacity:0; }
.shelf-ready.shelf-in .b3-logo-item{
  animation:shelfItemIn .7s cubic-bezier(.16,1,.3,1) var(--ci, 0ms) both;
}
@keyframes shelfItemIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

@media (max-width:768px){
  .shelf-hero-wide{ width:320px !important; padding:12px 16px !important; }
  .shc-name{ font-size:13px; }
  .shc-line{ font-size:8px; }
  .shelf-progress{ margin:8px 0 14px; }
  .b3-logos.shelf-scroll{
    mask-image:linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  }
}

/* ── Reduced motion / touch safety ──────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .b3-category{ opacity:1 !important; transform:none !important; }
  .shelf-sweep{ display:none !important; }
  .b3-auth-badge{ transition:none !important; }
  .b3-auth-badge::before{ animation:none !important; }
  .shelf-ready .b3-logo-item{ opacity:1 !important; animation:none !important; }
  .shelf-progress i{ transition:none !important; }
}
@media (max-width:768px){
  .shelf-meta{ gap:10px; }
  .shelf-count{ display:none; }
  .b3-auth-badge{ font-size:7.5px; letter-spacing:.8px; }
  .shelf-hero::after{ font-size:7px; padding:2px 6px; }
}