/* ========================================================================== mysticnexus.css — loads after generic.css. Rebuilt store shell. Tokens from the Lovable site (src/index.css). ========================================================================== */ :root { --mn-bg: #0F0C12; --mn-card: #1A151E; --mn-deep: #14101A; --mn-border: #2E2735; --mn-muted: #26212C; --mn-text: #EDE9E9; --mn-dim: #8C8198; --mn-primary: #B60C61; --mn-lift: #CE0E6E; --mn-secondary: #E94999; --mn-accent: #6226D9; --mn-danger: #EF4343; --mn-live: #3FE07C; --mn-grad: linear-gradient(135deg, #B60C61, #6226D9); --mn-glow: 0 0 40px rgba(182, 12, 97, 0.15); --mn-r: 0.75rem; --mn-rlg: 1rem; --mn-w: 1240px; --color-primary: #B60C61; --color-primary-hover: #CE0E6E; --color-primary-text: #FFFFFF; --color-primary-text-hover: #FFFFFF; } /* --- Reset the Exo canvas ----------------------------------------------- */ /* Neutralise the bg-image config field without needing the panel cleared. */ html, html body.mn { --bg-image: none; } /* main.js reads --color-primary and --color-secondary off and passes them to Tebex.checkout.init(), so they must resolve on body, not just :root. */ html body.mn { --color-primary: #B60C61; --color-primary-hover: #CE0E6E; --color-primary-text: #FFFFFF; --color-primary-text-hover: #FFFFFF; --color-secondary: #6226D9; } html body.mn, html body.mn .site, html body.mn .site::before, html body.mn .site::after { background-image: none !important; } html body.mn { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.5; color: var(--mn-text); background-color: var(--mn-bg) !important; } html body.mn .site, html body.mn .mn-root { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; min-height: 100vh; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; border: 0; } html body.mn .mn-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 55% 40% at 18% 8%, rgba(182, 12, 97, 0.16) 0%, transparent 62%), radial-gradient(ellipse 50% 38% at 84% 22%, rgba(98, 38, 217, 0.15) 0%, transparent 62%), radial-gradient(ellipse 60% 45% at 50% 96%, rgba(98, 38, 217, 0.10) 0%, transparent 65%); } html body.mn .mn-aurora::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(233, 73, 153, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 73, 153, 0.028) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); } html body.mn ::selection { background: rgba(182, 12, 97, 0.3); color: #fff; } html body.mn h1, html body.mn h2, html body.mn h3, html body.mn h4, html body.mn h5, html body.mn h6 { font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } html body.mn a { color: var(--mn-secondary); text-decoration: none; } html body.mn a:hover { color: #F16FAF; } html body.mn :focus-visible { outline: 2px solid var(--mn-secondary); outline-offset: 3px; } .mn-skip { position: absolute; left: -9999px; } .mn-skip:focus { left: 0; top: 0; z-index: 100; padding: 0.75rem 1.25rem; background: var(--mn-primary); color: #fff; } /* --- Brand wordmark ----------------------------------------------------- */ .mn-brand { display: inline-flex; align-items: center; gap: 0.7rem; } .mn-brand__mark { position: relative; display: block; } .mn-brand__mark img { height: 40px; width: 40px; object-fit: contain; display: block; } .mn-brand--sm .mn-brand__mark img { height: 28px; width: 28px; border-radius: 6px; } .mn-brand__word { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.09em; } .mn-brand--sm .mn-brand__word { font-size: 0.9rem; } .mn-brand__a { background: var(--mn-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mn-brand__b { color: var(--mn-text); } /* --- Header ------------------------------------------------------------- */ html body.mn .mn-header { position: sticky; top: 0; z-index: 50; width: 100%; border-bottom: 1px solid rgba(46, 39, 53, 0.6); background: rgba(15, 12, 18, 0.9); backdrop-filter: blur(16px); padding: 0; } .mn-header__inner { width: 100%; max-width: var(--mn-w); margin: 0 auto; height: 64px; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .mn-topnav { display: none; align-items: center; gap: 0.15rem; } html body.mn .mn-topnav__link, html body.mn .mn-topnav__trigger { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; border: 0; background: none; cursor: pointer; border-radius: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 500; color: var(--mn-dim); transition: color 150ms ease, background-color 150ms ease; } html body.mn .mn-topnav__link:hover, html body.mn .mn-topnav__trigger:hover { color: var(--mn-text); } html body.mn .mn-topnav__link.is-active, html body.mn .mn-topnav__trigger.is-active { color: var(--mn-text); } .mn-chev { transition: transform 200ms ease; } .mn-topnav__trigger[aria-expanded="true"] .mn-chev { transform: rotate(180deg); } .mn-topnav__group { position: relative; } .mn-topnav__group::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } .mn-topnav__menu { position: absolute; left: 0; top: 100%; margin-top: 0.5rem; min-width: 268px; padding: 0.4rem; border: 1px solid rgba(46, 39, 53, 0.9); border-radius: 0.9rem; background: rgba(23, 18, 28, 0.97); backdrop-filter: blur(16px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms; } .mn-topnav__group:hover .mn-topnav__menu, .mn-topnav__group:focus-within .mn-topnav__menu, .mn-topnav__trigger[aria-expanded="true"] + .mn-topnav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .mn-topnav__group:hover .mn-chev { transform: rotate(180deg); } html body.mn [hidden] { display: none !important; } html body.mn .mn-topnav__item { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: 0.6rem; color: var(--mn-text); transition: background-color 150ms ease; } html body.mn .mn-topnav__item:hover { background: rgba(46, 39, 53, 0.6); } .mn-topnav__ico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 0.5rem; border: 1px solid rgba(182, 12, 97, 0.25); background: rgba(182, 12, 97, 0.1); color: var(--mn-secondary); font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 700; line-height: 1; overflow: hidden; } .mn-topnav__ico img { width: 100%; height: 100%; object-fit: contain; } .mn-topnav__copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } html body.mn .mn-topnav__name { color: var(--mn-text); font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } html body.mn .mn-topnav__desc { color: var(--mn-dim); font-size: 0.72rem; line-height: 1.2; white-space: nowrap; } .mn-topnav__go { margin-left: auto; color: var(--mn-dim); opacity: 0; transform: translateX(-3px); transition: opacity 160ms ease, transform 160ms ease; } html body.mn .mn-topnav__item:hover .mn-topnav__go { opacity: 1; transform: translateX(0); } html body.mn .mn-topnav__item.is-active .mn-topnav__name { color: var(--mn-secondary); } html body.mn .mn-topnav__item.is-active .mn-topnav__ico { border-color: rgba(233, 73, 153, 0.45); background: rgba(233, 73, 153, 0.16); } .mn-header__actions { display: flex; align-items: center; gap: 0.6rem; } .mn-ip { display: none; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border: 1px solid rgba(46, 39, 53, 0.6); border-radius: 999px; background: rgba(38, 33, 44, 0.3); color: var(--mn-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; cursor: pointer; transition: border-color 200ms ease, color 200ms ease; } .mn-ip:hover { border-color: rgba(182, 12, 97, 0.35); color: var(--mn-text); } .mn-ip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mn-live); animation: mnPulse 2s ease-in-out infinite; } @keyframes mnPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } html body.mn .mn-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.25rem; border-radius: 0.5rem; background: var(--mn-grad); color: #fff !important; font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: transform 200ms ease, box-shadow 200ms ease; } html body.mn .mn-login:hover { transform: scale(1.04); box-shadow: 0 0 20px rgba(182, 12, 97, 0.4); } html body.mn .mn-cart { min-height: 40px; padding: 0 1.1rem; border: 0; border-radius: 0.5rem; background: var(--mn-primary); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: background-color 200ms ease, box-shadow 200ms ease; } html body.mn .mn-cart:hover { background: var(--mn-lift); box-shadow: 0 0 20px rgba(182, 12, 97, 0.4); } html body.mn .mn-user { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.9rem; border: 1px solid var(--mn-border); border-radius: 0.5rem; background: rgba(26, 21, 30, 0.8); color: var(--mn-text) !important; font-size: 0.875rem; font-weight: 500; } html body.mn .mn-user:hover { border-color: rgba(182, 12, 97, 0.35); } .mn-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; } .mn-burger span { display: block; height: 2px; border-radius: 2px; background: var(--mn-text); transition: transform 200ms ease, opacity 200ms ease; } html body.mn .mn-salebanner { margin: 0; padding: 0.5rem 1rem; background: var(--mn-grad); color: #fff; text-align: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.9rem; } /* --- Mobile drawer (Exo's navigation.twig) ------------------------------ */ html body.mn .site-navigation { position: fixed; inset: 64px 0 auto 0; z-index: 45; max-height: calc(100vh - 64px); overflow-y: auto; padding: 1rem; border-bottom: 1px solid var(--mn-border); background: rgba(26, 21, 30, 0.97); backdrop-filter: blur(16px); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 200ms ease, transform 200ms ease, visibility 200ms; } html body.mn.show-navigation .site-navigation { opacity: 1; visibility: visible; transform: translateY(0); } html body.mn .site-navigation .navigation-list { list-style: none; margin: 0; padding: 0; } html body.mn .site-navigation .navigation-list li { position: relative; } html body.mn .site-navigation .navigation-list a { display: block; padding: 0.75rem 1rem; border-radius: var(--mn-r); color: var(--mn-text); font-size: 0.9rem; font-weight: 500; } html body.mn .site-navigation .navigation-list a:hover { background: rgba(38, 33, 44, 0.5); } html body.mn .site-navigation .navigation-list .link-active { color: var(--mn-secondary); background: rgba(233, 73, 153, 0.1); } html body.mn .site-navigation .navigation-list ul { list-style: none; margin: 0 0 0 0.75rem; padding: 0; border-left: 1px solid var(--mn-border); } html body.mn .site-navigation .toggle, html body.mn .site-navigation .close-navigation { color: var(--mn-dim); background: none; border: 0; cursor: pointer; } /* --- Page frame --------------------------------------------------------- */ html body.mn .mn-page { position: relative; z-index: 1; flex: 1 0 auto; width: 100%; max-width: var(--mn-w); margin: 0 auto; padding: 2rem 1rem 4rem; align-self: center; } .mn-h2 { font-size: 1.3rem; margin-bottom: 1.1rem; color: var(--mn-text); } html body.mn .mn-panel { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--mn-border); border-radius: var(--mn-rlg); background: linear-gradient(135deg, var(--mn-card) 0%, var(--mn-deep) 100%); color: var(--mn-dim); } html body.mn .text-content { color: var(--mn-dim); } html body.mn .text-content a { text-decoration: underline; text-underline-offset: 3px; } html body.mn .text-content img { border-radius: var(--mn-r); max-width: 100%; height: auto; } html body.mn .text-content h1, html body.mn .text-content h2, html body.mn .text-content h3, html body.mn .text-content strong { color: var(--mn-text); } /* --- Section headings --------------------------------------------------- */ .mn-secthead { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .mn-secthead .mn-h2 { margin: 0; white-space: nowrap; } .mn-secthead__rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--mn-border), transparent); } /* --- Hero --------------------------------------------------------------- */ .mn-hero { position: relative; padding: 3.5rem 1rem 3rem; margin-bottom: 3rem; text-align: center; border: 0; background: none; box-shadow: none; } .mn-hero__orb { position: absolute; top: -220px; left: 50%; width: min(1000px, 120%); height: 520px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 42% 55% at 50% 55%, rgba(98, 38, 217, 0.30) 0%, transparent 70%), radial-gradient(ellipse 60% 45% at 50% 62%, rgba(182, 12, 97, 0.20) 0%, transparent 72%); filter: blur(30px); } .mn-hero__body { position: relative; } .mn-ip--hero { margin: 0 auto 1.5rem; } .mn-ip__hint { padding-left: 0.4rem; margin-left: 0.15rem; border-left: 1px solid rgba(46, 39, 53, 0.9); color: rgba(140, 129, 152, 0.7); text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.08em; } .mn-hero__title { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 0.95; letter-spacing: 0.04em; } .mn-hero__a { background: var(--mn-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mn-hero__b { color: var(--mn-text); } .mn-hero__lede { max-width: 40ch; margin: 1rem auto 0; color: var(--mn-dim); font-size: 0.95rem; } .mn-hero__cta { margin-top: 1.75rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } html body.mn .mn-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.9rem; border: 1px solid transparent; border-radius: var(--mn-r); background: var(--mn-grad); color: #fff !important; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } html body.mn .mn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(182, 12, 97, 0.35); } html body.mn .mn-cta--ghost { background: rgba(38, 33, 44, 0.4); border-color: var(--mn-border); color: var(--mn-text) !important; } html body.mn .mn-cta--ghost:hover { border-color: rgba(233, 73, 153, 0.5); box-shadow: none; } .mn-hero__trust { list-style: none; margin: 2.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; } .mn-hero__trust li { position: relative; padding-left: 1.1rem; color: var(--mn-dim); font-size: 0.76rem; letter-spacing: 0.02em; } .mn-hero__trust li::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--mn-secondary); } /* --- Homepage columns --------------------------------------------------- */ .mn-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-bottom: 3.5rem; align-items: start; } .mn-cats { margin: 0; } .mn-cats__list { display: grid; gap: 0.6rem; } html body.mn .mn-cat { --tint: #B60C61; position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--mn-border); border-radius: var(--mn-r); background: linear-gradient(120deg, var(--mn-card) 0%, var(--mn-deep) 100%); overflow: hidden; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } html body.mn .mn-cat:nth-child(6n+1) { --tint: #B60C61; } html body.mn .mn-cat:nth-child(6n+2) { --tint: #6226D9; } html body.mn .mn-cat:nth-child(6n+3) { --tint: #00B4E0; } html body.mn .mn-cat:nth-child(6n+4) { --tint: #00BF88; } html body.mn .mn-cat:nth-child(6n+5) { --tint: #E94999; } html body.mn .mn-cat:nth-child(6n+6) { --tint: #FF9E47; } html body.mn .mn-cat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--tint) 14%, transparent), transparent 55%); pointer-events: none; } html body.mn .mn-cat .mn-cat__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2; background: var(--tint); opacity: 0.85; } html body.mn .mn-cat:hover { border-color: color-mix(in srgb, var(--tint) 50%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--tint) 14%, transparent); transform: translateX(2px); } html body.mn .mn-cat__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 2.4rem 0.85rem 1rem; color: var(--mn-text); } .mn-cat__art { display: grid; place-items: center; width: 34px; flex-shrink: 0; } .mn-cat__art img { max-height: 34px; width: auto; } .mn-cat__initial { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 0.5rem; border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent); background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint); font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; line-height: 1; } .mn-cat__name { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.15; } html body.mn .mn-cat .mn-cat__arrow { position: absolute; top: 50%; right: 0.9rem; margin-top: -8px; color: var(--mn-dim); opacity: 0.35; transition: opacity 200ms ease, transform 200ms ease, color 200ms ease; } html body.mn .mn-cat:hover .mn-cat__arrow { opacity: 1; color: var(--tint); transform: translateX(3px); } .mn-cat__subs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 1rem 0.85rem; } html body.mn .mn-cat__chip { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border: 1px solid var(--mn-border); border-radius: 999px; background: rgba(38, 33, 44, 0.45); color: var(--mn-dim); font-size: 0.7rem; line-height: 1.3; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease; } html body.mn .mn-cat__chip:hover { border-color: color-mix(in srgb, var(--tint) 55%, transparent); background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--mn-text); } /* --- Info + activity sections ------------------------------------------- */ .mn-info { margin: 0; } .mn-live { margin-bottom: 3.5rem; } html body.mn .mn-info .mn-panel { margin-top: 0; } html body.mn .mn-live .mn-widgets { margin-top: 0; } html body.mn .mn-info .text-content { font-size: 0.9rem; } html body.mn .mn-info .text-content h1, html body.mn .mn-info .text-content h2 { font-size: 1.15rem; } /* --- Category page ------------------------------------------------------ */ .mn-cathead { margin-bottom: 1.25rem; } .mn-cathead__title { font-size: clamp(1.9rem, 4vw, 2.6rem); background: var(--mn-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Category description */ .mn-note { display: flex; gap: 0.9rem; margin-bottom: 2rem; padding: 1rem 1.15rem; border: 1px solid var(--mn-border); border-left: 3px solid var(--mn-secondary); border-radius: var(--mn-r); background: linear-gradient(100deg, rgba(182, 12, 97, 0.09), rgba(26, 21, 30, 0.7) 55%); } .mn-note__icon { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(233, 73, 153, 0.12); color: var(--mn-secondary); } html body.mn .mn-note__body { font-size: 0.875rem; line-height: 1.6; } html body.mn .mn-note__body p, html body.mn .mn-note__body div { text-align: left !important; margin: 0 0 0.5rem; } html body.mn .mn-note__body > *:last-child { margin-bottom: 0; } html body.mn .mn-note__body strong, html body.mn .mn-note__body b { color: var(--mn-text); font-weight: 600; } html body.mn .mn-note__body a { color: var(--mn-secondary); } html body.mn .mn-note__body span, html body.mn .mn-note__body font { color: inherit !important; } html body.mn .mn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } /* Always grid, even when the category is set to list display. */ html body.mn .mn-products, html body.mn .store-products, html body.mn .store-products-list, html body.mn .store-products-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; padding: 0; list-style: none; } html body.mn .mn-none { grid-column: 1 / -1; padding: 3.5rem 1.5rem; text-align: center; color: var(--mn-dim); border: 1px dashed var(--mn-border); border-radius: var(--mn-rlg); } /* --- Package cards (Exo markup, restyled) ------------------------------- */ html body.mn .store-product { position: relative; display: flex; flex-direction: column; margin: 0; padding: 1.25rem; border: 1px solid var(--mn-border); border-radius: var(--mn-rlg); background: linear-gradient(135deg, var(--mn-card) 0%, var(--mn-deep) 100%); overflow: hidden; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } html body.mn .store-product::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(182, 12, 97, 0.15), transparent 50%); pointer-events: none; z-index: 0; } html body.mn .store-product > * { position: relative; z-index: 1; } html body.mn .store-product:hover { border-color: rgba(233, 73, 153, 0.5); box-shadow: var(--mn-glow); transform: translateY(-3px); } html body.mn .store-product .image-link { display: grid; place-items: center; padding: 0.5rem 0 1rem; } html body.mn .store-product .image { max-height: 112px; width: auto; filter: drop-shadow(0 6px 18px rgba(182, 12, 97, 0.35)); } html body.mn .store-product .image-default { width: 96px; height: 96px; border-radius: var(--mn-r); background: var(--mn-muted); } html body.mn .store-product .product-title { margin: 0 0 0.75rem; text-align: center; font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } html body.mn .store-product .product-title a { color: var(--mn-text); } html body.mn .store-product:hover .product-title, html body.mn .store-product:hover .product-title a, html body.mn .store-product .product-title a:hover { color: var(--mn-secondary) !important; } html body.mn .countdown { display: inline-block; margin-left: 0.4rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--mn-danger); color: #2A0505; font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 700; text-transform: none; letter-spacing: 0; } html body.mn .store-product-full { grid-column: 1 / -1; width: 100%; max-width: 620px; margin: 0 auto; padding: 1.75rem; } html body.mn .store-product-full:hover { transform: none; box-shadow: none; } html body.mn .store-product-full .image { max-height: 150px; } html body.mn .store-product-full .image-link { padding: 0 0 1rem; } html body.mn .store-product-full .product-title { font-size: clamp(1.5rem, 3.5vw, 2rem); } /* Long perk lists scroll instead of stretching the modal */ html body.mn .store-product-full .descr { max-height: 42vh; overflow-y: auto; padding-right: 0.75rem; margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.65; text-align: left; } html body.mn .store-product-full .descr::-webkit-scrollbar { width: 6px; } html body.mn .store-product-full .descr::-webkit-scrollbar-track { background: var(--mn-muted); border-radius: 999px; } html body.mn .store-product-full .descr::-webkit-scrollbar-thumb { background: var(--mn-border); border-radius: 999px; } html body.mn .store-product-full .descr::-webkit-scrollbar-thumb:hover { background: var(--mn-secondary); } html body.mn .store-product-full .descr ul { margin: 0 0 1rem; padding-left: 1.1rem; } html body.mn .store-product-full .descr li { margin-bottom: 0.3rem; } /* Popup mode: never let the shell stretch to fill the modal */ html body.mn .site > .site-content, html body.mn .store-product-full .product-actions { flex: 0 0 auto; } /* --- Price and actions -------------------------------------------------- */ html body.mn .product-actions { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; } html body.mn .product-actions .price { margin: 0 0 0.35rem; text-align: center; color: var(--mn-dim); font-size: 0.85rem; } html body.mn .product-actions .price strong { font-family: 'Rajdhani', sans-serif; font-size: 1.55rem; font-weight: 700; color: var(--mn-secondary); } html body.mn .product-actions .price del.discount { margin-right: 0.5rem; color: var(--mn-dim); opacity: 0.65; } html body.mn .product-actions .price del.discount strong { font-size: 0.95rem; font-weight: 500; color: var(--mn-dim); } html body.mn .store-product-full .product-actions .price strong { font-size: 2.1rem; } html body.mn .product-actions .add, html body.mn .product-actions .subscribe, html body.mn .product-actions .open-basket-cta, html body.mn .product-actions .gift { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 46px; min-height: 46px; max-height: 46px; padding: 0 1rem; border-radius: var(--mn-r); font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease; } html body.mn .product-actions .btn-primary { border: 0; background: var(--mn-primary); color: #fff; } html body.mn .product-actions .btn-primary:hover:not(button[disabled]) { background: var(--mn-lift); box-shadow: 0 0 22px rgba(182, 12, 97, 0.4); } html body.mn .product-actions .subscribe { background: var(--mn-grad); border: 0; color: #fff; } html body.mn .product-actions .subscribe:hover:not(button[disabled]) { filter: brightness(1.12); box-shadow: 0 0 22px rgba(98, 38, 217, 0.35); } html body.mn .product-actions .btn-secondary { background: transparent; border: 1px solid var(--mn-border); color: var(--mn-text); } html body.mn .product-actions .btn-secondary:hover:not(button[disabled]) { border-color: var(--mn-secondary); color: var(--mn-secondary); } html body.mn .product-actions .half { width: calc(50% - 0.25rem); } html body.mn .product-actions .wide { width: 100%; } html body.mn .product-actions button[disabled] { background: var(--mn-muted) !important; border-color: var(--mn-border) !important; color: var(--mn-dim) !important; box-shadow: none !important; cursor: not-allowed; } html body.mn .quantity-field { flex: 0 0 auto; display: flex; align-items: center; height: 46px; min-height: 46px; max-height: 46px; border: 1px solid var(--mn-border); border-radius: var(--mn-r); background: var(--mn-muted); overflow: hidden; } html body.mn .quantity-field .adjust { flex: 0 0 auto; width: 42px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--mn-secondary); font-size: 1.15rem; font-weight: 700; line-height: 1; } html body.mn .quantity-field .open-basket { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: none; cursor: pointer; color: var(--mn-dim); font-size: 0.78rem; white-space: nowrap; } html body.mn .quantity-field .quantity { flex: 0 0 auto; width: 42px; height: 44px; border: 0; background: transparent; color: var(--mn-text); text-align: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; -moz-appearance: textfield; } html body.mn .quantity-field .quantity::-webkit-outer-spin-button, html body.mn .quantity-field .quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } html body.mn .product-actions .gift { background: transparent; border: 1px solid transparent; color: var(--mn-dim); font-size: 0.8rem; min-height: 36px; } html body.mn .product-actions .gift:hover { color: var(--mn-secondary); } /* --- Sidebar widgets ---------------------------------------------------- */ html body.mn .mn-widgets, html body.mn .store-sidebar { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 3rem; padding: 0; background: none; border: 0; } html body.mn .mn-widgets > *, html body.mn .store-sidebar > *, html body.mn .mn-widgets .widget, html body.mn .store-sidebar .widget { margin: 0; padding: 1.25rem; border: 1px solid var(--mn-border); border-radius: var(--mn-rlg); background: linear-gradient(135deg, var(--mn-card) 0%, var(--mn-deep) 100%); } html body.mn .mn-widgets > * > *:first-child { margin-top: 0; } html body.mn .mn-widgets p { margin: 0 0 0.6rem; color: var(--mn-dim); font-size: 0.85rem; } html body.mn .mn-widgets ul { display: grid; gap: 0.75rem; } html body.mn .mn-widgets li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.82rem; } html body.mn .mn-widgets li img { width: 30px; height: 30px; flex-shrink: 0; border-radius: 5px; } html body.mn .mn-widgets li h1, html body.mn .mn-widgets li h2, html body.mn .mn-widgets li h3, html body.mn .mn-widgets li h4, html body.mn .mn-widgets li h5, html body.mn .mn-widgets li h6 { margin: 0; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--mn-text); } html body.mn .mn-widgets li a { color: var(--mn-text); } html body.mn .mn-widgets li a:hover { color: var(--mn-secondary); } /* Progress bars (community goal / monthly goal) */ html body.mn .mn-widgets progress, html body.mn .mn-widgets .progress, html body.mn .mn-widgets .bar, html body.mn .mn-widgets .goal-bar { display: block; width: 100%; height: 8px; margin: 0 0 0.6rem; border: 0; border-radius: 999px; background: var(--mn-muted); overflow: hidden; appearance: none; } html body.mn .mn-widgets progress::-webkit-progress-bar { background: var(--mn-muted); border-radius: 999px; } html body.mn .mn-widgets progress::-webkit-progress-value { background: var(--mn-grad); border-radius: 999px; } html body.mn .mn-widgets progress::-moz-progress-bar { background: var(--mn-grad); border-radius: 999px; } html body.mn .mn-widgets .progress > *, html body.mn .mn-widgets .bar > * { display: block; height: 100%; background: var(--mn-grad); border-radius: 999px; } /* Featured package widget sits inside a card already */ html body.mn .mn-widgets .store-product { border: 0; background: none; padding: 0; } html body.mn .mn-widgets .store-product::before { display: none; } html body.mn .mn-widgets .store-product:hover { transform: none; box-shadow: none; } html body.mn .widget h1, html body.mn .widget h2, html body.mn .widget h3, html body.mn .widget h4, html body.mn .widget h5, html body.mn .widget h6 { margin-bottom: 0.9rem; font-size: 0.95rem; color: var(--mn-secondary); } html body.mn .widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } html body.mn .widget img { border-radius: 4px; image-rendering: pixelated; } /* --- Footer ------------------------------------------------------------- */ html body.mn .mn-footer { position: relative; z-index: 1; flex-shrink: 0; margin-top: auto; border-top: 1px solid rgba(46, 39, 53, 0.5); background: rgba(15, 12, 18, 0.6); padding: 0; } .mn-footer__rule { position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(to right, transparent, rgba(182, 12, 97, 0.35), transparent); } .mn-footer__inner { max-width: var(--mn-w); margin: 0 auto; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } @media (min-width: 900px) { .mn-footer__inner { flex-direction: row; justify-content: space-between; } } .mn-footer__brand { display: flex; align-items: center; gap: 1rem; } .mn-footer__brand .mn-ip { display: inline-flex; } .mn-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; } html body.mn .mn-footer__links a { color: rgba(140, 129, 152, 0.75); font-size: 0.78rem; } html body.mn .mn-footer__links a:hover { color: var(--mn-secondary); } .mn-footer__meta { display: flex; align-items: center; gap: 0.9rem; } html body.mn .mn-discord { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border: 1px solid rgba(46, 39, 53, 0.6); border-radius: 999px; background: rgba(38, 33, 44, 0.25); color: var(--mn-dim); font-size: 0.72rem; transition: border-color 200ms ease, color 200ms ease; } html body.mn .mn-discord:hover { border-color: rgba(88, 101, 242, 0.4); color: #7C89F5; } .mn-discord svg { width: 12px; height: 12px; } html body.mn .mn-pay { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } html body.mn .mn-pay img { height: 16px; width: auto; opacity: 0.45; transition: opacity 200ms ease; } html body.mn .mn-pay li:hover img { opacity: 1; } .mn-copy { font-size: 0.68rem; color: rgba(140, 129, 152, 0.5); } .mn-footer__tebex { max-width: var(--mn-w); margin: 0 auto; padding: 0 1rem 1.5rem; text-align: center; font-size: 0.68rem; color: rgba(140, 129, 152, 0.45); } /* --- Breakpoints -------------------------------------------------------- */ @media (min-width: 640px) { .mn-ip { display: inline-flex; } } @media (min-width: 1024px) { .mn-topnav { display: flex; } .mn-burger { display: none; } html body.mn .site-navigation { display: none; } html body.mn .mn-page { padding: 2.5rem 1.5rem 4rem; } html body.mn .mn-layout { grid-template-columns: minmax(0, 1fr) 290px; } html body.mn .mn-layout .mn-widgets { grid-template-columns: minmax(0, 1fr); margin-top: 0; } .mn-cols { grid-template-columns: 360px minmax(0, 1fr); gap: 2.5rem; } } @media (max-width: 640px) { .mn-hero { padding: 2.5rem 0.5rem 2rem; } html body.mn .mn-products, html body.mn .store-products { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 0.75rem; } html body.mn .store-product { padding: 0.9rem; } } /* --- Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html body.mn *, html body.mn *::before, html body.mn *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html body.mn .store-product:hover, html body.mn .mn-cat:hover, html body.mn .mn-cta:hover { transform: none; } } /* ========================================================================== Popups, basket, toasts and forms Selectors taken from main.js ========================================================================== */ html body.mn { --fade-duration: 220ms; } html.no-scroll { overflow: hidden; } /* --- Popup shell -------------------------------------------------------- */ html body.mn .popup { position: fixed; inset: 0; z-index: 200; background: rgba(8, 6, 10, 0.72); backdrop-filter: blur(6px); opacity: 1; transition: opacity var(--fade-duration) ease; } html body.mn .popup[hidden] { display: block !important; opacity: 0; pointer-events: none; } html body.mn .popup-scroll-cont { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; overflow-y: auto; overscroll-behavior: contain; } html body.mn .popup-content { position: relative; width: 100%; max-width: 620px; border: 1px solid var(--mn-border); border-radius: var(--mn-rlg); background: linear-gradient(150deg, #1E1724 0%, var(--mn-deep) 60%, #120E17 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), var(--mn-glow); transition: translate 180ms ease; } html body.mn .popup-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: rgba(38, 33, 44, 0.7); color: transparent; font-size: 0; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease; } html body.mn .popup-close::before, html body.mn .popup-close::after { content: none !important; } html body.mn .popup-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8198' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } html body.mn .popup-close:hover { border-color: var(--mn-border); background-color: rgba(38, 33, 44, 1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E94999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } html body.mn .popup-loading .popup-content { min-height: 220px; background: linear-gradient(150deg, #1E1724, var(--mn-deep)); } /* Product quick-view sits inside .popup-content, so kill the card treatment */ html body.mn .store-product-popup-content { padding: 2rem 1.75rem 1.75rem; } html body.mn .store-product-popup-content::before { display: none; } html body.mn .store-product-popup-content:hover { transform: none; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), var(--mn-glow); border-color: var(--mn-border); } html body.mn .store-product-popup-content .product-title { margin-top: 0.5rem; } /* --- Basket ------------------------------------------------------------- */ html body.mn .basket-popup .popup-scroll-cont { align-items: stretch; justify-content: flex-end; padding: 0; } html body.mn .basket-popup-content { display: flex; flex-direction: column; width: 100%; max-width: 420px; min-height: 100%; border: 0; border-left: 1px solid var(--mn-border); border-radius: 0; background: linear-gradient(180deg, #191320 0%, var(--mn-bg) 55%); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6); } html body.mn .basket-header { display: flex; align-items: center; gap: 0.6rem; padding: 1.25rem 3.25rem 1.25rem 1.25rem; border-bottom: 1px solid var(--mn-border); font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mn-text); } html body.mn .basket-header svg { color: var(--mn-secondary); } html body.mn .basket-header img { width: 26px; height: 26px; border-radius: 5px; } html body.mn .basket-second-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--mn-border); background: rgba(38, 33, 44, 0.25); color: var(--mn-dim); font-size: 0.82rem; } html body.mn .basket-second-header strong, html body.mn .basket-second-header b { color: var(--mn-secondary); font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; } html body.mn .basket-content { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.25rem; overflow-y: auto; } html body.mn .basket-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--mn-border); border-radius: var(--mn-r); background: linear-gradient(120deg, var(--mn-card) 0%, var(--mn-deep) 100%); } html body.mn .basket-item > *:first-child { flex: 1 1 auto; min-width: 0; } html body.mn .basket-item .name, html body.mn .basket-item h3, html body.mn .basket-item h4 { margin: 0 0 0.15rem; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mn-text); } html body.mn .basket-item .price, html body.mn .basket-item p { margin: 0; color: var(--mn-secondary); font-size: 0.9rem; font-weight: 600; } html body.mn .basket-item .quantity-field { flex: 0 0 auto; } /* Identical treatment to the popup close button. */ html body.mn .basket-item a.remove { flex: 0 0 auto; display: block; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 50%; color: transparent; font-size: 0; text-decoration: none; background-color: rgba(38, 33, 44, 0.7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8198' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; transition: border-color 180ms ease, background-color 180ms ease; } html body.mn .basket-item a.remove:hover { border-color: var(--mn-border); background-color: rgba(38, 33, 44, 1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E94999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } html body.mn .basket-item a.remove::before, html body.mn .basket-item a.remove::after { content: none !important; display: none !important; } html body.mn .basket-item a.remove > *, html body.mn .basket-item a.remove svg, html body.mn .basket-item a.remove img, html body.mn .basket-item a.remove i { display: none !important; } html body.mn .basket-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 4rem 1.5rem; color: var(--mn-dim); text-align: center; font-size: 0.9rem; } html body.mn .basket-empty::before { content: ''; width: 56px; height: 56px; border: 1px solid var(--mn-border); border-radius: 1rem; background: radial-gradient(circle at 50% 45%, rgba(182, 12, 97, 0.18), transparent 70%), var(--mn-muted); -webkit-mask: none; } html body.mn .basket-redeem { padding: 1rem 1.25rem; border-top: 1px solid var(--mn-border); } html body.mn .basket-redeem .redeemed { color: var(--mn-dim); font-size: 0.8rem; } html body.mn .basket-checkout { flex: 0 0 auto; position: sticky; bottom: 0; padding: 1.25rem; border-top: 1px solid var(--mn-border); background: rgba(15, 12, 18, 0.95); backdrop-filter: blur(12px); } html body.mn .basket-checkout .total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.9rem; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mn-dim); } html body.mn .basket-checkout .total strong, html body.mn .basket-checkout .total b, html body.mn .basket-checkout .total span:last-child { font-size: 1.6rem; color: var(--mn-secondary); } html body.mn button.checkout { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: var(--mn-r); background: var(--mn-grad); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer; transition: filter 200ms ease, box-shadow 200ms ease; } html body.mn button.checkout:hover:not([disabled]) { filter: brightness(1.12); box-shadow: 0 8px 28px rgba(182, 12, 97, 0.35); } html body.mn button.checkout[disabled] { background: var(--mn-muted); color: var(--mn-dim); cursor: not-allowed; } html body.mn .updating { opacity: 0.55; pointer-events: none; } /* --- Forms (login, gift, options) --------------------------------------- */ html body.mn .store-form { padding: 2rem 1.75rem 1.75rem; } html body.mn .store-form h2 { margin-bottom: 1.1rem; font-size: 1.35rem; color: var(--mn-text); } html body.mn .form-control, html body.mn .store-form input[type="text"], html body.mn .store-form input[type="email"], html body.mn .store-form input[type="number"], html body.mn .store-form select, html body.mn .store-form textarea { width: 100%; min-height: 46px; padding: 0.65rem 0.9rem; border: 1px solid var(--mn-border); border-radius: var(--mn-r); background: rgba(38, 33, 44, 0.5); color: var(--mn-text); font-family: 'Inter', sans-serif; font-size: 0.92rem; transition: border-color 180ms ease, box-shadow 180ms ease; } html body.mn .form-control::placeholder { color: rgba(140, 129, 152, 0.7); } html body.mn .form-control:focus, html body.mn .store-form input:focus, html body.mn .store-form select:focus, html body.mn .store-form textarea:focus { outline: none; border-color: var(--mn-secondary); box-shadow: 0 0 0 3px rgba(233, 73, 153, 0.15); } html body.mn .store-form label { display: block; margin-bottom: 0.35rem; color: var(--mn-dim); font-size: 0.8rem; font-weight: 500; } html body.mn .store-form .actions { margin-top: 1.25rem; } html body.mn .store-form .actions .btn-primary { width: 100%; height: 48px; border: 0; border-radius: var(--mn-r); background: var(--mn-primary); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } html body.mn .store-form .actions .btn-primary:hover { background: var(--mn-lift); } html body.mn .store-product-options { padding: 2rem 1.75rem 1.75rem; } /* --- Toasts ------------------------------------------------------------- */ html body.mn .toaster { position: fixed !important; inset: auto 1rem 1rem auto !important; transform: none !important; translate: none !important; z-index: 400 !important; display: flex !important; flex-direction: column; align-items: flex-end; gap: 0.5rem; width: auto !important; max-width: min(400px, calc(100vw - 2rem)) !important; margin: 0 !important; padding: 0 !important; pointer-events: none; } html body.mn .toast { position: relative; pointer-events: auto; width: 100%; display: flex !important; align-items: center; gap: 0.75rem; margin: 0; padding: 0.95rem 3rem 0.95rem 1.1rem; border: 1px solid var(--mn-border); border-left: 3px solid var(--mn-secondary); border-radius: var(--mn-r); background: rgba(26, 21, 30, 0.98); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); color: var(--mn-text); font-size: 0.875rem; line-height: 1.45; opacity: 1; transition: opacity var(--fade-duration) ease, translate var(--fade-duration) ease; } html body.mn .toast[hidden] { display: flex !important; opacity: 0; translate: 0 8px; pointer-events: none; } html body.mn .toast p { margin: 0; } html body.mn .toast-success { border-left-color: var(--mn-live); } html body.mn .toast-error { border-left-color: var(--mn-danger); } html body.mn .toast-warning { border-left-color: #FF9E47; } html body.mn .toast-close { position: absolute; top: 50%; right: 0.55rem; width: 30px; height: 30px; margin-top: -15px; border-radius: 8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: transparent; font-size: 0; cursor: pointer; } html body.mn .toast-close::before, html body.mn .toast-close::after { content: none !important; } html body.mn .toast-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8198' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; } html body.mn .toast-close:hover { background-color: rgba(46, 39, 53, 0.7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E94999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } /* --- Small screens ------------------------------------------------------ */ @media (max-width: 620px) { html body.mn .basket-popup-content { max-width: 100%; border-left: 0; } html body.mn .popup-scroll-cont { padding: 1.5rem 0.75rem; } html body.mn .store-product-popup-content { padding: 1.5rem 1.15rem 1.25rem; } html body.mn .toaster { left: 1rem; right: 1rem; max-width: none; } } /* ========================================================================== Standalone login page + unstyled buttons ========================================================================== */ html body.mn .mn-page .store-form { width: 100%; max-width: 460px; margin: 3rem auto; padding: 2rem 1.75rem; border: 1px solid var(--mn-border); border-radius: var(--mn-rlg); background: linear-gradient(150deg, #1E1724 0%, var(--mn-deep) 60%, #120E17 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), var(--mn-glow); } html body.mn .mn-page .store-form h1, html body.mn .mn-page .store-form h2 { margin-bottom: 1.25rem; text-align: center; font-size: 1.4rem; background: var(--mn-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Any button inside a store form or page form that has no styling of its own */ html body.mn .store-form button, html body.mn .store-form input[type="submit"], html body.mn .mn-page form button, html body.mn .mn-page form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 1rem; padding: 0 1.5rem; border: 0; border-radius: var(--mn-r); background: var(--mn-grad); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: filter 200ms ease, box-shadow 200ms ease; } html body.mn .store-form button:hover, html body.mn .mn-page form button:hover { filter: brightness(1.12); box-shadow: 0 8px 24px rgba(182, 12, 97, 0.35); } /* The close button inside a popup form must not inherit the block button look */ html body.mn .store-form .popup-close, html body.mn .popup-content .popup-close { width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%; /* background-color only. The shorthand would wipe background-image. */ background-color: rgba(38, 33, 44, 0.7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8198' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; } html body.mn .store-form .popup-close:hover, html body.mn .popup-content .popup-close:hover { filter: none; box-shadow: none; background-color: rgba(38, 33, 44, 1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E94999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important; } /* ========================================================================== Mobile ========================================================================== */ @media (max-width: 1023px) { html body.mn .mn-header__inner { gap: 0.5rem; padding: 0 0.75rem; } html body.mn .mn-brand { gap: 0.5rem; } html body.mn .mn-brand__mark img { height: 32px; width: 32px; } html body.mn .mn-brand__word { font-size: 0.95rem; letter-spacing: 0.06em; } html body.mn .mn-header__actions { gap: 0.4rem; } html body.mn .mn-cart, html body.mn .mn-login { height: 38px; min-height: 38px; padding: 0 0.85rem; font-size: 0.8rem; } html body.mn .mn-user { height: 38px; min-height: 38px; padding: 0 0.6rem; font-size: 0.78rem; } html body.mn .mn-user .text-inner { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 767px) { html body.mn .mn-page { padding: 1.5rem 0.85rem 3rem; } html body.mn .mn-hero { padding: 2.25rem 0.25rem 1.75rem; margin-bottom: 2.25rem; } html body.mn .mn-hero__title { font-size: clamp(2rem, 11vw, 3rem); } html body.mn .mn-hero__lede { font-size: 0.875rem; padding: 0 0.5rem; } html body.mn .mn-hero__cta { flex-direction: column; align-items: stretch; padding: 0 0.5rem; } html body.mn .mn-hero__cta .mn-cta { width: 100%; justify-content: center; } html body.mn .mn-hero__trust { gap: 0.4rem 1.1rem; margin-top: 1.5rem; } html body.mn .mn-hero__trust li { font-size: 0.7rem; } html body.mn .mn-cols { gap: 2rem; margin-bottom: 2.25rem; } html body.mn .mn-secthead { gap: 0.75rem; margin-bottom: 0.9rem; } html body.mn .mn-h2 { font-size: 1.05rem; } html body.mn .mn-cathead__title { font-size: 1.65rem; } html body.mn .mn-note { flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; } html body.mn .mn-products, html body.mn .store-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } html body.mn .store-product { padding: 0.85rem; } html body.mn .store-product .image { max-height: 76px; } html body.mn .store-product .product-title { font-size: 0.92rem; margin-bottom: 0.5rem; } html body.mn .product-actions .price strong { font-size: 1.2rem; } html body.mn .product-actions .add, html body.mn .product-actions .subscribe, html body.mn .product-actions .open-basket-cta { height: 42px; min-height: 42px; max-height: 42px; padding: 0 0.5rem; font-size: 0.8rem; } html body.mn .product-actions .half { width: 100%; } html body.mn .quantity-field { height: 42px; min-height: 42px; max-height: 42px; } html body.mn .quantity-field .adjust { width: 34px; height: 40px; } html body.mn .quantity-field .quantity { width: 34px; height: 40px; } html body.mn .quantity-field .open-basket { font-size: 0.68rem; } html body.mn .mn-widgets, html body.mn .store-sidebar { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; } html body.mn .mn-footer__inner { gap: 1rem; padding: 1.25rem 0.85rem; } html body.mn .mn-footer__brand { flex-direction: column; gap: 0.6rem; } html body.mn .mn-footer__meta { flex-wrap: wrap; justify-content: center; gap: 0.6rem; } html body.mn .mn-footer__links { gap: 0.2rem 0.75rem; } html body.mn .mn-page .store-form { margin: 1.5rem auto; padding: 1.5rem 1.15rem; } } @media (max-width: 400px) { html body.mn .mn-brand__word { display: none; } html body.mn .mn-products, html body.mn .store-products { grid-template-columns: minmax(0, 1fr); } html body.mn .store-product .image { max-height: 96px; } } /* Touch targets and tap highlight */ @media (pointer: coarse) { html body.mn a, html body.mn button { -webkit-tap-highlight-color: rgba(233, 73, 153, 0.15); } html body.mn .mn-burger { width: 44px; height: 44px; } } /* ========================================================================== Enhancements: live status, filter toolbar, basket badge ========================================================================== */ /* --- Live server status -------------------------------------------------- */ html body.mn .mn-ip__dot { background: var(--mn-dim); animation: none; } html body.mn .mn-ip.is-online .mn-ip__dot { background: var(--mn-live); animation: mnPulse 2s ease-in-out infinite; } html body.mn .mn-ip.is-offline .mn-ip__dot { background: var(--mn-danger); animation: none; } html body.mn .mn-ip__status { padding-left: 0.45rem; margin-left: 0.2rem; border-left: 1px solid rgba(46, 39, 53, 0.9); color: var(--mn-dim); font-size: 0.65rem; letter-spacing: 0.04em; } html body.mn .mn-ip.is-online .mn-ip__status { color: var(--mn-live); } html body.mn .mn-ip.is-offline .mn-ip__status { color: var(--mn-danger); } /* --- Filter and sort toolbar --------------------------------------------- */ .mn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.6rem 0.75rem; border: 1px solid var(--mn-border); border-radius: var(--mn-r); background: linear-gradient(120deg, rgba(26, 21, 30, 0.8), rgba(20, 16, 26, 0.8)); transition: border-color 200ms ease; } .mn-toolbar.is-filtering { border-color: rgba(233, 73, 153, 0.45); } .mn-toolbar__field { position: relative; flex: 1 1 240px; display: flex; align-items: center; } .mn-toolbar__icon { position: absolute; left: 0.7rem; color: var(--mn-dim); pointer-events: none; } html body.mn .mn-toolbar__search { width: 100%; height: 40px; padding: 0 4.5rem 0 2.35rem; border: 1px solid transparent; border-radius: 0.55rem; background: rgba(38, 33, 44, 0.55); color: var(--mn-text); font-family: 'Inter', sans-serif; font-size: 0.875rem; transition: border-color 180ms ease, box-shadow 180ms ease; } html body.mn .mn-toolbar__search::placeholder { color: rgba(140, 129, 152, 0.75); } html body.mn .mn-toolbar__search:focus { outline: none; border-color: var(--mn-secondary); box-shadow: 0 0 0 3px rgba(233, 73, 153, 0.14); } html body.mn .mn-toolbar__search::-webkit-search-cancel-button { display: none; } html body.mn .mn-toolbar__clear { position: absolute; right: 2.4rem; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(46, 39, 53, 0.9); color: transparent; font-size: 0; cursor: pointer; } html body.mn .mn-toolbar__clear::before, html body.mn .mn-toolbar__clear::after { content: none !important; } html body.mn .mn-toolbar__clear { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C8198' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; } html body.mn .mn-toolbar__clear:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E94999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } .mn-toolbar__kbd { position: absolute; right: 0.55rem; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--mn-border); border-radius: 5px; background: rgba(38, 33, 44, 0.8); color: var(--mn-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.65rem; pointer-events: none; } .mn-toolbar__right { display: flex; align-items: center; gap: 0.75rem; } .mn-toolbar__count { color: var(--mn-dim); font-size: 0.75rem; white-space: nowrap; } html body.mn .mn-toolbar__sort { height: 40px; padding: 0 2rem 0 0.75rem; border: 1px solid var(--mn-border); border-radius: 0.55rem; background-color: rgba(38, 33, 44, 0.55); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%238C8198' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; color: var(--mn-text); font-family: 'Inter', sans-serif; font-size: 0.82rem; cursor: pointer; appearance: none; -webkit-appearance: none; } html body.mn .mn-toolbar__sort:focus { outline: none; border-color: var(--mn-secondary); box-shadow: 0 0 0 3px rgba(233, 73, 153, 0.14); } html body.mn .mn-toolbar__sort option { background: var(--mn-card); color: var(--mn-text); } /* Sorting reorders via flex order, so the grid needs to honour it */ html body.mn .mn-products { display: grid; } html body.mn .mn-products > .store-product { transition: opacity 180ms ease; } /* --- Basket badge -------------------------------------------------------- */ html body.mn .mn-cart { position: relative; gap: 0.5rem; } /* Recessed chip inside the button. Darker than the button rather than lighter, so it reads as part of it instead of sitting on top. */ html body.mn .mn-cart__count { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.26); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700; line-height: 1; animation: mnFade 240ms ease; } @keyframes mnFade { from { opacity: 0; transform: translateX(-3px); } to { opacity: 1; transform: translateX(0); } } @keyframes mnPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } } @media (max-width: 767px) { .mn-toolbar { padding: 0.55rem; gap: 0.5rem; } .mn-toolbar__field { flex: 1 1 100%; } .mn-toolbar__kbd { display: none; } html body.mn .mn-toolbar__search { padding-right: 2.4rem; } html body.mn .mn-toolbar__clear { right: 0.55rem; } .mn-toolbar__right { flex: 1 1 100%; justify-content: space-between; } html body.mn .mn-toolbar__sort { flex: 0 1 auto; } } /* --- Account button with skin head --------------------------------------- */ html body.mn .mn-user { gap: 0.55rem; padding-left: 0.5rem; } html body.mn .mn-user__head { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 5px; image-rendering: pixelated; background: var(--mn-muted); box-shadow: 0 0 0 1px rgba(46, 39, 53, 0.9); transition: box-shadow 200ms ease; } html body.mn .mn-user:hover .mn-user__head { box-shadow: 0 0 0 1px rgba(233, 73, 153, 0.55), 0 0 14px rgba(182, 12, 97, 0.35); } /* Swap the name for "Log out" on hover instead of showing both */ html body.mn .mn-user .text-inner { position: relative; display: grid; align-items: center; line-height: 1; } html body.mn .mn-user .text, html body.mn .mn-user .text-hover { grid-area: 1 / 1; white-space: nowrap; transition: opacity 160ms ease; } html body.mn .mn-user .text-hover { opacity: 0; color: var(--mn-secondary); } html body.mn .mn-user:hover .text { opacity: 0; } html body.mn .mn-user:hover .text-hover { opacity: 1; } /* --- Injected platform footer bar ---------------------------------------- */ /* Hidden by class name only. A blanket sibling rule cannot be used here: Tebex.checkout.launch() injects its overlay as a body child, and hiding every sibling of .site silently killed the checkout. */ html body.mn .tebex-footer, html body.mn #tebex-footer, html body.mn .platform-footer, html body.mn .site-legal-bar { display: none !important; } /* Deliberately no rules target the Tebex checkout overlay. Forcing it visible would stop Tebex hiding it again when checkout closes. */ /* ========================================================================== Final overrides. This block is last in the file on purpose. ========================================================================== */ /* Toast placement, forced against anything in generic.css */ html body.mn div.toaster, html body.mn .toaster { position: fixed !important; top: auto !important; left: auto !important; right: 1rem !important; bottom: 1rem !important; inset-block-start: auto !important; inset-inline-start: auto !important; transform: none !important; translate: none !important; margin: 0 !important; z-index: 2147483000 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; width: auto !important; max-width: min(400px, calc(100vw - 2rem)) !important; } html body.mn div.toaster > .toast, html body.mn .toaster > .toast { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; white-space: normal !important; } @media (max-width: 620px) { html body.mn div.toaster, html body.mn .toaster { left: 1rem !important; right: 1rem !important; max-width: none !important; align-items: stretch !important; } } /* Containment: a toast must never be able to break the layout, even if the platform hands back an entire HTML document as the message text. */ html body.mn .toaster > .toast { max-height: 40vh !important; overflow-y: auto !important; overflow-wrap: anywhere !important; word-break: break-word !important; } html body.mn .toaster > .toast > p { max-height: 34vh; overflow-y: auto; overflow-wrap: anywhere; }