{"product_id":"super-mario-rotating-artisan-resin-keycap","title":"Super Mario Rotating Artisan Resin Keycap","description":"\u003c!-- ================================================================= --\u003e\n\u003c!--  SUPER MARIO ROTATING ARTISAN RESIN KEYCAP — PRODUCT DESCRIPTION  --\u003e\n\u003c!--  ----------------------------------------------------------------- --\u003e\n\u003c!--  Paste into Shopify product editor \"\u003c\u003e\" (Show HTML) view.          --\u003e\n\u003c!--  • Single artisan keycap — no keyboard compatibility sections      --\u003e\n\u003c!--  • Varied image placement (full-width · pair · rectangle)          --\u003e\n\u003c!--  • Scoped under .smrk — safe alongside your theme                  --\u003e\n\u003c!--  • lang=\"en\" — uppercase \"i\" renders as \"I\"                        --\u003e\n\u003c!--  • Hover effects on all cards, images and special text             --\u003e\n\u003c!--  • Closing seal scrolls to Add to Cart                             --\u003e\n\u003c!--  • Fully responsive · Mobile · Tablet · Desktop                    --\u003e\n\u003c!--  • All content max-widths: 1200px minimum                         --\u003e\n\u003c!-- ================================================================= --\u003e\n\n\u003cstyle\u003e\n\/* ================================================================= *\/\n\/*  FONTS                                                             *\/\n\/* ================================================================= *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400\u0026family=Press+Start+2P\u0026display=swap');\n\n\/* ================================================================= *\/\n\/*  DESIGN TOKENS — artisan gaming · Mario · premium resin            *\/\n\/* ================================================================= *\/\n.smrk {\n  \/* --- Palette --- *\/\n  --smrk-red:         #e52521;\n  --smrk-red-deep:    #a31a18;\n  --smrk-red-soft:    #f26461;\n  --smrk-yellow:      #fbd000;\n  --smrk-yellow-2:    #d4a800;\n  --smrk-yellow-3:    #ffe55a;\n  --smrk-green:       #2d7a3a;\n  --smrk-green-dark:  #1a4a22;\n  --smrk-brown:       #7a4b28;\n  --smrk-brown-dark:  #4a2e18;\n  --smrk-night:       #1a1210;\n  --smrk-night-2:     #251a13;\n  --smrk-night-3:     #2e2018;\n  --smrk-cream:       #fffdf5;\n  --smrk-parchment:   #fff8e7;\n  --smrk-ink:         #2a1e16;\n  --smrk-text:        #4a3828;\n  --smrk-muted:       #7a6050;\n  --smrk-line:        rgba(229,37,33,0.20);\n  --smrk-line-soft:   rgba(229,37,33,0.10);\n  --smrk-shadow:      0 20px 52px -20px rgba(42,28,18,0.50);\n  --smrk-shadow-sm:   0 10px 26px -12px rgba(42,28,18,0.36);\n  --smrk-glow-r:      0 0 28px rgba(229,37,33,0.45);\n  --smrk-glow-y:      0 0 28px rgba(251,208,0,0.45);\n\n  \/* Typography *\/\n  --smrk-display: 'Nunito', 'Trebuchet MS', Arial, sans-serif;\n  --smrk-pixel:   'Press Start 2P', monospace;\n  --smrk-body:    'Nunito', system-ui, -apple-system, sans-serif;\n\n  \/* Layout *\/\n  --smrk-radius:    16px;\n  --smrk-radius-lg: 22px;\n  --smrk-maxw:      1280px;\n  --smrk-gap:       clamp(14px, 2.2vw, 22px);\n  --smrk-section:   clamp(44px, 7vw, 80px);\n\n  \/* Base *\/\n  font-family: var(--smrk-body);\n  color: var(--smrk-ink);\n  line-height: 1.7;\n  font-size: 18px;\n  max-width: var(--smrk-maxw);\n  margin: 0 auto;\n  padding: 0 4px;\n  text-align: center;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  box-sizing: border-box;\n}\n\n.smrk *,\n.smrk *::before,\n.smrk *::after { box-sizing: border-box; }\n\n.smrk p { margin: 0 0 1em; font-size: clamp(15px, 1.6vw, 17.5px); }\n.smrk p:last-child { margin-bottom: 0; }\n.smrk strong { font-weight: 800; }\n.smrk h1, .smrk h2, .smrk h3, .smrk h4 { margin: 0; line-height: 1.15; }\n\n\/* ================================================================= *\/\n\/*  PAGE FRAME                                                        *\/\n\/* ================================================================= *\/\n.smrk__sheet {\n  position: relative;\n  background: linear-gradient(180deg, #fffdf5 0%, #fff8e7 55%, #fff3d6 100%);\n  border: 2px solid rgba(229,37,33,0.18);\n  border-radius: var(--smrk-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--smrk-shadow);\n}\n.smrk__sheet::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: 0.35;\n  background-image:\n    radial-gradient(rgba(229,37,33,0.07) 1px, transparent 1px),\n    radial-gradient(rgba(251,208,0,0.06) 1px, transparent 1px);\n  background-size: 20px 20px, 32px 32px;\n  background-position: 0 0, 10px 16px;\n  mix-blend-mode: multiply;\n}\n.smrk__inner { position: relative; z-index: 1; padding: clamp(22px, 5vw, 56px); }\n\n\/* ================================================================= *\/\n\/*  HERO                                                              *\/\n\/* ================================================================= *\/\n.smrk__hero {\n  position: relative;\n  text-align: center;\n  padding: clamp(28px, 5.5vw, 58px) clamp(10px, 3vw, 36px) clamp(32px, 5.5vw, 60px);\n  border-radius: var(--smrk-radius);\n  background:\n    radial-gradient(80% 100% at 50% 0%, rgba(251,208,0,0.16), transparent 55%),\n    linear-gradient(160deg, #1a1210 0%, #120e0c 60%, #1a1210 100%);\n  color: var(--smrk-cream);\n  overflow: hidden;\n  border: 2px solid rgba(251,208,0,0.28);\n  box-shadow: inset 0 0 60px rgba(0,0,0,0.55), var(--smrk-shadow);\n}\n.smrk__coins {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-image:\n    radial-gradient(2px 2px at 10% 18%, rgba(251,208,0,0.85), transparent),\n    radial-gradient(1.5px 1.5px at 84% 20%, rgba(251,208,0,0.70), transparent),\n    radial-gradient(1.8px 1.8px at 32% 72%, rgba(251,208,0,0.80), transparent),\n    radial-gradient(1.2px 1.2px at 70% 60%, rgba(251,208,0,0.55), transparent),\n    radial-gradient(1.6px 1.6px at 88% 82%, rgba(251,208,0,0.65), transparent),\n    radial-gradient(1.4px 1.4px at 20% 86%, rgba(251,208,0,0.60), transparent),\n    radial-gradient(1px 1px at 56% 32%, rgba(229,37,33,0.50), transparent),\n    radial-gradient(1.2px 1.2px at 6% 55%, rgba(45,122,58,0.45), transparent);\n  animation: smrk-shimmer 5s ease-in-out infinite alternate;\n}\n@keyframes smrk-shimmer {\n  0%   { opacity: 0.5; transform: translateY(0); }\n  100% { opacity: 1;   transform: translateY(-4px); }\n}\n\n.smrk__eyebrow {\n  position: relative; z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  font-family: var(--smrk-pixel);\n  letter-spacing: 0.10em;\n  font-size: clamp(7px, 1.2vw, 9px);\n  color: var(--smrk-yellow);\n  padding: 10px 20px;\n  border: 1px solid rgba(251,208,0,0.45);\n  border-radius: 999px;\n  background: rgba(251,208,0,0.08);\n  margin-bottom: 8px;\n  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;\n}\n.smrk__eyebrow::before,\n.smrk__eyebrow::after { content: \"★\"; font-size: 9px; }\n.smrk__eyebrow:hover { transform: translateY(-2px) scale(1.03); background: rgba(251,208,0,0.16); box-shadow: var(--smrk-glow-y); }\n\n.smrk__title {\n  position: relative; z-index: 2;\n  font-family: var(--smrk-display);\n  font-weight: 900;\n  line-height: 1.05;\n  margin: clamp(32px, 5vw, 50px) 0 0;\n  font-size: clamp(28px, 5.5vw, 58px);\n  color: var(--smrk-cream);\n  text-shadow: 0 3px 0 rgba(0,0,0,0.45), 0 0 30px rgba(251,208,0,0.22);\n  letter-spacing: -0.01em;\n}\n.smrk__title .smrk__yellow {\n  background: linear-gradient(180deg, #ffe55a 0%, #fbd000 50%, #d4a800 100%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n}\n\n.smrk__subtitle {\n  position: relative; z-index: 2;\n  text-align: center;\n  font-weight: 600;\n  font-style: italic;\n  font-size: clamp(15px, 2vw, 20px);\n  color: rgba(255,253,245,0.84);\n  max-width: 1200px;\n  margin: clamp(16px, 3vw, 24px) auto 0;\n}\n\n.smrk__hero-rule {\n  position: relative; z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin: clamp(22px, 4vw, 32px) auto 0;\n  max-width: 1200px;\n}\n.smrk__hero-rule::before,\n.smrk__hero-rule::after { content: \"\"; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(251,208,0,0.7), transparent); }\n.smrk__hero-rule span { font-family: var(--smrk-pixel); font-size: 9px; color: var(--smrk-yellow); letter-spacing: 0.15em; }\n\n.smrk__badges {\n  position: relative; z-index: 2;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 10px;\n  margin-top: clamp(22px, 4vw, 30px);\n}\n.smrk__badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--smrk-display);\n  font-size: clamp(11px, 1.4vw, 13px);\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: var(--smrk-cream);\n  padding: 10px 16px;\n  border-radius: 999px;\n  border: 1px solid rgba(251,208,0,0.30);\n  background: rgba(255,253,245,0.05);\n  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\n}\n.smrk__badge span:first-child { font-size: 15px; }\n.smrk__badge:hover { transform: translateY(-3px); background: rgba(251,208,0,0.14); border-color: var(--smrk-yellow); box-shadow: var(--smrk-glow-y); }\n\n\/* ================================================================= *\/\n\/*  SECTION SCAFFOLD                                                  *\/\n\/* ================================================================= *\/\n.smrk__section { margin-top: var(--smrk-section); }\n.smrk__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }\n\n.smrk__kicker {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  font-family: var(--smrk-pixel);\n  letter-spacing: 0.16em;\n  font-size: clamp(7px, 1.1vw, 8px);\n  color: var(--smrk-red);\n  margin-bottom: 14px;\n  text-transform: uppercase;\n}\n.smrk__kicker::before,\n.smrk__kicker::after { content: \"◆\"; font-size: 7px; color: var(--smrk-yellow); }\n\n.smrk__h2 {\n  font-family: var(--smrk-display);\n  font-weight: 900;\n  text-align: center;\n  font-size: clamp(25px, 4.4vw, 42px);\n  line-height: 1.1;\n  margin: 0 auto 12px;\n  color: var(--smrk-ink);\n  max-width: 1200px;\n  letter-spacing: -0.01em;\n  transition: text-shadow 0.4s ease;\n}\n.smrk__h2:hover { text-shadow: 0 0 22px rgba(229,37,33,0.28); }\n\n.smrk__lead {\n  text-align: center;\n  max-width: 1200px;\n  margin: 0 auto;\n  color: var(--smrk-muted);\n  font-size: clamp(15px, 1.7vw, 18px);\n  font-weight: 600;\n}\n\n.smrk__divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin: clamp(16px, 3vw, 22px) auto 0;\n  max-width: 1200px;\n  color: var(--smrk-yellow);\n}\n.smrk__divider::before,\n.smrk__divider::after { content: \"\"; height: 2px; flex: 1; background: linear-gradient(90deg, transparent, var(--smrk-yellow-2), transparent); border-radius: 2px; }\n.smrk__diamond { width: 10px; height: 10px; transform: rotate(45deg); background: var(--smrk-yellow); box-shadow: 0 0 0 4px rgba(251,208,0,0.22); transition: transform 0.4s ease, box-shadow 0.4s ease; }\n.smrk__divider:hover .smrk__diamond { transform: rotate(225deg) scale(1.3); box-shadow: 0 0 0 6px rgba(251,208,0,0.28); }\n\n.smrk__prose { max-width: 1200px; margin: 0 auto; text-align: center; }\n.smrk__prose p { color: var(--smrk-text); margin: 0 auto 1.1em; font-weight: 600; }\n.smrk__prose p:last-child { margin-bottom: 0; }\n\n\/* ================================================================= *\/\n\/*  MEDIA: FULL-WIDTH                                                 *\/\n\/* ================================================================= *\/\n.smrk__media-full {\n  width: 100%;\n  border-radius: var(--smrk-radius);\n  overflow: hidden;\n  border: 2px solid rgba(229,37,33,0.18);\n  box-shadow: var(--smrk-shadow-sm);\n  line-height: 0;\n  background: var(--smrk-cream);\n  transition: transform 0.4s ease, box-shadow 0.4s ease;\n}\n.smrk__media-full:hover { transform: translateY(-4px); box-shadow: var(--smrk-shadow); }\n.smrk__media-full img { width: 100%; display: block; height: auto; transition: transform 0.6s ease; }\n.smrk__media-full:hover img { transform: scale(1.03); }\n\n\/* ================================================================= *\/\n\/*  MEDIA: 2-UP PAIR                                                  *\/\n\/* ================================================================= *\/\n.smrk__pair {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: clamp(12px, 1.8vw, 18px);\n}\n.smrk__pair-img {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--smrk-radius);\n  border: 2px solid rgba(229,37,33,0.16);\n  line-height: 0;\n  background: var(--smrk-cream);\n  box-shadow: var(--smrk-shadow-sm);\n  aspect-ratio: 1 \/ 1;\n  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;\n}\n.smrk__pair-img:hover { transform: translateY(-5px); box-shadow: var(--smrk-shadow); border-color: rgba(251,208,0,0.55); }\n.smrk__pair-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }\n.smrk__pair-img:hover img { transform: scale(1.08); }\n.smrk__img-label {\n  position: absolute;\n  top: 12px; right: 12px;\n  background: rgba(255,253,245,0.94);\n  color: var(--smrk-red-deep);\n  padding: 6px 12px;\n  border-radius: 8px;\n  font-size: 11px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  box-shadow: 0 2px 8px rgba(42,28,18,0.20);\n  z-index: 2;\n  border: 1px solid rgba(229,37,33,0.28);\n}\n\n\/* ================================================================= *\/\n\/*  MEDIA: RECTANGLE BREAK                                            *\/\n\/* ================================================================= *\/\n.smrk__media-rect {\n  width: 100%;\n  border-radius: var(--smrk-radius);\n  overflow: hidden;\n  border: 2px solid rgba(229,37,33,0.18);\n  box-shadow: var(--smrk-shadow-sm);\n  line-height: 0;\n  aspect-ratio: 21 \/ 9;\n  background: var(--smrk-cream);\n  transition: transform 0.4s ease, box-shadow 0.4s ease;\n}\n.smrk__media-rect:hover { transform: translateY(-4px); box-shadow: var(--smrk-shadow); }\n.smrk__media-rect img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }\n.smrk__media-rect:hover img { transform: scale(1.04); }\n\n\/* ================================================================= *\/\n\/*  TRUST BADGES                                                      *\/\n\/* ================================================================= *\/\n.smrk__trust-strip {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 14px;\n  margin-top: clamp(22px, 3vw, 30px);\n}\n.smrk__trust-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 18px;\n  background: var(--smrk-cream);\n  border: 2px solid rgba(229,37,33,0.14);\n  border-radius: var(--smrk-radius);\n  text-align: left;\n  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n}\n.smrk__trust-item:hover { transform: translateY(-4px); box-shadow: var(--smrk-shadow-sm); border-color: rgba(251,208,0,0.55); }\n.smrk__trust-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: linear-gradient(135deg, rgba(229,37,33,0.10), rgba(251,208,0,0.10)); border: 1px solid rgba(229,37,33,0.16); transition: transform 0.35s ease; }\n.smrk__trust-item:hover .smrk__trust-ic { transform: scale(1.12) rotate(-5deg); }\n.smrk__trust-t { font-weight: 800; font-size: 14.5px; color: var(--smrk-ink); }\n.smrk__trust-s { font-size: 12.5px; color: var(--smrk-muted); }\n\n\/* ================================================================= *\/\n\/*  FEATURE GRID                                                      *\/\n\/* ================================================================= *\/\n.smrk__features {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  gap: var(--smrk-gap);\n}\n.smrk__feature {\n  position: relative;\n  text-align: left;\n  background: var(--smrk-cream);\n  border: 2px solid rgba(229,37,33,0.14);\n  border-radius: var(--smrk-radius);\n  padding: clamp(20px, 3vw, 28px);\n  overflow: hidden;\n  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;\n}\n.smrk__feature::after {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 3px;\n  background: linear-gradient(90deg, var(--smrk-red), var(--smrk-yellow), var(--smrk-green));\n  opacity: 0;\n  transition: opacity 0.35s ease;\n}\n.smrk__feature:hover { transform: translateY(-6px); box-shadow: var(--smrk-shadow-sm); border-color: rgba(229,37,33,0.40); }\n.smrk__feature:hover::after { opacity: 1; }\n.smrk__feature-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 52px; height: 52px;\n  border-radius: 14px;\n  font-size: 24px;\n  margin-bottom: 14px;\n  background: linear-gradient(145deg, #1a1210, #120e0c);\n  border: 2px solid rgba(251,208,0,0.35);\n  box-shadow: inset 0 0 14px rgba(251,208,0,0.15);\n  transition: transform 0.4s ease, box-shadow 0.4s ease;\n}\n.smrk__feature:hover .smrk__feature-icon { transform: rotate(-6deg) scale(1.10); box-shadow: inset 0 0 14px rgba(251,208,0,0.28), var(--smrk-glow-y); }\n.smrk__feature h3 { font-family: var(--smrk-display); font-weight: 800; font-size: clamp(16px, 2vw, 19px); margin: 0 0 8px; color: var(--smrk-ink); }\n.smrk__feature p { margin: 0; font-size: clamp(14px, 1.5vw, 15.5px); color: var(--smrk-muted); line-height: 1.65; }\n\n\/* ================================================================= *\/\n\/*  SPOTLIGHT — dark band                                             *\/\n\/* ================================================================= *\/\n.smrk__spotlight {\n  position: relative;\n  text-align: center;\n  border-radius: var(--smrk-radius-lg);\n  overflow: hidden;\n  padding: clamp(30px, 5vw, 58px);\n  background:\n    radial-gradient(80% 120% at 50% 0%, rgba(251,208,0,0.14), transparent 55%),\n    linear-gradient(155deg, #1a1210, #120e0c);\n  color: var(--smrk-cream);\n  border: 2px solid rgba(251,208,0,0.25);\n  box-shadow: var(--smrk-shadow);\n}\n.smrk__spotlight .smrk__kicker { color: var(--smrk-yellow); }\n.smrk__spotlight .smrk__kicker::before,\n.smrk__spotlight .smrk__kicker::after { color: var(--smrk-yellow-3); }\n.smrk__spotlight h2 {\n  font-family: var(--smrk-display);\n  font-weight: 900;\n  font-size: clamp(24px, 4vw, 40px);\n  margin: 0 auto 16px;\n  color: var(--smrk-cream);\n  max-width: 1200px;\n  text-shadow: 0 2px 0 rgba(0,0,0,0.35);\n}\n.smrk__spotlight \u003e p { max-width: 1200px; color: rgba(255,253,245,0.84); margin: 0 auto; font-weight: 600; font-size: clamp(15px, 1.7vw, 17.5px); }\n.smrk__spec-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n  gap: 14px;\n  margin-top: clamp(26px, 3.5vw, 36px);\n}\n.smrk__spec {\n  border: 1px solid rgba(251,208,0,0.24);\n  border-radius: 12px;\n  padding: 18px 18px 16px;\n  background: rgba(255,253,245,0.04);\n  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\n}\n.smrk__spec:hover { background: rgba(251,208,0,0.10); transform: translateY(-4px); border-color: var(--smrk-yellow); box-shadow: var(--smrk-glow-y); }\n.smrk__spec-k { font-family: var(--smrk-pixel); font-size: 8px; letter-spacing: 0.1em; color: var(--smrk-yellow); margin-bottom: 7px; }\n.smrk__spec-v { font-size: clamp(15px, 1.8vw, 18px); color: var(--smrk-cream); font-weight: 700; }\n\n\/* ================================================================= *\/\n\/*  VARIANT CARDS                                                     *\/\n\/* ================================================================= *\/\n.smrk__variants {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: var(--smrk-gap);\n}\n.smrk__variant {\n  position: relative;\n  text-align: center;\n  border-radius: var(--smrk-radius);\n  padding: clamp(26px, 3.5vw, 36px) 20px;\n  color: var(--smrk-cream);\n  overflow: hidden;\n  border: 2px solid rgba(255,255,255,0.15);\n  transition: transform 0.4s ease, box-shadow 0.4s ease;\n}\n.smrk__variant::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.18), transparent 55%);\n  pointer-events: none;\n}\n.smrk__variant:hover { transform: translateY(-7px) scale(1.02); box-shadow: var(--smrk-shadow); }\n.smrk__variant--red    { background: linear-gradient(155deg, #c41f1c, #7a1412); }\n.smrk__variant--green  { background: linear-gradient(155deg, #2d7a3a, #1a4a22); }\n.smrk__variant--brown  { background: linear-gradient(155deg, #7a4b28, #4a2e18); }\n.smrk__variant-glyph {\n  font-size: 38px;\n  margin-bottom: 14px;\n  position: relative; z-index: 1;\n  display: inline-block;\n  transition: transform 0.4s ease;\n}\n.smrk__variant:hover .smrk__variant-glyph { transform: scale(1.2) rotate(8deg); }\n.smrk__variant h3 {\n  position: relative; z-index: 1;\n  font-family: var(--smrk-display);\n  font-weight: 900;\n  font-size: clamp(17px, 2.2vw, 22px);\n  margin: 0 0 6px;\n}\n.smrk__variant-tag {\n  position: relative; z-index: 1;\n  display: inline-block;\n  font-family: var(--smrk-pixel);\n  font-size: 8px;\n  color: rgba(255,253,245,0.75);\n  letter-spacing: 0.12em;\n  margin-bottom: 10px;\n}\n.smrk__variant p {\n  position: relative; z-index: 1;\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: rgba(255,253,245,0.82);\n}\n\n\/* ================================================================= *\/\n\/*  SPECS TABLE                                                       *\/\n\/* ================================================================= *\/\n.smrk__table-wrap {\n  max-width: 1200px;\n  margin: 0 auto;\n  border: 2px solid rgba(229,37,33,0.18);\n  border-radius: var(--smrk-radius);\n  overflow: hidden;\n  background: var(--smrk-cream);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n.smrk__table-wrap:hover { transform: translateY(-2px); box-shadow: var(--smrk-shadow-sm); }\n.smrk__table { width: 100%; border-collapse: collapse; text-align: left; font-size: clamp(14px, 1.7vw, 16.5px); }\n.smrk__table tr { transition: background 0.25s ease; }\n.smrk__table tr:hover { background: rgba(251,208,0,0.10); }\n.smrk__table tr + tr { border-top: 1px solid rgba(229,37,33,0.10); }\n.smrk__table th, .smrk__table td { padding: 15px 22px; vertical-align: top; }\n.smrk__table th { width: 42%; font-family: var(--smrk-display); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82em; color: var(--smrk-red); background: rgba(229,37,33,0.05); }\n.smrk__table td { color: var(--smrk-ink); font-weight: 600; }\n\n\/* ================================================================= *\/\n\/*  PANELS (split text cards)                                        *\/\n\/* ================================================================= *\/\n.smrk__panels {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: var(--smrk-gap);\n  text-align: left;\n}\n.smrk__panel {\n  background: var(--smrk-cream);\n  border: 2px solid rgba(229,37,33,0.14);\n  border-radius: var(--smrk-radius);\n  padding: clamp(22px, 3.4vw, 32px);\n  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;\n}\n.smrk__panel:hover { transform: translateY(-5px); box-shadow: var(--smrk-shadow-sm); border-color: rgba(251,208,0,0.55); }\n.smrk__panel-ic { font-size: 30px; margin-bottom: 12px; display: inline-block; transition: transform 0.4s ease; }\n.smrk__panel:hover .smrk__panel-ic { transform: scale(1.12) rotate(-5deg); }\n.smrk__panel h3 { font-family: var(--smrk-display); font-weight: 800; font-size: clamp(17px, 2.2vw, 21px); margin: 0 0 10px; color: var(--smrk-ink); }\n.smrk__panel p { margin: 0; color: var(--smrk-muted); font-size: 15.5px; line-height: 1.7; font-weight: 600; }\n\n\/* ================================================================= *\/\n\/*  STATS                                                             *\/\n\/* ================================================================= *\/\n.smrk__stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: var(--smrk-gap);\n  text-align: center;\n}\n.smrk__stat {\n  padding: clamp(22px, 3vw, 30px) 14px;\n  border: 2px solid rgba(229,37,33,0.14);\n  border-radius: var(--smrk-radius);\n  background: var(--smrk-cream);\n  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n}\n.smrk__stat:hover { transform: translateY(-5px); box-shadow: var(--smrk-shadow-sm); border-color: rgba(251,208,0,0.55); }\n.smrk__stat-num { font-family: var(--smrk-display); font-weight: 900; font-size: clamp(30px, 4.2vw, 44px); background: linear-gradient(180deg, #fbd000, #d4a800); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; margin-bottom: 8px; }\n.smrk__stat-label { font-family: var(--smrk-display); font-weight: 700; font-size: 13.5px; color: var(--smrk-ink); text-transform: uppercase; letter-spacing: 0.06em; }\n\n\/* ================================================================= *\/\n\/*  FAQ                                                               *\/\n\/* ================================================================= *\/\n.smrk__faq { max-width: 1200px; margin: 0 auto; text-align: left; }\n.smrk__faq details {\n  border: 2px solid rgba(229,37,33,0.14);\n  border-radius: 12px;\n  background: var(--smrk-cream);\n  margin-bottom: 12px;\n  overflow: hidden;\n  transition: border-color 0.3s ease, box-shadow 0.3s ease;\n}\n.smrk__faq details:hover { border-color: rgba(229,37,33,0.40); box-shadow: var(--smrk-shadow-sm); }\n.smrk__faq details[open] { border-color: rgba(251,208,0,0.55); box-shadow: var(--smrk-shadow-sm); }\n.smrk__faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--smrk-display); font-weight: 800; font-size: clamp(15px, 1.8vw, 17px); color: var(--smrk-ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; transition: color 0.25s ease; }\n.smrk__faq summary:hover { color: var(--smrk-red); }\n.smrk__faq summary::-webkit-details-marker { display: none; }\n.smrk__faq summary::after { content: \"+\"; font-family: var(--smrk-pixel); font-size: 14px; color: var(--smrk-yellow); transition: transform 0.3s ease; line-height: 1; }\n.smrk__faq details[open] summary::after { transform: rotate(45deg); }\n.smrk__faq-body { padding: 0 22px 20px; color: var(--smrk-muted); font-size: 15.5px; font-weight: 600; line-height: 1.7; }\n\n\/* ================================================================= *\/\n\/*  GIFT BANNER                                                       *\/\n\/* ================================================================= *\/\n.smrk__gift {\n  position: relative;\n  text-align: center;\n  border-radius: var(--smrk-radius-lg);\n  overflow: hidden;\n  padding: clamp(30px, 5vw, 52px) clamp(20px, 4vw, 40px);\n  background: linear-gradient(160deg, #fff8e7, #fff3d0);\n  border: 2px solid rgba(251,208,0,0.40);\n  box-shadow: var(--smrk-shadow-sm);\n}\n.smrk__gift-ic { font-size: 40px; margin-bottom: 12px; display: inline-block; transition: transform 0.4s ease; }\n.smrk__gift:hover .smrk__gift-ic { transform: scale(1.16) rotate(-8deg); }\n.smrk__gift h2 { font-family: var(--smrk-display); font-weight: 900; font-size: clamp(23px, 4vw, 36px); color: var(--smrk-ink); margin: 0 0 12px; }\n.smrk__gift p { max-width: 1200px; margin: 0 auto; color: var(--smrk-text); font-size: clamp(15px, 1.7vw, 18px); font-weight: 600; }\n\n\/* ================================================================= *\/\n\/*  CLOSING CTA                                                       *\/\n\/* ================================================================= *\/\n.smrk__cta {\n  position: relative;\n  text-align: center;\n  border-radius: var(--smrk-radius-lg);\n  overflow: hidden;\n  padding: clamp(36px, 6vw, 66px) clamp(20px, 4vw, 40px);\n  background:\n    radial-gradient(80% 110% at 50% 0%, rgba(251,208,0,0.16), transparent 55%),\n    linear-gradient(155deg, #1a1210, #120e0c);\n  color: var(--smrk-cream);\n  border: 2px solid rgba(251,208,0,0.28);\n  box-shadow: var(--smrk-shadow);\n}\n.smrk__cta .smrk__coins { opacity: 0.6; }\n.smrk__cta h2 { position: relative; z-index: 2; font-family: var(--smrk-display); font-weight: 900; font-size: clamp(25px, 5vw, 46px); margin: 0 0 14px; color: var(--smrk-cream); text-shadow: 0 0 28px rgba(251,208,0,0.28); }\n.smrk__cta p { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; color: rgba(255,253,245,0.84); font-size: clamp(15px, 1.8vw, 19px); font-weight: 600; font-style: italic; }\n.smrk__cta-seal {\n  position: relative; z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  margin-top: clamp(22px, 3.5vw, 30px);\n  font-family: var(--smrk-display);\n  font-weight: 800;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  font-size: clamp(12px, 1.6vw, 14px);\n  color: var(--smrk-yellow);\n  padding: 14px 28px;\n  border: 2px solid rgba(251,208,0,0.45);\n  border-radius: 999px;\n  background: rgba(251,208,0,0.08);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;\n}\n.smrk__cta-seal:hover { background: rgba(251,208,0,0.20); border-color: var(--smrk-yellow); transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px -12px rgba(251,208,0,0.65); color: #fff; }\n.smrk__cta-seal:active { transform: translateY(-1px) scale(0.99); }\n\n\/* ================================================================= *\/\n\/*  RESPONSIVE — TABLET                                              *\/\n\/* ================================================================= *\/\n@media (max-width: 900px) {\n  .smrk { font-size: 17px; }\n}\n\n\/* ================================================================= *\/\n\/*  RESPONSIVE — MOBILE                                              *\/\n\/* ================================================================= *\/\n@media (max-width: 600px) {\n  .smrk { padding: 0; font-size: 16.5px; }\n  .smrk__inner { padding: 18px 14px; }\n  .smrk__features,\n  .smrk__variants,\n  .smrk__panels,\n  .smrk__stats,\n  .smrk__trust-strip,\n  .smrk__spec-grid,\n  .smrk__pair { grid-template-columns: 1fr; }\n  .smrk__eyebrow { letter-spacing: 0.08em; }\n  .smrk__title { font-size: clamp(24px, 8vw, 36px); }\n  .smrk__media-rect { aspect-ratio: 16 \/ 9; }\n}\n\n\/* ================================================================= *\/\n\/*  REDUCED MOTION                                                    *\/\n\/* ================================================================= *\/\n@media (prefers-reduced-motion: reduce) {\n  .smrk * { animation: none !important; transition: none !important; }\n}\n\u003c\/style\u003e\n\n\n\u003c!-- ================================================================= --\u003e\n\u003c!--  MARKUP                                                           --\u003e\n\u003c!--  lang=\"en\" — uppercase \"i\" renders as \"I\"                        --\u003e\n\u003c!-- ================================================================= --\u003e\n\u003cdiv class=\"smrk\" lang=\"en\"\u003e\n  \u003cdiv class=\"smrk__sheet\"\u003e\n    \u003cdiv class=\"smrk__inner\"\u003e\n\n      \u003c!-- ======================== HERO ======================== --\u003e\n      \u003cheader class=\"smrk__hero\"\u003e\n        \u003cdiv class=\"smrk__coins\"\u003e\u003c\/div\u003e\n\n        \u003cspan class=\"smrk__eyebrow\"\u003eArtisan Collectible\u003c\/span\u003e\n\n        \u003ch1 class=\"smrk__title\"\u003e\n          Super Mario\u003cbr\u003e\n          \u003cspan class=\"smrk__yellow\"\u003eRotating Artisan Resin Keycap\u003c\/span\u003e\n        \u003c\/h1\u003e\n\n        \u003cp class=\"smrk__subtitle\"\u003e\n          It does not just sit there — it spins. A handcrafted resin\n          artisan keycap with a live rotating mechanism, bringing an\n          iconic Mushroom Kingdom character to life on your switch.\n        \u003c\/p\u003e\n\n        \u003cdiv class=\"smrk__hero-rule\"\u003e\u003cspan\u003e★   🍄   ★\u003c\/span\u003e\u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__badges\"\u003e\n          \u003cspan class=\"smrk__badge\"\u003e\u003cspan\u003e🌀\u003c\/span\u003e\u003cspan\u003eRotating Edition\u003c\/span\u003e\u003c\/span\u003e\n          \u003cspan class=\"smrk__badge\"\u003e\u003cspan\u003e🎨\u003c\/span\u003e\u003cspan\u003eLayered Resin\u003c\/span\u003e\u003c\/span\u003e\n          \u003cspan class=\"smrk__badge\"\u003e\u003cspan\u003e🎮\u003c\/span\u003e\u003cspan\u003e3 Characters\u003c\/span\u003e\u003c\/span\u003e\n          \u003cspan class=\"smrk__badge\"\u003e\u003cspan\u003e🔗\u003c\/span\u003e\u003cspan\u003eMX Compatible\u003c\/span\u003e\u003c\/span\u003e\n        \u003c\/div\u003e\n      \u003c\/header\u003e\n\n      \u003c!-- ======================== HERO IMAGE (full-width) ======================== --\u003e\n      \u003c!-- IMAGE SLOT: hero — main product shot showing the keycap(s) clearly --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__media-full\"\u003e\n          \u003cimg src=\"https:\/\/img.alicdn.com\/imgextra\/i1\/2606162487\/O1CN018pBRWJ1UF69kSiVmc_!!2606162487.jpg\" alt=\"Super Mario Rotating Artisan Resin Keycap — hero product shot\" loading=\"eager\"\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== INTRO ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__head\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eThe Power-Up That Moves\u003c\/div\u003e\n          \u003ch2 class=\"smrk__h2\"\u003eOne Keycap. Three Legends. One Spin.\u003c\/h2\u003e\n          \u003cdiv class=\"smrk__divider\"\u003e\u003cspan class=\"smrk__diamond\"\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__prose\"\u003e\n          \u003cp\u003e\n            This is not a standard keycap. The\n            \u003cstrong\u003eSuper Mario Rotating Artisan Resin Keycap\u003c\/strong\u003e features\n            a precision rotating mechanism that lets the cap spin freely on\n            your MX-style switch — a satisfying, mesmerising touch that makes\n            every glance at your desk worth it.\n          \u003c\/p\u003e\n          \u003cp\u003e\n            Handcrafted in \u003cstrong\u003elayered resin\u003c\/strong\u003e, the characters are\n            built up in depth rather than printed flat — giving the Mushroom,\n            the Piranha Plant and the Goomba a rich, three-dimensional quality\n            you can see and feel. Choose from three iconic variants: each is\n            sold as an individual artisan piece, designed to be the centrepiece\n            of your switch.\n          \u003c\/p\u003e\n        \u003c\/div\u003e\n\n        \u003c!-- Trust badges --\u003e\n        \u003cdiv class=\"smrk__trust-strip\"\u003e\n          \u003cdiv class=\"smrk__trust-item\"\u003e\n            \u003cdiv class=\"smrk__trust-ic\"\u003e🌀\u003c\/div\u003e\n            \u003cdiv\u003e\n              \u003cdiv class=\"smrk__trust-t\"\u003eActually Rotates\u003c\/div\u003e\n              \u003cdiv class=\"smrk__trust-s\"\u003ePrecision spinning mechanism\u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"smrk__trust-item\"\u003e\n            \u003cdiv class=\"smrk__trust-ic\"\u003e🎨\u003c\/div\u003e\n            \u003cdiv\u003e\n              \u003cdiv class=\"smrk__trust-t\"\u003eLayered Resin Craft\u003c\/div\u003e\n              \u003cdiv class=\"smrk__trust-s\"\u003eHandcrafted depth \u0026amp; detail\u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"smrk__trust-item\"\u003e\n            \u003cdiv class=\"smrk__trust-ic\"\u003e📦\u003c\/div\u003e\n            \u003cdiv\u003e\n              \u003cdiv class=\"smrk__trust-t\"\u003eCarefully Packed\u003c\/div\u003e\n              \u003cdiv class=\"smrk__trust-s\"\u003eSecure, pristine delivery\u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== FEATURE GRID ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__head\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eWhy You'll Love It\u003c\/div\u003e\n          \u003ch2 class=\"smrk__h2\"\u003eKey Features\u003c\/h2\u003e\n          \u003cdiv class=\"smrk__divider\"\u003e\u003cspan class=\"smrk__diamond\"\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__features\"\u003e\n          \u003carticle class=\"smrk__feature\"\u003e\n            \u003cdiv class=\"smrk__feature-icon\"\u003e🌀\u003c\/div\u003e\n            \u003ch3\u003eRotating Mechanism\u003c\/h3\u003e\n            \u003cp\u003eThe cap spins freely on a precision bearing — a live,\n               satisfying rotation that makes this unlike any other\n               keycap on your board.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__feature\"\u003e\n            \u003cdiv class=\"smrk__feature-icon\"\u003e🎨\u003c\/div\u003e\n            \u003ch3\u003eLayered Resin Construction\u003c\/h3\u003e\n            \u003cp\u003eBuilt up layer by layer in resin, not printed flat — giving\n               the character depth, clarity and a luminous, three-dimensional\n               look under any lighting.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__feature\"\u003e\n            \u003cdiv class=\"smrk__feature-icon\"\u003e🍄\u003c\/div\u003e\n            \u003ch3\u003eThree Iconic Characters\u003c\/h3\u003e\n            \u003cp\u003eRed Mushroom, Piranha Plant or Goomba — each a perfectly\n               crafted tribute to the most recognisable characters in\n               gaming history.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__feature\"\u003e\n            \u003cdiv class=\"smrk__feature-icon\"\u003e🔗\u003c\/div\u003e\n            \u003ch3\u003eMX-Style Compatible\u003c\/h3\u003e\n            \u003cp\u003eDesigned for the MX cross stem — fits Cherry MX, Gateron,\n               Kailh and most MX-style switches with a firm, secure mount.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__feature\"\u003e\n            \u003cdiv class=\"smrk__feature-icon\"\u003e🏆\u003c\/div\u003e\n            \u003ch3\u003eTrue Artisan Piece\u003c\/h3\u003e\n            \u003cp\u003eHandcrafted and inspected individually — not mass-produced.\n               Every cap is a collector's item that rewards a close look.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__feature\"\u003e\n            \u003cdiv class=\"smrk__feature-icon\"\u003e🖥️\u003c\/div\u003e\n            \u003ch3\u003eInstant Conversation Starter\u003c\/h3\u003e\n            \u003cp\u003eThe moment anyone sees a keycap spinning on your desk they\n               will stop and stare. There is no better way to personalise\n               your setup.\u003c\/p\u003e\n          \u003c\/article\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== IMAGE PAIR ======================== --\u003e\n      \u003c!-- IMAGE SLOT LEFT:  close-up \/ artisan detail of the keycap surface --\u003e\n      \u003c!-- IMAGE SLOT RIGHT: keycap mounted on a board \/ in a setup           --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__pair\"\u003e\n          \u003cdiv class=\"smrk__pair-img\"\u003e\n            \u003cspan class=\"smrk__img-label\"\u003eArtisan Detail\u003c\/span\u003e\n            \u003cimg src=\"https:\/\/img.alicdn.com\/imgextra\/i3\/2606162487\/O1CN01bcrU2f1UF69jnQJ1V_!!2606162487.jpg\" alt=\"Super Mario Rotating Artisan Resin Keycap layered resin detail\" loading=\"lazy\"\u003e\n          \u003c\/div\u003e\n          \u003cdiv class=\"smrk__pair-img\"\u003e\n            \u003cspan class=\"smrk__img-label\"\u003eOn the Switch\u003c\/span\u003e\n            \u003cimg src=\"https:\/\/img.alicdn.com\/imgextra\/i3\/2606162487\/O1CN01J0NKjn1UF69kcclsv_!!2606162487.jpg\" alt=\"Super Mario Rotating Artisan Resin Keycap mounted on switch\" loading=\"lazy\"\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== ROTATING MECHANISM SPOTLIGHT ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__spotlight\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eThe Signature Feature\u003c\/div\u003e\n          \u003ch2\u003eIt Spins. It Shines. It Never Gets Old.\u003c\/h2\u003e\n          \u003cp\u003e\n            The rotating mechanism uses a precision bearing inside the resin\n            cap, giving you smooth, controlled 360-degree spin on your switch\n            stem. Whether you flick it between keystrokes or just let it catch\n            the light, the Rotating Edition turns a collectible into something\n            genuinely alive on your desk. The layered resin construction then\n            adds real depth — each character glows from within, crisp from\n            every angle, like a tiny diorama sealed under glass.\n          \u003c\/p\u003e\n\n          \u003cdiv class=\"smrk__spec-grid\"\u003e\n            \u003cdiv class=\"smrk__spec\"\u003e\n\u003cdiv class=\"smrk__spec-k\"\u003eMechanism\u003c\/div\u003e\n\u003cdiv class=\"smrk__spec-v\"\u003eRotating (360°)\u003c\/div\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"smrk__spec\"\u003e\n\u003cdiv class=\"smrk__spec-k\"\u003eMaterial\u003c\/div\u003e\n\u003cdiv class=\"smrk__spec-v\"\u003eResin + PBT\u003c\/div\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"smrk__spec\"\u003e\n\u003cdiv class=\"smrk__spec-k\"\u003eCraft\u003c\/div\u003e\n\u003cdiv class=\"smrk__spec-v\"\u003eLayered Resin\u003c\/div\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"smrk__spec\"\u003e\n\u003cdiv class=\"smrk__spec-k\"\u003eMount\u003c\/div\u003e\n\u003cdiv class=\"smrk__spec-v\"\u003eMX-Style Stem\u003c\/div\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"smrk__spec\"\u003e\n\u003cdiv class=\"smrk__spec-k\"\u003eBacklit\u003c\/div\u003e\n\u003cdiv class=\"smrk__spec-v\"\u003eNon-Backlit\u003c\/div\u003e\n\u003c\/div\u003e\n            \u003cdiv class=\"smrk__spec\"\u003e\n\u003cdiv class=\"smrk__spec-k\"\u003eType\u003c\/div\u003e\n\u003cdiv class=\"smrk__spec-v\"\u003eArtisan Keycap\u003c\/div\u003e\n\u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== CHARACTER VARIANTS ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__head\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eChoose Your Character\u003c\/div\u003e\n          \u003ch2 class=\"smrk__h2\"\u003eThree Rotating Editions\u003c\/h2\u003e\n          \u003cp class=\"smrk__lead\"\u003eEach variant is sold individually. One switch, one character, one rotation.\u003c\/p\u003e\n          \u003cdiv class=\"smrk__divider\"\u003e\u003cspan class=\"smrk__diamond\"\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__variants\"\u003e\n          \u003carticle class=\"smrk__variant smrk__variant--red\"\u003e\n            \u003cdiv class=\"smrk__variant-glyph\"\u003e🍄\u003c\/div\u003e\n            \u003ch3\u003eRed Mushroom\u003c\/h3\u003e\n            \u003cspan class=\"smrk__variant-tag\"\u003eRotating Edition\u003c\/span\u003e\n            \u003cp\u003eThe Super Mushroom — the original power-up, reborn in layered resin with a spin that never stops being satisfying.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__variant smrk__variant--green\"\u003e\n            \u003cdiv class=\"smrk__variant-glyph\"\u003e🌿\u003c\/div\u003e\n            \u003ch3\u003ePiranha Plant\u003c\/h3\u003e\n            \u003cspan class=\"smrk__variant-tag\"\u003eRotating Edition\u003c\/span\u003e\n            \u003cp\u003eThe pipe-dwelling menace captured in rich resin, every leaf and snap of those jaws immortalised in stunning detail.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__variant smrk__variant--brown\"\u003e\n            \u003cdiv class=\"smrk__variant-glyph\"\u003e🟤\u003c\/div\u003e\n            \u003ch3\u003eGoomba\u003c\/h3\u003e\n            \u003cspan class=\"smrk__variant-tag\"\u003eRotating Edition\u003c\/span\u003e\n            \u003cp\u003eGaming's most underestimated enemy — now a premium artisan collectible that spins on your switch with quiet dignity.\u003c\/p\u003e\n          \u003c\/article\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== RECTANGLE IMAGE BREAK ======================== --\u003e\n      \u003c!-- IMAGE SLOT: all three variants together, or lifestyle scene on a setup --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__media-rect\"\u003e\n          \u003cimg src=\"https:\/\/img.alicdn.com\/imgextra\/i4\/2606162487\/O1CN015Uk8I21UF69ju2nOk_!!2606162487.jpg\" alt=\"Super Mario Rotating Artisan Resin Keycap all variants lifestyle\" loading=\"lazy\"\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== CRAFT \u0026 FEEL ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__head\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eCraftsmanship\u003c\/div\u003e\n          \u003ch2 class=\"smrk__h2\"\u003eResin, Depth \u0026amp; Precision\u003c\/h2\u003e\n          \u003cp class=\"smrk__lead\"\u003eWhat separates an artisan keycap from a novelty cap is everything you can see and feel up close.\u003c\/p\u003e\n          \u003cdiv class=\"smrk__divider\"\u003e\u003cspan class=\"smrk__diamond\"\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__panels\"\u003e\n          \u003carticle class=\"smrk__panel\"\u003e\n            \u003cspan class=\"smrk__panel-ic\"\u003e🔍\u003c\/span\u003e\n            \u003ch3\u003eLayered Resin — Built, Not Printed\u003c\/h3\u003e\n            \u003cp\u003eThe character is constructed in resin layers, not printed on a\n               surface. Each layer adds depth, colour and clarity — the\n               result is a cap you lean in to look at, with details that reveal\n               themselves the closer you get.\u003c\/p\u003e\n          \u003c\/article\u003e\n          \u003carticle class=\"smrk__panel\"\u003e\n            \u003cspan class=\"smrk__panel-ic\"\u003e🌀\u003c\/span\u003e\n            \u003ch3\u003eSmooth 360° Rotation\u003c\/h3\u003e\n            \u003cp\u003eThe precision bearing keeps the rotation steady and controlled —\n               no wobble, no tilt, just a clean, fluid spin. The character stays\n               perfectly upright when still and rotates smoothly when flicked,\n               combining desk art with tactile satisfaction.\u003c\/p\u003e\n          \u003c\/article\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== SPECIFICATIONS ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__head\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eThe Details\u003c\/div\u003e\n          \u003ch2 class=\"smrk__h2\"\u003eFull Specifications\u003c\/h2\u003e\n          \u003cdiv class=\"smrk__divider\"\u003e\u003cspan class=\"smrk__diamond\"\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__table-wrap\"\u003e\n          \u003ctable class=\"smrk__table\"\u003e\n            \u003ctbody\u003e\n              \u003ctr\u003e\n\u003cth\u003eProduct Type\u003c\/th\u003e\n\u003ctd\u003eArtisan Keycap — Single Piece\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eModel\u003c\/th\u003e\n\u003ctd\u003eSuper Mario Bros. — Rotating Edition\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eMaterial\u003c\/th\u003e\n\u003ctd\u003eResin + PBT\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eLegend Process\u003c\/th\u003e\n\u003ctd\u003eLayered Resin Coating\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eMechanism\u003c\/th\u003e\n\u003ctd\u003e360° Rotating (precision bearing)\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eStem Type\u003c\/th\u003e\n\u003ctd\u003eMX-Style Cross Stem\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eBacklit Compatible\u003c\/th\u003e\n\u003ctd\u003eNo — opaque resin construction\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eAvailable Variants\u003c\/th\u003e\n\u003ctd\u003eRed Mushroom · Piranha Plant · Goomba\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eCompatible Switches\u003c\/th\u003e\n\u003ctd\u003eCherry MX, Gateron, Kailh \u0026amp; most MX clones\u003c\/td\u003e\n\u003c\/tr\u003e\n              \u003ctr\u003e\n\u003cth\u003eSold As\u003c\/th\u003e\n\u003ctd\u003eIndividual keycap (one piece per order)\u003c\/td\u003e\n\u003c\/tr\u003e\n            \u003c\/tbody\u003e\n          \u003c\/table\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== STATS ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__head\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eAt a Glance\u003c\/div\u003e\n          \u003ch2 class=\"smrk__h2\"\u003eWhy Collectors Love It\u003c\/h2\u003e\n          \u003cdiv class=\"smrk__divider\"\u003e\u003cspan class=\"smrk__diamond\"\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__stats\"\u003e\n          \u003cdiv class=\"smrk__stat\"\u003e\n\u003cdiv class=\"smrk__stat-num\"\u003e3\u003c\/div\u003e\n\u003cdiv class=\"smrk__stat-label\"\u003eCharacters\u003c\/div\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"smrk__stat\"\u003e\n\u003cdiv class=\"smrk__stat-num\"\u003e360°\u003c\/div\u003e\n\u003cdiv class=\"smrk__stat-label\"\u003eFull Rotation\u003c\/div\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"smrk__stat\"\u003e\n\u003cdiv class=\"smrk__stat-num\"\u003eMX\u003c\/div\u003e\n\u003cdiv class=\"smrk__stat-label\"\u003eCompatible\u003c\/div\u003e\n\u003c\/div\u003e\n          \u003cdiv class=\"smrk__stat\"\u003e\n\u003cdiv class=\"smrk__stat-num\"\u003e∞\u003c\/div\u003e\n\u003cdiv class=\"smrk__stat-label\"\u003eDesk Impact\u003c\/div\u003e\n\u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== FAQ ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__head\"\u003e\n          \u003cdiv class=\"smrk__kicker\"\u003eQuestions?\u003c\/div\u003e\n          \u003ch2 class=\"smrk__h2\"\u003eFrequently Asked Questions\u003c\/h2\u003e\n          \u003cdiv class=\"smrk__divider\"\u003e\u003cspan class=\"smrk__diamond\"\u003e\u003c\/span\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv class=\"smrk__faq\"\u003e\n\n          \u003cdetails open\u003e\n            \u003csummary\u003eDoes it actually rotate \/ spin?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              Yes — that is its headline feature. A precision bearing inside the\n              resin cap allows smooth 360-degree rotation on the MX stem. It\n              spins cleanly and stays stable when not in motion, so the character\n              always faces forward at rest.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails\u003e\n            \u003csummary\u003eWill it fit my switches?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              It uses a standard MX cross stem and fits Cherry MX, Gateron, Kailh\n              and most MX-compatible switches. If you are unsure about your\n              specific board, just get in touch and we will confirm before you\n              order.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails\u003e\n            \u003csummary\u003eCan I buy all three characters together?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              Each variant (Red Mushroom, Piranha Plant, Goomba) is listed and\n              sold individually. To collect all three, simply add each to your\n              cart separately.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails\u003e\n            \u003csummary\u003eIs it compatible with RGB \/ backlit keyboards?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              The keycap is made from opaque resin and does not let RGB light\n              shine through — backlit compatible: No. It will still physically\n              fit on any MX board regardless of lighting, but the RGB effect\n              will be blocked underneath the cap.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails\u003e\n            \u003csummary\u003eDoes the rotation affect typing stability?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              The rotating mechanism is designed for display and tactile\n              enjoyment rather than daily high-speed typing. The cap is stable\n              when pressed; the spin is triggered by deliberate flicking or\n              spinning. Most collectors place it on a low-use key such as Escape,\n              a function key or a dedicated macro key.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails\u003e\n            \u003csummary\u003eIs this an official Nintendo \/ Mario product?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              This is a third-party artisan keycap inspired by the Super Mario\n              Bros. universe. It is not an officially licensed Nintendo product\n              and is sold as a fan-made collectible accessory.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails\u003e\n            \u003csummary\u003eHow should I place it on the board?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              Simply press the cap down over the MX stem of your chosen key\n              until it clicks into place. Use a wire keycap puller to remove\n              it cleanly when you want to switch things up. No tools or\n              modifications needed.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n          \u003cdetails\u003e\n            \u003csummary\u003eWill the resin fade or discolour over time?\u003c\/summary\u003e\n            \u003cdiv class=\"smrk__faq-body\"\u003e\n              High-quality resin can discolour with prolonged direct UV exposure\n              over time. Keep the board out of direct sustained sunlight to\n              preserve the clarity and colour of the cap for as long as possible.\n            \u003c\/div\u003e\n          \u003c\/details\u003e\n\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== FINAL FULL-WIDTH IMAGE ======================== --\u003e\n      \u003c!-- IMAGE SLOT: closing shot — all variants together or best lifestyle scene --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__media-full\"\u003e\n          \u003cimg src=\"https:\/\/img.alicdn.com\/imgextra\/i4\/2606162487\/O1CN01dx9mEA1UF69fSOloQ_!!2606162487.jpg\" alt=\"Super Mario Rotating Artisan Resin Keycap all variants collection\" loading=\"lazy\"\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== GIFT BANNER ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__gift\"\u003e\n          \u003cspan class=\"smrk__gift-ic\"\u003e🎁\u003c\/span\u003e\n          \u003ch2\u003eThe Perfect Gift for Any Gamer\u003c\/h2\u003e\n          \u003cp\u003eCompact, collectible, and genuinely surprising — a rotating artisan\n             keycap is the kind of gift that gets a reaction every single time.\n             Ideal for keyboard enthusiasts, Mario fans, and anyone who loves\n             a desk that does something unexpected.\u003c\/p\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n      \u003c!-- ======================== CLOSING CTA ======================== --\u003e\n      \u003csection class=\"smrk__section\"\u003e\n        \u003cdiv class=\"smrk__cta\"\u003e\n          \u003cdiv class=\"smrk__coins\"\u003e\u003c\/div\u003e\n          \u003ch2\u003eSpin Up Your Setup Today\u003c\/h2\u003e\n          \u003cp\u003eThree characters. One rotation. Zero reasons to wait.\u003c\/p\u003e\n          \u003ca href=\"#AddToCart\" id=\"smrkCartLink\" class=\"smrk__cta-seal\"\u003e🎮   Add to Cart — Choose Your Character\u003c\/a\u003e\n        \u003c\/div\u003e\n      \u003c\/section\u003e\n\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n(function () {\n  function bind() {\n    var link = document.getElementById('smrkCartLink');\n    if (!link) return;\n    link.addEventListener('click', function (e) {\n      var selectors = [\n        'button[name=\"add\"]', '[name=\"add\"]',\n        '.product-form__submit', '.product-form__cart-submit',\n        '#AddToCart', '#AddToCart-product-template',\n        '.add-to-cart', '[data-add-to-cart]',\n        'form[action*=\"\/cart\/add\"] [type=\"submit\"]',\n        'form[action*=\"\/cart\/add\"] button'\n      ];\n      var target = null;\n      for (var i = 0; i \u003c selectors.length \u0026\u0026 !target; i++) {\n        target = document.querySelector(selectors[i]);\n      }\n      if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'center' }); }\n    });\n  }\n  if (document.readyState !== 'loading') { bind(); }\n  else { document.addEventListener('DOMContentLoaded', bind); }\n})();\n\u003c\/script\u003e\n\u003c!-- ================================================================= --\u003e\n\u003c!--  END SUPER MARIO ROTATING ARTISAN RESIN KEYCAP DESCRIPTION        --\u003e\n\u003c!-- ================================================================= --\u003e","brand":"KeyArtisan","offers":[{"title":"Red Mushroom","offer_id":48374324232349,"sku":null,"price":21.9,"currency_code":"USD","in_stock":true},{"title":"Piranha Plant","offer_id":48374324265117,"sku":null,"price":21.9,"currency_code":"USD","in_stock":true},{"title":"Goomba","offer_id":48374324297885,"sku":null,"price":21.9,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0684\/6962\/0893\/files\/super-mario-rotating-artisan-resin-keycap-3997093.webp?v=1780735208","url":"https:\/\/keyartisan.net\/products\/super-mario-rotating-artisan-resin-keycap","provider":"KeyArtisan","version":"1.0","type":"link"}