/* Kuwal Store - shell layout: header, mobile drawer, footer, cart drawer, consent banner,
   support widget, toast skin. Scoped under html.ks. Reads only generic --ks-* tokens (with fallbacks). */

html.ks {
    --ks-header-h: 56px;
    --ks-shell-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --ks-shell-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ks-z-header: 100;
    --ks-z-support: 1050;
    --ks-z-drawer-overlay: 1100;
    --ks-z-drawer: 1110;
    --ks-z-consent: 1150;
    --ks-z-cart-overlay: 1200;
    --ks-z-cart: 1210;
    --ks-z-toast: 1300;
    --ks-z-modal: 1400;
}

@media (max-width: 767px) {
    html.ks { --ks-header-h: 52px; }
}

html.ks body.ks-body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--ks-bg, #FFF8F1);
    color: var(--ks-text, #3B2A33);
}

html.ks .ks-main { flex: 1 0 auto; display: block; width: 100%; background: var(--ks-bg, #FFF8F1); color: var(--ks-text, #3B2A33); }

html.ks .ks-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

html.ks .ks-skip {
    position: fixed; left: 12px; top: -80px; z-index: 2000;
    padding: 10px 16px; border-radius: var(--ks-r-pill, 999px);
    background: var(--ks-primary, #C93C68); color: var(--ks-on-primary, #fff);
    font: 700 .9rem var(--ks-shell-body); text-decoration: none;
    transition: top .2s var(--ks-ease-out, ease-out);
}
html.ks .ks-skip:focus { top: 12px; }

/* ------------------------------------------------------------------ header */
html.ks .ks-header {
    position: sticky; top: 0; z-index: var(--ks-z-header);
    height: var(--ks-header-h);
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color .26s var(--ks-ease, ease), background-color .26s var(--ks-ease, ease);
    font-family: var(--ks-shell-body);
    color: #3B2A33;
}
html.ks .ks-header.is-scrolled { border-bottom-color: rgba(59, 42, 51, .10); }

html.ks .ks-header__inner {
    height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
    display: flex; align-items: center; gap: 16px;
}
@media (min-width: 768px) { html.ks .ks-header__inner { padding: 0 24px; } }

html.ks .ks-logo {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    text-decoration: none; color: inherit; border-radius: 12px;
}
html.ks .ks-logo__mark { display: block; flex: none; transition: transform .26s var(--ks-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); }
html.ks .ks-logo__bg { fill: #C93C68; }
html.ks .ks-logo:hover .ks-logo__mark { transform: rotate(-8deg) scale(1.06); }
html.ks .ks-logo__word {
    font-family: var(--ks-shell-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1;
    color: #3B2A33; white-space: nowrap;
}
html.ks .ks-logo__store { color: #C93C68; }

/* desktop nav */
html.ks .ks-nav { display: none; flex: 1 1 auto; justify-content: center; gap: 4px; }
html.ks .ks-nav__link {
    position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
    border-radius: var(--ks-r-pill, 999px);
    font-family: var(--ks-shell-display); font-weight: 500; font-size: .98rem; color: #3B2A33; text-decoration: none;
    transition: background-color .16s var(--ks-ease, ease), color .16s var(--ks-ease, ease);
}
html.ks .ks-nav__link:hover { background: rgba(59, 42, 51, .06); }
html.ks .ks-nav__link.is-active { color: var(--ks-nav-accent, #A82E55); background: var(--ks-nav-accent-tint, #FFE4EC); }
html.ks .ks-nav__link.is-active::after {
    content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--ks-nav-accent, #C93C68);
}
html.ks[data-section="store"], html.ks[data-section="home"], html.ks[data-section="account"], html.ks[data-section="content"] {
    --ks-nav-accent: #A82E55; --ks-nav-accent-tint: #FFE4EC;
}
html.ks[data-section="software"] { --ks-nav-accent: #1E3A8A; --ks-nav-accent-tint: #EFF4FF; }
html.ks[data-section="games"] { --ks-nav-accent: #C4B5FD; --ks-nav-accent-tint: rgba(139, 92, 246, .22); }

html.ks .ks-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 900px) {
    html.ks .ks-nav { display: flex; }
    html.ks .ks-header__actions { margin-left: 0; }
    html.ks .ks-icon-btn.ks-menu-btn { display: none; }
}
@media (max-width: 899px) {
    html.ks .ks-header__lang, html.ks .ks-header__login { display: none; }
}

/* language switch */
html.ks .ks-lang { display: inline-flex; padding: 2px; border-radius: var(--ks-r-pill, 999px); background: rgba(59, 42, 51, .07); }
html.ks .ks-lang__item {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 8px;
    border-radius: var(--ks-r-pill, 999px); font: 700 .78rem var(--ks-shell-body); letter-spacing: .02em;
    color: #6B5762; text-decoration: none; transition: background-color .16s ease, color .16s ease;
}
html.ks .ks-lang__item:hover { color: #3B2A33; }
html.ks .ks-lang__item.is-active { background: #fff; color: #3B2A33; box-shadow: 0 1px 3px rgba(59, 42, 51, .18); }

/* icon buttons + cart badge */
html.ks .ks-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: inherit; cursor: pointer;
    transition: background-color .16s ease, transform .16s ease;
    -webkit-tap-highlight-color: transparent;
}
html.ks .ks-icon-btn:hover { background: rgba(59, 42, 51, .07); }
html.ks .ks-icon-btn:active { transform: scale(.94); }

html.ks .cart-count-badge {
    position: absolute; top: 3px; right: 2px; display: none; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; border: 2px solid #fff;
    background: var(--ks-primary, #C93C68); color: #fff; font: 800 .66rem/1 var(--ks-shell-body);
    box-sizing: content-box; pointer-events: none;
}
html.ks .cart-count-badge.is-visible { display: flex; }
html.ks .cart-count-badge.is-pop { animation: ks-badge-pop .42s var(--ks-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); }
@keyframes ks-badge-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

html.ks .ks-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
    background: #FFE4EC; color: #A82E55; font: 700 .95rem var(--ks-shell-display);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(201, 60, 104, .35);
}
html.ks .ks-header__account { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; }
html.ks .ks-header__account:hover { background: rgba(59, 42, 51, .07); }

/* games: dark translucent header */
html.ks[data-section="games"] .ks-header { background: rgba(11, 16, 32, .72); color: #F1F5FF; }
html.ks[data-section="games"] .ks-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, .10); }
html.ks[data-section="games"] .ks-logo__word, html.ks[data-section="games"] .ks-nav__link { color: #F1F5FF; }
html.ks[data-section="games"] .ks-logo__store { color: #F4A3BB; }
html.ks[data-section="games"] .ks-nav__link:hover, html.ks[data-section="games"] .ks-icon-btn:hover,
html.ks[data-section="games"] .ks-header__account:hover { background: rgba(255, 255, 255, .10); }
html.ks[data-section="games"] .ks-lang { background: rgba(255, 255, 255, .10); }
html.ks[data-section="games"] .ks-lang__item { color: #A8B3CF; }
html.ks[data-section="games"] .ks-lang__item.is-active { background: rgba(255, 255, 255, .92); color: #0B1020; }
html.ks[data-section="games"] .cart-count-badge { border-color: #0B1020; }
html.ks[data-section="games"] .ks-avatar { background: rgba(139, 92, 246, .3); color: #F1F5FF; box-shadow: inset 0 0 0 2px rgba(11, 16, 32, .9), 0 0 0 1px rgba(139, 92, 246, .6); }
html.ks[data-section="games"] .ks-header .ks-btn--secondary { color: #F1F5FF; border-color: rgba(255, 255, 255, .3); background: transparent; }

/* ------------------------------------------------------------------ mobile drawer */
html.ks .ks-drawer-overlay {
    position: fixed; inset: 0; z-index: var(--ks-z-drawer-overlay);
    background: rgba(59, 42, 51, .4); opacity: 0; transition: opacity .32s var(--ks-ease, ease);
}
html.ks .ks-drawer-overlay[hidden] { display: none; }
html.ks .ks-drawer-overlay.is-open { opacity: 1; }

html.ks .ks-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--ks-z-drawer);
    width: min(320px, 88vw); display: flex; flex-direction: column;
    background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33); font-family: var(--ks-shell-body);
    border-radius: 32px 0 0 32px; box-shadow: var(--ks-sh-3, 0 16px 40px rgba(120, 60, 50, .16));
    transform: translateX(105%); visibility: hidden;
    transition: transform .32s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1)), visibility 0s linear .32s;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
html.ks .ks-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
html.ks .ks-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 20px; min-height: 60px; }
html.ks .ks-drawer__nav { display: flex; flex-direction: column; padding: 8px 12px; overflow-y: auto; flex: 1; }
html.ks .ks-drawer__link {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 12px; border-radius: 16px;
    font: 500 1.08rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); text-decoration: none;
}
html.ks .ks-drawer__link > span:not(.ks-drawer__chip) { flex: 1; }
html.ks .ks-drawer__link .ks-icon { color: var(--ks-muted, #6B5762); }
html.ks .ks-drawer__link:hover, html.ks .ks-drawer__link.is-active { background: var(--ks-surface-2, #FFF0E6); }
html.ks .ks-drawer__chip { width: 34px; height: 34px; border-radius: 12px; background: var(--ks-primary-tint, #FFE4EC); flex: none; position: relative; }
html.ks .ks-drawer__link[data-nav="software"] .ks-drawer__chip { background: var(--ks-accent-tint, #DCEFF7); }
html.ks .ks-drawer__link[data-nav="games"] .ks-drawer__chip { background: var(--ks-primary-tint, #EAE3FA); }
html.ks .ks-drawer__link[data-nav="contact"] .ks-drawer__chip { background: var(--ks-warning-tint, #FFF1C2); }
html.ks .ks-drawer__foot { display: grid; gap: 10px; padding: 12px 20px 20px; border-top: 1px solid var(--ks-border, #F0DDD3); }
html.ks .ks-drawer__foot .ks-lang { justify-self: start; }
html.ks body.ks-drawer-open { overflow: hidden; }

/* ------------------------------------------------------------------ footer */
html.ks .ks-footer {
    position: relative; margin-top: 64px; padding: 56px 0 0;
    background: var(--ks-surface-2, var(--ks-surface-2, #FFF0E6)); color: var(--ks-text, var(--ks-text, #3B2A33)); font-family: var(--ks-shell-body);
    content-visibility: auto; contain-intrinsic-size: auto 480px;
}
html.ks .ks-footer[data-theme="games"] { background: var(--ks-surface, #121A33); }
html.ks .ks-footer__wave { position: absolute; left: 0; right: 0; top: -39px; width: 100%; height: 40px; fill: var(--ks-surface-2, var(--ks-surface-2, #FFF0E6)); display: block; }
html.ks .ks-footer[data-theme="games"] .ks-footer__wave { fill: var(--ks-surface, #121A33); }
html.ks .ks-footer[data-theme="software"] .ks-footer__wave { display: none; }
html.ks .ks-footer[data-theme="software"] { margin-top: 0; border-top: 1px solid var(--ks-border, #E2E8F0); }
html.ks .ks-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 16px 24px; }
@media (min-width: 768px) { html.ks .ks-footer__inner { padding: 0 24px 28px; } }

html.ks .ks-footer__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { html.ks .ks-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } }

html.ks .ks-footer .ks-logo__word { color: var(--ks-text, var(--ks-text, #3B2A33)); }
html.ks .ks-footer[data-theme="games"] .ks-logo__store { color: #F4A3BB; }
html.ks .ks-footer__blurb { margin: 14px 0 16px; max-width: 320px; font-size: .92rem; line-height: 1.6; color: var(--ks-muted, var(--ks-muted, #6B5762)); }
html.ks .ks-footer__socials { display: flex; gap: 10px; margin-bottom: 20px; }
html.ks .ks-footer__social {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--ks-surface, #fff); color: var(--ks-primary-ink, var(--ks-primary-ink, #A82E55)); text-decoration: none;
    box-shadow: 0 1px 4px rgba(120, 60, 50, .12); transition: transform .2s var(--ks-ease-spring, ease);
}
html.ks .ks-footer__social:hover { transform: translateY(-2px); }
html.ks .ks-footer__news-title { margin: 0 0 8px; font: 600 .95rem var(--ks-shell-display); }

html.ks .ks-footer__col { border-bottom: 1px solid var(--ks-border, var(--ks-border, #F0DDD3)); }
html.ks .ks-footer__col summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none;
    font: 600 1rem var(--ks-shell-display); color: var(--ks-text, var(--ks-text, #3B2A33));
}
html.ks .ks-footer__col summary::-webkit-details-marker { display: none; }
html.ks .ks-footer__col summary::after { content: '+'; font-size: 1.3rem; color: var(--ks-muted, var(--ks-muted, #6B5762)); }
html.ks .ks-footer__col[open] summary::after { content: '\2212'; }
html.ks .ks-footer__col ul { list-style: none; margin: 0; padding: 0 0 14px; display: grid; gap: 4px; }
html.ks .ks-footer__col a {
    display: inline-block; padding: 6px 0; font-size: .92rem; color: var(--ks-muted, var(--ks-muted, #6B5762)); text-decoration: none;
    transition: color .16s ease, transform .16s ease;
}
html.ks .ks-footer__col a:hover { color: var(--ks-primary-ink, var(--ks-primary-ink, #A82E55)); transform: translateX(3px); }
@media (min-width: 768px) {
    html.ks .ks-footer__col { border-bottom: 0; }
    html.ks .ks-footer__col summary { cursor: default; min-height: 0; margin-bottom: 10px; }
    html.ks .ks-footer__col summary::after, html.ks .ks-footer__col[open] summary::after { content: none; display: none; }
}

html.ks .ks-footer__bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ks-border, var(--ks-border, #F0DDD3));
}
html.ks .ks-footer__bottom p { margin: 0; font-size: .85rem; color: var(--ks-muted, var(--ks-muted, #6B5762)); }
html.ks .ks-footer__pay { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
html.ks .ks-footer__pay li {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
    background: var(--ks-surface, #fff); border: 1px solid var(--ks-border, var(--ks-border, #F0DDD3));
    font: 700 .74rem var(--ks-shell-body); color: var(--ks-muted, var(--ks-muted, #6B5762));
}

/* newsletter form (footer and reusable) */
html.ks .ks-newsletter { display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; }
html.ks .ks-newsletter__input { flex: 1 1 180px; min-width: 0; }
html.ks .ks-newsletter__btn { flex: 0 0 auto; }

/* ------------------------------------------------------------------ cart drawer */
html.ks .cart-overlay {
    position: fixed; inset: 0; z-index: var(--ks-z-cart-overlay); background: rgba(59, 42, 51, .4);
    opacity: 0; visibility: hidden; transition: opacity .32s var(--ks-ease, ease), visibility 0s linear .32s;
}
html.ks .cart-overlay.active { opacity: 1; visibility: visible; transition-delay: 0s; }

html.ks .cart-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--ks-z-cart);
    width: 420px; max-width: 100vw; display: flex; flex-direction: column;
    background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33); font-family: var(--ks-shell-body);
    border-radius: 32px 0 0 32px; box-shadow: var(--ks-sh-3, 0 16px 40px rgba(120, 60, 50, .16));
    transform: translateX(105%); visibility: hidden;
    transition: transform .32s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1)), visibility 0s linear .32s;
}
html.ks .cart-sidebar.active { transform: none; visibility: visible; transition-delay: 0s; }
@media (max-width: 479px) { html.ks .cart-sidebar { width: 100vw; border-radius: 0; } }

html.ks .cart-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 12px 24px; border-bottom: 1px solid var(--ks-border, #F0DDD3); }
html.ks .cart-sidebar-header h3 { margin: 0; font: 600 1.3rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); }
html.ks .cart-title-count { color: var(--ks-muted, #6B5762); font-weight: 500; }
html.ks .cart-items-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; }

html.ks .cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--ks-border, #F0DDD3); }
html.ks .cart-item-img {
    width: 72px; height: 72px; border-radius: 16px; overflow: hidden; background: var(--ks-primary-tint, #FFE4EC); color: var(--ks-primary-ink, #A82E55);
    display: flex; align-items: center; justify-content: center;
}
html.ks .cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.ks .cart-item-name { margin: 0 0 6px; font: 600 .98rem/1.3 var(--ks-shell-display); color: var(--ks-text, #3B2A33); overflow-wrap: anywhere; }
html.ks .cart-item-bundle { margin-bottom: 6px; font-size: .78rem; line-height: 1.5; color: var(--ks-muted, #6B5762); }
html.ks .cart-item-bundle span { color: var(--ks-primary-ink, #A82E55); }
html.ks .cart-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html.ks .cart-price-money, html.ks .cart-price-token { font: 700 1rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); }
html.ks .cart-price-token { display: inline-flex; align-items: center; gap: 5px; color: var(--ks-warning, var(--ks-warning, #8A5200)); }
html.ks .cart-item-qty { font-size: .85rem; color: var(--ks-muted, #6B5762); }
html.ks .cart-qty { display: inline-flex; align-items: center; border: 2px solid var(--ks-border, #F0DDD3); border-radius: 999px; }
html.ks .cart-qty__btn {
    width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ks-text, #3B2A33); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background-color .16s ease;
}
html.ks .cart-qty__btn:hover { background: var(--ks-primary-tint, #FFE4EC); }
html.ks .cart-qty__val { min-width: 24px; text-align: center; font: 700 .9rem var(--ks-shell-body); }
html.ks .cart-item-remove {
    width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ks-muted, #6B5762); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background-color .16s ease, color .16s ease;
}
html.ks .cart-item-remove:hover { background: var(--ks-danger-tint, #FDE3E1); color: var(--ks-danger, #B3261E); }

html.ks .cart-empty-state { text-align: center; padding: 48px 12px; display: grid; justify-items: center; gap: 8px; }
html.ks .cart-empty-state h4 { margin: 8px 0 0; font: 600 1.2rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); }
html.ks .cart-empty-state p { margin: 0 0 12px; color: var(--ks-muted, #6B5762); }

html.ks .cart-sidebar-footer { padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--ks-border, #F0DDD3); display: grid; gap: 10px; background: var(--ks-bg, #FFF8F1); border-radius: 0 0 0 32px; }
html.ks .cart-sidebar-footer.is-empty .cart-checkout { display: none; }
html.ks .cart-totals .total-row { display: flex; justify-content: space-between; align-items: baseline; font: 600 1.05rem var(--ks-shell-display); }
html.ks .cart-totals .total-amount { font-weight: 700; font-size: 1.35rem; }
html.ks .total-row-tokens { margin-top: 4px; align-items: center; gap: 6px; font-weight: 700; color: var(--ks-warning, var(--ks-warning, #8A5200)); }
html.ks .cart-note { margin: 6px 0 0; font-size: .82rem; color: var(--ks-muted, #6B5762); }

/* ------------------------------------------------------------------ cart: variant, stock, shipping */
html.ks .cart-item-variant { margin: -2px 0 6px; font-size: .82rem; color: var(--ks-muted, #6B5762); }
html.ks .cart-item-oos { margin: 0 0 6px; display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 .74rem var(--ks-shell-body); background: var(--ks-danger-tint, #FDE3E1); color: var(--ks-danger, #B3261E); }
html.ks .cart-item.is-oos .cart-item-img, html.ks .cart-item.is-oos .cart-item-name { opacity: .55; }
html.ks .cart-qty__btn:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
html.ks .cart-ship { padding: 4px 0 2px; }
html.ks .cart-ship[hidden], html.ks .total-row[hidden], html.ks .cart-note[hidden] { display: none; }
html.ks .cart-ship__text { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 .88rem var(--ks-shell-body); color: var(--ks-text, #3B2A33); }
html.ks .cart-ship__gift { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ks-success-tint, #DDF3E8); color: var(--ks-success, #1E7B4F); }
html.ks .cart-ship.is-done .cart-ship__text { color: var(--ks-success, #1E7B4F); }
html.ks .cart-ship__bar { height: 8px; border-radius: 999px; background: var(--ks-border, #F0DDD3); overflow: hidden; }
html.ks .cart-ship__bar > span {
    display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0);
    background: linear-gradient(90deg, var(--ks-accent, #7CCBA6), var(--ks-primary, #C93C68));
    transition: transform .6s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1));
}
html.ks .cart-ship.is-done .cart-ship__bar > span { background: var(--ks-success, #1E7B4F); }
html.ks .total-row--sub { font: 500 .92rem var(--ks-shell-body); color: var(--ks-muted, #6B5762); }
html.ks #cart-shipping.is-free { color: var(--ks-success, #1E7B4F); font-weight: 700; }
html.ks .cart-note--oos { color: var(--ks-danger, #B3261E); font-weight: 700; }
html.ks .cart-checkout.is-disabled, html.ks .cart-checkout[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.ks .cart-ship__bar > span { transition-duration: .01ms; } }

/* ------------------------------------------------------------------ consent banner */
html.ks .ks-consent {
    position: fixed; z-index: var(--ks-z-consent); left: 16px; right: auto; top: auto; bottom: 16px; width: min(420px, calc(100vw - 32px));
    box-sizing: border-box; padding: 18px 18px 16px; border-radius: 24px; background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33); font-family: var(--ks-shell-body);
    border: 1px solid var(--ks-border, #F0DDD3); box-shadow: var(--ks-sh-3, 0 16px 40px rgba(120, 60, 50, .16)); opacity: 1;
    animation: ks-consent-in .32s var(--ks-ease-out, ease-out) both;
}
@keyframes ks-consent-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.ks .ks-consent[hidden] { display: none; }
html.ks .ks-consent__title { display: block; font: 600 1.02rem var(--ks-shell-display); margin-bottom: 6px; }
html.ks .ks-consent__text { margin: 0 0 14px; font-size: .86rem; line-height: 1.55; color: var(--ks-muted, #6B5762); }
html.ks .ks-consent__text a { color: var(--ks-primary-ink, #A82E55); font-weight: 700; }
html.ks .ks-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) {
    html.ks .ks-consent {
        left: 0; right: 0; bottom: 0; width: 100%; max-height: 80vh; overflow-y: auto;
        border-radius: 24px 24px 0 0; border-width: 1px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0));
    }
}

/* ------------------------------------------------------------------ support widget */
html.ks .support-widget {
    position: fixed; right: 24px; bottom: 24px; z-index: var(--ks-z-support);
    display: flex; flex-direction: column; align-items: flex-end; font-family: var(--ks-shell-body);
    transition: opacity .2s ease, transform .2s ease;
}
html.ks body.cart-sidebar-open .support-widget, html.ks body.ks-drawer-open .support-widget {
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(.94);
}
html.ks .support-button {
    position: relative; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 3px solid var(--ks-surface, #fff); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: var(--ks-primary, var(--ks-primary, #C93C68)); color: var(--ks-on-primary, #fff); box-shadow: 0 8px 24px rgba(201, 60, 104, .35);
    transition: transform .2s var(--ks-ease-spring, cubic-bezier(.34, 1.4, .64, 1)), box-shadow .2s ease;
}
html.ks .support-button:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 28px rgba(201, 60, 104, .42); }
html.ks .support-button .pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--ks-primary, var(--ks-primary, #C93C68)); opacity: 0; animation: ks-pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes ks-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.55); opacity: 0; } }
html.ks .support-unread-badge {
    position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--ks-danger, #B3261E); color: var(--ks-on-primary, #fff); font: 800 .68rem/20px var(--ks-shell-body); text-align: center; border: 2px solid var(--ks-surface, #fff); pointer-events: none;
}
html.ks .support-unread-badge[hidden] { display: none; }

html.ks .chat-container {
    position: absolute; right: 0; bottom: 72px; width: 360px; height: 500px; overflow: hidden;
    display: flex; flex-direction: column; background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33);
    border: 1px solid var(--ks-border, #F0DDD3); border-radius: 24px; box-shadow: var(--ks-sh-3, 0 16px 40px rgba(120, 60, 50, .16));
    opacity: 0; visibility: hidden; transform: translateY(20px) scale(.96);
    transition: opacity .32s var(--ks-ease-out, ease), transform .32s var(--ks-ease-out, ease), visibility 0s linear .32s;
}
html.ks .chat-container[data-lc-ready="0"], html.ks .chat-container[hidden] { display: none !important; }
html.ks .chat-container.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html.ks .chat-container.closing { pointer-events: none; }

html.ks .chat-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--ks-primary-tint, #FFE4EC); border-bottom: 1px solid var(--ks-border, #F0DDD3); }
html.ks .chat-header-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ks-primary, #C93C68); color: var(--ks-on-primary, #fff); display: flex; align-items: center; justify-content: center; flex: none; }
html.ks .chat-header-info { flex: 1; min-width: 0; }
html.ks .chat-header-info h4 { margin: 0; font: 600 1rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); }
html.ks .chat-header-info span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ks-success, #1E7B4F); font-weight: 700; }
html.ks .chat-header-info span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ks-success, #1E7B4F); }
html.ks .chat-header-actions { display: flex; gap: 4px; }
html.ks .chat-header-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--ks-text, #3B2A33); cursor: pointer; }
html.ks .chat-header-btn:hover { background: var(--ks-surface, #fff); }
html.ks .chat-fullscreen-btn { display: none; }

html.ks .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--ks-bg, #FFF8F1); }
html.ks .msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
html.ks .msg-received { align-self: flex-start; background: var(--ks-surface, #fff); border: 1px solid var(--ks-border, #F0DDD3); border-bottom-left-radius: 6px; }
html.ks .msg-sent { align-self: flex-end; background: var(--ks-primary, #C93C68); color: var(--ks-on-primary, #fff); border-bottom-right-radius: 6px; }
html.ks .msg-time { display: block; margin-top: 4px; font-size: .68rem; opacity: .65; }

html.ks .chat-footer { padding: 12px; border-top: 1px solid var(--ks-border, #F0DDD3); background: var(--ks-surface, #fff); }
html.ks .chat-input-wrapper { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; border: 2px solid var(--ks-border, #F0DDD3); border-radius: 999px; background: var(--ks-surface, #fff); }
html.ks .chat-input-wrapper:focus-within { border-color: var(--ks-primary, #C93C68); }
html.ks .chat-input-wrapper input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 .92rem var(--ks-shell-body); color: var(--ks-text, #3B2A33); padding: 8px 0; }
html.ks .chat-send-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--ks-primary, #C93C68); color: var(--ks-on-primary, #fff); cursor: pointer; }
html.ks .chat-send-btn:hover { background: var(--ks-primary-hover, #B0305A); }
html.ks .chat-send-btn:disabled { opacity: .5; }

html.ks .chat-form-overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; background: var(--ks-surface, #fff); }
html.ks .chat-form-overlay h5 { margin: 0; font: 600 1.2rem var(--ks-shell-display); }
html.ks .chat-form-overlay p { margin: 0 0 4px; color: var(--ks-muted, #6B5762); font-size: .9rem; }
html.ks .chat-guest-message { min-height: 84px; resize: none; }
html.ks .chat-file-title, html.ks .chat-upload-title { font: 700 .9rem var(--ks-shell-body); margin-bottom: 6px; }
html.ks .chat-file-text { margin-bottom: 6px; }
html.ks .chat-file-meta { font-size: .76rem; color: var(--ks-muted, #6B5762); margin-bottom: 8px; }
html.ks .chat-file-btn { border: 0; border-radius: 999px; padding: 8px 14px; font: 700 .82rem var(--ks-shell-body); cursor: pointer; }
html.ks .chat-file-btn--upload { background: var(--ks-primary, #C93C68); color: var(--ks-on-primary, #fff); }
html.ks .chat-file-btn--upload:hover { background: var(--ks-primary-hover, #B0305A); }
html.ks .chat-file-btn--done { background: var(--ks-success-tint, #DDF3E8); color: var(--ks-success, #1E7B4F); }
html.ks .chat-upload-link { display: block; color: var(--ks-primary-ink, #A82E55); font-weight: 700; word-break: break-all; }

@media (max-width: 768px) {
    html.ks .support-widget { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0)); }
    html.ks .support-button { width: 50px; height: 50px; font-size: 19px; }
    html.ks .support-button .pulse { display: none; }
    html.ks .chat-container { width: min(92vw, 360px); height: clamp(320px, 62dvh, 460px); bottom: 64px; border-radius: 20px; }
    html.ks .chat-container.is-fullscreen { position: fixed; inset: 8px 8px calc(8px + env(safe-area-inset-bottom, 0)) 8px; width: auto; height: auto; max-width: none; border-radius: 18px; z-index: 1500; }
    html.ks .chat-fullscreen-btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* ------------------------------------------------------------------ toasts + confirm modal skin (notifications.js) */
html.ks #notification-container {
    position: fixed; top: calc(var(--ks-header-h) + 12px); right: 20px; width: 380px; max-width: calc(100vw - 32px);
    z-index: var(--ks-z-toast); display: flex; flex-direction: column; gap: 12px; pointer-events: none;
    transition: right .3s var(--ks-ease, ease);
}
html.ks body.cart-sidebar-open #notification-container { right: 440px; }
html.ks .notification-toast {
    position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; overflow: hidden;
    background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33); border: 1px solid var(--ks-border, #F0DDD3); border-left-width: 4px; border-radius: 20px;
    box-shadow: var(--ks-sh-3, 0 16px 40px rgba(120, 60, 50, .16)); pointer-events: auto; font-family: var(--ks-shell-body);
    animation: ks-toast-in .32s var(--ks-ease-out, ease-out) both;
}
html.ks .notification-toast.hiding { animation: ks-toast-out .26s var(--ks-ease, ease) forwards; }
html.ks .notification-toast:hover .notification-progress { animation-play-state: paused; }
html.ks .notification-icon { flex: none; font-size: 1.15rem; margin-top: 2px; }
html.ks .notification-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.ks .notification-title { font: 600 .95rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); }
html.ks .notification-message { font-size: .86rem; line-height: 1.45; color: var(--ks-muted, #6B5762); overflow-wrap: anywhere; }
html.ks .notification-close { border: 0; background: transparent; color: var(--ks-muted, #6B5762); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; margin: -4px -6px 0 0; }
html.ks .notification-close:hover { background: var(--ks-surface-2, #FFF0E6); color: var(--ks-text, #3B2A33); }
html.ks .notification-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .25; animation: ks-toast-progress linear forwards; }
html.ks .notification-success { border-left-color: var(--ks-success, #1E7B4F); }
html.ks .notification-success .notification-icon, html.ks .notification-success .notification-progress { color: var(--ks-success, #1E7B4F); }
html.ks .notification-error { border-left-color: var(--ks-danger, #B3261E); }
html.ks .notification-error .notification-icon, html.ks .notification-error .notification-progress { color: var(--ks-danger, #B3261E); }
html.ks .notification-warning { border-left-color: var(--ks-warning, #F6B93B); }
html.ks .notification-warning .notification-icon, html.ks .notification-warning .notification-progress { color: var(--ks-warning, var(--ks-warning, #8A5200)); }
html.ks .notification-info { border-left-color: var(--ks-primary, #1F6F8B); }
html.ks .notification-info .notification-icon, html.ks .notification-info .notification-progress { color: var(--ks-primary, #1F6F8B); }
@keyframes ks-toast-in { from { opacity: 0; transform: translateX(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ks-toast-out { to { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes ks-toast-progress { from { width: 100%; } to { width: 0; } }

html.ks #confirm-modal-overlay {
    position: fixed; inset: 0; z-index: var(--ks-z-modal); display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(59, 42, 51, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ks-fade .2s ease-out both;
}
html.ks .confirm-modal {
    width: 440px; max-width: 100%; padding: 28px; border-radius: 28px; background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33); border: 1px solid var(--ks-border, #F0DDD3);
    box-shadow: var(--ks-sh-3, 0 16px 40px rgba(120, 60, 50, .16)); font-family: var(--ks-shell-body); animation: ks-modal-in .3s var(--ks-ease-out, ease-out) both;
}
html.ks .confirm-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 20px; }
html.ks .confirm-icon-wrapper { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
html.ks .confirm-icon-danger { background: var(--ks-danger-tint, #FDE3E1); color: var(--ks-danger, #B3261E); }
html.ks .confirm-icon-warning { background: var(--ks-warning-tint, #FFF1C2); color: #7A4B00; }
html.ks .confirm-icon-info { background: var(--ks-primary-tint, #DCEFF7); color: var(--ks-primary-ink, #175C74); }
html.ks .confirm-title { margin: 0; font: 600 1.3rem var(--ks-shell-display); }
html.ks .confirm-message { color: var(--ks-muted, #6B5762); line-height: 1.55; }
html.ks .confirm-input-wrap { margin-bottom: 16px; }
html.ks .confirm-input-label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .88rem; }
html.ks .confirm-input { width: 100%; padding: 12px 14px; border: 2px solid var(--ks-border, #F0DDD3); border-radius: 16px; background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33); font: 600 .95rem var(--ks-shell-body); box-sizing: border-box; }
html.ks .confirm-input:focus { outline: 0; border-color: var(--ks-primary, #C93C68); }
html.ks .confirm-input.is-error { border-color: var(--ks-danger, #B3261E); background: var(--ks-danger-tint, #FDE3E1); }
html.ks .confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
html.ks .confirm-btn { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; font: 600 .98rem var(--ks-shell-display); cursor: pointer; }
html.ks .confirm-btn-cancel { background: var(--ks-surface, #fff); color: var(--ks-primary-ink, #A82E55); border-color: var(--ks-primary, #C93C68); }
html.ks .confirm-btn-cancel:hover { background: var(--ks-primary-tint, #FFE4EC); }
html.ks .confirm-btn-confirm { background: var(--ks-primary, #C93C68); color: var(--ks-on-primary, #fff); }
html.ks .confirm-btn-confirm:hover { background: var(--ks-primary-hover, #B0305A); }
@keyframes ks-modal-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ks-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 768px) {
    html.ks body.cart-sidebar-open #notification-container { right: 16px; }
}

/* ------------------------------------------------------------------ focus + reduced motion */
html.ks .ks-header a:focus-visible, html.ks .ks-header button:focus-visible,
html.ks .ks-drawer a:focus-visible, html.ks .ks-drawer button:focus-visible,
html.ks .cart-sidebar a:focus-visible, html.ks .cart-sidebar button:focus-visible,
html.ks .ks-footer a:focus-visible, html.ks .ks-footer summary:focus-visible,
html.ks .ks-consent a:focus-visible, html.ks .ks-consent button:focus-visible,
html.ks .support-widget button:focus-visible, html.ks .support-widget input:focus-visible {
    outline: 3px solid var(--ks-focus, #6D4AC2); outline-offset: 2px;
}
html.ks[data-section="games"] .ks-header a:focus-visible, html.ks[data-section="games"] .ks-header button:focus-visible { outline-color: #C4B5FD; }

@media (prefers-reduced-motion: reduce) {
    html.ks .ks-drawer, html.ks .cart-sidebar, html.ks .cart-overlay, html.ks .ks-drawer-overlay,
    html.ks .ks-consent, html.ks .chat-container, html.ks .notification-toast, html.ks .confirm-modal {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
    html.ks .support-button .pulse, html.ks .cart-count-badge.is-pop { animation: none !important; }
}

/* ================================================================== mobile app-like shell (spec: mobile_spec.md §1) */
html.ks {
    --ks-tabbar-h: 0px;                                   /* tab bar height (0 on desktop / when hidden) */
    --ks-bottom-inset: env(safe-area-inset-bottom, 0px);  /* space to keep clear at the bottom (tab bar + safe area) */
    --ks-header-offset: var(--ks-header-h);               /* visible header height (0 while the phone header is hidden) */
}
html.ks.ks-header-hidden { --ks-header-offset: 0px; }

/* seller information (footer, all widths) */
html.ks .ks-footer__seller { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ks-border, #F0DDD3); }
html.ks .ks-footer__seller-title { margin: 0 0 10px; font: 600 .95rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); }
html.ks .ks-footer__seller dl { margin: 0; display: grid; gap: 6px 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); font-size: .85rem; line-height: 1.5; }
html.ks .ks-footer__seller dt { color: var(--ks-muted, #6B5762); font-size: .76rem; font-weight: 700; }
html.ks .ks-footer__seller dd { margin: 0; color: var(--ks-text, #3B2A33); overflow-wrap: anywhere; }

/* drawer secondary links */
html.ks .ks-drawer__link--secondary { min-height: 44px; font: 600 .95rem var(--ks-shell-body); color: var(--ks-muted, #6B5762); }
html.ks .ks-icon-btn.ks-header__user { display: none; }

/* ---------------------------------------------------------------- KSSheet (all widths) */
html.ks .ks-sheet { position: fixed; inset: 0; z-index: 1250; }
html.ks .ks-sheet[hidden] { display: none; }
html.ks .ks-sheet__backdrop { position: absolute; inset: 0; background: rgba(59, 42, 51, .45); opacity: 0; transition: opacity .3s var(--ks-ease, ease); }
html.ks .ks-sheet.is-open .ks-sheet__backdrop { opacity: 1; }
html.ks .ks-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(560px, 100%);
    max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; outline: 0;
    background: var(--ks-surface, #fff); color: var(--ks-text, #3B2A33);
    border-radius: 24px 24px 0 0; box-shadow: var(--ks-sh-3, 0 16px 40px rgba(120, 60, 50, .16));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translate3d(0, 105%, 0); transition: transform .34s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1));
    will-change: transform;
}
html.ks .ks-sheet.is-open .ks-sheet__panel { transform: none; }
html.ks .ks-sheet__grab { display: flex; justify-content: center; padding: 10px 0 4px; touch-action: none; cursor: grab; flex: none; }
html.ks .ks-sheet__handle { width: 40px; height: 5px; border-radius: 999px; background: var(--ks-border-strong, #E4C9BB); }
html.ks .ks-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px; min-height: 44px; touch-action: none; flex: none; }
html.ks .ks-sheet__title { margin: 0; font: 600 1.15rem var(--ks-shell-display); color: var(--ks-text, #3B2A33); }
html.ks .ks-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
html.ks .ks-sheet__close { color: var(--ks-text, #3B2A33); }
html.ks .cart-sidebar > .ks-sheet__grab { display: none; }
html.ks .cart-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--ks-border, #F0DDD3); }
html.ks .cart-row .cart-item { border-bottom: 0; }
html.ks .cart-row__remove { display: none; }
html.ks .ks-fly { border-radius: 20px; }

/* pop for the tab-bar cart icon (also used by KSMobile.pulseCart) */
html.ks .ks-tab__ico.is-pop { animation: ks-badge-pop .42s var(--ks-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); }

/* ---------------------------------------------------------------- tab bar */
html.ks .ks-tabbar { display: none; }

@media (max-width: 767px) {
    html.ks { --ks-tabbar-h: 64px; --ks-bottom-inset: calc(64px + env(safe-area-inset-bottom, 0px)); }
    html.ks[data-tabbar="off"], html.ks.ks-tabbar-hidden { --ks-tabbar-h: 0px; --ks-bottom-inset: env(safe-area-inset-bottom, 0px); }
    html.ks:not([data-tabbar="off"]):not(.ks-tabbar-hidden) body.ks-body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    html.ks .ks-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: grid; grid-template-columns: repeat(5, 1fr);
        height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid rgba(59, 42, 51, .08); font-family: var(--ks-shell-body);
        transition: transform .3s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1));
        view-transition-name: ks-tabbar;
    }
    html.ks[data-tabbar="off"] .ks-tabbar { display: none; }
    html.ks.ks-tabbar-hidden .ks-tabbar { transform: translateY(105%); }

    html.ks .ks-tabbar__pill {
        position: absolute; top: 0; left: 0; width: 20%; height: 64px; pointer-events: none; opacity: 0;
        transform: translateX(calc(var(--ks-tab-i, 0) * 100%));
        transition: transform .5s var(--ks-ease-spring, cubic-bezier(.34, 1.4, .64, 1)), opacity .2s ease;
    }
    html.ks .ks-tabbar.has-active .ks-tabbar__pill { opacity: 1; }
    html.ks .ks-tabbar__pill::after { content: ''; position: absolute; inset: 7px 9px; border-radius: 18px; background: var(--ks-nav-accent-tint, #FFE4EC); }

    html.ks .ks-tab {
        position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
        color: #6B5762; font: 700 .68rem/1 var(--ks-shell-body); text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    html.ks .ks-tab__ico { position: relative; display: inline-flex; transition: transform .38s var(--ks-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); }
    html.ks .ks-tab:active .ks-tab__ico { transform: scale(.9); transition-duration: .1s; }
    html.ks .ks-tab.is-active { color: var(--ks-nav-accent, #A82E55); }
    html.ks .ks-tab.is-active .ks-tab__ico { animation: ks-tab-pop .5s var(--ks-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); }
    html.ks .ks-tab.is-active svg { fill: currentColor; fill-opacity: .2; }
    html.ks .ks-tab .cart-count-badge { top: -6px; right: -10px; border-color: #fff; }
    @keyframes ks-tab-pop { 0% { transform: scale(.9); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }

    html.ks[data-section="games"] .ks-tabbar { background: rgba(11, 16, 32, .8); border-top-color: rgba(255, 255, 255, .1); }
    html.ks[data-section="games"] .ks-tab { color: #A8B3CF; }
    html.ks[data-section="games"] .ks-tab.is-active { color: #C4B5FD; }
    html.ks[data-section="games"] .ks-tab .cart-count-badge { border-color: #0B1020; }

    /* compact auto-hiding header: logo + language + account + menu */
    html.ks .ks-header { transition: transform .24s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1)), border-color .26s ease, background-color .26s ease; view-transition-name: ks-header; }
    html.ks.ks-header-hidden .ks-header { transform: translateY(-100%); }
    html.ks .ks-header__inner { gap: 8px; }
    html.ks .ks-header__lang { display: block; }
    html.ks .ks-lang__item { min-width: 30px; height: 28px; padding: 0 6px; font-size: .72rem; }
    html.ks .ks-cart-btn { display: none; }
    html.ks .ks-icon-btn.ks-header__user { display: inline-flex; }
    html.ks .ks-header__actions { gap: 2px; }
    html.ks .ks-drawer__link:not(.ks-drawer__link--secondary)[data-nav="store"],
    html.ks .ks-drawer__link:not(.ks-drawer__link--secondary)[data-nav="software"],
    html.ks .ks-drawer__link:not(.ks-drawer__link--secondary)[data-nav="games"] { display: none; }

    /* overlays sit above the tab bar */
    html.ks .support-widget { bottom: calc(var(--ks-bottom-inset) + 12px); }
    html.ks .ks-consent { bottom: var(--ks-bottom-inset); padding-bottom: 16px; }

    /* cart becomes a bottom sheet */
    html.ks .cart-sidebar {
        top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; height: auto; max-height: 90vh; max-height: 90dvh;
        border-radius: 24px 24px 0 0; transform: translate3d(0, 105%, 0);
    }
    html.ks .cart-sidebar.active { transform: none; }
    html.ks .cart-sidebar > .ks-sheet__grab { display: flex; }
    html.ks .cart-sidebar-header { padding-top: 4px; touch-action: none; }
    html.ks .cart-items-body { min-height: 0; }
    html.ks .cart-sidebar-footer { border-radius: 0; }
    html.ks .cart-row .cart-item { position: relative; background: var(--ks-surface, #fff); touch-action: pan-y; transition: transform .25s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1)); will-change: transform; }
    html.ks .cart-row__remove {
        display: flex; position: absolute; top: 0; right: 0; bottom: 0; width: 88px; align-items: center; justify-content: center;
        border: 0; background: var(--ks-danger, #B3261E); color: var(--ks-bg, #fff); font: 700 .9rem var(--ks-shell-body); cursor: pointer;
    }
    html.ks .cart-item-remove { display: none; }

    /* mobile page transitions: slide (forward from the right, back from the left) */
    @media (prefers-reduced-motion: no-preference) {
        ::view-transition-old(root) { animation: ks-vt-out .24s var(--ks-ease, ease) both; }
        ::view-transition-new(root) { animation: ks-vt-in .3s var(--ks-ease-out, cubic-bezier(.16, 1, .3, 1)) both; }
    }
}
@keyframes ks-vt-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes ks-vt-out { to { opacity: 0; transform: translateX(-12px); } }
@keyframes ks-vt-in-l { from { opacity: 0; transform: translateX(-24px); } }
@keyframes ks-vt-out-r { to { opacity: 0; transform: translateX(12px); } }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(back)::view-transition-old(root) { animation-name: ks-vt-out-r; }
    html:active-view-transition-type(back)::view-transition-new(root) { animation-name: ks-vt-in-l; }
}

@media (max-width: 899px) { html.ks .ks-icon-btn.ks-header__user { display: inline-flex; } }
@media (min-width: 900px) { html.ks .ks-icon-btn.ks-header__user { display: none; } }
@media (min-width: 768px) { html.ks .cart-sidebar > .ks-sheet__grab { display: none; } }

@media (prefers-reduced-motion: reduce) {
    html.ks .ks-tabbar, html.ks .ks-tabbar__pill, html.ks .ks-tab__ico, html.ks .ks-header, html.ks .ks-sheet__panel,
    html.ks .ks-sheet__backdrop, html.ks .cart-row .cart-item { transition-duration: .01ms !important; }
    html.ks .ks-tab.is-active .ks-tab__ico, html.ks .ks-tab__ico.is-pop { animation: none !important; }
}