@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --bg-0: #08070d;
    --bg-1: #131019;
    --bg-2: #1a1626;
    
    --border: #c7d2fe99;
    --border-dark: #404040;
    
    --main: #a855f7;
    --main-foreground: #0a0a0a;
    --text: #c7d2fe;
    --text-light: #c7d2fecc;
    --text-black: #0a0a0a ;
    --text-gray: #a3a3a3;
    
    --main-light: #c084fc;
    --blue: #22c55e;
    --blue-light:  #86efac;
    --blue-dark: #3b82f6;
    --yellow: #ffea71;
    --yellow-light:#fffefa;
    --red:       #ef4444;
    --red-light:  #ff8a8a;
    --white: #f5f5f5;
    
    --hero-image-opacity: 0.75;
    --hero-image-blur: 4px;
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", Arial, sans-serif !important;
    font-optical-sizing: auto;
}

ul {
    list-style: disc !important;
    list-style-position: inside !important;
}

ul li p {
    display: inline !important;
}

.transition-all {
    transition-duration: 300ms !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tooltip::before {
    background-color: var(--bg-1) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border) !important;
}

.module-title {
    font-size: 1.875rem;      /* text-3xl */
  line-height: 2.25rem;     /* leading for text-3xl */
  font-weight: 700;         /* font-bold */
  color: var(--main);       /* text-[var(--main)] */
  margin-bottom: 1rem;    /* mb-6 */
}

.swiper-wrapper {
    width: 100%;
    height: max-content !important;
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
}
.swiper-pagination-bullet {
    background: #4f46e5;
}

.store-product-popup-content {
    padding: 0 !important;
    max-width: 1032px;
    border-radius: 0.75rem;
    border: 1px solid var(--border-dark);
}

.popup, .modal::backdrop, .drawer-toggle:checked~.drawer-side>.drawer-overlay {
  --tw-bg-opacity: 0.1;
  --tw-backdrop-blur: blur(16px);
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
}

.basket-popup-content .popup-close {
  z-index: 9999;
  opacity: 1;
}

.store-product-options .popup-close {
    z-index: 9999;
}

.popup-scroll-cont {
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: fixed;
  overflow: auto;
  
}

.login-popup-content {
      width: 100%;
  max-width: 896px;
  overflow: hidden;
  padding: 96px 2rem 96px;
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  border-radius: 0.375rem;
  border: 1px solid #404040;
}

#image-overlay {
    opacity: var(--hero-image-opacity);
    backdrop-filter: blur(var(--hero-image-blur));
    -webkit-backdrop-filter: blur(var(--hero-image-blur));
}

/* ===================================================== */
/* JRaxion Minimal — clean design layer                   */
/* ===================================================== */
:root{
  --radius: 14px;
  --radius-sm: 10px;
  --surface: #100c17;          /* elevated panel */
  --surface-2: #17121f;
  --border-soft: rgba(255,255,255,.07);
  --border-hover: rgba(255,255,255,.16);
  --ring: rgba(136,110,250,.45);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.28);
  --maxw: 1200px;
}
html{ scroll-behavior:smooth; }
body{ background:var(--bg-0); color:var(--text-light); -webkit-font-smoothing:antialiased; }
.mc-container{ max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:1024px){ .mc-container{ padding-inline:2rem; } }

/* section rhythm */
.mc-eyebrow{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--main); font-weight:700; }
.mc-h2{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; color:var(--white); }
@media (min-width:1024px){ .mc-h2{ font-size:2.25rem; } }
.mc-sub{ color:var(--text-gray); font-size:1rem; }

