:root{
  --cyan:#00b0f0;
  --magenta:#f000b0;
  --yellow:#f0e000;
  --black:#101010;
  --bg:#070b14;
  --panel: rgba(16,26,47,.62);
  --panel2: rgba(7,11,20,.55);
  --text:#e8eefc;
  --muted:#a8b3cf;
  --border:rgba(232,238,252,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--cyan) 28%, transparent), transparent 58%),
    radial-gradient(900px 520px at 98% 0%, color-mix(in srgb, var(--magenta) 22%, transparent), transparent 60%),
    radial-gradient(900px 520px at 60% 110%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 62%),
    linear-gradient(180deg, #050813 0%, var(--bg) 45%, #050813 100%);
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:24px}
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(5,8,19,.62);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; gap:18px; justify-content:space-between; padding:14px 24px; max-width:var(--max); margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.4px}
.brand img{height:44px; width:auto; border-radius:12px; box-shadow: var(--shadow);}
.brand span{font-size:18px}
.menu{display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.menu > a, .dropbtn{padding:9px 12px; border-radius:12px; color:var(--muted); border:1px solid transparent;}
.menu > a:hover, .dropbtn:hover{color:var(--text); border-color:var(--border); background: rgba(16,26,47,.55);}
.dropdown{position:relative}
.drop{position:absolute; right:0; top:44px; min-width:260px; background: rgba(16,26,47,.92);
  border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding:8px; display:none;}
.dropdown:hover .drop{display:block}
.drop a{display:block; padding:10px 12px; border-radius:12px; color:var(--muted);}
.drop a:hover{color:var(--text); background: rgba(7,11,20,.45);}
.hero{padding:48px 0 18px}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.h-title{font-size:42px; line-height:1.05; margin:0 0 12px; letter-spacing:-.9px}
.h-sub{color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 22px}
.card{background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow);}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
@media (max-width:920px){.grid{grid-template-columns:1fr}}
.section-title{margin:26px 0 10px; font-size:20px}
.small{font-size:13px; color:var(--muted); line-height:1.55}
.breadcrumbs{color:var(--muted); font-size:13px; margin:10px 0 16px}
.breadcrumbs a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.search{display:flex; gap:10px; align-items:center; margin: 10px 0 16px;}
input[type="search"]{width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--border);
  background: var(--panel2); color:var(--text); outline:none;}
.products{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:10px}
@media (max-width:920px){.products{grid-template-columns:1fr}}
.product-card{background: rgba(7,11,20,.35); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.product-media{
  height:160px;
  background:
    radial-gradient(220px 140px at 20% 20%, color-mix(in srgb, var(--cyan) 35%, transparent), transparent 60%),
    radial-gradient(240px 160px at 90% 20%, color-mix(in srgb, var(--magenta) 26%, transparent), transparent 62%),
    radial-gradient(260px 170px at 60% 120%, color-mix(in srgb, var(--yellow) 22%, transparent), transparent 66%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
  position:relative;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.product-body{padding:14px 14px 16px}
.product-title{font-weight:800; margin:0 0 8px; letter-spacing:.2px}
.product-meta{margin:0 0 10px; color:var(--muted); font-size:13px; line-height:1.45}
.price{font-weight:900; margin:0 0 12px;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 80%, #ffffff 0%), color-mix(in srgb, var(--magenta) 70%, #ffffff 0%));
  color:#06101f; font-weight:900;}
.btn.secondary{background: rgba(255,255,255,.06); color:var(--text);}
.btn:hover{filter:brightness(1.05)}
.footer{margin-top:48px; border-top:1px solid var(--border); color:var(--muted); padding:22px 0 40px;}


/* invisible bridge between button and menu */
  height:16px;
}
.drop{
  top:44px;
  pointer-events:auto;
}
/* Click-to-toggle support (added via JS) */
.dropdown.open .drop{ display:block; }



/* === Menu vertical alignment fix === */
.menu{
  display:flex;
  align-items:center;
}

.menu > a,
.menu .dropbtn{
  display:flex;
  align-items:center;
  height:36px;
  line-height:36px;
  padding:0 12px;
}

.brand{
  display:flex;
  align-items:center;
}


}





/* === Home watermark (reliable) === */
body.home-page{
  position: relative;
  isolation: isolate; /* ensures ::before sits between bg and content */
}
body.home-page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("home-watermark.png");
  background-repeat: no-repeat !important;
  background-position: center 65%;
  background-size: min(520px, 45vw) auto;
  background-attachment: fixed;
  opacity: 0.16;
  filter: saturate(1.05) contrast(1.05);
}
body.home-page .navbar,
body.home-page main{
  position: relative;
  z-index: 1;
}
/* Open states: hover, focus, or JS-controlled */
.dropdown:hover .drop,
.dropdown:focus-within .drop,
.dropdown.open .drop{
  display: block;
}
/* Bigger invisible bridge (prevents flicker) */
.dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:34px;
  height:26px;
}


