/* ═══════════════════════════════════════════════════════════════════════════
   MEKATOYS · AURORA · UI System
   ───────────────────────────────────────────────────────────────────────────
   Sistema de design unificado para todas as páginas do storefront.
   Inclui: tokens (cores, sombras, vidro), tipografia, layout primitives,
   componentes (pill, chip, folder-tab, card, qty, tabs, form), efeitos
   (sheen, glow-follow, reveal, brand-mark) e backdrops (iridescent, aurora,
   stars, particles).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────── Tokens ─────────────────────── */
:root{
  --bg-0:      oklch(0.13 0.05 285);
  --bg-1:      oklch(0.10 0.06 290);
  --ink:       oklch(0.97 0.01 280);
  --ink-dim:   oklch(0.80 0.02 280);
  --ink-soft:  oklch(0.65 0.03 280);
  --pink:      oklch(0.78 0.22 350);
  --magenta:   oklch(0.72 0.26 5);
  --cyan:      oklch(0.80 0.16 220);
  --lime:      oklch(0.88 0.20 140);
  --green:     oklch(0.78 0.20 150);
  --gold:      oklch(0.84 0.16 80);
  --violet:    oklch(0.65 0.25 300);
  --danger:    oklch(0.66 0.22 25);
}

/* ─────────────────────── Base ─────────────────────── */
html, body{ background: var(--bg-0); color: var(--ink); }
body{
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.mk-page-body{ flex: 1 1 auto; }
.font-display, .mk-display{ font-family: 'Space Grotesk','Inter',sans-serif; }
.font-mono,    .mk-mono   { font-family: 'JetBrains Mono', monospace; }

/* ─────────────────────── Backdrops ─────────────────────── */
.mk-iridescent-bg{
  position: fixed; inset: -10%; z-index: -3; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 8%,   oklch(0.78 0.22 350 / .55), transparent 60%),
    radial-gradient(50% 45% at 90% 0%,   oklch(0.80 0.18 220 / .55), transparent 60%),
    radial-gradient(45% 40% at 75% 55%,  oklch(0.85 0.20 140 / .45), transparent 60%),
    radial-gradient(40% 40% at 10% 75%,  oklch(0.78 0.22 300 / .50), transparent 60%),
    radial-gradient(60% 50% at 50% 110%, oklch(0.84 0.16 80  / .35), transparent 60%),
    linear-gradient(180deg, oklch(0.13 0.05 285), oklch(0.10 0.06 290));
  animation: mkBgFloat 28s ease-in-out infinite alternate;
  filter: saturate(1.1);
}
@keyframes mkBgFloat{
  0%   { transform: translate3d(0,0,0)         scale(1) }
  50%  { transform: translate3d(-2%,1.5%,0)    scale(1.05) }
  100% { transform: translate3d(2%,-1.5%,0)    scale(1.02) }
}
.mk-aurora{ position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.mk-aurora::before, .mk-aurora::after{
  content:""; position:absolute; width:140vmax; height:60vmax;
  left:50%; top:30%; transform: translate(-50%,-50%); border-radius:50%;
  background: conic-gradient(from 200deg,
    oklch(0.80 0.22 350 / 0) 0deg,
    oklch(0.80 0.22 350 / .25) 60deg,
    oklch(0.80 0.18 220 / .30) 140deg,
    oklch(0.85 0.20 140 / .25) 220deg,
    oklch(0.84 0.16 80  / .20) 300deg,
    oklch(0.80 0.22 350 / 0) 360deg);
  filter: blur(80px); animation: mkSpin 40s linear infinite;
}
.mk-aurora::after{ width:90vmax; height:90vmax; top:75%; animation-duration:60s; animation-direction:reverse; mix-blend-mode:screen; opacity:.65; }
@keyframes mkSpin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

.mk-stars{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent 50%),
    radial-gradient(1px 1px at 28% 62%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 12%, #fff, transparent 50%),
    radial-gradient(1px 1px at 72% 78%, #fff, transparent 50%),
    radial-gradient(1.2px 1.2px at 88% 32%, #fff, transparent 50%),
    radial-gradient(1px 1px at 42% 88%, #fff, transparent 50%),
    radial-gradient(1.3px 1.3px at 8% 92%, #fff, transparent 50%);
  animation: mkTwinkle 6s ease-in-out infinite;
}
@keyframes mkTwinkle{ 0%,100%{ opacity:.35 } 50%{ opacity:.7 } }

.mk-particles{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.mk-particle{
  position:absolute; width:6px; height:6px; border-radius:999px;
  background: var(--c, oklch(0.85 0.20 140));
  filter: blur(.5px); box-shadow: 0 0 12px var(--c, oklch(0.85 0.20 140));
  opacity:.55; animation: mkFloatUp linear infinite;
}
@keyframes mkFloatUp{
  0%   { transform: translate3d(0,0,0) scale(.6); opacity: 0 }
  10%  { opacity: .65 }
  90%  { opacity: .55 }
  100% { transform: translate3d(var(--dx,30px),-110vh,0) scale(1.1); opacity: 0 }
}

/* ─────────────────────── Glass primitives ─────────────────────── */
.mk-glass{
  background: linear-gradient(180deg, oklch(1 0 0 / .10), oklch(1 0 0 / .04));
  border: 1px solid oklch(1 0 0 / .18);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / .35),
    inset 0 -1px 0 oklch(1 0 0 / .05),
    0 30px 60px -20px oklch(0 0 0 / .55);
}
.mk-glass-strong{
  background: linear-gradient(180deg, oklch(1 0 0 / .16), oklch(1 0 0 / .06));
  border: 1px solid oklch(1 0 0 / .25);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / .45),
    0 40px 80px -24px oklch(0 0 0 / .60);
}
.mk-glass-soft{
  background: linear-gradient(180deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02));
  border: 1px solid oklch(1 0 0 / .12);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

/* Iridescent rim — borda rainbow girando */
.mk-rim{ position:relative; }
.mk-rim::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: conic-gradient(from var(--mkRim,200deg),
    oklch(0.80 0.22 350) 0deg, oklch(0.84 0.18 220) 80deg,
    oklch(0.88 0.20 140) 160deg, oklch(0.84 0.16 80) 240deg,
    oklch(0.78 0.22 300) 320deg, oklch(0.80 0.22 350) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.75;
  animation: mkRim 14s linear infinite;
}
@property --mkRim{ syntax:'<angle>'; inherits:false; initial-value: 0deg; }
@keyframes mkRim{ to{ --mkRim: 360deg } }

/* ─────────────────────── Pasta 3D ─────────────────────── */
.mk-folder-tab{
  height:38px; padding:0 18px; display:flex; align-items:center; gap:8px;
  border-top-left-radius:22px; border-top-right-radius:22px;
  background: linear-gradient(180deg, oklch(1 0 0 / .22), oklch(1 0 0 / .08));
  border: 1px solid oklch(1 0 0 / .25); border-bottom:none;
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .55);
  position:relative; z-index:1; margin-bottom:-1px;
}
.mk-dot{
  width:14px; height:14px; border-radius:999px;
  border: 1px solid oklch(0 0 0 / .55);
  box-shadow:
    0 2px 4px oklch(0 0 0 / .45),
    inset -1px -1.5px 2px oklch(0 0 0 / .35),
    inset 1px 1.5px 1.5px oklch(1 0 0 / .55);
  position:relative;
}
.mk-dot::after{
  content:""; position:absolute; top:2px; left:3px; width:5px; height:3px;
  border-radius:999px; background: oklch(1 0 0 / .8); filter: blur(.3px);
}
.mk-dot.red    { background: radial-gradient(circle at 30% 30%, #ff8a84, #ff5a4f 55%, #b3241c); }
.mk-dot.yellow { background: radial-gradient(circle at 30% 30%, #ffe78a, #ffbd2e 55%, #b38420); }
.mk-dot.green  { background: radial-gradient(circle at 30% 30%, #8af0a3, #27c93f 55%, #1a8a2a); }

.mk-folder-body{
  border-top-right-radius:30px;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
  position: relative;
}
.mk-folder-body.is-card{
  border-top-right-radius:22px;
  border-bottom-left-radius:22px;
  border-bottom-right-radius:22px;
}

/* ─────────────────────── Texto e bullets ─────────────────────── */
.mk-iridescent-text{
  background: linear-gradient(90deg,
    oklch(0.86 0.18 350), oklch(0.86 0.18 220), oklch(0.92 0.18 140), oklch(0.88 0.16 80), oklch(0.86 0.18 350));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mkShimmer 8s linear infinite;
}
@keyframes mkShimmer{ to{ background-position: -200% 0 } }

.mk-bullet{
  display:inline-block; width:6px; height:6px; border-radius:999px;
  background: conic-gradient(from 0deg, oklch(0.78 0.22 350), oklch(0.80 0.18 220), oklch(0.85 0.20 140), oklch(0.84 0.16 80), oklch(0.78 0.22 350));
  animation: mkBullet 2.4s ease-in-out infinite;
}
@keyframes mkBullet{
  0%,100%{ box-shadow: 0 0 4px oklch(0.78 0.22 350 / .6); transform:scale(1) }
  50%   { box-shadow: 0 0 12px oklch(0.78 0.22 350 / 1); transform:scale(1.25) }
}

.mk-live-dot{
  width:8px; height:8px; border-radius:999px; background: oklch(0.72 0.26 5);
  animation: mkLive 1.6s ease-out infinite; flex-shrink:0;
}
@keyframes mkLive{
  0%   { box-shadow: 0 0 0 0 oklch(0.72 0.26 5 / .8) }
  80%,100%{ box-shadow: 0 0 0 12px oklch(0.72 0.26 5 / 0) }
}

.mk-stars-row{ color: oklch(0.88 0.18 90); filter: drop-shadow(0 0 6px oklch(0.84 0.16 80 / .6)); }

/* ─────────────────────── Buttons (pills) ─────────────────────── */
.mk-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 22px; border-radius:999px; font-weight:700; font-size:13px;
  background: linear-gradient(180deg, oklch(1 0 0 / .92), oklch(1 0 0 / .78));
  color: oklch(0.18 0.04 280);
  border: 1px solid oklch(1 0 0 / .9);
  box-shadow: 0 6px 16px -6px oklch(0 0 0 / .45), inset 0 1px 0 #fff;
  transition: transform .25s ease, box-shadow .25s ease;
  letter-spacing:.04em; cursor:pointer;
}
.mk-pill:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px -6px oklch(0 0 0 / .55), inset 0 1px 0 #fff; }
.mk-pill:disabled, .mk-pill[disabled]{ opacity: .5; cursor:not-allowed; transform: none !important; }

.mk-pill-cta{
  background: linear-gradient(180deg, oklch(0.78 0.22 350), oklch(0.65 0.25 5));
  color:#fff; border:1px solid oklch(1 0 0 / .35);
  box-shadow: 0 10px 28px -6px oklch(0.78 0.22 350 / .65), inset 0 1px 0 oklch(1 0 0 / .35);
}
.mk-pill-cta:hover{ box-shadow: 0 14px 36px -6px oklch(0.78 0.22 350 / .85), inset 0 1px 0 oklch(1 0 0 / .35); }

.mk-pill-success{
  background: linear-gradient(180deg, oklch(0.78 0.20 150), oklch(0.55 0.20 150));
  color:#fff; border:1px solid oklch(1 0 0 / .35);
  box-shadow: 0 10px 28px -6px oklch(0.78 0.20 150 / .65), inset 0 1px 0 oklch(1 0 0 / .35);
}
.mk-pill-success:hover{ box-shadow: 0 14px 36px -6px oklch(0.78 0.20 150 / .85), inset 0 1px 0 oklch(1 0 0 / .35); }

.mk-pill-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 18px; border-radius:999px; font-weight:600; font-size:12px;
  background: oklch(1 0 0 / .10); color: var(--ink);
  border: 1px solid oklch(1 0 0 / .22);
  backdrop-filter: blur(14px); letter-spacing:.04em;
  transition: background .25s;
}
.mk-pill-ghost:hover{ background: oklch(1 0 0 / .18); }

.mk-icon-btn{
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; color: var(--ink);
  background: linear-gradient(180deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02));
  border: 1px solid oklch(1 0 0 / .12);
  backdrop-filter: blur(20px);
  transition: background .2s, transform .25s;
  cursor: pointer;
}
.mk-icon-btn:hover{ background: oklch(1 0 0 / .15); transform: translateY(-1px); }

/* ─────────────────────── Chips ─────────────────────── */
.mk-chip{
  padding: 10px 16px; border-radius:999px;
  background: oklch(1 0 0 / .08); border:1px solid oklch(1 0 0 / .15);
  font-size:13px; color: var(--ink); transition:.25s;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.mk-chip:hover{ background: oklch(1 0 0 / .16); transform: translateY(-1px); }
.mk-chip.is-active{
  background: linear-gradient(180deg, oklch(1 0 0 / .95), oklch(1 0 0 / .82));
  color: oklch(0.18 0.04 280); border-color: oklch(1 0 0 / .9);
  box-shadow: 0 0 0 4px oklch(1 0 0 / .08), 0 8px 22px -6px oklch(0.78 0.22 350 / .6);
}

/* ─────────────────────── Tabs ─────────────────────── */
.mk-tabs{
  display:inline-flex; gap:2px;
  background: oklch(1 0 0 / .06); border:1px solid oklch(1 0 0 / .12);
  border-radius:999px; padding:4px;
}
.mk-tab{
  padding:8px 18px; border-radius:999px; font-size:12px; font-weight:600;
  color: oklch(0.97 0.01 280 / .7); cursor:pointer; transition:.2s;
  letter-spacing:.04em; text-transform: uppercase; background: transparent; border: none;
}
.mk-tab:hover{ color:#fff; }
.mk-tab.is-active{
  background: linear-gradient(180deg, oklch(1 0 0 / .95), oklch(1 0 0 / .82));
  color: oklch(0.18 0.04 280);
  box-shadow: 0 4px 10px -4px oklch(0 0 0 / .4);
}
.mk-tab-panel{ display:none; }
.mk-tab-panel.is-active{ display:block; animation: mkFadeIn .35s ease; }
@keyframes mkFadeIn{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform: none } }

/* ─────────────────────── Inputs ─────────────────────── */
.mk-input{
  width: 100%;
  background: oklch(1 0 0 / .06);
  border: 1px solid oklch(1 0 0 / .15);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mk-input::placeholder{ color: oklch(1 0 0 / .35); }
.mk-input:focus{
  border-color: oklch(1 0 0 / .4);
  background: oklch(1 0 0 / .10);
  box-shadow: 0 0 0 4px oklch(1 0 0 / .06);
}
.mk-input.is-mono{ font-family: 'JetBrains Mono', monospace; letter-spacing:.04em; }

/* Password toggle (olho) */
.mk-pass-wrap{ position: relative; }
.mk-pass-wrap .mk-input{ padding-right: 44px; }
.mk-pass-toggle{
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: none; color: oklch(1 0 0 / .5);
  transition: color .2s, background .2s; z-index: 2;
}
.mk-pass-toggle:hover{ color: oklch(1 0 0 / .9); background: oklch(1 0 0 / .08); }
html[data-theme="light"] .mk-pass-toggle{ color: oklch(0.20 0.03 285 / .5); }
html[data-theme="light"] .mk-pass-toggle:hover{ color: oklch(0.20 0.03 285 / .9); background: oklch(0.20 0.03 285 / .06); }

.mk-label{
  display:block; font-size:11px; font-family:'JetBrains Mono',monospace;
  text-transform: uppercase; letter-spacing:.16em; color: var(--ink-soft); margin-bottom:6px;
}

/* Quantity */
.mk-qty{
  display:inline-flex; align-items:center;
  background: oklch(1 0 0 / .08); border:1px solid oklch(1 0 0 / .18);
  border-radius:999px; overflow:hidden; backdrop-filter: blur(14px);
}
.mk-qty button{
  width:44px; height:44px; display:grid; place-items:center; color:#fff;
  transition: background .2s; cursor:pointer; font-size:18px; font-weight:600;
  background: transparent; border: none;
}
.mk-qty button:hover{ background: oklch(1 0 0 / .12); }
.mk-qty input{
  width:54px; text-align:center; background:transparent; border:none;
  color:#fff; font-weight:700; font-size:15px; outline:none;
  font-family: 'JetBrains Mono', monospace;
}
.mk-qty input::-webkit-outer-spin-button,
.mk-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ─────────────────────── Brand mark ─────────────────────── */
.mk-brand-mark{
  --brand-size: 44px;
  position:relative; display:inline-grid; place-items:center;
  width: var(--brand-size); height: var(--brand-size); isolation: isolate;
}
.mk-brand-halo{
  position:absolute; inset:-30%; border-radius:50%;
  background: conic-gradient(from 0deg,
    oklch(0.80 0.22 350 / .55), oklch(0.80 0.18 220 / .55),
    oklch(0.85 0.20 140 / .55), oklch(0.84 0.16 80 / .55),
    oklch(0.78 0.22 300 / .55), oklch(0.80 0.22 350 / .55));
  filter: blur(14px); opacity:.85; z-index:-1;
  animation: mkBrandHalo 8s linear infinite;
}
.mk-brand-halo::after{
  content:""; position:absolute; inset:20%; border-radius:50%;
  background: oklch(0.13 0.05 285); filter: blur(6px); opacity:.55;
}
.mk-brand-img{
  position:relative; width:100%; height:100%; object-fit:contain;
  filter:
    drop-shadow(0 4px 12px oklch(0 0 0 / .55))
    drop-shadow(0 0 14px oklch(0.78 0.22 350 / .45))
    drop-shadow(0 0 28px oklch(0.80 0.18 220 / .25));
  animation: mkBrandFloat 5s ease-in-out infinite;
  transition: transform .3s ease;
}
a:hover .mk-brand-img{ transform: scale(1.08) rotate(-2deg); }
@keyframes mkBrandHalo{ to{ transform: rotate(360deg) } }
@keyframes mkBrandFloat{
  0%,100%{ transform: translateY(0) }
  50%   { transform: translateY(-3px) }
}

/* ─────────────────────── Effects ─────────────────────── */
.mk-sheen{ position:relative; overflow:hidden; }
.mk-sheen::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 30%, oklch(1 0 0 / .25) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s ease; pointer-events:none;
}
.group:hover .mk-sheen::after,
.mk-sheen:hover::after{ transform: translateX(120%); }

.mk-marquee{ overflow:hidden; position:relative; }
.mk-marquee-track{ display:flex; gap:56px; width:max-content; animation: mkMarquee 36s linear infinite; }
.mk-marquee:hover .mk-marquee-track{ animation-play-state: paused; }
@keyframes mkMarquee{ to{ transform: translateX(-50%) } }

.mk-reveal{ opacity:0; transform: translateY(24px) scale(.98); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.mk-reveal.is-in{ opacity:1; transform: none; }

.mk-glow-follow{ position:relative; isolation:isolate; }
.mk-glow-follow::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), oklch(1 0 0 / .22), transparent 60%);
  opacity:0; transition: opacity .3s ease; pointer-events:none; z-index:1;
}
.mk-glow-follow:hover::before{ opacity:1; }

.mk-glow-pink   { box-shadow: 0 0 0 1px oklch(1 0 0 / .15), 0 18px 60px -10px oklch(0.78 0.22 350 / .55); }
.mk-glow-cyan   { box-shadow: 0 0 0 1px oklch(1 0 0 / .15), 0 18px 60px -10px oklch(0.80 0.18 220 / .55); }
.mk-glow-lime   { box-shadow: 0 0 0 1px oklch(1 0 0 / .15), 0 18px 60px -10px oklch(0.85 0.20 140 / .55); }
.mk-glow-gold   { box-shadow: 0 0 0 1px oklch(1 0 0 / .15), 0 18px 60px -10px oklch(0.84 0.16 80  / .55); }
.mk-glow-violet { box-shadow: 0 0 0 1px oklch(1 0 0 / .15), 0 18px 60px -10px oklch(0.65 0.25 300 / .55); }

/* ─────────────────────── Topbar (admin-configurable) ─────────────────────── */
.mk-topbar{
  position: relative; z-index: 30;
  background: var(--topbar-bg, oklch(0.18 0.07 290 / .55));
  border-bottom: 1px solid oklch(1 0 0 / .08);
  backdrop-filter: blur(20px);
  color: var(--topbar-ink, #fff);
  font-size: 12px; letter-spacing: .04em;
  padding: 8px 0;
}

/* ─────────────────────── Nav (sticky) ─────────────────────── */
.mk-header{ position: sticky; top: 12px; z-index: 40; padding-top: 4px; }

/* ─────────────────────── Trading Card Store strip ─────────────────────── */
.mk-trading-strip-wrap{
  display: flex; justify-content: center;
  margin-top: 10px;
  pointer-events: none;
}
.mk-trading-strip{
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, oklch(1 0 0 / .10), oklch(1 0 0 / .03));
  border: 1px solid oklch(1 0 0 / .16);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .25), 0 10px 24px -10px oklch(0 0 0 / .5);
  pointer-events: auto;
}
.mk-trading-strip-text{
  font-family: 'Space Grotesk','Inter',sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .42em;
  padding-left: .42em; /* compensa o letter-spacing no fim */
  background: linear-gradient(90deg,
    oklch(0.86 0.18 350), oklch(0.86 0.18 220), oklch(0.92 0.18 140),
    oklch(0.88 0.16 80), oklch(0.86 0.18 350));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mkTradingShimmer 7s linear infinite;
  white-space: nowrap;
}
@keyframes mkTradingShimmer{ to{ background-position: -200% 0; } }

/* reflexo móvel — faixa de brilho que atravessa a pílula */
.mk-trading-strip-shine{
  position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    oklch(1 0 0 / .55) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: mkTradingSweep 4.5s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes mkTradingSweep{
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

.mk-nav{
  border-radius: 999px;
  padding: 8px 8px 8px 8px;
}
.mk-nav-segment{
  background: linear-gradient(180deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02));
  border: 1px solid oklch(1 0 0 / .12);
  backdrop-filter: blur(20px);
  border-radius: 999px; padding: 4px;
}
.mk-nav-link{
  padding: 6px 16px; border-radius: 999px; font-size: 13px; color: var(--ink);
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.mk-nav-link:hover{ background: oklch(1 0 0 / .10); }
.mk-nav-link.is-active{
  background: linear-gradient(180deg, oklch(1 0 0 / .95), oklch(1 0 0 / .82));
  color: oklch(0.18 0.04 280); font-weight: 600;
  box-shadow: 0 4px 10px -4px oklch(0 0 0 / .4);
}

/* dropdown */
.mk-dropdown{ position: relative; }
.mk-dropdown-panel{
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 320px; max-width: 90vw;
  background: linear-gradient(180deg, oklch(0.18 0.05 285 / .92), oklch(0.14 0.05 285 / .92));
  border: 1px solid oklch(1 0 0 / .15);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-radius: 22px; padding: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow: 0 30px 60px -10px oklch(0 0 0 / .6);
  z-index: 50;
}
.mk-dropdown:hover .mk-dropdown-panel,
.mk-dropdown:focus-within .mk-dropdown-panel{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mk-dropdown-item{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--ink); font-size: 13px;
  transition: background .2s;
}
.mk-dropdown-item:hover{ background: oklch(1 0 0 / .08); }

/* ─────────────────────── Cart badge ─────────────────────── */
.mk-cart-badge{
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: oklch(0.78 0.22 350);
  color: #fff; font-size: 10px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: 0 0 12px oklch(0.78 0.22 350 / .65);
}

/* ─────────────────────── Photo stage ─────────────────────── */
.mk-photo-stage{
  position:relative; border-radius:28px; overflow:hidden;
  background: linear-gradient(135deg, oklch(0.20 0.06 290), oklch(0.16 0.05 285));
  aspect-ratio: 1/1;
}
.mk-photo-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(60% 50% at 15% 15%, oklch(0.78 0.22 350 / .25), transparent 60%),
    radial-gradient(60% 50% at 85% 85%, oklch(0.80 0.18 220 / .25), transparent 60%);
  mix-blend-mode: screen;
}
.mk-photo-stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%;
  transition: transform .4s ease, opacity .35s ease;
}

.mk-photo-tag{
  position:absolute; z-index:3; backdrop-filter: blur(14px);
  background: linear-gradient(180deg, oklch(1 0 0 / .18), oklch(1 0 0 / .06));
  border:1px solid oklch(1 0 0 / .25); border-radius:999px;
  padding:6px 12px; font-size:10px; font-family:'JetBrains Mono',monospace;
  letter-spacing:.16em; text-transform:uppercase;
}

/* Thumbs */
.mk-thumb{
  width:80px; height:80px; border-radius:14px; overflow:hidden;
  border:2px solid oklch(1 0 0 / .12);
  opacity:.7; transition: .25s; cursor:pointer; flex-shrink:0;
  position:relative; background: oklch(1 0 0 / .04);
}
.mk-thumb:hover{ opacity:1; transform: translateY(-2px); }
.mk-thumb.is-active{
  opacity:1; border-color: oklch(1 0 0 / .9);
  box-shadow: 0 0 0 4px oklch(1 0 0 / .08), 0 10px 24px -6px oklch(0.78 0.22 350 / .55);
}
.mk-thumb img{ width:100%; height:100%; object-fit:cover; }

/* ─────────────────────── Tables (cart) ─────────────────────── */
.mk-table{
  width: 100%; border-collapse: separate; border-spacing: 0;
}
.mk-table thead th{
  text-align: left; padding: 14px 18px;
  font-size: 11px; font-family:'JetBrains Mono', monospace;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-soft);
  border-bottom: 1px solid oklch(1 0 0 / .08);
}
.mk-table tbody td{
  padding: 16px 18px;
  border-bottom: 1px solid oklch(1 0 0 / .06);
  vertical-align: middle;
}
.mk-table tbody tr:hover{ background: oklch(1 0 0 / .03); }
.mk-table tbody tr:last-child td{ border-bottom: none; }

/* ─────────────────────── Forms (checkout layout) ─────────────────────── */
.mk-form-grid{ display:grid; gap:18px; }
.mk-form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
.mk-form-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px){
  .mk-form-grid.cols-2, .mk-form-grid.cols-3{ grid-template-columns: 1fr; }
}

/* Alert */
.mk-alert{
  border-radius: 16px; padding: 14px 18px;
  border: 1px solid oklch(0.66 0.22 25 / .35);
  background: oklch(0.66 0.22 25 / .12);
  color: oklch(0.96 0.06 25);
  font-size: 13px;
}
.mk-alert.is-success{ border-color: oklch(0.78 0.20 150 / .35); background: oklch(0.78 0.20 150 / .12); color: oklch(0.96 0.18 150); }
.mk-alert.is-info{ border-color: oklch(0.80 0.18 220 / .35); background: oklch(0.80 0.18 220 / .12); color: oklch(0.96 0.10 220); }
.mk-alert.is-warning{ border-color: oklch(0.84 0.16 80 / .35); background: oklch(0.84 0.16 80 / .12); color: oklch(0.96 0.14 80); }

/* ─────────────────────── Utilities ─────────────────────── */
.mk-no-scrollbar::-webkit-scrollbar{ display:none; }
.mk-no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.mk-fade-x{ mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mk-line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }

/* Container */
.mk-container{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Footer */
.mk-footer{
  margin-top: 80px; padding: 40px 0 28px;
  border-top: 1px solid oklch(1 0 0 / .08);
}

/* Lightbox */
.mk-lightbox{
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0.06 0.02 285 / .92); backdrop-filter: blur(24px);
  display: none; align-items: center; justify-content: center; padding: 5vh 5vw;
}
.mk-lightbox.is-open{ display: flex; }
.mk-lightbox img{ max-width: 100%; max-height: 100%; border-radius: 16px; }
.mk-lightbox-close{
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px;
  border-radius: 999px; background: oklch(1 0 0 / .14); border: 1px solid oklch(1 0 0 / .22);
  color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(14px);
}

/* Spacing helpers */
.mk-mt-section{ margin-top: 56px; }
.mk-mt-block{ margin-top: 28px; }