/* =====================================================================
   Overwatch Health — stylesheet
   Adapted 5 September 2026 from Overwatch Safety Products' site.css
   (sibling DBA, same Global Partners parent, same design system)

   Deliberately LIGHT. Two reasons, both practical rather than aesthetic:

     1. The buyers are federal contracting staff reading on office
        monitors and older adults reading on whatever they have. Light,
        high-contrast, large type serves both.
     2. It has to print. Federal buyers print catalog pages and staple
        them to a purchase request.

   Base size is 17px, not 16px, on purpose.
   ===================================================================== */

:root{
  --bg:#ffffff; --bg-2:#f0f5fc; --panel:#ffffff; --line:#e2e6ee;
  --ink:#1a1f27; --ink-2:#41505f; --ink-3:#5c6b7d;

  /* Palette adopted from glblpartners.com so the portfolio reads as one
     company. Navy + red is also, conveniently, the right register for a
     veteran-owned brand without resorting to flag clip-art. */
  --navy:#002b66; --navy-deep:#001a40; --navy-mid:#0a3c86;
  --red:#d1232a; --red-dk:#a81a20; --tint:#e8eef8;

  /* --blue/--blue-dk are kept as ALIASES onto navy. Roughly forty rules
     already reference them (buttons, links, focus rings, the skip link).
     Repointing the alias recolours all of them at once and makes it
     impossible to miss one, which a find-and-replace would not. */
  --blue:#002b66; --blue-dk:#0a3c86;

  --ok:#1a7f4b; --warn:#8a5a00; --warn-bg:#fdf6e7;

  /* Was a flat 1140px, which is ~44% of a 1440p display — the "only half the
     screen" complaint. clamp() rather than a bare 80vw: the lower bound stops
     phones rendering an 80%-wide column with dead margins, because max-width
     never forces width, it only caps it. */
  --max:clamp(1140px,80vw,2040px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:17px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--blue-dk)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:840px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.13em;text-transform:uppercase;font-size:11.5px;font-weight:600}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;z-index:99;background:var(--blue);color:#fff;padding:11px 17px;border-radius:4px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:46px;width:auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav-links a{text-decoration:none;color:var(--ink-2);font-size:15px;font-weight:550}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  color:var(--ink);border-radius:4px;padding:9px 13px;font-size:17px}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:13px 24px;border-radius:4px;text-decoration:none;
  font-weight:650;font-size:15px;border:1.5px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-dk)}
.btn-sm{padding:9px 15px;font-size:14px}

/* ---------- hero ---------- */
/* Dark navy, not the old white-to-grey wash. The page led with a pale hero
   and read as a document; every subpage hero inherits this, so the veteran
   register carries across the site rather than living only on the home page. */
