/* =========================
   eVERTSON UI — Unified CSS
   ========================= */

/* --- Tokens --- */
:root{
  --container:1200px;
  --radius:10px;
  --gap:12px;
  --fs:14px;
  
  /* Dark default */
  --bg:#18181B; --ink:#FAFAFA; --muted:#A1A1AA; --line:#27272A; --card:#1F1F23;
  --accent:#DC2626; --accent-ink:#FFFFFF;

  /* Button legacy aliases */
  --btn:#DC2626; --btnTxt:#FAFAFA; --btn2:#27272A; --btn2Txt:#FAFAFA;
}

/* Optional: Auto-dark via data-theme */
[data-theme="auto"] @media (prefers-color-scheme: light){
  --bg:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; --card:#ffffff;
  --accent:#111827; --accent-ink:#ffffff;
  --btn:#111827; --btnTxt:#ffffff; --btn2:#f3f4f6; --btn2Txt:#111827;
}

/* --- Base --- */
.table.items .buyer-name.vip   { color:#9ec3ff; }
.table.items .buyer-name.admin { color:#3ac26e; }
.table.items .buyer-name.banned{ text-decoration:line-through; opacity:.9; }
.table.items .buyer-name.vip.admin { color:#3ac26e; }

.userflag.vip{color:#9ec3ff}
.userflag.admin{color:#3ac26e}
.userflag.banned{text-decoration:line-through;opacity:.95}
.userflag.vip.admin{color:#3ac26e}

.item-card{
  display:flex;            /* let footer stick to bottom */
  flex-direction:column;
}
.item-card .title{
  /* optional: keep titles to 2 lines so heights match better */
  line-height:1.2;
  min-height: calc(1.2em * 2);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.item-card .meta{ margin-top:.25rem; }
.item-card .cond{
  min-height: 1.2em;       /* reserve exactly one line even when empty */
  font-size:.95rem;
  color:#aaa;
}
.item-card .price{
  margin-top:2px;
  font-weight:600;
}
.item-card .ui{
  margin-top:auto;         /* pushes actions to the bottom of the card */
  display:flex;
  gap:.5rem;
  align-items:center;
}




html,body{height:100%}
html{font-size:var(--fs); scrollbar-gutter:unset}
body{margin:0; background:var(--bg); color:var(--ink);
     font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial}
a{color:inherit; text-decoration:none}
a.link{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

/* --- Layout --- */
.container{max-width:var(--container); margin:0 auto; padding:0 12px}
@media (max-width:640px){ .container{padding:0 8px} }
.page{min-height:100vh; display:grid; grid-template-rows:auto 1fr auto}
.row{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
@media (max-width:480px){ .row{gap:.4rem} }
.right{margin-left:auto}
.hidden{display:none !important}
.text-right{text-align:right}
.amount{font-variant-numeric:tabular-nums}

/* --- Header --- */
header.site{position:sticky; top:0; z-index:50; background:var(--card); border-bottom:1px solid var(--line)}
nav.top{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem 0; flex-wrap:wrap}
@media (max-width:640px){ nav.top{padding:.5rem 0; gap:.5rem} }
nav.top .left, nav.top .right{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
@media (max-width:640px){ nav.top .left, nav.top .right{gap:.4rem} }
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent)}
.brand__logo{max-width:100%; height:auto}
@media (max-width:480px){ .brand__logo{width:100px; height:25px} }
.avatar{width:24px; height:24px; border-radius:50%; object-fit:cover}
.persona-link{display:inline-flex; align-items:center; gap:.5rem}
.persona-link .avatar{width:24px; height:24px; border-radius:50%}

/* --- Buttons --- */
.btn{
  appearance:none; cursor:pointer; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink);
  padding:.42rem .8rem; border-radius:var(--radius); font-weight:600; font-size:.9rem;
  white-space:nowrap;
}
@media (max-width:480px){ .btn{padding:.35rem .6rem; font-size:.85rem} }
.btn.secondary{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost{background:transparent; color:var(--ink); border-color:transparent}
.btn.sm{padding:.3rem .55rem; font-size:.85rem}
.btn.lg{padding:.6rem 1rem; font-size:1rem}
.btn:disabled{opacity:.6; cursor:not-allowed}
.badge{display:inline-block; padding:.12rem .5rem; border-radius:9999px; background:#2A2A2F; color:var(--muted); font-size:.8rem}
@media (max-width:480px){ .badge{font-size:.75rem; padding:.1rem .4rem} }

/* --- Inputs --- */
input,select,textarea{
  width:100%; background:#111113; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; outline:none;
  font-size:inherit;
}
@media (max-width:480px){ input,select,textarea{padding:.4rem .5rem; font-size:.9rem} }
label{display:block; margin:.25rem 0 .2rem; font-weight:600}
@media (max-width:480px){ label{font-size:.9rem} }
small.help{display:block; color:var(--muted); margin-top:.2rem}

/* Header search */
.hdr-search{display:flex; align-items:center; gap:.4rem}
.hdr-search input[type="search"]{
  width:260px; background:#111113; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem;
}
@media (max-width:640px){ .hdr-search input[type="search"]{ width:140px; padding:.4rem .5rem } }
@media (max-width:480px){ .hdr-search input[type="search"]{ width:120px; font-size:.85rem } }

/* --- Dropdowns --- */
.dropdown{position:relative}
.dropdown .menu{
  position:absolute; top:100%; left:0; min-width:220px; margin-top:.35rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(0,0,0,.35); padding:.25rem 0; display:none; z-index:100;
  opacity:0; transform:translateY(-8px); transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.dropdown:hover .menu,
.dropdown.open .menu{
  display:block; opacity:1; transform:translateY(0); pointer-events:auto;
}
.dropdown .menu a{display:block; padding:.55rem .8rem}
.dropdown .menu a:hover{background:#2A2A2F}

/* --- Cards / Tables --- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem}
@media (max-width:640px){ .card{padding:.6rem} }
.table{width:100%; border-collapse:collapse; display:block; overflow-x:auto}
@media (min-width:641px){ .table{display:table} }
.table th,.table td{padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:middle; text-align:left}
@media (max-width:640px){ .table th,.table td{padding:.4rem .3rem; font-size:.9rem} }
th{color:var(--muted); font-weight:600}
.thumb{width:44px; height:44px; object-fit:cover; border-radius:8px; background:#0b0b0d}
@media (max-width:480px){ .thumb{width:36px; height:36px} }

/* --- Storefront grid --- */
.grid{display:grid; gap:var(--gap)}
.grid.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1200px){.grid.cols-6{grid-template-columns:repeat(4,1fr); gap:10px}}
@media (max-width:900px){ .grid.cols-6{grid-template-columns:repeat(3,1fr); gap:8px}}
@media (max-width:640px){ .grid.cols-6{grid-template-columns:repeat(2,1fr); gap:8px}}
@media (max-width:480px){ .grid.cols-6{grid-template-columns:repeat(1,1fr); gap:10px}}

/* Legacy alias */
.store-grid{display:grid; gap:var(--gap); grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1200px){.store-grid{grid-template-columns:repeat(4,1fr); gap:10px}}
@media (max-width:900px){ .store-grid{grid-template-columns:repeat(3,1fr); gap:8px}}
@media (max-width:680px){ .store-grid{grid-template-columns:repeat(2,1fr); gap:8px}}
@media (max-width:480px){ .store-grid{grid-template-columns:repeat(1,1fr); gap:10px}}

/* --- Item cards --- */
.item{display:flex; flex-direction:column; gap:.5rem}
.item .img{width:100%; height:160px; border-radius:8px; object-fit:cover; background:#2A2A2F}
.item .title{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .meta{color:var(--muted); font-size:.9rem}

/* Tooltip bubble */
.tip{
  position:absolute; top:8px; left:8px; max-width:240px;
  background:rgba(17,24,39,.96); color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:.5rem .6rem; box-shadow:0 8px 24px rgba(0,0,0,.25);
  font-size:.85rem; line-height:1.25; opacity:0; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease; pointer-events:none; z-index:2;
}
.card:hover .tip{opacity:1; transform:translateY(0)}
.tip .kv span{display:block; opacity:.9}
.tip .muted{opacity:.7}

/* Hover overlay for media-heavy cards */
.item-card{position:relative}
.item-card .hover{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:.6rem; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
  pointer-events:none; border-radius:var(--radius);
}
.item-card:hover .hover{opacity:1; transform:translateY(0)}
.hover .ui{pointer-events:auto; display:flex; gap:.4rem; align-items:center; justify-content:space-between}
.hover .kv{display:flex; gap:.6rem; flex-wrap:wrap; font-size:.9rem; color:var(--ink)}
.hover .kv span{opacity:.85}
.item-card .cta{position:absolute; right:.5rem; bottom:.5rem}
.item-card .ui .btn{white-space:nowrap; min-width:96px; line-height:1}

/* --- Filters / search bar --- */
.filters{position:sticky; top:56px; z-index:40; background:var(--bg); border-bottom:1px solid var(--line); margin-bottom:.6rem}
.filters .wrap{display:flex; gap:.6rem; padding:.6rem 0; align-items:center}
.filters .grow{flex:1}
.input-group{display:flex; gap:.4rem; align-items:center}
.input-group input[type="search"]{flex:1}
.input-clear{appearance:none; border:1px solid var(--line); background:#2A2A2F; color:var(--ink); padding:.42rem .6rem; border-radius:8px; cursor:pointer}

/* --- Cart preview --- */
.cartwrap{position:relative; display:inline-block}
.cartpanel{
  position:absolute; top:calc(100% + 8px); right:0; width:360px;
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 12px 32px rgba(0,0,0,.12); padding:.5rem; display:none; z-index:80;
}
.cartwrap:hover .cartpanel, .cartwrap:focus-within .cartpanel{display:block}
.minilist{list-style:none; margin:0; padding:0; max-height:320px; overflow:auto}
.minirow{display:flex; gap:.5rem; align-items:center; padding:.4rem; border-radius:8px}
.minirow:hover{background:#232327}
.minithumb{width:44px; height:44px; object-fit:cover; border-radius:8px; background:#0b0b0d}
.minititle{font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.miniprice{font-size:.85rem; color:var(--muted)}
.minimore{padding:.3rem .4rem; font-size:.85rem; color:var(--muted)}
.minitotal{display:flex; gap:.4rem; align-items:center}
.minifoot{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.4rem}

/* --- Cart/checkout utilities --- */
.summary{display:flex; gap:.6rem; align-items:center; justify-content:flex-end; margin-top:.6rem}
.price{font-weight:700}
.td-actions form{display:inline}

/* --- Typeahead --- */
.typeahead{position:relative}
.typeahead input{width:100%}
.typeahead .results{
  position:absolute; top:calc(100% + 4px); left:0; right:0; max-height:260px;
  overflow:auto; background:var(--card); border:1px solid var(--line);
  border-radius:8px; display:none; z-index:60; box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.typeahead .results.show{display:block}
.typeahead .opt{padding:.45rem .6rem; cursor:pointer; display:flex; gap:.5rem; align-items:center}
.typeahead .opt:hover,.typeahead .opt.active{background:#232327}
.typeahead .opt img{width:34px; height:34px; object-fit:cover; border-radius:6px; background:#0b0b0d}
.typeahead .opt .t{font-size:.92rem; font-weight:600}
.typeahead .opt .s{font-size:.78rem; color:var(--muted)}
.typeahead mark{background:transparent; color:#facc15; font-weight:600}

/* --- Notices / flashes --- */
.notice{margin:.4rem 0; color:var(--muted)}
.flash{border:1px solid; border-radius:var(--radius); padding:.5rem .7rem; margin:.5rem 0; font-size:.9rem}
.flash.ok{background:#062e16; border-color:#14532d; color:#d1fae5}
.flash.bad{background:#3b0d0d; border-color:#7f1d1d; color:#fecaca}
.ok{background:#062e16; border:1px solid #14532d; padding:.5rem .7rem; border-radius:6px}
.bad{background:#3b0d0d; border:1px solid #7f1d1d; padding:.5rem .7rem; border-radius:6px}

/* --- Footer --- */
footer{border-top:1px solid var(--line); padding:12px 0 20px; background:inherit}
@media (max-width:640px){ footer{padding:10px 0 16px} }

/* Steam login button */
.steam-login{display:inline-block}
.steam-login img{max-width:100%; height:auto}
@media (max-width:480px){ .steam-login img{width:150px; height:29px} }

/* --- Additem preview --- */
.preview{display:flex; flex-direction:column; gap:.5rem}
.preview .imgbox{
  height:var(--img-h,260px); border:1px dashed var(--line); border-radius:8px; background:#0B0B0D;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.preview img{max-width:100%; max-height:100%; object-fit:contain; background:transparent}

/* Chips */
.chips{display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0}
.chips a{display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; border:1px solid var(--line); border-radius:999px}
.chips a.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.chips .badge{background:transparent; color:inherit; padding:0}

/* Table alignment */
.table.items{width:100%; border-collapse:separate; border-spacing:0}
.table.items th,.table.items td{padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:middle}
.table.items td .row{display:flex; align-items:center; gap:.5rem}
.table.items .thumb{width:36px; height:36px; border-radius:8px; object-fit:cover; display:block}
.stack{display:flex; flex-direction:column; gap:.2rem}
.stack.tight{gap:.1rem}

/* Actions cell: prevent wrap and bouncing */
td.actions{white-space:nowrap}
.inline-form{display:inline-flex; margin:0}
.btn.small{padding:.32rem .6rem; line-height:1}

/* Status pill */
.status{display:inline-block; padding:.12rem .5rem; border:1px solid var(--line); border-radius:999px}
.status.done{background:#062e16; border-color:#14532d; color:#d1fae5}
/* Clientarea orders table */
.table.orders { width:100%; border-collapse:separate; border-spacing:0 }
.table.orders th,
.table.orders td { padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:middle }

/* Image */
.table.orders .thumb { width:54px; height:54px; border-radius:8px; object-fit:cover; display:block }

/* Vertical rhythm inside the item cell */
.stack { display:flex; flex-direction:column; gap:.25rem }      /* generic */
.stack.tight { gap:.15rem }

/* Title + secondary line spacing */
.item-title { font-weight:700 }
.item-sub   { color:var(--muted) }

/* Key/value “chips” row for float/seed/price */
.order-meta { 
  display:flex; flex-wrap:wrap; gap:.35rem; 
  margin:.35rem 0 0; padding:0; list-style:none 
}
.order-meta li{
  display:inline-flex; align-items:center;
  padding:.18rem .5rem; border:1px solid var(--line);
  border-radius:999px; font-size:.85rem; color:var(--muted);
  background:#2A2A2F
}

/* Add-item layout */
.additem-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
}
@media (max-width:900px){
  .additem-layout{ grid-template-columns:1fr; }
}

  .rules-fab{
    position:fixed; right:264px; bottom:84px; z-index:9999;
    display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center;
    border-radius:50%; background:#111827; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.2);
    border:1px solid rgba(255,255,255,.08);
    transition:transform .1s ease, box-shadow .1s ease, background .15s ease, right .2s ease;
  }
  .rules-fab.not-logged-in{ right:24px; }
  .rules-fab:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.28); background:#0f172a; }
  .rules-fab:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.2); }
  .rules-fab:focus{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.35), 0 8px 24px rgba(0,0,0,.2); }
  .rules-fab svg{ width:26px; height:26px; fill:currentColor; }

  @media (max-width:480px){
    .rules-fab{ right:12px; bottom:78px; width:52px; height:52px; }
    .rules-fab.not-logged-in{ right:12px; }
    .rules-fab svg{ width:24px; height:24px; }
  }

  /* Overlay */
  .rules-overlay{ position:fixed; inset:0; z-index:10000; display:none; }
  .rules-overlay.open{ display:block; }
  .rules-overlay .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
  .rules-overlay .modal{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(92vw, 680px); max-height:80vh; overflow:auto;
    background:var(--card, #111419); color:inherit; border:1px solid var(--line, #252a33);
    border-radius:12px; padding:1rem 1.1rem; box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .rules-overlay .modal h4{ margin:.1rem 0 .6rem; font-size:1rem }
  .rules-overlay .modal .close{
    position:absolute; top:8px; right:8px; border:0; background:transparent;
    font-size:20px; line-height:1; cursor:pointer; color:var(--muted,#9aa3af);
  }
  .rules-overlay .modal .close:hover{ color:#fff; }
.item-card { position: relative; }

.left-filter .fav-link{ color:#FFD54F; font-weight:600; }

.item-card .title{
  font-size: 0.8rem;   /* or 14px, or clamp(12px, 1.8vw, 16px) */
  line-height: 1.2;
}

.item-card .ui{
  margin-top:auto;               /* keeps actions at card bottom */
  display:flex;
  align-items:center;
  gap:.5rem;
}
.item-card .ui form{ margin:0; } /* kill default form margins */

/* Favorite star button */
.fav-btn{
  width:36px; height:36px;
  display:grid; place-items:center;
  font-size:18px; line-height:1;
  border-radius:8px;
  border:1px solid #323238;
  background:#121214;
  color:#a1a1aa;
  cursor:pointer;
}
.fav-btn:hover{ border-color:#4b4b52; color:#e4e4e7; }
.fav-btn.on{
  color:#f5c542;                 /* gold star */
  border-color:#f5c542;
  background:#17130a;
}

  .discord-fab{
    position:fixed; right:264px; bottom:16px; z-index:9999;
    display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center;
    border-radius:50%; background:#5865F2; color:#fff; text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.2); transition:transform .1s ease, box-shadow .1s ease, right .2s ease;
  }
  .discord-fab.not-logged-in{ right:24px; }
  .discord-fab:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.28); }
  .discord-fab:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.2); }
  .discord-fab:focus{ outline:none; box-shadow:0 0 0 3px rgba(88,101,242,.35), 0 8px 24px rgba(0,0,0,.2); }
  .discord-fab svg{ width:28px; height:28px; fill:currentColor; }
  @media (max-width:480px){
    .discord-fab{ right:12px; bottom:12px; width:52px; height:52px; }
    .discord-fab.not-logged-in{ right:12px; }
    .discord-fab svg{ width:26px; height:26px; }
  }
  
  
  
  .discord-fab-logout{
    position:fixed; right:24px; bottom:16px; z-index:9999;
    display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center;
    border-radius:50%; background:#5865F2; color:#fff; text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.2); transition:transform .1s ease, box-shadow .1s ease;
  }
  .discord-fab-logout:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.28); }
  .discord-fab-logout:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.2); }
  .discord-fab-logout:focus{ outline:none; box-shadow:0 0 0 3px rgba(88,101,242,.35), 0 8px 24px rgba(0,0,0,.2); }
  .discord-fab-logout svg{ width:28px; height:28px; fill:currentColor; }
  @media (max-width:480px){
    .discord-fab-logout{ right:12px; bottom:12px; width:52px; height:52px; }
    .discord-fab-logout svg{ width:26px; height:26px; }
  }
/* Preview */
.preview{ position:sticky; top:80px; }
.preview .imgbox{
  height:280px;
  border:1px dashed var(--line);
  border-radius:8px;
  background:#111113;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.preview img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Cart table ops on the right */
.table th.op,
.table td.td-actions{
  text-align:right;
  white-space:nowrap;
}
.table td.td-actions form{
  display:inline-block; /* keep button inline, no full-width form */
  margin:0;
}

:root{ --chev-size:20px; }  /* tweak to taste */

/* if you can use :has */
.left-filter li:has(> .submenu) > a{
  position:relative; padding-right:calc(var(--chev-size) + 14px);
}
.left-filter li:has(> .submenu) > a::after{
  content:"❯";                       /* bolder than › */
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%);
  font-size:var(--chev-size);
  line-height:1; color:var(--muted);
  opacity:.9; transition:transform .12s ease, opacity .12s ease;
}
.left-filter li:hover > a::after{ transform:translateY(-50%) translateX(2px); opacity:1; }

/* fallback if :has is unavailable: add class="has-sub" to those <li> */
.left-filter li.has-sub > a{ position:relative; padding-right:calc(var(--chev-size) + 14px); }
.left-filter li.has-sub > a::after{ content:"❯"; font-size:var(--chev-size); }

/* Bottom actions all on the right */
/* was: justify-content:flex-end */
.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;   /* left group ↔ right group */
  gap:.6rem;
}
.left-actions{
  display:flex;
  gap:.6rem;
  align-items:center;
}
.checkout-rail{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.5rem;
  margin-left:auto;                /* keeps it pinned right */
}
.checkout-rail .notice{ margin:0; text-align:right; }

/* keep Op column buttons on the right */
.table th.op, .table td.td-actions{ text-align:right; white-space:nowrap; }
.table td.td-actions form{ display:inline-block; margin:0; }

/* === Filter sidebar (left rail) === */
:root{
  --rail-w: 320px;           /* sidebar width */
  --rail-tab-w: 42px;        /* visible grab tab */
}

.left-filter{
  position:fixed; top:0; left:0; height:100vh; width:var(--rail-w);
  transform:translateX(calc(-1 * (var(--rail-w) - var(--rail-tab-w))));
  transition:transform .18s ease-out;
  z-index:80;
  background:var(--card); color:var(--ink);
  border-right:1px solid var(--line);
  box-shadow:2px 0 24px rgba(0,0,0,.35);
  overflow:visible; /* let submenu escape */
}
.left-filter:hover,
.left-filter.open{ transform:translateX(0); }

.left-filter .tab{
  position:absolute; top:20px; right:calc(-1 * var(--rail-tab-w));
  width:var(--rail-tab-w); height:120px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-left:0;
  border-radius:0 var(--radius) var(--radius) 0;
  writing-mode:vertical-rl; text-orientation:mixed; user-select:none;
}

.left-filter .groups{
  padding:12px; height:100%;
  overflow:visible; /* keep hover children visible */
}
.left-filter h5{
  margin:8px 0 6px; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.left-filter ul{ list-style:none; margin:0; padding:0 }
.left-filter li{ position:relative; overflow:visible }
.left-filter a{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border-radius:8px; color:inherit; text-decoration:none;
}
.left-filter a:hover{ background:#232327 }
.left-filter a:focus{ outline:2px solid var(--accent); outline-offset:2px }

.left-filter .badge{ color:var(--muted); font-size:12px }

/* Submenu panel */
.left-filter .submenu{
  position:absolute; top:0; left:calc(100% - 1px);
  width:420px; max-height:80vh;
  display:none; padding:8px; overflow:auto;
  background:var(--card); color:inherit;
  border:1px solid var(--line); border-left:0;
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:12px 12px 32px rgba(0,0,0,.35);
  z-index:1;
}
.left-filter li:hover > .submenu,
.left-filter li:focus-within > .submenu{ display:block }

/* Two-column knife list */
.left-filter .submenu .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.left-filter .submenu.grid-2 ul{ margin:0; padding:0 }
.left-filter .submenu.grid-2 li{ break-inside:avoid }

/* Touch: keep rail tucked in until tapped */
@media (hover:none){
  .left-filter{ transform:translateX(calc(-1 * (var(--rail-w) - var(--rail-tab-w)))); }
}

/* Ensure pager can sit above if needed (optional) */
.pagination{ position:relative; z-index:70 }
/* Always-open filter */
.left-filter{ transform:none; }                      /* no slide-in */
.left-filter:hover,
.left-filter.open{ transform:none; }                 /* ignore hover/open */
.left-filter .tab{ display:none; }                   /* hide the grab tab */

/* Make room for it */

/* --- Respect header height & keep rail open under it --- */
:root{ --hdr-h:64px; } /* set to your header's actual height */

header.site{ z-index:1000; } /* header above the rail */

.left-filter{
  top:var(--hdr-h) !important;
  height:calc(100vh - var(--hdr-h)) !important;
  z-index:900; /* below header */
}

.left-filter.static{
  transform:none !important;
  top:var(--hdr-h) !important;

  box-shadow:none !important;

}
/* keep tables from collapsing when cells are empty */
.table { table-layout: fixed; width: 100%; }
.table th, .table td { padding: .5rem .6rem; }
.table th:empty::before,
.table td:empty::before { content: "\00a0"; } /* NBSP placeholder */

/* optional: consistent column widths on history/inspect tables */
.table.col-fixed col.when   { width: 160px; }
.table.col-fixed col.amount { width: 120px; text-align: right; }


.left-filter.static ~ .page{ margin-left:var(--rail-w) !important; }

/* Any sticky bars should also sit under the header */
.filters{ top:var(--hdr-h) !important; }


/* === Normalize item-card layout (no HTML changes) === */
:root{ --thumb-h: 160px; --title-lh: 1.2; --title-lines: 2; }

.store-grid .item-card{
  display:grid;
  grid-template-rows:
    var(--thumb-h)                               /* thumbnail box */
    calc(var(--title-lh) * 1em * var(--title-lines))  /* fixed 2-line title */
    1.2em                                        /* cond one line */
    auto                                         /* price */
    auto;                                        /* CTA row */
  gap:.5rem;
}

/* Flatten the meta wrapper so its children can occupy rows */
.store-grid .item-card .meta{ display:contents; }

/* Media box: identical height for all cards */
.store-grid .item-card .img{
  width:100%; height:100%;
  object-fit:contain; background:#2A2A2F; border-radius:8px;
}

/* Lock title to exactly two lines */
.store-grid .item-card .title{
  line-height:var(--title-lh);
  display:-webkit-box; -webkit-line-clamp:var(--title-lines); -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Reserve one line even when empty */
.store-grid .item-card .cond{ min-height:1.2em; line-height:1.2em }

/* Anchor actions to the bottom track */
.store-grid .item-card .ui{ margin-top:0; align-self:end }

/* === Pagination, drop after theme.css === */
nav.pagination{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.5rem; border-radius:var(--radius);
}
nav.pagination .btn{ min-width:86px; line-height:1 }
nav.pagination .btn.sm{ padding:.32rem .6rem; font-size:.85rem }
nav.pagination .counter{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.22rem .6rem; border:1px solid var(--line);
  border-radius:999px; background:#2A2A2F; color:var(--muted); font-weight:600;
}
nav.pagination .btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(220,38,38,.35);
}
/* Compact on small screens */
@media (max-width:520px){
  nav.pagination .counter{ display:none }
  nav.pagination .btn{ min-width:auto; padding:.32rem .5rem }
}

/* If you cannot change markup, still style anchors-as-buttons */
nav.pagination a[role="button"]{
  display:inline-block; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink);
  padding:.42rem .8rem; border-radius:var(--radius); font-weight:600; font-size:.9rem;
}
nav.pagination a[role="button"].secondary{
  background:transparent; color:var(--ink); border-color:var(--line);
}