/* Open only via JS (class .open) or keyboard focus */
.dropdown.open .drop,
.dropdown:focus-within .drop{
  display:block;
}
/* Remove hover-based closing behavior by overriding */
.dropdown:hover .drop{ display:none; }
/* Make submenu easier to reach */
.drop{ padding:10px; }
.drop a{ display:block; padding:10px 12px; }
/* Keep button and menu connected visually */
.drop::before{
  content:"";
  position:absolute;
  top:-10px;
  left:0; right:0;
  height:10px;
}


/* === Dropdown menu: auto-appear on hover, stay open until click selection === */
.dropdown{ position:relative; display:inline-flex; align-items:center; }
.drop{
  display:none;
  position:absolute;
  right:0;
  top:44px;
  min-width:260px;
  z-index:9999;
}
/* Open via hover OR JS sticky open OR keyboard focus */
.dropdown:hover .drop,
.dropdown.open .drop,
.dropdown:focus-within .drop{
  display:block;
}
/* Make submenu easier to reach/click */
.drop{ padding:10px; }
.drop a{ display:block; padding:10px 12px; }
/* Small connector bridge */
.drop::before{
  content:"";
  position:absolute;
  top:-10px;
  left:0; right:0;
  height:10px;
}


/* === Dropdown front + selection highlight === */
.navbar{ z-index: 10000; }
.nav-inner{ position: relative; z-index: 10000; }
.menu{ position: relative; z-index: 10000; }
.dropdown{ position: relative; z-index: 10000; }
.drop{
  z-index: 20000 !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(232,238,252,.16);
  background: rgba(16,26,47,.96);
}

/* Highlight hover/focus */
.drop a{
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
}
.drop a:hover,
.drop a:focus{
  color: var(--text);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cyan) 22%, rgba(255,255,255,0)),
    color-mix(in srgb, var(--magenta) 18%, rgba(255,255,255,0))
  );
  border-color: rgba(232,238,252,.16);
  outline: none;
}

/* Persist highlight after selection */
.drop a.selected{
  color: var(--text);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cyan) 28%, rgba(255,255,255,0)),
    color-mix(in srgb, var(--yellow) 16%, rgba(255,255,255,0))
  );
  border-color: rgba(232,238,252,.18);
}


/* === V8 Dropdown: force on-top + no clipping + simple highlight === */
.navbar, .nav-inner, .menu, .dropdown { overflow: visible !important; }
.navbar { position: sticky; top: 0; z-index: 999999 !important; }
.nav-inner { position: relative; z-index: 999999 !important; }
.menu { position: relative; z-index: 999999 !important; }

/* Ensure dropdown isn't trapped in a lower stacking context */
.dropdown { position: relative; z-index: 999999 !important; }
.drop {
  position: absolute !important;
  right: 0 !important;
  top: 44px !important;
  z-index: 1000000 !important;
  display: none;
  background: rgba(16,26,47,.98) !important;
  border: 1px solid rgba(232,238,252,.18) !important;
  box-shadow: 0 22px 80px rgba(0,0,0,.65) !important;
}

/* Open states */
.dropdown:hover .drop,
.dropdown.open .drop,
.dropdown:focus-within .drop { display:block !important; }

/* Bigger hit area / bridge */
.dropdown::after{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  top:32px;
  height:34px;
}

/* Highlighting */
.drop a{
  color: rgba(232,238,252,.78) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.drop a:hover,
.drop a:focus{
  color: #e8eefc !important;
  background: rgba(55,180,255,.16) !important;
  border-color: rgba(55,180,255,.28) !important;
  outline: none !important;
}
.drop a.selected{
  color:#e8eefc !important;
  background: rgba(124,92,255,.20) !important;
  border-color: rgba(124,92,255,.32) !important;
}
/* Also show active top-level item nicely */
.menu > a.active, .dropbtn.active{
  color:#e8eefc !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(232,238,252,.14) !important;
}

/* Global background no-repeat safeguard */
html, body{
  background-repeat: no-repeat !important;
  background-attachment: fixed;
}