.hero{position:relative;padding:76px 0 64px;color:#fff;border-bottom:none;
  background:linear-gradient(157deg,var(--navy-deep) 0%,var(--navy) 52%,#0a3f8a 100%)}
/* Red rule along the top edge. One restrained flag reference; the alternative
   is bunting, and this has to stay credible to a contracting officer. */
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 62%,var(--red-dk) 100%)}
.hero h1{color:#fff}
.hero .lede{color:rgba(255,255,255,.84)}
.hero .eyebrow{color:#8fbaff}
.hero a{color:#bcd4ff}
.hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.hero .btn-primary{background:var(--red);border-color:var(--red)}
.hero .btn-primary:hover{background:var(--red-dk);border-color:var(--red-dk)}

/* Two columns once there is room for them. The copy caps at 60ch, so on a
   2040px container the right half was simply empty — this is what made the
   hero feel thin rather than merely narrow. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
  gap:56px;align-items:center}
.eyebrow{color:var(--blue-dk);margin-bottom:18px}
h1{font-size:clamp(33px,5vw,52px);line-height:1.09;letter-spacing:-.022em;font-weight:750;max-width:17ch}
.lede{color:var(--ink-2);font-size:clamp(17px,1.9vw,20px);max-width:60ch;margin-top:20px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.creds{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.16)}
.cred{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:7px;padding:12px 17px;backdrop-filter:blur(4px)}
.cred-icon{display:inline-flex;color:#bcd4ff;margin-bottom:8px}
.cred-icon svg{width:19px;height:19px}
.cred b{display:block;font-size:14px;font-weight:650;line-height:1.35;color:#fff}
.cred span:not(.cred-icon){font-size:12.5px;color:rgba(255,255,255,.68)}

/* ---------- sections ---------- */
section{padding:66px 0;border-bottom:1px solid var(--line)}
/* The header is sticky at 76px, so an anchored jump would otherwise land
   with the heading hidden underneath it. */
section[id],.cat-group[id]{scroll-margin-top:92px}
section:last-of-type{border-bottom:0}
.alt{background:var(--bg-2)}
.sec-head{max-width:62ch;margin-bottom:38px}
.sec-head-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:9px;background:var(--tint);color:var(--blue-dk);margin-bottom:16px}
.sec-head-icon svg{width:23px;height:23px}
h2{font-size:clamp(24px,3.1vw,33px);line-height:1.2;letter-spacing:-.012em;font-weight:720}
h3{font-size:18px;font-weight:650;margin-bottom:9px}
.sec-head p{color:var(--ink-2);margin-top:13px}

.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:24px;
  transition:border-color .15s,box-shadow .15s}
.card p{color:var(--ink-2);font-size:15.5px}
.card .who{color:var(--blue-dk);font-weight:650;font-size:13px;margin-bottom:8px}
.num{color:var(--blue-dk);font-weight:700;margin-bottom:11px}

/* Category tiles (home page). Same icon system as the catalog page — see
   catalog.js CAT_ICONS — so the visual language a buyer sees in the first
   fold is the one they meet again once they click into the catalog. */
.card:has(.tile-head){padding-top:22px}
.card:has(.tile-head):hover{border-color:#b9cdff;box-shadow:0 3px 14px rgba(0,43,102,.08)}
.tile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tile-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:9px;background:var(--tint);color:var(--blue-dk);flex:none}
.tile-icon svg{width:24px;height:24px}
.tile-head .num{margin-bottom:0}

/* Small utility pictogram used on .card instances that lead with a label
   rather than a number (government-buyers threshold cards). Same tint chip
   as .tile-icon, one size down. */
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;
  height:36px;border-radius:8px;background:var(--tint);color:var(--blue-dk);margin-bottom:13px}
.card-icon svg{width:19px;height:19px}

/* ---------- callouts ---------- */
.note{border-left:4px solid var(--blue);background:var(--bg-2);padding:17px 21px;
  border-radius:0 5px 5px 0;margin:22px 0;font-size:15.5px;color:var(--ink-2)}
