/* ===========================
   theme.css — storefront UI (modernized)
   =========================== */

:root {
  --bg: #0A0A0D;
  --bg-2: #141419;
  --card: #1A1A20;
  --accent: #C00001;
  --accent-hover: #E00001;
  --accent-glow: rgba(192, 0, 1, 0.3);
  --text: #E5E7EB;
  --text-secondary: #D1D5DB;
  --muted: #9CA3AF;
  --border: #25252D;
  --border-hover: #2F2F38;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow: 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.5);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.6);
  --glow: 0 0 20px var(--accent-glow);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  background-image: 
    radial-gradient(at 0% 0%, rgba(192, 0, 1, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(192, 0, 1, 0.03) 0px, transparent 50%);
  color:var(--text);
  font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering: optimizeLegibility;
}

/* Shell */
.shell{max-width:1320px;margin:0 auto;padding:20px}
.title{
  margin:0 0 12px;
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Filters */
.filters{display:flex;gap:12px;margin:12px 0 20px}
.filters input[type="text"]{
  flex:1;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 16px;
  border-radius:var(--radius);
  outline:none;
  transition:var(--transition);
  font-size:15px;
}
.filters input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--card);
}
.filters input::placeholder{color:var(--muted)}
.filters button{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color:#fff;
  border:0;
  padding:12px 20px;
  border-radius:var(--radius);
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.filters button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  opacity:0;
  transition:var(--transition);
}
.filters button:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow), var(--glow);
}
.filters button:hover::before{opacity:1}
.filters button:active{transform:translateY(0)}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.empty{
  grid-column:1/-1;
  background:var(--bg-2);
  border:2px dashed var(--border);
  border-radius:var(--radius-lg);
  padding:48px 24px;
  text-align:center;
  color:var(--muted);
  font-size:16px;
}

/* Card */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  backdrop-filter:blur(10px);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:var(--transition);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:var(--shadow-lg);
  border-color:var(--border-hover);
}
.card:hover::after{opacity:1}

/* Rarity glow (enhanced) */
.card::before{
  content:"";
  position:absolute;
  inset:auto -30% 55% -30%;
  height:40%;
  background:radial-gradient(ellipse at center,color-mix(in oklab, var(--rarity), transparent 60%) 0%,transparent 80%);
  filter:blur(16px);
  opacity:.5;
  pointer-events:none;
  transition:var(--transition-slow);
}
.card:hover::before{
  opacity:.7;
  filter:blur(20px);
}

/* Media */
.card-media{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(0,0,0,.15) 100%);
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 8px 8px 8px;
  min-height:160px;
  overflow:hidden;
}
.card-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 70%);
  opacity:0;
  transition:var(--transition);
}
.card:hover .card-media::before{opacity:1}
.card-media img{
  max-width:97%;
  max-height:154px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  transition:var(--transition);
  transform:translateY(10%) scale(1.1);
}
.card:hover .card-media img{
  transform:translateY(10%) scale(1.15);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.img-fallback{
  color:var(--muted);
  font-size:13px;
  border:2px dashed var(--border);
  padding:8px 12px;
  border-radius:var(--radius-sm);
}

/* Rarity stripe (enhanced) */
.rarity-stripe{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:4px;
  background:linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--rarity), #000 40%) 50%, transparent 100%);
  box-shadow:0 0 8px color-mix(in oklab, var(--rarity), #000 50%), 0 0 16px color-mix(in oklab, var(--rarity), transparent 80%);
  filter:saturate(130%);
  opacity:.7;
  pointer-events:none;
  transition:var(--transition);
}
.card:hover .rarity-stripe{
  opacity:.9;
  height:5px;
  box-shadow:0 0 12px color-mix(in oklab, var(--rarity), #000 40%), 0 0 24px color-mix(in oklab, var(--rarity), transparent 70%);
}

/* Body */
.card-body{padding:12px}

/* Topline */
.topline{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;
  font-size:11px;color:var(--muted);min-height:1.4em
}
.price{
  font-weight:700;background:linear-gradient(180deg,#e9e9ea,#bdbec2);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.exterior{
  background:#00000030;padding:1px 6px;border-radius:6px;color:#e5e5e5;border:1px solid #22232a
}

/* Name */
.name{
  margin:0 0 6px;
  font-size:13px;
  line-height:1.3;
  height:1.3em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.01em;
}

/* Meta */
.meta{display:flex;gap:6px;font-size:11px;color:var(--muted);margin-bottom:4px;min-height:1.4em}
.meta .rarity{font-weight:600;color:var(--rarity)}

/* Specs */
.specs{display:flex;justify-content:space-between;font-size:11px;color:#cfd1d7;min-height:1.4em}
.specs strong{color:#F5F6F8}

/* Utilities */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  transition:var(--transition);
}
.badge:hover{
  background:var(--card);
  border-color:var(--border-hover);
  transform:translateY(-1px);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--bg-2);
  color:var(--text);
  padding:12px 18px;
  border-radius:var(--radius);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:var(--transition);
  text-decoration:none;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  opacity:0;
  transition:var(--transition);
}
.btn:hover{
  background:var(--card);
  border-color:var(--border-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0)}
.btn--primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color:#fff;
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
}
.btn--primary:hover{
  box-shadow:var(--shadow), var(--glow);
  transform:translateY(-2px);
}
.btn--ghost{
  background:transparent;
  border-color:transparent;
}
.btn--ghost:hover{
  background:rgba(255,255,255,0.05);
  border-color:var(--border);
}

/* Inputs */
.input{
  width:100%;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 16px;
  border-radius:var(--radius);
  outline:none;
  font-size:15px;
  transition:var(--transition);
}
.input::placeholder{color:var(--muted)}
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--card);
}
.input:hover:not(:focus){
  border-color:var(--border-hover);
  background:var(--card);
}

