/* ===== Get Unity Code – Simple Modern Header (scoped .guc-header) ===== */
.guc-header {
  --brand:#7c3aed; --brand-2:#6d28d9; --accent:#06b6d4;
  --ink:#0f172a; --muted:#6b7280; --line:#e9eaf0;
  position: sticky; top: 0; z-index: 9999;
  background:#fff; border-bottom:1px solid var(--line);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
}
.guc-header *, .guc-header *::before, .guc-header *::after { box-sizing:border-box; }
.guc-header svg { display:block; }

.guc-header .header-bar {
  position:relative; max-width:1280px; margin:0 auto;
  height:70px; padding:0 26px;
  display:flex; align-items:center; gap:22px;
}

/* ---------- Logo ---------- */
.guc-header .logo { display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.guc-header .logo--img { line-height:0; }
.guc-header .logo img, .guc-header .custom-logo { height:40px !important; width:auto !important; max-width:190px; object-fit:contain; display:block; }
.guc-header .custom-logo-link { display:inline-flex; align-items:center; line-height:0; }
.guc-header .logo-mark {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex; align-items:flex-end; justify-content:center; gap:3px; padding-bottom:8px;
  box-shadow:0 6px 14px rgba(124,58,237,0.35);
}
.guc-header .logo-mark i { display:block; width:4px; border-radius:3px; background:#fff; transform:skewX(-12deg); }
.guc-header .logo-mark i:nth-child(1){ height:8px; opacity:.7; }
.guc-header .logo-mark i:nth-child(2){ height:13px; opacity:.85; }
.guc-header .logo-mark i:nth-child(3){ height:18px; }
.guc-header .logo-text {
  font-size:18px; font-weight:800; letter-spacing:.2px; text-transform:uppercase; line-height:1; white-space:nowrap;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Nav ---------- */
.guc-header .nav { display:flex; align-items:center; gap:4px; margin:0 auto; }
.guc-header .guc-menu-list { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.guc-header .nav a, .guc-header .nav-link, .guc-header .guc-menu-list a {
  position:relative; padding:9px 15px; font-size:14.5px; font-weight:600; line-height:1;
  color:var(--muted); text-decoration:none; border-radius:9px; white-space:nowrap;
  transition:color .15s, background .15s; display:inline-block;
}
.guc-header .nav a:hover, .guc-header .guc-menu-list a:hover { color:var(--ink); background:#f6f5fb; }
.guc-header .nav-link.active, .guc-header .guc-menu-list .current-menu-item > a { color:var(--brand); }

/* ---------- Actions ---------- */
.guc-header .actions { display:flex; align-items:center; gap:9px; flex-shrink:0; }

.guc-header .icon-btn {
  width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer; color:#334155;
  transition:background .15s, border-color .15s, color .15s;
}
.guc-header .icon-btn:hover { background:#f6f5fb; border-color:#ddd6fe; color:var(--brand); }
.guc-header .icon-btn svg { width:19px; height:19px; }

/* cart */
.guc-header .cart {
  position:relative; display:flex; align-items:center; gap:9px; height:42px; padding:0 15px;
  text-decoration:none; border-radius:10px; color:var(--ink);
  background:#fff; border:1px solid var(--line);
  transition:background .15s, border-color .15s;
}
.guc-header .cart:hover { background:#f6f5fb; border-color:#ddd6fe; }
.guc-header .cart-ic { position:relative; display:flex; color:var(--brand); }
.guc-header .cart-ic svg { width:20px; height:20px; }
.guc-header .cart .guc-cart-amount { font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap; }
.guc-header .guc-cart-badge {
  position:absolute; top:-9px; right:-9px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#ec4899; color:#fff; font-size:10px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}

/* ---------- User dropdown ---------- */
.guc-header .user-wrap { position:relative; }
.guc-header .nav-user {
  display:flex; align-items:center; gap:8px; height:42px; padding:0 11px 0 6px;
  border-radius:10px; cursor:pointer; border:1px solid var(--line); background:#fff;
  font-family:inherit; transition:background .15s, border-color .15s;
}
.guc-header .nav-user:hover, .guc-header.user-open .nav-user { background:#f6f5fb; border-color:#ddd6fe; }
.guc-header .nav-user .avatar {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.guc-header .nav-user .avatar svg { width:15px; height:15px; }
.guc-header .nav-user .uname { font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.guc-header .nav-user .caret { width:14px; height:14px; color:var(--muted); flex-shrink:0; transition:transform .2s; }
.guc-header.user-open .nav-user .caret { transform:rotate(180deg); }

.guc-header .user-menu {
  position:absolute; top:calc(100% + 10px); right:0; min-width:220px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px;
  box-shadow:0 18px 40px -12px rgba(15,23,42,0.22);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.18s;
}
.guc-header.user-open .user-menu { opacity:1; visibility:visible; transform:translateY(0); }
.guc-header .user-menu-head { padding:8px 12px 12px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.guc-header .user-menu-head strong { display:block; font-size:14px; color:var(--ink); }
.guc-header .user-menu-head span { display:block; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guc-header .user-menu a {
  display:block; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:600;
  color:#334155; text-decoration:none; transition:background .15s, color .15s;
}
.guc-header .user-menu a:hover { background:#f6f5fb; color:var(--brand); }
.guc-header .user-menu a:last-child { color:#e11d48; margin-top:4px; border-top:1px solid var(--line); padding-top:11px; }

/* login button */
.guc-header .login-btn {
  display:inline-flex; align-items:center; height:42px; padding:0 20px;
  font-size:14px; font-weight:700; color:#fff; text-decoration:none; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  transition:opacity .15s;
}
.guc-header .login-btn:hover { opacity:.92; }

/* ---------- Search panel ---------- */
.guc-header .search-panel {
  position:absolute; top:100%; left:0; right:0; z-index:5;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 18px 30px -18px rgba(15,23,42,0.2);
  padding:14px 26px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:.2s;
}
.guc-header.search-open .search-panel { opacity:1; visibility:visible; transform:translateY(0); }
.guc-header .search-panel form { max-width:760px; margin:0 auto; display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line); border-radius:12px; padding:6px 6px 6px 14px; transition:border-color .15s; }
.guc-header .search-panel form:focus-within { border-color:#c4b5fd; }
.guc-header .search-panel svg { width:19px; height:19px; color:var(--muted); flex-shrink:0; }
.guc-header .search-panel input[type="search"] {
  flex:1; border:none; outline:none; background:none; font-size:15px; color:var(--ink); font-family:inherit; padding:8px 0;
}
.guc-header .search-go {
  border:none; cursor:pointer; height:38px; padding:0 20px; border-radius:9px;
  font-size:14px; font-weight:700; color:#fff; font-family:inherit;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); transition:opacity .15s;
}
.guc-header .search-go:hover { opacity:.92; }

/* hamburger */
.guc-header .menu-toggle { display:none; flex-direction:column; }
.guc-header .menu-toggle span { display:block; width:18px; height:2px; border-radius:2px; background:#334155; margin:2.5px 0; transition:.25s; }
.guc-header.open .menu-toggle span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.guc-header.open .menu-toggle span:nth-child(2){ opacity:0; }
.guc-header.open .menu-toggle span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .guc-header .header-bar { padding:0 18px; gap:14px; }
  .guc-header .nav a, .guc-header .guc-menu-list a { padding:9px 12px; }
  .guc-header .search-panel { padding:14px 18px; }
}
@media (max-width:900px){
  .guc-header .nav-user .uname, .guc-header .nav-user .caret { display:none; }
  .guc-header .nav-user { padding:0; width:42px; justify-content:center; }
}
@media (max-width:768px){
  .guc-header .header-bar { height:62px; padding:0 14px; gap:10px; }
  .guc-header .nav {
    position:absolute; top:100%; left:12px; right:12px; margin-top:8px;
    flex-direction:column; align-items:stretch; gap:4px; padding:10px; border-radius:16px;
    background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px -12px rgba(15,23,42,0.25);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s;
  }
  .guc-header.open .nav { opacity:1; visibility:visible; transform:translateY(0); }
  .guc-header .guc-menu-list { flex-direction:column; align-items:stretch; width:100%; gap:4px; }
  .guc-header .nav a, .guc-header .guc-menu-list a { padding:13px 14px; font-size:15px; }
  .guc-header .menu-toggle { display:flex; }
  .guc-header .search-panel { padding:12px 14px; }
  .guc-header .search-go { padding:0 14px; }
  .guc-header .user-menu { right:auto; left:0; }
}
@media (max-width:480px){
  .guc-header .header-bar { padding:0 12px; gap:7px; }
  .guc-header .logo-text { display:none; }
  .guc-header .logo img, .guc-header .custom-logo { height:32px !important; max-width:120px; }
  .guc-header .actions { gap:6px; }
  .guc-header .icon-btn, .guc-header .cart, .guc-header .nav-user, .guc-header .login-btn { height:40px; }
  .guc-header .icon-btn, .guc-header .nav-user { width:40px; }
  .guc-header .cart { padding:0 12px; gap:7px; }
}