mc-site-nav { --bg:rgba(4,6,10,.94); --line:rgba(255,255,255,.11); --text:#f3f5f8; --muted:#aeb5c1; --blue:#75ceff; display:block; position:sticky; top:0; z-index:2147483000; width:100%; color:var(--text); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
mc-site-nav * { box-sizing:border-box; } mc-site-nav a { color:inherit; text-decoration:none; } mc-site-nav button { color:inherit; font:inherit; }
mc-site-nav .bar { height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:18px; padding:0 max(20px,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); background:var(--bg); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); }
mc-site-nav .brand { min-width:0; display:inline-flex; align-items:center; justify-self:start; gap:10px; color:var(--muted); font-size:13px; letter-spacing:.04em; transition:color 160ms ease; }
mc-site-nav .brand:hover { color:var(--text); } mc-site-nav .brand img { width:30px; height:30px; object-fit:contain; } mc-site-nav .brand span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
mc-site-nav details { position:relative; justify-self:center; } mc-site-nav summary { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; border:1px solid transparent; border-radius:999px; cursor:pointer; list-style:none; font-size:13px; font-weight:500; }
mc-site-nav summary::-webkit-details-marker { display:none; } mc-site-nav summary::after { content:"⌄"; color:var(--blue); font-size:13px; transform:translateY(-1px); } mc-site-nav details[open] summary,mc-site-nav summary:hover { border-color:var(--line); background:rgba(255,255,255,.035); }
mc-site-nav .menu { position:absolute; top:calc(100% + 11px); left:50%; width:240px; padding:8px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.13); border-radius:13px; background:rgba(7,10,16,.985); box-shadow:0 20px 58px rgba(0,0,0,.52); }
mc-site-nav .menu a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 12px; border-radius:8px; color:var(--muted); font-size:13px; line-height:1.25; } mc-site-nav .menu a:hover,mc-site-nav .menu a[aria-current="page"] { color:var(--text); background:rgba(117,206,255,.07); } mc-site-nav .menu a span { color:var(--blue); } mc-site-nav .all-products { margin-top:5px; border-top:1px solid var(--line); border-radius:0 0 8px 8px!important; }
mc-site-nav .actions { display:flex; align-items:center; justify-self:end; gap:8px; }
mc-site-nav .pill { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--text); font-size:13px; cursor:pointer; transition:border-color 160ms ease,background 160ms ease; }
mc-site-nav .pill:hover,mc-site-nav .pill[aria-current="page"] { border-color:rgba(117,206,255,.5); background:rgba(117,206,255,.055); }
mc-site-nav .count { display:grid; min-width:18px; height:18px; place-items:center; padding:0 5px; border-radius:999px; background:var(--blue); color:#06101a; font-size:10px; font-weight:700; }
mc-site-nav .account-mark { color:var(--blue); font-size:11px; }
mc-site-nav dialog { width:min(430px,calc(100vw - 28px)); max-width:calc(100vw - 28px); max-height:min(720px,calc(100dvh - 28px)); margin:auto 14px auto auto; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:#080b11; color:var(--text); box-shadow:0 28px 90px rgba(0,0,0,.72); }
mc-site-nav dialog::backdrop { background:rgba(0,0,0,.64); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
mc-site-nav .cart-head { display:flex; align-items:center; justify-content:space-between; padding:21px 22px; border-bottom:1px solid var(--line); }
mc-site-nav .cart-head h2 { margin:0; font-size:19px; font-weight:550; letter-spacing:-.02em; } mc-site-nav .close { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; }
mc-site-nav .cart-body { padding:8px 22px 22px; overflow:auto; }
mc-site-nav .cart-items { list-style:none; margin:0; padding:0; } mc-site-nav .cart-item { display:grid; grid-template-columns:1fr auto; gap:5px 16px; padding:17px 0; border-bottom:1px solid var(--line); } mc-site-nav .cart-item strong { font-size:14px; font-weight:500; } mc-site-nav .cart-item .price { color:var(--text); font-size:13px; } mc-site-nav .cart-item small { color:var(--muted); font-size:11px; } mc-site-nav .remove { grid-column:2; padding:0; border:0; background:transparent; color:var(--blue); cursor:pointer; font-size:11px; }
mc-site-nav .empty { margin:28px 0; color:var(--muted); font-size:14px; line-height:1.6; text-align:center; }
mc-site-nav .notice { min-height:19px; margin:13px 0 0; color:#d5dbe4; font-size:12px; line-height:1.5; }
mc-site-nav .summary-row { display:flex; justify-content:space-between; gap:18px; padding:20px 0 16px; font-size:14px; } mc-site-nav .summary-row strong { font-size:17px; font-weight:550; }
mc-site-nav .checkout { width:100%; min-height:46px; border:1px solid rgba(117,206,255,.62); border-radius:999px; background:linear-gradient(180deg,rgba(53,144,203,.24),rgba(25,81,119,.2)); cursor:pointer; font-weight:550; } mc-site-nav .checkout:hover { background:rgba(117,206,255,.13); } mc-site-nav .checkout:disabled { opacity:.46; cursor:not-allowed; }
mc-site-nav .secure { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.5; text-align:center; letter-spacing:.05em; }
mc-site-nav a:focus-visible,mc-site-nav button:focus-visible,mc-site-nav summary:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@media (max-width:560px){ mc-site-nav .bar { height:54px; grid-template-columns:34px 1fr auto; gap:6px; padding:0 12px; } mc-site-nav .brand span,mc-site-nav .account-label { display:none; } mc-site-nav .brand img { width:28px; height:28px; } mc-site-nav summary { padding:0 7px; } mc-site-nav .actions { gap:5px; } mc-site-nav .pill { padding:0 9px; } mc-site-nav .menu { width:min(240px,calc(100vw - 28px)); } mc-site-nav dialog { margin:auto; } }
@media (prefers-reduced-motion:reduce){ mc-site-nav * { transition:none!important; } }