.elementor-kit-62{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-62 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   MEMELAUS — GLOBAL CSS v2
   Design system with light/dark themes, sectional color duos, cards, buttons,
   grids, and safe glow frames (no click-blocking). Prefix: .mla-
   -------------------------------------------------------------------------- */

/* ---- Tokens ------------------------------------------------------------- */
:root{
  /* Layout */
  --mla-container: 1140px;
  --mla-radius-lg: 24px;
  --mla-radius: 18px;
  --mla-radius-sm: 12px;

  /* Shadows */
  --mla-shadow-1: 0 12px 34px rgba(0,0,0,.16);
  --mla-shadow-2: 0 20px 60px rgba(0,0,0,.22);
  --mla-shadow-3: 0 6px 16px rgba(0,0,0,.12);

  /* Light theme base */
  --mla-bg: #f7f7f9;
  --mla-ink: #121218;
  --mla-muted: #5f6575;
  --mla-surface: #ffffff;
  --mla-surface-2: #fafafb;
  --mla-stroke: rgba(0,0,0,.08);

  /* Default duo (sections override these) */
  --mla-accent1: #e60023; /* red */
  --mla-accent2: #ffd100; /* yellow */

  /* Typography */
  --mla-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mla-font-display: Rubik, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

body.theme-dark{
  --mla-bg: #0b0b10;
  --mla-ink: #f2f4ff;
  --mla-muted: #a8aec2;
  --mla-surface: #12121a;
  --mla-surface-2: #0f0f16;
  --mla-stroke: rgba(255,255,255,.10);
}

/* ---- Base --------------------------------------------------------------- */
body{ background:var(--mla-bg); color:var(--mla-ink); font:500 16px/1.55 var(--mla-font-ui) }
a{ color:inherit; text-decoration:none }
.e-container, .elementor-container{ max-width: var(--mla-container) }

/* ---- Type scales -------------------------------------------------------- */
.mla-h1{ font:900 52px/1.05 var(--mla-font-display); letter-spacing:.1px; margin:0 }
.mla-h2{ font:900 30px/1.05 var(--mla-font-display); margin:0 0 10px }
.mla-lead{ color:var(--mla-muted); font-size:18px }

/* ---- Spacing & wrappers ------------------------------------------------- */
.mla-section{ padding:36px 0 }
.mla-wrap{ padding:24px 0 }

/* ---- Buttons ------------------------------------------------------------ */
.mla-btn{
  display:inline-block; padding:12px 16px; border-radius:var(--mla-radius-sm);
  border:1px solid var(--mla-stroke); background:var(--mla-surface);
  color:var(--mla-ink); font:900 14px/1 var(--mla-font-display);
  cursor:pointer; transition:transform .06s ease, box-shadow .2s ease;
  box-shadow: var(--mla-shadow-3);
}
.mla-btn:hover{ transform:translateY(-1px) }
.mla-btn:active{ transform:translateY(0) scale(.99) }

.mla-btn--primary{
  background:linear-gradient(135deg, var(--mla-accent1), var(--mla-accent2));
  color:#0b0b11; border:none; box-shadow: var(--mla-shadow-1);
}
.mla-btn--ghost{ background:var(--mla-surface); border:1px solid var(--mla-stroke) }
.mla-tag{
  display:inline-block; margin-left:auto; padding:6px 10px; border-radius:999px;
  font:800 12px/1 var(--mla-font-display);
  background:linear-gradient(135deg, var(--mla-accent1), var(--mla-accent2)); color:#0b0b11;
}

/* ---- Cards & thumbnails ------------------------------------------------- */
.mla-card{
  padding:16px; border-radius:var(--mla-radius);
  background:var(--mla-surface); border:1px solid var(--mla-stroke);
  box-shadow: var(--mla-shadow-1);
}
.mla-thumb{
  border-radius:16px; background:var(--mla-surface-2);
  border:1px solid var(--mla-stroke);
}

/* ---- Safe glow frames (for hero/arcade) -------------------------------- */
.mla-frame{
  position:relative; z-index:0; overflow:hidden;
  border-radius:var(--mla-radius-lg); border:1px solid var(--mla-stroke);
  box-shadow: var(--mla-shadow-2); background: var(--mla-surface);
}
.mla-frame > *{ position:relative; z-index:1 }          /* content above glow */
.mla-frame::before{
  content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none; /* glow is non-blocking */
  background: none; /* set by section themes below */
  filter:saturate(130%);
}
body.theme-dark .mla-frame::before{ filter:saturate(120%) }

/* ---- Grids -------------------------------------------------------------- */
.mla-grid-hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:center }
@media (max-width:920px){ .mla-grid-hero{ grid-template-columns:1fr } }

.mla-grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
@media (max-width:1120px){ .mla-grid-12{ grid-template-columns:repeat(8,1fr) } }
@media (max-width:720px){  .mla-grid-12{ grid-template-columns:repeat(4,1fr) } }
.mla-span-4{ grid-column:span 4 }

/* ---- Sectional color duos ----------------------------------------------- */
/* Red + Yellow (Drops / Hero) */
.mla-redyellow{ --mla-accent1:#e60023; --mla-accent2:#ffd100 }
.mla-redyellow .mla-frame::before{
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(230,0,35,.22) 0%, transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(255,209,0,.22) 0%, transparent 60%);
}
body.theme-dark .mla-redyellow .mla-frame::before{
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(230,0,35,.18) 0%, transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(255,209,0,.18) 0%, transparent 60%);
}

