/* ============================================================================
   Falcon Gulf General Trading — neobrutalist catalog/ERP design system
   Deep navy + action orange + off-white + near-black ink. Thick flat borders,
   blocky rectangles, no soft shadows, no rounded pills. Loud, high-contrast,
   built for a fast-moving bulk-commerce B2B business.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#1A2B4C;
  --navy-ink:#101c33;
  --orange:#FF6B35;
  --offwhite:#F7F5F0;
  --white:#FFFFFF;
  --ink:#141414;
  --border:#141414;
  --green-bg:#DCEEE1; --green-text:#155C3A;
  --red-bg:#FBDCD6; --red-text:#8A2A12;
  --amber-bg:#FBEBC8; --amber-text:#7A5210;
  --blue-bg:#DCE6F7; --blue-text:#183A6B;

  --bw:3px;       /* thick border */
  --bw-sm:2px;    /* thin(ner) border */
  --gap:16px;

  --font-display:'Archivo Black', 'Arial Black', sans-serif;
  --font-body:'Work Sans', 'Segoe UI', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; } /* belt-and-suspenders: real content should
  never need this (wide tables/docs scroll in their own .scroll-x container), but it guards against
  any stray element pushing the page itself sideways on a narrow viewport. */
body{
  background:var(--offwhite);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:0.2px; text-transform:uppercase; }
p{ margin:0; }
button{ font-family:inherit; }
a{ color:var(--navy); }
/* Safety net: every hand-drawn stroke icon here is viewBox-only with no width/height attribute,
   so without an explicit size it falls back to the browser's ~300x150 intrinsic SVG box — harmless
   inside a hard-pixel-sized container (chip/btn/tab already set explicit px sizes below) but it
   blows up any icon dropped into a container that sizes itself around its content (e.g. a stat
   tile's value row). Scale to the surrounding text by default; more specific rules below still win. */
svg{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; flex:none; }
::selection{ background:var(--orange); color:var(--ink); }

.hidden{ display:none !important; }
.scroll-x{ overflow-x:auto; }

/* ------------------------------------------------------------- utilities */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:0.4px;
  padding:11px 18px; min-height:44px;
  background:var(--white); color:var(--ink);
  border:var(--bw) solid var(--border);
  cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .06s ease, box-shadow .06s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--ink); }
.btn:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }
.btn-primary{ background:var(--orange); color:var(--ink); }
.btn-navy{ background:var(--navy); color:var(--white); }
.btn-sm{ padding:8px 12px; min-height:38px; font-size:12.5px; box-shadow:3px 3px 0 var(--ink); }
.btn-sm:hover{ box-shadow:5px 5px 0 var(--ink); }
.btn-ghost{ background:var(--offwhite); box-shadow:none; }
.btn-ghost:hover{ box-shadow:3px 3px 0 var(--ink); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; box-shadow:none; transform:none; }
.btn svg{ width:16px; height:16px; flex:none; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:var(--bw-sm) solid var(--border);
  padding:5px 10px; font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:0.3px;
  white-space:nowrap;
}
.chip svg{ width:13px; height:13px; }
.chip.green{ background:var(--green-bg); color:var(--green-text); }
.chip.red{ background:var(--red-bg); color:var(--red-text); }
.chip.amber{ background:var(--amber-bg); color:var(--amber-text); }
.chip.blue{ background:var(--blue-bg); color:var(--blue-text); }
.chip.navy{ background:var(--navy); color:var(--white); }
.chip.plain{ background:var(--white); color:var(--ink); }

.card{
  background:var(--white);
  border:var(--bw) solid var(--border);
  box-shadow:5px 5px 0 var(--ink);
}
.block{ background:var(--white); border:var(--bw) solid var(--border); }

