/* ============================================================
   EMIRAD MORGAN — Sitewide chrome (header, search, sidebar, footer)
   Loads on EVERY page via functions.php, not just the homepage.
   ============================================================ */

:root{
  --ink:#1A1A1A;
  --sub:#6B6F76;
  --line:#E5E5E5;
  --bg:#FFFFFF;
  --bg-alt:#F7F6F4;
  --flame:#E4622A;
  --flame-dark:#c9531f;
  --flame-tint:#FDEEE7;
  --charcoal:#181A1D;
  --brass:#B4914F;
  --green:#1E8E3E;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1360px; margin:0 auto; padding:0 20px;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--flame); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ---------- UTILITY BAR ---------- */
.utility{background:var(--charcoal); color:#B9BCC1; font-size:12px;}
.utility .wrap{display:flex; justify-content:space-between; padding:7px 20px; flex-wrap:wrap; gap:4px;}
.utility .left{display:flex; gap:18px; flex-wrap:wrap;}
.utility .right{display:flex; gap:18px;}
.utility a:hover{color:#fff;}
@media (max-width:600px){
  .utility .right{display:none;} /* keep shipping info, drop secondary links on tiny screens */
}

/* ---------- HEADER ---------- */
header{border-bottom:1px solid var(--line); background:#fff;}
.head-row{display:flex; align-items:center; gap:24px; padding:16px 20px; flex-wrap:wrap;}
.wordmark{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.wordmark .mark{
  width:34px; height:34px; background:var(--flame);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:13px; color:#fff;
}
.wordmark .name{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:18px; line-height:1.1;}
.wordmark .name span{display:block; font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:9px; color:var(--sub); letter-spacing:0.12em; margin-top:1px;}

.search{flex:1; display:flex; min-width:0; max-width:660px; border:2px solid var(--flame); border-radius:2px;}
.search select{background:#fff; border:none; border-right:1px solid var(--line); padding:0 10px; font-size:12.5px; color:var(--sub); font-family:'Inter',sans-serif; flex-shrink:0;}
.search input{flex:1; min-width:0; border:none; padding:10px 12px; font-size:14px;}
.search button{background:var(--flame); border:none; color:#fff; font-weight:600; padding:0 20px; cursor:pointer; font-size:14px; flex-shrink:0;}
.search button:hover{background:var(--flame-dark);}

.head-actions{display:flex; align-items:center; gap:20px; flex-shrink:0;}
.head-actions .item{font-size:12px; color:var(--sub); text-align:left; line-height:1.3; cursor:pointer;}
.head-actions .item strong{display:block; font-size:13px; color:var(--ink); font-weight:600;}
.head-actions .item:hover strong{color:var(--flame);}
.btn{display:inline-block; padding:9px 18px; font-size:13px; font-weight:600; border:1.5px solid var(--flame); color:var(--flame); white-space:nowrap; border-radius:2px;}
.btn:hover{background:var(--flame-tint);}
.btn.solid{background:var(--flame); color:#fff; border-color:var(--flame);}
.btn.solid:hover{background:var(--flame-dark);}

/* --- Real mobile breakpoints for the header (this was the fixed-550px bug) --- */
@media (max-width:1000px){
  .head-actions .item{display:none;} /* keep only the Wholesale Access button */
}
@media (max-width:760px){
  .head-row{flex-direction:column; align-items:stretch; gap:12px; padding:14px 16px;}
  .wordmark{justify-content:center;}
  .search{max-width:none; width:100%;}
  .search select{display:none;} /* category filter moves to sidebar/catbar on mobile */
  .head-actions{justify-content:center; width:100%;}
}

/* ---------- CATEGORY STRIP UNDER HEADER ---------- */
.catbar{border-bottom:1px solid var(--line); background:#fff;}
.catbar .wrap{display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.catbar a{font-size:12.5px; font-weight:500; padding:11px 16px; white-space:nowrap; color:var(--sub); border-bottom:2px solid transparent;}
.catbar a:hover, .catbar a.active{color:var(--flame); border-bottom-color:var(--flame);}

/* ---------- BODY LAYOUT: SIDEBAR + MAIN ---------- */
.em-layout{display:grid; grid-template-columns:236px 1fr; gap:20px; padding:20px; max-width:1360px; margin:0 auto;}

.em-sidebar{border:1px solid var(--line); background:#fff; height:fit-content;}
.em-sidebar .sb-head{
  padding:12px 16px; background:var(--charcoal); color:#fff; font-size:12.5px; font-weight:600;
  letter-spacing:0.02em; display:flex; justify-content:space-between; align-items:center;
}
.em-sidebar .sb-toggle{display:none; background:none; border:none; color:#fff; font-size:14px; cursor:pointer;}
.em-sidebar ul{list-style:none;}
.em-sidebar > ul > li{border-bottom:1px solid var(--line);}
.em-sidebar > ul > li > a{display:flex; justify-content:space-between; align-items:center; padding:11px 16px; font-size:13px; font-weight:500;}
.em-sidebar > ul > li:hover > a{color:var(--flame); background:var(--flame-tint);}
.em-sidebar .sub{padding:0 16px 10px 28px; display:flex; flex-direction:column; gap:6px;}
.em-sidebar .sub a{font-size:12px; color:var(--sub);}
.em-sidebar .sub a:hover{color:var(--flame);}
.em-sidebar .count{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--sub);}

/* --- Mobile: sidebar becomes a collapsible panel instead of disappearing --- */
@media (max-width:960px){
  .em-layout{grid-template-columns:1fr; padding:14px;}
  .em-sidebar .sb-toggle{display:block;}
  .em-sidebar ul{display:none;}
  .em-sidebar.open ul{display:block;}
}

/* ---------- MAIN COLUMN ---------- */
.em-main-col{display:flex; flex-direction:column; gap:20px; min-width:0;}

/* ---------- FOOTER ---------- */
footer{background:var(--charcoal); color:#B9BCC1; padding:40px 0 22px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.08);}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
footer h4{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#fff; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px;}
footer ul{list-style:none;}
footer li{margin-bottom:8px; font-size:12.5px;}
footer li a:hover{color:#fff;}
.foot-bottom{padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11.5px; font-family:'IBM Plex Mono', monospace; color:#5c6167;}