/* ════════════════════════════════════════════════════════════════════
   HILLAND — mobile/tablet chrome (nav drawer · bottom tab bar · search ·
   filter sheet/chips). Patterns are switchable via Tweaks so they can be
   compared live. Desktop (>860) is unaffected; these only show ≤860.
   ════════════════════════════════════════════════════════════════════ */

/* mobile search trigger in header (icon) — hidden on desktop */
.hdr-search-btn{display:none;}

@media (max-width:860px){
  /* slim the mobile header: drop the text CTA, show a search icon */
  .hdr-cta{display:none;}
  .hdr-search-btn{display:inline-flex;}
  .hdr-actions{gap:var(--s2);}
  /* leave room at bottom for the tab bar when active */
  .app.has-tabbar .hdr-sub{ }
  .app.has-tabbar #main{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));}
  .app.has-tabbar .ft{padding-bottom:calc(64px + var(--s6) + env(safe-area-inset-bottom,0px));}
  .app.has-tabbar .buybar{bottom:calc(64px + env(safe-area-inset-bottom,0px));}
}

/* ════ NAV DRAWER (slide-in, full nav) ════ */
.mnav-back{position:fixed;inset:0;background:rgba(20,18,16,0.55);z-index:82;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);}
.mnav-back.open{opacity:1;pointer-events:auto;}
.mnav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--charcoal);z-index:83;display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);box-shadow:var(--shadow-2);overflow-y:auto;}
.mnav.open{transform:translateX(0);}
.mnav-hd{display:flex;align-items:center;justify-content:space-between;padding:var(--s5);border-bottom:1px solid var(--border);}
.mnav-hd .x{background:none;border:none;color:var(--text-faint);font-size:1.7rem;line-height:1;padding:4px;}
.mnav-hd .x:hover{color:var(--text);}
.mnav-sec{padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);}
.mnav-sec .lbl{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s3);}
.mnav-sec .lbl::before{content:"// ";color:var(--accent);}
.mnav a{display:flex;align-items:center;gap:0.7rem;color:var(--text);font-size:1.05rem;font-weight:600;padding:0.7rem 0;text-decoration:none;min-height:44px;}
.mnav a .dot{width:9px;height:9px;border-radius:50%;background:var(--edge,var(--accent));flex-shrink:0;}
.mnav a:active{color:var(--accent);}
.mnav-cta{margin:var(--s5);}
.mnav-cta .btn{width:100%;}
.mnav-foot{margin-top:auto;padding:var(--s5);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0.3rem;}
.mnav-foot a{font-size:0.92rem;font-weight:500;color:var(--text-faint);min-height:40px;}

