/* 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}
html,body{max-width:100%;overflow-x:clip}
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,header.jh{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:var(--on-gold,#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 .in>nav a:not(.buy):not([href="/cart/"]){display:none}
  body:has(>.dock) .hd .in{flex-wrap:nowrap;gap:10px}
  body:has(>.dock) .hd .in>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:none;position:fixed;left:0;right:0;top:var(--sbtop,64px);z-index:60;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-bottom:1px solid var(--line,#2a4560);box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
  .sbar.show{display:block}
  .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:var(--on-gold,#10202f);animation:mic 1.1s ease-in-out infinite}
  .sbar .sp{position:absolute;left:10px;right:10px;top:calc(100% + 6px);max-height:min(60vh,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}}

@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}}

/* ---- language switcher ---- */
.lsw{position:relative;flex:none}
.lbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:20px;border:1px solid color-mix(in srgb,var(--gold,#c9a45c) 45%,var(--line,#2a4560));background:color-mix(in srgb,var(--card,#1a3149) 80%,transparent);color:var(--text,#fff);font:800 .78rem system-ui,sans-serif;letter-spacing:.04em;cursor:pointer}
.lbtn svg{width:18px;height:18px}
.lbtn:hover,.lsw.open .lbtn{border-color:var(--gold,#c9a45c)}
.lmenu{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;max-height:70vh;overflow:auto;background:var(--card,#1a3149);border:1px solid var(--gold,#c9a45c);border-radius:16px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:30}
.lsw.open .lmenu{opacity:1;visibility:visible;transform:none}
.lmenu button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--text,#fff);font:600 .95rem system-ui,sans-serif;padding:10px 14px;border-radius:10px;cursor:pointer}
.lmenu button:hover{background:color-mix(in srgb,var(--gold,#c9a45c) 20%,transparent)}
.lmenu button.on,.mlang button.on{color:var(--gt,#c9a45c);font-weight:800}
.mlh{display:none}
@media(max-width:859.98px){
  .hd .lsw{display:none}
  body .mlh{display:block;margin:26px 0 10px;font:800 .78rem system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#a9b6c6)}
  body .mlang{display:flex;flex-wrap:wrap;gap:10px}
  body .mlang button{border:1.5px solid var(--line,#2a4560);background:var(--card,#1a3149);color:var(--text,#fff);border-radius:30px;padding:12px 20px;font:800 1.1rem system-ui,sans-serif;cursor:pointer}
  body .mlang button.on{border-color:var(--gold,#c9a45c)}
}
@media(min-width:860px){.mlang,.mlh{display:none}}
/* hide Google's own toolbar and keep the page layout intact */
.goog-te-banner-frame,.goog-te-balloon-frame,#goog-gt-tt,.goog-tooltip,iframe.skiptranslate{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
#gte{position:absolute;left:-9999px;top:0;height:0;overflow:hidden}

/* ---- wide header search (desktop only; phones use the bottom search bar) ---- */
.hsearch{display:none}
@media(min-width:860px){
  .hsearch{display:flex;position:relative;align-items:center;gap:6px;flex:1 1 280px;min-width:200px;max-width:760px;margin:0 auto;background:color-mix(in srgb,var(--card,#1a3149) 88%,transparent);border:1.5px solid var(--line,#2a4560);border-radius:28px;padding:2px 5px 2px 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,box-shadow .2s}
  .hsearch:focus-within{border-color:var(--gold,#c9a45c);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#c9a45c) 25%,transparent)}
  .hsearch input[type=search]{flex:1;min-width:0;width:auto;height:auto;margin:0;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0;background:none!important;color:var(--text,#fff);font:inherit;font-size:.98rem;line-height:1.3;padding:10px 4px;-webkit-appearance:none;appearance:none;text-transform:none}
  .hsearch input::-webkit-search-cancel-button{display:none}
  .hsearch input::placeholder{color:var(--muted,#a9b6c6);text-transform:none}
  .hsearch svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .hsearch .hs-i{color:var(--muted,#a9b6c6);display:grid;place-items:center}
  .hsearch .hs-v{flex:none;width:36px;height:36px;border-radius:50%;border:0;padding:0;background:color-mix(in srgb,var(--gold,#c9a45c) 22%,transparent);color:var(--gt,#c9a45c);display:grid;place-items:center;cursor:pointer}
  .hsearch .hs-v[hidden]{display:none}.hsearch .hs-v:hover{background:color-mix(in srgb,var(--gold,#c9a45c) 38%,transparent)}
  .hsearch .hs-v.on{background:var(--gold,#c9a45c);color:var(--on-gold,#10202f);animation:mic 1.1s ease-in-out infinite}
  .hs-p{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain;background:var(--card,#1a3149);border:1px solid var(--gold,#c9a45c);border-radius:18px;box-shadow:0 18px 44px #0009;padding:6px;z-index:60;text-align:left}
  .hsearch.open .hs-p{display:block;animation:pgin .16s ease both}
  .hs-p h6{margin:0;padding:8px 12px 4px;font:700 .68rem system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a9b6c6)}
  .hs-p a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--text,#fff);font-weight:600;font-size:.95rem}
  .hs-p a:hover,.hs-p a.hi{background:color-mix(in srgb,var(--gold,#c9a45c) 18%,transparent)}
  .hs-p 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;min-width:52px;text-align:center}
  .hs-p a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hs-p .hs-all{margin-top:4px;border-top:1px solid var(--line,#2a4560);border-radius:0 0 12px 12px;color:var(--gt,#c9a45c)}
  .hs-p .none{padding:12px;color:var(--muted,#a9b6c6);font-size:.9rem}
  /* home header (transparent, fixed): the box fills the space between the logo and the buttons */
  .hdr .hsearch{margin:0 18px;max-width:none;flex:1 1 auto;background:#0b1520a8;border-color:#ffffff33}
  .hdr .hsearch input[type=search]{color:#fff}.hdr .hsearch input::placeholder{color:#c3cfdc}
  .hdr .hs-p{background:#0f1d2c;color:#fff}.hdr .hs-p a{color:#fff}.hdr .hs-p h6,.hdr .hs-p .none{color:#a9b6c6}
  /* inner pages: the menu already fills the bar, so the wide box takes its own full-width row under it */
  .hd .in,body:has(>.dock) .hd .in{flex-wrap:wrap;row-gap:0}
  .hd .hsearch{order:10;flex:1 1 100%;max-width:none;margin:2px 0 4px}
  .hd .hsearch input[type=search]{padding:8px 4px}
}
@media(prefers-reduced-motion:reduce){.hsearch .hs-v.on,.hsearch.open .hs-p{animation:none}}

/* big "Search anything" bar with a recommendations panel (desktop) */
@media(min-width:860px){
  .hdr .hsearch{min-height:60px;border-radius:32px;padding:3px 8px 3px 20px}
  .hdr .hsearch input[type=search]{font-size:1.15rem;font-weight:600;padding:16px 6px}
  .hsearch input::placeholder{text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--gt,#c9a45c);opacity:1}
  .hdr .hsearch .hs-v{width:46px;height:46px}.hdr .hsearch svg{width:24px;height:24px}
  .hs-p{padding:10px 10px 12px;max-height:min(78vh,640px);border-radius:22px}
  .hs-p .hs-t{margin:2px 0 4px;padding:6px 12px;font:800 1rem system-ui,sans-serif;color:var(--text,#fff)}
  .hs-p a{padding:12px 14px;font-size:1.02rem}
}

.hdr .hs-p .hs-t{color:#fff}
/* header search button (phones): the search bar opens from here instead of covering the page */
#sbtn{display:none}
@media(max-width:859.98px){#sbtn{display:grid}#sbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}}
html body .sbar input[type=search]{border:0;box-shadow:none;background:none;border-radius:0;height:auto;outline:0}

/* v223: six dock items fit small phones; cart count on Shop; lite mode */
.dock>a [data-i],.dock .dk>button [data-i]{position:relative;width:min(58px,100%)}
.dock>a,.dock .dk>button{font-size:.7rem}
.dock .dk-n{position:absolute;top:-2px;right:calc(50% - 22px);min-width:17px;height:17px;border-radius:9px;padding:0 4px;background:var(--gold,#c9a45c);color:#10202f;font:800 .64rem/17px system-ui,sans-serif;text-align:center;font-style:normal}
@media(max-width:380px){.dock{gap:2px}.dock>a,.dock .dk>button{font-size:.66rem}}
html.lite{scroll-behavior:auto}
html.lite *,html.lite *:before,html.lite *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html.lite .dock,html.lite .hd,html.lite .jh,html.lite .sbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* v228 (phones): show the brand name beside the logo, and keep the bottom dock + its float menus in front of every floating button.
   The floating buttons (Help, share, Write wiki, back-to-top) drop to layer 30, the dock sits at 38 (still under the full-screen menu at 40 and the cart drawer at 65). */
html body .hlpb,html body .sfab,html body .wfab,html body .totop{z-index:30}
html body .dock{z-index:38}
@media(max-width:859.98px){
  html body .hlogo{display:flex;align-items:center;width:auto;min-width:46px;padding-left:54px;white-space:nowrap}
  html body .hlogo::after{content:"Davao\A Corporate";white-space:pre;font:800 .72rem/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;text-align:left;color:var(--text,#14263a);background:var(--card,#fff);border:1px solid var(--line,#d8d0bf);border-radius:14px;padding:5px 11px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
}
/* wider phones: one line, "Davao Corporate" */
@media(min-width:400px) and (max-width:859.98px){html body .hlogo::after{content:"Davao Corporate";white-space:nowrap;font-size:.84rem;line-height:1;border-radius:99px;padding:9px 14px}}

/* v228: header logo – the primary logo (logo.png) shows first; hover / keyboard focus / press swaps to the gold version (brand-gold.png). */
html body .hlogo .ln{opacity:1}
html body .hlogo .lg{opacity:0}
html body .hlogo:active .ln{opacity:0}html body .hlogo:active .lg{opacity:1}
@media(hover:hover){html body .hlogo:hover .ln,html body .hlogo:focus-visible .ln{opacity:0}html body .hlogo:hover .lg,html body .hlogo:focus-visible .lg{opacity:1}}

/* v228: the primary logo (white_js, brand-primary.png) is the one shown first; also applied by CSS in case the header block was customised in the admin. */
html body .hlogo .ln{content:url(/dc-content/themes/davao-corporate/assets/brand-primary.png)}

/* ---- v234: dock "More" button (opens the menu drawer), seven items on small phones, long float menus scroll ---- */
.dock>.dkm{flex:1;min-width:0;border:0;background:none;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted,#a9b6c6);font-size:.7rem;font-weight:600;line-height:1.1;padding:4px 2px;border-radius:14px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dock>.dkm [data-i]{position:relative;width:min(58px,100%);height:32px;border-radius:16px;transition:background .2s,transform .15s}
.dock>.dkm svg{width:22px;height:22px;fill:currentColor;stroke:none}
.dock>.dkm:active [data-i],.dock>.dkm[aria-expanded="true"] [data-i]{background:color-mix(in srgb,var(--gold,#c9a45c) 20%,transparent)}
.dock>.dkm:active [data-i]{transform:scale(.94)}
.dock .fm{max-height:min(62vh,430px);overflow-y:auto;overscroll-behavior:contain}
.dock .fm a{padding:11px 16px}
@media(max-width:400px){.dock{gap:1px;padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}.dock>a,.dock .dk>button,.dock>.dkm{font-size:.62rem;letter-spacing:-.01em}}