/* buttons */
.mc-btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:var(--radius-sm); padding:.72rem 1.35rem; font-weight:600; font-size:.95rem; transition:transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease; cursor:pointer; }
.mc-btn-primary{ background:var(--main); color:#0a0612; box-shadow:0 6px 20px -6px var(--ring); }
.mc-btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.mc-btn-ghost{ border:1px solid var(--border-soft); color:var(--text); background:transparent; }
.mc-btn-ghost:hover{ border-color:var(--border-hover); color:#fff; }

/* cards */
.mc-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; overflow:hidden; }
.mc-card:hover{ transform:translateY(-4px); border-color:var(--border-hover); box-shadow:var(--shadow-soft); }

/* clean description typography — overrides any neon styling */
.descr h1,.descr h2,.descr h3,.descr h4{ background:none !important; -webkit-text-fill-color:currentColor !important; color:var(--white) !important; filter:none !important; text-shadow:none !important; font-weight:700; letter-spacing:-.01em; }
.descr h1{ font-size:1.6rem; margin:1.4rem 0 .6rem; }
.descr h2{ font-size:1.32rem; margin:1.2rem 0 .5rem; }
.descr h3{ font-size:1.14rem; margin:1rem 0 .45rem; }
.descr p{ line-height:1.8; color:var(--text-light); margin:.55rem 0; }
.descr ul{ list-style:none !important; padding-left:0 !important; margin:.6rem 0; }
.descr ul li{ position:relative; padding-left:1.5rem; margin:.4rem 0; list-style:none !important; }
.descr ul li::before{ content:""; position:absolute; left:.1rem; top:.6em; width:6px; height:6px; border-radius:2px; background:var(--main); }
.descr a{ color:var(--main); text-decoration:none; border-bottom:1px solid var(--ring); }
.descr a:hover{ color:#fff; }
.descr hr{ border:0; height:1px; background:var(--border-soft); margin:1.5rem 0; }
.descr img{ border-radius:var(--radius-sm); border:1px solid var(--border-soft); max-width:100%; height:auto; }


/* FAQ accordion */
.mc-faq summary{ list-style:none; }
.mc-faq summary::-webkit-details-marker{ display:none; }
.mc-faq summary i.fa-plus{ transition:transform .25s ease; }
.mc-faq[open] summary i.fa-plus{ transform:rotate(45deg); }
.mc-faq[open]{ border-color:var(--border-hover); }


/* ===================================================== */
/* JRaxion UX layer (search, motion, trust, sticky buy)   */
/* ===================================================== */

/* Search results */
.mc-sr{ display:flex; align-items:center; gap:.75rem; padding:.6rem; border-radius:.6rem; transition:background .15s ease; }
.mc-sr:hover{ background:var(--surface-2); }
.mc-sr-img{ width:3.5rem; height:2.5rem; border-radius:.4rem; object-fit:cover; flex-shrink:0; border:1px solid var(--border-soft); }
.mc-sr-txt{ flex:1; min-width:0; }
.mc-sr-name{ display:block; font-size:.875rem; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-sr-cat{ display:block; font-size:.75rem; color:var(--text-gray); }
.mc-sr-arr{ color:var(--text-gray); font-size:.75rem; }
.mc-sr-empty{ padding:2rem; text-align:center; font-size:.875rem; color:var(--text-gray); }

/* Sort select */
.mc-sort{ background:var(--surface); border:1px solid var(--border-soft); color:var(--text); border-radius:var(--radius-sm); padding:.5rem 2rem .5rem .9rem; font-size:.875rem; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; background-size:1rem; }
.mc-sort:hover{ border-color:var(--border-hover); }

/* Scroll-reveal */
html.mc-anim .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
html.mc-anim .reveal.reveal-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* Loading skeletons */
.mc-skel{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); }
.mc-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); animation:mc-shimmer 1.4s infinite; }
.mc-skel-img{ aspect-ratio:16/9; width:100%; }
.mc-skel-line{ height:.8rem; margin:.6rem 1rem; border-radius:.3rem; background:var(--surface-2); }
@keyframes mc-shimmer{ 100%{ transform:translateX(100%); } }

/* Trust badges */
.mc-trust{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mc-trust span{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-gray); border:1px solid var(--border-soft); background:var(--surface); border-radius:.6rem; padding:.45rem .8rem; }
.mc-trust span i{ color:var(--main); }