/* ════ BOTTOM TAB BAR ════ */
.btabbar{position:fixed;left:0;right:0;bottom:0;z-index:78;background:var(--charcoal);border-top:1px solid var(--border);display:none;align-items:stretch;height:64px;box-sizing:content-box;padding-bottom:env(safe-area-inset-bottom,0px);}
.app.has-tabbar .btabbar{display:flex;}
.btab{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-faint);font-size:0.64rem;font-weight:600;letter-spacing:0.02em;position:relative;transition:color var(--dur) var(--ease);}
.btab svg{width:22px;height:22px;}
.btab.active{color:var(--text);}
.btab.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:2px;background:var(--accent);border-radius:1px;}
.btab .tbadge{position:absolute;top:8px;right:50%;margin-right:-22px;min-width:16px;height:16px;border-radius:var(--r-pill);background:var(--accent);color:var(--offwhite);font-size:0.58rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;}
/* tab bar is only meaningful ≤860; hide on desktop even if toggled */
@media (min-width:861px){ .app.has-tabbar .btabbar{display:none;} .app.has-tabbar #main{padding-bottom:0;} }

/* ════ SEARCH — full-screen overlay ════ */
.msearch{position:fixed;inset:0;z-index:88;background:var(--offwhite);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);}
.msearch.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.msearch.expanding{position:fixed;top:0;left:0;right:0;bottom:auto;max-height:88vh;border-bottom:1px solid var(--border-light);box-shadow:var(--shadow-2);}
.msearch-bar{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);background:var(--charcoal);}
.msearch-field{flex:1;display:flex;align-items:center;gap:var(--s3);background:var(--charcoal-raised);border:1px solid var(--edge-dark);border-radius:var(--r-pill);padding:0.65rem 1rem;color:var(--text-faint);}
.msearch-field:focus-within{border-color:var(--accent);}
.msearch-field input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:1rem;font-family:var(--font-body);}
.msearch-field input::placeholder{color:var(--text-faint);}
.msearch-cancel{background:none;border:none;color:var(--text);font-size:0.92rem;font-weight:600;white-space:nowrap;padding:0.4rem;}
.msearch-body{flex:1;overflow-y:auto;padding:var(--s4) var(--s5) var(--s8);}
.msearch-hint{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);margin:var(--s4) 0 var(--s3);}
.msearch-hint::before{content:"// ";color:var(--accent);}
.msearch-chips{display:flex;flex-wrap:wrap;gap:var(--s2);}
.msearch-chip{font-size:0.84rem;font-weight:600;color:var(--text-strong);background:#fff;border:1px solid var(--border-light);border-radius:var(--r-pill);padding:0.5rem 0.9rem;display:inline-flex;align-items:center;gap:0.45rem;min-height:40px;}
.msearch-chip .c{width:13px;height:13px;border-radius:4px;border:1px solid rgba(0,0,0,0.12);}
.sresult{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--border-light);width:100%;background:none;border-left:none;border-right:none;border-top:none;text-align:left;cursor:pointer;min-height:60px;}
.sresult .sr-media{width:48px;height:48px;border-radius:var(--r-sm);border:1px solid var(--border-light);background:var(--offwhite-shade);position:relative;overflow:hidden;flex-shrink:0;}
.sresult .sr-media .sr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box;}
.sresult .sr-media .fs{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--edge,var(--accent));z-index:1;}
.sresult .sr-body{flex:1;min-width:0;}
.sresult .sr-title{font-size:0.95rem;font-weight:700;color:var(--text-strong);line-height:1.25;}
.sresult .sr-title b{background:rgba(201,98,42,0.16);color:var(--accent-hover);font-weight:700;border-radius:2px;}
.sresult .sr-meta{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);margin-top:2px;}
.sresult .sr-price{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--text-strong);letter-spacing:-0.02em;flex-shrink:0;}
.sresult .sr-finishes{display:flex;gap:3px;margin-top:4px;}
.sresult .sr-finishes .c{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,0.12);}
.msearch-empty{text-align:center;padding:var(--s8) var(--s4);color:var(--text-muted);}
.msearch-count{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);margin:var(--s3) 0;}

/* ════ PLP MOBILE FILTER ════ */
.mfilter-bar{display:none;}
@media (max-width:860px){
  .mfilter-bar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap;}
  .filters{display:none;}              /* desktop sidebar hidden on mobile */
  .app.mf-sheet .filters{display:none;}
}
.mfilter-btn{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.86rem;font-weight:700;color:var(--text-strong);background:#fff;border:1.5px solid var(--border-light);border-radius:var(--r-pill);padding:0.6rem 1rem;min-height:44px;}
.mfilter-btn .cnt{background:var(--accent);color:#fff;border-radius:var(--r-pill);font-size:0.66rem;font-weight:700;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;}
.mfilter-btn svg{width:16px;height:16px;}
/* finish quick-chips */
.fchips{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;flex:1;}
.fchip{display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;font-size:0.8rem;font-weight:600;color:var(--text-strong);background:#fff;border:1.5px solid var(--border-light);border-radius:var(--r-pill);padding:0.45rem 0.8rem;min-height:40px;flex-shrink:0;}
.fchip .c{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,0.12);}
.fchip.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
/* filter bottom sheet */
.msheet-back{position:fixed;inset:0;background:rgba(20,18,16,0.55);z-index:84;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);}
.msheet-back.open{opacity:1;pointer-events:auto;}
.msheet{position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--offwhite);border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(100%);transition:transform var(--dur-slow) var(--ease);max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--shadow-2);}
.msheet.open{transform:translateY(0);}
.msheet-hd{display:flex;align-items:center;justify-content:space-between;padding:var(--s5);border-bottom:1px solid var(--border-light);}
.msheet-hd .grab{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:var(--border-light);}
.msheet-hd h3{font-size:1.05rem;font-weight:700;color:var(--text-strong);}
.msheet-hd .x{background:none;border:none;font-size:1.6rem;color:var(--text-muted);line-height:1;}
.msheet-body{overflow-y:auto;padding:var(--s4) var(--s5);}
.msheet-ft{border-top:1px solid var(--border-light);padding:var(--s4) var(--s5);display:flex;gap:var(--s3);background:#fff;}
.msheet-ft .btn{flex:1;}
.msheet .fopt{min-height:44px;}