/* =====================================================================
   mmoshenqi — brand + site shell (W1, 10/2026). Load AFTER style.css and theme.css.
   Owns: design tokens, mark/wordmark, header (sky header, search, language, theme switch,
   account menu), footer, mobile bottom nav, support button, toasts, category icon tiles.
   Page bodies (index/shop/product/checkout/auth/user) live in their own templates.
   Docs: scratchpad/staging/FOUNDATION_NOTES.md
   ===================================================================== */

/* ---------------- Fonts: self-hosted Inter (variable, wght 400–800; Google Fonts is blocked/slow in mainland China) ----------------
   Latin is preloaded in base.html; latin-ext / cyrillic subsets download only when a page uses those glyphs (unicode-range). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/Inter-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/Inter-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/Inter-var-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("../fonts/Inter-var-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* ---------------- Tokens ---------------- */
:root {
    --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    --shell-w: 1240px;          /* header / main / footer max width (incl. gutters) */
    --shell-pad: 24px;          /* side gutter: 24px desktop, 16px phone */
    --hdr-h: 64px;              /* header height: 64px desktop, 56px phone */
    --r-ctl: 10px; --r-card: 16px; --r-chip: 999px;
    --brand-1: #2f6bff; --brand-2: #3b5bff;
    --brand-grad: linear-gradient(135deg, #2f6bff 0%, #3b5bff 100%);      /* buttons / interactive = BLUE */
    --warm-grad: linear-gradient(135deg, #f9a23b 0%, #f36a42 55%, #f04f7b 100%); /* brand mark + 神器 seal only */

    /* W1 surface tokens — dark (default) */
    --bg: #07090f;
    --surface: #0d1118; --surface-2: #121824; --surface-3: #1a2130;
    --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .11);
    --text: #eef2fb; --text-2: #a7b0c4; --text-3: #7d879c;
    --brand: #5b86ff; --brand-ink: #93b2ff; --brand-soft: rgba(91, 134, 255, .14); --brand-ring: rgba(120, 150, 255, .38);
    --price: #9db8ff;
    --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .12);
    --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12);
    --bad: #f87171; --bad-soft: rgba(248, 113, 113, .12);
    --card-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 18px 40px -28px rgba(0, 0, 0, .9);
    --hover-shadow: 0 0 0 1px rgba(120, 150, 255, .35), 0 18px 40px -22px rgba(30, 50, 140, .75);
    --menu-shadow: 0 22px 48px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04);
    --wm-a: #ffffff; --wm-b: linear-gradient(90deg, #ffb36a 0%, #ff7ea2 100%);
    --focus: #8fb0ff;
    --hdr-solid: #0a1230;       /* solid colour of the header band (search overlay, theme-color) */
    --bnav-bg: rgba(10, 13, 20, .92);
}
html[data-theme="light"] {
    --bg: #f3f6fc;
    --surface: #ffffff; --surface-2: #f6f8fc; --surface-3: #eef2f8;
    --line: rgba(15, 23, 42, .08); --line-2: rgba(15, 23, 42, .12);
    --text: #0b1220; --text-2: #4a5568; --text-3: #5f6b7f;
    --brand: #2f5bff; --brand-ink: #2449e6; --brand-soft: rgba(47, 91, 255, .08); --brand-ring: rgba(47, 91, 255, .30);
    --price: #2449e6;
    --ok: #15803d; --ok-soft: rgba(22, 163, 74, .10);
    --warn: #b45309; --warn-soft: rgba(217, 119, 6, .10);
    --bad: #dc2626; --bad-soft: rgba(220, 38, 38, .08);
    --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -20px rgba(15, 23, 42, .22);
    --hover-shadow: 0 0 0 1px rgba(47, 91, 255, .28), 0 16px 36px -20px rgba(20, 40, 120, .35);
    --menu-shadow: 0 22px 44px -18px rgba(15, 23, 42, .32), 0 0 0 1px rgba(15, 23, 42, .06);
    --wm-a: #0b1220; --wm-b: linear-gradient(90deg, #ee6a2c 0%, #e2436f 100%);
    --focus: #2f5bff;
    --hdr-solid: #1f7bff;
    --bnav-bg: rgba(255, 255, 255, .9);
}
@media (max-width: 767px) {
    :root { --shell-pad: 16px; --hdr-h: 56px; }
}

