/* ---------- AI Aisle Finder modal ----------
   Sitewide search entry point — see header.php (#aiFinderModal shell) and
   assets/js/ai-finder-modal.js. Reuses .modal-overlay from main.css and
   the same fixed/centered positioning pattern as .login-modal, just with
   its own width since it holds a wider textarea + chip row rather than a
   narrow form. #searchInput's textarea rules further down are shared with
   #aiFinderInput on purpose — same "describe what you need" feel in both
   places. */
.ai-finder-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); z-index:96;
  width:min(560px, 92vw); max-height:88vh; overflow-y:auto;
  background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity 0.2s ease, transform 0.2s ease;
}
.ai-finder-modal.open{opacity:1; visibility:visible; transform:translate(-50%,-50%);}
.ai-finder-modal-body{padding:28px;}
/* Self-contained rather than reusing home.css's .hero-eyebrow — this
   modal is sitewide and home.css only loads on the homepage template. */
.ai-finder-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; color:var(--red);
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.ai-finder-modal-sub{font-size:14px; color:var(--ink-soft); line-height:1.5; margin:8px 0 18px;}
.ai-finder-form .search-row{display:flex; align-items:stretch; gap:8px;}
.ai-finder-form textarea{
  flex:1; min-width:0; resize:none; font-family:var(--font-body); font-size:14px; line-height:1.45;
  border:var(--border-w) solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; background:var(--bg); color:var(--ink);
}
.ai-finder-form textarea:focus{outline:none; border-color:var(--accent);}
.ai-finder-form .search-row button{
  border:none; background:var(--ink); color:#fff; width:44px; flex-shrink:0; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
}
.ai-finder-form .search-row button svg{width:16px; height:16px;}
.ai-finder-form .search-row button:hover{background:var(--red);}
.ai-finder-modal-note{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-top:16px;
}

/* ---------- Browse drawer ----------
   Reuses .cart-drawer's panel/overlay/transform behavior from main.css —
   this only styles what's inside it. Single trigger (#browseDrawerToggle
   in header.php) replaces the old Quick Filter dropdown and the separate
   mobile hamburger menu on every screen size. */
.browse-drawer-body{display:flex; flex-direction:column; gap:20px;}

.browse-drawer-menu ul{display:flex; flex-direction:column; gap:2px; list-style:none;}
.browse-drawer-menu li{list-style:none;}
.browse-drawer-menu a{
  display:block; padding:11px 0; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--line);
}
.browse-drawer-menu a:hover{color:var(--red);}

/* Men / Women / Unisex — deliberately NOT styled like the plain
   .browse-drawer-cat links below (or wrapped in any accordion): three
   equal, bold buttons right under the nav links, so they're the first
   thing visible on opening the drawer rather than something to dig for
   inside "SHOP BY CATEGORY". See header.php. */
.browse-drawer-gender-row{display:flex; gap:8px; padding-top:4px;}
.browse-drawer-gender-link{
  flex:1; text-align:center; padding:12px 6px;
  border:var(--border-w) solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink);
}
.browse-drawer-gender-link:hover{background:var(--red); border-color:var(--red); color:#fff;}

/* SHOP BY AISLE / PRICE — plain <details>/<summary>, same zero-JS
   collapsible pattern as the product-page accordions and page FAQ
   (see .accordion in product.css and .page-faq in pages.css), so opening
   one doesn't need any extra JS beyond what the browser already does. */
.browse-drawer-section{border-top:1px solid var(--line); padding-top:16px;}
.browse-drawer-section:first-of-type{border-top:none; padding-top:0;}
.browse-drawer-section summary{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer; list-style:none; margin-bottom:12px;
}
.browse-drawer-section summary::-webkit-details-marker{display:none;}
.browse-drawer-section summary::after{content:'+'; font-family:var(--font-mono); font-size:15px; color:var(--ink-soft); flex-shrink:0;}
.browse-drawer-section[open] summary::after{content:'–';}

.filter-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; color:var(--ink-soft); text-transform:uppercase;
}
.filter-pill-row{display:flex; flex-wrap:wrap; gap:8px;}
.filter-pill{
  border:var(--border-w) solid var(--line); border-radius:var(--radius-pill); background:var(--bg);
  font-family:var(--font-mono); font-size:11px; padding:6px 12px; color:var(--ink-soft);
}
.filter-pill:hover{border-color:var(--accent); color:#fff; background:var(--accent);}

.browse-drawer-cats{display:flex; flex-direction:column;}
.browse-drawer-cat{
  padding:9px 0; font-size:13.5px; color:var(--ink); border-bottom:1px solid var(--line);
}
.browse-drawer-cat:hover{color:var(--red);}

/* ---------- Homepage scanner textarea ----------
   #searchInput moved from <input type="text"> to <textarea> for a
   multi-line "describe what you need" prompt feel — Enter submits,
   Shift+Enter for a new line (see ai-search.js). Targeted by ID since
   home.css's existing rule was written for the old <input> and a
   <textarea> needs a couple of properties an <input> never did. */
#searchInput{
  resize:none; font-family:var(--font-body); line-height:1.45;
}

/* ---------- "Why we picked this" reason ----------
   Only rendered when the AI plugin's re-rank pass returned a reason (see
   cardHtml() in search-render.js) — entirely absent on the plain-keyword
   fallback, so a card looks exactly as it always did until this is
   actually live. */
.result-reason{
  font-size:12px; line-height:1.5; color:var(--ink-soft); border-radius:var(--radius-sm);
  background:var(--bg); border-left:2px solid var(--accent);
  padding:7px 9px; margin:2px 0 0;
}
.result-reason-icon{margin-right:4px;}