.note strong{color:var(--ink)}
.note.warn{border-left-color:#d9a441;background:var(--warn-bg);color:var(--warn)}
.note.warn strong{color:#6b4600}

/* ---------- prose ---------- */
.prose h2{margin:40px 0 14px;padding-top:26px;border-top:1px solid var(--line)}
.prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose h3{margin:26px 0 8px}
.prose p,.prose li{color:var(--ink-2);font-size:16px;margin-bottom:13px}
.prose ul,.prose ol{margin:0 0 16px 24px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:650}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:11px 13px;text-align:center}
.prose th{background:var(--bg-2);font-weight:650;font-size:13.5px}
.prose td{color:var(--ink-2)}
.prose th:first-child,.prose td:first-child{text-align:left}
.updated{color:var(--ink-3);font-size:14px;margin-top:8px}

/* ---------- catalog ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:100px;
  padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.chip:hover{border-color:var(--blue)}
.filter-label{font-size:13px;color:var(--ink-3);font-weight:650;margin-right:2px}

.cat-group{margin-bottom:44px}
.cat-group-head{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.cat-group-head h3{font-size:21px;margin-bottom:0}
.cat-group-icon.item-icon{flex:none;width:42px;height:42px;border:1px solid var(--line);
  border-radius:9px}
.cat-group-icon.item-icon svg{width:23px;height:23px}
.cat-group > p{color:var(--ink-3);font-size:15px;margin-bottom:18px;margin-left:55px}

/* One item per catalog line. The icon column is the stand-in for the product
   photo this catalog does not have (site-design-brief.md §5) — a fixed
   visual anchor per category rather than a wall of text starting flush left.
   Three-column grid rather than the old 1fr/auto: icon | body | actions, so
   the eye has somewhere to land before it has to start reading. */
.item{border:1px solid var(--line);border-radius:9px;padding:0;background:#fff;
  display:grid;grid-template-columns:64px 1fr auto;gap:0;align-items:stretch;
  margin-bottom:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.item:hover{border-color:#b9cdff;box-shadow:0 3px 14px rgba(0,43,102,.08)}
.item-icon{display:flex;align-items:center;justify-content:center;
  background:var(--tint);border-right:1px solid var(--line);color:var(--blue-dk)}
.item-icon svg{width:28px;height:28px}
.item-body{padding:18px 20px}
.item h4{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.item .meta{font-size:13.5px;color:var(--ink-3);margin-bottom:9px}
.item .notes{font-size:14px;color:var(--ink-2);max-width:74ch}
.item .sku{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-3)}
.item-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  justify-content:flex-start;padding:18px 18px 18px 4px}

.tag{display:inline-block;padding:3px 9px;border-radius:4px;font-size:11.5px;font-weight:650;
  letter-spacing:.04em;border:1px solid;white-space:nowrap}
.tag-a{color:var(--ok);border-color:#a8d7bd;background:#eefaf3}
.tag-b{color:var(--warn);border-color:#e0c98a;background:var(--warn-bg)}
.tag-unv{color:var(--ink-3);border-color:var(--line);background:var(--bg-2)}
.tag-usa{color:var(--blue-dk);border-color:#b9cdff;background:#eef3ff}

.empty{color:var(--ink-3);padding:30px 0;text-align:center;font-size:15px}

/* ---------- forms ---------- */
form.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:28px}
.field{margin-bottom:18px}
label{display:block;font-size:13.5px;font-weight:620;color:var(--ink-2);margin-bottom:7px}
input,select,textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:4px;
  padding:12px 13px;color:var(--ink);font:inherit;font-size:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{min-height:104px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.5;display:block}
.submit{width:100%;padding:15px;font-size:16px}
.msg{padding:14px 17px;border-radius:5px;font-size:15px;margin:16px 0;display:none}
.msg.show{display:block}
.msg-ok{background:#eefaf3;border:1px solid #a8d7bd;color:#12603a}
.msg-err{background:#fdeaea;border:1px solid #eeb4b4;color:#8f2b2b}
.msg-info{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- capability statement ---------- */
.capsheet{border:1px solid var(--line);border-radius:6px;padding:32px;background:#fff}
.capgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);
  border-radius:5px;margin:20px 0}
.capgrid div{padding:12px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.capgrid div:nth-child(2n){border-right:0}
.capgrid div:nth-last-child(-n+2){border-bottom:0}
.capgrid dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:650;margin-bottom:3px}
.capgrid dd{font-size:15px;font-weight:600}
/* Codes a CO copies verbatim into a vendor record — set apart in mono so a
   digit or letter is never mistaken for its lookalike. */
.capgrid dd.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.03em;color:var(--blue-dk);background:var(--tint);display:inline-block;
  padding:2px 8px;border-radius:4px;font-size:14px}

/* ---------- footer ---------- */
footer{padding:52px 0 32px;color:var(--ink-3);font-size:14.5px;background:var(--bg-2);border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
.f-grid h4{color:var(--ink);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px;font-weight:650}
.f-grid a{display:block;text-decoration:none;color:var(--ink-3);margin-bottom:9px}
.f-grid a:hover{color:var(--blue-dk)}
.f-logo{height:40px;margin-bottom:16px}
.legal{border-top:1px solid var(--line);padding-top:24px;font-size:13px;line-height:1.7}
.legal p{margin-bottom:9px}

@media(max-width:960px){
  .g3,.g2,.g4,.row,.f-grid,.capgrid{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  .nav-links.open a{padding:14px 0;border-bottom:1px solid var(--line)}
  .item{grid-template-columns:48px 1fr}
  .item-icon svg{width:22px;height:22px}
  .item-body{padding:14px 16px}
  .item-actions{grid-column:1/-1;flex-direction:row;align-items:center;
    padding:0 16px 16px}
}

@media print{
  header,.filters,.cta-row,footer .f-grid,.skip,.menu-btn{display:none}
  /* The veteran bar PRINTS, deliberately — it is the one element here that is
     not hidden. The capability statement gets printed and stapled to a purchase
     request, and "Service-Disabled Veteran-Owned Small Business" across the top
     of page 1 is the most useful line on the sheet to a contracting officer.
     Restyled to plain rules so it does not lay down a navy ink block, which is
     the reason a coloured bar usually gets print-hidden. */
  .vet-bar{background:none!important;color:#000;font-size:9.5pt;
    border-bottom:1.5pt solid #000}
  .vet-bar .vet-star,.vet-bar .vet-rest,.vet-bar strong{color:#000}
  .vet-bar a{display:none}
  .hero{background:none!important;color:#000}
  .hero h1,.hero .lede,.hero .eyebrow{color:#000}
  .hero-badge{border:1pt solid #000;box-shadow:none;background:none}
  .hero-badge .bdg-mark,.hero-badge .bdg-full,.hero-badge .bdg-sub,
  .hero-badge .bdg-eyebrow{color:#000}
  body{font-size:11pt}
  .item{break-inside:avoid;page-break-inside:avoid;box-shadow:none;grid-template-columns:34px 1fr auto}
  .item-icon{background:none;border-right:1pt solid #000;color:#000}
  .item-icon svg{width:18px;height:18px}
  .cat-group-icon.item-icon{border:1pt solid #000}
  a{color:var(--ink);text-decoration:none}
}

/* =====================================================================
   VETERAN-OWNED THEMING  ·  added 21 August 2026

   Brief was "yell loudly veteran owned, and theme it through the pages."
   The load-bearing word is THROUGH. A single badge on the home page is a
   decoration; the identity has to survive someone landing on /catalog from
   a search result, which is how most people will arrive.

   So it lives in three places that appear on all eight pages: a bar above
   the header, the navy hero, and the footer. Claims are limited verbatim to
   language already cleared and in use on the site — "SBA-certified SDVOSB"
   and "service-disabled veteran-owned small business". Nothing here asserts
   VA endorsement, and nothing asserts blanket set-aside eligibility, which
   per CLAUDE.md §3.3 turns on the nonmanufacturer rule per line rather than
   on our status.
   ===================================================================== */

.vet-bar{background:var(--navy-deep);color:#fff;font-size:13px;
  border-bottom:3px solid var(--red)}
.vet-bar .wrap{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  min-height:40px;padding-top:8px;padding-bottom:8px}
.vet-bar strong{font-weight:680;letter-spacing:.01em}
.vet-star{color:var(--red);font-size:14px;line-height:1}
.vet-sep{color:rgba(255,255,255,.34)}
.vet-bar .vet-rest{color:rgba(255,255,255,.74)}
.vet-bar a{color:#bcd4ff;text-decoration:none;margin-left:auto;font-weight:600}
.vet-bar a:hover{color:#fff;text-decoration:underline}

/* ---------- SDVOSB emblem panel (hero, right column) ---------- */
.hero-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:13px;padding:30px 28px;text-align:center;position:relative;
  backdrop-filter:blur(6px);box-shadow:0 18px 46px rgba(0,10,32,.34)}
.hero-badge::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  border-radius:13px 13px 0 0;background:var(--red)}
.hero-badge .bdg-eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.19em;text-transform:uppercase;font-size:11px;font-weight:700;
  color:var(--red);display:block;margin-bottom:14px}
.hero-badge .bdg-mark{font-size:clamp(38px,4.6vw,54px);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:#fff;display:block}
.hero-badge .bdg-full{display:block;margin-top:13px;font-size:14.5px;line-height:1.45;
  color:rgba(255,255,255,.9);font-weight:600}
.hero-badge .bdg-sub{display:block;margin-top:15px;padding-top:15px;font-size:13px;
  color:rgba(255,255,255,.66);border-top:1px solid rgba(255,255,255,.17)}
.hero-badge .bdg-link{display:inline-block;margin-top:15px;font-size:14px;font-weight:650;
  color:#bcd4ff;text-decoration:none}
.hero-badge .bdg-link:hover{color:#fff;text-decoration:underline}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  /* Single column before the badge gets squeezed. Below this the emblem sits
     under the copy, where it still reads, rather than being crushed beside it. */
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-badge{text-align:left}
}
@media(max-width:620px){
  .vet-bar{font-size:12.2px}
  .vet-bar .wrap{gap:8px}
  /* The trailing links and the tail of the strapline are the first things to
     go — the words "Veteran-Owned" must survive at every width. */
  .vet-bar a,.vet-bar .vet-rest{display:none}
}

/* ---------- dark-hero contrast corrections ---------- */
/* .updated is --ink-3 (#5c6b7d), which was correct against the old white hero
   and is a contrast failure against navy. It sits inside the hero on four
   pages: /accessibility, /disclosures, /privacy, /terms. Caught by auditing
   what actually lives inside .hero on every page rather than checking the two
   pages that were obviously restyled. */
.hero .updated{color:rgba(255,255,255,.68)}

/* The capability statement has no .hero — deliberately. It is a print artifact
   laid out to fit one sheet, and a full-bleed navy band would burn ink and
   fight the document framing. It carries the veteran identity through the
   vet-bar above it and the SDVOSB line in its own body copy. This is the one
   visual tie-in it takes: a red rule along the top edge, which costs nothing
   to print. */
.capsheet{position:relative;overflow:hidden}
.capsheet::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:var(--red)}

/* ---------- contrast fixes, measured not eyeballed ---------- */

/* `.hero a` (0,1,1) outranks `.btn-primary` (0,1,0), so the primary CTA was
   inheriting pale blue link colour ON RED: 3.51:1, below the 4.5:1 AA floor.
   The ghost button escaped it only because `.hero .btn-ghost` is (0,2,0) and
   happens to set colour explicitly. This restores white — 5.27:1, AA pass.
   Caught by compositing alpha and measuring; it looked fine on screen, which
   is exactly why it needed measuring. */
.hero .btn-primary{color:#fff}
.hero .btn-primary:hover{color:#fff}

/* Brand red on navy is 3.26:1 — it fails as text no matter how much we like
   the colour. The identity is carried by the red RULES, which are decorative
   and exempt; the eyebrow is text and has to read. This light coral stays in
   the red family and measures 10.1:1. */
.hero-badge .bdg-eyebrow{color:#ffb3b8}

/* Decorative and aria-hidden, so not bound by the text rules — but full-strength
   red on near-black navy reads as muddy brown. Brightened for legibility only. */
.vet-star{color:#ff4d55}


/* ---------- catalog search ---------- */
/* 73 items each carrying a paragraph is roughly 25 screens of scroll. Category
   chips alone do not solve that -- Mobility and Bath Safety is 22 lines on its
   own. Much of this audience is a caregiver working a short list in a hurry,
   or someone reading at 200% zoom, and scrolling is the expensive action for
   both. */
.searchbar{margin-bottom:18px}
.searchbar label{display:block;font-size:13px;color:var(--ink-3);font-weight:650;
  margin-bottom:7px}
.searchbar input{width:100%;max-width:520px;font:inherit;font-size:16px;
  padding:13px 16px;border:1.5px solid var(--line);border-radius:7px;
  background:#fff;color:var(--ink)}
/* 16px is deliberate and is a minimum, not a preference: iOS Safari zooms the
   viewport on focus for anything smaller, which yanks the layout sideways
   mid-search. */
.searchbar input:focus{border-color:var(--navy);outline:3px solid var(--blue);
  outline-offset:2px}
.searchbar input::placeholder{color:var(--ink-3)}


/* ---------- return terms, on the line ---------- */
/* Visible without shouting. This must not read as fine print -- fine print is
   the thing it exists to avoid -- but it also must not look like a warning on
   72 lines where the honest answer is simply "we will tell you before you
   commit". A left rule and a tint carry it. */
.item .returns{font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:74ch;
  margin-top:9px;padding:8px 12px;border-left:3px solid var(--line);
  background:var(--bg-2);border-radius:0 5px 5px 0}
.item .returns strong{color:var(--ink);font-weight:650}
/* A line where we hold an actual figure gets the red rule: that one costs
   money, and it should not look the same as "ask us". */
.item .returns-firm{border-left-color:var(--red);background:#fdf3f3}
.returns-asof{color:var(--ink-3)}
@media print{
  /* Prints. A buyer stapling a page to a purchase request needs the terms on
     it, and this is exactly the sort of thing that gets print-hidden by
     accident and then disputed later. */
  .item .returns{background:none;border-left:1.5pt solid #000;font-size:9pt}
}