/* ===== NextGenTool Theme — styles.css (full) ===== */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0b1020;
  --card:#131a33;
  --accent1:#7c4dff;
  --accent2:#00e5ff;
  --text:#e8ecff;
  --muted:#a6b0d6;
  --danger:#ff5d5d;
  --success:#00d084;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.12);
  --glass:rgba(11,16,32,.65);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}

/* Page as flex column so footer can push to bottom */
html, body{
  display:flex;
  flex-direction:column;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.35), transparent),
    radial-gradient(1000px 500px at 110% 10%, rgba(0,229,255,.25), transparent),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.p{padding:12px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  backdrop-filter:saturate(1.2) blur(8px);
  background:var(--glass);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.site-header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.35); background:rgba(11,16,32,.78)}
.site-header .wrap{display:flex; align-items:center; height:64px}

.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--text); font-weight:700
}
.brand .logo{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow:var(--shadow); font-weight:900
}

/* Main nav */
.menu{display:flex; gap:18px; margin-left:auto; align-items:center}
.menu a{color:var(--text); text-decoration:none; opacity:.9; line-height:1}
.menu a:hover,.menu a:focus{opacity:1}

.menu-group{position:relative}
.menu-drop{
  background:transparent; border:0; color:var(--text); opacity:.9; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; gap:6px; padding:6px 2px; font:inherit;
}
.menu-drop:focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px}

/* Telescopic dropdown */
.menu-drop-panel{
  position:absolute; left:0; top:36px; min-width:220px; max-width:600px;
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
  border-radius:12px; padding:8px;
  overflow:hidden; max-height:0; opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transition:max-height .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease, transform .25s ease, visibility .25s step-end;
  will-change:max-height, opacity, transform;
}
.menu-group.open .menu-drop-panel{
  max-height:500px; opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;
  transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .2s ease, transform .25s ease, visibility 0s;
}

/* Hover-to-open (desktop hover devices only) */
@media (hover: hover) and (pointer: fine){
  .menu-group.hoverable:hover .menu-drop-panel{
    max-height:500px; opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;
    transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .2s ease, transform .25s ease, visibility 0s;
  }
}

.menu-drop-panel a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--text); text-decoration:none;
  border:1px solid transparent;
}
.menu-drop-panel a:hover{background:rgba(255,255,255,.06); border-color:var(--border-strong)}

/* Optional two-column “mega” layout if many links */
.menu-drop-panel .mega{display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); gap:8px}

/* Cart badge */
.cart-link{padding:8px 12px; border-radius:999px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#0b1020}
.badge{background:#0b1020; color:#fff; padding:.1rem .45rem; border-radius:999px; font-size:.8rem; margin-left:6px}

/* Mobile hamburger */
.hamburger{display:none;margin-left:12px;background:transparent;border:0;color:var(--text);font-size:22px}

/* ---------- Main & Footer ---------- */
/* let main grow; safe padding (header space + bottom space) */
.site-main{
  flex:1;
  padding-top:80px;
  padding-bottom:40px;
}

/* footer is not fixed; it stays at bottom with flex */
.site-footer{
  margin-top:auto;
  background:rgba(11,16,32,.8);
  border-top:1px solid var(--border)
}
.footer-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:18px; padding:18px 16px}
.site-footer a{display:block; color:var(--muted); text-decoration:none; margin:6px 0}
.site-footer h4{margin:.3rem 0}

/* ---------- Grid / Cards ---------- */
.grid{display:grid; gap:16px; grid-template-columns: repeat(4, 1fr)}
@media (max-width:1024px){.grid{grid-template-columns: repeat(3,1fr)}}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-2px); border-color:var(--border-strong); box-shadow:0 14px 40px rgba(0,0,0,.45) }
.card img{width:100%; height:170px; object-fit:cover}
.card .p{padding:12px}
.card h3{margin:.2rem 0 .4rem; font-size:1.05rem}
.price{font-weight:700; margin-top:6px}

