/* house.css — brings the catalog into the same visual world as smartgovsupply.com and the portal.
 *
 * Loaded AFTER styles.css and deliberately additive: the catalog's own layout, grid and drawer keep
 * working untouched. This layer only changes what made it read as a different company — the
 * typeface, the palette, the corner radius, and the placeholder logo.
 *
 * The house language, shared with portal-3.css:
 *   navy #0b1830 · gold #c8a24b · ice #f3f0e8 · school green #1c3a31
 *   Inter for text, IBM Plex Mono for labels and identifiers
 *   10px radius (v3) — never pills, never rounded-lg; soft layered shadow, not a hard 1px box
 *   uppercase mono eyebrows with .13em tracking
 */

:root{
  --navy:#0b1830; --navy2:#060e1e; --gold:#c8a24b; --gold2:#e2c277; --ice:#f3f0e8;
  --ink:#10172a; --mute:#5f6b7a; --line:rgba(11,24,48,.10); --line2:rgba(11,24,48,.16); --school:#1c3a31;
  /* same tokens as portal-3.css so the catalog and the portal share one radius language */
  --r:10px; --r-sm:8px; --r-xs:6px; --ease:cubic-bezier(.4,0,.2,1);
  --lift:0 1px 2px rgba(11,24,48,.05), 0 10px 28px -16px rgba(11,24,48,.28);
}

body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--ice); color:var(--ink);
}

/* ---- the loud gold strip said what the hero says one line later ---- */
.sample-banner{
  background:var(--navy2); color:#9fb0c4;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 16px; text-align:center; font-weight:500;
}

/* ---- header ---- */
header.site{background:var(--navy)}
header.site .brand b{
  font-family:Inter,system-ui,sans-serif; font-weight:700; letter-spacing:-.01em;
}
header.site .brand span span{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#9fb0c4;
}
.nav a{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:#cfd6cf; text-decoration:none;
}
.nav a:hover{color:var(--gold2)}
.cart-btn{
  background:var(--gold); color:#10172a; border:0; border-radius:var(--r);
  font-family:Inter,system-ui,sans-serif; font-weight:600; font-size:14px; padding:11px 16px;
}
.cart-btn:hover{background:var(--gold2)}
.cart-count{
  background:#10172a; color:var(--gold2); border-radius:var(--r-xs);
  font-family:"IBM Plex Mono",monospace; font-size:11px; padding:2px 6px; margin-left:7px;
}

/* ---- hero: it was sized for an image that is not there, leaving half the band empty ---- */
.hero{
  background:linear-gradient(180deg,var(--navy),var(--navy2));
  padding-top:clamp(38px,6vw,66px); padding-bottom:clamp(38px,6vw,66px);
}
.hero h1{
  font-size:clamp(28px,4.2vw,44px); line-height:1.06; letter-spacing:-.015em;
  text-wrap:balance; max-width:16ch;
}
.hero p{max-width:58ch; color:#c7d2de; font-size:16.5px}
.btn{border-radius:var(--r); font-weight:600}
.btn-primary{background:var(--gold); color:#10172a; border:0}
.btn-primary:hover{background:var(--gold2)}
.btn-ghost{border:1px solid rgba(255,255,255,.28); color:#fff; background:transparent}
.btn-ghost:hover{border-color:var(--gold2); color:var(--gold2)}

/* ---- credentials strip: this is data, so it gets the mono treatment ---- */
.creds{background:#fff; border-bottom:1px solid var(--line)}
.cred{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute);
}
.cred b{color:var(--ink); font-weight:600}

/* ---- section heading, matching the portal's rule-under-eyebrow ---- */
.section-head h2{
  font-size:clamp(22px,3vw,30px); letter-spacing:-.01em; text-wrap:balance;
}
.section-head p{color:var(--mute); max-width:64ch; margin-left:auto; margin-right:auto}

/* ---- search + category chips: square, not pills ---- */
.search-box{
  border-radius:var(--r); border:1px solid var(--line); background:#fff;
  font-family:Inter,system-ui,sans-serif; font-size:16px;
}
.search-box:focus{outline:2px solid var(--school); outline-offset:1px}
.chips button, .chip{
  border-radius:var(--r) !important;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:500;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.chips button:hover, .chip:hover{border-color:var(--school); background:#fff}
.chips button[aria-pressed="true"], .chips .active, .chip.active{
  background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important;
}
.subchips button[aria-pressed="true"], .subchips .active{
  background:var(--gold) !important; color:#10172a !important; border-color:var(--gold) !important;
}

/* ---- product cards ---- */
.card, .product-card{
  border-radius:var(--r); border:1px solid var(--line); background:#fff;
  box-shadow:none; transition:border-color .12s ease;
}
.card:hover, .product-card:hover{border-color:rgba(11,24,48,.30)}
.card .cat, .product-card .cat{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute); font-weight:500;
}
.card h3, .product-card h3, .card .name{
  font-size:15.5px; line-height:1.35; letter-spacing:-.005em; text-wrap:balance;
}
.card .sku, .sku{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--mute)}
.card .sku b, .sku b{color:var(--ink)}

/* The image plate: a flat tint rather than a grey box, so a line-art placeholder sits ON something
   instead of floating in a void. Real photographs read fine against it too. */
.card .img, .card figure, .product-card .img, .thumb{
  background:linear-gradient(180deg,#fbfaf6,var(--ice));
  border-bottom:1px solid var(--line);
}

/* "Add to list" is the only action on the card, so it looks like the one action. */
.card button, .product-card button, .add-btn{
  border-radius:var(--r); font-family:Inter,system-ui,sans-serif; font-weight:600; font-size:14.5px;
  background:#fff; color:var(--ink); border:1px solid var(--line);
}
.card button:hover, .product-card button:hover, .add-btn:hover{
  background:var(--navy); color:#fff; border-color:var(--navy);
}

/* vendor-code chip (S2 etc.) — internal shorthand, so it should recede, not shout in gold */
.badge, .vendor-code, .vcode{
  background:var(--ice); color:var(--mute); border:1px solid var(--line);
  border-radius:var(--r-xs); font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.06em; font-weight:500;
}

/* ---- cart drawer ---- */
.drawer{background:var(--ice); border-left:1px solid var(--line)}
.drawer h2, .drawer h3{font-family:Inter,system-ui,sans-serif}
.line-item{background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.li-name{font-size:14.5px; line-height:1.35}
.li-cat{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute)}
.qty button{border-radius:var(--r-xs); border:1px solid var(--line); background:#fff}
.qty button:hover{border-color:var(--school)}

footer, .site-footer{background:var(--navy); color:#9fb0c4}
footer a, .site-footer a{color:var(--gold2)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }