/* Shared responsive styles for MrBasstian WebApp
   Mobile-first approach. Keep rules minimal and compatible with Tailwind.
*/
:root{
  --bg-dark:#0F172A;
  --accent:#eab308;
  --muted:#94a3b8;
}
html,body{margin:0;padding:0;background:var(--bg-dark);color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
.container{max-width:1100px;margin:0 auto;padding-left:1rem;padding-right:1rem}
/* Header fixes */
header{position:fixed;left:0;right:0;top:6px;z-index:60;backdrop-filter:blur(3px);}
#top-nav-container ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.6rem}
#top-nav-container ul li{list-style:none}
#top-nav-container a{display:inline-flex;align-items:center}
/* Make cart badge responsive */
#cart-count-badge{font-size:0.7rem;height:1.25rem;width:1.25rem}
/* Slide menu adjustments */
#slide-menu{display:none;background:#0b1220;color:#fff;padding:1rem;box-shadow:0 8px 24px rgba(2,6,23,0.7)}
#slide-menu.open{display:block;transform:translateX(0)!important}
/* Ensure main content isn't hidden behind fixed header */
main{padding-top:90px}
/* Responsive grid fallback for product lists */
.responsive-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
@media(min-width:640px){.responsive-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.responsive-grid{grid-template-columns:repeat(4,1fr)}}
/* Images */
img{max-width:100%;height:auto;display:block}
/* Buttons */
.btn{display:inline-block;background:#16a34a;color:#fff;padding:0.6rem 1rem;border-radius:0.5rem;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08)}
/* Footer spacing for mobile */
footer{padding:1.25rem 0;background:transparent}
/* Utility small-screen tweaks */
@media(max-width:420px){
  #top-nav-container ul{gap:0.4rem;font-size:0.9rem}
  header{top:2px}
  main{padding-top:82px}
}
/* Tables & forms responsive */
.table-responsive{overflow:auto}
.input-full{width:100%;box-sizing:border-box}
/* Minor helpers for slide menu close overlay */
#menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:45;display:none}
#menu-overlay.active{display:block}