/* === LuxeCollectables main CSS (crypto-only, upgraded buttons, animated about) === */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Design tokens */
:root{
  --bg:#0b1020;
  --card:#111735;
  --ink:#f2f5ff;
  --muted:#a7b1d8;
  --accent:#9cc2ff;
  --line:#1f2750;
  --header-h:120px;

  /* Match checkout.html look */
  --lx-primary:#c7a76d;
  --lx-primary-dark:#b49354;
  --lx-primary-soft:rgba(199,167,109,0.12);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:no-preference){
  :root{scroll-behavior:smooth}
}

#home,.section{scroll-margin-top:calc(var(--header-h,120px) + 10px)}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45;
  overflow-x:hidden;
  padding-top:var(--header-h);
}

a{color:var(--accent);text-decoration:none}
img{display:block;max-width:100%}
.logo{height:34px}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* Utility */
.hidden{display:none!important}

/* Header */
.header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  background:linear-gradient(180deg,rgba(11,16,32,.95),rgba(11,16,32,.65));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header.scrolled{box-shadow:0 10px 26px rgba(0,0,0,.28)}

.topbar{overflow:hidden;border-bottom:1px solid var(--line)}
.marquee{position:relative;height:36px}
.marquee-track{
  position:absolute;display:flex;gap:48px;
  white-space:nowrap;
  animation:marq 45s linear infinite;
}
.marq-item{
  color:var(--muted);
  padding:8px 0;
  font-weight:600;
  letter-spacing:.2px;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.midbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  gap:16px;
}
.controls{display:flex;align-items:center;gap:10px}
.controls select{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  min-width:120px;
  font-size:0.9rem;
}

/* Cart button + badge */
.cart-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:radial-gradient(circle at 0% 0%,rgba(255,255,255,0.18),rgba(16,21,48,0.98));
  color:#fff;
  border:1px solid #343f7a;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:0.9rem;
  font-weight:600;
  box-shadow:0 10px 24px rgba(0,0,0,0.45);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.cart-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  filter:brightness(1.03);
}
.badge{
  display:inline-grid;place-items:center;
  min-width:22px;height:22px;
  border-radius:999px;
  background:#1a2250;
  border:1px solid #2b377a;
  font-size:12px;
  font-weight:800;
  color:#d7e4ff;
}

/* Nav */
.nav{
  display:flex;
  gap:18px;
  padding:10px 16px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.nav a{
  color:var(--muted);
  font-size:0.9rem;
}
.nav a.active,
.nav a:hover{color:#fff}

/* Hero */
.hero{
  position:relative;
  height:64vh;
  min-height:460px;
  display:grid;
  place-items:center;
  text-align:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.45);
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 500px at 20% -20%, #18306b66, transparent),
    radial-gradient(800px 400px at 100% 0%, #2f5bb44a, transparent);
}
.hero-inner{
  position:relative;z-index:1;
  max-width:1000px;
  padding:0 16px;
}
.hero-title{
  font-size:clamp(34px,7vw,64px);
  margin:0 0 10px;
  font-weight:900;
}
.hero-slider{display:grid;gap:6px;margin:8px 0 18px}
.slide-msg{
  font-size:clamp(16px,2.6vw,22px);
  font-weight:700;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
}
.slide-msg.active{opacity:1;transform:translateY(0)}

/* Buttons – aligned with checkout.html */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid #343a55;
  background:rgba(6,9,21,0.92);
  color:var(--ink);
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:
    transform .15s,
    box-shadow .15s,
    background .15s,
    border-color .15s,
    filter .15s;
}
.btn.primary{
  border:none;
  background:linear-gradient(135deg,#f5e0af,#c7a76d,#b37f37);
  color:#111216;
  font-weight:700;
  box-shadow:0 12px 26px rgba(0,0,0,0.55);
}
.btn.ghost{
  background:rgba(6,9,21,0.96);
  color:var(--muted);
  border:1px solid #333a55;
}
.btn.danger{
  background:radial-gradient(circle at 0 0,rgba(255,170,190,0.25),rgba(58,18,32,0.98));
  border:1px solid #8a2c4f;
  color:#ffe0f0;
}
.btn.sm{
  padding:6px 12px;
  border-radius:999px;
  font-size:0.8rem;
}
.btn.full{width:100%}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.55);
  filter:brightness(1.03);
}
.btn.primary:hover{
  filter:brightness(1.05);
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Sections / chips */
.section{
  padding:40px 16px;
  max-width:1200px;
  margin:0 auto;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:8px;
  flex-wrap:wrap;
}
.subcats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chip{
  border:1px solid var(--line);
  background:var(--card);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:0.85rem;
  transition:.15s;
}
.chip:hover{
  transform:translateY(-1px);
  border-color:#4453a3;
}
.chip.active{
  outline:2px solid #618aff;
}

/* Grids & Cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Category tiles */
.category-card{overflow:hidden}
.category-image{
  width:100%;
  aspect-ratio:4/3;
  background:#0e1430;
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--line);
}
#shop-categories .card .body{padding:12px}
#shop-categories .card .title{font-size:18px}

/* Product card / gallery */
.body{padding:12px}
.title{font-weight:800}
.meta{color:var(--muted);font-size:14px;margin-top:2px}
.price{
  color:var(--muted);
  margin-top:6px;
  font-weight:800;
}
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.06);
}

/* Gallery */
.gallery{position:relative}
.gallery .frame{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:#0e1430;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.frame-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.gallery.fading .frame{
  opacity:.25;
  transition:opacity .35s ease;
}
.gallery .dots{
  position:absolute;
  bottom:8px;
  left:0;right:0;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:2;
}
.gallery .dots button{
  width:8px;height:8px;
  border-radius:50%;
  border:none;
  background:#3a4378;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.gallery .dots button.active{
  background:#9cc2ff;
  transform:scale(1.2);
}

/* Circular arrow buttons (gallery + about modal) */
.gallery .nav,
.about-nav{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid #ffffff88;
  background:rgba(0,0,0,.35);
  color:#ffffff;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:grid;place-items:center;
  cursor:pointer;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
  z-index:2;
}
.gallery .nav:hover,
.about-nav:hover{
  transform:translateY(-50%) scale(1.06);
  background:rgba(0,0,0,.5);
  border-color:#ffffffcc;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.gallery .nav.prev{left:8px}
.gallery .nav.next{right:8px}

/* About section – visual cards + scroll animation */
.about{color:var(--muted)}
.about-tagline{
  max-width:540px;
  font-size:0.9rem;
}
.about-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:14px;
}

/* Cards – compact but visual */
.about-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.about-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0 0,rgba(199,167,109,0.18),transparent);
  opacity:0.35;
  pointer-events:none;
}
.about-card h3{
  margin:0 0 6px;
  color:#ffffff;
}
.about-card p{margin:4px 0 6px;font-size:0.9rem}
.bullets{
  margin:8px 0 0 18px;
  padding:0;
  font-size:0.85rem;
}
.bullets li{margin-bottom:4px}

/* Small stats inside About */
.about-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
.about-stat{
  background:rgba(6,9,21,0.95);
  border-radius:12px;
  border:1px solid #2b3555;
  padding:6px 8px;
}
.about-stat-label{
  font-size:0.75rem;
  color:var(--muted);
}
.about-stat-value{
  font-size:0.9rem;
  font-weight:600;
  color:#f2f5ff;
}

/* Offices block */
.offices{
  display:grid;
  gap:6px;
  font-size:0.86rem;
}

/* Scroll animation wrapper */
.about-animated .about-card{
  opacity:0;
  transform:translateY(18px);
}
.about-animated.about-in-view .about-card{
  opacity:1;
  transform:translateY(0);
}
.about-animated.about-in-view .about-card:nth-child(2){transition-delay:0.06s}
.about-animated.about-in-view .about-card:nth-child(3){transition-delay:0.12s}
.about-animated.about-in-view .about-card:nth-child(4){transition-delay:0.18s}

