.app-navbar{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(12px);
}

.navbar-brand .brand-orb{
  width:12px;height:12px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ffffff, rgba(255,255,255,.12));
  box-shadow: 0 0 0 5px rgba(255,153,0,.18);
}

.brand-badge{border:1px solid var(--border)}

/* Buttons */
.btn-primary-soft{
  background: var(--primary);
  color: var(--primary-ink);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  font-weight: 700;
}
.btn-primary-soft:hover{filter: brightness(1.06); color: var(--primary-ink)}

/* Back-compat for existing templates */
.btn-glow{background: var(--primary); color: var(--primary-ink); border: 1px solid rgba(0,0,0,.18); border-radius: 12px; font-weight:700}
.btn-glow:hover{filter: brightness(1.06); color: var(--primary-ink)}

.btn-ghost{
  border:1px solid var(--border);
  color: var(--text);
  background: transparent;
  border-radius: 12px;
}
.btn-ghost:hover{background: var(--surface-2); color: var(--text)}

.btn-soft{
  border:1px solid var(--border);
  color: var(--text);
  background: var(--surface);
  border-radius: 12px;
}
.btn-soft:hover{background: var(--surface-2); color: var(--text)}

.searchbox .form-control,.searchbox .input-group-text{
  background: var(--surface);
  border:1px solid var(--border);
  color: var(--text);
}

.cart-badge{position:absolute; top:-6px; left:-6px; font-size:11px; background: var(--primary)!important; color: var(--primary-ink)!important}

/* Product card */
.product-card{overflow:hidden; transition: transform .18s ease, box-shadow .18s ease;}
.product-card:hover{transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,.22)}

.product-thumb{
  aspect-ratio: 4/3;
  border-radius: 12px;
  background: var(--surface-2);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.product-thumb img{width:100%;height:100%;object-fit:cover}

/* Category icon pill */
.cat-icon{
  width:44px;height:44px;border-radius: 14px;
  display:inline-flex;align-items:center;justify-content:center;
  background: var(--surface-2);
  border:1px solid var(--border);
}
.cat-icon i{font-size:22px}

.skeleton{background: linear-gradient(90deg, rgba(127,145,170,.18), rgba(127,145,170,.32), rgba(127,145,170,.18));background-size:200% 100%;animation: shimmer 1.2s infinite;border-radius:12px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.mobile-nav{
  position:fixed;left:12px;right:12px;bottom:12px;
  background: var(--nav-bg);
  border:1px solid var(--nav-border);
  border-radius:16px;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:6px;padding:10px 8px;
  backdrop-filter: blur(12px);
  z-index:1050;
}
.mobile-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color: var(--muted);text-decoration:none;font-size:11px;padding:6px 0;border-radius:12px;}
.mobile-nav__item i{font-size:18px}
.mobile-nav__item:hover{color:var(--text);background: var(--surface)}

.app-footer{border-top: 1px solid var(--border); background: var(--bg-soft);}

.avatar-orb{width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;background: var(--surface-2);border:1px solid var(--border);}

/* --- FX shine on cards --- */
.glass-card{position:relative;overflow:hidden}
.glass-card::before{content:"";position:absolute;inset:0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(255,153,0,.18), transparent 45%);
  opacity:0;transition:opacity .18s ease;pointer-events:none}
.glass-card:hover::before{opacity:1}

/* --- Better inputs (Amazon-ish) --- */
.form-control, .form-select, .form-check-input{
  background: var(--surface);
  border:1px solid var(--border);
  color: var(--text);
  border-radius:12px;
}
.form-control::placeholder{color: var(--muted)}
.form-control:focus, .form-select:focus{
  background: var(--surface);
  color: var(--text);
  border-color: rgba(255,153,0,.55);
  box-shadow: 0 0 0 .25rem rgba(255,153,0,.18);
}

.table{
  color: var(--text);
}
.table>:not(caption)>*>*{background: transparent; border-bottom:1px solid var(--border)}

/* --- Category icon tiles --- */
.icon-tile{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.icon-tile:hover{color:var(--text)}
.icon-tile .icon{
  width:52px;height:52px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  background: var(--surface-2);
  border:1px solid var(--border);
}
.icon-tile .icon i{font-size:24px}
.icon-tile .meta .title{font-weight:800}
.icon-tile .meta .sub{font-size:12px;color:var(--muted)}

/* --- Horizontal slider (scroll-snap) --- */
.hslider{position:relative}
.hslider__track{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.hslider__track::-webkit-scrollbar{height:8px}
.hslider__track::-webkit-scrollbar-thumb{background: rgba(127,145,170,.28);border-radius:999px}
.hslider__item{min-width:240px;scroll-snap-align:start}
.hslider__btn{position:absolute;top:45%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;border:1px solid var(--border);
  background: var(--nav-bg);color:var(--text);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;z-index:2}
.hslider__btn:hover{background: var(--surface-2)}
.hslider__btn--prev{right:-10px}
.hslider__btn--next{left:-10px}

/* ===============================
   Back to Top
=============================== */
.back-to-top{
  position:fixed;
  right:16px;
  bottom:90px;
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(17,24,39,.55);
  color: var(--text);
  backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1040;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
[data-theme="light"] .back-to-top{background: rgba(255,255,255,.75)}
.back-to-top:hover{transform: translateY(-2px)}