/* App shell (v22): bottom dock on every page, smooth page transitions, loading bar, PWA / retina polish. Loaded on all public pages. */
html{background:var(--bg,#10202f);-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{image-rendering:auto}
img{-webkit-user-drag:none}

/* ---- smooth page transitions (cross-document view transitions; older browsers fall back to a short fade-in) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .28s ease both}
.dock{view-transition-name:dock}
header.hd{view-transition-name:site-hd}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@keyframes pgin{from{opacity:0}to{opacity:1}}
main#main{animation:pgin .32s ease both}
@supports(view-transition-name:none){main#main{animation:none}}

/* ---- loading bar (shown while the next page loads) ---- */
.navbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:2147483000;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;opacity:0;background:linear-gradient(90deg,var(--gold,#c9a45c),#ecd9a8,var(--gold,#c9a45c));box-shadow:0 0 10px var(--gold,#c9a45c)}
.navbar.on{opacity:1;transform:scaleX(.86);animation:nbgo 7s cubic-bezier(.08,.75,.2,1) both}
@keyframes nbgo{from{transform:scaleX(0)}to{transform:scaleX(.86)}}
.navbar.done{opacity:0;transform:scaleX(1);transition:transform .2s ease,opacity .35s ease .15s}

/* ---- images fade in when loaded; shimmer placeholder while they load ---- */
html.js-img img[loading=lazy]:not(.ld){opacity:0}
img[loading=lazy]{transition:opacity .45s ease}
img.ld{opacity:1}
.shim,.skl i,.skl b{background:linear-gradient(100deg,var(--card,#1a3149) 30%,color-mix(in srgb,var(--card,#1a3149) 70%,var(--text,#fff) 12%) 50%,var(--card,#1a3149) 70%);background-size:220% 100%;animation:shim 1.3s linear infinite}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---- bottom dock (phones) ---- */
[data-i]{display:inline-flex;align-items:center;justify-content:center}
[data-i] svg{display:block}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;gap:4px;padding:8px max(10px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 8px) max(10px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--card,#1a3149) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid color-mix(in srgb,var(--gold,#c9a45c) 45%,var(--line,#2a4560));box-shadow:0 -10px 28px rgba(0,0,0,.28)}
.dock>a,.dock .dk>button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--muted,#a9b6c6);font-size:.72rem;font-weight:600;line-height:1.1;padding:4px 2px;border-radius:14px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dock>a [data-i],.dock .dk>button [data-i]{width:58px;height:32px;border-radius:16px;transition:background .2s,color .2s,transform .15s}
.dock>a svg,.dock .dk>button svg{width:22px;height:22px}
.dock>a:active [data-i],.dock .dk>button:active [data-i]{background:color-mix(in srgb,var(--gold,#c9a45c) 14%,transparent);transform:scale(.94)}
.dock>a[aria-current="true"],.dock>a[aria-current="page"]{color:var(--gt,#c9a45c);font-weight:800}
.dock>a[aria-current="true"] [data-i],.dock>a[aria-current="page"] [data-i]{background:color-mix(in srgb,var(--gold,#c9a45c) 24%,transparent)}
.dock>a[aria-current="true"] svg,.dock>a[aria-current="page"] svg{stroke-width:2.1}
@media(min-width:860px){.dock{display:none}}
@media(max-width:859.98px){
  body:has(>.dock){padding-bottom:calc(var(--stack,128px) + 8px)}
  body #jsc{bottom:calc(var(--stack,128px) + 10px)}
  body .totop{bottom:calc(var(--stack,128px) + 12px)}
  body .toast{bottom:calc(var(--stack,128px) + 12px)}
}
@media(max-height:420px) and (orientation:landscape){.dock{display:none}body:has(>.dock){padding-bottom:0}}

/* ---- retina: crisp hairlines ---- */
@media(min-resolution:2dppx){.hd,.ft-bar{border-bottom-width:.5px}.dock{border-top-width:.5px}}

/* ---- installed app (standalone) ---- */
@media(display-mode:standalone),(display-mode:fullscreen){
  html{overscroll-behavior-y:none}
  body{-webkit-touch-callout:none}
  a,img{-webkit-touch-callout:none}
  .pwa-i{display:none!important}
}

/* ---- install prompt + connection toast ---- */
.pwa-i{position:fixed;left:12px;right:12px;bottom:calc(var(--stack,128px) + 10px);z-index:80;max-width:460px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--card,#1a3149);color:var(--text,#fff);border:1px solid var(--gold,#c9a45c);border-radius:16px;padding:10px 12px 10px 14px;font:600 .86rem/1.35 system-ui,sans-serif;box-shadow:0 10px 36px rgba(0,0,0,.45);animation:pgin .3s ease both}
.pwa-i span{flex:1}
.pwa-i button{font:700 .82rem system-ui,sans-serif;border-radius:20px;padding:8px 14px;cursor:pointer;border:1.5px solid var(--gold,#c9a45c);background:none;color:inherit}
.pwa-i button.p{background:var(--gold,#c9a45c);color:#10202f}
@media(min-width:860px){.pwa-i{bottom:18px}}
.net-t{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translate(-50%,-140%);z-index:2147483001;background:#162b3f;color:#f3f5f8;border:1px solid var(--gold,#c9a45c);padding:8px 16px;border-radius:24px;font:600 .84rem system-ui,sans-serif;transition:transform .3s ease;pointer-events:none}
.net-t.on{transform:translate(-50%,0)}
.offl{text-align:center;padding:12vh 0}

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  main#main,.pwa-i{animation:none}
  .navbar.on{animation:none}
  img[loading=lazy],.dock>a [data-i],.dock .dk>button [data-i]{transition:none}
  .shim,.skl i,.skl b{animation:none}
}

/* phones: the bottom dock replaces the wrapped text menu in the header (Cart, Order now and the theme button stay) */
@media(max-width:859.98px){
  body:has(>.dock) .hd nav a:not(.buy):not([href="/cart/"]){display:none}
  body:has(>.dock) .hd .in{flex-wrap:nowrap;gap:10px}
  body:has(>.dock) .hd nav{flex-wrap:nowrap;align-items:center}
}

/* ---- shop: two product columns on phones ---- */
@media(max-width:600px){
  .pgrid,.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.g2 .card .bd,.pgrid .prod .bd,.pgrid .prod .pb{padding:10px}
  .grid.g2 .card h3,.pgrid .prod h3{font-size:.92rem;line-height:1.25;overflow-wrap:anywhere}
  .grid.g2 .card p,.pgrid .prod p{font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .grid.g2 .card .price,.pgrid .prod .price{font-size:.95rem}
  .grid.g2 .card .pill,.pgrid .prod .pill{font-size:.64rem;padding:2px 8px}
  .grid.g2 .card .btn,.pgrid .prod .btn{padding:8px 10px;font-size:.8rem;min-height:40px}
  .grid.g2 .card .meta{gap:4px}
}

/* ---- always-visible search bar above the dock (phones) ---- */
.sbar{display:none}
@media(max-width:859.98px){
  .sbar{display:block;position:fixed;left:0;right:0;bottom:var(--dockh,70px);z-index:36;padding:8px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--card,#1a3149) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line,#2a4560)}
  .sbar form{display:flex;align-items:center;gap:6px;background:var(--bg,#10202f);border:1.5px solid var(--line,#2a4560);border-radius:26px;padding:3px 4px 3px 12px;transition:border-color .2s,box-shadow .2s}
  .sbar form:focus-within{border-color:var(--gold,#c9a45c);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#c9a45c) 25%,transparent)}
  .sbar input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text,#fff);font:inherit;font-size:16px;padding:9px 2px;-webkit-appearance:none;appearance:none}
  .sbar input::-webkit-search-cancel-button{display:none}
  .sbar input::placeholder{color:var(--muted,#a9b6c6)}
  .sbar svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .sbar .si{color:var(--muted,#a9b6c6);display:grid;place-items:center}
  .sbar .sv{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:color-mix(in srgb,var(--gold,#c9a45c) 22%,transparent);color:var(--gt,#c9a45c);display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
  .sbar .sv[hidden]{display:none}
  .sbar .sv.on{background:var(--gold,#c9a45c);color:#10202f;animation:mic 1.1s ease-in-out infinite}
  .sbar .sp{position:absolute;left:10px;right:10px;bottom:calc(100% + 6px);max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain;background:var(--card,#1a3149);border:1px solid var(--gold,#c9a45c);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.45);padding:6px;display:none}
  .sbar.open .sp{display:block;animation:pgin .18s ease both}
  .sbar .sp h6{margin:0;padding:8px 10px 4px;font:700 .68rem system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a9b6c6)}
  .sbar .sp a{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:12px;text-decoration:none;color:var(--text,#fff);font-weight:600;font-size:.95rem;-webkit-tap-highlight-color:transparent}
  .sbar .sp a:active,.sbar .sp a.hi{background:color-mix(in srgb,var(--gold,#c9a45c) 20%,transparent)}
  .sbar .sp a b{font:700 .62rem system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--gt,#c9a45c);border:1px solid color-mix(in srgb,var(--gold,#c9a45c) 55%,transparent);border-radius:20px;padding:2px 8px;flex:none}
  .sbar .sp a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sbar .sp .none{padding:12px 10px;color:var(--muted,#a9b6c6);font-size:.9rem}
}
@keyframes mic{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold,#c9a45c) 55%,transparent)}50%{box-shadow:0 0 0 9px transparent}}
@media(max-height:420px) and (orientation:landscape){.sbar{display:none}}
@media(prefers-reduced-motion:reduce){.sbar .sv.on,.sbar.open .sp{animation:none}}

/* ---- float menus on the dock (Guide, Articles, Directory) ---- */
.dock .dk{flex:1;min-width:0;position:relative;display:flex}
.dock .dk>button{width:100%;border:0;background:none;font-family:inherit;cursor:pointer;color:var(--muted,#a9b6c6);font-size:.72rem;font-weight:600;line-height:1.1;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:14px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dock .dk>button[aria-current],.dock .dk.open>button{color:var(--gt,#c9a45c);font-weight:800}
.dock .dk>button[aria-current] [data-i],.dock .dk.open>button [data-i]{background:color-mix(in srgb,var(--gold,#c9a45c) 24%,transparent)}
.dock .fm{position:absolute;bottom:calc(100% + 16px + (var(--stack,128px) - var(--dockh,70px)));left:50%;transform:translateX(calc(-50% + var(--sx,0px))) translateY(8px) scale(.96);transform-origin:50% 100%;min-width:176px;background:var(--card,#1a3149);border:1px solid var(--gold,#c9a45c);border-radius:18px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s,visibility 0s .16s;z-index:60}
.dock .dk.open .fm{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(calc(-50% + var(--sx,0px))) translateY(0) scale(1);transition:opacity .16s,transform .16s}
.dock .fm a{display:block;flex:none;padding:13px 16px;border-radius:12px;font-size:.98rem;font-weight:700;color:var(--text,#fff);text-decoration:none;white-space:nowrap;text-align:left}
.dock .fm a:active{background:color-mix(in srgb,var(--gold,#c9a45c) 22%,transparent)}
.dock .fm a+a{border-top:1px solid color-mix(in srgb,var(--line,#2a4560) 70%,transparent)}
@media(prefers-reduced-motion:reduce){.dock .fm,.dock .dk.open .fm{transition:none}}

/* ---- phone header: slim glass app bar (all pages) ---- */
.hd nav a svg{display:none}
@media(max-width:859.98px){
  .hd{transition:transform .28s ease,box-shadow .25s,background .25s;background:color-mix(in srgb,var(--bg,#10202f) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid transparent}
  .hd.scrolled{border-bottom-color:var(--line,#2a4560);box-shadow:0 6px 24px rgba(0,0,0,.18)}
  .hd.hide{transform:translateY(-100%)}
  .hd .in{flex-wrap:nowrap;gap:10px;padding:8px max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));min-height:56px}
  .hd .logo{font-size:1.02rem;letter-spacing:.01em;gap:9px;min-width:0}
  .hd .logo img,.hd .logo .lgw{width:36px;height:36px}
  .hd nav{margin-left:auto;gap:8px;flex-wrap:nowrap;align-items:center}
  .hd nav a.hc,.hd nav a.buy,.hd .thm-btn{width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;position:relative;flex:none}
  .hd nav a.hc,.hd .thm-btn{background:color-mix(in srgb,var(--card,#1a3149) 80%,transparent);border:1px solid color-mix(in srgb,var(--gold,#c9a45c) 45%,var(--line,#2a4560));color:var(--text,#fff)}
  .hd nav a.buy{background:var(--gold,#c9a45c);color:#10202f;box-shadow:0 2px 10px color-mix(in srgb,var(--gold,#c9a45c) 40%,transparent)}
  .hd nav a svg{display:block;width:20px;height:20px}
  .hd nav a .nt{display:none}
  .hd nav a:active,.hd .thm-btn:active{transform:scale(.92)}
  .hd .cnt{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--gold,#c9a45c);color:#10202f;font:800 .66rem/18px system-ui,sans-serif;text-align:center;padding:0 4px;border:2px solid var(--bg,#10202f);box-sizing:content-box}
}

/* ---- phone header: home page overlay bar ---- */
@media(max-width:859.98px){
  .hdr{padding:calc(env(safe-area-inset-top,0px) + 8px) max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));transition:transform .28s ease,background .25s,box-shadow .25s;border-bottom:1px solid transparent}
  .hdr.scrolled{background:color-mix(in srgb,#0b1520 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom-color:#ffffff1f;box-shadow:0 6px 24px rgba(0,0,0,.3)}
  .hdr.hide{transform:translateY(-100%)}
  .hdr img{width:38px;height:38px}
  .hdr .hr{gap:8px}
  .hdr .iconbtn,.hdr .burger,.hdr .thm-btn{width:40px;height:40px;border-width:1px;background:#0b1520a8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .hdr .iconbtn svg,.hdr .thm-btn svg{width:20px;height:20px}
  .hdr .burger{gap:4px}.hdr .burger i{width:18px}
  .hdr .burger.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}.hdr .burger.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hdr .cnt{top:-4px;right:-4px;min-width:18px;height:18px;font-size:.66rem;line-height:18px;border-radius:9px}
}
@media(prefers-reduced-motion:reduce){.hd,.hdr{transition:none}}

/* ---- "Write wiki" floating button ---- */
.wfab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:34;display:flex;align-items:center;gap:0;height:56px;padding:0 20px 0 6px;border-radius:30px;background:linear-gradient(135deg,var(--gold,#c9a45c),#e8c97a);color:#10202f;text-decoration:none;font:800 .95rem/1 system-ui,sans-serif;letter-spacing:.01em;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,#fff 25%,transparent) inset;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .2s,box-shadow .2s,padding .25s,opacity .25s;animation:pgin .4s ease .25s both}
.wfab .wi{position:relative;width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:50%;background:#10202f14;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.wfab svg{width:22px;height:22px;grid-area:1/1;transition:transform .3s,opacity .2s}
.wfab .wx{opacity:0;transform:rotate(-90deg) scale(.6)}
.wfab .wl{max-width:140px;overflow:hidden;white-space:nowrap;margin-left:4px;transition:max-width .28s ease,opacity .2s,margin .28s}
.wfab:hover,.wfab:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.wfab:hover .wp,.wfab:focus-visible .wp{animation:wiggle .6s ease}
.wfab:active{transform:scale(.95)}
.wfab:active .wp{opacity:0;transform:rotate(90deg) scale(.6)}.wfab:active .wx{opacity:1;transform:none}
.wfab.mini{padding-right:6px}.wfab.mini .wl{max-width:0;opacity:0;margin-left:0}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
@media(max-width:859.98px){.wfab{bottom:calc(var(--stack,128px) + 14px);right:14px;height:52px}.wfab .wi{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.wfab,.wfab .wi,.wfab svg,.wfab .wl{transition:none;animation:none}.wfab:hover .wp{animation:none}}
@media(max-width:859.98px){.sbar .sv{padding:0;margin:0;line-height:0;min-width:40px}.sbar .sv svg{margin:0;position:static}}