@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/geist-latin.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/fonts/geist-mono-latin.woff2") format("woff2"); }

:root { --ink:#151515; --muted:#696966; --line:#e5e4df; --soft:#f6f5f1; --paper:#fff; --green:#166534; --green-soft:#eaf7ee; --amber:#a15c00; --amber-soft:#fff6df; --red:#b42318; --red-soft:#fdecea; --accent:#0047AB; --focus:#b7d2ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { margin:0; background:var(--soft); color:var(--ink); }
body { font-family:"Geist",Arial,Helvetica,sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
mark { border-radius:3px; background:#fff1a8; color:inherit; }
.app-shell { min-height:100vh; }
.topbar { display:flex; align-items:center; min-height:66px; padding:10px max(20px,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); }
.brand-mark { display:grid; width:68px; height:38px; flex:0 0 auto; place-items:center; }
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-copy { display:flex; flex-direction:column; margin-left:11px; line-height:1.1; }
.brand-copy strong { font-size:14px; letter-spacing:.09em; }
.brand-copy span { margin-top:5px; color:var(--muted); font-size:11px; }
.topbar-status { display:flex; align-items:center; gap:8px; margin-left:auto; color:#4f4f4c; font-size:12px; font-weight:680; }
.status-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.status-dot.freshness-amber { background:var(--amber); box-shadow:0 0 0 4px var(--amber-soft); }
.status-dot.freshness-red { background:var(--red); box-shadow:0 0 0 4px var(--red-soft); }
.inventory-status { margin-left:5px; color:var(--green); font-size:9px; font-weight:780; letter-spacing:.045em; text-transform:uppercase; }
.inventory-status.freshness-amber { color:var(--amber); }
.inventory-status.freshness-red { color:var(--red); }
.page-wrap { width:min(100% - 32px,1080px); margin:0 auto; }
.hero { padding:36px 0 18px; }
.rate-line { display:flex; align-items:center; gap:10px; margin-bottom:16px; color:var(--muted); font-size:12px; }
.rate-line span { font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.rate-line strong { color:var(--ink); font-size:14px; }
.rate-line small { padding-left:10px; border-left:1px solid var(--line); }
h1,h2,h3,p { margin-top:0; }
.hero h1 { max-width:850px; margin-bottom:12px; font-size:clamp(32px,4.5vw,52px); line-height:1.04; letter-spacing:-.045em; }
.hero-subtitle { margin-bottom:0; color:var(--muted); font-size:16px; line-height:1.55; }
.app-shell.has-query .hero { padding:17px 0 10px; }
.app-shell.has-query .hero h1 { margin-bottom:5px; font-size:clamp(23px,3vw,34px); }
.app-shell.has-query .hero-subtitle { display:none; }
.app-shell.has-query .rate-line { margin-bottom:8px; }
.search-dock { position:sticky; top:8px; z-index:30; padding:0 0 10px; background:linear-gradient(var(--soft) 78%,rgba(246,245,241,0)); }
.search-panel { padding:15px; border:1px solid var(--line); border-radius:19px; background:rgba(255,255,255,.98); box-shadow:0 12px 38px rgba(25,25,23,.09); backdrop-filter:blur(12px); }
.search-panel>label { display:block; margin:0 0 7px 4px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.search-input-wrap { position:relative; display:flex; align-items:center; }
.search-input-wrap>svg { position:absolute; left:17px; width:23px; height:23px; stroke:#686866; stroke-width:1.8; pointer-events:none; }
.search-input-wrap input { width:100%; min-height:62px; padding:0 88px 0 53px; border:2px solid #d6d5cf; border-radius:13px; outline:none; background:#fbfbf9; color:var(--ink); font-size:17px; font-weight:580; transition:border-color .14s,box-shadow .14s,background .14s; }
.search-input-wrap input::placeholder { color:#96958f; font-weight:450; }
.search-input-wrap input:focus { border-color:var(--ink); background:white; box-shadow:0 0 0 4px rgba(20,20,20,.06); }
.clear-search { position:absolute; right:10px; min-height:40px; padding:8px 11px; border:0; border-radius:9px; background:#ecebe6; color:#4f4f4c; cursor:pointer; font-size:12px; font-weight:680; }
.quick-searches { display:flex; flex-wrap:wrap; gap:7px; padding:11px 2px 0; }
.quick-searches button { min-height:36px; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:white; color:#5e5e5a; cursor:pointer; font-size:11px; font-weight:680; }
.quick-searches button:hover { border-color:#9d9c96; color:var(--ink); }
.app-shell.has-query .search-panel { padding:8px; border-radius:15px; }
.app-shell.has-query .search-panel>label,.app-shell.has-query .quick-searches { display:none; }
.app-shell.has-query .search-input-wrap input { min-height:54px; }
.results-section { min-height:330px; padding:20px 0 70px; scroll-margin-top:128px; }
.empty-state { display:flex; max-width:620px; min-height:270px; flex-direction:column; align-items:center; justify-content:center; margin:0 auto; text-align:center; }
.empty-icon { display:grid; width:54px; height:54px; margin-bottom:18px; place-items:center; border:1px solid var(--line); border-radius:50%; background:white; }
.empty-icon svg { width:22px; stroke:#77766f; stroke-width:1.7; }
.empty-state h2 { margin-bottom:9px; font-size:23px; letter-spacing:-.025em; }
.empty-state p { max-width:520px; margin-bottom:0; color:var(--muted); font-size:14px; line-height:1.65; }
.no-results { min-height:230px; }
.suggestion-list { display:flex; width:100%; flex-direction:column; gap:7px; margin-top:18px; text-align:left; }
.suggestion-list button { display:flex; min-height:52px; align-items:center; gap:12px; padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:white; cursor:pointer; }
.suggestion-list button:hover { border-color:#aaa9a3; }
.suggestion-list strong { flex:0 0 120px; color:var(--accent); font-family:"Geist Mono",monospace; font-size:12px; }
.suggestion-list span { overflow:hidden; color:#4f4f4c; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.results-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:13px; }
.results-heading h2 { margin:4px 0 0; font-size:24px; letter-spacing:-.03em; }
.results-heading p { margin-bottom:2px; color:var(--muted); font-size:12px; }
.refine-notice { margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:#4f4f4c; font-size:12px; line-height:1.5; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:720; letter-spacing:.07em; text-transform:uppercase; }
.results-list { display:flex; flex-direction:column; gap:9px; }
.product-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--paper); transition:border-color .14s,box-shadow .14s; }
.product-card.expanded { border-color:#c6c5be; box-shadow:0 14px 38px rgba(25,25,23,.08); }
.product-summary { display:flex; width:100%; min-height:76px; align-items:center; gap:20px; padding:15px 18px; border:0; background:transparent; text-align:left; cursor:pointer; }
.product-summary:hover { background:#fbfbf9; }
.product-copy { display:flex; min-width:0; flex:1; flex-direction:column; }
.code-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.product-code { color:var(--accent); font-family:"Geist Mono",monospace; font-size:13px; font-weight:780; }
.exact-badge { padding:3px 6px; border-radius:999px; background:#eeeefa; color:#454570; font-size:8px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.product-description { overflow:hidden; color:#292927; font-size:14px; font-weight:650; line-height:1.45; text-overflow:ellipsis; }
.product-mobile-meta { display:none; }
.summary-side { display:grid; grid-template-columns:108px 108px 22px; align-items:center; gap:10px; }
.summary-price { display:flex; flex-direction:column; font-size:17px; font-weight:780; text-align:right; }
.summary-price small { margin-top:3px; color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.summary-price.missing { color:#97968f; font-size:11px; }
.stock-badge { display:inline-flex; min-height:32px; align-items:center; justify-content:center; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:730; }
.stock-badge.available { background:var(--green-soft); color:var(--green); }
.stock-badge.empty { background:#efefec; color:#77766f; }
.chevron { width:22px; height:22px; fill:none; stroke:#77766f; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; transition:transform .16s; }
.chevron.open { transform:rotate(180deg); }
.product-detail { padding:0 18px 18px; }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--line); }
.price-cell { display:flex; min-height:108px; flex-direction:column; justify-content:center; padding:15px; background:#fafaf8; }
.price-cell.emphasized { background:#f0f7f2; }
.price-cell span { color:var(--muted); font-size:10px; font-weight:720; letter-spacing:.07em; text-transform:uppercase; }
.price-cell strong { margin-top:7px; font-size:19px; letter-spacing:-.02em; }
.price-cell.emphasized strong { color:var(--green); font-size:22px; }
.price-cell small { margin-top:5px; color:#898880; font-size:10px; }
.stock-section { margin-top:18px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:11px; }
.section-heading h3 { margin:4px 0 0; font-size:17px; letter-spacing:-.02em; }
.stock-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.stock-cell { display:flex; min-height:70px; flex-direction:column; justify-content:space-between; padding:10px; border:1px solid #e5e4df; border-radius:10px; background:#f7f7f4; }
.stock-cell.available { border-color:#bfe1c9; background:var(--green-soft); }
.stock-cell span { overflow:hidden; color:#77766f; font-size:9px; font-weight:680; text-overflow:ellipsis; white-space:nowrap; }
.stock-cell.available span { color:#4b7658; }
.stock-cell strong { color:#8a8982; font-size:18px; }
.stock-cell.available strong { color:var(--green); }
.detail-actions { display:flex; justify-content:flex-end; margin-top:13px; }
.copy-button { display:inline-flex; min-height:44px; align-items:center; gap:8px; padding:9px 13px; border:1px solid #cfcec7; border-radius:10px; background:white; cursor:pointer; font-size:12px; font-weight:700; }
.copy-button:hover { border-color:#9b9a94; }
.copy-button.copied { border-color:#a7d6b4; background:var(--green-soft); color:var(--green); }
.copy-button svg { width:18px; height:18px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
footer { display:flex; justify-content:space-between; gap:20px; width:min(100% - 32px,1080px); margin:0 auto; padding:22px 0 35px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }

@media (max-width:760px) {
  .topbar { min-height:58px; padding:9px 12px; }
  .brand-mark { width:56px; height:34px; }
  .brand-copy { margin-left:9px; }
  .brand-copy strong { font-size:12px; }
  .brand-copy span { font-size:9px; }
  .topbar-status { gap:6px; font-size:9px; text-align:right; }
  .inventory-prefix { display:none; }
  .inventory-status { display:block; margin:3px 0 0; font-size:7px; }
  .status-dot { width:6px; height:6px; box-shadow:0 0 0 3px var(--green-soft); }
  .page-wrap { width:min(100% - 20px,1080px); }
  .hero { padding:22px 0 14px; }
  .rate-line { flex-wrap:wrap; gap:6px 8px; margin-bottom:12px; font-size:10px; }
  .rate-line strong { font-size:12px; }
  .rate-line small { padding-left:8px; }
  .hero h1 { margin-bottom:8px; font-size:31px; line-height:1.06; }
  .hero-subtitle { font-size:13px; }
  .app-shell.has-query .hero { padding:11px 0 7px; }
  .app-shell.has-query .hero h1 { margin-bottom:0; font-size:21px; }
  .search-dock { top:6px; padding-bottom:8px; }
  .search-panel { padding:10px; border-radius:15px; }
  .search-panel>label { display:none; }
  .search-input-wrap input { min-height:54px; padding-left:46px; border-radius:11px; font-size:14px; }
  .search-input-wrap>svg { left:15px; width:20px; height:20px; }
  .clear-search { min-height:38px; right:8px; }
  .quick-searches { width:100%; flex-wrap:nowrap; overflow-x:auto; padding-top:8px; scrollbar-width:none; }
  .quick-searches::-webkit-scrollbar { display:none; }
  .quick-searches button { min-height:34px; flex:0 0 auto; }
  .results-section { padding-top:13px; scroll-margin-top:112px; }
  .empty-state { min-height:220px; }
  .results-heading { align-items:flex-start; }
  .results-heading p { display:none; }
  .product-summary { min-height:0; align-items:flex-start; gap:8px; padding:14px; }
  .code-row { flex-wrap:wrap; }
  .product-description { display:-webkit-box; overflow:hidden; font-size:13px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .product-mobile-meta { display:grid; grid-template-columns:105px 1fr; gap:8px; margin-top:10px; }
  .product-mobile-meta>span { display:flex; min-width:0; flex-direction:column; gap:3px; padding:8px; border-radius:9px; background:#f4f4f1; }
  .product-mobile-meta>span.available { background:var(--green-soft); }
  .product-mobile-meta small { color:var(--muted); font-size:8px; font-weight:720; letter-spacing:.04em; text-transform:uppercase; }
  .product-mobile-meta strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
  .product-mobile-meta>span.available strong { color:var(--green); }
  .summary-side { display:flex; flex:0 0 auto; align-items:flex-start; }
  .summary-price,.stock-badge { display:none; }
  .chevron { margin-top:2px; }
  .product-detail { padding:0 11px 12px; }
  .price-grid { grid-template-columns:1fr; }
  .price-cell { min-height:82px; padding:12px 13px; }
  .price-cell strong { font-size:17px; }
  .price-cell.emphasized strong { font-size:21px; }
  .section-heading h3 { font-size:15px; }
  .stock-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .stock-cell { min-height:52px; padding:7px; }
  .stock-cell span { font-size:8px; }
  .stock-cell strong { font-size:16px; }
  .detail-actions { justify-content:stretch; }
  .copy-button { width:100%; justify-content:center; }
  .suggestion-list strong { flex-basis:92px; }
  footer { align-items:flex-start; flex-direction:column; gap:7px; width:min(100% - 20px,1080px); }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }