:root{
  --ink:#15181c;          /* charcoal / near-black (matches logo) */
  --ink-2:#2a2f37;
  --steel:#5b6470;        /* steel gray */
  --line:#e4e7ec;
  --bg:#f6f7f9;
  --card:#ffffff;
  --accent:#c1121f;       /* Ironrod red — prices & CTA */
  --accent-dk:#9a0e18;
  --gold:#f4a300;         /* R-Panel highlight */
  --ok:#1a7f37;
  --shadow:0 1px 2px rgba(20,24,28,.06),0 4px 14px rgba(20,24,28,.05);
  --maxw:880px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:inherit}

/* ---- masthead ---- */
.masthead{background:var(--ink);color:#fff}
.mast-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 18px 20px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.logo{height:64px;width:auto;filter:invert(1) brightness(1.7)}
.mast-meta{display:flex;flex-direction:column;gap:3px;min-width:240px}
.phone{
  font-size:24px;font-weight:800;letter-spacing:.2px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;color:#fff;
}
.phone .ic{font-size:18px}
.addr{color:#cdd3db;text-decoration:none;font-size:14px;border-bottom:1px dotted #586070;align-self:flex-start}
.hours{color:#9aa3ae;font-size:13px}
.tagline{color:#aeb6c0;font-size:12.5px;margin-top:6px;max-width:430px}

/* ---- R-Panel hook ---- */
.hook{
  background:linear-gradient(180deg,#fff7e6,#fff0cc);
  color:#5a4300;border-bottom:1px solid #f0dca6;
  text-align:center;font-size:14px;padding:10px 16px;
}
.hook strong{color:#7a4a00}
.hook em{font-style:normal;color:var(--accent-dk);font-weight:700}

/* ---- SALE / blowout banner ---- */
@keyframes salepulse{
  0%,100%{box-shadow:0 0 0 rgba(193,18,31,0),inset 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 22px rgba(193,18,31,.6),inset 0 0 22px rgba(255,255,255,.10)}
}
@keyframes saleflame{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.18)}}
.salebar{
  display:flex;align-items:center;gap:10px;justify-content:center;
  max-width:var(--maxw);margin:0 auto;
  background:linear-gradient(90deg,var(--accent-dk),var(--accent),var(--accent-dk));
  color:#fff;text-decoration:none;font-weight:800;
  padding:11px 16px;letter-spacing:.2px;
  border-top:2px solid #ffd34d;border-bottom:2px solid #ffd34d;
  animation:salepulse 1.5s ease-in-out infinite;
}
/* `display:flex` above out-ranks the browser's [hidden] rule, so the bar would show as an
   empty red strip whenever there are no sale items. Keep this next to it. */
.salebar[hidden]{display:none !important}
.salebar .flame{font-size:20px;display:inline-block;animation:saleflame .9s ease-in-out infinite}
.saletext{font-size:15px;transition:opacity .3s ease;flex:0 1 auto;text-align:center}
.saletext.swap{opacity:0}
.saletext b{color:#ffe08a}
.saletext .now{color:#fff}
.saletext .old{color:#ffc2c7;text-decoration:line-through;font-weight:600;margin:0 4px 0 2px}
.salecta{
  font-size:12.5px;font-weight:800;background:#fff;color:var(--accent-dk);
  border-radius:999px;padding:4px 11px;white-space:nowrap;flex:0 0 auto;
}
.salebar:active{filter:brightness(.94)}
@media (max-width:480px){.saletext{font-size:13.5px}.salecta{display:none}}
@media (prefers-reduced-motion:reduce){
  .salebar{animation:none;box-shadow:0 0 14px rgba(193,18,31,.4)}
  .salebar .flame{animation:none}
  .saletext{transition:none}
}

/* sale row markers in the table */
tr.onsale{background:linear-gradient(90deg,#fff5f5,#fff)}
.pill.sale{background:var(--accent);color:#fff;animation:salepulse 1.5s ease-in-out infinite}
.catnav a.deals{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- category quick-nav (sticky) ---- */
.catnav{
  position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);
  display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:9px 12px;scrollbar-width:none;
}
.catnav::-webkit-scrollbar{display:none}
.catnav a{
  flex:0 0 auto;text-decoration:none;font-size:12.5px;font-weight:700;color:var(--ink-2);
  background:#eef1f5;border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.catnav a.hl{background:#fff0cc;border-color:var(--gold);color:#7a4a00}
.catnav a.allmat{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:800}
.catnav a:active{background:var(--ink);color:#fff}
.catnav:empty{display:none}

/* ---- sheet ---- */
main{max-width:var(--maxw);margin:0 auto;padding:18px 14px 40px}
.loading,.errbox{text-align:center;color:var(--steel);padding:40px 10px}
.errbox a{color:var(--accent);font-weight:700;white-space:nowrap}

.cat{margin:0 0 22px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);scroll-margin-top:48px}
.cat h2{
  margin:0;
  background:var(--ink-2);color:#fff;font-size:15px;letter-spacing:.4px;text-transform:uppercase;
  padding:11px 16px;display:flex;justify-content:space-between;align-items:center;
}
.cat h2 .count{font-weight:500;color:#9aa3ae;font-size:12px;text-transform:none;letter-spacing:0}
.cat.hl{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow)}
.cat.hl h2{background:linear-gradient(90deg,#7a4a00,#a86400)}

table{width:100%;border-collapse:collapse}
tbody tr{border-top:1px solid var(--line)}
tbody tr:first-child{border-top:0}
td{padding:11px 16px;vertical-align:middle}
.desc{font-weight:600;color:var(--ink)}
.pillrow{margin-top:3px}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:#eaf6ee;color:var(--ok);letter-spacing:.2px}
.pill.note{background:#eef1f5;color:var(--steel)}
.price{
  text-align:right;white-space:nowrap;font-weight:800;font-size:18px;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.price .u{display:block;font-size:11px;font-weight:600;color:var(--steel)}
.price .was{display:inline-block;margin-right:7px;font-size:13px;font-weight:600;color:#9aa3ae;text-decoration:line-through;text-decoration-color:var(--accent)}

/* ---- footer ---- */
.foot{max-width:var(--maxw);margin:0 auto;padding:6px 16px 48px;text-align:center}
.repline{background:#fff7e6;border:1px solid #f0dca6;color:#5a4300;border-radius:10px;
  padding:9px 14px;font-size:14px;margin:4px 0 12px}
.repline b{color:var(--accent-dk)}
.ctas{display:flex;gap:10px;margin:6px 0 16px}
.cta{
  flex:1;display:block;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;font-size:17px;
  padding:15px 12px;border-radius:12px;box-shadow:var(--shadow);text-align:center;
}
.cta.text,.cta.email{background:var(--ink-2)}
.cta:active{opacity:.85}
@media (max-width:480px){.cta{font-size:15px;padding:14px 6px}}
.disc{color:var(--steel);font-size:12.5px;max-width:620px;margin:0 auto 10px}
.updated{color:#9aa3ae;font-size:12px;margin:0 0 4px}
.copy{color:#9aa3ae;font-size:12px;margin:0}

/* ---- mobile: tables collapse to cards ---- */
@media (max-width:560px){
  .logo{height:52px}
  .phone{font-size:22px}
  td{padding:10px 14px}
  tbody tr{display:flex;justify-content:space-between;align-items:center;gap:12px}
  td.cellmain{padding-right:0}
  .price{font-size:17px;padding-left:0}
}