/* Green + Purple (Arcade) */
.mla-greenpurple{ --mla-accent1:#7c3aed; --mla-accent2:#14f195 }
.mla-greenpurple .mla-frame::before{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124,58,237,.22) 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(20,241,149,.22) 0%, transparent 60%);
}
body.theme-dark .mla-greenpurple .mla-frame::before{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124,58,237,.18) 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(20,241,149,.18) 0%, transparent 60%);
}

/* Extra duos for future sections (not used yet) */
.mla-cyanrose{ --mla-accent1:#06b6d4; --mla-accent2:#fb7185 }
.mla-cyanzest{ --mla-accent1:#06b6d4; --mla-accent2:#f59e0b }
.mla-violetamber{ --mla-accent1:#8b5cf6; --mla-accent2:#fbbf24 }

/* ---- Utility helpers ---------------------------------------------------- */
.mla-text-gradient{
  background:linear-gradient(90deg, var(--mla-accent1), var(--mla-accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.mla-flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.mla-center{ display:grid; place-items:center }
.mla-pill{ border-radius:999px }
.mla-shadow-1{ box-shadow:var(--mla-shadow-1) }
.mla-shadow-2{ box-shadow:var(--mla-shadow-2) }
.mla-border{ border:1px solid var(--mla-stroke) }

/* ---- Header alignment helpers (your header already imported) ------------ */
.mla-header{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--mla-stroke); background:var(--mla-surface); backdrop-filter: blur(14px) saturate(160%) }
.mla-header__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--mla-container); margin:auto; padding:12px 16px }
.mla-logo{ display:flex; gap:10px; align-items:center; font:900 20px/1 var(--mla-font-display) }
.mla-logo__badge{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#111,#333); color:#fff }

/* ---- Theme switch control (matches your header’s switch) ---------------- */
.mla-switch{ position:relative; width:56px; height:30px; border-radius:999px; background:var(--mla-surface-2); border:1px solid var(--mla-stroke); cursor:pointer }
.mla-switch__knob{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:linear-gradient(180deg,#fff,#ddd); transition:left .25s ease }
body.theme-dark .mla-switch__knob{ left:29px; background:linear-gradient(180deg,#2a2a38,#1b1b26) }
.mla-switch__label{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; padding:0 6px; font-size:13px; color:var(--mla-muted); pointer-events:none }

/* ---- WooCommerce light polishing (future-proof, optional) --------------- */
.woocommerce div.product .price,
.woocommerce ul.products li.product .price{ color:var(--mla-ink) }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  border-radius:var(--mla-radius-sm);
  background:linear-gradient(135deg,var(--mla-accent1),var(--mla-accent2));
  border:none; color:#0b0b11; font-weight:800;
  box-shadow:var(--mla-shadow-3);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
  background:var(--mla-surface); color:var(--mla-ink); border:1px solid var(--mla-stroke)
}

/* === HOMEPAGE SPACING FIX === */

/* Hero + Arcade frames */
.mla-frame {
  padding: 32px 40px;  /* more breathing room inside the cards */
}

/* Headlines and text blocks */
.mla-frame h1,
.mla-frame h2,
.mla-frame p {
  margin-bottom: 18px; /* space between elements */
}

/* Buttons row */
.mla-frame .mla-flex {
  margin-top: 20px;
  gap: 14px; /* extra spacing between buttons */
}

/* Emoji boxes in hero */
.mla-frame .mla-card {
  margin: 8px; /* space between the colorful squares */
}

/* Arcade reels */
#arcade .mla-card {
  padding: 24px;        /* more space inside reel boxes */
  margin: 6px;          /* separation between reels */
}

/* Product cards if used */
.mla-grid-12 .mla-card {
  padding: 24px;
}
/* ==========================================================================
   END — Memelaus Global CSS v2
   ========================================================================== *//* End custom CSS */