/* CigFlip brand layer — the look of the main page, in one place.
   Lifted verbatim from index.html so the two cannot disagree.

   index.html links this FIRST and keeps its own <style> after it, so the main
   page's rules still win. That file interleaves base rules with media queries and
   is order-sensitive; nothing here should ever need to override it. */

:root{
  --bg:#0d0f12; --card:#151a20; --card-hi:#1b212a;
  --ink:#f2f4f6; --ink-2:#a9b0b8; --ink-3:#7d848d;
  --accent:#ff7a1a; --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh;
}

/* 2x4 wood backdrop — fixed layer so it never stretches on long pages */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 480px at 50% -180px, rgba(255,122,26,.10), transparent 60%),
    linear-gradient(rgba(11,13,16,.72), rgba(11,13,16,.5) 30%, rgba(11,13,16,.62)),
    url('/img/wood-bg.jpg') center / cover no-repeat;
}

/* crosshair cursor on pointer devices */
@media (pointer:fine){
  body{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='none' stroke='%23ff7a1a' stroke-width='1.5'><circle cx='16' cy='16' r='9'/><path d='M16 1v8M16 23v8M1 16h8M23 16h8'/></g><circle cx='16' cy='16' r='1.5' fill='%23ff7a1a'/></svg>") 16 16, crosshair;}
  a,button,label,select,input[type=checkbox],input[type=file]{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='.9'><circle cx='16' cy='16' r='9'/><path d='M16 1v8M16 23v8M1 16h8M23 16h8'/></g><circle cx='16' cy='16' r='2.4' fill='%23e34948'/></svg>") 16 16, crosshair;}
}

/* ---- the lockup ----
   The supplied artwork is black + orange, so a dark page uses the light variant.
   Sized by HEIGHT: the lockup is 1.96:1 and a width rule blows it out on wide screens. */
.brandbar{display:block;width:max-content;max-width:100%;line-height:0}
.brand{display:block;width:auto;filter:drop-shadow(0 2px 16px rgba(0,0,0,.7))}

/* Secondary pages (shop, admin, reports, legal) share one compact masthead rather
   than repeating the main page's full hero. */
.bhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 0 16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.bhead .brand{height:clamp(34px,4.6vw,52px)}
.bhead .sep{flex:1}
.bhead .where{font-size:13px;color:var(--ink-3);font-weight:700;
  letter-spacing:.4px;text-transform:uppercase}
.bhead a.home{color:var(--ink-3);font-size:13px;text-decoration:none;font-weight:600}
.bhead a.home:hover{color:var(--accent)}

/* orange focus ring everywhere, for keyboard users */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}