/* ─────────────────────────────────────────────────────────────────
   public/wsl-categories.css — styles for the shop-category rail.
   Paired with public/wsl-categories.js (renders the markup; this
   file styles it). All selectors namespaced .wsl-rail-* so they
   cannot collide with wsl-v2 chrome.

   Layout contract: the host element on a shop page should be a flex
   container with sufficient width for a 240px rail + main content.
   Example (in results.html):
     <div style="display:flex;gap:18px;align-items:flex-start;
                 position:relative;min-height:600px">
       <div id="wsl-rail-mount"></div>     <!-- this renders into here -->
       <main>...results grid...</main>
     </div>
   ───────────────────────────────────────────────────────────────── */

/* ─── LEFT RAIL (permanent, sticky, dark navy) ──────────────────── */
/* Host page parents (.page-wrap, etc.) need position:relative so the
   absolutely-positioned mega panel anchors correctly. Without this,
   .wsl-rail-mega resolves position against the viewport / body and
   never appears next to the rail on hover. */
.wsl-rail-host,.page-wrap{position:relative}
.wsl-rail{
  flex:0 0 240px;
  align-self:flex-start;     /* don't stretch to page-wrap's huge height — was
                                 stretching to ~200,000px on results pages,
                                 producing the navy "blob" Darryl reported */
  background:#0a1628;color:#fff;border-radius:10px;overflow:hidden;
  position:sticky;top:14px;
  box-shadow:0 2px 8px rgba(10,22,40,.08);
  font-family:'Barlow Condensed',sans-serif;
}
.wsl-rail-head{
  padding:12px 16px;background:#0a1628;color:#fcd34d;
  font-weight:900;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wsl-rail-head::before{content:'▤';font-size:18px;color:#fcd34d;line-height:1}
.wsl-rail-list{max-height:calc(100vh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.wsl-rail-list::-webkit-scrollbar{width:6px}
.wsl-rail-list::-webkit-scrollbar-track{background:transparent}
.wsl-rail-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:6px}
.wsl-rail-item{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:11px 14px;color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:background .12s,color .12s;
}
.wsl-rail-item .wsl-rail-arr{
  margin-left:auto;color:rgba(255,255,255,.4);font-size:14px;font-weight:700;
  transition:color .12s,transform .12s;
}
.wsl-rail-item:hover,
.wsl-rail-item:focus,
.wsl-rail-item.wsl-rail-active{background:#fcd34d;color:#0a1628;outline:none;text-decoration:none}
.wsl-rail-item:hover .wsl-rail-arr,
.wsl-rail-item.wsl-rail-active .wsl-rail-arr{color:#0a1628;transform:translateX(3px)}

/* ─── MEGA PANEL (desktop hover push-out) ─────────────────────────
   Width: 660px ideal, capped to (viewport - 280px) so it never
   overflows the right edge of the screen. (Was previously
   calc(100% - 258px) which broke when the parent was a narrow
   240px element like /news/'s #sidebarDesktop — the calc went
   negative and the mega rendered at ~46px wide, invisible.) */
.wsl-rail-mega{
  position:absolute;top:0;left:258px;
  width:660px;max-width:calc(100vw - 280px);
  background:#fff;border:1px solid #e2e8f0;border-radius:10px;
  box-shadow:0 12px 32px rgba(10,22,40,.14);
  padding:20px 22px;z-index:50;
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  pointer-events:none;
}
.wsl-rail-mega.wsl-rail-mega-open{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto}
.wsl-rail-mega-head{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:22px;color:#0a1628;letter-spacing:-.2px;text-transform:uppercase;
  margin:0 0 12px;padding:0 0 10px;border-bottom:2px solid #fcd34d;
  display:flex;align-items:center;gap:10px;
}
.wsl-rail-mega-head a{
  margin-left:auto;font-family:'Barlow',Arial,sans-serif;font-size:12px;
  font-weight:700;color:#0d9488;text-decoration:none;letter-spacing:.04em;
  text-transform:uppercase;border:1px solid #0d9488;padding:4px 10px;border-radius:999px;
}
.wsl-rail-mega-head a:hover{background:#f0fdfa}
.wsl-rail-mega-body{display:grid;grid-template-columns:1fr 200px;gap:20px;align-items:start}
.wsl-rail-mega-subs{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.wsl-rail-mega-subs a{
  display:block;padding:5px 0;color:#0a1628;text-decoration:none;
  font-family:'Barlow',Arial,sans-serif;font-size:13.5px;font-weight:500;line-height:1.3;
}
.wsl-rail-mega-subs a:hover{color:#0d9488}
.wsl-rail-mega-hero{
  width:200px;height:160px;border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
  position:relative;flex-shrink:0;text-decoration:none;display:block;
}
.wsl-rail-mega-hero img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease;
}
.wsl-rail-mega-hero:hover img{transform:scale(1.04)}
.wsl-rail-mega-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.wsl-rail-mega-hero-label{
  position:absolute;left:10px;right:10px;bottom:8px;color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.6);z-index:2;
}
.wsl-rail-mega-footer{
  margin-top:16px;padding-top:12px;border-top:1px solid #e2e8f0;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Barlow',sans-serif;font-size:12px;color:#64748b;
}
.wsl-rail-stores{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.wsl-rail-stores a{
  color:#0d9488;font-weight:700;text-decoration:none;
  padding:3px 10px;border:1px solid #99f6e4;border-radius:999px;
  font-size:11.5px;letter-spacing:.02em;
  transition:background .12s,border-color .12s,color .12s;
}
.wsl-rail-stores a:hover{background:#0d9488;color:#fff;border-color:#0d9488}

/* ─── MOBILE OVERLAY (inline accordion expansion) ─────────────────
   These three elements are mobile-only. Default display:none so they
   don't render on desktop — the mobile @media block below shows the
   trigger button + reveals the overlay/panel on user interaction. */
.wsl-rail-mob-trigger{display:none}
.wsl-rail-mob-overlay{display:none}
.wsl-rail-mob-panel{display:none}

@media (max-width: 899px){
  .wsl-rail{display:none}
  .wsl-rail-mega{display:none !important}
  .wsl-rail-mob-overlay{display:block}        /* visible, but opacity:0 until .show */
  .wsl-rail-mob-panel{display:flex}           /* visible, but translated off-screen until .show */
  /* Host page parents (e.g. results.html .page-wrap) are display:flex
     with align-items:stretch as the default. Without overrides the
     trigger button stretches to fill the page height (~200,000px on a
     tall results grid). flex-direction:column on .page-wrap stacks
     children top-to-bottom (correct on mobile); flex/align-self on
     the trigger itself guarantees it never stretches even if the
     host parent layout differs. */
  .page-wrap{flex-direction:column}
  .wsl-rail-mob-trigger{align-self:flex-start;flex:0 0 auto;width:100%}
  .wsl-rail-mob-trigger{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:14px 16px;margin:0 0 12px;
    background:#0a1628;color:#fcd34d;border:0;border-radius:8px;cursor:pointer;
    font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;
    letter-spacing:.12em;text-transform:uppercase;
  }
  .wsl-rail-mob-trigger::after{content:'▾';font-size:14px}
  .wsl-rail-mob-overlay{
    position:fixed;inset:0;background:rgba(10,22,40,.45);z-index:1900;
    opacity:0;pointer-events:none;transition:opacity .2s;display:none;
  }
  .wsl-rail-mob-overlay.wsl-rail-mob-show{display:block;opacity:1;pointer-events:auto}
  .wsl-rail-mob-panel{
    position:fixed;top:0;left:0;bottom:0;width:300px;background:#0a1628;
    z-index:2000;transform:translateX(-100%);transition:transform .22s ease;
    display:flex;flex-direction:column;overflow:hidden;
  }
  .wsl-rail-mob-panel.wsl-rail-mob-show{transform:translateX(0)}
  .wsl-rail-mob-head{
    padding:16px 18px;background:#0a1628;color:#fff;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .wsl-rail-mob-head h3{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:#fcd34d}
  .wsl-rail-mob-close{background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1;padding:4px}
  .wsl-rail-mob-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* Each category is a <details> — inline accordion, expands subs
     beneath the row. Per Darryl iter 3 — keeps the fly-out feel
     without taking over the screen with a second slide-in panel. */
  .wsl-rail-mob-cat{border-bottom:1px solid rgba(255,255,255,.06)}
  .wsl-rail-mob-cat-head{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;gap:8px;
    padding:14px 18px;color:#fff;
    font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;
    letter-spacing:.02em;text-transform:uppercase;line-height:1.1;
  }
  .wsl-rail-mob-cat-head::-webkit-details-marker{display:none}
  .wsl-rail-mob-arr{
    margin-left:auto;color:rgba(255,255,255,.45);
    font-size:18px;font-weight:700;
    transition:transform .15s,color .15s;
  }
  .wsl-rail-mob-cat[open] > .wsl-rail-mob-cat-head{background:rgba(252,211,77,.10);color:#fcd34d}
  .wsl-rail-mob-cat[open] > .wsl-rail-mob-cat-head .wsl-rail-mob-arr{transform:rotate(90deg);color:#fcd34d}
  .wsl-rail-mob-cat-body{background:#f8fafc;padding:6px 0 10px}
  .wsl-rail-mob-all{
    display:block;padding:10px 18px 10px 30px;
    color:#0d9488;text-decoration:none;
    font-family:'Barlow',sans-serif;font-weight:800;font-size:13.5px;
    background:#f0fdfa;border-bottom:1px solid #99f6e4;
  }
  .wsl-rail-mob-sub{
    display:block;padding:9px 18px 9px 30px;
    color:#475569;text-decoration:none;
    font-family:'Barlow',sans-serif;font-weight:500;font-size:14px;
    border-bottom:1px solid #e2e8f0;
  }
  .wsl-rail-mob-sub:hover,.wsl-rail-mob-sub:active{background:#fff;color:#0d9488}
  .wsl-rail-mob-stores{padding:10px 18px 8px 30px;display:flex;flex-wrap:wrap;gap:4px;background:transparent;border-top:1px solid #e2e8f0}
  .wsl-rail-mob-stores::before{
    content:'COMPARE ACROSS';display:block;width:100%;
    font-size:10px;font-weight:700;letter-spacing:.08em;color:#64748b;
    text-transform:uppercase;margin-bottom:4px;font-family:'Barlow Condensed',sans-serif;
  }
  .wsl-rail-mob-store{
    display:inline-block;padding:4px 10px;
    border:1px solid #99f6e4;border-radius:999px;
    color:#0d9488;background:#f0fdfa;
    font-weight:700;font-size:12px;text-decoration:none;
    font-family:'Barlow',sans-serif;
  }
  .wsl-rail-mob-store:hover{background:#0d9488;color:#fff;border-color:#0d9488}
}