/* Testimonial card */
.mc-quote{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1.5rem; }
.mc-quote .stars{ color:#f5c451; font-size:.85rem; letter-spacing:1px; }

/* Sticky mobile buy bar */
.mc-buybar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:center; gap:1rem; padding:.7rem 1rem; background:var(--surface); border-top:1px solid var(--border-soft); transform:translateY(110%); transition:transform .3s ease; }
.mc-buybar.show{ transform:none; }
@media (min-width:1024px){ .mc-buybar{ display:none !important; } }

/* Micro-interactions */
.mc-btn:active{ transform:translateY(0) scale(.98); }
a, button{ outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--main); outline-offset:2px; border-radius:4px; }


/* ===== JRaxion UX layer — search results + back-to-top (v2) ===== */
.mc-sr{ display:flex; align-items:center; gap:.85rem; padding:.6rem .65rem; border-radius:.65rem; transition:background .15s ease, transform .15s ease; text-decoration:none; }
.mc-sr:hover{ background:var(--surface-2); }
.mc-sr-img{ width:3rem; height:3rem; border-radius:.5rem; object-fit:cover; flex:0 0 auto; background:var(--surface-2); }
.mc-sr-ic{ width:3rem; height:3rem; border-radius:.5rem; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--main); font-size:1.05rem; }
.mc-sr-body{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.mc-sr-name{ color:var(--white); font-weight:600; font-size:.92rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-sr-cat{ color:var(--text-gray); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; margin-top:.1rem; }
.mc-sr-price{ color:var(--main); font-weight:700; font-size:.9rem; flex:0 0 auto; margin-left:.5rem; white-space:nowrap; }
.mc-sr-arr{ color:var(--text-gray); font-size:.8rem; flex:0 0 auto; margin-left:.4rem; transition:transform .15s ease, color .15s ease; }
.mc-sr:hover .mc-sr-arr{ color:var(--main); transform:translateX(2px); }
.mc-sr-empty{ padding:1.75rem 1rem; text-align:center; color:var(--text-gray); font-size:.9rem; }
.mc-top{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:90; width:2.85rem; height:2.85rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; background:var(--main); color:var(--main-foreground,#ffffff); border:none; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:opacity .25s ease, transform .25s ease, filter .15s ease; }
.mc-top.mc-top-show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.mc-top:hover{ filter:brightness(1.08); }
.mc-top:active{ transform:translateY(0) scale(.94); }


/* ===== JRaxion product-page UX (v2): trust badges + sticky buy bar ===== */
.mc-trust{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mc-trust-item{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-gray); border:1px solid var(--border-soft); background:var(--surface); border-radius:.6rem; padding:.45rem .7rem; }
.mc-trust-item i{ color:var(--main); font-size:.9rem; }
.mc-trust-item span{ border:0; background:transparent; padding:0; border-radius:0; display:inline; color:var(--text-gray); }
.mc-buybar.mc-buybar-show{ transform:translateY(0); }
.mc-buybar-info{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.mc-buybar-name{ color:var(--white); font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-buybar-price{ color:var(--main); font-weight:700; font-size:.98rem; }
.mc-buybar #mc-buybar-btn{ flex:0 0 auto; white-space:nowrap; }
@media (min-width:1024px){ .mc-buybar{ display:none !important; } }


/* ===== JRaxion related-products cards (v2) ===== */
#mc-related[hidden]{ display:none; }
.mc-rel-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-sm,.7rem); overflow:hidden; text-decoration:none; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mc-rel-card:hover{ transform:translateY(-4px); border-color:var(--main); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.mc-rel-thumb{ display:block; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; }
.mc-rel-img{ width:100%; height:100%; object-fit:cover; display:block; }
span.mc-rel-img.mc-rel-ph{ display:flex; align-items:center; justify-content:center; color:var(--main); font-size:1.3rem; }
.mc-rel-name{ display:block; padding:.7rem .75rem .15rem; color:var(--white); font-weight:600; font-size:.9rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-rel-price{ display:block; padding:0 .75rem .8rem; color:var(--main); font-weight:700; font-size:.85rem; }


/* ===== JRaxion v2: skeleton card + testimonial internals ===== */
.mc-skel-card{ height:22rem; border-radius:var(--radius); }
.mc-quote{ margin:0; display:flex; flex-direction:column; }
.mc-quote-mark{ color:var(--main); font-size:1.4rem; opacity:.55; }
.mc-quote-text{ color:var(--text); font-size:.95rem; line-height:1.6; margin:.7rem 0 1.1rem; font-style:italic; flex:1 1 auto; }
.mc-quote-author{ display:flex; flex-direction:column; gap:.1rem; }
.mc-quote-name{ color:var(--white); font-weight:600; font-size:.9rem; }
.mc-quote-role{ color:var(--text-gray); font-size:.78rem; }


/* ===== JRaxion related-cards redesign (v3, Material/Google) ===== */
#mc-related .mc-h2{ font-weight:500; letter-spacing:-.01em; }
#mc-related-grid{ gap:1.1rem; }
.mc-rel-card{ background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s cubic-bezier(.2,0,0,1), box-shadow .2s ease, border-color .2s ease; }
.mc-rel-card:hover{ transform:translateY(-5px); border-color:var(--main); box-shadow:0 16px 34px rgba(0,0,0,.5); }
.mc-rel-thumb{ aspect-ratio:16/9; background:var(--surface); }
.mc-rel-img{ transition:transform .4s cubic-bezier(.2,0,0,1); }
.mc-rel-card:hover .mc-rel-img{ transform:scale(1.05); }
.mc-rel-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; padding:.85rem .95rem .25rem; color:var(--white); font-weight:500; font-size:.95rem; line-height:1.35; min-height:2.7em; }
.mc-rel-price{ padding:0 .95rem 1rem; color:var(--main); font-weight:700; font-size:.95rem; letter-spacing:.01em; }


/* ===== JRaxion Google/Material polish (v4): pill buttons + lighter headings ===== */
h1{ font-weight:500 !important; letter-spacing:-.02em; }
.mc-h2{ font-weight:500 !important; letter-spacing:-.012em; }
.mc-btn{ border-radius:9999px !important; font-weight:500; }
.add{ border-radius:9999px !important; }


/* ===== JRaxion fonts v5: Space Grotesk headings + Inter body ===== */
h1, h2, h3, .mc-h2, .mc-eyebrow { font-family: "Space Grotesk", "Inter", -apple-system, sans-serif !important; letter-spacing:-.015em; }
.mc-eyebrow { letter-spacing:.08em; }


/* ===== JRaxion top-bar (header) font: Space Grotesk ===== */
header { font-family: "Space Grotesk", "Inter", -apple-system, sans-serif !important; }
header a, header span, header button, header .my-link { font-family: "Space Grotesk", "Inter", -apple-system, sans-serif !important; }
header .my-link { font-weight:500; letter-spacing:.005em; }


/* === WASABI-VIBE: neon purple on black === */
html,body{ background-color:var(--bg-0) !important; }
.mc-btn-primary,.add{ box-shadow:0 6px 24px -6px rgba(168,85,247,.55) !important; transition:box-shadow .2s,filter .2s,transform .15s !important; }
.mc-btn-primary:hover,.add:hover{ box-shadow:0 0 0 1px rgba(192,132,252,.45), 0 10px 32px -4px rgba(168,85,247,.85) !important; filter:brightness(1.07); }
.mc-card:hover,.store-product:hover,.mc-rel-card:hover{ box-shadow:0 0 0 1px var(--main), 0 18px 46px -10px rgba(168,85,247,.42) !important; }
.mc-rel-price{ text-shadow:0 0 16px rgba(168,85,247,.45); }