/* ---------------- Base ---------------- */
body { font-family: var(--font-sans); background-color: var(--bg); }
input, button, select, textarea { font-family: inherit; }
.skip-link {
    position: absolute; left: 12px; top: -64px; z-index: 13000; padding: 10px 14px; border-radius: 10px;
    background: var(--brand-grad); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 10px; color: #fff; outline: 2px solid #fff; outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: 0 0 auto; }

/* Shell width: header, main and footer share one container */
.navbar > .navbar-inner,
.site-footer > .container,
main.main-content {
    max-width: var(--shell-w); margin-left: auto; margin-right: auto;
    padding-left: var(--shell-pad); padding-right: var(--shell-pad);
}
main.main-content { padding-top: 20px; padding-bottom: 8px; min-height: calc(100vh - 260px); }
@media (max-width: 767px) { main.main-content { padding-top: 12px; } }

/* ---------------- Mark + wordmark + seal ---------------- */
.mk { display: block; flex: 0 0 auto; overflow: visible; }
.wm {
    display: inline-flex; align-items: baseline; font-family: "Inter", var(--font-sans); font-weight: 800;
    letter-spacing: -.035em; line-height: 1; white-space: nowrap; color: var(--wm-a);
}
.wm b { font-weight: 800; }
.wm i {
    font-style: normal; font-weight: 500; padding-right: .04em;
    background: var(--wm-b); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
:is(h1, h2, h3) .wm { font-weight: inherit; color: inherit; letter-spacing: inherit; font-family: inherit; }
:is(h1, h2, h3) .wm i { font-weight: inherit; }
.seal {
    display: inline-grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 6px;
    font: 700 11px/1 var(--font-cjk); letter-spacing: .06em; color: #fff; background: var(--warm-grad);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap;
}
/* Lockup (header, footer, auth cards) */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; border-radius: 12px; color: inherit; font-size: inherit; }
.brand:hover { opacity: 1; color: inherit; }
.brand .mk { width: 38px; height: 38px; filter: drop-shadow(0 3px 8px rgba(2, 6, 23, .45)); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover .mk { transform: rotate(-5deg) scale(1.05); }
.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.brand .wm { font-size: 21px; }
html[data-theme="light"] .brand .mk { filter: drop-shadow(0 4px 10px rgba(150, 40, 20, .24)); }
@media (prefers-reduced-motion: reduce) { .brand .mk { transition: none; } .brand:hover .mk { transform: none; } }

/* ====================== HEADER ====================== */
.navbar {
    position: sticky; top: 0; z-index: 1000; height: var(--hdr-h); padding: 0; margin: 0; color: #fff;
    background: var(--hdr-solid); border-bottom: 1px solid rgba(255, 255, 255, .07); box-shadow: none;
    isolation: isolate; overflow: visible;
    /* glass controls on the sky — dark: white glass; light: DARK-tinted glass so white text stays ≥4.5:1 */
    --hglass: rgba(255, 255, 255, .06); --hglass-hover: rgba(255, 255, 255, .11);
    --hglass-line: rgba(255, 255, 255, .12); --hglass-text: rgba(226, 232, 255, .82);
    --seg-on: rgba(255, 255, 255, .15); --seg-on-text: #fff; --seg-on-ring: rgba(255, 255, 255, .10);
}
body.is-imp .navbar { top: 40px; }
html[data-theme="light"] .navbar {
    border-bottom-color: rgba(10, 60, 150, .14); box-shadow: 0 6px 22px -16px rgba(14, 64, 140, .6);
    --hglass: rgba(8, 30, 92, .38); --hglass-hover: rgba(8, 30, 92, .5);
    --hglass-line: rgba(255, 255, 255, .26); --hglass-text: #ffffff;
    --seg-on: #ffffff; --seg-on-text: #1d4ed8; --seg-on-ring: rgba(10, 50, 140, .10);
}
.navbar > .navbar-inner {
    position: relative; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
    gap: 14px; height: 100%; padding-top: 0; padding-bottom: 0;
}
.navbar a, .navbar a:hover { color: inherit; }
.navbar .brand .wm { color: #fff; }
html[data-theme="light"] .navbar .brand .wm { color: #fff; text-shadow: 0 1px 0 rgba(6, 40, 120, .42), 0 1px 3px rgba(6, 40, 120, .30); }
html[data-theme="light"] .navbar .brand .wm i { background: none; color: #fff; -webkit-text-fill-color: #fff; }
html[data-theme="light"] .navbar .brand .mk { filter: drop-shadow(0 3px 8px rgba(8, 40, 110, .38)); }

/* Search (inline ≥1024px; icon + overlay below) */
.hsearch { position: relative; flex: 1 1 auto; min-width: 0; max-width: 440px; margin: 0 0 0 22px; display: flex; align-items: center; }
.hsearch .hs-ic { position: absolute; z-index: 1; left: 14px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: rgba(226, 232, 255, .62); pointer-events: none; }
.navbar .hsearch .search-input {
    width: 100%; height: 40px; padding: 0 42px 0 40px; margin: 0; border-radius: 12px; font-size: 14px; line-height: 40px;
    border: 1px solid rgba(255, 255, 255, .12); background: #121a3b; color: #fff; box-shadow: none; outline: none;
    -webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.navbar .hsearch .search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.navbar .hsearch .search-input::placeholder { color: rgba(226, 232, 255, .6); opacity: 1; }
.navbar .hsearch .search-input:focus { background: #16204a; border-color: rgba(140, 165, 255, .6); box-shadow: 0 0 0 3px rgba(91, 134, 255, .22); }
.hsearch kbd {
    position: absolute; z-index: 1; right: 9px; top: 50%; transform: translateY(-50%); min-width: 22px; height: 22px;
    display: grid; place-items: center; border-radius: 6px; font: 600 11px/1 var(--font-sans);
    color: rgba(226, 232, 255, .62); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); pointer-events: none;
}
html[data-theme="light"] .navbar .hsearch .search-input { background: #fff; border-color: transparent; color: #0b1220; box-shadow: 0 4px 14px -8px rgba(10, 50, 140, .55); }
html[data-theme="light"] .navbar .hsearch .search-input::placeholder { color: #5f6b7f; }
html[data-theme="light"] .navbar .hsearch .search-input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 4px 14px -8px rgba(10, 50, 140, .55); }
html[data-theme="light"] .hsearch .hs-ic { color: #5f6b7f; }
html[data-theme="light"] .hsearch kbd { color: #5f6b7f; border-color: rgba(15, 23, 42, .12); background: #f3f6fc; }
.hsearch .hs-close { display: none; }

/* Right-hand controls */
.hctl { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; min-width: 0; }
.hctl > * { flex: 0 0 auto; }
.hicon {
    width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; border-radius: 11px;
    border: 1px solid var(--hglass-line); background: var(--hglass); color: #fff; cursor: pointer; text-decoration: none;
    -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
}
.hicon:hover { background: var(--hglass-hover); color: #fff; }
.hicon .ico { width: 18px; height: 18px; }
.hsearch-btn { display: none; }   /* DOM order = visual order: … | language | theme | search | account */
.navbar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Language — desktop segmented control [globe EN · 中文 · RU] */
.lang-seg {
    display: flex; align-items: center; height: 36px; padding: 3px; border-radius: 11px;
    background: var(--hglass); border: 1px solid var(--hglass-line);
    -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.lang-seg .globe { width: 26px; display: grid; place-items: center; color: var(--hglass-text); opacity: .85; }
.lang-seg .globe .ico { width: 15px; height: 15px; }
.lang-seg a {
    height: 28px; min-width: 38px; padding: 0 9px; display: grid; place-items: center; border-radius: 8px;
    font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
    color: var(--hglass-text); transition: background .2s ease, color .2s ease;
}
.lang-seg a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.lang-seg a[lang="zh-CN"] { font-family: var(--font-cjk); letter-spacing: .02em; }
.navbar .lang-seg a.active, .navbar .lang-seg a.active:hover { background: var(--seg-on); color: var(--seg-on-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--seg-on-ring); }
html[data-theme="light"] .lang-seg a:hover { background: rgba(255, 255, 255, .16); }

/* Language — phone dropdown (globe + code) */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::marker { content: ""; }
.lang-dd { display: none; }
.lang-dd > summary {
    display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px; border-radius: 11px;
    border: 1px solid var(--hglass-line); background: var(--hglass); color: #fff; font-size: 13px; font-weight: 600; line-height: 1;
    -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.lang-dd > summary .ico { width: 17px; height: 17px; }
.lang-dd > summary .chev { width: 13px; height: 13px; opacity: .8; transition: transform .2s ease; }
.lang-dd[open] > summary .chev { transform: rotate(180deg); }
.lang-dd .lang-code[lang="zh-CN"] { font-family: var(--font-cjk); }

/* Shared dropdown panel (language, account, support) */
.dd-menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 1100; min-width: 220px; padding: 6px;
    border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--menu-shadow);
    color: var(--text); text-align: left; transform-origin: top right;
}
.dd[open] > .dd-menu { animation: dd-in .16s ease-out; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd[open] > .dd-menu { animation: none; } }
.dd-cap { margin: 0; padding: 8px 10px 6px; font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.dd-item {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px;
    color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.25; text-decoration: none; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.navbar .dd-item, .navbar .dd-item:hover { color: var(--text); }
.dd-item:hover, .dd-item:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.dd-item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.dd-item > i, .dd-item > .fa-solid, .dd-item > .fa-brands { width: 18px; text-align: center; font-size: 14px; color: var(--text-3); }
.dd-item .tail { margin-left: auto; padding-left: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dd-item .code { width: 26px; font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; }
.dd-item[aria-checked="true"] { background: var(--brand-soft); font-weight: 600; }
.dd-item[aria-checked="true"] .code { color: var(--brand-ink); }
.dd-item .ico-check { margin-left: auto; width: 16px; height: 16px; color: var(--brand-ink); }
.dd-item:not([aria-checked="true"]) .ico-check { visibility: hidden; }
.dd-item.danger, .navbar .dd-item.danger { color: var(--bad); }
.dd-item.danger > i { color: var(--bad); }
.dd-item.danger:hover { background: var(--bad-soft); color: var(--bad); }
.dd-sep { height: 1px; margin: 6px 4px; background: var(--line); border: 0; }
.lang-menu { min-width: 214px; }
.lang-menu .dd-item[lang="zh-CN"] { font-family: var(--font-cjk); }

/* Guest buttons */
.nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hbtn {
    height: 36px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 11px; border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer; transition: background .2s ease, box-shadow .2s ease, filter .2s ease, transform .15s ease;
}
.hbtn:active { transform: translateY(1px); }
.navbar .hbtn-ghost, .navbar .hbtn-ghost:hover { color: #fff; }
.hbtn-ghost { background: var(--hglass); border-color: var(--hglass-line); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
.hbtn-ghost:hover { background: var(--hglass-hover); }
.navbar .hbtn-solid, .navbar .hbtn-solid:hover { color: #fff; }
.hbtn-solid { background: var(--brand-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -10px rgba(60, 90, 255, .95); }
.hbtn-solid:hover { filter: brightness(1.08); }
html[data-theme="light"] .navbar .hbtn-solid, html[data-theme="light"] .navbar .hbtn-solid:hover { background: #fff; color: #1d4ed8; box-shadow: 0 6px 16px -8px rgba(10, 50, 140, .6); }
html[data-theme="light"] .navbar .hbtn-solid:hover { filter: none; background: #f2f6ff; }

/* Logged-in: wallet chip + account dropdown */
.nav-wallet {
    height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 11px;
    font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none;
    color: #fff; background: var(--brand-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px -12px rgba(60, 90, 255, .95);
    transition: filter .2s ease;
}
.navbar .nav-wallet, .navbar .nav-wallet:hover { color: #fff; }
.nav-wallet:hover { filter: brightness(1.08); }
.nav-wallet i { font-size: 13px; opacity: .9; }
html[data-theme="light"] .navbar .nav-wallet, html[data-theme="light"] .navbar .nav-wallet:hover { background: #fff; color: #1d4ed8; box-shadow: 0 6px 16px -8px rgba(10, 50, 140, .6); }
.hdr-acct > summary.user-btn { gap: 8px; padding: 0 10px 0 4px; }
.hdr-av {
    width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px;
    font-size: 13px; font-weight: 700; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .14);
}
html[data-theme="light"] .navbar summary .hdr-av { background: #fff; color: #1d4ed8; }
.navbar .user-name { max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; }
.hdr-acct > summary .chev { width: 14px; height: 14px; opacity: .8; transition: transform .2s ease; }
.hdr-acct[open] > summary .chev { transform: rotate(180deg); }
.hdr-acct-menu { min-width: 250px; }
.hdr-acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.hdr-acct-head .hdr-av { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; background: var(--brand-grad); }
.hdr-acct-head b { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text); }
.hdr-acct-head small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }
.hdr-acct-head small strong { color: var(--price); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Responsive header */
@media (max-width: 1100px) { .hsearch { margin-left: 8px; } }
@media (max-width: 1023px) {
    .hsearch { display: none; }
    .hsearch-btn { display: inline-grid; }
    .navbar .user-name { max-width: 90px; }
    /* search overlay (opened by .hsearch-btn, theme.js) */
    .navbar.is-search .hsearch {
        display: flex; position: absolute; z-index: 6; inset: 0; max-width: none; margin: 0; gap: 8px;
        padding: 0 var(--shell-pad); background: var(--hdr-solid);
    }
    .navbar.is-search .hsearch .hs-ic { left: calc(var(--shell-pad) + 13px); }
    .navbar.is-search .hsearch kbd { display: none; }
    .navbar.is-search .hsearch .search-input { flex: 1 1 auto; padding-right: 14px; }
    .navbar.is-search .hsearch .hs-close { display: inline-grid; }
}
@media (max-width: 900px) {
    .lang-seg .globe { display: none; }
    .navbar .user-name { display: none; }
    .hdr-acct > summary.user-btn { padding: 0 8px 0 4px; }
}
@media (max-width: 767px) {
    .navbar > .navbar-inner { gap: 8px; }
    .brand { gap: 8px; }
    .navbar .brand .mk { width: 32px; height: 32px; }
    .navbar .brand .wm { font-size: 19px; }
    .hctl { gap: 8px; }
    .lang-seg { display: none; }
    .lang-dd { display: block; }
    .nav-actions { display: none; }
    .hicon, .lang-dd > summary { height: 34px; }
    .hicon { width: 34px; }
    .lang-dd { position: static; }      /* menu anchors to the header row, aligned to the right gutter */
    .lang-dd > .lang-menu { right: var(--shell-pad); top: calc(100% + 6px); }
    .navbar .hsearch .search-input { font-size: 16px; height: 40px; }   /* iOS: no zoom on focus */
}
@media (max-width: 369px) {
    .navbar > .navbar-inner { gap: 6px; }
    .navbar .brand .wm { font-size: 18px; }
    .hctl { gap: 6px; }
    .lang-dd > summary { padding: 0 9px 0 8px; }
    .lang-dd > summary .chev { display: none; }
}
@media (max-width: 339px) {
    .navbar .brand .wm { font-size: 17px; }
    .navbar .brand .mk { width: 30px; height: 30px; }
    .lang-dd > summary { width: 34px; padding: 0; justify-content: center; }
    .lang-dd > summary .lang-code { display: none; }
}
/* Pages may hide the header search (e.g. a page with its own search): <body class="no-hsearch"> */
body.no-hsearch .navbar .hsearch, body.no-hsearch .navbar .hsearch-btn { display: none !important; }

/* ====================== FOOTER ====================== */
.site-footer { margin-top: 32px; border-top: 1px solid var(--line); background: transparent; color: var(--text-2); }
.site-footer > .container { padding-top: 22px; padding-bottom: 26px; }
.ft-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.site-footer .brand .mk { width: 30px; height: 30px; filter: none; }
.site-footer .brand .wm { font-size: 17px; color: var(--wm-a); }
.ft-copy { margin: 0; font-size: 12.5px; color: var(--text-3); }
.ft-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; }
.ft-links a { color: var(--text-2); text-decoration: none; white-space: nowrap; }
.ft-links a:hover { color: var(--text); }
.ft-links a i { margin-right: 5px; font-size: 12px; color: var(--text-3); }
@media (max-width: 1023px) {
    .ft-row { justify-content: flex-start; }
    .ft-copy { order: 3; flex-basis: 100%; }
}
@media (max-width: 767px) {
    .site-footer { margin-top: 24px; }
    .site-footer > .container { padding-top: 18px; padding-bottom: 20px; }
    .ft-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ft-links { gap: 8px 16px; }
}

/* ====================== MOBILE BOTTOM NAV ====================== */
.mobile-bottom-nav { display: none; }
@media (max-width: 767px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .mobile-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: block; padding: 0 4px env(safe-area-inset-bottom);
        background: var(--bnav-bg); border-top: 1px solid var(--line);
        -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    }
    html[data-theme="light"] .mobile-bottom-nav { box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, .25); }
    .mobile-nav-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 64px; margin: 0; padding: 0; list-style: none; }
    .mobile-nav-item { min-width: 0; }
    .mobile-nav-link {
        height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: var(--text-3); font-size: 11.5px; font-weight: 600; line-height: 1.15; text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-link .bn-ic { width: 46px; height: 28px; display: grid; place-items: center; border-radius: 999px; transition: background .2s ease, color .2s ease; }
    .mobile-nav-link .bn-ic i { font-size: 19px; }
    .mobile-nav-link .bn-tx { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-nav-link:hover { color: var(--text); }
    .mobile-nav-link.active { color: var(--brand-ink); }
    .mobile-nav-link.active .bn-ic { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-ring); }
    .mobile-nav-link:focus-visible { outline: none; }
    .mobile-nav-link:focus-visible .bn-ic { box-shadow: 0 0 0 2px var(--focus); }
}

/* ====================== SUPPORT BUTTON (desktop) ====================== */
.support-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1200; }
.support-fab > summary {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
    color: #fff; background: var(--brand-grad); font-size: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -12px rgba(30, 60, 200, .85), 0 0 0 1px rgba(255, 255, 255, .06);
    transition: transform .2s ease, filter .2s ease;
}
.support-fab > summary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.support-fab > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.support-fab .fab-close { display: none; font-size: 18px; }
.support-fab[open] .fab-open { display: none; }
.support-fab[open] .fab-close { display: block; }
.support-fab .dd-menu { top: auto; bottom: calc(100% + 12px); right: 0; min-width: 268px; transform-origin: bottom right; }
.support-fab .dd-item { min-height: 54px; }
.support-fab .dd-item b { display: block; font-size: 14px; font-weight: 600; }
.support-fab .dd-item small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.support-fab .dd-item .cat-ic { --ic-size: 32px; }
@media (min-width: 768px) and (max-width: 1319px) {
    .support-fab { right: 12px; bottom: 12px; }
    .support-fab > summary { width: 44px; height: 44px; font-size: 20px; }
    /* pages with right-aligned grids / table actions reserve a lane for it */
    body:is(.page-home, .page-shop, .page-account, .page-product, .page-affiliate) main.main-content { padding-right: calc(var(--shell-pad) + 40px); }
}
@media (max-width: 767px) { .support-fab { display: none; } }

/* ====================== TOASTS (unchanged look) ====================== */
.toast-container { position: fixed; bottom: 84px; right: 2rem; z-index: 9999; display: flex; flex-direction: column; gap: 1rem; pointer-events: none; }
.toast {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--glass-bg-light);
    border: 1px solid var(--border); box-shadow: var(--shadow-xl); animation: slideInUp 0.4s ease-out; pointer-events: auto;
    min-width: 300px; max-width: 400px; transition: all 0.3s ease;
}
.toast.hiding { opacity: 0; transform: translateX(100%); }
.toast-icon { font-size: 1.25rem; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon, .toast-danger .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--primary); }
.toast-message { flex: 1; font-size: 0.95rem; font-weight: 500; color: var(--text-main); }
.toast-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; opacity: 0.5; transition: var(--transition-fast); color: var(--text-muted); padding: 0; line-height: 1; }
.toast-close:hover { opacity: 1; color: var(--text-main); }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 767px) {
    .toast-container { bottom: calc(64px + 1rem + env(safe-area-inset-bottom)); right: 1rem; left: 1rem; }
    .toast { min-width: auto; width: 100%; }
}
html[data-theme="light"] .toast { background: #ffffff; border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.22), 0 4px 10px -6px rgba(15, 23, 42, 0.10); }
html[data-theme="light"] .toast-close { opacity: 1; color: #64748b; }
html[data-theme="light"] .toast-close:hover { color: #0f172a; }
html[data-theme="light"] .toast-success { border-left: 3px solid #059669; }
html[data-theme="light"] .toast-error, html[data-theme="light"] .toast-danger { border-left: 3px solid #dc2626; }
html[data-theme="light"] .toast-warning { border-left: 3px solid #d97706; }
html[data-theme="light"] .toast-info { border-left: 3px solid #2563eb; }

/* Legacy: base.html used to shrink every .btn ≤480px — kept so page layouts do not shift */
@media (max-width: 480px) { .btn { padding: 0.5rem 0.75rem; font-size: 0.85rem; } }

/* ====================== CATEGORY / UI ICON TILES ======================
   <span class="cat-ic" data-cat="ai-chatgpt"><i class="fa-solid fa-robot"></i></span>  (macro: partials/icons.html cat_icon)
   Size via --ic-size (default 28px). Unknown slug -> data-cat="default" (neutral). */
.cat-ic {
    --ic-size: 28px; --ic-fg: #a9b4cc; --ic-bg: rgba(148, 163, 184, .14); --ic-ring: rgba(148, 163, 184, .22);
    width: var(--ic-size); height: var(--ic-size); flex: 0 0 auto; display: inline-grid; place-items: center;
    border-radius: calc(var(--ic-size) * .32); font-size: calc(var(--ic-size) * .46); line-height: 1;
    color: var(--ic-fg); background: var(--ic-bg); box-shadow: inset 0 0 0 1px var(--ic-ring); vertical-align: middle;
}
.cat-ic > i { width: auto; line-height: 1; }
html[data-theme="light"] .cat-ic { --ic-fg: #475569; --ic-bg: rgba(100, 116, 139, .10); --ic-ring: rgba(100, 116, 139, .18); }
.cat-ic[data-cat="all"]{--ic-fg:#8fb0ff;--ic-bg:rgba(79,116,255,0.15);--ic-ring:rgba(79,116,255,0.24)}
.cat-ic[data-cat="ai-chatgpt"]{--ic-fg:#a78bfa;--ic-bg:rgba(139,92,246,0.15);--ic-ring:rgba(139,92,246,0.24)}
.cat-ic[data-cat="streaming"]{--ic-fg:#fb7185;--ic-bg:rgba(244,63,94,0.15);--ic-ring:rgba(244,63,94,0.24)}
.cat-ic[data-cat="thiet-ke"]{--ic-fg:#fb923c;--ic-bg:rgba(249,115,22,0.15);--ic-ring:rgba(249,115,22,0.24)}
.cat-ic[data-cat="phan-mem"]{--ic-fg:#60a5fa;--ic-bg:rgba(59,130,246,0.15);--ic-ring:rgba(59,130,246,0.24)}
.cat-ic[data-cat="vpn-bao-mat"]{--ic-fg:#34d399;--ic-bg:rgba(16,185,129,0.15);--ic-ring:rgba(16,185,129,0.24)}
.cat-ic[data-cat="hoc-tap"]{--ic-fg:#fbbf24;--ic-bg:rgba(245,158,11,0.15);--ic-ring:rgba(245,158,11,0.24)}
.cat-ic[data-cat="tien-ich"]{--ic-fg:#2dd4bf;--ic-bg:rgba(20,184,166,0.15);--ic-ring:rgba(20,184,166,0.24)}
.cat-ic[data-cat="gift-card"]{--ic-fg:#f472b6;--ic-bg:rgba(236,72,153,0.15);--ic-ring:rgba(236,72,153,0.24)}
.cat-ic[data-cat="esim"]{--ic-fg:#38bdf8;--ic-bg:rgba(14,165,233,0.15);--ic-ring:rgba(14,165,233,0.24)}
.cat-ic[data-cat="game-steam"]{--ic-fg:#818cf8;--ic-bg:rgba(99,102,241,0.15);--ic-ring:rgba(99,102,241,0.24)}
.cat-ic[data-cat="tool-youtube"]{--ic-fg:#a3e635;--ic-bg:rgba(132,204,22,0.15);--ic-ring:rgba(132,204,22,0.24)}
.cat-ic[data-cat="ui-support"]{--ic-fg:#60a5fa;--ic-bg:rgba(59,130,246,0.15);--ic-ring:rgba(59,130,246,0.24)}
.cat-ic[data-cat="ui-bot"]{--ic-fg:#22d3ee;--ic-bg:rgba(6,182,212,0.15);--ic-ring:rgba(6,182,212,0.24)}
.cat-ic[data-cat="ui-instant"]{--ic-fg:#4ade80;--ic-bg:rgba(34,197,94,0.15);--ic-ring:rgba(34,197,94,0.24)}
.cat-ic[data-cat="ui-pay"]{--ic-fg:#fbbf24;--ic-bg:rgba(245,158,11,0.15);--ic-ring:rgba(245,158,11,0.24)}
.cat-ic[data-cat="ui-notice"]{--ic-fg:#8fb0ff;--ic-bg:rgba(79,116,255,0.15);--ic-ring:rgba(79,116,255,0.24)}
html[data-theme="light"] .cat-ic[data-cat="all"]{--ic-fg:#2f5bff;--ic-bg:rgba(79,116,255,0.1);--ic-ring:rgba(79,116,255,0.18)}
html[data-theme="light"] .cat-ic[data-cat="ai-chatgpt"]{--ic-fg:#7c3aed;--ic-bg:rgba(139,92,246,0.1);--ic-ring:rgba(139,92,246,0.18)}
html[data-theme="light"] .cat-ic[data-cat="streaming"]{--ic-fg:#e11d48;--ic-bg:rgba(244,63,94,0.1);--ic-ring:rgba(244,63,94,0.18)}
html[data-theme="light"] .cat-ic[data-cat="thiet-ke"]{--ic-fg:#ea580c;--ic-bg:rgba(249,115,22,0.1);--ic-ring:rgba(249,115,22,0.18)}
html[data-theme="light"] .cat-ic[data-cat="phan-mem"]{--ic-fg:#2563eb;--ic-bg:rgba(59,130,246,0.1);--ic-ring:rgba(59,130,246,0.18)}
html[data-theme="light"] .cat-ic[data-cat="vpn-bao-mat"]{--ic-fg:#059669;--ic-bg:rgba(16,185,129,0.1);--ic-ring:rgba(16,185,129,0.18)}
html[data-theme="light"] .cat-ic[data-cat="hoc-tap"]{--ic-fg:#b45309;--ic-bg:rgba(245,158,11,0.1);--ic-ring:rgba(245,158,11,0.18)}
html[data-theme="light"] .cat-ic[data-cat="tien-ich"]{--ic-fg:#0f766e;--ic-bg:rgba(20,184,166,0.1);--ic-ring:rgba(20,184,166,0.18)}
html[data-theme="light"] .cat-ic[data-cat="gift-card"]{--ic-fg:#db2777;--ic-bg:rgba(236,72,153,0.1);--ic-ring:rgba(236,72,153,0.18)}
html[data-theme="light"] .cat-ic[data-cat="esim"]{--ic-fg:#0284c7;--ic-bg:rgba(14,165,233,0.1);--ic-ring:rgba(14,165,233,0.18)}
html[data-theme="light"] .cat-ic[data-cat="game-steam"]{--ic-fg:#4f46e5;--ic-bg:rgba(99,102,241,0.1);--ic-ring:rgba(99,102,241,0.18)}
html[data-theme="light"] .cat-ic[data-cat="tool-youtube"]{--ic-fg:#4d7c0f;--ic-bg:rgba(132,204,22,0.1);--ic-ring:rgba(132,204,22,0.18)}
html[data-theme="light"] .cat-ic[data-cat="ui-support"]{--ic-fg:#2563eb;--ic-bg:rgba(59,130,246,0.1);--ic-ring:rgba(59,130,246,0.18)}
html[data-theme="light"] .cat-ic[data-cat="ui-bot"]{--ic-fg:#0e7490;--ic-bg:rgba(6,182,212,0.1);--ic-ring:rgba(6,182,212,0.18)}
html[data-theme="light"] .cat-ic[data-cat="ui-instant"]{--ic-fg:#15803d;--ic-bg:rgba(34,197,94,0.1);--ic-ring:rgba(34,197,94,0.18)}
html[data-theme="light"] .cat-ic[data-cat="ui-pay"]{--ic-fg:#b45309;--ic-bg:rgba(245,158,11,0.1);--ic-ring:rgba(245,158,11,0.18)}
html[data-theme="light"] .cat-ic[data-cat="ui-notice"]{--ic-fg:#2f5bff;--ic-bg:rgba(79,116,255,0.1);--ic-ring:rgba(79,116,255,0.18)}