/* Layout: same system as hillcrest-hardware.com — warm grey ground, hairline rules, one signal red for actions */
  :root{
    --ground:#F2F1ED; --panel:#E9E7E1; --ink:#151515; --ink-2:#66655F; --rule:#D8D6CF;
    --signal:#E23A1C; --signal-ink:#FFFFFF; --white:#FFFFFF;
    --ok:#2F6B3A; --ok-bg:#E2EADF; --warn:#8A5A00; --warn-bg:#F1E6CC; --bad:#A3260F; --bad-bg:#F4DDD6;
    --cbz:#B69A47; --sn:#9E9C95; --mb:#1E1E1E;
    --display:"Archivo",system-ui,"Helvetica Neue",Arial,sans-serif;
    --body:"Archivo",system-ui,"Helvetica Neue",Arial,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#161513; --panel:#1F1E1B; --ink:#EDEBE5; --ink-2:#A3A199; --rule:#34322D;
      --signal:#F2583C; --signal-ink:#161513; --white:#F5F4F0;
      --ok:#8CC795; --ok-bg:#1F2D21; --warn:#E3B661; --warn-bg:#33291A; --bad:#F2876F; --bad-bg:#3A1F19;
      --mb:#3A3A3A; color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --ground:#161513; --panel:#1F1E1B; --ink:#EDEBE5; --ink-2:#A3A199; --rule:#34322D;
    --signal:#F2583C; --signal-ink:#161513; --white:#F5F4F0;
    --ok:#8CC795; --ok-bg:#1F2D21; --warn:#E3B661; --warn-bg:#33291A; --bad:#F2876F; --bad-bg:#3A1F19;
    --mb:#3A3A3A; color-scheme:dark;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
  h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;font-stretch:112.5%;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
  p{margin:0}
  .wrap{width:min(1120px,100%);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
  .num{font-variant-numeric:tabular-nums}
  .mono{font-family:var(--mono);font-size:13px}
  .muted{color:var(--ink-2)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1.5px solid var(--ink);border-radius:2px;font:500 14px var(--body);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s,color .15s;text-decoration:none}
  .btn:hover{background:var(--ink);color:var(--ground)}
  .btn.primary{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
  .btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
  .btn[disabled]{opacity:.4;pointer-events:none}
  .btn.sm{padding:6px 12px;font-size:13px;border-width:1px}
  .link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  :focus-visible{outline:2px solid var(--signal);outline-offset:3px}
  input,select,textarea{font:inherit;font-size:15px;padding:10px 12px;background:var(--white);border:1px solid var(--rule);color:var(--ink);border-radius:2px;width:100%}
  label.f{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}

  .banner{background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:12px;letter-spacing:.04em}
  .banner .wrap{padding-block:8px;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between}
  .banner b{color:var(--signal);font-weight:500}

  header.top{border-bottom:1px solid var(--rule);background:var(--ground);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
  header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
  .brand{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:800;font-stretch:112.5%;font-size:19px;letter-spacing:-.01em;text-transform:uppercase}
  .brand small{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--ink-2)}
  .who{display:flex;align-items:center;gap:14px;font-size:13px}
  .who span{color:var(--ink-2)}
  @media (max-width:560px){.who span{display:none}}

  nav.tabs{border-bottom:1px solid var(--rule)}
  nav.tabs .wrap{display:flex;gap:4px;overflow-x:auto}
  nav.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:14px 14px 12px;font:500 14px var(--body);color:var(--ink-2);cursor:pointer;white-space:nowrap}
  nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--signal)}
  nav.tabs button .ct{font-family:var(--mono);font-size:11px;background:var(--panel);padding:1px 6px;border-radius:9px;margin-left:6px;color:var(--ink)}

  main{padding-block:32px 72px}
  .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
  .head h1{font-size:clamp(28px,4vw,40px);text-transform:uppercase}

  /* summary strip */
  .sum{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);margin-bottom:28px;background:var(--ground)}
  .sum>div{padding:18px 20px;border-left:1px solid var(--rule);display:grid;gap:4px}
  .sum>div:first-child{border-left:0}
  .sum b{font-family:var(--display);font-weight:800;font-stretch:112.5%;font-size:28px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .sum .bad b{color:var(--bad)}
  .sum span{font-size:13px;color:var(--ink-2)}
  @media (max-width:640px){.sum{grid-template-columns:1fr}.sum>div{border-left:0;border-top:1px solid var(--rule)}.sum>div:first-child{border-top:0}}

  .tbl-wrap{overflow-x:auto;border:1px solid var(--rule)}
  table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
  th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--panel)}
  td{padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
  tr:last-child td{border-bottom:0}
  td.r,th.r{text-align:right}
  tbody tr:hover{background:color-mix(in srgb,var(--panel) 55%,transparent)}
  input[type=checkbox]{width:18px;height:18px;accent-color:var(--signal);cursor:pointer}
  .pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;white-space:nowrap}
  .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.neu{background:var(--panel);color:var(--ink-2)}

  /* pay bar */
  .paybar{position:sticky;bottom:0;margin-top:20px;background:var(--ink);color:var(--ground);padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
  .paybar .amt{font-family:var(--display);font-weight:800;font-stretch:112.5%;font-size:22px;font-variant-numeric:tabular-nums}
  .paybar .btn{border-color:var(--signal)}

  /* drawer */
  .scrim{position:fixed;inset:0;background:color-mix(in srgb,#000 45%,transparent);z-index:20;display:flex;justify-content:flex-end}
  .drawer{background:var(--ground);width:min(560px,100%);height:100%;overflow-y:auto;padding:28px clamp(16px,4vw,32px) calc(28px + env(safe-area-inset-bottom,0px));display:grid;align-content:start;gap:20px;border-left:1px solid var(--rule)}
  .drawer h2{font-size:28px;text-transform:uppercase}
  .dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:14px}
  .dl dt{color:var(--ink-2)} .dl dd{margin:0}
  .lines{width:100%;min-width:0;font-size:13px}
  .lines td,.lines th{padding:8px 6px}
  .total-row td{font-weight:500;border-top:1.5px solid var(--ink)}

  .method{display:grid;gap:10px}
  .method label{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--rule);padding:14px;cursor:pointer;background:var(--white)}
  .method label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .method input{width:auto;margin-top:3px;accent-color:var(--signal)}
  .method small{display:block;color:var(--ink-2);font-size:13px}

  /* order */
  .order-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
  @media (max-width:900px){.order-grid{grid-template-columns:1fr}}
  .series{border:1px solid var(--rule);margin-bottom:18px;background:var(--ground)}
  .series>header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 16px;border-bottom:1px solid var(--rule);background:var(--panel)}
  .series>header h3{font-size:20px;text-transform:uppercase}
  .sku-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--rule)}
  .sku-row:last-child{border-bottom:0}
  .sku-row .nm{display:flex;align-items:center;gap:10px;min-width:0}
  .dot{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
  .price{font-family:var(--mono);font-size:13px;min-width:64px;text-align:right}
  .qty{display:flex;align-items:center;border:1px solid var(--rule);background:var(--white)}
  .qty button{background:none;border:0;width:32px;height:34px;font-size:17px;cursor:pointer;color:var(--ink)}
  .qty input{width:52px;border:0;border-inline:1px solid var(--rule);text-align:center;padding:6px 2px;font-variant-numeric:tabular-nums;border-radius:0}
  .cart{border:1px solid var(--ink);padding:18px;display:grid;gap:14px;position:sticky;top:calc(80px + env(safe-area-inset-top,0px));background:var(--ground)}
  .cart h3{font-size:20px;text-transform:uppercase}
  .cart ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;max-height:260px;overflow-y:auto}
  .cart li{display:flex;justify-content:space-between;gap:10px}
  .cart .tot{display:flex;justify-content:space-between;border-top:1.5px solid var(--ink);padding-top:10px;font-weight:500}
  .note{font-size:12px;color:var(--ink-2)}

  /* sign in */
  .signin{min-height:100%;display:grid;grid-template-columns:1fr 1fr}
  .signin .l{background:var(--ink);color:var(--ground);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
  .signin .l h1{font-size:clamp(36px,5vw,64px);text-transform:uppercase;color:var(--ground)}
  .signin .l h1 em{font-style:normal;color:var(--signal)}
  .signin .l p{color:color-mix(in srgb,var(--ground) 70%,transparent);max-width:28em}
  .signin .l .eyebrow{color:color-mix(in srgb,var(--ground) 60%,transparent)}
  .signin .r{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:20px;max-width:480px}
  .signin .r h2{font-size:28px;text-transform:uppercase}
  @media (max-width:760px){.signin{grid-template-columns:1fr}}

  .done{border:1px solid var(--rule);padding:clamp(24px,4vw,40px);display:grid;gap:14px;max-width:640px}
  .done h2{font-size:30px;text-transform:uppercase}
  .tick{width:44px;height:44px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:22px}
  .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 16px;font-size:14px;z-index:30;border-radius:2px}
  html{height:100%} body{min-height:100%}
  .err{background:var(--bad-bg);color:var(--bad);padding:12px 14px;font-size:14px;border-radius:2px}
  .okmsg{background:var(--ok-bg);color:var(--ok);padding:12px 14px;font-size:14px;border-radius:2px}
  .loading{color:var(--ink-2);font-family:var(--mono);font-size:13px;padding:40px 0}
  .card{border:1px solid var(--rule);padding:20px;display:grid;gap:14px;background:var(--ground)}
  .card h2{font-size:22px;text-transform:uppercase}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:640px){.grid2{grid-template-columns:1fr}}
  .row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
  @media (max-width:900px){.admin-grid{grid-template-columns:1fr}}
  a{color:inherit}
  .skucode{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
  .quick{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:10px;align-items:end;margin-bottom:18px;padding:14px 16px;border:1px solid var(--rule);background:var(--panel)}
  .quick input#qsku{font-family:var(--mono);text-transform:uppercase}
  .quick .btn{height:44px}
  @media (max-width:480px){.quick{grid-template-columns:1fr 80px}.quick .btn{grid-column:1/-1}}
  .price .ea{color:var(--ink-2);font-size:11px}
  .casep{font-size:11px;color:var(--ok);white-space:nowrap;margin-top:2px}
  .addcase{font-size:12px;margin-top:2px}
  .cart li.cl{display:grid;gap:2px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
  .cart li.cl:last-child{border-bottom:0}
  .clrow{display:flex;justify-content:space-between;gap:10px;width:100%}
  .cart li.cl{width:100%;grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .cldet{font-size:12px;color:var(--ink-2)}
  .nudge{font-size:12px;color:var(--ok);text-align:left}
  .saved{display:flex;justify-content:space-between;font-size:14px;color:var(--ok)}
  .sku-row .price{min-width:96px}
  @media (max-width:560px){.casep{white-space:normal;max-width:96px}.sku-row .price{min-width:0}.sku-row{gap:8px;padding-inline:12px}}
  [hidden]{display:none!important}
  .admin-grid>div{min-width:0;grid-template-columns:minmax(0,1fr)}
  .rowlinks{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:13px}

  /* admin: customer logins table */
  table.logins{min-width:560px;table-layout:fixed}
  .logins th{white-space:nowrap;padding:10px 16px}
  .logins td{vertical-align:top;padding:16px;line-height:1.4}
  .logins .acct,.logins .amt{font-weight:500;font-size:14px;line-height:20px}
  .logins .amt.bad{color:var(--bad)}
  .logins .sub{font-size:12px;color:var(--ink-2);line-height:18px;overflow-wrap:anywhere}
  .logins td.r .sub{white-space:nowrap}
  .logins .pill{line-height:14px;margin-top:0}
  .logins .rowlinks{gap:4px 16px;margin-top:10px}
  .logins .rowlinks .link{white-space:nowrap}
  .logins .rowlinks .danger{color:var(--bad)}
  @media (max-width:640px){
    table.logins{min-width:0;table-layout:auto}
    .logins colgroup,.logins thead{display:none}
    .logins tbody,.logins tr{display:block}
    .logins tr{display:grid;grid-template-columns:96px 1fr 1fr;gap:12px 16px;padding:16px;border-bottom:1px solid var(--rule)}
    .logins tr:last-child{border-bottom:0}
    .logins td{display:block;padding:0;border:0}
    .logins td:first-child{grid-column:1/-1}
    .logins td.r{text-align:left}
    .logins td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
  }
  /* new order: backordered SKUs */
  .sku-row.bo{background:color-mix(in srgb,var(--panel) 55%,transparent)}
  .sku-row.bo .nm,.sku-row.bo .price{opacity:.45}
  .sku-row.bo .dot{filter:grayscale(1)}
  .bo-tag{width:118px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);border:1px dashed var(--rule);padding:9px 4px;white-space:nowrap}
  /* order history: tracking */
  .trk{display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:baseline;justify-content:start;font-size:13px}
  .trk .muted{font-size:11px}
  .transit{margin-top:28px;border:1px solid var(--rule);padding:18px 20px}
  .transit h2{font-size:20px;text-transform:uppercase;margin-bottom:10px}
  .transit ul{list-style:none;margin:0;padding:0;display:grid}
  .transit li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--rule);font-size:14px}
  .transit li:first-child{border-top:0;padding-top:4px}
  .transit .btn{white-space:nowrap}