{"product_id":"kuromi-5108-v5-mechanical-keyboard","title":"Kuromi 5108 V5 Mechanical Keyboard","description":"\u003c!-- ==========================================================================\n     AKKO — KUROMI 5108 V5 — PRODUCT PAGE SECTION\n     Shopify-compatible custom HTML\/CSS\/JS. Paste into a \"Custom Liquid\" \/\n     raw HTML code section on the product template, below the existing\n     Shopify product form (gallery + variant picker + native Add to Cart).\n\n     STORE-OWNER NOTES\n     - Paste into a \"Custom Liquid\" code section, NOT a WYSIWYG \"Rich\n       text\" block — rich-text editors can strip elements they think are\n       \"empty\" on save, which would break decorative markup.\n     - If the CTA button can't find your theme's Add to Cart button\n       automatically, add  data-atc-target  to it (or to its wrapper) —\n       see AKKO_ATC_SELECTORS in the script below.\n\n     WHAT THIS FILE DOES\n     - Preserves the original page's layout, section order and content:\n       V5 badges -\u003e hero -\u003e feature grid -\u003e Full-Body Themed Design -\u003e\n       Dual 1K Hz Polling -\u003e Pro Gaming (Snap Key \/ Mod-Tap) -\u003e ARGB -\u003e\n       Side-Integrated Controls -\u003e Dual-Section Split PC Plate -\u003e\n       Flex-Cut Hot-Swappable \/ Ultra-Slim -\u003e PBT Dye-Sub Keycaps -\u003e\n       8,000mAh Battery -\u003e Multi-Modes -\u003e Web \u0026 Cloud Driver -\u003e\n       Gasket-Mounted -\u003e Switch spec -\u003e Specs table -\u003e CTA -\u003e banner.\n\n     CHANGED IN THIS VERSION\n     1. FEATURE ICONS — now Akko's own official icon artwork, pulled from\n        en.akkogear.com (transparent AVIF, the same set Akko uses on every\n        5108 V5 product page). Nothing is re-drawn or approximated. The\n        polling icon is a plain line graph with no \"8K\" text baked in, so\n        it is correct on this 1K Hz model.\n     2. ADD TO CART CTA — rebuilt. No overlay element is injected any\n        more. The button now performs a slow (~1.7s) cubic ease-in-out\n        scroll that CENTERS the theme's real Add to Cart button, then adds\n        ONE additive, self-removing class (.ak-atc-pulse) so THAT button\n        glows. The real button's markup, size, radius, colour, attributes\n        and click handler are never touched.\n     3. TYPOGRAPHY — every font size raised ~12% for readability, across\n        desktop, tablet, mobile and small-phone breakpoints.\n     ========================================================================== --\u003e\n\n\u003cstyle\u003e\n\/* ==========================================================================\n   1. DESIGN TOKENS\n   Kuromi palette: deep violet + near-black ink, soft lilac backdrops,\n   a punk-pink accent kept for small highlights and the CTA glow.\n   ========================================================================== *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,450;9..144,560;9..144,650;9..144,720\u0026family=Manrope:wght@400;500;600;700;800\u0026family=JetBrains+Mono:wght@400;500;600;700\u0026display=swap');\n\n.ak-page{\n  --purple:      #8C63C9;\n  --purple-soft: #ECE1FA;\n  --purple-pale: #F8F4FD;\n  --violet-deep: #4C2E80;\n  --ink:         #1E1626;\n  --ink-soft:    #5C4E6C;\n  --cream:       #FFFFFF;\n  --lilac-deep:  #DCCBF2;\n  --line:        #E4D8F5;\n  --pink:        #E85C9E;\n  --mint:        #BFEAD0;\n  --lavender:    #D9CCF5;\n  --peach:       #FFD9B8;\n  --sky:         #BFE0F5;\n\n  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;\n  --font-body:    'Manrope', -apple-system, sans-serif;\n  --font-mono:    'JetBrains Mono', 'SFMono-Regular', monospace;\n\n  --radius-lg: 26px;\n  --radius-md: 18px;\n  --radius-sm: 10px;\n\n  --shadow-soft: 0 22px 48px -26px rgba(76, 46, 128, 0.5);\n  --shadow-card: 0 14px 32px -20px rgba(30, 22, 38, 0.28);\n\n  --container: 1180px;\n\n  background: var(--cream);\n  color: var(--ink);\n  font-family: var(--font-body);\n  font-size: 18px;\n  line-height: 1.65;\n  -webkit-font-smoothing: antialiased;\n  overflow-x: hidden;\n}\n\n.ak-page, .ak-page *, .ak-page *::before, .ak-page *::after{ box-sizing: border-box; }\n.ak-page img{ max-width: 100%; display: block; }\n.ak-page a{ color: inherit; }\n.ak-page :focus-visible{ outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }\n\n@media (prefers-reduced-motion: reduce){\n  .ak-page *, .ak-page *::before, .ak-page *::after{\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.001ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n.ak-container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }\n\n.ak-page h1, .ak-page h2, .ak-page h3{\n  font-family: var(--font-display); color: var(--ink); margin: 0 0 16px; line-height: 1.12; letter-spacing: -0.01em;\n}\n.ak-page h1{ font-size: clamp(2.58rem, 5.15vw, 4.03rem); font-weight: 650; }\n.ak-page h2{ font-size: clamp(1.9rem, 3.81vw, 2.8rem); font-weight: 650; }\n.ak-page h3{ font-size: 1.34rem; font-weight: 650; }\n.ak-page p{ margin: 0 0 12px; color: var(--ink-soft); }\n\n.ak-reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }\n.ak-reveal.is-visible{ opacity: 1; transform: translateY(0); }\n\n\/* ==========================================================================\n   2. SCALLOP DIVIDER\n   ========================================================================== *\/\n.ak-scallop{ position: relative; width: 100%; height: 30px; background: radial-gradient(circle at 18px 0, transparent 17px, var(--ak-target, var(--cream)) 18px) top \/ 36px 30px repeat-x; }\n.ak-scallop.to-purple{ --ak-target: var(--purple-soft); }\n.ak-scallop.to-cream{ --ak-target: var(--cream); }\n.ak-scallop.flip{ transform: rotate(180deg); }\n\n\/* ==========================================================================\n   3. HEADER STRIP + BRAND HEADER\n   ========================================================================== *\/\n.ak-top-strip{ background: var(--ink); color: var(--lilac-deep); text-align: center; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em; padding: 10px 12px; }\n.ak-brand-header{ padding: 30px 0 14px; text-align: center; }\n.ak-eyebrow{ display: inline-flex; align-items: center; gap: 8px; background: var(--purple-soft); color: var(--violet-deep); font-family: var(--font-mono); font-weight: 600; font-size: 0.87rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); margin-bottom: 16px; }\n.ak-brand-header .ak-sub{ max-width: 660px; margin: 0 auto; color: var(--ink-soft); font-size: 1.21rem; }\n\n\/* ==========================================================================\n   4. HERO BANNER\n   ========================================================================== *\/\n.ak-hero{ position: relative; background: linear-gradient(180deg, var(--purple-soft) 0%, var(--purple) 100%); padding: 10px 0 0; }\n.ak-hero-frame{ position: relative; max-width: 1400px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }\n.ak-hero-frame img{ width: 100%; height: auto; }\n\n\/* ==========================================================================\n   5. V5 UPGRADE BADGE ROW\n   ========================================================================== *\/\n.ak-badge-section{ padding: 30px 0 10px; background: var(--purple-soft); }\n.ak-badge-title{ text-align: center; margin-bottom: 26px; }\n.ak-badge-title .ak-pill{ display: inline-block; background: var(--violet-deep); color: #fff; font-family: var(--font-mono); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; margin-bottom: 12px; }\n.ak-badge-row{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }\n.ak-badge-chip{ display: flex; align-items: center; gap: 8px; background: var(--cream); border: 1.5px solid var(--line); color: var(--violet-deep); font-weight: 700; font-size: 1.03rem; padding: 12px 21px; border-radius: 999px; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }\n.ak-badge-chip, .ak-badge-chip a, .ak-badge-chip span{ color: var(--violet-deep) !important; text-decoration: none !important; background-image: none !important; }\n.ak-badge-chip:hover{ transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(76,46,128,0.4); }\n\n\/* ==========================================================================\n   6. FEATURE ICON GRID\n   Uses Akko's own official icon artwork (transparent AVIF hosted on\n   en.akkogear.com) — the identical set shown on Akko's product pages, so\n   nothing here is re-drawn. Each file already carries its own rounded-\n   square outline, so the lilac disc behind it is a plain background and\n   never becomes a second frame.\n   ========================================================================== *\/\n.ak-feature-grid-section{ padding: 34px 0; }\n.ak-feature-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }\n.ak-feat-card{ background: var(--cream); border-radius: var(--radius-md); padding: 28px 16px 22px; text-align: center; border: 1px solid var(--line); transition: transform 0.25s ease, box-shadow 0.25s ease; }\n.ak-feat-card:hover{ transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow-card); }\n.ak-feat-icon{ width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; background: var(--purple-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }\n.ak-feat-icon img{ width: 68%; height: 68%; object-fit: contain; }\n.ak-feat-card h3, .ak-feat-card h3 a, .ak-feat-card h3 span{\n  font-size: 1.12rem; margin: 0; font-family: var(--font-body); font-weight: 700;\n  color: var(--ink) !important; text-decoration: none !important; background: none !important;\n}\n\n\/* ==========================================================================\n   7. ALTERNATING TEXT \/ IMAGE MODULES\n   ========================================================================== *\/\n.ak-feature-module{ padding: 46px 0; }\n.ak-feature-module.on-purple{ background: var(--purple-pale); }\n.ak-module-grid{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }\n.ak-module-grid.reverse{ grid-template-columns: 1.05fr 1fr; }\n.ak-module-grid.reverse .ak-text-col{ order: 2; }\n.ak-module-grid.reverse .ak-image-col{ order: 1; }\n.ak-text-col{ display: flex; flex-direction: column; justify-content: center; min-height: 100%; }\n.ak-eyebrow-tag{ display: inline-block; width: fit-content; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--violet-deep); background: var(--purple-soft); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }\n.ak-text-col h2{ margin-bottom: 18px; }\n.ak-text-col p{ font-size: 1.29rem; line-height: 1.8; }\n.ak-text-col .ak-fine-print{ font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-soft); opacity: 0.8; margin-top: 14px; }\n.ak-highlight-row{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }\n.ak-highlight-chip{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; color: var(--violet-deep); background: var(--cream); border: 1.5px solid var(--line); padding: 9px 15px; border-radius: 999px; }\n.ak-highlight-chip svg{ width: 15px; height: 15px; }\n.ak-image-col{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line); min-height: 320px; }\n.ak-image-col img{ width: 100%; height: 100%; object-fit: cover; display: block; }\n\n\/* ==========================================================================\n   8. TRANSITION BANNER\n   ========================================================================== *\/\n.ak-trans-banner{ position: relative; margin: 16px auto; max-width: 900px; padding: 30px 30px; text-align: center; background: var(--ink); border-radius: var(--radius-lg); color: var(--cream); overflow: hidden; }\n.ak-trans-banner::before, .ak-trans-banner::after{ content: \"\"; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: var(--purple); opacity: 0.22; }\n.ak-trans-banner::before{ top: -60px; left: -60px; }\n.ak-trans-banner::after{ bottom: -70px; right: -70px; background: var(--pink); }\n.ak-trans-banner .ak-tag{ display: inline-block; font-family: var(--font-mono); font-size: 0.81rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lilac-deep); border: 1px solid rgba(220,203,242,0.4); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; position: relative; }\n.ak-trans-banner h2{ color: #fff; position: relative; margin: 0; }\n\n\/* ==========================================================================\n   9. PRO GAMING — SNAP KEY \/ MOD-TAP DEMOS\n   Snap Key uses an animated running-figure glyph (not a static image):\n   jittery motion for \"Off\", one smooth stride cycle for \"On\".\n   ========================================================================== *\/\n.ak-gaming-header{ text-align: center; padding: 34px 0 8px; }\n.ak-demo-section{ padding: 14px 0 34px; }\n.ak-demo-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n.ak-demo-card{ position: relative; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-card); }\n.ak-demo-visual{ position: relative; background: var(--purple-pale); border-radius: var(--radius-md); padding: 30px 20px 24px; margin: 14px 0 28px; }\n.ak-demo-num{\n  position: absolute; right: 24px; bottom: -18px; z-index: 2;\n  width: 40px; height: 40px; border-radius: 50%;\n  background: var(--violet-deep); color: #fff;\n  display: flex; align-items: center; justify-content: center;\n  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;\n  box-shadow: 0 10px 20px -10px rgba(76,46,128,0.6);\n}\n\n.ak-snap-compare{ display: flex; align-items: flex-start; gap: 0; }\n.ak-snap-col{ flex: 1; text-align: center; padding: 0 12px; }\n.ak-snap-col + .ak-snap-col{ border-left: 1px dashed var(--line); }\n.ak-snap-label{ font-family: var(--font-display); font-style: italic; font-size: 1.01rem; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.4; }\n.ak-run-icon{ width: 44px; height: 44px; margin: 6px auto 18px; color: var(--purple); }\n.ak-run-icon.off{ animation: akRunJitter 1.1s ease-in-out infinite; }\n.ak-run-icon.on{ animation: akRunSmooth 1.1s ease-in-out infinite; }\n@keyframes akRunJitter{\n  0%{ transform: translate(0,0) rotate(0deg); }\n  20%{ transform: translate(-3px,-2px) rotate(-7deg); }\n  40%{ transform: translate(2px,1px) rotate(5deg); }\n  60%{ transform: translate(-2px,-3px) rotate(-6deg); }\n  80%{ transform: translate(3px,0) rotate(6deg); }\n  100%{ transform: translate(0,0) rotate(0deg); }\n}\n@keyframes akRunSmooth{\n  0%, 100%{ transform: translateY(0) rotate(0deg); }\n  25%{ transform: translateY(-5px) rotate(-4deg); }\n  50%{ transform: translateY(0) rotate(0deg); }\n  75%{ transform: translateY(-5px) rotate(4deg); }\n}\n.ak-snap-keys{ display: flex; justify-content: center; gap: 8px; align-items: center; }\n.ak-demo-key{ width: 34px; height: 34px; border-radius: 8px; background: var(--cream); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.92rem; font-weight: 700; color: var(--ink-soft); }\n.ak-demo-key.active{ background: var(--violet-deep); color: #fff; border-color: var(--violet-deep); }\n.ak-key-plus{ color: var(--ink-soft); font-weight: 700; }\n\n.ak-modtap-demo{ display: flex; align-items: center; justify-content: center; gap: 30px; }\n.ak-modtap-key{ width: 60px; height: 60px; border-radius: 12px; background: var(--violet-deep); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 1.29rem; display: flex; align-items: center; justify-content: center; animation: akKeyPress 2.6s ease-in-out infinite; }\n@keyframes akKeyPress{ 0%, 40%, 100%{ transform: scale(1); } 10%{ transform: scale(0.9); } 20%{ transform: scale(1); } }\n.ak-modtap-actions{ display: flex; gap: 18px; }\n.ak-modtap-action{ text-align: center; }\n.ak-modtap-result{ width: 46px; height: 46px; border-radius: 10px; background: var(--cream); border: 1.5px solid var(--line); font-family: var(--font-mono); font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; }\n.ak-modtap-action span{ font-family: var(--font-mono); font-size: 0.83rem; color: var(--ink-soft); }\n.ak-demo-card h3{ margin: 4px 0 10px; }\n.ak-demo-card p{ font-size: 1.09rem; }\n\n\/* ==========================================================================\n   10. DUAL PRODUCT CARDS (Flex-Cut Hot-Swappable \/ Ultra-Slim) with a\n   soft, permanent ambient glow behind each image — pure gradients only,\n   no filter\/blur primitives, so it stays Shopify-safe.\n   ========================================================================== *\/\n.ak-dual-section{ padding: 10px 0 40px; }\n.ak-dual-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n.ak-dual-card{ background: var(--purple-pale); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; }\n.ak-dual-card h3{ margin-bottom: 10px; }\n.ak-dual-card p{ font-size: 1.12rem; }\n.ak-dual-image-wrap{ position: relative; margin-top: 20px; border-radius: var(--radius-md); overflow: hidden; }\n.ak-dual-image-wrap::before{\n  content: \"\"; position: absolute; inset: -20%;\n  background: radial-gradient(circle at 50% 45%, rgba(140,99,201,0.45), rgba(232,92,158,0.22) 45%, transparent 72%);\n  z-index: 0;\n}\n.ak-dual-image-wrap img{ position: relative; z-index: 1; width: 100%; border-radius: var(--radius-md); }\n\n\/* ==========================================================================\n   11. CENTERED INFO ROWS (Multi-Modes \/ Web \u0026 Cloud Driver \/ Gasket-Mounted)\n   ========================================================================== *\/\n.ak-info-row{ padding: 26px 0; }\n.ak-info-row-inner{ max-width: 780px; margin: 0 auto; text-align: center; }\n.ak-info-row-inner h3{ color: var(--violet-deep); font-family: var(--font-display); font-size: 1.57rem; margin-bottom: 8px; }\n.ak-info-row-inner p{ font-size: 1.18rem; margin-bottom: 18px; }\n.ak-launch-btn{ display: inline-flex; align-items: center; gap: 8px; background: var(--violet-deep); color: #fff !important; font-weight: 700; font-size: 1.05rem; text-decoration: none; padding: 14px 30px; border-radius: 999px; margin-bottom: 22px; transition: transform 0.2s ease, background 0.2s ease; }\n.ak-launch-btn:hover{ background: var(--ink); transform: translateY(-2px); }\n.ak-info-row-image{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line); }\n.ak-info-row-image img{ width: 100%; }\n\n\/* ==========================================================================\n   12. SWITCH SPEC CARD\n   ========================================================================== *\/\n.ak-switch-section{ padding: 10px 0 40px; }\n.ak-switch-card{ background: var(--purple-pale); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 34px; align-items: center; }\n.ak-switch-badge{ display: inline-block; background: var(--violet-deep); color: #fff; font-family: var(--font-mono); font-size: 0.81rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 12px; }\n.ak-switch-title{ font-family: var(--font-display); font-size: 1.68rem; font-weight: 700; margin-bottom: 20px; }\n.ak-switch-spec-item{ display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 1.06rem; }\n.ak-switch-spec-item span:first-child{ color: var(--ink-soft); }\n.ak-switch-spec-item span:last-child{ font-family: var(--font-mono); font-weight: 600; color: var(--ink); }\n.ak-switch-image-wrap{ position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--cream); border: 1px solid var(--line); min-height: 220px; display: flex; align-items: center; justify-content: center; }\n.ak-switch-image-wrap img{ width: 100%; }\n.ak-switch-placeholder{\n  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 8px;\n  height: 220px; width: 100%; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.92rem; text-align: center; padding: 20px;\n}\n.ak-switch-placeholder svg{ width: 34px; height: 34px; color: var(--purple); }\n\n\/* ==========================================================================\n   13. SPECS TABLE\n   ========================================================================== *\/\n.ak-specs-section{ padding: 30px 0 40px; }\n.ak-specs-panel{ background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 42px; box-shadow: var(--shadow-card); }\n.ak-specs-header{ margin-bottom: 24px; }\n.ak-specs-label{ font-family: var(--font-mono); font-size: 0.87rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--violet-deep); margin-bottom: 8px; }\n.ak-specs-header p{ max-width: 600px; font-size: 1.14rem; }\n.ak-manual-btn{ display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--violet-deep); color: var(--violet-deep) !important; text-decoration: none; font-weight: 700; font-size: 1.03rem; padding: 11px 21px; border-radius: 999px; margin-top: 10px; transition: background 0.2s ease, color 0.2s ease; }\n.ak-manual-btn svg{ width: 17px; height: 17px; }\n.ak-manual-btn:hover{ background: var(--violet-deep); color: #fff !important; }\n.ak-specs-list{ margin-top: 22px; }\n.ak-specs-row{ display: grid; grid-template-columns: 245px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }\n.ak-specs-row:last-child{ border-bottom: none; }\n.ak-specs-row.ak-hidden{ display: none; }\n.ak-spec-label{ font-weight: 700; color: var(--ink); }\n.ak-spec-value{ font-family: var(--font-mono); color: var(--ink-soft); font-size: 1.06rem; }\n.ak-specs-toggle{ text-align: center; margin-top: 26px; }\n.ak-specs-toggle button{ display: inline-flex; align-items: center; gap: 8px; background: var(--purple-soft); border: 1px solid var(--line); color: var(--violet-deep); font-weight: 700; font-family: var(--font-body); font-size: 1.05rem; padding: 13px 28px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; }\n.ak-specs-toggle button:hover{ background: var(--purple); color: #fff; }\n.ak-toggle-icon{ display: inline-block; transition: transform 0.25s ease; }\n.ak-specs-toggle button.expanded .ak-toggle-icon{ transform: rotate(180deg); }\n\n\/* ==========================================================================\n   14. ADD TO CART — JUMP CTA (bottom of page, before the footer banner)\n   ========================================================================== *\/\n.ak-cta-section{ padding: 8px 0 54px; }\n.ak-cta-panel{ max-width: 800px; margin: 0 auto; text-align: center; background: linear-gradient(180deg, var(--purple-pale) 0%, var(--purple-soft) 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 36px 38px; box-shadow: var(--shadow-card); }\n.ak-cta-panel p{ font-size: 1.19rem; line-height: 1.8; color: var(--ink-soft); max-width: 650px; margin: 0 auto 26px; }\n.ak-cta-button{ appearance: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--violet-deep) 0%, var(--ink) 100%); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 1.21rem; padding: 19px 42px; border-radius: 999px; box-shadow: 0 18px 34px -14px rgba(76,46,128,0.55); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }\n.ak-cta-button svg{ width: 26px; height: 26px; flex-shrink: 0; }\n.ak-cta-button:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -14px rgba(76,46,128,0.6); filter: brightness(1.08); }\n.ak-cta-button:active{ transform: translateY(-1px) scale(0.98); }\n.ak-cta-button[aria-busy=\"true\"]{ pointer-events: none; opacity: 0.85; }\n.ak-cta-note{ display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-family: var(--font-mono); font-size: 0.87rem; color: var(--ink-soft); opacity: 0.85; }\n.ak-cta-note svg{ width: 15px; height: 15px; }\n\n\/* --------------------------------------------------------------------------\n   ADD TO CART GLOW — applied to the THEME'S OWN Add to Cart button.\n\n   Purely additive and self-removing: the script adds .ak-atc-pulse, the\n   animation runs, the script removes it. The button's size, radius, border,\n   colour, text and layout are untouched — only a halo appears, pulses\n   through the Kuromi palette, and fades out.\n   -------------------------------------------------------------------------- *\/\n.ak-atc-pulse{\n  animation: akAtcPulse 1.6s ease-in-out 3 !important;\n  will-change: box-shadow;\n}\n@keyframes akAtcPulse{\n  0%{\n    box-shadow: 0 0 0 0 rgba(140,99,201,0.55), 0 0 0 0 rgba(232,92,158,0.4);\n  }\n  45%{\n    box-shadow: 0 0 0 14px rgba(140,99,201,0.12), 0 0 42px 14px rgba(140,99,201,0.5);\n  }\n  70%{\n    box-shadow: 0 0 0 20px rgba(232,92,158,0.06), 0 0 50px 18px rgba(232,92,158,0.38);\n  }\n  100%{\n    box-shadow: 0 0 0 26px rgba(140,99,201,0), 0 0 56px 20px rgba(140,99,201,0);\n  }\n}\n@media (prefers-reduced-motion: reduce){\n  .ak-atc-pulse{\n    animation: none !important;\n    box-shadow: 0 0 0 8px rgba(140,99,201,0.18), 0 0 34px 10px rgba(140,99,201,0.45) !important;\n  }\n}\n\n\/* ==========================================================================\n   15. FOOTER BANNER\n   ========================================================================== *\/\n.ak-footer-banner{ position: relative; max-width: 1400px; margin: 8px auto 40px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }\n.ak-footer-banner img{ width: 100%; }\n.ak-footer-note{ text-align: center; padding: 0 20px 54px; color: var(--ink-soft); font-size: 0.95rem; }\n.ak-footer-note strong{ color: var(--violet-deep); }\n\n\/* ==========================================================================\n   16. RESPONSIVE — TABLET (\u003c=980px)\n   ========================================================================== *\/\n@media (max-width: 980px){\n  .ak-feature-grid{ grid-template-columns: repeat(3, 1fr); }\n  .ak-module-grid, .ak-module-grid.reverse{ grid-template-columns: 1fr; gap: 26px; }\n  .ak-module-grid .ak-text-col, .ak-module-grid.reverse .ak-text-col{ order: 1; }\n  .ak-module-grid .ak-image-col, .ak-module-grid.reverse .ak-image-col{ order: 2; }\n  .ak-image-col{ min-height: 260px; }\n  .ak-demo-grid{ grid-template-columns: 1fr; }\n  .ak-dual-grid{ grid-template-columns: 1fr; }\n  .ak-switch-card{ grid-template-columns: 1fr; }\n  .ak-switch-image-wrap{ order: -1; }\n  .ak-specs-panel{ padding: 32px; }\n  .ak-cta-panel{ padding: 34px 26px; }\n}\n\n\/* ==========================================================================\n   17. RESPONSIVE — MOBILE (\u003c=620px)\n   ========================================================================== *\/\n@media (max-width: 620px){\n  .ak-container{ padding: 0 16px; }\n  .ak-page{ font-size: 17px; }\n  .ak-page h1{ font-size: 2.24rem; }\n  .ak-page h2{ font-size: 1.74rem; }\n  .ak-feature-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }\n  .ak-feat-card{ padding: 22px 10px 16px; }\n  .ak-feat-icon{ width: 62px; height: 62px; }\n  .ak-feat-card h3{ font-size: 0.96rem; }\n  .ak-badge-row{ flex-direction: column; align-items: stretch; }\n  .ak-badge-chip{ justify-content: center; }\n  .ak-trans-banner{ padding: 32px 18px; }\n  .ak-specs-panel{ padding: 24px 18px; }\n  .ak-specs-row{ grid-template-columns: 1fr; gap: 3px; }\n  .ak-text-col p{ font-size: 1.18rem; }\n  .ak-cta-button{ width: 100%; justify-content: center; padding: 17px 20px; font-size: 1.12rem; }\n  .ak-cta-panel{ padding: 30px 20px; }\n  .ak-snap-compare{ gap: 4px; }\n  .ak-snap-col{ padding: 0 6px; }\n  .ak-modtap-demo{ gap: 18px; }\n  .ak-switch-card{ padding: 22px; }\n}\n\n\/* ==========================================================================\n   18. RESPONSIVE — SMALL PHONES (\u003c=360px)\n   ========================================================================== *\/\n@media (max-width: 360px){\n  .ak-page h1{ font-size: 1.9rem; }\n  .ak-feature-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }\n  .ak-feat-icon{ width: 56px; height: 56px; }\n  .ak-badge-chip{ font-size: 0.95rem; padding: 11px 16px; }\n  .ak-demo-card{ padding: 22px 18px; }\n}\n\n\/* ==========================================================================\n   19. RESPONSIVE — LARGE \/ ULTRA-WIDE (\u003e=1600px)\n   ========================================================================== *\/\n@media (min-width: 1600px){\n  .ak-page{ --container: 1320px; }\n  .ak-hero-frame, .ak-footer-banner{ max-width: 1600px; }\n}\n\u003c\/style\u003e\n\n\u003cdiv class=\"ak-page\"\u003e\n\n  \u003c!-- ============================================================\n       TOP STRIP + BRAND HEADER\n       ============================================================ --\u003e\n  \u003cdiv class=\"ak-top-strip\"\u003eSANRIO LICENSED DESIGN · AKKO 5108 V5 SERIES · LIMITED COLLECTION\u003c\/div\u003e\n  \u003cheader class=\"ak-brand-header\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cspan class=\"ak-eyebrow\"\u003e\n        \u003csvg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 21s-7.5-4.6-10-9.3C.4 8.1 2 4.5 5.4 3.6c2.2-.6 4.4.4 5.6 2.2C12.2 4 14.4 3 16.6 3.6c3.4.9 5 4.5 3.4 8.1C17.5 16.4 12 21 12 21z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n        V5 Upgrade · Kuromi Series\n      \u003c\/span\u003e\n      \u003ch1\u003eAkko Kuromi 5108 V5\u003cbr\u003eMechanical Keyboard\u003c\/h1\u003e\n      \u003cp class=\"ak-sub\"\u003e100% layout, gasket-mount softness and full Kuromi theming on every surface — with near-zero latency at 1,000 Hz polling, wired or wireless.\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/header\u003e\n\n  \u003c!-- ============================================================\n       HERO BANNER\n       ============================================================ --\u003e\n  \u003csection class=\"ak-hero\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-hero-frame\"\u003e\n        \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-Q.avif\" alt=\"Akko Kuromi 5108 V5 mechanical keyboard, full view\"\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003cdiv class=\"ak-scallop to-purple\"\u003e\u003c\/div\u003e\n\n  \u003c!-- ============================================================\n       V5 UPGRADE BADGE ROW\n       ============================================================ --\u003e\n  \u003csection class=\"ak-badge-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-badge-title ak-reveal\"\u003e\n        \u003cspan class=\"ak-pill\"\u003eV5 Upgrade\u003c\/span\u003e\n        \u003ch2\u003eWhat's New in the 5108 V5?\u003c\/h2\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"ak-badge-row ak-reveal\"\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eWired \u0026amp; 2.4G Wireless · 1K Hz\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eUpgraded ARGB Backlight\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003e8,000 mAh · Long-Lasting Battery\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eBottom Case Art · Aesthetic Unity\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eUltra-Narrow Gasket Structure\u003c\/div\u003e\n        \u003cdiv class=\"ak-badge-chip\"\u003eDual-Section Split PC Plate\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003cdiv class=\"ak-scallop to-cream flip\"\u003e\u003c\/div\u003e\n\n  \u003c!-- ============================================================\n       FEATURE ICON GRID\n       Akko's official icon files (en.akkogear.com), transparent AVIF.\n       Each already carries its own rounded-square outline, so the lilac\n       disc behind it is a plain background, never a second frame.\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-grid-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-feature-grid\"\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-100-Layout.avif\" alt=\"Akko 5108 V5 — 100% Layout icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003e100% Layout\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-100-8K.avif\" alt=\"Akko 5108 V5 — polling rate icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003e1K Polling Rate\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Per-Key-Flex-Cut.avif\" alt=\"Akko 5108 V5 — Per-Key Flex-Cut icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003ePer-Key Flex-Cut\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Gasket-Mount.avif\" alt=\"Akko 5108 V5 — Gasket Mount icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eGasket Mount\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Hot-Swappable.avif\" alt=\"Akko 5108 V5 — Hot-Swappable icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eHot-Swappable\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-RGB.avif\" alt=\"Akko 5108 V5 — RGB Backlit icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eRGB Backlit\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-PBT-Dye-Sub.avif\" alt=\"Akko 5108 V5 — PBT Dye-Sub icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003ePBT Dye-Sub\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"ak-feat-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-feat-icon\"\u003e\n            \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/04\/Bun-Wonderland-5108-V5-MD-Multi-mode.avif\" alt=\"Akko 5108 V5 — Multi-mode icon\" loading=\"lazy\" width=\"120\" height=\"120\"\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eMulti-mode\u003c\/h3\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       FULL-BODY THEMED DESIGN\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid\"\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003eTheme Design\u003c\/span\u003e\n          \u003ch2\u003eFull-Body Themed Design\u003c\/h2\u003e\n          \u003cp\u003eThe keyboard features Kuromi artwork across the top case and the entire back panel. Paired with matching themed keycaps, it presents a perfectly cohesive design from every angle — top, bottom and everywhere in between.\u003c\/p\u003e\n          \u003cdiv class=\"ak-highlight-row\"\u003e\n            \u003cspan class=\"ak-highlight-chip\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M4 15c4.4-4.4 11.6-4.4 16 0\"\u003e\u003c\/path\u003e\u003c\/svg\u003eBottom case art\u003c\/span\u003e\n            \u003cspan class=\"ak-highlight-chip\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M8.5 4.4 19.6 7.9 15.5 12 4.4 8.5Z\"\u003e\u003c\/path\u003e\u003cpath d=\"M4.4 8.5 3.2 15.2l11.1 4.2 1.2-7.4\"\u003e\u003c\/path\u003e\u003cpath d=\"M19.6 7.9l1.2 6.3-6.5 5.2\"\u003e\u003c\/path\u003e\u003c\/svg\u003eMatching keycap set\u003c\/span\u003e\n            \u003cspan class=\"ak-highlight-chip\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"currentColor\"\u003e\u003cpath d=\"M12 2 14 10 22 12 14 14 12 22 10 14 2 12 10 10Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003eARGB accents\u003c\/span\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-CT-BM.avif\" alt=\"Kuromi full-body themed design, top case and back panel\"\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       DUAL 1K HZ POLLING RATE\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module on-purple\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid reverse\"\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-CT-1Kz.avif\" alt=\"1K Hz polling rate performance visual\"\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003ePerformance\u003c\/span\u003e\n          \u003ch2\u003eDual 1K Hz Polling Rate\u003c\/h2\u003e\n          \u003cp\u003eFeaturing a 1,000 Hz polling rate in both wired and 2.4G modes, this keyboard delivers near-zero latency, ultra-responsive performance and precise control — whether you're gaming or typing.\u003c\/p\u003e\n          \u003cp class=\"ak-fine-print\"\u003e*When testing 1K polling rate with Keyboard Inspector, please ensure your computer is in Safe Mode for accurate results.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       PRO GAMING FEATURES HEADER\n       ============================================================ --\u003e\n  \u003cdiv class=\"ak-scallop to-cream\"\u003e\u003c\/div\u003e\n  \u003csection class=\"ak-gaming-header\"\u003e\n    \u003cdiv class=\"ak-container ak-reveal\"\u003e\u003ch1\u003ePro Gaming Features\u003c\/h1\u003e\u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       SNAP KEY \u0026 MOD-TAP DEMO CARDS\n       ============================================================ --\u003e\n  \u003csection class=\"ak-demo-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-demo-grid\"\u003e\n\n        \u003c!-- Snap Key: animated running-figure glyph, jittery Off vs smooth On --\u003e\n        \u003cdiv class=\"ak-demo-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-demo-visual\"\u003e\n            \u003cdiv class=\"ak-snap-compare\"\u003e\n              \u003cdiv class=\"ak-snap-col\"\u003e\n                \u003cdiv class=\"ak-snap-label\"\u003eAkko Snap Keys\u003cbr\u003eOff\u003c\/div\u003e\n                \u003csvg class=\"ak-run-icon off\" viewbox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"\u003e\n                  \u003ccircle cx=\"14.2\" cy=\"4.2\" r=\"2\"\u003e\u003c\/circle\u003e\n                  \u003cpath d=\"M15 8 12 10 9 9 7 12.3 9 13.3 11 11 12 13 10 19.3 12 20 14 15 16 17 18 20 20 19 17 14 16 9.6 18 7.8 16 6.8 15 8Z\"\u003e\u003c\/path\u003e\n                \u003c\/svg\u003e\n                \u003cdiv class=\"ak-snap-keys\"\u003e\n                  \u003cdiv class=\"ak-demo-key active\"\u003eA\u003c\/div\u003e\n\u003cspan class=\"ak-key-plus\"\u003e+\u003c\/span\u003e\u003cdiv class=\"ak-demo-key active\"\u003eD\u003c\/div\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n              \u003cdiv class=\"ak-snap-col\"\u003e\n                \u003cdiv class=\"ak-snap-label\"\u003eAkko Snap Keys\u003cbr\u003eOn\u003c\/div\u003e\n                \u003csvg class=\"ak-run-icon on\" viewbox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"\u003e\n                  \u003ccircle cx=\"14.2\" cy=\"4.2\" r=\"2\"\u003e\u003c\/circle\u003e\n                  \u003cpath d=\"M15 8 12 10 9 9 7 12.3 9 13.3 11 11 12 13 10 19.3 12 20 14 15 16 17 18 20 20 19 17 14 16 9.6 18 7.8 16 6.8 15 8Z\"\u003e\u003c\/path\u003e\n                \u003c\/svg\u003e\n                \u003cdiv class=\"ak-snap-keys\"\u003e\n                  \u003cdiv class=\"ak-demo-key\"\u003eA\u003c\/div\u003e\n\u003cspan class=\"ak-key-plus\"\u003e+\u003c\/span\u003e\u003cdiv class=\"ak-demo-key active\"\u003eD\u003c\/div\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"ak-demo-num\"\u003e01\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eSnap Key\u003c\/h3\u003e\n          \u003cp\u003eSnap Key is Akko's implementation of SOCD, prioritizing the most recent keypress for swift directional changes without releasing previous inputs. This ensures fluid, responsive control in FPS games, where quick reactions and precise movement are crucial.\u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Mod-Tap --\u003e\n        \u003cdiv class=\"ak-demo-card ak-reveal\"\u003e\n          \u003cdiv class=\"ak-demo-visual\"\u003e\n            \u003cdiv class=\"ak-modtap-demo\"\u003e\n              \u003cdiv class=\"ak-modtap-key\"\u003eG\u003c\/div\u003e\n              \u003cdiv class=\"ak-modtap-actions\"\u003e\n                \u003cdiv class=\"ak-modtap-action\"\u003e\n\u003cdiv class=\"ak-modtap-result\"\u003eG\u003c\/div\u003e\n\u003cspan\u003eTap\u003c\/span\u003e\n\u003c\/div\u003e\n                \u003cdiv class=\"ak-modtap-action\"\u003e\n\u003cdiv class=\"ak-modtap-result\"\u003eF\u003c\/div\u003e\n\u003cspan\u003eHold\u003c\/span\u003e\n\u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"ak-demo-num\"\u003e02\u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003ch3\u003eMod-Tap\u003c\/h3\u003e\n          \u003cp\u003eMod Tap is a design that provides convenience for gaming. It enables the creation of dedicated or dual-functional keys based on key press behavior — holding down the key for one function, and briefly pressing it for another — improving efficiency and control.\u003c\/p\u003e\n        \u003c\/div\u003e\n\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       TRANSITION BANNER — MEET THE NEW 5108 V5\n       ============================================================ --\u003e\n  \u003csection class=\"ak-container\" style=\"padding: 8px 0 16px;\"\u003e\n    \u003cdiv class=\"ak-trans-banner ak-reveal\"\u003e\n\u003cspan class=\"ak-tag\"\u003eKuromi\u003c\/span\u003e\u003ch2\u003eMEET THE NEW 5108 V5\u003c\/h2\u003e\n\u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       ARGB BACKLIGHT\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid\"\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003eLighting\u003c\/span\u003e\n          \u003ch2\u003eARGB Backlight\u003c\/h2\u003e\n          \u003cp\u003eFeaturing ARGB (addressable RGB) with individually controlled LEDs for smooth, flicker-free lighting — customizable through the Akko Cloud Driver to add a striking glow to your setup.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-CT-RGB.avif\" alt=\"ARGB backlighting detail\"\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       SIDE-INTEGRATED CONTROLS\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module on-purple\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid reverse\"\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-CT-Type-C.avif\" alt=\"Side-integrated USB-C port and mode switch\"\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003eConnectivity\u003c\/span\u003e\n          \u003ch2\u003eSide-Integrated Controls\u003c\/h2\u003e\n          \u003cp\u003eThe multi-device switch and USB-C port are seamlessly integrated into the keyboard's side for easy access and a cleaner look. Quickly toggle between Mac, Windows, USB, 2.4G and Bluetooth.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       DUAL-SECTION SPLIT PC PLATE\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid\"\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003eConstruction\u003c\/span\u003e\n          \u003ch2\u003eDual-Section Split PC Plate\u003c\/h2\u003e\n          \u003cp\u003eSide-mounted silicone pads resolve the conflict between a narrow bezel and a soft typing structure, enabling an ultra-slim frame. The dual-section split PC plate enhances typing elasticity and soft bounce.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-CT-Dual-Section.avif\" alt=\"Dual-section split PC plate construction\"\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       FLEX-CUT HOT-SWAPPABLE + ULTRA-SLIM DESIGN\n       ============================================================ --\u003e\n  \u003csection class=\"ak-dual-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-dual-grid\"\u003e\n        \u003cdiv class=\"ak-dual-card ak-reveal\"\u003e\n          \u003ch3\u003eFlex-Cut Hot-Swappable\u003c\/h3\u003e\n          \u003cp\u003eHot-swappable design for easy customization and upgrades. Flex-cut PCB and dual-section plate for a softer, more responsive feel. Multi-layer dampening for deeper, quieter, more refined sound.\u003c\/p\u003e\n          \u003cdiv class=\"ak-dual-image-wrap\"\u003e\u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-XT-Hotswap-Socket.avif\" alt=\"Flex-cut hot-swap switch socket\"\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-dual-card ak-reveal\"\u003e\n          \u003ch3\u003eUltra-Slim Design\u003c\/h3\u003e\n          \u003cp\u003eMaximize desk space while enjoying a soft and flexible gasket typing feel, enhanced by the clean contrast of polished shine and textured details.\u003c\/p\u003e\n          \u003cdiv class=\"ak-dual-image-wrap\"\u003e\u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-XT-CM.avif\" alt=\"Ultra-slim body design\"\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       TRANSITION BANNER — GET THE MOST\n       ============================================================ --\u003e\n  \u003csection class=\"ak-container\" style=\"padding: 8px 0 16px;\"\u003e\n    \u003cdiv class=\"ak-trans-banner ak-reveal\"\u003e\n\u003cspan class=\"ak-tag\"\u003eKuromi\u003c\/span\u003e\u003ch2\u003eGet the MOST out of 5108 V5\u003c\/h2\u003e\n\u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       PBT DYE-SUB KEYCAPS\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module on-purple\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid reverse\"\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-MOA-Profile.avif\" alt=\"PBT dye-sub MOA profile keycaps\"\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003eKeycaps\u003c\/span\u003e\n          \u003ch2\u003ePBT Dye-Sub Keycaps\u003c\/h2\u003e\n          \u003cp\u003eMade through a dye-sublimation process with durable PBT material, so the legends won't fade easily. These keycaps keep their pristine matte look while delivering a comfortable, tactile typing experience.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       8,000MAH BATTERY\n       ============================================================ --\u003e\n  \u003csection class=\"ak-feature-module\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-module-grid\"\u003e\n        \u003cdiv class=\"ak-text-col ak-reveal\"\u003e\n          \u003cspan class=\"ak-eyebrow-tag\"\u003eBattery\u003c\/span\u003e\n          \u003ch2\u003e8,000mAh Battery\u003c\/h2\u003e\n          \u003cp\u003eEnjoy uninterrupted typing, gaming or productivity with a high-capacity 8,000mAh battery — no need for constant recharging.\u003c\/p\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-image-col ak-reveal\"\u003e\n          \u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-8000mAh.avif\" alt=\"8,000mAh high-capacity battery\"\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       MULTI-MODES \/ WEB \u0026 CLOUD DRIVER \/ GASKET-MOUNTED\n       — centered info rows\n       ============================================================ --\u003e\n  \u003csection class=\"ak-info-row\" style=\"background: var(--purple-pale);\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-info-row-inner ak-reveal\"\u003e\n        \u003ch3\u003eMulti-Modes\u003c\/h3\u003e\n        \u003cp\u003eKuromi 5108 V5 supports BT 5.0, multi-host 2.4GHz (with receiver) and wired Type-C connection for seamless device switching.\u003c\/p\u003e\n        \u003cdiv class=\"ak-info-row-image\"\u003e\u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-SM-K.avif\" alt=\"Multi-mode connectivity — Bluetooth, 2.4G and wired\"\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"ak-info-row\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-info-row-inner ak-reveal\"\u003e\n        \u003ch3\u003eWeb \u0026amp; Cloud Driver\u003c\/h3\u003e\n        \u003cp\u003eFull customization for lighting, keys and macros. Customize your keyboard any time, anywhere.\u003c\/p\u003e\n        \u003ca class=\"ak-launch-btn\" href=\"https:\/\/web.akkogear.com\" target=\"_blank\" rel=\"noopener\"\u003e\n          \u003csvg viewbox=\"0 0 24 24\" width=\"17\" height=\"17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M5 12h14M13 6l6 6-6 6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          Launch Web Driver\n        \u003c\/a\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003csection class=\"ak-info-row\" style=\"background: var(--purple-pale);\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-info-row-inner ak-reveal\"\u003e\n        \u003ch3\u003eGasket-Mounted\u003c\/h3\u003e\n        \u003cp\u003eAkko's innovative Gasket design effectively eliminates the key-striking resonance common in traditional tray-mount structures.\u003c\/p\u003e\n        \u003cdiv class=\"ak-info-row-image\"\u003e\u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-CJ.avif\" alt=\"Gasket mount construction cross-section\"\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       SWITCH SPEC CARD\n       ============================================================ --\u003e\n  \u003csection class=\"ak-switch-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-switch-card ak-reveal\"\u003e\n        \u003cdiv\u003e\n          \u003cspan class=\"ak-switch-badge\"\u003eLinear Switch\u003c\/span\u003e\n          \u003cdiv class=\"ak-switch-title\"\u003eAkko V3 Piano Pro Switch\u003c\/div\u003e\n          \u003cdiv class=\"ak-switch-spec-item\"\u003e\n\u003cspan\u003eType\u003c\/span\u003e\u003cspan\u003eLinear\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-switch-spec-item\"\u003e\n\u003cspan\u003eOperating Force\u003c\/span\u003e\u003cspan\u003e45 ± 5gf\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-switch-spec-item\"\u003e\n\u003cspan\u003eTotal Travel\u003c\/span\u003e\u003cspan\u003e3.1 mm\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-switch-spec-item\"\u003e\n\u003cspan\u003ePre Travel\u003c\/span\u003e\u003cspan\u003e1.9 ± 0.5 mm\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-switch-spec-item\"\u003e\n\u003cspan\u003eMaterial\u003c\/span\u003e\u003cspan\u003ePOM \/ PA \/ PA\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-switch-spec-item\"\u003e\n\u003cspan\u003eLED Diffuser\u003c\/span\u003e\u003cspan\u003eYes\u003c\/span\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-switch-image-wrap\"\u003e\n          \u003cimg id=\"ak-switch-img\" src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/06\/The-Legend-of-Hei-5108-V5-V3-Piano-Pro-GX.avif\" alt=\"Akko V3 Piano Pro switch\"\u003e\n          \u003cdiv class=\"ak-switch-placeholder\" id=\"ak-switch-placeholder\"\u003e\n            \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003crect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\"\u003e\u003c\/rect\u003e\u003cpath d=\"M6 6l12 12M18 6 6 18\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            Switch photo coming soon\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       SPECS TABLE\n       ============================================================ --\u003e\n  \u003csection class=\"ak-specs-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-specs-panel ak-reveal\"\u003e\n        \u003cdiv class=\"ak-specs-header\"\u003e\n          \u003cp class=\"ak-specs-label\"\u003eKuromi 5108 V5\u003c\/p\u003e\n          \u003ch2\u003eSpecs\u003c\/h2\u003e\n          \u003cp\u003eLearn more about the 5108 V5, such as hotkeys, system commands, backlight settings and more, in the user manual.\u003c\/p\u003e\n          \u003ca class=\"ak-manual-btn\" href=\"https:\/\/file.akkogear.com\/5108_V5.pdf\" target=\"_blank\" rel=\"noopener\"\u003e\n            \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M4 5a2 2 0 0 1 2-2h11v16H6a2 2 0 0 0-2 2V5Z\"\u003e\u003c\/path\u003e\u003cpath d=\"M6 3v16\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n            User Manual\n          \u003c\/a\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-specs-list\" id=\"ak-specs-list\"\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eStructure:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eGasket Mount\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eConnection:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eBluetooth 5.0 \/ 2.4GHz \/ USB Type-C\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eBacklight:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eARGB Backlit\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eHot Swappable:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e3-Pin \/ 5-Pin Support\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eN-Key Rollover:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eSupport\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eBattery Capacity:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e8,000mAh\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003ePolling Rate:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e1,000Hz in wired and 2.4G mode, 125Hz in Bluetooth mode\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eMacro:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eAkko Macro V1.0\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eSwitches:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eAkko V3 Piano Pro\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eMaterials:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003ePBT Keycaps + ABS Case\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eLegends Printing:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eDye-Sublimation\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eKeycap Profile:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eMOA\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eProduct Weight:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eApproximately 1.41KG\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eDimensions:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003e440.5 × 130 × 30.1mm (excluding keycap height)\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003eOperating Systems:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eWindows \/ macOS \/ iOS \/ Android\u003c\/span\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"ak-specs-row ak-hidden\"\u003e\n\u003cspan class=\"ak-spec-label\"\u003ePackage List:\u003c\/span\u003e\u003cspan class=\"ak-spec-value\"\u003eKeyboard×1, Manual×1, Cable×1, Receiver×1, Keycap Puller×1, Switch Puller×1, Dust Cover×1, Extra Switches\u003c\/span\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"ak-specs-toggle\"\u003e\n          \u003cbutton type=\"button\" id=\"ak-specs-toggle-btn\"\u003e\n            \u003cspan id=\"ak-specs-toggle-label\"\u003eView all\u003c\/span\u003e\n            \u003cspan class=\"ak-toggle-icon\"\u003e\u003csvg viewbox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M6 9l6 6 6-6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003c\/span\u003e\n          \u003c\/button\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       ADD TO CART — JUMP CTA  (bottom of page)\n       Slow-scrolls the store's real Add to Cart button to the centre of\n       the viewport, then makes THAT button glow. See script below.\n       ============================================================ --\u003e\n  \u003csection class=\"ak-cta-section\"\u003e\n    \u003cdiv class=\"ak-container\"\u003e\n      \u003cdiv class=\"ak-cta-panel ak-reveal\"\u003e\n        \u003cp\u003eA 100% layout with Gasket Mount softness and full-body Kuromi theming, front to back. Wired, 2.4GHz and Bluetooth 5.0 keep you connected with near-zero latency, backed by 1K Hz polling and an 8,000mAh battery.\u003c\/p\u003e\n        \u003cbutton type=\"button\" class=\"ak-cta-button\" data-scroll-to-cart\u003e\n          \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003ccircle cx=\"9\" cy=\"20\" r=\"1.3\"\u003e\u003c\/circle\u003e\u003ccircle cx=\"17\" cy=\"20\" r=\"1.3\"\u003e\u003c\/circle\u003e\u003cpath d=\"M2 3h2l2.6 12.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.6L21 7H6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          Add to Cart\n        \u003c\/button\u003e\n        \u003cdiv class=\"ak-cta-note\"\u003e\n          \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003cpath d=\"M12 19V5M6 11l6-6 6 6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n          Takes you straight to the purchase panel above\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  \u003c\/section\u003e\n\n  \u003c!-- ============================================================\n       FOOTER BANNER\n       ============================================================ --\u003e\n  \u003csection class=\"ak-container\"\u003e\n    \u003cdiv class=\"ak-footer-banner ak-reveal\"\u003e\u003cimg src=\"https:\/\/en.akkogear.com\/wp-content\/uploads\/2026\/08\/Kuromi-5108-V5-XQ-CC.avif\" alt=\"Akko Kuromi 5108 V5 closing image\"\u003e\u003c\/div\u003e\n  \u003c\/section\u003e\n  \u003cp class=\"ak-footer-note\"\u003eThis product is manufactured by \u003cstrong\u003eAkko\u003c\/strong\u003e and features a \u003cstrong\u003eSanrio Kuromi\u003c\/strong\u003e licensed design. Images are for illustrative purposes; actual product and packaging may differ slightly.\u003c\/p\u003e\n\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* ==========================================================================\n   AKKO KUROMI 5108 V5 — page behaviour (vanilla JS, no dependencies)\n   1. Switch photo fallback (no inline onerror attribute)\n   2. Specs \"view all \/ view less\" toggle\n   3. Add to Cart CTA:\n        - find the theme's REAL Add to Cart button\n        - slow, custom-eased scroll (~1.7s cubic ease-in-out) that centres\n          that button in the viewport\n        - add ONE additive class (.ak-atc-pulse) to it, auto-removed when\n          the glow animation finishes\n      Nothing is injected, cloned, hidden, restyled or rebound. The real\n      button's markup, attributes and click behaviour stay untouched.\n   4. Lightweight scroll-reveal for .ak-reveal blocks\n   ========================================================================== *\/\n(function () {\n  \"use strict\";\n\n  var reduceMotion = window.matchMedia \u0026\u0026 window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n  \/* -------------------------------------------------------------\n     1. Switch photo fallback\n     ------------------------------------------------------------- *\/\n  var switchImg = document.getElementById(\"ak-switch-img\");\n  var switchPlaceholder = document.getElementById(\"ak-switch-placeholder\");\n  if (switchImg \u0026\u0026 switchPlaceholder) {\n    switchImg.addEventListener(\"error\", function () {\n      switchImg.style.display = \"none\";\n      switchPlaceholder.style.display = \"flex\";\n    });\n  }\n\n  \/* -------------------------------------------------------------\n     2. Specs toggle\n     ------------------------------------------------------------- *\/\n  var toggleBtn = document.getElementById(\"ak-specs-toggle-btn\");\n  var toggleLabel = document.getElementById(\"ak-specs-toggle-label\");\n  if (toggleBtn) {\n    toggleBtn.addEventListener(\"click\", function () {\n      var expanded = toggleBtn.classList.contains(\"expanded\");\n      if (!expanded) {\n        document.querySelectorAll(\"#ak-specs-list .ak-hidden\").forEach(function (row) {\n          row.classList.remove(\"ak-hidden\");\n          row.classList.add(\"ak-visible-extra\");\n        });\n        toggleLabel.textContent = \"View less\";\n        toggleBtn.classList.add(\"expanded\");\n      } else {\n        document.querySelectorAll(\"#ak-specs-list .ak-visible-extra\").forEach(function (row) {\n          row.classList.add(\"ak-hidden\");\n          row.classList.remove(\"ak-visible-extra\");\n        });\n        toggleLabel.textContent = \"View all\";\n        toggleBtn.classList.remove(\"expanded\");\n      }\n    });\n  }\n\n  \/* -------------------------------------------------------------\n     3. Add to Cart — find target, slow-scroll, glow the real button\n     ------------------------------------------------------------- *\/\n\n  \/* Selector list, most specific first. The actual Add to Cart BUTTON is\n     what should glow, so button-level selectors come before the wrapping\n     form\/section fallbacks. Add data-atc-target to your theme's button\n     to pin it explicitly. *\/\n  var AKKO_ATC_SELECTORS = [\n    \"[data-atc-target]\",\n    \"button[name=\\\"add\\\"]\",\n    \".product-form__submit\",\n    \".product-form__cart-submit\",\n    \".product-form__buttons button[type=\\\"submit\\\"]\",\n    \"#AddToCart\",\n    \"#ProductSubmitButton\",\n    \"[data-add-to-cart-btn]\",\n    \"[data-add-to-cart]\",\n    \".add-to-cart-button\",\n    \".btn--add-to-cart\",\n    \".ProductForm__AddToCart\",\n    \"form[action*=\\\"\/cart\/add\\\"] button[type=\\\"submit\\\"]\",\n    \"form[action*=\\\"\/cart\/add\\\"]\",\n    \"product-form\",\n    \".product-form__buttons\",\n    \".product-form__cart\",\n    \".product__add-to-cart\",\n    \"[data-add-to-cart-form]\"\n  ];\n\n  var AK_GLOW_CLASS = \"ak-atc-pulse\";\n  var AK_GLOW_MS = reduceMotion ? 1600 : 5200;  \/* 1.6s x 3 loops + buffer *\/\n  var AK_SCROLL_MS = 1700;                      \/* slow, deliberate travel *\/\n  var akBusy = false;\n\n  \/* A candidate is only usable if it is really on the page, visible, has\n     real size, is not part of this description block, and is not inside a\n     position:fixed bar (scrolling to those is meaningless).\n     position:sticky is deliberately ALLOWED — most themes make the whole\n     product info column sticky, and that column holds the real button. *\/\n  function akIsUsable(el) {\n    if (!el || !el.getBoundingClientRect) return false;\n    if (el.closest \u0026\u0026 el.closest(\".ak-page\")) return false;\n\n    var rect = el.getBoundingClientRect();\n    if (rect.width \u003c 10 || rect.height \u003c 10) return false;\n\n    var cs = window.getComputedStyle(el);\n    if (cs.display === \"none\" || cs.visibility === \"hidden\" || parseFloat(cs.opacity) === 0) return false;\n    if (cs.position === \"fixed\") return false;\n\n    var parent = el.parentElement, hops = 0;\n    while (parent \u0026\u0026 parent !== document.body \u0026\u0026 hops \u003c 12) {\n      var ps = window.getComputedStyle(parent);\n      if (ps.position === \"fixed\") return false;\n      if (ps.display === \"none\" || ps.visibility === \"hidden\") return false;\n      parent = parent.parentElement;\n      hops++;\n    }\n    return true;\n  }\n\n  function akFindAtcTarget() {\n    for (var i = 0; i \u003c AKKO_ATC_SELECTORS.length; i++) {\n      var nodes = document.querySelectorAll(AKKO_ATC_SELECTORS[i]);\n      for (var j = 0; j \u003c nodes.length; j++) {\n        if (akIsUsable(nodes[j])) return nodes[j];\n      }\n    }\n    return null;\n  }\n\n  \/* Centre the target in the viewport — this clears sticky headers and\n     announcement bars without hardcoding an offset for every theme. *\/\n  function akTargetScrollY(el) {\n    var rect = el.getBoundingClientRect();\n    var current = window.pageYOffset || document.documentElement.scrollTop || 0;\n    var y = rect.top + current - (window.innerHeight - rect.height) \/ 2;\n    var max = Math.max(\n      (document.documentElement.scrollHeight || document.body.scrollHeight) - window.innerHeight,\n      0\n    );\n    return Math.min(Math.max(y, 0), max);\n  }\n\n  function akEaseInOutCubic(t) {\n    return t \u003c 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n  }\n\n  function akSlowScrollTo(endY, onDone) {\n    var startY = window.pageYOffset || document.documentElement.scrollTop || 0;\n    var distance = endY - startY;\n\n    if (reduceMotion || Math.abs(distance) \u003c 2) {\n      window.scrollTo(0, endY);\n      if (onDone) onDone();\n      return;\n    }\n\n    var startTime = null;\n    function step(now) {\n      if (startTime === null) startTime = now;\n      var progress = Math.min((now - startTime) \/ AK_SCROLL_MS, 1);\n      window.scrollTo(0, startY + distance * akEaseInOutCubic(progress));\n      if (progress \u003c 1) {\n        window.requestAnimationFrame(step);\n      } else if (onDone) {\n        onDone();\n      }\n    }\n    window.requestAnimationFrame(step);\n  }\n\n  \/* The ONLY change ever made to the store's real button: one additive,\n     self-removing class. No attribute, style, text or handler edits. *\/\n  function akGlowTarget(el) {\n    el.classList.remove(AK_GLOW_CLASS);\n    void el.offsetWidth; \/* reflow, so a repeat click restarts the glow *\/\n    el.classList.add(AK_GLOW_CLASS);\n    window.setTimeout(function () {\n      el.classList.remove(AK_GLOW_CLASS);\n    }, AK_GLOW_MS);\n  }\n\n  function akRunCta(target, ctaBtn) {\n    akBusy = true;\n    if (ctaBtn) ctaBtn.setAttribute(\"aria-busy\", \"true\");\n\n    \/* target position recomputed fresh on every click *\/\n    akSlowScrollTo(akTargetScrollY(target), function () {\n      akGlowTarget(target);\n      akBusy = false;\n      if (ctaBtn) ctaBtn.removeAttribute(\"aria-busy\");\n    });\n  }\n\n  var ctaButtons = document.querySelectorAll(\".ak-cta-button[data-scroll-to-cart]\");\n  ctaButtons.forEach(function (btn) {\n    btn.addEventListener(\"click\", function (e) {\n      e.preventDefault();\n      if (akBusy) return; \/* double-trigger guard *\/\n\n      var target = akFindAtcTarget();\n      if (target) {\n        akRunCta(target, btn);\n        return;\n      }\n\n      \/* Some themes\/apps (dynamic Shop Pay buttons, lazy-loaded product\n         forms) render slightly after page load — retry briefly. *\/\n      var attempts = 0;\n      akBusy = true;\n      var retry = window.setInterval(function () {\n        attempts++;\n        var found = akFindAtcTarget();\n        if (found) {\n          window.clearInterval(retry);\n          akBusy = false;\n          akRunCta(found, btn);\n        } else if (attempts \u003e= 6) {\n          window.clearInterval(retry);\n          akBusy = false;\n          console.warn(\"Akko CTA: could not locate the Add to Cart button. Add data-atc-target to it.\");\n        }\n      }, 250);\n    });\n  });\n\n  \/* -------------------------------------------------------------\n     4. Gentle scroll-reveal\n     ------------------------------------------------------------- *\/\n  var revealEls = document.querySelectorAll(\".ak-reveal\");\n  if (\"IntersectionObserver\" in window \u0026\u0026 revealEls.length) {\n    var io = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        if (entry.isIntersecting) {\n          entry.target.classList.add(\"is-visible\");\n          io.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.15, rootMargin: \"0px 0px -40px 0px\" });\n    revealEls.forEach(function (el) { io.observe(el); });\n  } else {\n    revealEls.forEach(function (el) { el.classList.add(\"is-visible\"); });\n  }\n})();\n\u003c\/script\u003e","brand":"Akko","offers":[{"title":"Akko V3 Piano Pro","offer_id":48786378915997,"sku":null,"price":154.9,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0684\/6962\/0893\/files\/Kuromi-5108-V5-1.png?v=1786450325","url":"https:\/\/keyartisan.net\/products\/kuromi-5108-v5-mechanical-keyboard","provider":"KeyArtisan","version":"1.0","type":"link"}