/* About modal hero (used in product details modal) */
.about-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#0e1430;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.about-hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}
.about-hero.fading .about-hero-img{
  opacity:.25;
  transition:opacity .3s ease;
}
.about-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:8px;
}
.about-dots button{
  width:8px;height:8px;
  border-radius:50%;
  border:none;
  background:#3a4378;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease;
}
.about-dots button.active{
  background:#9cc2ff;
  transform:scale(1.25);
}
.about-nav.prev{left:10px}
.about-nav.next{right:10px}

/* Magnifier lens */
.magnifier-lens{
  position:absolute;
  z-index:3;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #9cc2ff;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  pointer-events:none;
  opacity:0;
  transform:scale(.96);
  background-color:transparent;
  background-repeat:no-repeat;
  transition:opacity .12s ease, transform .12s ease, box-shadow .12s ease;
}
.magnifier-lens.visible{
  opacity:1;
  transform:scale(1);
}
.magnifier-lens::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}

/* Forms / Sell / Track */
.sell-form{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-grid>.full{grid-column:1/-1}
label{
  display:block;
  font-size:14px;
  color:var(--muted);
  margin:6px 0 4px;
}
input,select,textarea{
  width:100%;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  font-size:0.9rem;
}
.note{
  background:#0e1430;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  color:var(--muted);
}
.help{color:var(--muted);font-size:13px}
.hr{height:1px;background:var(--line);margin:10px 0}

/* Track Order extras */
#track-order .status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  border:1px solid var(--line);
  background:#0e1430;
  color:#cfe0ff;
}
#track-order .status-chip[data-state="processing"]{
  background:#142055;border-color:#2b3a7d;
}
#track-order .status-chip[data-state="shipped"]{
  background:#10331f;border-color:#205f3b;
}
#track-order .status-chip[data-state="delivered"]{
  background:#133026;border-color:#2d7a61;
}
#track-order .status-chip[data-state="cancelled"]{
  background:#3a1620;border-color:#723144;
}

/* Modal */
.modal.hidden{display:none}
.modal{
  position:fixed;inset:0;z-index:3000;
  background:rgba(2,6,23,.55);
  backdrop-filter:blur(8px) saturate(110%);
  display:grid;place-items:center;
  padding:16px;
}
.modal-box{
  position:relative;
  max-width:860px;
  width:100%;
  max-height:90vh;
  overflow:auto;
  background:linear-gradient(180deg,#121a3d 0%, #111735 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
}
.modal-close{
  position:absolute;
  top:10px;right:12px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:20px;
  cursor:pointer;
}
body.modal-open{overflow:hidden}

/* Spec tables */
.spec-wrap{overflow:auto}
.spec-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  color:var(--muted);
}
.spec-table td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.spec-table td:first-child{
  width:42%;
  color:#d7def8;
}

