#site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--border-light); transition:border-color .25s, box-shadow .25s, background .25s; }
#site-header.scrolled{ border-bottom-color:var(--border-light); box-shadow:var(--shadow-xs); background:rgba(255,255,255,.85); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; display:flex; align-items:center; gap:1rem; height:68px; }
.nav-logo{ text-decoration:none; display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.nav-logo-img{ height:65px; width:auto; display:block; margin-inline:.65rem; }
@media(max-width:600px){ .nav-logo-img{ height:52px; margin-inline:.35rem; } }
.nav-links{ display:none; align-items:center; gap:.1rem; flex-shrink:0; }
.nav-link{ text-decoration:none; color:var(--text-mid); font-size:.9rem; font-weight:500; padding:.5rem .8rem; border-radius:.6rem; white-space:nowrap; transition:background .15s,color .15s; }
.nav-link:hover{ background:var(--surface-low); color:var(--text); }
.nav-link.on{ color:var(--primary); font-weight:700; }
/* eSIM dropdown */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-caret{ font-size:.7rem; color:var(--text-muted); margin-inline-start:.05rem; display:inline-block; transition:transform .18s; }
.nav-item:hover .nav-caret{ transform:rotate(180deg); }
.nav-drop{ position:absolute; top:100%; inset-inline-start:0; background:var(--surface); border:1px solid var(--border-light); border-radius:.9rem; box-shadow:var(--shadow-lg); padding:.5rem; display:none; grid-template-columns:1fr 1fr; gap:.1rem; min-width:360px; z-index:60; }
.nav-item:hover .nav-drop{ display:grid; }
.nav-drop a{ display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:.6rem; text-decoration:none; color:var(--text); font-size:.88rem; font-weight:600; white-space:nowrap; transition:background .12s,color .12s; }
.nav-drop a:hover{ background:var(--surface-low); color:var(--primary); }
.nav-drop .drop-emoji{ font-size:1.1rem; width:1.4rem; text-align:center; flex-shrink:0; }
.nav-drop .drop-all{ grid-column:1 / -1; font-weight:800; color:var(--primary); border-bottom:1px solid var(--border-light); border-radius:.6rem; margin-bottom:.15rem; }
.nav-search{ flex:1; max-width:360px; margin-inline-start:auto; position:relative; display:flex; align-items:center; }
.nav-search-ic{ position:absolute; right:.9rem; font-size:.9rem; opacity:.6; pointer-events:none; }
.nav-search input{ width:100%; height:40px; border:1px solid transparent; border-radius:999px; background:var(--surface-low); padding:0 2.4rem 0 1.1rem; font-size:.88rem; color:var(--text); outline:none; font-family:'Inter',sans-serif; transition:border-color .15s, box-shadow .15s, background .15s; }
.nav-search input:focus{ background:var(--surface); border-color:var(--primary); box-shadow:0 0 0 3px rgba(168,31,24,.10); }
.nav-search input::placeholder{ color:var(--text-muted); }
.nav-actions{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.nav-cart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--border-light); background:var(--surface); text-decoration:none; font-size:1.1rem; transition:box-shadow .15s,border-color .15s; }
.nav-cart:hover{ box-shadow:var(--shadow-sm); border-color:var(--border); }
.nav-cart-badge{ position:absolute; top:-5px; inset-inline-end:-5px; background:var(--primary); color:#fff; font-size:.66rem; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.nav-account{ text-decoration:none; display:flex; align-items:center; gap:.5rem; padding:.35rem .7rem .35rem .35rem; border-radius:999px; border:1px solid var(--border-light); background:var(--surface); transition:box-shadow .15s,border-color .15s; max-width:170px; }
.nav-account:hover{ box-shadow:var(--shadow-sm); border-color:var(--border); }
.nav-avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; flex-shrink:0; }
.nav-account-name{ font-size:.85rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(min-width:880px){ .nav-links{ display:flex; } }
@media(max-width:600px){ .nav-search{ display:none; } }
/* Mobile hamburger menu */
.nav-burger{ display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; border:1px solid var(--border-light); background:var(--surface); font-size:1.35rem; line-height:1; cursor:pointer; color:var(--text); flex-shrink:0; padding:0; }
.nav-burger:hover{ box-shadow:var(--shadow-sm); }
@media(max-width:879px){
  .nav-burger{ display:inline-flex; }
  .nav-actions{ margin-inline-start:auto; }
  .nav-links{ position:absolute; top:100%; inset-inline:0; flex-direction:column; align-items:stretch;
    background:var(--surface); border-bottom:1px solid var(--border-light); box-shadow:var(--shadow-md);
    padding:.5rem .75rem .9rem; gap:.1rem; max-height:calc(100vh - 68px); overflow-y:auto; display:none; }
  #site-header.nav-open .nav-links{ display:flex; }
  .nav-link{ font-size:1.02rem; padding:.85rem 1rem; border-radius:.7rem; }
  .nav-item{ flex-direction:column; align-items:stretch; }
  .nav-caret{ display:none; }
  .nav-drop{ position:static; display:grid; box-shadow:none; border:none; min-width:0; padding:.1rem .25rem .5rem 1.25rem; background:transparent; }
  .nav-drop a{ font-size:.92rem; padding:.55rem .5rem; }
}
/* Language switcher */
.lang-switch{ position:relative; }
.lang-switch summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.35rem; padding:.35rem .55rem; border:1px solid var(--border-light); border-radius:999px; background:var(--surface); transition:border-color .15s, box-shadow .15s; }
.lang-switch summary::-webkit-details-marker{ display:none; }
.lang-switch summary:hover{ border-color:var(--border); box-shadow:var(--shadow-xs); }
.ls-flag{ width:20px; height:15px; border-radius:2px; object-fit:cover; display:block; }
.ls-code{ font-size:.78rem; font-weight:800; color:var(--text-mid); letter-spacing:.02em; }
.ls-caret{ font-size:.7rem; color:var(--text-muted); }
.lang-menu{ position:absolute; top:calc(100% + .4rem); inset-inline-end:0; background:var(--surface); border:1px solid var(--border-light); border-radius:.8rem; box-shadow:var(--shadow-lg); padding:.35rem; min-width:160px; z-index:60; }
.lang-opt{ display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:.55rem; text-decoration:none; color:var(--text); font-size:.88rem; font-weight:600; white-space:nowrap; }
.lang-opt:hover{ background:var(--surface-low); }
.lang-opt.on{ color:var(--primary); }
.lang-opt img{ width:22px; height:16px; border-radius:2px; object-fit:cover; }
/* Live search suggestions */
.nav-search, .store-search{ position:relative; }
/* position:fixed (not absolute) — computed in JS from the input's real screen position — so the
   dropdown escapes any ancestor's overflow:hidden (e.g. the rounded-corner red hero on /packages,
   which clips absolutely-positioned children to draw its decorative glow). */
.sg-box{ position:fixed; background:var(--surface); border:1px solid var(--border-light); border-radius:.9rem; box-shadow:var(--shadow-lg); z-index:9999; overflow:hidden; display:none; }
.sg-box.on{ display:block; }
.sg-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem .9rem; text-decoration:none; cursor:pointer; border-bottom:1px solid var(--border-light); }
.sg-item:last-child{ border-bottom:none; }
.sg-item:hover, .sg-item.hl{ background:var(--surface-low); }
.sg-item img{ width:26px; height:19px; border-radius:3px; object-fit:cover; flex-shrink:0; }
.sg-globe{ font-size:1.15rem; width:26px; text-align:center; flex-shrink:0; }
.sg-name{ font-weight:700; color:var(--text); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-meta{ margin-inline-start:auto; font-size:.82rem; color:var(--primary); font-weight:800; white-space:nowrap; }
.sg-empty{ padding:1rem; text-align:center; color:var(--text-muted); font-size:.85rem; }