/* Scrollbar */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:6px;
  border:2px solid var(--bg);
  transition:var(--transition);
}
::-webkit-scrollbar-thumb:hover{
  background:var(--border-hover);
  border-color:var(--bg-2);
}
::-webkit-scrollbar-track{background:var(--bg)}

/* Responsiveness */
@media (max-width:1200px){.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:6px}}
@media (max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:6px}}

/* Fallback rarity */
.card[style*="--rarity"]{}
.card:not([style*="--rarity"]){--rarity:#5a5f6a}


/* ---------- App Header (rewritten) ---------- */
/* ---------- App Header with user dropdown ---------- */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:30000;
  background:var(--bg-2);border-bottom:1px solid var(--border);
}
.app-header .bar{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* User auth area */
.userbox{display:flex;align-items:center;gap:10px}

/* ---------- App Header (slim) ---------- */
:root{ --header-h: 44px; }

.app-header{
  position:fixed;top:0;left:0;right:0;z-index:30000;
  background:var(--bg-2);border-bottom:1px solid var(--border);
}
.app-header .bar{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);
  padding:0 12px; /* slimmer */
}

/* Brand */
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:700}
.brand .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent), 0 0 24px var(--accent-glow);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.8;transform:scale(1.1)}
}

/* User area */
.userbox{display:flex;align-items:center;gap:8px}
.user-menu{position:relative;display:flex;align-items:center;gap:6px}
.user-menu .avatar{
  width:24px;height:24px;display:block;object-fit:cover;
  border-radius:50%;border:1px solid var(--border);
}
.user-menu .user-menu-trigger-mobile{
  cursor:pointer;
  transition:border-color .12s ease, transform .05s ease;
}
.user-menu .user-menu-trigger-mobile:hover{
  border-color:var(--accent);
  transform:scale(1.05);
}
.user-menu .user-menu-trigger-mobile:active{
  transform:scale(0.95);
}
.user-menu .user-trigger{
  display:flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;
  padding:2px 6px;border-radius:8px;color:var(--text)
}
.user-menu .user-trigger:hover{background:rgba(255,255,255,.04)}
.user-menu .name{
  display:flex;align-items:center;height:24px;line-height:1;
  font-size:13px;color:var(--text);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.user-menu .caret{width:10px;height:10px;fill:var(--muted);transition:transform .12s ease}

/* Dropdown (unchanged behavior, tighter spacing) */
.user-menu .menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:180px;
  margin-top:0;
  background:rgba(26,26,32,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0;
  pointer-events:none;
  transform:translateY(0) scale(0.95);
  transition:var(--transition);
  z-index:30002;
}
/* Bridge area to keep dropdown open when moving mouse */
.user-menu::after{
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  top:100%;
  height:12px;
  pointer-events:auto;
  z-index:30001;
}
.user-menu:hover .menu,.user-menu:focus-within .menu{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
/* Keep menu open when hovering over the menu itself */
.user-menu .menu:hover{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.user-menu:hover .caret,.user-menu:focus-within .caret{transform:rotate(180deg)}
.user-menu .menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  transition:var(--transition);
}
.user-menu .menu a:hover{
  background:rgba(255,255,255,.08);
  transform:translateX(4px);
}
.user-menu .menu .divider{height:1px;background:#2a2a31;margin:4px 0}

.userbox .login{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition:var(--transition);
}
.userbox .login:hover{
  background:var(--card);
  border-color:var(--border-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

/* Currency switch and Language dropdown (header) - hover-based */
.cur-switch{ 
  position:relative; 
  display:flex; 
  align-items:center; 
  gap:4px; 
  padding:0; 
  border:0; 
  background:transparent; 
  border-radius:0; 
  height:auto; 
  margin-right:10px;
}
/* Bridge area to keep dropdown open when moving mouse */
.cur-switch::after{
  content:"";
  position:absolute;
  left:-20px;
  right:-20px;
  top:100%;
  height:12px;
  z-index:30002;
  pointer-events:auto;
}
.cur-switch label{ font-size:12px; color:var(--muted); margin-right:4px; white-space:nowrap; }

.lang-btn{ 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  border:1px solid var(--border); 
  background:var(--bg); 
  color:var(--text); 
  border-radius:var(--radius); 
  padding:8px 12px; 
  cursor:pointer; 
  font-size:13px; 
  font-weight:600;
  line-height:1; 
  position:relative;
  transition:var(--transition);
}
.lang-btn:hover{
  background:var(--card);
  border-color:var(--border-hover);
  transform:translateY(-1px);
}
.lang-btn::after{ 
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  top:100%; 
  height:12px; 
  z-index:30002;
  pointer-events:auto;
}
.lang-btn .flag{ width:18px; height:12px; display:inline-block; border-radius:2px; overflow:hidden; flex-shrink:0; }
.lang-btn .label{ font-weight:600; }
.lang-btn .caret{ width:14px; height:14px; fill:currentColor; opacity:0.7; transition:transform .15s ease; flex-shrink:0; }
.lang-list{ 
  position:absolute; 
  top:calc(100% + 4px); 
  right:0;
  transform:translateY(0) scale(0.95); 
  margin-top:0; 
  background:rgba(26,26,32,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--border); 
  border-radius:var(--radius); 
  box-shadow:var(--shadow-lg); 
  list-style:none; 
  padding:8px; 
  min-width:180px; 
  z-index:30003; 
  font-size:14px; 
  display:block; 
  opacity:0; 
  pointer-events:none; 
  transition:var(--transition); 
  white-space:nowrap;
}
/* Show dropdown when hovering form container, button, or bridge area */
.cur-switch:hover .lang-list{ 
  opacity:1; 
  transform:translateY(0) scale(1); 
  pointer-events:auto; 
}
/* Keep dropdown visible when hovering over dropdown itself */
.lang-list:hover{ 
  opacity:1; 
  transform:translateY(0) scale(1); 
  pointer-events:auto; 
}
.lang-btn:hover .caret{ 
  transform:rotate(180deg);
  opacity:1;
}
.lang-list li{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:10px 12px; 
  border-radius:var(--radius-sm); 
  cursor:pointer; 
  transition:var(--transition);
}
.lang-list li[aria-selected="true"]{ 
  background:rgba(192,0,1,0.15);
  color:var(--accent);
  font-weight:600;
}
.lang-list li:hover{ 
  background:rgba(255,255,255,.08);
  transform:translateX(4px);
}

/* Push content below fixed header — use the variable */
body{ padding-top: var(--header-h); }


/* Embedded TOS viewport */
.tos-embed{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg);
  height:360px;           /* viewport height */
}
.tos-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:var(--bg);
}
:root{
  --link:#7aa2f7;           /* muted blue */
  --link-hover:#9bbcfb;
  --link-visited:#5b84e6;
}

/* Global links (scoped, but brand exempt) */
a{ color:var(--link); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--link-hover); text-decoration:underline; }
a:visited{ color:var(--link-visited); }

/* Navigation links - no underline on hover */
.wb .panel a,
.wb .btn.single,
.wb .btn.single:hover{
  text-decoration:none !important;
}
.wb .panel a:hover{
  text-decoration:none !important;
}

/* Preserve brand styling in header */
.app-header .brand,
.app-header .brand:hover,
.app-header .brand:visited{
  color:var(--text);
  text-decoration:none;
}

/* Page breathing room */
.shell{max-width:1320px;padding:24px}
.title{margin:12px 0 20px;font-size:32px;font-weight:700}

.form{
  max-width:960px;                        /* bigger card */
  padding:24px;                           /* more padding */
  margin-bottom:24px;
}
.row{gap:8px;margin-bottom:16px}
.grid-2{grid-template-columns:1fr 1fr;gap:16px}
.notice{margin:12px 0}

/* Inputs a tad taller */
.row input[type=text], .row input[type=email]{padding:12px 14px;border-radius:10px}

/* ---- Cart ---- */
.card.selected{
  outline:2px solid var(--accent);
  outline-offset:-2px;
  box-shadow:0 8px 24px rgba(192,0,1,.3), var(--glow);
}

/* Dock offset for floating widgets */
:root { --dock-offset: 18px; --cart-h: 0px; }
.sc-root, .adm-trigger { bottom: calc(var(--dock-offset) + var(--cart-h)) !important; }

/* Cart visuals */
.cart-bar[hidden]{display:none!important;}
.cart-bar .cart-strip{display:flex; gap:10px; overflow:auto; max-width:calc(100% - 220px); padding-right:8px;}
.cart-thumb{
  width:48px;
  height:48px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  cursor:pointer;
  position:relative;
  transition:var(--transition);
}
.cart-thumb:hover{
  transform:translateY(-2px);
  border-color:var(--border-hover);
  box-shadow:var(--shadow-sm);
}
.cart-thumb img{max-width:90%;max-height:90%;object-fit:contain}
.cart-thumb .x{
  position:absolute;
  right:2px;
  top:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#dc2626;
  color:#fff;
  font-size:11px;
  line-height:16px;
  text-align:center;
  border:1px solid #b91c1c;
  transition:var(--transition);
}
.cart-thumb:hover .x{
  background:#ef4444;
  border-color:#dc2626;
}
.cart-meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:13px;
}
.cart-total{color:#fff;font-weight:700;font-size:15px;}
.cart-btn{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color:#fff;
  border:0;
  border-radius:var(--radius);
  padding:10px 18px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.cart-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow), var(--glow);
}
.cart-btn:active{transform:translateY(0)}
.cart-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.cart-preview{position:fixed;z-index:10050;pointer-events:none;display:none;width:280px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.cart-preview .card{border:0;box-shadow:none;margin:0}
/* cart toast */
.cart-toast{
  position:fixed; left:50%; bottom:calc(var(--cart-h) + 24px);
  transform:translateX(-50%);
  background:#151517; color:#fff; border:1px solid var(--border);
  padding:10px 14px; border-radius:10px; box-shadow:var(--shadow);
  font-size:13px; z-index:10060; display:none;
}
.cart-toast.show{ display:block; animation:cartToast .2s ease-out }
@keyframes cartToast { from{ transform:translateX(-50%) translateY(6px); opacity:.001 } to{ transform:translateX(-50%) translateY(0); opacity:1 } }
/* Keep cart bar from widening the page */
.cart-bar{ overflow-x: clip; }           /* or overflow-x:hidden if clip unsupported */
.cart-strip{ overflow-x:auto; padding-right:8px; }

/* Keep the close badge inside the thumb */
.cart-thumb .x{
  right: 2px;                            /* was -6px */
  top: 2px;                              /* safer inside */
  width: 14px; height: 14px; line-height: 14px;
}

/* Optional belt-and-suspenders if you still see a page scrollbar */
@supports not (overflow: clip) {
  .cart-bar{ overflow-x: hidden; }
}

/* Global toast notifications */
.toast-container{ position:fixed; right:16px; top:16px; z-index:40000; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast-container--center{ left:50%; top:50%; right:auto; transform:translate(-50%,-50%); gap:12px; }
.toast{
  position:relative;
  background:linear-gradient(180deg, rgba(28,28,34,.92), rgba(16,16,22,.94));
  color:#f3f4f6; border:1px solid #30323a; border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  padding:0; font-size:14px; font-weight:600; letter-spacing:.01em;
  opacity:0; transform:translateY(-10px) scale(.98);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease; pointer-events:auto; backdrop-filter: blur(8px);
}
.toast.show{ opacity:1; transform:translateY(0) scale(1); }
.toast__inner{ display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 18px; position:relative; min-width:260px; max-width:540px; text-align:center; }
.toast::before{ display:none; }
/* Vibrant left accent bar */
.toast::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-top-left-radius:12px; border-bottom-left-radius:12px; background:#9ca3af; box-shadow:0 0 18px rgba(156,163,175,.35); }
.toast.toast--success{ border-color:#14532d; background:linear-gradient(180deg, rgba(16,29,22,.95), rgba(10,17,13,.96)); box-shadow:0 16px 44px rgba(16,185,129,.22); }
.toast.toast--success::after{ background:#22c55e; box-shadow:0 0 22px rgba(34,197,94,.45); }
.toast.toast--error{ border-color:#6b1b1b; background:linear-gradient(180deg, rgba(34,16,16,.95), rgba(18,9,9,.96)); box-shadow:0 16px 44px rgba(239,68,68,.22); }
.toast.toast--error::after{ background:#ef4444; box-shadow:0 0 22px rgba(239,68,68,.45); }
.toast.toast--info{ border-color:#1f3b8a; background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(12,16,26,.96)); box-shadow:0 16px 44px rgba(59,130,246,.22); }
.toast.toast--info::after{ background:#3b82f6; box-shadow:0 0 22px rgba(59,130,246,.45); }
.toast__text{ flex:0 1 auto; text-align:center; }
/* close button removed */
@media (max-width:700px){
  /* Keep default (top-right) toasts at bottom center on mobile, but do not affect centered toasts */
  .toast-container:not(.toast-container--center){ right:50%; transform:translateX(50%); top:auto; bottom:16px; }
  .toast-container--center{ left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%,-50%) !important; }
  /* Slightly larger text and tighter shadow on mobile */
  .toast{ font-size:15px; box-shadow:0 12px 36px rgba(0,0,0,.55); }
}

/* Mobile: surface user menu above all and anchor below header */
@media (max-width:700px){
  .user-menu{ position:relative; z-index:40005 }
  .user-menu .menu{ position:fixed; right:12px; top: calc(var(--header-h, 44px) + 8px); transform:none; z-index:40010 }
  /* Hide desktop button, show avatar as clickable */
  .user-menu .user-trigger{ display:none !important }
  .user-menu .user-menu-trigger-mobile{ display:block; cursor:pointer; }
  /* Hide header language/currency switchers on small screens */
  #hdrLangForm, #hdrCurForm{ display:none !important }
  /* Ensure weapon category panels sit below header/user dropdowns */
  .wb .panel{ z-index: 600 !important }
  /* Remove categories bar on mobile */
  .wb-wrap, .wb{ display:none !important }
  /* Stronger toast background on mobile for readability */
  .toast{ background: rgba(17,17,20,0.94); backdrop-filter: none; }
}

/* Animate bar + FAB nudge */
.sc-root, .adm-trigger { bottom: calc(var(--dock-offset) + var(--cart-h)); transition: bottom .25s ease; }

/* Bar enters from below */
.cart-bar{
  position:fixed; 
  left:0; 
  right:0; 
  bottom:0; 
  z-index:10040;
  background:rgba(20,20,25,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--border);
  padding:12px 16px; 
  display:flex; 
  align-items:center; 
  gap:12px;
  box-shadow:0 -4px 24px rgba(0,0,0,0.3);
  transform: translateY(100%); 
  opacity:0; 
  pointer-events:none;
  transition: var(--transition-slow);
}
.cart-bar[data-open="1"]{ 
  transform: translateY(0); 
  opacity:1; 
  pointer-events:auto; 
}

/* existing stuff */
.cart-strip{display:flex; gap:8px; overflow-x:auto; padding-right:8px}
.cart-thumb{width:44px;height:44px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--card);cursor:pointer;position:relative}
.cart-thumb .x{right:2px; top:2px; width:14px; height:14px; line-height:14px}