/* Cart */
.cart-list{display:grid;gap:10px}
.cart-row{
  display:grid;
  grid-template-columns:64px 1fr auto auto;
  gap:10px;
  align-items:center;
  background:#0e1430;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}
.cart-thumb{
  width:64px;height:64px;
  border-radius:10px;
  background:#0e1430;
  background-size:cover;
  background-position:center;
  border:1px solid var(--line);
}
.cart-info{display:grid;gap:2px}
.cart-title{font-weight:800;color:#fff}
.cart-meta{color:var(--muted);font-size:13px}
.cart-price{color:#cfe0ff;font-weight:800;font-size:14px}
.cart-qty{display:inline-flex;align-items:center;gap:8px}
.cart-qty .qty{min-width:20px;text-align:center}
.cart-totals{
  display:flex;
  justify-content:flex-end;
  font-weight:800;
  color:#d7e4ff;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;bottom:20px;
  transform:translateX(-50%) translateY(20px);
  background:#0e1430;
  border:1px solid var(--line);
  color:#cfe0ff;
  padding:10px 14px;
  border-radius:12px;
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  z-index:4000;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0a0f1e 0%, #0b1020 100%);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:18px;
  max-width:1200px;
  margin:0 auto;
  padding:24px 16px;
  width:100%;
}
.f-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.f-col h4{
  margin:0 0 8px 0;
  color:#fff;
}
.f-col a,.f-col div{color:var(--muted)}
.f-brandcol .footer-logo{height:30px}

/* Footer nav pills */
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.footer-nav-link{
  font-size:0.85rem;
  color:var(--muted);
  padding:5px 10px;
  border-radius:999px;
  border:1px solid transparent;
  background:rgba(9,13,30,0.96);
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.footer-nav-link:hover{
  color:#ffffff;
  border-color:#333a6a;
  background:rgba(16,22,48,0.98);
  transform:translateY(-1px);
}

.footer-bar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  border-top:1px solid var(--line);
  padding:12px 16px;
  color:var(--muted);
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.footer-bar-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:0.8rem;
}
.footer-bar-nav a{
  color:var(--muted);
}
.footer-bar-nav a:hover{
  color:#ffffff;
}

/* Socials (optional, kept if you use icons later) */
.socials{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.social{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:36px;height:36px;
  border-radius:10px;
  background:#0e1430;
  border:1px solid var(--line);
  color:#cfe0ff;
  transition:.15s;
}
.social:hover{
  transform:translateY(-1px);
  background:#142055;
}

/* Responsive */
@media (max-width:960px){
  .footer-grid{grid-template-columns:1.5fr 1fr}
}
@media (max-width:640px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:14px;
    padding:18px 12px;
  }
  .footer-bar{
    justify-content:center;
    text-align:center;
  }
  .form-grid{grid-template-columns:1fr}
  .cart-row{grid-template-columns:56px 1fr auto auto}
  .cart-thumb{width:56px;height:56px}
  .gallery .nav,
  .about-nav{width:38px;height:38px}
}

/* Legacy split layout (non-auth usage only, safe to keep) */
.auth-split{
  display:grid;
  gap:16px;
  grid-template-columns:1fr 1fr;
}
.auth-pane{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
@media (max-width: 800px){
  .auth-split{grid-template-columns:1fr}
}

/* Track status pill helpers */
.pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #303038;
  font-size:12px;
}
.pill.ok{background:#123d1d;border-color:#1f6b2e;color:#c5f7cf}
.pill.info{background:#0f2e4a;border-color:#1f5d8f;color:#c5e7ff}
.pill.warn{background:#3a2f0f;border-color:#8a6a1f;color:#ffe6a6}
.pill.bad{background:#3a0f12;border-color:#8a1f29;color:#ffc5cb}
.pill.muted{background:#1c1c20;border-color:#2b2b31;color:#b9bcc3}
.track-card{
  border:1px solid #26262a;
  border-radius:12px;
  padding:12px;
  margin-top:8px;
  background:#141416;
}
.small{font-size:12px}

/* Wallet cards (used on checkout & any future wallet sections) */
.wallet-card{
  border-radius:14px;
  padding:8px 10px;
  border:1px solid #303652;
  background:rgba(6,9,21,0.9);
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:0.83rem;
  text-decoration:none;
  color:inherit;
}
.wallet-card-main{
  display:flex;
  align-items:center;
  gap:8px;
}
.wallet-icon{
  width:20px;
  height:20px;
  border-radius:6px;
  object-fit:contain;
}
.wallet-name{
  font-weight:600;
  font-size:0.88rem;
}
.wallet-tag{
  font-size:0.76rem;
  opacity:0.85;
}
.wallet-cta{
  font-size:0.78rem;
  margin-top:2px;
  color:var(--lx-primary);
}
.wallet-cta span{opacity:0.7}