/* Make entire card clickable except the buttons row */
.product-card{cursor:pointer}
.product-card .btn-row .btn{pointer-events:auto}
.product-card .btn-row a{text-decoration:none}

/* ---------- Buttons & Forms ---------- */
.btn{display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none; cursor:pointer; border:0}
.btn-primary{background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#0b1020; font-weight:700}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border-strong)}
.btn-danger{background:var(--danger); color:#fff}
.btn-full{width:100%}
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border-strong); background:rgba(0,0,0,.2); color:var(--text)
}

/* Compact buttons in product cards */
.btn-sm{ padding:8px 10px; font-size:.9rem; border-radius:10px }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }

/* ---------- Hero / Ad ---------- */
.hero{display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:18px}
.ad{
  background:linear-gradient(135deg, rgba(124,77,255,.25), rgba(0,229,255,.25));
  border:1px dashed rgba(255,255,255,.2); border-radius:16px; padding:20px; text-align:center
}
.ad small{color:var(--muted)}

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

/* ---------- Responsive ---------- */
@media (max-width:900px){ .hero{grid-template-columns: 1fr} }

@media (max-width:768px){
  .grid{grid-template-columns: repeat(2,1fr)}
  
  /* 🔧 Menu is flex by default, hidden only when .collapsed is applied */
  .menu{
    display:flex;
    position:absolute; top:64px; left:0; right:0;
    background:var(--card); padding:14px; border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; gap:10px;
  }
  .menu.collapsed {
    display:none !important;
  }

  .menu > a,
  .menu > .menu-group{ display:block; width:100% }
  .hamburger{display:block}
  .footer-grid{grid-template-columns: repeat(2,1fr)}
  /* dropdown becomes inline accordion */
  .menu-group{width:100%}
  .menu-drop{width:100%; justify-content:space-between; padding:10px 6px}
  .menu-drop-panel{position:relative; top:auto; left:auto; max-width:none; width:100%}
  .menu-drop-panel .mega{grid-template-columns:1fr}
}

@media (max-width:480px){
  .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* cart badge bump animation */
#cartCount.bump {
  animation: bump 300ms ease;
}
@keyframes bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}
/* ===== Mobile-friendly category / subcategory overrides for header =====
   Place this near the Header / Nav section or at the end of styles.css.
   Keeps desktop unchanged; makes mobile chips wrap into up-to-two lines. */
.category-strip{
  /* use site colors/spacing but keep it lightweight */
  background: #f6f6f6;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  overflow: visible;      /* avoid forcing horizontal scroll on small screens */
  white-space: normal;
}

.category-strip .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  justify-content:flex-start;
}

/* Desktop: keep the original pill look (unchanged for large screens) */
@media (min-width:981px){
  .category-strip .wrap { gap:12px; }
  .category-strip a { background:#fff; border-radius:18px; padding:8px 14px; font-size:15px; white-space:nowrap; }
}

/* Mobile: two-column friendly chips that shrink */
@media (max-width:980px){
  .category-strip{ padding:8px 12px; }

  /* make each chip attempt to occupy ~50% width so that chips wrap into two rows */
  .category-strip a {
    flex: 0 1 calc(50% - 10px);
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:6px 8px;
    border-radius:12px;
    font-size:14px;
    min-width:0;               /* prevents overflow from long words */
    white-space:nowrap;        /* keep label single-line inside chip */
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:none;
  }

  /* smaller screens: slightly tighter */
  @media (max-width:420px){
    .category-strip a { font-size:13px; padding:5px 7px; flex: 0 1 calc(50% - 8px); }
  }

  /* subcategory strip adjustments */
  .subcategory-strip {
    padding:6px 10px;
    font-size:12px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .subcategory-strip .wrap {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-start;
  }
  .subcategory-strip a {
    padding:4px 8px;
    border-radius:10px;
    font-size:12px;
    flex: 0 1 auto;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Optional visual for selected category (non-intrusive) */
.category-strip a[aria-current="true"], .category-strip a.active {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}