/* k4g-fonts */
/* Self-hosted fonts (Inter, Space Grotesk) — generated, replaces render-blocking Google Fonts */
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb54C-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.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;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb54C-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.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;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb54C-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://key4games.com/wp-content/themes/key4games/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.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;
}
/* k4g-tokens */
/* ============================================================
KEY4GAMES — design tokens (single source of truth)
============================================================ */
:root{
--bg:#0b0d15;
--bg2:#0e111c;
--panel:#141828;
--panel2:#181d31;
--line:rgba(255,255,255,.07);
--line2:rgba(255,255,255,.12);
--text:#eef0f8;
--muted:#8e94ab; /* secondary text (WCAG AA on --bg) */
--dim:#838ca9; /* tertiary text / placeholders — raised from prototype #5b6178 to meet WCAG AA */
--violet:#8b5cf6;
--fuchsia:#e14bc8;
--ice:#59d0ff;
--solar:#ffc24b;
--grad:linear-gradient(120deg,#8b5cf6,#e14bc8);
--radius:14px;
--shadow:0 20px 50px -20px rgba(0,0,0,.6);
--glow:0 0 0 1px rgba(139,92,246,.35), 0 14px 40px -14px rgba(139,92,246,.35);
--header-h:70px; /* sticky offset reference */
/* Checkout action contract: drawer, cart and final checkout keep their
truthful labels but share these exact visual and interaction tokens. */
--k4g-checkout-action-bg:#45d245;
--k4g-checkout-action-text:#07130a;
--k4g-checkout-action-disabled-bg:#30394a;
--k4g-checkout-action-disabled-text:#fff;
--k4g-checkout-action-height:54px;
--k4g-checkout-action-radius:9px;
--k4g-checkout-action-padding:12px 18px;
--k4g-checkout-action-shadow:0 14px 32px -15px rgba(69,210,69,.72);
/* Every provider mark owns the same optical-centre box. Wide, tall and
fallback marks scale inside it without changing row alignment. */
--k4g-payment-mark-width:72px;
--k4g-payment-mark-height:40px;
--k4g-payment-logo-max-width:56px;
--k4g-payment-logo-max-height:28px;
}
/* k4g-base */
/* ============================================================
KEY4GAMES — base / reset / a11y
============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
/* gradient under a (transparent) border: from padding-box it tiles again under the border, iOS shows the other end as a 1px stripe */
*,*::before,*::after{background-origin:border-box!important}
html{scroll-behavior:smooth}
body{
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:var(--bg);
color:var(--text);
font-size:15px;
line-height:1.55;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(600px 420px at 8% -4%, rgba(139,92,246,.16), transparent 60%),
radial-gradient(700px 460px at 96% -6%, rgba(225,75,200,.10), transparent 60%);
}
::selection{background:rgba(139,92,246,.45)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.site-main{display:block;position:relative;z-index:1}
/* page heading (archives / legal / lists) */
.page-head{padding:6px 0 2px}
.page-head h1{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:.02em}
.page-head h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pcount{color:var(--muted);font-size:13.5px}
/* breadcrumb (used by catalog, product, legal) */
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:0 0 22px;flex-wrap:wrap;padding-top:22px}
.crumbs a{color:var(--muted);transition:.2s}
.crumbs a:hover{color:var(--text)}
.crumbs b{color:var(--text);font-weight:600}
.crumbs svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
/* ============ ACCESSIBILITY HELPERS ============ */
.screen-reader-text{
border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important;word-wrap:normal!important;
}
.skip-link{
position:absolute;inset-inline-start:0;top:0;z-index:200;
transform:translateY(-150%);
background:var(--grad);color:#fff;font-weight:600;font-size:14px;
padding:10px 18px;border-radius:0 0 10px 0;
}
.skip-link:focus{transform:translateY(0)}
/* ============ SCROLL REVEAL ============ */
/*
* Whole content sections must never start transparent. On long catalog/home
* pages an IntersectionObserver callback can trail a fast scroll and leave a
* conspicuous black gap where real content already exists. Keep the stable
* server-rendered layout visible; card artwork still has its own subtle hover
* treatment.
*/
.rv,.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important;scroll-behavior:auto!important}
.rv{opacity:1;transform:none}
}
/* k4g-components */
/* ============================================================
KEY4GAMES — shared components (sections, buttons, product cards)
============================================================ */
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--grad);color:#fff;font-weight:600;font-size:14px;padding:12px 22px;border-radius:11px;box-shadow:0 10px 30px -10px rgba(225,75,200,.6);transition:.2s}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);color:var(--text);font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:10px;transition:.2s}
.btn-ghost:hover{border-color:var(--violet);color:#fff}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6;cursor:not-allowed;filter:none;transform:none}
/* ---- toast notifications (add-to-cart feedback; injected into an aria-live region by product.js) ---- */
.k4g-toasts{position:fixed;z-index:1000;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;width:calc(100% - 32px);max-width:380px;pointer-events:none}
.k4g-toast{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow);color:var(--text);font-size:13.5px;font-weight:600;pointer-events:auto;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.k4g-toast.in{opacity:1;transform:translateY(0)}
.k4g-toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice);flex-shrink:0}
.k4g-toast.is-error{border-color:rgba(225,75,200,.5)}
.k4g-toast.is-error::before{background:var(--fuchsia);box-shadow:0 0 10px var(--fuchsia)}
.k4g-toast-msg{flex:1;min-width:0}
.k4g-toast-link{color:var(--ice);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
.k4g-toast-link:hover{color:#fff}
/* Sitewide recovery notices. main.js can make Woo notices dismissible on
catalogue and custom theme routes too, so this control must live in the
globally enqueued components stylesheet rather than Woo-only CSS. */
body .wc-block-components-notice-banner,
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-error{position:relative;padding-right:52px}
body .k4g-notice-dismiss-item{position:static!important;margin:0!important;padding:0!important;list-style:none!important}
body .k4g-notice-dismiss{
position:absolute;top:8px;right:8px;display:grid;place-items:center;width:36px;height:36px;
padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted);
font:700 24px/1 Inter,sans-serif;cursor:pointer
}
body .k4g-notice-dismiss:hover{background:rgba(255,255,255,.07);color:var(--text)}
body .k4g-notice-dismiss:focus-visible{outline:2px solid var(--violet,#8b5cf6);outline-offset:2px}
[dir="rtl"] body .k4g-notice-dismiss{right:auto;left:8px}
[dir="rtl"] body .wc-block-components-notice-banner,
[dir="rtl"] body .woocommerce-info,
[dir="rtl"] body .woocommerce-message,
[dir="rtl"] body .woocommerce-error{padding-right:16px;padding-left:52px}
.typechip{position:absolute;z-index:4;right:9px;top:9px;max-width:calc(100% - 18px);overflow:hidden;padding:5px 8px;border:1px solid rgba(139,92,246,.38);border-radius:8px;background:rgba(10,12,22,.82);box-shadow:0 6px 18px rgba(0,0,0,.28);color:#d8cbff;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;backdrop-filter:blur(6px)}
.typechip-account{border-color:rgba(225,75,200,.5);color:#f2b5e8}.typechip-giftcard{border-color:rgba(96,165,250,.48);color:#b7dbff}
.dlcchip{position:absolute;z-index:4;right:9px;top:9px;padding:5px 9px;border:1px solid rgba(255,194,75,.62);border-radius:8px;background:rgba(31,20,3,.88);box-shadow:0 6px 18px rgba(0,0,0,.28);color:var(--solar);font-size:9.5px;font-weight:900;letter-spacing:.12em;backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){
.k4g-toast{transition:none;opacity:1;transform:none}
}
/* Sitewide cart drawer: fast confirmation without navigating away from shopping. */
body.k4g-cart-open{overflow:hidden}
/* Centered modal (difmark-style "product added to cart" popup), not a side drawer. */
.k4g-cart-drawer{position:fixed;inset:0;z-index:10030;display:flex;align-items:center;justify-content:center;padding:22px}
.k4g-cart-drawer[hidden]{display:none}
.k4g-cart-backdrop{position:absolute;inset:0;appearance:none;border:0;background:rgba(3,5,12,.72);backdrop-filter:blur(5px);cursor:pointer}
.k4g-cart-panel{position:relative;z-index:1;display:flex;flex-direction:column;width:min(460px,100%);max-height:min(86vh,760px);overflow:hidden;background:linear-gradient(180deg,#15182a 0%,#0d0f19 100%);border:1px solid rgba(163,118,255,.28);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.6);outline:0;animation:k4g-cart-in .2s ease-out}
.k4g-cart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:28px 26px 20px;border-bottom:1px solid var(--line)}
.k4g-cart-head h2{margin:3px 0 0;font:700 26px/1.15 "Space Grotesk",sans-serif;color:var(--text)}
.k4g-cart-eyebrow{color:var(--purple2);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.k4g-cart-close{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}
.k4g-cart-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k4g-cart-close:hover{border-color:var(--purple2);color:var(--purple2)}
.k4g-cart-body{display:grid;gap:12px;padding:22px 26px;overflow:auto;flex:1 1 auto;align-content:start}
.k4g-cart-inline-notice{position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px 50px 12px 14px;border:1px solid rgba(96,165,250,.42);border-radius:12px;background:rgba(96,165,250,.1);color:var(--text);font-size:13px;line-height:1.45}
.k4g-cart-inline-notice.is-error{border-color:rgba(225,75,200,.5);background:rgba(225,75,200,.08)}
.k4g-cart-inline-notice button{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted);font:700 24px/1 Inter,sans-serif;cursor:pointer}
.k4g-cart-inline-notice button:hover{background:rgba(255,255,255,.07);color:var(--text)}
.k4g-cart-inline-notice button:focus-visible{outline:2px solid var(--violet,#8b5cf6);outline-offset:2px}
[dir="rtl"] .k4g-cart-inline-notice{padding-right:14px;padding-left:50px}
[dir="rtl"] .k4g-cart-inline-notice button{right:auto;left:2px}
.k4g-cart-state{margin:34px 0;text-align:center;color:var(--muted)}
.k4g-cart-item{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:13px;padding:11px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}
.k4g-cart-item img,.k4g-cart-item-image{display:block;width:70px;height:55px;object-fit:contain;border-radius:10px;background:#090b13}
.k4g-cart-item-copy{display:grid;gap:5px;min-width:0}
.k4g-cart-item-copy b{overflow:hidden;color:var(--text);font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.k4g-cart-item-copy span{color:var(--muted);font-size:12px}
/* difmark-style line chips. Scoped under .k4g-cart-item-copy so they out-rank the
generic `.k4g-cart-item-copy span` colour/size rule above (which styles the qty). */
.k4g-cart-item-copy .k4g-cart-item-chips{display:flex;flex-wrap:wrap;gap:5px}
.k4g-cart-item-copy .k4g-cart-chip{max-width:100%;color:var(--purple2);font-size:10px;letter-spacing:.03em;background:rgba(163,118,255,.12);border:1px solid rgba(163,118,255,.28);padding:1px 7px;border-radius:6px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal;white-space:nowrap}
/* Pre-order line: solar chip, matching the product page's .bchip.pre so the cue is consistent. */
.k4g-cart-item-copy .k4g-cart-chip--preorder{color:var(--solar);background:rgba(255,194,75,.1);border-color:rgba(255,194,75,.34)}
/* quantity stepper + remove — inline cart management in the drawer (difmark-style) */
.k4g-cart-item-copy .k4g-cart-qty{display:inline-flex;align-items:center;width:fit-content;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:rgba(255,255,255,.03);margin-top:1px}
.k4g-cart-item-copy .k4g-qty-btn{appearance:none;border:0;background:transparent;color:var(--muted);width:44px;height:44px;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.k4g-cart-item-copy .k4g-qty-btn:hover{color:var(--text);background:rgba(255,255,255,.07)}
.k4g-cart-item-copy .k4g-qty-val{min-width:26px;text-align:center;color:var(--text);font-size:13px;font-weight:600}
.k4g-cart-item-end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px;white-space:nowrap;height:100%}
.k4g-cart-remove{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:9px}
.k4g-cart-remove:hover{color:var(--fuchsia);background:rgba(255,255,255,.05)}
.k4g-cart-remove svg{display:block}
.k4g-cart-item-price{white-space:nowrap;color:var(--text);font-size:13px}
.k4g-cart-foot{flex:none;display:grid;gap:10px;padding:20px 26px 24px;border-top:1px solid var(--line);background:rgba(13,15,25,.96)}
.k4g-cart-foot[hidden]{display:none}
.k4g-cart-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;color:var(--muted)}
.k4g-cart-total strong{color:var(--text);font-size:20px}
.k4g-cart-checkout{justify-content:center;width:100%}
/* The drawer keeps its action-specific label while using the same terminal
action contract as cart and checkout. */
.k4g-cart-drawer .k4g-cart-checkout{
min-height:var(--k4g-checkout-action-height);box-sizing:border-box;
padding:var(--k4g-checkout-action-padding);border-radius:var(--k4g-checkout-action-radius);
background:var(--k4g-checkout-action-bg);box-shadow:var(--k4g-checkout-action-shadow);
color:var(--k4g-checkout-action-text);font:600 14px/1.2 'Inter',sans-serif;
text-transform:none;transform:none;transition:filter .18s ease,opacity .18s ease
}
.k4g-cart-drawer .k4g-cart-checkout:hover{filter:brightness(.94);transform:none}
.k4g-cart-drawer .k4g-cart-checkout:active{filter:brightness(.88);transform:none}
.k4g-cart-drawer .k4g-cart-checkout:focus-visible{outline:2px solid #fff;outline-offset:3px}
.k4g-cart-drawer .k4g-cart-checkout[aria-busy="true"]{
background:var(--k4g-checkout-action-disabled-bg);box-shadow:none;
color:var(--k4g-checkout-action-disabled-text);opacity:.74;cursor:not-allowed;filter:none
}
.k4g-cart-view{text-align:center;color:var(--muted);font-size:13px;font-weight:700}
.k4g-cart-view:hover{color:var(--text)}
@keyframes k4g-cart-in{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
@media(max-width:620px){
.k4g-cart-drawer{padding:12px}
.k4g-cart-panel{width:100%;max-height:90vh}
.k4g-cart-head{padding:20px 17px 16px}
.k4g-cart-body,.k4g-cart-foot{padding-left:17px;padding-right:17px}
.k4g-cart-item{grid-template-columns:52px minmax(0,1fr) auto;gap:10px}
.k4g-cart-item img,.k4g-cart-item-image{width:52px;height:46px}
}
@media(prefers-reduced-motion:reduce){.k4g-cart-panel{animation:none}}
/* ---- section head ---- */
.section{margin-top:72px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}
.sec-head h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:20px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sec-head h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.viewall{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;font-weight:600;transition:.2s;white-space:nowrap}
.viewall:hover{color:var(--text)}
.viewall svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:480px){
.sec-head{gap:12px;align-items:flex-start}
.sec-head h2{flex:1;min-width:0;font-size:18px;line-height:1.25;letter-spacing:.12em;overflow-wrap:anywhere}
.sec-head .viewall{flex-shrink:0;margin-top:2px}
}
/* ---- product cards ---- */
/* Four across: the owner asked for a denser grid — "так будет красивей и больше выбор
сразу в глаза падать". The card was built fluid, so this is a column count, not a
redesign; below 1100px it steps back to three so the cover art keeps its proportions. */
.grid3{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1100px){.grid3{grid-template-columns:repeat(3,1fr)}}
/* The API catalog owns its denser five/four/three/two-column breakpoints in
catalog.css. Shared product rails keep the general four-column rhythm here. */
.pcard-item{position:relative;min-width:0;display:flex;container-type:inline-size}
.pcard{min-width:0;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .24s ease,box-shadow .24s ease;display:flex;flex-direction:column}
/* The category disclosure is a sibling of the product link: tap/Space/Enter
reveal the type without navigation or invalid nested interactive controls. */
.pcard-category{position:absolute;z-index:5;top:1px;left:1px}
.pcard-category summary{position:relative;display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer;color:#fff;border-radius:var(--radius) 0 12px 0;background:linear-gradient(135deg,rgba(6,8,14,.9) 0 64%,transparent 65%)}
.pcard-category summary::-webkit-details-marker{display:none}
.pcard-category summary>svg{width:18px;height:18px;margin:-8px 0 0 -8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcard-category summary:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.pcard-category-label{display:none;position:absolute;top:40px;left:7px;width:max-content;max-width:calc(100cqw - 16px);padding:6px 9px;border:1px solid rgba(255,255,255,.24);border-radius:7px;background:#101321;color:#fff;font:700 11px/1.35 'Inter',sans-serif;overflow-wrap:anywhere;box-shadow:0 5px 16px rgba(0,0,0,.3)}
.pcard-category[open] .pcard-category-label,.pcard-category summary:focus-visible .pcard-category-label{display:block}
@media(hover:hover){.pcard-category summary:hover .pcard-category-label{display:block}}
.cover{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0d1020}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;transform:none;transition:filter .25s ease}
.cover::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px)}
.cover::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(90% 80% at 50% 30%,transparent 40%,rgba(5,6,12,.55) 100%)}
/* Product page photo: no scanline/vignette overlay, the art is shown as supplied (owner, 24.09.2026). */
.cover.k4g-product-media::before,.cover.k4g-product-media::after{content:none}
.cover .blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.8;transform:scale(1);transform-origin:center;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.ct{position:relative;z-index:3;text-align:center;padding:0 18px;font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(17px,1.8vw,22px);line-height:1.15;text-shadow:0 6px 26px rgba(0,0,0,.6)}
.ct small{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.72);margin-top:6px}
/* Cover caption sits under a loaded image and is revealed only when it 404s
(supplier images carry dead links); .img-failed is set by the img onerror. */
.ct-fb{display:none}
.cover.img-failed .ct-fb{display:block}
.tagchip{position:absolute;z-index:4;top:10px;left:10px;background:rgba(6,8,14,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.08em}
.offchip{position:absolute;z-index:4;top:10px;right:10px;background:var(--grad);padding:4px 10px;border-radius:8px;font-size:11.5px;font-weight:800}
/* Pre-order chip — bottom-left of the cover, so it never collides with the platform
chip (top-left) or an offer chip (top-right). Solar on a dark scrim: it has to be
legible over whatever cover art sits behind it. */
.prechip{position:absolute;z-index:4;left:10px;bottom:10px;max-width:calc(100% - 20px);display:inline-flex;align-items:center;gap:5px;background:rgba(6,8,14,.72);border:1px solid rgba(255,194,75,.45);backdrop-filter:blur(6px);color:var(--solar);padding:4px 9px;border-radius:8px;font-size:11px;font-weight:700;line-height:1.25}
/* ?group=game card: how many editions/platforms stand behind it (owner, 24.09.2026). No backdrop-filter: it breaks the card link. */
.verchip{position:absolute;z-index:4;right:10px;bottom:10px;padding:3px 8px;border-radius:6px;border:1px solid rgba(167,139,250,.5);background:rgba(6,8,14,.8);color:#e3daff;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap}
.prechip svg{stroke:var(--solar);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.datechip{position:absolute;z-index:4;top:10px;right:10px;background:rgba(139,92,246,.92);padding:4px 11px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.04em}
.pcard:hover{transform:none}
@media (hover:hover) and (pointer:fine){
.pcard:hover{border-color:rgba(139,92,246,.5);box-shadow:var(--glow)}
.pcard:hover .cover img{transform:none;filter:saturate(1.06) brightness(1.035)}
.pcard:hover .cover .blob{transform:scale(1.08)}
}
.pmeta{min-width:0;padding:13px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
/* Product cards are purchase choices, not a trust-message billboard. Delivery is
identical on every card and already explained above the grids and on the
product page, so keep only the differentiating region beside the price. */
.seller-row{min-width:0;overflow:visible;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.seller-row .mi:first-child{display:none}
.mi{min-width:0;max-width:100%;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi svg{width:13px;height:13px;stroke:var(--violet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.pcard-badges{display:inline-flex;align-items:center;gap:5px;min-width:max-content;flex:0 0 auto}
.pcard-badge{width:27px;height:27px;flex:0 0 27px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;overflow:hidden;background:#151a2a;color:var(--muted);box-shadow:0 4px 13px rgba(0,0,0,.2)}
.pcard-badge svg{width:15px;height:15px;display:block}
.pcard-badge-platform.is-nintendo svg{width:18px;height:18px}
.pcard-badge-region.is-global svg,.pcard-badge-region.is-neutral svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcard-badge img{width:100%;height:100%;display:block;object-fit:cover}
.pcard-badge-platform.is-steam{color:#66c0f4;background:#172634}.pcard-badge-platform.is-xbox{color:#70c970;background:#152719}.pcard-badge-platform.is-psn{color:#68a9ff;background:#13243b}.pcard-badge-platform.is-nintendo{color:#ff6c70;background:#301719}.pcard-badge-platform.is-google-play{color:#7be5ba;background:#152a25}
.pcard-badge-region.is-global{color:var(--violet);background:rgba(139,92,246,.14)}
.pcard-badge-region.is-neutral{color:var(--muted);border-style:dashed;background:rgba(255,255,255,.035)}
.pcard-badge-region.is-country{background:#111522}
.pcard-badge-region.is-region{background:#14253a;color:#d2e6ff}
/* Catalog cards use the home/search look: coloured brand square + plain region mark (24.09.2026). */
.pcard-badge-platform.has-brand,.pcard-badge-region.is-global,.pcard-badge-region.is-neutral,.pcard-badge-region.is-country{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.pcard-badge-platform.has-brand svg{width:13px;height:13px}
.pcard-badge-region.is-global,.pcard-badge-region.is-neutral{color:#8e94ab}
.pcard-badge-region.is-global svg,.pcard-badge-region.is-neutral svg{width:16px;height:16px}
.pcard-badge-region.is-country img{width:16px;height:16px;border-radius:50%}
.lvl{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid rgba(255,194,75,.4);color:var(--solar)}
.prow{min-width:0;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:end;gap:8px;margin-top:auto}
.ptitle{min-block-size:2.7em;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35}
.ptitle span{color:var(--muted);font-weight:500}
.pcard-prepaid-facts{display:grid;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:7px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);overflow:hidden}
.pcard-prepaid-facts>span{display:grid;min-width:0;gap:2px}.pcard-prepaid-facts small,.pcard-activation-fact small,.pcard-price-label{display:block;color:var(--muted);font:700 8px/1.2 'Inter',sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:normal}.pcard-prepaid-facts b{min-width:0;color:var(--text);font-size:10px;line-height:1.25;overflow-wrap:anywhere}.pcard-price-label{margin-bottom:2px;text-align:right}
.pcard-activation-fact{min-width:0;display:flex;align-items:baseline;gap:6px;padding:6px 7px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025)}
.pcard-activation-fact b{min-width:0;color:var(--text);font-size:10px;line-height:1.25;overflow-wrap:anywhere}
.price{min-width:0;max-width:100%;justify-self:end;font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:17px;white-space:nowrap;color:#fff;font-variant-numeric:tabular-nums}
.oldprice{display:block;text-align:right;font-size:11.5px;color:var(--muted);text-decoration:line-through;font-weight:500}
/* The amount and icons share the final grid row. The optional price context
gets a full-width row so long currency labels cannot move the amount. */
.pcard .prow{grid-template-rows:auto auto;row-gap:3px}
.pcard .prow>.seller-row{grid-column:1;grid-row:2}
.pcard .prow>.price{grid-column:2;grid-row:2;text-align:right;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.pcard .prow>.pcard-price-label{grid-column:1/-1;grid-row:1;min-height:1.2em;margin:0}
.pcard .pcard-activation-fact{min-height:41px;align-items:center}
.pcard .ptitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:2.7em;min-height:2.7em;overflow-wrap:anywhere}
@media (max-width:480px){
/* Compatibility text now has its own visible row, leaving the compact badge
pair and storefront price aligned even in the two-column mobile grid. */
.pcard .prow{grid-template-columns:max-content minmax(0,1fr);align-items:end;gap:5px}
.pcard .seller-row{min-width:max-content;align-items:flex-end}
.pcard .price{justify-self:end}
.pcard-price-label{max-width:100%;text-align:right;overflow-wrap:anywhere}
}
/* cover gradients — generative placeholder art (fallback when no image) */
.g1{background:radial-gradient(110% 130% at 12% 0%,rgba(91,52,201,.85),transparent 55%),radial-gradient(120% 120% at 100% 100%,rgba(190,24,93,.7),transparent 55%),linear-gradient(135deg,#171132,#0b0e1c)}
.g2{background:radial-gradient(120% 120% at 90% 0%,rgba(220,38,38,.55),transparent 55%),radial-gradient(110% 130% at 0% 100%,rgba(30,41,80,.9),transparent 60%),linear-gradient(160deg,#1b1020,#0c0d18)}
.g3{background:radial-gradient(110% 140% at 0% 0%,rgba(58,167,232,.5),transparent 55%),radial-gradient(130% 110% at 100% 100%,rgba(30,27,75,.95),transparent 60%),linear-gradient(150deg,#0e1730,#0a0d18)}
.g4{background:radial-gradient(120% 120% at 85% 15%,rgba(244,176,61,.5),transparent 55%),radial-gradient(120% 140% at 10% 95%,rgba(120,53,15,.8),transparent 60%),linear-gradient(140deg,#221408,#0d0b12)}
.g5{background:radial-gradient(120% 130% at 15% 10%,rgba(89,208,255,.4),transparent 55%),radial-gradient(110% 110% at 95% 90%,rgba(139,92,246,.55),transparent 55%),linear-gradient(150deg,#0d1a2e,#0b0d18)}
.g6{background:radial-gradient(130% 120% at 80% 0%,rgba(225,75,200,.55),transparent 55%),radial-gradient(120% 130% at 5% 100%,rgba(255,138,76,.45),transparent 55%),linear-gradient(150deg,#241028,#0d0c16)}
.g7{background:radial-gradient(120% 130% at 20% 0%,rgba(71,85,135,.8),transparent 60%),radial-gradient(110% 110% at 100% 100%,rgba(15,23,42,.9),transparent 60%),linear-gradient(160deg,#141a2c,#090b13)}
.g8{background:radial-gradient(120% 120% at 90% 10%,rgba(192,38,211,.5),transparent 55%),radial-gradient(130% 120% at 0% 95%,rgba(76,29,149,.85),transparent 60%),linear-gradient(150deg,#1c1030,#0c0b17)}
.g9{background:radial-gradient(130% 120% at 15% 5%,rgba(249,115,22,.55),transparent 55%),radial-gradient(120% 130% at 95% 100%,rgba(153,27,27,.7),transparent 60%),linear-gradient(150deg,#241007,#100a10)}
.g10{background:radial-gradient(120% 130% at 85% 0%,rgba(147,197,253,.35),transparent 55%),radial-gradient(120% 120% at 10% 100%,rgba(37,99,168,.6),transparent 60%),linear-gradient(150deg,#0e1c33,#0a0d17)}
.g11{background:radial-gradient(120% 120% at 15% 10%,rgba(255,194,75,.42),transparent 50%),radial-gradient(130% 130% at 90% 95%,rgba(28,25,23,.95),transparent 65%),linear-gradient(150deg,#1c150a,#0b0a10)}
.g12{background:radial-gradient(130% 130% at 80% 10%,rgba(124,58,237,.6),transparent 55%),radial-gradient(120% 120% at 10% 100%,rgba(12,10,22,.9),transparent 65%),linear-gradient(160deg,#160f2a,#0a0913)}
.g-hero{background:radial-gradient(90% 130% at 88% 12%,rgba(225,75,200,.4),transparent 55%),radial-gradient(80% 120% at 8% 92%,rgba(139,92,246,.55),transparent 60%),radial-gradient(60% 80% at 50% 110%,rgba(89,208,255,.2),transparent 60%),linear-gradient(115deg,#221244,#0d1122 72%)}
/* ---- news / blog card (shared by homepage rail + blog archive) ---- */
.ncard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .24s ease,box-shadow .24s ease;display:flex;flex-direction:column}
.ncard:hover{transform:none;border-color:rgba(139,92,246,.5)}
.ncover{position:relative;aspect-ratio:16/8.2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ncover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ncover::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 30%,transparent 40%,rgba(5,6,12,.5) 100%)}
.nbody{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.nmeta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:11.5px;font-weight:500}
.nmeta span{display:inline-flex;align-items:center;gap:5px}
.nmeta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nbody h3{font-size:15px;font-weight:600;line-height:1.4}
.nbody p{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.readmore{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--violet)}
.readmore svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ---- product card title clamp (real API names are long) ---- */
.ptitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ---- categories landing (templates/template-categories.php) ----
Lives in components.css, not its own file: inc/enqueue.php only registers a
page-specific stylesheet for the catalog/product/home templates, and the
categories page is a plain Page (so it gets base + components + legal). */
.k4g-page-categories .site-main{min-height:calc(100vh - 70px)}
.k4g-page-categories .site-footer,.k4g-page-categories .k4g-mobile-dock{display:none!important}
.cats-wrap{max-width:1180px;padding:0 0 58px}
.cats-hero{max-width:720px;margin:42px auto 36px;text-align:center}
.cats-hero h1{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(30px,3vw,36px);line-height:1.12;font-weight:700;letter-spacing:-.025em}
.cats-hero p{margin:10px auto 0;color:var(--muted);font-size:14px;line-height:1.5}
.category-directory-section{margin-top:28px}
.category-directory-title{margin:0 0 17px;font-family:'Space Grotesk','Inter',sans-serif;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.015em}
.category-directory-title em{color:var(--violet);font-style:normal}
.category-directory-subtitle{margin:23px 0 11px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.category-directory-empty{margin:0;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--muted);text-align:center}
.platform-unavailable{grid-column:1/-1;margin:0;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--muted);text-align:center}
.category-platform-grid,.category-department-grid{display:grid;gap:15px}
.category-platform-grid--featured{grid-template-columns:repeat(3,minmax(0,1fr))}
.category-platform-grid--more{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.category-department-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.category-platform-card,.category-department-card{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 16px;align-items:center;gap:12px;min-width:0;min-height:84px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 12px 28px rgba(0,0,0,.14);transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease}
.category-platform-card--top{--platform-art:none;isolation:isolate;overflow:hidden;grid-template-columns:58px minmax(0,1fr) 18px;align-items:end;min-height:190px;padding:20px;background-color:#090c17;background-image:linear-gradient(180deg,rgba(4,6,14,.02) 0%,rgba(4,6,14,.42) 50%,rgba(4,6,14,.96) 100%),linear-gradient(135deg,rgba(var(--brand-rgb,139,92,246),.2),transparent 58%),var(--platform-art);background-size:100% 100%,100% 100%,cover;background-position:center;background-repeat:no-repeat;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb,139,92,246),.2),0 18px 42px rgba(0,0,0,.25)}
.category-platform-card--top::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 24%,transparent 72%,rgba(var(--brand-rgb,139,92,246),.11));pointer-events:none}
.category-platform-card--top.plat-brand-steam{--platform-art:url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/platform-steam.svg')}
.category-platform-card--top.plat-brand-xbox{--platform-art:url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/platform-xbox.svg')}
.category-platform-card--top.plat-brand-psn{--platform-art:url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/platform-psn.svg')}
.category-platform-card--top.plat-brand-epic-games{--platform-art:url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/platform-epic-games.svg')}
.category-platform-card--top.plat-brand-nintendo{--platform-art:url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/platform-nintendo.svg')}
.category-platform-card--top.plat-brand-google-play{--platform-art:url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/platform-google-play.svg')}
.category-platform-card--more{align-self:start;border-radius:13px;background:linear-gradient(135deg,rgba(var(--brand-rgb,139,92,246),.06),transparent 58%),var(--panel)}
.category-platform-card--top .platform-directory-icon{width:58px;height:58px;border-radius:16px;background:rgba(7,10,20,.82);border-color:rgba(var(--brand-rgb,139,92,246),.58);box-shadow:0 12px 30px rgba(var(--brand-rgb,139,92,246),.28);backdrop-filter:blur(9px)}
.category-platform-card--top .platform-directory-icon svg,.category-platform-card--top .platform-directory-icon .k4g-symbol{width:31px;height:31px}
.category-platform-card--top .category-directory-copy strong,.category-platform-card--top .category-directory-copy small{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.95)}
.category-platform-card--top .category-directory-copy small{color:rgba(255,255,255,.72)}
.category-platform-card--top .category-directory-arrow{color:rgba(255,255,255,.74)}
.category-department-card{isolation:isolate;overflow:hidden;align-items:end;min-height:214px;padding:22px;background-color:#0a0d18;background-size:cover;background-position:center;background-repeat:no-repeat;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(167,139,250,.16),0 18px 42px rgba(0,0,0,.25)}
.category-department-card--pc{background-image:linear-gradient(180deg,rgba(6,8,18,.02),rgba(6,8,18,.91)),image-set(url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-pc.avif') type('image/avif'),url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-pc.webp') type('image/webp'))}
.category-department-card--console{background-image:linear-gradient(180deg,rgba(6,8,18,.02),rgba(6,8,18,.91)),image-set(url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-console.avif') type('image/avif'),url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-console.webp') type('image/webp'))}
.category-department-card--gift-cards{background-image:linear-gradient(180deg,rgba(6,8,18,.02),rgba(6,8,18,.91)),image-set(url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-gift-cards.avif') type('image/avif'),url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-gift-cards.webp') type('image/webp'))}
.category-department-card--software{background-image:linear-gradient(180deg,rgba(6,8,18,.02),rgba(6,8,18,.91)),image-set(url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-software.avif') type('image/avif'),url('https://key4games.com/wp-content/themes/key4games/assets/img/visuals/category-software.webp') type('image/webp'))}
.category-department-card .category-department-icon{background:rgba(9,12,24,.76);border-color:rgba(167,139,250,.46);box-shadow:0 10px 24px rgba(139,92,246,.22);backdrop-filter:blur(8px)}
.category-department-card .category-directory-copy strong{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.95)}
.category-department-card .category-directory-arrow{color:rgba(255,255,255,.74)}
.platform-directory-icon,.category-department-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:var(--panel2);color:rgb(var(--brand-rgb,139,92,246));box-shadow:0 8px 20px rgba(var(--brand-rgb,139,92,246),.12)}
.platform-directory-icon svg{width:25px;height:25px;fill:currentColor;stroke:none}
.platform-directory-icon .k4g-symbol,.category-department-icon .k4g-symbol{width:24px;height:24px;object-fit:contain}
.category-directory-copy{min-width:0}
.category-directory-copy strong{display:block;overflow-wrap:anywhere;color:var(--text);font-size:14px;line-height:1.25;font-weight:700}
.category-directory-copy small{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;line-height:1.25}
.category-directory-arrow{display:grid;place-items:center;color:var(--muted)}
.category-directory-arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.category-department-icon{color:var(--violet)}
.category-directory-section--departments{margin-top:34px}
@media (hover:hover) and (pointer:fine){
.category-platform-card:hover,.category-department-card:hover{z-index:1;border-color:rgba(167,139,250,.62);background-color:var(--panel2);box-shadow:0 22px 44px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.05)}
}
.category-platform-card:focus-visible,.category-department-card:focus-visible{z-index:2;outline:3px solid var(--violet,#8b5cf6);outline-offset:3px;border-color:rgba(255,255,255,.72)}
.category-platform-card[aria-current="page"],.category-platform-card.is-active,.category-department-card[aria-current="page"],.category-department-card.is-active{border-color:rgba(var(--brand-rgb,139,92,246),.92);box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb,139,92,246),.48),0 18px 42px rgba(var(--brand-rgb,139,92,246),.2)}
.category-platform-card.is-unavailable{cursor:not-allowed;filter:saturate(.42);opacity:.72}
.category-platform-card.is-unavailable .platform-directory-icon{box-shadow:none}
@media (max-width:1020px){
.cats-wrap{max-width:760px;padding-left:15px;padding-right:15px}
.category-platform-grid--featured,.category-department-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.category-platform-grid--more{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
.category-platform-grid--more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
.k4g-page-categories .site-main{min-height:calc(100vh - 54px)}
.cats-wrap{padding:0 15px 38px}
.cats-hero{margin:23px auto 21px;padding:0}
.cats-hero p{font-size:14px;line-height:1.48}
.category-directory-section{margin-top:22px}
.category-directory-title{margin-bottom:12px;font-size:18px}
.category-platform-grid,.category-department-grid{gap:11px}
.category-platform-card,.category-department-card{grid-template-columns:38px minmax(0,1fr);gap:9px;min-height:94px;padding:12px}
.category-platform-card--top,.category-department-card{grid-template-columns:1fr;align-content:end;align-items:end;gap:8px;min-height:166px;padding:13px}
.category-department-card{min-height:154px}
.category-platform-card--top .platform-directory-icon,.category-department-card .category-department-icon{grid-column:1}
.category-platform-card--top .category-directory-copy,.category-department-card .category-directory-copy{grid-column:1}
.platform-directory-icon,.category-department-icon,.category-platform-card--top .platform-directory-icon{width:40px;height:40px;border-radius:11px}
.platform-directory-icon svg,.platform-directory-icon .k4g-symbol,.category-department-icon .k4g-symbol,.category-platform-card--top .platform-directory-icon svg{width:23px;height:23px}
.category-directory-arrow{display:none}
.category-directory-copy strong{font-size:13px}
.category-directory-copy small{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
.category-platform-card,.category-department-card{transition:none}
}
/* ---- shared prose typography (blog single, tabs) ---- */
.prose{max-width:820px}
.prose p{color:var(--muted);margin:0 0 14px;font-size:14.5px;line-height:1.7}
.prose h2,.prose h3{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;margin:24px 0 10px}
.prose h2{font-size:20px}.prose h3{font-size:16px}
.prose ul,.prose ol{color:var(--muted);margin:0 0 14px 22px;line-height:1.7}
.prose li{margin:6px 0}
.prose a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--fuchsia)}
.prose strong{color:var(--text)}
.prose img{border-radius:12px;margin:8px 0}
@media (max-width:1020px){
.grid3{grid-template-columns:repeat(2,1fr)}
.section{margin-top:60px}
}
@media (max-width:640px){
.grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat-content .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
.pmeta{padding:10px;gap:7px}
.ptitle{font-size:12px;line-height:1.32}
.prow{gap:6px}
.seller-row{min-width:0;flex-direction:column;align-items:flex-start;gap:3px;font-size:10.5px}
.mi svg{width:11px;height:11px}
.pcard-badges{gap:4px}
.pcard-badge{width:24px;height:24px;flex-basis:24px}
.pcard-badge svg{width:13px;height:13px}
.price{font-size:14px}
.oldprice{font-size:10px}
.tagchip,.offchip{top:7px;padding:3px 7px;font-size:9px}
.tagchip{left:7px}
.offchip{right:7px}
.prechip{left:7px;bottom:7px;max-width:calc(100% - 14px);padding:3px 6px;font-size:9.5px;gap:3px}
.section{margin-top:52px}
}
@media (max-width:380px){
.pmeta{padding:9px}
.price{font-size:13.5px}
.pcard-prepaid-facts{grid-template-columns:minmax(0,1fr)}
}
/* ============================================================
SIGN-IN — shared form styling + the sitewide modal
============================================================
Lives here, not in woocommerce.css, because the modal is printed in the
footer of EVERY page while woocommerce.css only loads on cart / checkout /
my-account. The account page reuses these same classes so the two surfaces
cannot drift apart visually.
Markup: template-parts/auth-modal.php Behaviour: assets/js/auth.js
------------------------------------------------------------ */
/* ---- shared form body (modal + page card) ---- */
.k4g-auth-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 7px;letter-spacing:.01em}
.k4g-auth-field{margin:0 0 14px}
.k4g-auth-input{
width:100%;
box-sizing:border-box;
background:var(--bg2);
border:1px solid var(--line2);
border-radius:11px;
color:var(--text);
font:inherit;
font-size:14.5px;
padding:12px 14px;
transition:border-color .18s, box-shadow .18s;
}
.k4g-auth-input::placeholder{color:var(--dim)}
.k4g-auth-input:hover{border-color:rgba(255,255,255,.2)}
.k4g-auth-input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.25)}
.k4g-auth-input:-webkit-autofill,
.k4g-auth-input:-webkit-autofill:hover,
.k4g-auth-input:-webkit-autofill:focus{
-webkit-text-fill-color:var(--text);
-webkit-box-shadow:0 0 0 1000px var(--bg2) inset;
caret-color:var(--text);
transition:background-color 9999s ease-out 0s;
}
.k4g-auth-submit{width:100%;justify-content:center;font-size:14.5px;padding:13px 22px}
.k4g-auth-hint{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--dim)}
.k4g-auth-method-head{display:grid;gap:4px;margin:0 0 14px}
.k4g-auth-method-title{color:var(--text);font:700 13.5px/1.35 'Space Grotesk','Inter',sans-serif}
.k4g-auth-method-copy{margin:0;color:var(--dim);font-size:12px;line-height:1.5}
.k4g-auth-tabpanel[hidden]{display:none}
/* Response line. Same visual weight either way — it must not read as a verdict
on whether the address exists. */
.k4g-auth-msg{
margin:12px 0 0;
font-size:13px;
line-height:1.55;
padding:10px 12px;
border-radius:10px;
border:1px solid var(--line2);
background:var(--bg2);
color:var(--text);
}
.k4g-auth-msg.is-ok{border-color:rgba(89,208,255,.45);background:rgba(89,208,255,.08)}
.k4g-auth-msg.is-err{border-color:rgba(225,75,200,.45);background:rgba(225,75,200,.08)}
.k4g-auth-magic.is-sent .k4g-auth-submit{opacity:.55}
/* ---- "or" divider + Google (present only when credentials are configured) ---- */
.k4g-auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--dim);font-size:12px}
.k4g-auth-or::before,.k4g-auth-or::after{content:"";flex:1;height:1px;background:var(--line2)}
.k4g-auth-google{
display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;box-sizing:border-box;
background:#fff;color:#1f1f1f;
border-radius:11px;
font-weight:600;font-size:14.5px;
padding:12px 18px;
transition:.18s;
}
.k4g-auth-google:hover{background:#f1f2f6;transform:translateY(-1px)}
.k4g-auth-google:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.k4g-auth-glogo{width:18px;height:18px;flex:none}
/* admin-only explanation of why the Google button is absent */
.k4g-auth-adminnote{
margin:16px 0 0;padding:10px 12px;
border:1px dashed var(--line2);border-radius:10px;
background:var(--bg2);color:var(--muted);
font-size:12.5px;line-height:1.55;
}
.k4g-auth-adminnote-tag{display:block;margin-top:4px;color:var(--dim);font-size:11.5px}
/* ---- password sign-in ---- */
.k4g-auth-pw{margin:0;border:0;padding:0}
.k4g-auth-pwform{padding-top:0}
.k4g-auth-remember{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--muted);font-size:13px;cursor:pointer}
.k4g-auth-remember input{width:15px;height:15px;accent-color:var(--violet);flex:none}
.k4g-auth-pwsubmit{width:100%;justify-content:center;padding:12px 18px}
.k4g-auth-secondary-actions{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
margin-top:15px;padding-top:14px;border-top:1px solid var(--line);
color:var(--dim);font-size:12px;
}
.k4g-auth-secondary-actions.is-single{justify-content:center}
.k4g-auth-switch{
padding:0;border:0;background:transparent;color:var(--ice);
font:700 12px/1.4 'Inter',sans-serif;cursor:pointer;
}
.k4g-auth-secondary-actions a{color:var(--muted);font-weight:650;text-decoration:none}
.k4g-auth-switch:hover,.k4g-auth-secondary-actions a:hover{color:var(--fuchsia);text-decoration:underline;text-underline-offset:3px}
.k4g-auth-switch:focus-visible,.k4g-auth-secondary-actions a:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px}
/* ---- shared head (badge + title + sub) ---- */
.k4g-auth-badge{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:12px;
background:var(--grad);
box-shadow:0 10px 26px -12px rgba(225,75,200,.7);
margin:0;
flex:0 0 auto;
}
.k4g-auth-badge svg{stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k4g-auth-title{
font-family:'Space Grotesk','Inter',sans-serif;
font-size:23px;font-weight:700;color:var(--text);
margin:0 0 6px;line-height:1.2;
}
.k4g-auth-sub{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
/* ============================================================
THE MODAL
============================================================ */
.k4g-auth-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.k4g-auth-overlay[hidden]{display:none}
.k4g-auth-backdrop{position:absolute;inset:0;background:rgba(5,6,12,.72);backdrop-filter:blur(5px)}
body.k4g-auth-open{overflow:hidden}
body.k4g-auth-open #chat-widget-container{display:none!important}
.k4g-auth-dialog{
position:relative;
width:100%;
max-width:760px;
max-height:calc(100vh - 40px);
overflow-y:auto;
background:var(--panel);
border:1px solid var(--line2);
border-radius:18px;
box-shadow:var(--shadow);
display:grid;
grid-template-columns:260px minmax(0,1fr);
padding:0;
animation:k4g-auth-in .22s ease-out;
}
@keyframes k4g-auth-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.k4g-auth-x{
position:absolute;top:12px;right:12px;
z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:10px;
background:transparent;border:1px solid transparent;
color:var(--muted);cursor:pointer;transition:.18s;
}
.k4g-auth-x:hover{background:var(--panel2);color:var(--text);border-color:var(--line)}
.k4g-auth-x:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.k4g-auth-x svg{stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k4g-auth-dialog-aside{
position:relative;
overflow:hidden;
min-height:100%;
padding:34px 28px;
border-right:1px solid rgba(139,92,246,.24);
background:
radial-gradient(circle at 12% 9%,rgba(225,75,200,.28),transparent 34%),
radial-gradient(circle at 86% 88%,rgba(89,208,255,.16),transparent 38%),
linear-gradient(155deg,#21153c 0%,#151327 58%,#111522 100%);
}
.k4g-auth-dialog-aside::after{
content:"";
position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:28px 28px;
pointer-events:none;
}
.k4g-auth-dialog-aside>*{position:relative;z-index:1}
.k4g-auth-aside-kicker{display:inline-flex;margin:0 0 18px;color:#cfbfff;font-size:10.5px;font-weight:800;letter-spacing:.17em}
.k4g-auth-dialog-aside h3{
max-width:190px;margin:0 0 26px;
color:#fff;font-family:'Space Grotesk','Inter',sans-serif;
font-size:23px;line-height:1.18;
}
.k4g-auth-dialog-aside ul{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.k4g-auth-dialog-aside li{display:flex;align-items:flex-start;gap:11px;color:#c7c3d8;font-size:12.5px;line-height:1.45}
.k4g-auth-dialog-aside li svg{
flex:0 0 auto;margin-top:1px;
stroke:#bca5ff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.k4g-auth-dialog-main{min-width:0;padding:30px 30px 26px}
.k4g-auth-dialog-head{display:flex;align-items:flex-start;gap:13px;margin:0 0 22px;padding-right:36px}
.k4g-auth-dialog-head .k4g-auth-sub{max-width:390px}
@media (max-width:700px){
.k4g-auth-dialog{max-width:440px;grid-template-columns:minmax(0,1fr)}
.k4g-auth-dialog-aside{display:none}
}
@media (prefers-reduced-motion:reduce){
.k4g-auth-dialog{animation:none}
.k4g-auth-google:hover,.btn:hover{transform:none}
.pcard:hover .cover img,.pcard:hover .cover .blob{transform:none}
}
/* 375px: full-bleed sheet, nothing clipped, no horizontal overflow */
@media (max-width:460px){
.k4g-auth-overlay{padding:0;align-items:flex-end}
.k4g-auth-dialog{
position:fixed;
left:0;right:0;bottom:0;
width:100%;
max-width:none;
max-height:92dvh;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
border-radius:18px 18px 0 0;
border-left:none;border-right:none;border-bottom:none;
}
.k4g-auth-dialog-main{padding:20px 18px calc(18px + env(safe-area-inset-bottom))}
.k4g-auth-dialog-head{gap:11px;margin-bottom:14px}
.k4g-auth-badge{width:36px;height:36px;border-radius:11px}
.k4g-auth-secondary-actions{align-items:flex-start;flex-direction:column}
.k4g-auth-secondary-actions.is-single{align-items:center}
@keyframes k4g-auth-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.k4g-auth-title{font-size:21px}
}
/* ---- Platform brand badge (homepage cards + search): official mark, white on the brand colour ---- */
.k4g-brand-badge{--brand:#3a3f55;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:var(--brand);color:#fff}
.k4g-brand-badge svg{width:13px;height:13px;fill:currentColor;stroke:none}
.k4g-brand-badge svg[fill="none"]{fill:none;stroke:currentColor}
.k4g-brand-badge--steam{--brand:#1b2838;box-shadow:inset 0 0 0 1px rgba(102,192,244,.45)}
.k4g-brand-badge--psn{--brand:#0070d1}
.k4g-brand-badge--xbox{--brand:#107c10}
.k4g-brand-badge--nintendo{--brand:#e60012}
.k4g-brand-badge--google-play{--brand:#01875f}
.k4g-brand-badge--epic-games{--brand:#2a2a2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.k4g-brand-badge--gog{--brand:#86328a}
.k4g-brand-badge--ea{--brand:#ff4747}
.k4g-brand-badge--ubisoft{--brand:#0070ff}
.k4g-brand-badge--battle-net{--brand:#148eff}
.k4g-brand-badge--rockstar{--brand:#fcaf17;color:#000}
.k4g-brand-badge--microsoft-store{--brand:#0078d4}
.k4g-brand-badge--apple{--brand:#555}
.k4g-brand-badge--amazon{--brand:#ff9900;color:#111}
.k4g-brand-badge--netflix{--brand:#e50914}
.k4g-brand-badge--spotify{--brand:#1db954;color:#000}
.k4g-brand-badge--riotgames{--brand:#d13639}
/* Grouped game card: several platform squares; the delivery label yields the room so the price never wraps. */
.pcard-badges-multi{gap:3px}.pcard-badges-multi .k4g-brand-badge{width:20px;height:20px;flex-basis:20px}.pcard-badges-multi .k4g-brand-badge svg{width:12px;height:12px}
.pcard:has(.pcard-badges-multi) .seller-row .mi{display:none}
/* Platform icons sit in one place on every card (owner, 24.09.2026): their own line, price under them on the right. */
.pcard .prow>.price{grid-column:1 / -1;grid-row:3;justify-self:end;margin-top:6px}
.pcard:has(.pcard-badges-multi) .prow>.price{white-space:nowrap}
.pcard .prow>.pcard-price-label{grid-row:3;text-align:right;margin-top:6px}
.pcard .prow>.pcard-price-label~.price{grid-row:4;margin-top:0}
/* Automatic discounts (Key4Games › Discounts): old price + badge on the home cards and the product page. */
.card__old-price{margin-right:4px;color:var(--muted,#8b93b0);font-size:.8em;font-weight:500}
.card__discount{display:inline-block;margin-right:4px;padding:1px 6px;border-radius:6px;background:var(--grad,linear-gradient(90deg,#8b5cf6,#d15bd0));color:#fff;font-size:.72em;font-weight:800;vertical-align:middle}
.price-block .k4g-old-price{display:inline-flex;align-items:center;gap:8px;margin-left:12px;color:var(--muted,#8b93b0);font-size:16px;vertical-align:middle}
.price-block .k4g-old-price b{padding:2px 8px;border-radius:8px;background:var(--grad,linear-gradient(90deg,#8b5cf6,#d15bd0));color:#fff;font-size:13px}
/* Cart modal, owner's checkout design (27.09.2026): big covers, "Just added" ribbon,
"Often bought together", subtotal + Continue shopping / Checkout · total. */
.k4g-cart-drawer .k4g-cart-backdrop{background:rgba(6,7,12,.62)}
.k4g-cart-drawer .k4g-cart-panel{width:min(600px,100%);max-height:min(90vh,760px);border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#141828;box-shadow:0 40px 100px -30px rgba(0,0,0,.9),0 0 0 1px rgba(225,75,200,.08)}
.k4g-cart-drawer .k4g-cart-head{align-items:center;gap:14px;padding:18px 20px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.k4g-cart-drawer .k4g-cart-head-thumb{flex:none;width:96px;height:60px;border-radius:10px;background:#20264a center/cover no-repeat;box-shadow:0 12px 26px -8px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
.k4g-cart-drawer .k4g-cart-head-thumb[hidden]{display:none}
.k4g-cart-drawer .k4g-cart-head-text{flex:1;min-width:0}
.k4g-cart-drawer .k4g-cart-head h2{margin:2px 0 0;font-size:19px;font-weight:800;line-height:1.25;font-family:inherit;color:#eef0f8}
.k4g-cart-drawer .has-added .k4g-cart-eyebrow{display:none}
.k4g-cart-drawer .has-added .k4g-cart-head h2{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:700;line-height:22px;color:#8fe98f}
.k4g-cart-drawer .has-added .k4g-cart-head h2::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#45d245 no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.k4g-cart-drawer .k4g-cart-head-name{display:block;margin-top:2px;overflow:hidden;font-size:19px;font-weight:800;line-height:1.25;color:#eef0f8;white-space:nowrap;text-overflow:ellipsis}
.k4g-cart-drawer .k4g-cart-head-name[hidden]{display:none}
.k4g-cart-drawer .k4g-cart-close{align-self:flex-start;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#7f869b}
.k4g-cart-drawer .k4g-cart-close:hover{background:rgba(255,255,255,.06);color:#fff}
.k4g-cart-drawer .k4g-cart-body{gap:10px;padding:12px 14px}
.k4g-cart-drawer .k4g-cart-item{grid-template-columns:232px minmax(0,1fr);align-items:stretch;gap:0;min-height:136px;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:#181d31}
.k4g-cart-drawer .k4g-cart-item.is-new{border-color:rgba(69,210,69,.45)}
.k4g-cart-drawer .k4g-cart-item-cover{position:relative;display:block;min-height:134px;background:#20264a;overflow:hidden}
.k4g-cart-drawer .k4g-cart-item-cover img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;background:none;transition:transform .5s}
.k4g-cart-drawer .k4g-cart-item:hover .k4g-cart-item-cover img{transform:scale(1.06)}
.k4g-cart-drawer .k4g-cart-rib{position:absolute;top:10px;left:0;padding:3px 10px 3px 8px;border-radius:0 7px 7px 0;background:#45d245;color:#0b0d15;font-size:10.5px;font-weight:800;line-height:1.5;letter-spacing:.06em;text-transform:uppercase}
.k4g-cart-drawer .k4g-cart-off{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:7px;background:linear-gradient(120deg,#8b5cf6,#e14bc8);color:#fff;font-size:11.5px;font-weight:800;line-height:1.5;box-shadow:0 6px 14px -6px rgba(225,75,200,.7)}
.k4g-cart-drawer .k4g-cart-item-copy{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 16px 14px 14px}
.k4g-cart-drawer .k4g-cart-item-copy > b{padding-right:34px;font-size:15.5px;font-weight:700;line-height:1.35;color:#eef0f8}
.k4g-cart-drawer .k4g-cart-remove{position:absolute;top:10px;right:10px;width:30px;height:30px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(11,13,21,.35);color:#aab0c2}
.k4g-cart-drawer .k4g-cart-remove:hover{border-color:transparent;background:linear-gradient(135deg,#ff5f7e,#e14b8a);color:#fff}
.k4g-cart-drawer .k4g-cart-item-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto}
.k4g-cart-drawer .k4g-cart-item-copy .k4g-cart-item-end{display:block;height:auto;color:#eef0f8}
.k4g-cart-drawer .k4g-cart-item-end s{display:block;margin-bottom:2px;font-size:12px;font-weight:500;line-height:1.1;color:#7f869b}
.k4g-cart-drawer .k4g-cart-item-price{display:block;font-size:21px;font-weight:800;line-height:1.1;color:#eef0f8}
.k4g-cart-drawer .k4g-cart-item-copy .k4g-cart-qty{gap:2px;height:36px;margin:0;padding:3px;border:1px solid rgba(255,255,255,.08);border-radius:99px;background:rgba(11,13,21,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);overflow:visible}
.k4g-cart-drawer .k4g-cart-item-copy .k4g-qty-btn{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:14px;transition:background .2s,transform .15s}
.k4g-cart-drawer .k4g-cart-item-copy .k4g-qty-btn:hover:not(:disabled){background:linear-gradient(120deg,#8b5cf6,#e14bc8);transform:scale(1.1)}
.k4g-cart-drawer .k4g-cart-item-copy .k4g-qty-btn:disabled{opacity:.3;cursor:not-allowed}
.k4g-cart-drawer .k4g-cart-item-copy .k4g-qty-val{min-width:26px;font-size:14px;font-weight:800;color:#fff}
.k4g-cart-drawer .k4g-cart-up{flex:none;padding:12px 20px 4px;border-top:1px solid rgba(255,255,255,.07)}
.k4g-cart-drawer .k4g-cart-up[hidden]{display:none}
.k4g-cart-drawer .k4g-cart-up-h{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7f869b}
.k4g-cart-drawer .k4g-cart-up-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.k4g-cart-drawer .k4g-cart-u{display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:#10131d;color:#eef0f8;text-decoration:none;transition:border-color .2s}
.k4g-cart-drawer .k4g-cart-u:hover{border-color:rgba(139,92,246,.45)}
.k4g-cart-drawer .k4g-cart-u-cv{flex:none;width:44px;height:44px;border-radius:8px;background:#20264a center/cover no-repeat}
.k4g-cart-drawer .k4g-cart-u-t{display:grid;flex:1;min-width:0;line-height:1.3}
.k4g-cart-drawer .k4g-cart-u-t b{overflow:hidden;font-size:12.5px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.k4g-cart-drawer .k4g-cart-u-t span{font-size:13px;font-weight:800}
.k4g-cart-drawer .k4g-cart-u-go{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:99px;background:linear-gradient(120deg,#8b5cf6,#e14bc8);color:#fff}
.k4g-cart-drawer .k4g-cart-foot{gap:0;padding:16px 20px 20px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.12)}
.k4g-cart-drawer .k4g-cart-total{align-items:baseline;margin:0}
.k4g-cart-drawer .k4g-cart-total span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7f869b}
.k4g-cart-drawer .k4g-cart-total strong{font-size:30px;font-weight:800;line-height:1.5;color:#eef0f8}
.k4g-cart-drawer .k4g-cart-note{margin:2px 0 0;font-size:12px;color:#7f869b}
.k4g-cart-drawer .k4g-cart-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;margin-top:14px}
.k4g-cart-drawer .k4g-cart-continue{height:50px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:none;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:border-color .2s,background .2s}
.k4g-cart-drawer .k4g-cart-continue:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.03)}
.k4g-cart-drawer .k4g-cart-checkout{display:flex;align-items:center;justify-content:center;height:50px;min-height:50px;padding:0 14px;border-radius:14px;background:linear-gradient(120deg,#8b5cf6,#e14bc8);box-shadow:0 12px 30px -12px rgba(225,75,200,.6);color:#fff;font-size:15px;font-weight:700;white-space:nowrap}
.k4g-cart-drawer .k4g-cart-view{margin-top:12px;font-size:12.5px}
@media(max-width:620px){
.k4g-cart-drawer .k4g-cart-head{padding:14px 14px 12px}
.k4g-cart-drawer .k4g-cart-head-thumb{width:72px;height:45px}
.k4g-cart-drawer .k4g-cart-head-name{font-size:16px}
.k4g-cart-drawer .k4g-cart-body{padding:10px}
.k4g-cart-drawer .k4g-cart-item{grid-template-columns:120px minmax(0,1fr);min-height:124px}
.k4g-cart-drawer .k4g-cart-item-cover{min-height:0}
.k4g-cart-drawer .k4g-cart-item-copy{padding:10px 10px 10px 12px}
.k4g-cart-drawer .k4g-cart-item-copy > b{font-size:14px}
.k4g-cart-drawer .k4g-cart-item-bot{flex-wrap:wrap}
.k4g-cart-drawer .k4g-cart-item-price{font-size:17px}
.k4g-cart-drawer .k4g-cart-up{padding:10px 14px 4px}
.k4g-cart-drawer .k4g-cart-up-list{grid-template-columns:1fr}
.k4g-cart-drawer .k4g-cart-foot{padding:12px 14px 16px}
.k4g-cart-drawer .k4g-cart-total strong{font-size:24px}
.k4g-cart-drawer .k4g-cart-btns{grid-template-columns:1fr;gap:8px}
.k4g-cart-drawer .k4g-cart-continue{order:2;height:44px}
}
.k4g-cart-drawer .k4g-cart-checkout span{margin-left:.35em}
/* Header dropdown mini cart (design F, 27.09.2026). */
@keyframes k4gHpIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes k4gHpRow{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.k4g-hp{position:fixed;z-index:10020;width:400px;max-width:calc(100vw - 24px);box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;padding:14px;
border-radius:24px;border:1px solid rgba(255,255,255,.08);color:#eef0f8;
background:radial-gradient(120% 80% at 100% 0%,rgba(225,75,200,.12),transparent 60%),radial-gradient(120% 80% at 0% 100%,rgba(139,92,246,.1),transparent 60%),#141828;
box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.k4g-hp[hidden]{display:none}
.k4g-hp.is-in{animation:k4gHpIn .28s cubic-bezier(.2,.9,.3,1.1)}
.k4g-hp-empty{margin:0;padding:18px 14px;font-size:13px;color:#7f869b;text-align:center}
.k4g-hp-list{display:grid;gap:8px}
.k4g-hp-it{position:relative;display:grid;grid-template-columns:148px minmax(0,1fr);min-height:82px;overflow:hidden;border:1px solid rgba(255,255,255,.04);border-radius:12px;background:rgba(255,255,255,.04);transition:background .2s,border-color .2s,opacity .22s,transform .22s}
.k4g-hp.is-fresh .k4g-hp-it{animation:k4gHpRow .35s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i)*50ms)}
.k4g-hp-it:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.k4g-hp-cv{display:block;min-height:82px;background:#20264a center/cover no-repeat}
.k4g-hp-mid{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;padding:9px 10px}
.k4g-hp-mid b{padding-right:24px;overflow:hidden;font-size:13px;font-weight:700;line-height:1.35;color:#eef0f8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.k4g-hp-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.k4g-hp-pr{display:grid;line-height:1.15}
.k4g-hp-pr strong{font-size:15px;font-weight:800;color:#eef0f8}
.k4g-hp-pr s{font-size:10.5px;color:#7f869b}
.k4g-hp-step{display:inline-flex;align-items:center;gap:2px;height:28px;padding:2px;box-sizing:border-box;border:1px solid rgba(255,255,255,.08);border-radius:99px;background:rgba(11,13,21,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.k4g-hp-step button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:13px;line-height:1;cursor:pointer;transition:background .2s,transform .15s}
.k4g-hp-step button:hover:not(:disabled){background:linear-gradient(120deg,#8b5cf6,#e14bc8);transform:scale(1.1)}
.k4g-hp-step button:disabled{opacity:.3;cursor:not-allowed}
.k4g-hp-step output{min-width:20px;text-align:center;font-size:12.5px;font-weight:800;color:#fff}
.k4g-hp-rm{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(11,13,21,.35);color:#aab0c2;cursor:pointer;transition:color .2s,background .25s,border-color .2s}
.k4g-hp-rm:hover{color:#fff;background:linear-gradient(135deg,#ff5f7e,#e14b8a);border-color:transparent}
.k4g-hp-f{display:grid;gap:10px;margin-top:4px;padding:14px 4px 0}
.k4g-hp-f p{margin:0}
.k4g-hp-save{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:#8fe98f}
.k4g-hp-save b{font-weight:900}
.k4g-hp-sum{display:flex;align-items:baseline;justify-content:space-between}
.k4g-hp-sum span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7f869b}
.k4g-hp-sum b{font-size:22px;font-weight:800;color:#eef0f8}
.k4g-hp-btns{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px}
.k4g-hp-btns a{display:flex;align-items:center;justify-content:center;height:42px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none!important;color:#fff!important}
.k4g-hp-view{border:1px solid rgba(255,255,255,.12)}
.k4g-hp-view:hover{background:rgba(255,255,255,.04)}
.k4g-hp-go{background:linear-gradient(120deg,#8b5cf6,#e14bc8);box-shadow:0 10px 24px -12px rgba(225,75,200,.6)}
.site-header .cart-btn.is-open{border-color:#e14bc8!important;box-shadow:0 0 0 3px rgba(225,75,200,.18)}
@media (max-width:560px){.k4g-hp{width:auto}.k4g-hp-it{grid-template-columns:40% minmax(0,1fr)}}
/* "You save" in the Added-to-cart modal; phones get the compact modal. */
.k4g-cart-drawer .k4g-cart-save{display:flex;justify-content:space-between;margin:0 0 8px;font-size:12.5px;font-weight:600;color:#8fe98f}
.k4g-cart-drawer .k4g-cart-save[hidden]{display:none}
.k4g-cart-drawer .k4g-cart-save b{font-weight:900}
@media (max-width:560px){
.k4g-cart-drawer .k4g-cart-up,.k4g-cart-drawer .k4g-cart-note{display:none!important}
.k4g-cart-drawer .k4g-cart-item{grid-template-columns:34% minmax(0,1fr);min-height:100px}
.k4g-cart-drawer .k4g-cart-item-copy{padding:9px 10px;gap:6px}
.k4g-cart-drawer .k4g-cart-item-copy > b{font-size:13.5px}
.k4g-cart-drawer .k4g-cart-item-price{font-size:16px}
.k4g-cart-drawer .k4g-cart-item-end s{font-size:10.5px;margin-bottom:0}
.k4g-cart-drawer .k4g-cart-rib{top:6px;font-size:0;padding:3px 8px}
.k4g-cart-drawer .k4g-cart-rib::before{content:attr(data-short);font-size:10.5px}
}
/* Mini cart motion: quantity pop, subtotal bump, bin wobble, row slides out, icon wiggles on open. */
@keyframes k4gHpQPop{0%{transform:scale(1)}40%{transform:scale(1.45);color:#f0a5ff}100%{transform:scale(1)}}
@keyframes k4gHpBump{40%{transform:scale(1.06)}}
@keyframes k4gHpBin{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes k4gHpWig{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(9deg)}75%{transform:rotate(-4deg)}}
.k4g-hp-step output{display:inline-block}
.k4g-hp-step output.is-bump{animation:k4gHpQPop .35s cubic-bezier(.2,.9,.3,1.5)}
.k4g-hp-sum b{display:inline-block;transform-origin:right center}
.k4g-hp-sum b.is-bump{animation:k4gHpBump .45s ease}
.k4g-hp-rm:hover svg,.k4g-hp-rm:focus-visible svg{animation:k4gHpBin .45s ease}
.k4g-hp-it.is-gone{opacity:0;transform:translateX(12px);pointer-events:none}
.site-header .cart-btn.is-wig svg{animation:k4gHpWig .5s ease}
@media (prefers-reduced-motion:reduce){.k4g-hp *,.k4g-hp-it,.site-header .cart-btn.is-wig svg{animation:none!important;transition:none!important}}
/* Card arrow quick add: stays visible while adding, glows once added. */
@keyframes k4gQuickPulse{50%{box-shadow:0 0 0 6px rgba(225,75,200,0)}0%,100%{box-shadow:0 0 0 0 rgba(225,75,200,.55)}}
[data-k4g-quick]{cursor:pointer}
[data-k4g-quick].is-busy,[data-k4g-quick].is-added{opacity:1!important;scale:1!important}
[data-k4g-quick].is-busy{animation:k4gQuickPulse 1s ease-in-out infinite}
[data-k4g-quick].is-added{background-image:none!important;background-color:#45d245!important}
@media (prefers-reduced-motion:reduce){[data-k4g-quick].is-busy{animation:none}}
/* Order-size bar (design F): header dropdown and Added-to-cart modal. */
.k4g-hp-goal,.k4g-cart-goal{display:flex;align-items:center;gap:10px}
.k4g-hp-goal{margin:10px 0 0;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.035)}
.k4g-cart-goal{gap:12px;margin:0 0 14px}
[data-k4g-cart-goal][hidden]{display:none}
.k4g-hp-gi,.k4g-cart-gi{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(120deg,#8b5cf6,#e14bc8);box-shadow:0 6px 14px -6px rgba(225,75,200,.7);color:#fff;font-size:13px;font-weight:800}
.k4g-cart-gi{width:34px;height:34px}
.k4g-hp-gc,.k4g-cart-gc{display:block;flex:1;min-width:0}
.k4g-hp-gt,.k4g-cart-gt{display:block;font-size:12.5px;line-height:1.4;color:#aab0c2}
.k4g-cart-gt{font-size:13px}
.k4g-hp-gt b,.k4g-cart-gt b{font-weight:800;color:#fff}
.k4g-hp-gt b.is-g,.k4g-cart-gt b.is-g{background:linear-gradient(120deg,#8b5cf6,#e14bc8);-webkit-background-clip:text;background-clip:text;color:transparent}
.k4g-hp-gb,.k4g-cart-gb{position:relative;display:block;height:4px;margin-top:7px;border-radius:4px;background:rgba(255,255,255,.08)}
.k4g-cart-gb{margin-top:8px}
.k4g-hp-gb i,.k4g-cart-gb i{position:relative;display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(120deg,#8b5cf6,#e14bc8);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.k4g-hp-gb i::after,.k4g-cart-gb i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 0 3px rgba(225,75,200,.35),0 0 10px rgba(225,75,200,.8)}
.is-done .k4g-hp-gi,.is-done .k4g-cart-gi{background:#45d245;box-shadow:0 6px 14px -6px rgba(69,210,69,.7)}
.is-done .k4g-hp-gt,.is-done .k4g-cart-gt,.is-done .k4g-hp-gt b,.is-done .k4g-cart-gt b{color:#8fe98f}
.is-done .k4g-hp-gb i,.is-done .k4g-cart-gb i{background:#45d245}
.is-done .k4g-hp-gb i::after,.is-done .k4g-cart-gb i::after{display:none}
@media (prefers-reduced-motion:reduce){.k4g-hp-gb i,.k4g-cart-gb i{transition:none}}
/* Added-to-cart modal: the same motion as the header dropdown. */
.k4g-cart-drawer .k4g-qty-val{display:inline-block}
.k4g-cart-drawer .k4g-qty-val.is-bump{animation:k4gHpQPop .35s cubic-bezier(.2,.9,.3,1.5)}
.k4g-cart-drawer [data-k4g-cart-total]{display:inline-block;transform-origin:right center}
.k4g-cart-drawer [data-k4g-cart-total].is-bump{animation:k4gHpBump .45s ease}
.k4g-cart-drawer .k4g-cart-remove:hover svg,.k4g-cart-drawer .k4g-cart-remove:focus-visible svg{animation:k4gHpBin .45s ease}
.k4g-cart-drawer .k4g-cart-item{transition:opacity .22s,transform .22s}
.k4g-cart-drawer .k4g-cart-item.is-gone{opacity:0;transform:translateX(12px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.k4g-cart-drawer .k4g-qty-val,.k4g-cart-drawer [data-k4g-cart-total],.k4g-cart-drawer .k4g-cart-item{animation:none!important;transition:none!important}}
/* Added-to-cart modal (design F): lines and suggestions lift under the pointer. */
.k4g-cart-drawer .k4g-cart-item{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s,opacity .22s}
@media (hover:hover){
.k4g-cart-drawer .k4g-cart-item:not(.is-gone):hover{transform:translateY(-3px);border-color:rgba(225,75,200,.4);box-shadow:0 16px 30px -16px rgba(225,75,200,.6)}
.k4g-cart-drawer .k4g-cart-item.is-new:hover{border-color:rgba(69,210,69,.6)}
.k4g-cart-drawer .k4g-cart-u:hover{transform:translateY(-2px);border-color:rgba(225,75,200,.4);box-shadow:0 12px 24px -14px rgba(225,75,200,.55)}
.k4g-cart-drawer .k4g-cart-u:hover .k4g-cart-u-go{transform:scale(1.1);box-shadow:0 0 16px -2px rgba(225,75,200,.7)}
}
.k4g-cart-drawer .k4g-cart-u{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.k4g-cart-drawer .k4g-cart-u-go{transition:transform .2s,box-shadow .2s,background .2s}
.k4g-cart-drawer .k4g-cart-u-go[data-k4g-quick]:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.k4g-cart-drawer .k4g-cart-item,.k4g-cart-drawer .k4g-cart-u{transition:none;transform:none!important}}
/* Pre-order band on mini cart and "Added to cart" covers (owner design, 27.09). */
.k4g-cart-pre,.k4g-hp-pre{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:6px;box-sizing:border-box;border-top:2px solid #e7b04a;background:rgba(14,12,8,.92);color:#f3c969;font-weight:800;letter-spacing:.05em;line-height:1;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.k4g-cart-pre{height:24px;padding:0 10px;font-size:11px}
.k4g-hp-pre{height:18px;padding:0 6px;border-top-width:1.5px;font-size:9.5px}
.k4g-hp-pre-s{display:none}
.k4g-hp-pre.is-short .k4g-hp-pre-l,.k4g-hp-pre.is-short .k4g-hp-pre-y{display:none}.k4g-hp-pre.is-short .k4g-hp-pre-s{display:inline}
.k4g-cart-pre b,.k4g-hp-pre b{font-weight:800}
.k4g-cart-pre i,.k4g-hp-pre i{font-style:normal}
.k4g-hp-cv{position:relative;overflow:hidden}
/* One-line names in the mini cart and the modal. */
.k4g-cart-item-copy b,.k4g-hp-mid b{display:block;-webkit-line-clamp:unset;white-space:nowrap;text-overflow:ellipsis}
/* Cart modal: express Google Pay / Apple Pay after the subtotal (owner's design F2, 29.09).
Desktop: in one row next to the sum; phones: full width under it. */
.k4g-cart-total-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.k4g-xp-sm{display:flex;gap:6px}
.k4g-xp-sm-btn{height:34px;width:62px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:#fff;border:1px solid rgba(255,255,255,.9);transition:filter .2s,transform .2s}
.k4g-xp-sm-btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.k4g-xp-sm-btn svg{display:block;transform:scale(.82)}
@media (max-width:600px){
.k4g-cart-total{flex-wrap:wrap}
/* The sum stays next to "Subtotal"; the wallet row spans the whole modal width, centred
(owner 30.09: inside the right-hand wrapper it sat shifted to the right). */
.k4g-cart-total-r{display:contents}
.k4g-xp-sm{width:100%;flex-basis:100%;gap:10px;margin-top:12px}
.k4g-xp-sm-btn{height:54px;width:auto;flex:1;border-radius:14px}
.k4g-xp-sm-btn svg{transform:none}
}
/* Square-cornered (14px) primary actions of the checkout design. */
html body:not(#k4g) .k4g-cart-checkout,html body:not(#k4g) .k4g-cart-continue{border-radius:14px}
.k4g-cart-earn{margin:0 0 12px;font-size:13px;font-weight:600;color:#3ddc84}
.k4g-cart-earn[hidden]{display:none}
/* k4g-categories-mega */
/* Header "All categories" mega menu (owner's design, 01.10.2026). Generated by scope_cats.py. */
.k4g-cats.k4g-cats--mega{position:absolute;left:0;right:0;top:100%;z-index:60;container:site/inline-size;font-family:var(--f-body);color:var(--fg);line-height:1.5;background:none;overflow:visible}
.k4g-cats.k4g-cats--mega[hidden]{display:none}.k4g-cats.k4g-cats--mega a{color:inherit;text-decoration:none}.k4g-cats.k4g-cats--mega img{max-width:none}
.k4g-cats.k4g-cats--mega .mega{position:relative;top:0;left:auto;right:auto}
.k4g-cats-scrim{position:fixed;inset:0;z-index:45;background:rgba(5,6,12,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.k4g-cats-scrim[hidden]{display:none}
.k4g-cats{color-scheme:dark;
--bg:#0b0d14; --header:#0d0e18; --field:#151827; --panel:#10121c; --card:#10131d; --card-2:#151827; --chip:#161a2b;
--line:#23273b; --line-2:#2c3048;
--fg:#f1f2f7; --fg-2:#a9adc2; --fg-3:#7c8098;
--accent:#8b5cf6; --accent-soft:#c4a6ff;
--grad:linear-gradient(100deg,#8b5cf6 0%,#b55ad9 55%,#d94fc0 100%);
--f-head:"Space Grotesk",system-ui,sans-serif; --f-body:"Inter",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;}
.k4g-cats{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.k4g-cats{container:site/inline-size;position:relative;background:var(--bg);overflow:hidden}
@keyframes cats-drift{33%{transform:translate(80px,60px) scale(1.1)}66%{transform:translate(-40px,120px) scale(.95)}100%{transform:translate(60px,-30px) scale(1.05)}}
@keyframes cats-floor{to{background-position:0 48px,50% 0}}
@keyframes cats-tin{from{opacity:.001;translate:0 22px;scale:.97}}
@keyframes cats-spin{to{--ang:360deg}}
@keyframes cats-bob{50%{transform:translateY(-6px)}}
@keyframes cats-vin{from{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes cats-scan{to{top:100%}}
@keyframes cats-pop{0%,10%{opacity:0;scale:.6}18%,88%{opacity:1;scale:1}100%{opacity:0}}
@keyframes cats-dot{50%{translate:0 -4px;background:#c4a6ff}}
@keyframes cats-c-typ{0%,3%{opacity:0}6%,24%{opacity:1}27%,100%{opacity:0}}
@keyframes cats-c-b1{0%,25%{opacity:0;translate:0 8px}31%,92%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes cats-c-b2{0%,55%{opacity:0;translate:0 8px}61%,92%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes cats-flip{from{transform:translateY(100%);opacity:0}}
@keyframes cats-blink{50%{opacity:0}}
@keyframes cats-run{0%{width:0}70%,90%{width:calc(100% - 48px)}100%{width:calc(100% - 48px);opacity:0}}
@keyframes cats-lit{0%,4%{background:#171a2b;color:var(--fg-3);box-shadow:inset 0 0 0 2px #2c3048}10%,85%{background:#8b5cf6;color:#fff;box-shadow:0 0 0 5px rgba(139,92,246,.2),0 0 18px rgba(139,92,246,.7)}100%{background:#171a2b}}
@keyframes cats-sheen{60%,100%{left:110%}}
@keyframes cats-bfloat{50%{translate:0 -6px}}
@keyframes cats-lfloat{50%{translate:0 -7px}}
@keyframes cats-ember{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-150px)}}
@keyframes cats-eye{0%,60%,100%{opacity:0}70%,85%{opacity:.95}}
@keyframes cats-gshine{0%,55%{background-position:150% 0}100%{background-position:-60% 0}}
@keyframes cats-capglow{50%{filter:drop-shadow(0 12px 16px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(60,160,255,.85))}}
@keyframes cats-coin{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-10px) rotateY(180deg)}}
@keyframes cats-glint{50%{opacity:.35;transform:scale(.85)}}
@keyframes cats-spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:1;transform:scale(1.1) rotate(45deg)}}
@keyframes cats-mring{50%{transform:scale(1.08);opacity:.5}}
@keyframes cats-tokf{50%{translate:0 -9px}}
@keyframes cats-tspin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.15)}}
.k4g-cats .mega-scrim{position:absolute;inset:67px 0 0;z-index:28;background:rgba(5,6,12,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:cats-mfade .25s}
.k4g-cats .mega{position:absolute;left:0;right:0;top:67px;z-index:29;padding:12px 16px 0;animation:cats-mdrop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes cats-mdrop{from{opacity:0;transform:translateY(-10px)}}
@keyframes cats-mfade{from{opacity:0}}
.k4g-cats .mega-in{max-width:1220px;margin:0 auto;padding:16px;border-radius:22px;background:rgba(16,15,30,.96);border:1px solid #2a2446;box-shadow:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(139,92,246,.08) inset}
.k4g-cats .mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.k4g-cats .mc{--tint:139,92,246;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:178px;padding:14px;border-radius:16px;overflow:hidden;isolation:isolate;
background:radial-gradient(90% 80% at 75% 20%,rgba(var(--tint),.38),transparent 70%),linear-gradient(160deg,#17162b,#0e0f1b);border:1px solid rgba(255,255,255,.07);
transition:border-color .25s,transform .25s,box-shadow .25s;animation:cats-mcin .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*35ms)}
@keyframes cats-mcin{from{opacity:0;transform:translateY(8px)}}
.k4g-cats .mc:hover{border-color:rgba(var(--tint),.7);transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(var(--tint),.9)}
.k4g-cats .mc .mimg{position:absolute;z-index:-1;right:-6%;top:-6%;width:72%;height:auto;max-width:none;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.k4g-cats .mc:hover .mimg{transform:translateY(-4px) scale(1.06) rotate(-2deg)}
.k4g-cats .mc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(12,12,24,.97) 30%,rgba(12,12,24,.5) 58%,transparent 80%)}
.k4g-cats .mc .mh{display:flex;align-items:center;gap:10px}
.k4g-cats .mc .mi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:rgba(var(--tint),.22);box-shadow:inset 0 0 0 1px rgba(var(--tint),.55);color:#fff}
.k4g-cats .mc .mi svg{width:19px;height:19px}
.k4g-cats .mc .mt{min-width:0}
.k4g-cats .mc .mt b{display:block;font:700 16px/1.2 var(--f-head);color:#fff}
.k4g-cats .mc .mt small{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.k4g-cats .mc .mgo{margin-left:auto;color:var(--fg-3);transition:transform .25s,color .25s}
.k4g-cats .mc:hover .mgo{color:#fff;transform:translateX(3px)}
.k4g-cats .mc .msub{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.k4g-cats .mc .msub .mq{position:relative;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .2s,transform .2s,box-shadow .2s}
.k4g-cats .mc .msub .mq img{width:14px;height:14px;object-fit:contain}
.k4g-cats .mc .msub .mq:hover{transform:translateY(-2px)}
.k4g-cats .mc .msub .mq::after{content:attr(title);position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 4px;white-space:nowrap;background:#f1f2f7;color:#12141f;font:600 11px/1 var(--f-body);padding:5px 7px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s,translate .15s}
.k4g-cats .mc .msub .mq:hover::after{opacity:1;translate:-50% 0}
.k4g-cats .mc .msub .mq:hover{background:rgba(var(--tint),.5);box-shadow:inset 0 0 0 1px rgba(var(--tint),.9)}
.k4g-cats .mega-foot{display:flex;justify-content:center;margin-top:12px}
.k4g-cats .mega-plats{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.k4g-cats .mega-plats .ml{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-right:6px}
.k4g-cats .mega-plats a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .2s,transform .2s}
.k4g-cats .mega-plats a:hover{background:rgba(139,92,246,.35);transform:translateY(-2px)}
.k4g-cats .mega-plats img{width:18px;height:18px;object-fit:contain}
.k4g-cats .mega-all{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:11px;background:var(--grad);color:#fff;font-weight:600;font-size:14px;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.k4g-cats .mega-all:hover{transform:translateX(2px);box-shadow:0 10px 24px -10px rgba(200,80,220,.9)}
@container site (max-width:1100px){.k4g-cats .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.k4g-cats .mc{min-height:150px}}
@container site (max-width:700px){.k4g-cats .mega{top:58px;padding:8px 8px 0}
.k4g-cats .mega-scrim{inset:58px 0 0}
.k4g-cats .mega-in{padding:10px;border-radius:18px;max-height:calc(100% - 70px);overflow:auto}
.k4g-cats .mega-grid{gap:8px}
.k4g-cats .mc{min-height:126px;padding:10px}
.k4g-cats .mc .mt b{font-size:14px}
.k4g-cats .mc .mi{width:32px;height:32px}
.k4g-cats .mc .msub{display:none}
.k4g-cats .mc .mt small,.k4g-cats .mc .mgo{display:none}
.k4g-cats .mc .mh{gap:8px}
.k4g-cats .mc .mt b{font-size:13.5px}
.k4g-cats .mega-plats{display:none}
.k4g-cats .mega-all{width:100%;justify-content:center}}
.k4g-cats .mc[data-cat="mobile"] .mimg{width:86%;right:-10%;top:4%;rotate:-6deg}
.k4g-cats .mc[data-cat="currency"] .mimg{width:66%;right:-4%;top:0}
.k4g-cats .mega-foot{display:flex;justify-content:center;margin-top:14px}
.k4g-cats .mega-all{display:none!important}
.k4g-cats[data-mb="1"] .mega-all.mb1,.k4g-cats[data-mb="2"] .mega-all.mb2,.k4g-cats[data-mb="3"] .mega-all.mb3{display:flex!important}
.k4g-cats .mega-all.mb1{position:relative;padding:2px;border-radius:999px;height:auto;color:#fff;background:conic-gradient(from var(--mba),#7c5cff,#d24fc0,#ff9a3c,#7c5cff);animation:cats-mbspin 3.5s linear infinite;box-shadow:0 0 22px -6px rgba(200,80,220,.7)}
.k4g-cats .mega-all.mb1 .mb1-in{display:flex;align-items:center;gap:10px;padding:11px 22px;border-radius:999px;background:#15132a;font:600 14px var(--f-body);transition:background .3s}
.k4g-cats .mega-all.mb1:hover{transform:none;box-shadow:0 0 30px -4px rgba(200,80,220,.9)}
.k4g-cats .mega-all.mb1:hover .mb1-in{background:#211c3d}
.k4g-cats .mega-all.mb1 .mb1-in svg:last-child{transition:transform .25s}
.k4g-cats .mega-all.mb1:hover .mb1-in svg:last-child{transform:translateX(4px)}
@keyframes cats-mbspin{to{--mba:360deg}}
.k4g-cats[data-mb="2"] .mega-foot{justify-content:flex-end;padding:0 6px}
.k4g-cats .mega-all.mb2{align-items:center;gap:8px;background:none;height:auto;padding:4px 0;color:var(--fg-2);font:600 14px var(--f-body);position:relative}
.k4g-cats .mega-all.mb2::after{content:"";position:absolute;left:0;right:26px;bottom:0;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(.25);transform-origin:left;transition:transform .35s}
.k4g-cats .mega-all.mb2:hover{color:#fff;transform:none;box-shadow:none}
.k4g-cats .mega-all.mb2:hover::after{transform:scaleX(1)}
.k4g-cats .mega-all.mb2 svg{transition:transform .25s}
.k4g-cats .mega-all.mb2:hover svg{transform:translateX(4px)}
.k4g-cats .mega-all.mb3{position:relative;width:100%;height:50px;justify-content:center;align-items:center;border-radius:14px;overflow:hidden;isolation:isolate;padding:0;color:#fff;background:linear-gradient(90deg,rgba(106,76,240,.16),rgba(192,75,208,.14),rgba(240,132,74,.12)),rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background .35s,box-shadow .35s}
.k4g-cats .mega-all.mb3 .mb3-run{position:absolute;inset:0;z-index:-1;display:flex;align-items:center;gap:34px;width:max-content;opacity:.13;color:#c9b8ff;animation:cats-mbrun 26s linear infinite}
.k4g-cats .mega-all.mb3 .mb3-run svg{width:22px;height:22px;flex-shrink:0}
.k4g-cats .mega-all.mb3:hover .mb3-run{opacity:.22;animation-duration:12s}
.k4g-cats .mega-all.mb3 .mb3-t{display:flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;background:rgba(16,14,30,.75);font:600 15px var(--f-head);color:var(--fg-1,#fff)}
.k4g-cats .mega-all.mb3 .mb3-t svg{transition:transform .25s}
.k4g-cats .mega-all.mb3:hover .mb3-t svg{transform:translateX(5px)}
.k4g-cats .mega-all.mb3:hover{transform:none;background:linear-gradient(90deg,rgba(106,76,240,.26),rgba(192,75,208,.22),rgba(240,132,74,.18)),rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(200,140,255,.35)}
@keyframes cats-mbrun{to{transform:translateX(-50%)}}
/* k4g-header */
/* ============================================================
KEY4GAMES — header + search + mobile nav
============================================================ */
.site-header{
position:sticky;top:0;z-index:50;
background:rgba(11,13,21,.82);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;gap:22px;padding:14px 0}
/* 13.11.2026: "padding:14px 0" above took away the .wrap side padding, so below 1268 px the logo sat on the left
edge and the cart button was cut at the right (768: 0 px on both sides). Same 24 px as the page under it. */
@media (min-width:761px) and (max-width:1267px){.hbar{max-width:none;padding-left:24px;padding-right:24px}}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.lmark{width:38px;height:38px;border-radius:10px;box-shadow:0 8px 20px -8px rgba(139,92,246,.7);flex-shrink:0}
.ltxt{display:flex;flex-direction:column;line-height:1}
.ltxt b{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:21px;letter-spacing:.06em}
.ltxt b i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ltxt>span{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:4px}
/* search */
.searchbar{position:relative;flex:1;display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:visible;min-width:0}
.searchbar:focus-within{border-color:rgba(139,92,246,.5)}
.cat-btn{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:13.5px;font-weight:500;color:var(--muted);border-right:1px solid var(--line);white-space:nowrap;transition:color .2s;border-radius:12px 0 0 12px}
.cat-btn:hover{color:var(--text)}
.cat-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.searchbar input{flex:1;background:none;border:none;color:var(--text);padding:11px 16px;font-size:14px;min-width:0;appearance:none;-webkit-appearance:none}
.searchbar input::placeholder{color:var(--dim)}
.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.searchbar input:focus{outline:none}
.search-suggestions{position:absolute;z-index:80;top:calc(100% + 9px);left:0;right:0;max-height:min(520px,70vh);overflow:auto;padding:8px;background:rgba(17,20,36,.98);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.52);backdrop-filter:blur(18px)}
.search-suggestions[hidden]{display:none}
.search-suggestion{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;padding:8px;border-radius:10px;color:var(--text);transition:.15s}
.search-suggestion:hover,.search-suggestion.is-active{background:rgba(139,92,246,.13)}
.search-suggestion img,.search-suggestion-image{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#090c16}
.search-suggestion-copy{min-width:0;display:grid;gap:4px}
.search-suggestion-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.search-suggestion-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.search-suggestion strong{color:#fff;font-size:13px;white-space:nowrap}
.search-suggestion-all{display:flex;align-items:center;justify-content:center;margin-top:5px;padding:10px;border-top:1px solid var(--line);color:#b9a4ff;font-size:12.5px;font-weight:800}
.search-suggestion-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.search-go{background:var(--grad);width:44px;align-self:stretch;display:grid;place-items:center;transition:filter .2s;border-radius:0 11px 11px 0}
.search-go:hover{filter:brightness(1.15)}
.search-go svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}
/* dropdown menus (categories / currency) */
.cat-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:210px;max-width:min(300px,calc(100vw - 32px));max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:8px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.cat-menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--muted);font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-menu a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.cat-menu .cat-link--unavailable{display:block;padding:9px 12px;color:var(--muted);font-size:12.5px;line-height:1.35;white-space:normal}
/* second level: curated sub-items (Video Games → PC / Console). Rendered inline,
not as a hover flyout — the panel is already a JS-toggled dropdown, and a
flyout would be unreachable on touch. */
.cat-menu .cat-sub{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 10px;padding-left:8px;border-left:1px solid var(--line2)}
.cat-menu .cat-sub a{font-size:13px;color:var(--dim)}
.cat-menu .cat-sub a:hover{color:var(--text)}
/* a parent that groups children reads as a heading */
.cat-menu .cat-group{padding:9px 12px 5px;color:var(--text);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cat-menu .cat-link-group{color:var(--text);font-weight:600}
.hactions{position:relative;display:flex;align-items:center;gap:10px;flex-shrink:0}
.chip-btn{display:flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);transition:.2s}
.chip-btn:hover{color:var(--text);border-color:var(--line2)}
.chip-btn>svg{width:12px;height:12px;flex:0 0 12px;color:#cbd5e1;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip-btn:hover>svg,.chip-btn:focus-visible>svg{color:#fff}
.k4g-language-flag{width:20px;height:20px;display:inline-flex;flex:0 0 20px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:var(--panel);box-shadow:0 2px 7px rgba(0,0,0,.24)}
.k4g-language-flag img{width:100%;height:100%;display:block;object-fit:cover}
.k4g-currency-badge{width:24px;height:18px;display:inline-block;flex:0 0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:var(--panel2);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.k4g-currency-badge img{display:block;width:100%;height:100%;object-fit:cover}
.cur-menu{position:absolute;top:calc(100% + 8px);right:118px;z-index:60;list-style:none;min-width:138px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.cur-menu .cur-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 10px;border-radius:8px;color:var(--muted);font-weight:600;font-size:13px}
.cur-menu .cur-opt:hover,.cur-menu .cur-opt.is-active{background:rgba(139,92,246,.16);color:var(--text)}
.cur-menu .cur-opt:disabled{opacity:.55;cursor:wait}
.lang-menu{position:absolute;top:calc(100% + 8px);right:226px;z-index:60;list-style:none;min-width:200px;max-height:min(70vh,410px);overflow-y:auto;overscroll-behavior:contain;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.lang-menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:600}
.lang-menu a:hover,.lang-menu a[aria-current="page"]{background:rgba(139,92,246,.16);color:var(--text)}
.lang-menu .lang-code{width:25px;color:var(--ice);font-size:10px;font-weight:800;letter-spacing:.05em}
.currency-toast{position:fixed;right:18px;top:84px;z-index:120;max-width:min(360px,calc(100vw - 36px));padding:12px 15px;border:1px solid rgba(239,68,68,.45);border-radius:10px;background:#241117;color:#fecaca;font-size:13px;box-shadow:var(--shadow)}
.icon-btn{position:relative;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:.2s}
.icon-btn:hover{color:var(--text);border-color:var(--line2)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .bdg{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--grad);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.support-link{display:flex;align-items:center;gap:7px;min-height:40px;padding:8px 12px;border:1px solid rgba(139,92,246,.32);border-radius:10px;background:rgba(139,92,246,.08);color:#cdbdff;font-size:12.5px;font-weight:700;white-space:nowrap;transition:.2s}
.support-link:hover{color:#fff;border-color:rgba(225,75,200,.55);background:rgba(139,92,246,.16)}
.support-link:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.support-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.signin{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;background:var(--grad);color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px -8px rgba(139,92,246,.5);transition:.2s;white-space:nowrap}
.signin:hover{filter:brightness(1.12)}
.signin:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.signin svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.account-wrap{position:relative}
.account-button{max-width:205px;padding:6px 10px 6px 7px;border:1px solid rgba(139,92,246,.42);background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(225,75,200,.13));box-shadow:none}
.account-button:hover{filter:none;border-color:rgba(225,75,200,.7);background:linear-gradient(135deg,rgba(139,92,246,.29),rgba(225,75,200,.2))}
.account-avatar{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:var(--grad);box-shadow:0 6px 16px rgba(139,92,246,.28);color:#fff;font-family:'Space Grotesk','Inter',sans-serif;font-size:12px;font-weight:800;line-height:1}
.account-button-label{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu{position:absolute;z-index:72;right:0;top:calc(100% + 9px);width:270px;padding:7px;background:rgba(18,21,38,.98);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.42)}
.account-menu[hidden]{display:none}
.account-menu li{list-style:none}
.account-menu a{display:block;padding:9px 11px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:600}
.account-menu a:hover,.account-menu a:focus{background:rgba(139,92,246,.13);color:var(--text);outline:none}
.account-identity{display:flex;align-items:center;gap:10px;margin:1px 3px 6px;padding:8px 7px 12px;border-bottom:1px solid var(--line)}
.account-identity .account-avatar{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:14px}
.account-identity-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
.account-identity-copy small{color:var(--dim);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.account-identity-copy strong{overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:12.5px;white-space:nowrap}
/* mobile nav (added — prototype had none) */
.nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;place-items:center;color:var(--muted);flex-shrink:0}
.nav-toggle:hover{color:var(--text);border-color:var(--line2)}
.nav-toggle>span{display:grid;place-items:center}
.nav-toggle .nav-icon-close{display:none}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-toggle[aria-expanded="true"]{color:var(--text);border-color:var(--violet)}
.nav-toggle[aria-expanded="true"] .nav-icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .nav-icon-close{display:grid}
.mobile-search-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;place-items:center;color:var(--muted);flex:0 0 40px;transition:border-color .2s,color .2s,background .2s}
.mobile-search-toggle:hover{color:var(--text);border-color:var(--line2)}
.mobile-search-toggle>span{display:grid;place-items:center}
.mobile-search-toggle .mobile-search-icon-close{display:none}
.mobile-search-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mobile-search-toggle[aria-expanded="true"]{color:#fff;border-color:rgba(225,75,200,.58);background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(225,75,200,.18))}
.mobile-search-toggle[aria-expanded="true"] .mobile-search-icon-open{display:none}
.mobile-search-toggle[aria-expanded="true"] .mobile-search-icon-close{display:grid}
.mobile-nav[hidden]{display:none}
.mobile-nav{
position:absolute;left:0;right:0;top:100%;height:calc(100dvh - var(--k4g-mobile-nav-top,70px));z-index:45;
border-top:1px solid var(--line2);background:#090b12;
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 60px rgba(0,0,0,.45)
}
body.k4g-nav-open{overflow:hidden}
.mobile-nav-shell{padding-top:28px;padding-bottom:32px}
.mnav-kicker{margin:0 0 14px;color:var(--dim);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.mnav-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0;padding:0}
.mnav-list li{min-width:0}
.mnav-list a{
min-height:76px;padding:12px;display:flex;align-items:center;gap:11px;
color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:13px;
transition:border-color .2s,background .2s,transform .2s
}
.mnav-list a:hover{color:var(--text);border-color:rgba(139,92,246,.55);background:var(--panel2);transform:translateY(-1px)}
.mnav-list a:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.mnav-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;color:var(--ice);background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25)}
.mnav-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mnav-icon--pc::before,.mnav-icon--console::before{content:"";width:20px;height:20px;background:currentColor;mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}
.mnav-icon--pc::before{mask-image:url('https://key4games.com/wp-content/themes/key4games/assets/img/platform-pc.svg');-webkit-mask-image:url('https://key4games.com/wp-content/themes/key4games/assets/img/platform-pc.svg')}
.mnav-icon--console::before{mask-image:url('https://key4games.com/wp-content/themes/key4games/assets/img/platform-console.svg');-webkit-mask-image:url('https://key4games.com/wp-content/themes/key4games/assets/img/platform-console.svg')}
.mnav-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}
.mnav-copy b{font-size:13px;line-height:1.2}
.mnav-copy small{color:var(--dim);font-size:10.5px;line-height:1.35}
.mnav-wide{grid-column:1 / -1}
.mnav-wide a{min-height:64px}
.mnav-account a{background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(225,75,200,.1))}
.mnav-support a{background:linear-gradient(135deg,rgba(89,208,255,.09),rgba(139,92,246,.1))}
.mnav-support .mnav-icon{color:#fff4b8;background:rgba(255,194,75,.1);border-color:rgba(255,194,75,.24)}
.mnav-arrow{width:17px;height:17px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mnav-languages{display:flex;align-items:flex-start;flex-direction:column;gap:10px;margin-top:16px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.mnav-languages>span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mnav-languages>div{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.mnav-languages a{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:40px;padding:5px 8px;border:1px solid var(--line2);border-radius:9px;color:var(--muted);font-size:11px;font-weight:800}
.mnav-languages .k4g-language-flag{width:18px;height:18px;flex-basis:18px}
.mnav-languages a:hover,.mnav-languages a[aria-current="page"]{color:#fff;border-color:var(--violet);background:rgba(139,92,246,.2)}
.mnav-currency{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.mnav-currency>label{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mnav-currency-control{position:relative;display:flex;align-items:center;min-width:138px;border:1px solid var(--line2);border-radius:9px;background:var(--bg2)}
.mnav-currency-control .k4g-currency-badge{margin-left:9px}
.mnav-currency-control select{width:100%;min-height:40px;padding:6px 31px 6px 9px;border:0;background:transparent;color:#fff;font-size:12px;font-weight:800;appearance:none;cursor:pointer}
.mnav-currency-control select:focus{outline:2px solid var(--violet);outline-offset:2px}
.mnav-currency-control>svg{position:absolute;right:9px;pointer-events:none;stroke:var(--muted);fill:none;stroke-width:2}
/* Arabic storefront: mirror the directional chrome without changing product
imagery, currency codes or brand marks. */
html[dir="rtl"] .cat-btn{border-right:0;border-left:1px solid var(--line);border-radius:0 12px 12px 0}
html[dir="rtl"] .search-go{border-radius:11px 0 0 11px}
html[dir="rtl"] .cat-menu{left:auto;right:0}
html[dir="rtl"] .cur-menu{right:auto;left:118px}
html[dir="rtl"] .lang-menu{right:auto;left:226px}
html[dir="rtl"] .account-menu{right:auto;left:0}
html[dir="rtl"] .currency-toast{right:auto;left:18px}
html[dir="rtl"] .mnav-currency-control .k4g-currency-badge{margin-left:0;margin-right:9px}
html[dir="rtl"] .mnav-currency-control select{padding:6px 9px 6px 31px}
html[dir="rtl"] .mnav-currency-control>svg{right:auto;left:9px}
/* ============ RESPONSIVE ============ */
@media (max-width:860px){
/* Hide the currency/language chips exactly when the nav-toggle appears, so the
hamburger's in-nav switchers take over with no dead zone (audit MR_WHITE #10;
previously chips hid at 1020px, leaving 861–1020px with no control). */
.chip-btn.hide-m{display:none}
.nav-toggle{display:grid}
.support-link{display:none}
}
@media (max-width:1120px) and (min-width:861px){
.support-link span{display:none}
.support-link{width:40px;padding:0;justify-content:center}
}
@media (min-width:861px){
.mobile-nav{display:none !important}
}
@media (max-width:760px){
.site-header{background:rgba(11,13,21,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hbar{min-height:58px;flex-wrap:nowrap;gap:8px;padding:8px 12px}
.hbar>.logo{order:1;min-width:0;gap:7px}
.hbar>.logo .lmark{width:34px;height:34px;border-radius:9px}
.hbar>.logo .ltxt b{font-size:17px;letter-spacing:.04em}
.hbar>.logo .ltxt>span{display:none}
.mobile-search-toggle{display:grid;order:2;margin-left:auto}
.hactions{order:3;gap:7px}
.nav-toggle{order:4}
.hactions .icon-btn,.hactions .signin,.nav-toggle{width:40px;height:40px;min-width:40px;padding:0}
.hactions .signin{display:grid;place-items:center}
.hactions .account-button{display:flex;padding:5px}
.searchbar{
display:none;position:absolute;z-index:76;top:calc(100% + 8px);left:12px;right:12px;
width:auto;min-height:48px;flex:none;background:rgba(17,20,36,.98);
border-color:rgba(139,92,246,.48);border-radius:13px;
box-shadow:0 22px 65px rgba(0,0,0,.58);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.site-header.k4g-search-open .searchbar{display:flex}
.searchbar .cat-btn{display:none}
.searchbar input{padding:13px 15px;font-size:16px}
.searchbar .search-go{width:48px;border-radius:0 12px 12px 0}
.search-suggestions{top:calc(100% + 7px);max-height:calc(100dvh - 132px)}
body.woocommerce-checkout .mobile-search-toggle{display:none}
}
@media (max-width:640px){
.signin span{display:none}
.account-button{padding:5px}
.account-button .account-avatar{display:grid}
}
@media (max-width:400px){
.mnav-list{gap:9px}
.mnav-list a{padding:10px;gap:9px}
.mnav-copy small{display:none}
}
@media (max-width:340px){
.hbar>.logo .ltxt{display:none}
}
/* ---- Mobile menu: language & currency row + bottom sheet (design v2) ---- */
.mnav-settings{width:100%;display:flex;align-items:center;gap:12px;min-height:64px;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.mnav-settings:hover,.mnav-settings:focus-visible{border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.1)}
.mnav-settings:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.mnav-settings-flag .k4g-language-flag{width:22px;height:22px;flex-basis:22px}
.mnav-settings-flag .k4g-language-flag img{width:22px;height:22px;border-radius:50%}
html[dir="rtl"] .mnav-settings{text-align:right}
html[dir="rtl"] .mnav-settings .mnav-arrow{transform:scaleX(-1)}
.k4g-sheet{position:fixed;inset:0;z-index:140}
.k4g-sheet[hidden]{display:none}
.k4g-sheet__backdrop{position:absolute;inset:0;background:rgba(4,6,12,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s ease}
.k4g-sheet__panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:min(78vh,620px);max-height:min(78dvh,620px);padding:8px 16px calc(16px + env(safe-area-inset-bottom));border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;background:linear-gradient(180deg,#171b2e,#10131f);box-shadow:0 -24px 60px rgba(0,0,0,.55);transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.k4g-sheet.is-open .k4g-sheet__backdrop{opacity:1}
.k4g-sheet.is-open .k4g-sheet__panel{transform:none}
.k4g-sheet__handle{align-self:center;width:40px;height:4px;margin:2px 0 12px;border-radius:2px;background:rgba(255,255,255,.18)}
.k4g-sheet__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.k4g-sheet__tabs{flex:1;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.k4g-sheet__tab{min-height:38px;border:0;border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:color .2s,background .2s}
.k4g-sheet__tab.is-active{color:#fff;background:linear-gradient(120deg,rgba(139,92,246,.9),rgba(225,75,200,.85));box-shadow:0 8px 20px -10px rgba(225,75,200,.7)}
.k4g-sheet__tab:focus-visible,.k4g-sheet__close:focus-visible,.k4g-sheet__opt:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.k4g-sheet__close{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);color:var(--muted);cursor:pointer}
.k4g-sheet__close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.k4g-sheet__body{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px 4px}
.k4g-sheet__list{display:none;flex-direction:column;gap:6px}
.k4g-sheet__list.is-active{display:flex}
.k4g-sheet__opt{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(20,24,40,.6);color:var(--text);font:inherit;font-size:14px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.k4g-sheet__opt:hover{border-color:var(--line2);background:rgba(139,92,246,.08)}
.k4g-sheet__opt[aria-current],.k4g-sheet__opt.is-active{border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.16)}
.k4g-sheet__opt .k4g-language-flag{width:22px;height:22px;flex:0 0 22px}
.k4g-sheet__opt .k4g-language-flag img{width:22px;height:22px;border-radius:50%}
.k4g-sheet__opt .k4g-currency-badge{flex:0 0 auto}
.k4g-sheet__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k4g-sheet__code{flex:0 0 auto;min-width:40px;padding:4px 8px;border-radius:7px;background:var(--bg2);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-align:center}
.k4g-sheet__opt[aria-current] .k4g-sheet__code,.k4g-sheet__opt.is-active .k4g-sheet__code{color:#fff;background:var(--violet)}
html.k4g-sheet-lock{overflow:hidden}
html[dir="rtl"] .k4g-sheet__opt{text-align:right}
@media (min-width:768px){.k4g-sheet__panel{left:50%;right:auto;bottom:24px;width:440px;border:1px solid var(--line2);border-radius:22px;transform:translate(-50%,calc(100% + 40px))}.k4g-sheet.is-open .k4g-sheet__panel{transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.k4g-sheet__panel,.k4g-sheet__backdrop{transition:none}}
/* ---- Search suggestions, design v2: wide two-column panel with large covers + blurred page ---- */
.search-suggestions{padding:12px 10px 10px;border-radius:24px;border-color:rgba(255,255,255,.06);background:rgba(11,13,21,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.search-suggestions:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.search-suggestion{grid-template-columns:auto minmax(0,1fr) auto;gap:0;min-height:98px;padding:0 0 0 5px;border-radius:18px;background:#10131d;border:1px solid rgba(255,255,255,.05);transition:background .2s,border-color .2s}
.search-suggestion:hover,.search-suggestion.is-active{background:#181223;border-color:rgba(139,92,246,.5)}
.search-suggestion img:not(.search-suggestion-flag img),.search-suggestion>.search-suggestion-image{width:176px;height:88px;border-radius:11px;object-fit:cover;background:#090c16}
.search-suggestion-copy{gap:14px;padding:10px 15px}
.search-suggestion-copy b{font-size:14px;font-weight:600;line-height:18px;color:#fff}
.search-suggestion-meta{display:flex;align-items:center;gap:10px;min-width:0;color:var(--muted);font-size:13px;white-space:nowrap}
.search-suggestion-mi{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.search-suggestion-ico{display:inline-flex;width:16px;height:16px;flex:0 0 16px;color:var(--muted)}
.search-suggestion-ico svg{width:16px;height:16px;fill:none;stroke:currentColor}
.search-suggestion-flag img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.search-suggestion-sep{width:1px;height:14px;flex:0 0 1px;background:rgba(255,255,255,.12)}
.search-suggestion strong{align-self:stretch;display:flex;align-items:center;padding:0 20px;font-family:'Space Grotesk','Inter',sans-serif;font-size:18px;font-weight:700}
.search-suggestion-all,.search-suggestion-empty{grid-column:1 / -1}
.search-suggestion-all{margin-top:2px;border-top:0;border-radius:12px;background:rgba(139,92,246,.08)}
.search-suggestion-all:hover{background:rgba(139,92,246,.16)}
.site-main,.site-footer{transition:filter .25s ease,opacity .25s ease}
.k4g-search-open .site-main,.k4g-search-open .site-footer{filter:blur(4px);opacity:.55;pointer-events:none}
@media (min-width:768px){
.search-suggestions{position:fixed;top:calc(var(--header-h,70px) + 4px);left:50%;right:auto;width:min(1110px,calc(100vw - 32px));max-height:calc(100vh - var(--header-h,70px) - 24px);max-height:calc(100dvh - var(--header-h,70px) - 24px);transform:translateX(-50%)}
}
@media (max-width:1199px){
.search-suggestion img:not(.search-suggestion-flag img),.search-suggestion>.search-suggestion-image{width:140px;height:70px}
.search-suggestion strong{padding:0 14px;font-size:16px}
}
@media (max-width:991px){
.search-suggestions:not([hidden]){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
.search-suggestions{border-radius:18px;padding:8px}
.search-suggestion{min-height:76px;padding:8px 0 8px 8px;border-radius:14px}
.search-suggestion img:not(.search-suggestion-flag img),.search-suggestion>.search-suggestion-image{width:96px;height:60px;border-radius:9px}
.search-suggestion-copy{gap:8px;padding:0 10px}
.search-suggestion-copy b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.search-suggestion-meta{font-size:12px;gap:8px}
.search-suggestion strong{padding:0 12px;font-size:15px}
}
@media (max-width:419px){
.search-suggestion img:not(.search-suggestion-flag img),.search-suggestion>.search-suggestion-image{width:80px;height:50px}
}
/* ---- "All categories" dropdown, design v2: four image tiles in a wide panel ---- */
.cat-btn__grid{display:grid;grid-template-columns:repeat(2,6px);gap:3px;flex:0 0 auto}
.cat-btn__grid i{width:6px;height:6px;border:1.5px solid currentColor;border-radius:2px}
.cat-menu--tiles{padding:10px;border-radius:24px;border-color:rgba(255,255,255,.06);background:rgba(11,13,21,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 30px 80px rgba(0,0,0,.6);max-width:none;min-width:0;overflow:visible;max-height:none}
.cat-menu--tiles:not([hidden]){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.cat-menu--tiles .cat-tile{position:relative;display:flex;align-items:flex-end;gap:12px;min-width:0;height:132px;padding:58px 15px 14px;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#0a0d18;box-shadow:0 15px 34px rgba(0,0,0,.22);white-space:normal}
.cat-menu--tiles .cat-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,18,.6),#060812)}
.cat-menu--tiles .cat-tile--clear::after{background:linear-gradient(180deg,rgba(6,8,18,0),#060812)}
.cat-menu--tiles .cat-tile::before{content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(167,139,250,.12);pointer-events:none}
.cat-tile__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-tile__icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:46px;height:46px;border-radius:12px;border:1px solid rgba(167,139,250,.46);background:rgba(9,12,24,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s}
.cat-tile__icon img{width:24px;height:24px}
.cat-tile__name{position:relative;z-index:1;flex:1 1 0;min-width:0;font-weight:700;font-size:14px;line-height:17.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-tile__arrow{position:relative;z-index:1;flex-shrink:0;width:15px;height:15px;transition:transform .3s}
.cat-menu--tiles .cat-tile:hover{background:#0a0d18}
.cat-tile:hover .cat-tile__icon{border-color:rgba(167,139,250,.8)}
.cat-tile:hover .cat-tile__bg{transform:scale(1.05)}
.cat-tile:hover .cat-tile__arrow{transform:translateX(3px)}
.cat-menu--tiles .cat-tiles-all{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;background:rgba(139,92,246,.08);color:#b9a4ff;font-size:12.5px;font-weight:700}
.cat-menu--tiles .cat-tiles-all:hover{background:rgba(139,92,246,.16);color:#fff}
.cat-menu--tiles .cat-tiles-all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
html:has(#k4g-cat-menu:not([hidden])) .site-main,html:has(#k4g-cat-menu:not([hidden])) .site-footer{filter:blur(4px);opacity:.55;pointer-events:none}
@media (min-width:768px){
.cat-menu--tiles{position:fixed;top:calc(var(--header-h,70px) + 4px);left:50%;right:auto;width:min(1110px,calc(100vw - 32px));transform:translateX(-50%)}
}
@media (max-width:991px){
.cat-menu--tiles:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
html[dir="rtl"] .cat-menu--tiles{left:50%;right:auto}
html[dir="rtl"] .cat-tile__arrow{transform:scaleX(-1)}
/* ---- Logo hover as in the design (header + footer) ---- */
.logo .lmark{transition:transform .3s,filter .3s}
.logo:hover .lmark{transform:rotate(-6deg) scale(1.06);filter:drop-shadow(0 10px 14px rgba(139,92,246,.75))}
@media (prefers-reduced-motion:reduce){.logo .lmark{transition:none}.logo:hover .lmark{transform:none}}
/* Tiles: clip the zooming art to the rounded corners in Safari and animate only what the design animates */
.cat-menu--tiles .cat-tile{transition:border-color .3s,box-shadow .3s;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}
.cat-menu--tiles .cat-tile:hover{border-color:rgba(167,139,250,.35);box-shadow:0 15px 34px rgba(0,0,0,.3)}
.cat-tile__bg{will-change:transform;backface-visibility:hidden}
/* Safari paints the promoted (will-change) art layer over non-promoted siblings: the tile names and arrows vanished (owner, 24.09.2026). Promote them too. */
.cat-tile__name,.cat-tile__arrow{will-change:transform}
.cat-menu--tiles .cat-tile:focus{outline:none}
.cat-menu--tiles .cat-tile:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.search-suggestion strong{justify-content:flex-end;min-width:96px}@media (max-width:767px){.search-suggestion strong{min-width:84px}}
.search-suggestion-plats{display:inline-flex;align-items:center;gap:4px}
.search-suggestion-plats{flex-wrap:wrap}.search-suggestion-plats .k4g-brand-badge{width:20px;height:20px;flex:0 0 20px}.search-suggestion-plats .k4g-brand-badge svg{width:12px;height:12px}
/* "Game account" in the search suggestions (owner, 11.11.2026). */
.search-suggestion-kind{color:var(--text,#eef1f7);font-weight:600;flex:none}
.search-suggestion-meta:has(.search-suggestion-kind){flex-wrap:wrap;row-gap:4px}
.search-suggestion-sep--kind{display:none}
.search-suggestion-meta .search-suggestion-kind{flex-basis:100%}
/* 13.11.2026 bundle hash check: k4g-css-v2 */
/* k4g-footer */
/* ============================================================
KEY4GAMES — footer
============================================================ */
.site-footer{margin-top:90px;border-top:1px solid var(--line);background:#090b12;position:relative;z-index:1}
.f-grid{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(120px,1fr)) minmax(216px,1.3fr);gap:32px;padding:46px 0 36px}
/* No social links configured → drop the 5th ("Follow us") track so the row fills evenly. */
.f-grid--no-social{grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(120px,1fr))}
.f-brand .logo{margin-bottom:2px}
.f-brand p{color:var(--muted);font-size:13px;margin-top:14px;max-width:280px}
.f-col h4{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin-bottom:16px}
.f-col a{display:block;color:var(--muted);font-size:13.5px;padding:5px 0;transition:.2s}
.f-col a:hover{color:var(--text)}
.f-col .f-menu{list-style:none;margin:0;padding:0}
.f-col .f-menu li{margin:0}
.socials{display:flex;flex-wrap:wrap;gap:9px;margin:0}
.f-col .soc{width:36px;height:36px;flex:0 0 36px;padding:0;border-radius:10px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);line-height:0;transition:.2s}
.f-col a.soc:hover{color:#fff;border-color:var(--violet);background:rgba(139,92,246,.12)}
.f-col .soc.is-pending{opacity:.76;cursor:default;background:rgba(255,255,255,.025)}
.soc svg{width:16px;height:16px;fill:currentColor;display:block;margin:0}
.f-company{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;padding:16px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.f-company-name,.f-company strong{color:var(--text);font-weight:750}
.f-company-separator{color:var(--dim)}
.f-settings{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px 0;border-top:1px solid var(--line)}
.f-settings-label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.f-setting,.f-currency{min-height:36px;display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);color:var(--muted);font-size:12px;font-weight:600}
.f-setting svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.f-setting-code{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(139,92,246,.15);color:var(--ice);font-size:9px;font-weight:800}
.f-language-picker{position:relative;min-width:0}
.f-language-toggle{min-height:44px;max-width:min(100%,260px);display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.f-language-toggle:hover{border-color:var(--line2);background:rgba(139,92,246,.1);color:var(--text)}
.f-language-toggle:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.f-language-toggle-label{color:var(--dim);font-weight:700}
.f-language-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:12px}
.f-language-toggle>.k4g-language-flag{width:20px;height:20px;flex:0 0 20px}
.f-language-toggle>svg{width:14px;height:14px;flex:0 0 14px;transition:transform .18s ease}
.f-language-toggle[aria-expanded="true"]>svg{transform:rotate(180deg)}
.f-languages{position:absolute;z-index:110;bottom:calc(100% + 8px);left:0;width:min(480px,calc(100vw - 32px));max-height:min(60vh,420px);overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);box-shadow:var(--shadow)}
.f-languages[hidden]{display:none}
.f-languages a{min-width:0;min-height:44px;display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:7px;color:var(--muted);font-size:11px;font-weight:700;overflow-wrap:anywhere}
.f-languages a:hover,.f-languages a[aria-current="page"]{color:var(--text);background:rgba(139,92,246,.14)}
.f-languages a:focus-visible{outline:2px solid var(--violet);outline-offset:-1px;color:var(--text)}
.f-languages .k4g-language-flag{width:18px;height:18px;flex-basis:18px}
.f-currency{margin-left:auto}
.f-currency select{border:0;background:var(--panel2);color:var(--text);font:inherit;padding:3px 24px 3px 7px;border-radius:6px;cursor:pointer}
.f-currency select:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* Payment row.
This was a six-brand logo wall (VISA / Mastercard / PayPal / Apple Pay / Google Pay /
Crypto) for methods that do not exist at checkout. It now renders WooCommerce's real
enabled gateways, which today is two. A bare pair of chips floating in a wide row would
read as breakage, so the row is a labelled statement instead of a logo strip: heading
on the left, the methods next to it, and the honest caveat trailing at the far end.
Two chips look intentional; six will too, when there are six. */
.f-pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:20px 0;border-top:1px solid var(--line)}
.f-pay-label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.f-pay-list{display:flex;flex-wrap:wrap;gap:8px}
.f-pay-note{margin-left:auto;font-size:11.5px;color:var(--dim)}
.pay{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:color-mix(in srgb, var(--text) 3%, transparent)}
.f-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 30px;color:var(--muted);font-size:12px}
/* The pay row carries the divider above the bottom bar. With no gateways enabled it is
not rendered at all, so the bottom bar has to pick the rule up instead of leaving the
footer columns and the copyright line running together. */
.f-settings + .f-bottom{border-top:1px solid var(--line);padding-top:20px}
.f-bottom .tiny{font-size:11px;color:var(--dim);max-width:560px}
@media (max-width:1020px){
.f-grid{grid-template-columns:repeat(2,1fr);gap:24px}
/* Give the disclosure a viewport-anchored row at tablet/mobile widths.
Otherwise its 480px popup inherits a mid-row x-position and can extend
past the right edge at 768px (or past the left edge in RTL). */
.f-language-picker{flex:1 0 100%;width:100%}
}
@media (max-width:720px){
/* Let the caveat drop to its own line rather than squeeze the chips. */
.f-pay-note{margin-left:0;flex-basis:100%}
.f-currency{margin-left:0}
.f-languages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
/* A single 7-link column made the shared footer taller than 1,300px on a
390px phone. Keep the brand full-width, then present the three compact
navigation groups in two readable columns. No content is hidden and the
no-JS footer remains complete. */
.f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;padding:34px 0 28px}
.f-grid>*{min-width:0}
.f-brand{grid-column:1/-1}
.f-brand p{max-width:100%}
.f-col a{padding:6px 0;font-size:13px}
.f-settings{padding:15px 0}
.f-language-picker{max-width:100%}
.f-language-toggle-label{display:none}
/* The footer disclosure opens upward. Keep its top below the sticky header
even on a 320px phone, and let the 44px locale rows scroll inside it. */
.f-languages{max-height:min(46vh,340px);max-height:min(46dvh,340px)}
.f-bottom{padding-bottom:22px}
}
html[dir="rtl"] .f-languages{right:0;left:auto}
/* In short landscape there is not enough stable space above the footer
trigger. Use a bounded viewport panel below the sticky header instead of
letting an upward popup disappear behind it. */
@media (max-height:480px){
.f-languages,
html[dir="rtl"] .f-languages{position:fixed;top:calc(78px + env(safe-area-inset-top));right:12px;bottom:max(12px,env(safe-area-inset-bottom));left:12px;width:auto;max-height:none;transform:none}
}
@media (min-width:521px) and (max-height:480px){
.f-languages{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px) and (max-height:480px){
.f-languages,
html[dir="rtl"] .f-languages{bottom:calc(78px + env(safe-area-inset-bottom))}
}
/* Persistent quick navigation on small screens, matching the mobile shopping
pattern in the customer's reference while keeping the desktop header clean. */
.k4g-mobile-dock{display:none}
@media (max-width:640px){
.k4g-mobile-dock{position:fixed;z-index:95;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);min-height:58px;padding:6px;border:1px solid rgba(154,137,204,.25);border-radius:17px;background:rgba(15,18,33,.94);box-shadow:0 18px 50px rgba(0,0,0,.48);backdrop-filter:blur(20px)}
.k4g-mobile-dock a{position:relative;display:grid;place-items:center;align-content:center;gap:3px;min-width:0;border-radius:11px;color:var(--muted);font-size:9px;font-weight:700;line-height:1.1}
.k4g-mobile-dock a[aria-current="page"],.k4g-mobile-dock a:hover,.k4g-mobile-dock a:focus-visible{background:rgba(139,92,246,.14);color:#fff}
.k4g-mobile-dock svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.k4g-mobile-dock svg[fill="currentColor"]{fill:currentColor;stroke:none}
.k4g-mobile-dock .bdg{position:absolute;top:0;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:var(--pink);color:#fff;font-size:9px}
.k4g-mobile-dock .bdg[hidden]{display:none}
/* Cart and checkout are focused transaction flows. The persistent catalogue
dock covered Woo's terminal green CTA at 390px, while the third-party chat
launcher covered the total directly above it. Difmark removes unrelated
navigation from the same mobile flow; keep our header Support entry
available, but give the price and checkout action the viewport here. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.k4g-thankyou-compact,
body.woocommerce-account,
body.k4g-product-route{padding-bottom:0}
body.woocommerce-cart .k4g-mobile-dock,
body.woocommerce-checkout .k4g-mobile-dock,
body.k4g-thankyou-compact .k4g-mobile-dock,
body.woocommerce-account .k4g-mobile-dock,
body.k4g-product-route .k4g-mobile-dock{display:none!important}
}
/* The launcher is printed only for a signed-in customer who has an order.
Once that server-side condition is met, keep support reachable on product,
cart, checkout, thank-you and account routes too. The bottom offset above
keeps the compact launcher clear of mobile transaction controls. */
body.k4g-consent-open #chat-widget-container{
bottom:var(--k4g-consent-clearance,180px)!important
}
/* On a phone an opened chat is full screen: no lift (it cut the chat's top off) and nothing over it. */
@media (max-width:640px){
body.k4g-lc-open #chat-widget-container{bottom:0!important}
body.k4g-lc-open .k4g-consent{visibility:hidden!important}
}
/* ---- Store settings in one tidy row (design v2) ---- */
.site-footer .f-settings{gap:8px;padding:16px 0}
.site-footer .f-settings-label{margin-right:6px}
.site-footer .f-setting,.site-footer .f-language-toggle,.site-footer .f-currency,.site-footer .k4g-consent-settings{min-height:40px;height:40px;display:inline-flex;align-items:center;gap:8px;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:rgba(20,24,40,.6);color:var(--muted);font-size:12.5px;font-weight:600;line-height:1;box-shadow:none;transition:border-color .2s,background .2s,color .2s}
.site-footer .f-language-toggle:hover,.site-footer .f-currency:hover,.site-footer .k4g-consent-settings:hover{border-color:var(--line2);background:rgba(139,92,246,.1);color:var(--text)}
.site-footer .f-currency{margin-left:0;padding-right:4px}
.site-footer .f-currency select{height:30px;padding:0 24px 0 8px;font-weight:700}
.site-footer .f-language-toggle-label,.site-footer .f-currency>span{color:var(--dim);font-weight:600}
.site-footer .k4g-consent-settings{margin-left:auto;cursor:pointer}
.site-footer .f-language-picker{flex:0 0 auto;width:auto}
@media (max-width:767px){
.site-footer .f-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.site-footer .f-settings-label{grid-column:1 / -1;margin:0 0 2px}
.site-footer .f-setting,.site-footer .f-language-picker,.site-footer .f-language-toggle,.site-footer .f-currency,.site-footer .k4g-consent-settings{width:100%;max-width:none;min-width:0;justify-content:center}
.site-footer .f-language-picker{flex:none}
.site-footer .f-currency{justify-content:center;padding:0 6px 0 10px;overflow:hidden}
.site-footer .f-currency>span:first-child{display:none}
.site-footer .f-currency select{min-width:0;max-width:100%}
.site-footer .k4g-consent-settings{margin-left:0}
}
@media (max-width:359px){.site-footer .f-settings{grid-template-columns:minmax(0,1fr)}}
.site-footer .f-language-current{line-height:1.35;padding:1px 0}
.site-footer .f-currency{margin-left:0}
/* ---- Footer hover motion as in the design ---- */
@media (hover:hover){
.f-col a:not(.soc){transition:color .3s,translate .3s}
.f-col a:not(.soc):hover{color:#cdbdff;translate:3px 0}
.f-col .soc{transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.f-col .soc:hover{color:#fff;border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.2);box-shadow:0 0 18px -4px rgba(139,92,246,.55)}
}
/* k4g-product */
/* Product -> product (platform / edition switch, related cards): the browser keeps the
old page on screen until the new one paints, then cross-fades — no empty frame. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
/* ============================================================
KEY4GAMES — single product (rendered from /v1/products/{slug})
============================================================ */
.prod-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;padding:6px 0 20px;align-items:start;grid-template-rows:auto auto 1fr;grid-template-areas:"gallery buy" "specs buy" "desc buy"}
.pcol-main{display:contents} /* let gallery + spec-grid become direct grid items so we can reorder on mobile */
.gallery{grid-area:gallery;min-width:0}
.spec-grid{grid-area:specs;margin-top:0}
.buybox{grid-area:buy}
/* gallery */
.gallery .cover{aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;background:#080b14;isolation:isolate}
.gallery .cover::before,.gallery .cover::after{pointer-events:none}
.gallery .k4g-media-backdrop{position:absolute;z-index:0;inset:-28px;background-position:center;background-repeat:no-repeat;background-size:cover;filter:blur(22px) brightness(.6) saturate(.9);opacity:.62;transform:scale(1.08);pointer-events:none}
.gallery .k4g-media-image-link{position:absolute;z-index:1;inset:0;display:block;cursor:zoom-in}
.gallery .k4g-media-image-link img{border-radius:15px;object-fit:cover}
.gallery .k4g-media-video{position:absolute;z-index:3;inset:0;background:#000}
.gallery .k4g-media-video iframe{display:block;width:100%;height:100%;border:0}
/* Our video player (product.js showVideo): the iframe is 60px taller than the stage at each
end and clipped, so YouTube's title bar / "Watch on YouTube" strip fall outside the frame. */
.k4g-yt{position:absolute;inset:0;overflow:hidden;background:#000}
.k4g-yt video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;pointer-events:none}
.gallery .k4g-media-video .k4g-yt iframe{position:absolute;left:0;top:-60px;width:100%;height:calc(100% + 120px);pointer-events:none}
.k4g-yt-shield{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:#000 center/contain no-repeat;cursor:pointer;transition:opacity .3s}
.k4g-yt-shield::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:k4gSpin .8s linear infinite}
@keyframes k4gSpin{to{transform:rotate(360deg)}}
.k4g-media-video.is-playing .k4g-yt-shield{background:none!important}
.k4g-media-video.is-playing .k4g-yt-shield::after{display:none}
.k4g-yt-btn{position:absolute;z-index:2;bottom:12px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(9,11,22,.62);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.k4g-yt-btn:hover{background:rgba(139,92,246,.7)}
.k4g-yt-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.k4g-yt-btn svg{width:20px;height:20px}
.k4g-yt-fs{right:12px}
.k4g-yt-sound{left:12px;display:none}
.k4g-media-video.is-muted .k4g-yt-sound{display:grid}
.k4g-media-video.is-fs{background:#000}
.k4g-media-video.is-fs .k4g-yt{inset:auto;left:50%;top:50%;width:min(100vw,177.78vh);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%)}
.k4g-media-video.is-fs .k4g-yt-btn{bottom:max(16px,env(safe-area-inset-bottom))}
.k4g-media-video.is-pseudo-fs{position:fixed;z-index:10000;inset:0}
/* A phone held upright: full screen turns the video sideways to fill the screen, like a native player. */
@media (orientation:portrait){.k4g-media-video.is-fs:not(.is-landscape-locked) .k4g-yt{width:min(100vh,177.78vw);width:min(100dvh,177.78vw);transform:translate(-50%,-50%) rotate(90deg)}}
/* Swipe gallery (product.js): dots + one-time nudge; the thumbnail strip hides on phones. */
.k4g-swipe-dots{display:none}
@media (max-width:600px){
.gallery.has-swipe .thumbs{display:none}
.prod-grid:has(.gallery.has-swipe) .buybox{margin-top:0;border-top-width:0}
.gallery.has-swipe .cover{touch-action:pan-y}
.k4g-swipe-dots{position:absolute;z-index:7;left:50%;bottom:14px;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:rgba(9,11,22,.45);transform:translateX(-50%);pointer-events:none}
.gallery .cover:has(.k4g-plat-bar):not(.is-video) .k4g-swipe-dots{bottom:58px}
.k4g-swipe-dots span{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.45);transition:width .25s,background .25s}
.k4g-swipe-dots span.is-on{width:18px;background:#fff}
.k4g-swipe-dots span.is-video{width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent rgba(255,255,255,.55)}
.k4g-swipe-dots span.is-video.is-on{width:0;border-left-color:#fff;border-width:5px 0 5px 9px}
.gallery .k4g-media-image-link,.gallery .k4g-media-video{transition:transform .25s ease-out}
/* The video fades into the buy box exactly like the cover photo (owner, 24.09.2026). */
.gallery .k4g-media-video:not(.is-fs)::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:70%;background:linear-gradient(180deg,rgba(20,24,40,0),rgba(20,24,40,.45) 40%,rgba(20,24,40,.85) 75%,var(--panel));pointer-events:none}
.gallery .cover.is-swipe-next .k4g-media-image-link,.gallery .cover.is-swipe-next .k4g-media-video{animation:k4gSwipeNext .28s ease-out}
.gallery .cover.is-swipe-prev .k4g-media-image-link,.gallery .cover.is-swipe-prev .k4g-media-video{animation:k4gSwipePrev .28s ease-out}
.gallery .cover.is-swipe-hint .k4g-media-image-link{animation:k4gSwipeHint 1.3s ease-in-out}
}
@keyframes k4gSwipeNext{from{transform:translateX(8%);opacity:.2}to{transform:none;opacity:1}}
@keyframes k4gSwipePrev{from{transform:translateX(-8%);opacity:.2}to{transform:none;opacity:1}}
@keyframes k4gSwipeHint{0%,100%{transform:none}25%{transform:translateX(-34px)}45%{transform:none}65%{transform:translateX(-18px)}}
@media (prefers-reduced-motion:reduce){.gallery .cover .k4g-media-image-link,.gallery .cover .k4g-media-video{animation:none!important}}
html.k4g-video-fs,html.k4g-video-fs body{overflow:hidden}
.gallery .cover.is-video::before,.gallery .cover.is-video::after{display:none}
.gallery .cover.is-video .tagchip{display:none}
/* Art-less products (empty media[]) render a cover with NO ![]()
/