/* ------------------------------------------------------------------ header */
.topbar{
  background:var(--navy); color:var(--white);
  border-bottom:var(--bw) solid var(--border);
  padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark{ width:42px; height:42px; flex:none; }
.brand-text{ min-width:0; }
.brand-text .name{ font-family:var(--font-display); font-size:17px; line-height:1.1; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text .tag{ font-size:11px; color:#c9d3e6; letter-spacing:0.6px; text-transform:uppercase; font-weight:600; }
.topbar-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.topbar-actions .btn{ box-shadow:4px 4px 0 var(--ink); }
.reset-link{
  background:none; border:none; color:#c9d3e6; font-size:12px; text-decoration:underline;
  cursor:pointer; padding:8px; min-height:44px; font-weight:600;
}
.reset-link:hover{ color:var(--white); }

/* ------------------------------------------------------------------- tabs */
.tabbar{
  background:var(--ink);
  border-bottom:var(--bw) solid var(--border);
  display:flex; overflow-x:auto;
}
.tab{
  font-family:var(--font-display); font-size:13px; letter-spacing:0.5px;
  color:#cfd3da; background:var(--ink);
  border:none; border-right:var(--bw-sm) solid #333;
  padding:14px 20px; min-height:48px; min-width:100px;
  cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.tab svg{ width:16px; height:16px; flex:none; }
.tab:hover{ background:#232323; color:var(--white); }
.tab.active{ background:var(--orange); color:var(--ink); }
.tab:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px; }

/* ------------------------------------------------------------------- main */
.screen{ padding:20px; max-width:1400px; margin:0 auto; }
.screen-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.screen-head h1{ font-size:26px; color:var(--navy); }
.screen-head .sub{ font-size:13px; color:#555; margin-top:4px; font-weight:600; }
.section-label{ font-family:var(--font-display); font-size:13px; color:var(--navy); margin:22px 0 10px; letter-spacing:0.5px; }

/* --------------------------------------------------------------- catalog */
.catalog-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
.search-box{
  display:flex; align-items:center; gap:8px;
  border:var(--bw) solid var(--border); background:var(--white);
  padding:0 12px; min-height:44px; flex:1 1 240px; max-width:420px;
}
.search-box svg{ width:18px; height:18px; flex:none; color:#555; }
.search-box input{
  border:none; outline:none; background:transparent; font-family:var(--font-body);
  font-size:14px; width:100%; min-height:42px; color:var(--ink);
}
.cat-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-filter{
  border:var(--bw-sm) solid var(--border); background:var(--white); color:var(--ink);
  font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:0.3px;
  padding:9px 14px; min-height:40px; cursor:pointer;
}
.cat-filter.active{ background:var(--navy); color:var(--white); }

.catalog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;
  margin-bottom:110px;
}
.product-tile{
  background:var(--white); border:var(--bw) solid var(--border);
  box-shadow:4px 4px 0 var(--ink);
  display:flex; flex-direction:column;
}
.tile-top{
  background:var(--navy); color:var(--white);
  padding:16px 12px; position:relative; overflow:hidden;
  border-bottom:var(--bw) solid var(--border);
}
.tile-top .mono{ font-family:var(--font-display); font-size:34px; line-height:1; opacity:0.92; }
.tile-top .sku{ font-size:10.5px; letter-spacing:0.6px; font-weight:700; color:#c9d3e6; margin-top:6px; }
.tile-top.out-of-stock{ background:#4a4a4a; }
.tile-body{ padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tile-name{ font-weight:700; font-size:13.5px; line-height:1.3; min-height:34px; }
.tile-unit{ font-size:11.5px; color:#555; font-weight:600; }
.tile-price{ font-family:var(--font-display); font-size:19px; color:var(--navy); }
.tile-stockrow{ margin-top:2px; }
.tile-actions{ margin-top:auto; display:flex; align-items:center; gap:8px; min-width:0; }
.qty-stepper{ display:flex; align-items:center; border:var(--bw-sm) solid var(--border); flex:none; }
.qty-stepper button{ width:34px; height:36px; border:none; background:var(--offwhite); font-size:16px; font-weight:800; cursor:pointer; }
.qty-stepper button:hover{ background:#e9e5db; }
.qty-stepper input{ width:40px; text-align:center; border:none; border-left:var(--bw-sm) solid var(--border); border-right:var(--bw-sm) solid var(--border); height:36px; font-weight:700; font-family:var(--font-body); }
.tile-add{ flex:1; min-width:0; min-height:36px; padding:0 8px; font-size:12px; overflow:hidden; }

/* ---------------------------------------------------------- quote builder */
.builder-tab{
  position:fixed; right:20px; bottom:20px; z-index:40;
  background:var(--orange); color:var(--ink); border:var(--bw) solid var(--border);
  box-shadow:5px 5px 0 var(--ink); padding:14px 18px; min-height:52px;
  font-family:var(--font-display); font-size:14px; cursor:pointer;
  display:flex; align-items:center; gap:10px;
}
.builder-tab .count{ background:var(--ink); color:var(--white); border-radius:0; padding:2px 8px; font-size:13px; }
.builder-panel{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%);
  background:var(--offwhite); border-left:var(--bw) solid var(--border);
  z-index:60; display:flex; flex-direction:column; transform:translateX(102%);
  transition:transform .18s ease;
}
.builder-panel.open{ transform:translateX(0); }
.builder-head{ background:var(--navy); color:var(--white); padding:16px; display:flex; align-items:center; justify-content:space-between; border-bottom:var(--bw) solid var(--border); }
.builder-head h2{ font-size:16px; }
.builder-close{ background:none; border:none; color:var(--white); cursor:pointer; padding:8px; min-width:44px; min-height:44px; }
.builder-items{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.builder-empty{ text-align:center; color:#666; padding:40px 20px; font-weight:600; font-size:13.5px; }
.builder-line{ background:var(--white); border:var(--bw-sm) solid var(--border); padding:10px; display:flex; flex-direction:column; gap:6px; }
.builder-line-top{ display:flex; justify-content:space-between; gap:8px; font-weight:700; font-size:13px; }
.builder-line-meta{ font-size:11.5px; color:#555; }
.builder-line-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.builder-remove{ background:none; border:none; color:var(--red-text); cursor:pointer; padding:6px; min-width:32px; }
.builder-summary{ border-top:var(--bw) solid var(--border); padding:14px 16px; background:var(--white); }
.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; }
.summary-row.total{ font-family:var(--font-display); font-size:17px; color:var(--navy); border-top:var(--bw-sm) solid var(--border); margin-top:6px; padding-top:8px; }
.builder-footer{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.builder-footer select, .builder-footer input{
  width:100%; border:var(--bw-sm) solid var(--border); padding:10px; font-family:var(--font-body); font-size:13.5px; min-height:44px; background:var(--white);
}
.scrim{ position:fixed; inset:0; background:rgba(20,20,20,0.5); z-index:55; }

/* --------------------------------------------------------------- tables */
.table-wrap{ border:var(--bw) solid var(--border); background:var(--white); overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; min-width:640px; }
table.data th{
  background:var(--navy); color:var(--white); text-align:left; font-size:11px;
  text-transform:uppercase; letter-spacing:0.4px; padding:10px 12px; font-family:var(--font-body); font-weight:700;
  border-bottom:var(--bw) solid var(--border);
}
table.data td{ padding:12px; border-bottom:var(--bw-sm) solid #ddd; font-size:13.5px; vertical-align:middle; }
table.data tbody tr{ cursor:pointer; }
table.data tbody tr:hover{ background:#fdf3ec; }
table.data tbody tr:last-child td{ border-bottom:none; }
.row-amount{ font-weight:700; font-family:var(--font-body); white-space:nowrap; }
.row-client{ font-weight:700; }
.empty-state{ padding:50px 20px; text-align:center; color:#666; font-weight:600; }

/* --------------------------------------------------------------- filters */
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter-pill{
  border:var(--bw-sm) solid var(--border); background:var(--white); font-weight:700; font-size:12px;
  text-transform:uppercase; padding:8px 13px; min-height:38px; cursor:pointer;
}
.filter-pill.active{ background:var(--orange); }

/* ---------------------------------------------------------- order stepper */
.stepper{ display:flex; align-items:center; gap:0; margin:4px 0 18px; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:8px; }
.step-dot{
  width:30px; height:30px; border:var(--bw-sm) solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex:none;
}
.step-dot.done{ background:var(--navy); color:var(--white); }
.step-dot.current{ background:var(--orange); color:var(--ink); }
.step-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; color:#555; }
.step-label.done, .step-label.current{ color:var(--ink); }
.step-line{ width:28px; height:var(--bw-sm); background:var(--border); margin:0 6px; }

/* ------------------------------------------------------------ client cards */
.client-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.client-card{ background:var(--white); border:var(--bw) solid var(--border); box-shadow:4px 4px 0 var(--ink); padding:16px; cursor:pointer; display:flex; flex-direction:column; gap:10px; }
.client-card:hover{ box-shadow:6px 6px 0 var(--ink); }
.client-card h3{ font-size:15px; color:var(--navy); text-transform:none; }
.client-meta{ font-size:12px; color:#555; font-weight:600; }
.credit-meter{ height:14px; border:var(--bw-sm) solid var(--border); background:var(--offwhite); position:relative; overflow:hidden; }
.credit-meter-fill{ height:100%; background:var(--navy); }
.credit-meter-fill.over{ background:var(--red-text); }
.balance-row{ display:flex; justify-content:space-between; align-items:baseline; }
.balance-row .amt{ font-family:var(--font-display); font-size:19px; color:var(--navy); }

/* -------------------------------------------------------------- detail */
.detail-shell{ display:flex; flex-direction:column; gap:16px; }
.detail-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.back-link{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--navy); font-weight:700; font-size:13px; cursor:pointer; padding:10px 0; min-height:44px; text-transform:uppercase; letter-spacing:0.3px; }
.back-link svg{ width:16px; height:16px; }
.two-col{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:16px; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.info-block{ padding:16px; }
.info-block h3{ font-size:13px; color:var(--navy); margin-bottom:10px; }
.kv{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:13px; border-bottom:1px solid #eee; }
.kv:last-child{ border-bottom:none; }
.kv .k{ color:#555; font-weight:600; }
.kv .v{ font-weight:700; text-align:right; }

/* ---------------------------------------------------------- doc overlay */
.doc-overlay{ position:fixed; inset:0; background:rgba(20,20,20,0.6); z-index:80; display:flex; flex-direction:column; }
.doc-toolbar{ background:var(--ink); color:var(--white); display:flex; align-items:center; justify-content:space-between; padding:10px 16px; flex-wrap:wrap; gap:10px; }
.doc-toolbar .btn{ box-shadow:none; }
.doc-scroll{ flex:1; overflow-y:auto; padding:28px 16px; display:flex; justify-content:center; }
.doc-page{
  background:var(--white); color:var(--ink); width:210mm; max-width:100%; min-height:auto;
  padding:14mm 14mm; border:var(--bw) solid var(--border);
  font-family:var(--font-body); font-size:12.5px;
}
.doc-page h1,.doc-page h2,.doc-page h3{ font-family:var(--font-display); }
.doc-head{ display:flex; justify-content:space-between; gap:16px; border-bottom:var(--bw) solid var(--border); padding-bottom:14px; margin-bottom:16px; }
.doc-brand{ display:flex; gap:12px; align-items:flex-start; }
.doc-brand .brand-mark{ width:44px; height:44px; }
.doc-brand .bname{ font-family:var(--font-display); font-size:16px; color:var(--navy); }
.doc-brand .baddr{ font-size:10.5px; color:#444; margin-top:4px; line-height:1.5; max-width:260px; }
.doc-title{ text-align:right; }
.doc-title .doctype{ font-family:var(--font-display); font-size:22px; color:var(--orange); -webkit-text-stroke:0.6px var(--ink); }
.doc-title .docmeta{ font-size:11px; margin-top:6px; line-height:1.6; }
.doc-title .docmeta b{ color:var(--navy); }
.doc-parties{ display:flex; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.doc-party{ flex:1; min-width:220px; border:var(--bw-sm) solid var(--border); padding:10px 12px; background:var(--offwhite); }
.doc-party .lbl{ font-family:var(--font-display); font-size:10.5px; color:var(--navy); margin-bottom:5px; }
.doc-party .name{ font-weight:700; font-size:13px; }
.doc-party .line{ font-size:11px; color:#444; margin-top:2px; }
table.doc-table{ width:100%; border-collapse:collapse; margin-bottom:14px; }
table.doc-table th{ background:var(--navy); color:var(--white); font-size:10px; text-transform:uppercase; padding:8px 10px; text-align:left; border:1px solid var(--ink); }
table.doc-table td{ padding:7px 10px; border:1px solid #ccc; font-size:11.5px; }
table.doc-table td.num{ text-align:right; white-space:nowrap; }
table.doc-table tfoot td{ border:1px solid var(--ink); font-weight:700; }
.doc-totals{ width:280px; margin-left:auto; margin-bottom:16px; }
.doc-totals .row{ display:flex; justify-content:space-between; padding:5px 10px; font-size:12px; border-bottom:1px solid #ddd; }
.doc-totals .row.grand{ background:var(--navy); color:var(--white); font-family:var(--font-display); font-size:14px; border:none; padding:9px 10px; }
.doc-note{ font-size:10.5px; color:#444; border-top:1px solid #ccc; padding-top:8px; margin-top:10px; line-height:1.6; }
.doc-badge{ display:inline-block; border:1.5px solid var(--ink); padding:3px 8px; font-size:10px; font-weight:800; text-transform:uppercase; background:var(--orange); }
.sig-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.sig-box{ border:var(--bw-sm) solid var(--border); padding:12px; min-height:90px; }
.sig-box .lbl{ font-family:var(--font-display); font-size:10.5px; color:var(--navy); margin-bottom:26px; }
.sig-box .line{ border-top:1px solid var(--ink); padding-top:4px; font-size:10.5px; color:#555; margin-top:12px; }
.doc-footer{ text-align:center; font-size:10px; color:#777; border-top:1px solid #ccc; margin-top:16px; padding-top:8px; }
.bank-block{ border:var(--bw-sm) solid var(--border); padding:10px 12px; font-size:10.5px; margin-top:10px; background:var(--offwhite); }
.bank-block .lbl{ font-family:var(--font-display); font-size:10px; color:var(--navy); margin-bottom:4px; }

/* ------------------------------------------------------------- statement */
.stmt-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:var(--bw) solid var(--border); margin-bottom:16px; }
.stmt-stat{ padding:14px; border-right:var(--bw-sm) solid var(--border); background:var(--white); }
.stmt-stat:last-child{ border-right:none; }
.stmt-stat .lbl{ font-size:10px; text-transform:uppercase; font-weight:700; color:#555; }
.stmt-stat .val{ font-family:var(--font-display); font-size:18px; color:var(--navy); margin-top:4px; }
@media (max-width:700px){ .stmt-summary{ grid-template-columns:repeat(2,1fr); } .stmt-stat{ border-bottom:var(--bw-sm) solid var(--border); } }

/* --------------------------------------------------------------- misc */
.icon-btn{ background:var(--white); border:var(--bw-sm) solid var(--border); width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn svg{ width:18px; height:18px; }
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--white); border:var(--bw-sm) solid var(--ink);
  padding:12px 18px; font-weight:700; font-size:13px; z-index:100; box-shadow:4px 4px 0 var(--orange);
  max-width:calc(100vw - 32px);
  pointer-events:none; /* a passive notification must never steal a click from what's under it —
    on narrow viewports it can visually overlap the floating Quotation Builder button */
}
.footer-note{ text-align:center; padding:24px 16px 40px; font-size:11.5px; color:#777; }

/* ------------------------------------------------------------------ print */
@media print{
  body *{ visibility:hidden; }
  .doc-overlay, .doc-overlay *{ visibility:visible; }
  .doc-overlay{ position:static; background:none; }
  .doc-toolbar{ display:none !important; }
  .doc-scroll{ padding:0; overflow:visible; display:block; }
  .doc-page{ border:none; width:auto; margin:0; padding:10mm; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width:640px){
  .topbar{ padding:10px 14px; }
  .brand-text .name{ font-size:14px; }
  .screen{ padding:14px; }
  .screen-head h1{ font-size:21px; }
  .catalog-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .builder-panel{ width:100%; }
  .doc-page{ padding:8mm; font-size:11.5px; }
  .doc-head{ flex-direction:column; }
  .doc-title{ text-align:left; }
  .sig-grid{ grid-template-columns:1fr; }
  .stmt-summary{ grid-template-columns:1fr 1fr; }
  .toast{ bottom:84px; }
  .builder-tab{ right:14px; bottom:14px; padding:12px 14px; }
  .builder-tab span:not(.count){ display:none; } /* icon + count only — keeps the tap target compact and clear of the toast band on narrow screens */

  /* 44px minimum tap target on mobile: a 150-220px-wide catalog tile can't fit a 3-part qty
     stepper plus an Add button side-by-side at 44px each, so the stepper stacks full-width above
     a full-width Add button here instead of shrinking below the minimum. */
  .btn-sm, .cat-filter, .filter-pill{ min-height:44px; }
  .search-box, .search-box input{ min-height:44px; }
  .tile-actions{ flex-direction:column; align-items:stretch; }
  .tile-actions .qty-stepper{ width:100%; }
  .tile-actions .qty-stepper button{ flex:1; width:auto; height:44px; }
  .tile-actions .qty-stepper input{ flex:0 0 56px; height:44px; }
  .tile-add{ width:100%; min-height:44px; }
  .builder-line-row .qty-stepper button{ width:40px; height:44px; }
  .builder-line-row .qty-stepper input{ width:44px; height:44px; }
  .builder-remove{ min-width:44px; min-height:44px; }
}