/* ==================================================================
   MANGOMODS — GLOBAL DESIGN SYSTEM
   Orange + Black Glow Theme
   ------------------------------------------------------------------
   File map:
     1.  Design tokens (colors, timings, radii, shadows)
     2.  Global page background + body
     3.  Typography & links
     4.  Scrollbars, selection, focus rings
     5.  Buttons
     6.  Forms (inputs, selects, checkboxes)
     7.  Cards (Bootstrap base)
     8.  Modals
     9.  Accordions (FAQ)
     10. Alerts, badges, tooltips
     11. Tables
     12. Dropdowns (incl. Choices.js)
     13. Section titles & subtitles
     14. Features section
     15. Animation utility keyframes
     16. Helper utility classes
     17. Announcement bar (existing, polished)
     18. Cart v2 (existing, polished)
     19. Reviews hero + feedback card overrides
     20. Customer login / auth modal
     21. Customer sidebar (re-skinned orange)
     22. Pagination
     23. Hero stat-chip hard fixes
     24. Currency selector hardening
     25. Legal pages (terms, privacy, refund)
     26. Status page width fix
   ================================================================== */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* ---- Logo-matched palette ----
     Sampled directly from the MangoMods mark: bright glossy mango orange,
     golden sparkle yellow, deep warm ember. Triplets stay as raw RGB so
     we can build rgba() values everywhere with one source of truth. */

  /* Primary mango orange (the body of the fruit in your logo) */
  --mm-orange-rgb: 255, 142, 36;
  --mm-orange-bright-rgb: 255, 175, 70;     /* glossy highlight on the mango */
  --mm-orange-deep-rgb: 210, 88, 0;          /* darker outline / 3D bottom edge */

  /* Golden sparkle yellow (the stars / dust in the logo) */
  --mm-amber-rgb: 255, 196, 71;
  --mm-spark-rgb: 255, 220, 130;             /* brightest twinkle */

  /* Deep ember (the warm red-orange shadow under the mango) */
  --mm-ember-rgb: 255, 90, 15;
  --mm-ember-deep-rgb: 180, 50, 0;

  /* Pure pitch-black surfaces — the logo's background.
     We tier them: 0 = pure black, 1 = lifted card, 2 = elevated card. */
  --mm-black-rgb: 0, 0, 0;
  --mm-coal-rgb: 10, 8, 4;                   /* tier 1 — cards */
  --mm-surface-rgb: 18, 14, 8;               /* tier 2 — elevated cards / modals */

  /* Text — boosted contrast since we're against pure black now */
  --mm-text: rgba(255, 255, 255, 0.98);
  --mm-text-muted: rgba(255, 255, 255, 0.72);
  --mm-text-dim: rgba(255, 255, 255, 0.48);
  --mm-text-gold: rgba(255, 196, 71, 0.95);  /* for accents matching sparkles */

  /* Borders — strengthened orange edges for the "premium gaming card" feel */
  --mm-border: rgba(255, 255, 255, 0.08);
  --mm-border-strong: rgba(255, 255, 255, 0.16);
  --mm-border-orange: rgba(255, 142, 36, 0.40);
  --mm-border-orange-strong: rgba(255, 142, 36, 0.75);

  /* Solid dark surfaces (replacing glass blur for sharper, readable cards) */
  --mm-glass-soft: rgba(0, 0, 0, 0.55);
  --mm-glass: rgba(0, 0, 0, 0.72);
  --mm-glass-strong: rgba(0, 0, 0, 0.88);

  /* Radius scale */
  --mm-r-xs: 8px;
  --mm-r-sm: 12px;
  --mm-r-md: 16px;
  --mm-r-lg: 20px;
  --mm-r-xl: 24px;
  --mm-r-full: 999px;

  /* Shadows — pumped up the orange glow for that punchy mango feel */
  --mm-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.50);
  --mm-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
  --mm-shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.78);
  --mm-glow: 0 0 32px rgba(255, 142, 36, 0.42);
  --mm-glow-strong: 0 0 56px rgba(255, 142, 36, 0.62);
  --mm-glow-soft: 0 0 22px rgba(255, 142, 36, 0.24);
  --mm-glow-spark: 0 0 30px rgba(255, 196, 71, 0.45);

  /* Motion (timing curves — we kept the values but removed pulse animations) */
  --mm-t-fast: 160ms;
  --mm-t-med: 280ms;
  --mm-t-slow: 520ms;
  --mm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mm-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot for hover */

  /* Legacy variables kept for backwards compatibility with components
     that already reference them. Now mapped to the new palette. */
  --mm-pulse: 3.6s;
  --mm-sweep: 4.8s;
  --mm-purple-950: #0a0805;
  --mm-purple-900: #10080a;
  --mm-magenta-600: #d65a08;
  --mm-red-600: #cc062e;
  --mm-red-500: #ec0f21;
  --mm-orange-600: #ff8a2a;
  --mm-orange-500: #ff8e24;
  --mm-gold-500: #ffc447;
  --mm-yellow-500: #ffdc82;
  --mm-leaf-600: #c97a16;
  --mm-leaf-500: #ffa733;
  --mm-shadow-legacy: rgba(0, 0, 0, 0.55);
}


/* ============================================================
   2. GLOBAL PAGE BACKGROUND + BODY
   ============================================================ */

/* Black background goes on <html>, not body.
   Reason: body's ::before/::after pseudo-elements use z-index: -1 to sit
   behind page content. If the dark color is on <body>, those pseudos get
   clipped behind body's paint layer and you lose the glow.
   Putting bg on <html> lets the glow render above html's bg but below body content. */
html {
  background-color: rgb(var(--mm-black-rgb));
}

body {
  background-color: transparent;
  color: var(--mm-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* IMPORTANT: no position: relative + z-index here, and #app below also
     has no z-index. Doing so would create a stacking context that traps
     Bootstrap modals beneath the .modal-backdrop (which is appended to body). */
}

/* Ambient orange embers at the edges only — deliberately restrained.
   Reason: your logo carries the atmosphere on the hero. A heavy
   site-wide orange glow would compete with the logo background and
   muddy the contrast on cards/forms. We keep just enough warmth in
   the corners to extend the logo's vibe to other pages. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    /* warm ember in top-left corner */
    radial-gradient(620px 480px at 0% 0%, rgba(var(--mm-orange-rgb), 0.12), transparent 60%),
    /* warm ember in bottom-right corner */
    radial-gradient(720px 560px at 100% 100%, rgba(var(--mm-ember-rgb), 0.10), transparent 62%);
}

/* Sparkle layer — a constellation of tiny golden dots scattered at random
   positions, like the dust in your logo. Each dot is a radial-gradient
   pinpoint. Positions chosen to feel asymmetric and natural; no animation,
   so they read as static decoration. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(2px 2px at 12% 18%,  rgba(var(--mm-spark-rgb), 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 26% 8%, rgba(var(--mm-spark-rgb), 0.65), transparent 60%),
    radial-gradient(2.5px 2.5px at 78% 14%, rgba(var(--mm-spark-rgb), 0.75), transparent 60%),
    radial-gradient(1px 1px at 92% 32%,  rgba(var(--mm-spark-rgb), 0.55), transparent 60%),
    radial-gradient(2px 2px at 6% 62%,   rgba(var(--mm-spark-rgb), 0.70), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 78%, rgba(var(--mm-spark-rgb), 0.60), transparent 60%),
    radial-gradient(2px 2px at 65% 88%,  rgba(var(--mm-spark-rgb), 0.75), transparent 60%),
    radial-gradient(1px 1px at 88% 70%,  rgba(var(--mm-spark-rgb), 0.50), transparent 60%),
    radial-gradient(2.5px 2.5px at 48% 42%, rgba(var(--mm-spark-rgb), 0.45), transparent 60%),
    /* center vignette so content reads clearly against the dark */
    radial-gradient(1500px 1000px at 50% 40%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

/* No z-index here on purpose. The glow sits at z-index: -1 behind the body content,
   so we DON'T need #app to be artificially boosted. Boosting #app would create a
   stacking context and trap modals below Bootstrap's .modal-backdrop. */

/* If a shop owner uploads a background image, dim it so the theme stays cohesive */
.bg-image {
  opacity: 0.35 !important;
  filter: blur(1px) saturate(0.8) brightness(0.65);
}


/* ============================================================
   3. TYPOGRAPHY & LINKS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.025em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.98);
}

/* H1 + H2 — the "MANGOMODS" logo lettering treatment.
   Heavy display weight, tight letter-spacing, and a layered text-shadow
   that combines a 3D bottom edge (like the bevel under the logo's letters)
   with a soft orange glow (like the warmth radiating off the mango). */
h1, h2 {
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-shadow:
    /* 3D bottom edge — darker orange, like the bevel under the logo's text */
    0 2px 0 rgba(var(--mm-orange-deep-rgb), 0.55),
    /* depth shadow — pulls the letters off the page */
    0 4px 14px rgba(0, 0, 0, 0.85),
    /* warm outer glow — the light radiating off the mango */
    0 0 32px rgba(var(--mm-orange-rgb), 0.28),
    0 0 80px rgba(var(--mm-orange-rgb), 0.12);
}

/* Optional helper for true display-style headings (hero/page titles).
   Apply by adding class="mm-display" to any heading. Brings out the
   full logo treatment with caps and even tighter tracking. */
.mm-display {
  text-transform: uppercase;
  letter-spacing: -0.04em !important;
  font-weight: 950;
  background:
    linear-gradient(180deg,
      rgba(var(--mm-orange-bright-rgb), 1) 0%,
      rgba(var(--mm-orange-rgb), 1) 55%,
      rgba(var(--mm-orange-deep-rgb), 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.9))
          drop-shadow(0 0 36px rgba(var(--mm-orange-rgb), 0.45));
}

p { color: var(--mm-text); }

a {
  color: rgba(var(--mm-amber-rgb), 0.95);
  text-decoration: none;
  transition: color var(--mm-t-fast) var(--mm-ease), text-shadow var(--mm-t-fast) var(--mm-ease);
}

a:hover {
  color: rgba(var(--mm-spark-rgb), 1);
  text-shadow: 0 0 12px rgba(var(--mm-amber-rgb), 0.55);
}

.text-primary {
  color: rgba(var(--mm-orange-rgb), 0.96) !important;
}

.text-muted {
  color: var(--mm-text-muted) !important;
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--mm-orange-rgb), 0.55),
    transparent
  );
  opacity: 0.6;
  margin: 1.5rem 0;
}


/* ============================================================
   4. SCROLLBARS, SELECTION, FOCUS
   ============================================================ */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.36);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(var(--mm-orange-rgb), 0.72),
    rgba(var(--mm-ember-rgb), 0.58)
  );
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.36);
  transition: background var(--mm-t-fast) var(--mm-ease);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--mm-orange-rgb), 1),
    rgba(var(--mm-ember-rgb), 0.95)
  );
}

* {
  scrollbar-color: rgba(var(--mm-orange-rgb), 0.65) rgba(0, 0, 0, 0.36);
  scrollbar-width: thin;
}

::selection {
  background: rgba(var(--mm-orange-rgb), 0.55);
  color: #fff;
  text-shadow: none;
}

*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid rgba(var(--mm-orange-rgb), 0.85);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ============================================================
   5. BUTTONS
   ------------------------------------------------------------
   Primary buttons get the "glossy mango" treatment: a vertical
   gradient from bright top to deeper bottom (like the lit side
   vs the shaded side of the fruit), a soft top-highlight via
   pseudo-element, and a saturated orange glow shadow.
   ============================================================ */

.btn {
  border-radius: var(--mm-r-full);
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 10px 22px;
  border-width: 1px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--mm-t-fast) var(--mm-ease-snap),
    box-shadow var(--mm-t-med) var(--mm-ease),
    background-color var(--mm-t-fast) var(--mm-ease),
    border-color var(--mm-t-fast) var(--mm-ease),
    color var(--mm-t-fast) var(--mm-ease),
    filter var(--mm-t-fast) var(--mm-ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); filter: brightness(0.92); }

/* Primary — the glossy mango button.
   Bright top -> deep bottom gradient mimics light falling on a sphere.
   ::before adds a soft top highlight (the gloss spot). */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background:
    linear-gradient(180deg,
      rgba(var(--mm-orange-bright-rgb), 1) 0%,
      rgba(var(--mm-orange-rgb), 1) 50%,
      rgba(var(--mm-ember-rgb), 1) 100%);
  border-color: rgba(var(--mm-orange-bright-rgb), 0.9);
  color: #1a0a00;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 220, 150, 0.45);
  box-shadow:
    0 10px 28px rgba(var(--mm-ember-rgb), 0.40),
    0 2px 0 rgba(var(--mm-ember-deep-rgb), 0.7),       /* 3D bottom edge */
    inset 0 1px 0 rgba(255, 230, 180, 0.55),            /* glossy top edge */
    inset 0 -10px 18px rgba(var(--mm-ember-deep-rgb), 0.35);
}

/* Soft highlight overlay — the gloss spot on the mango */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: var(--mm-r-full) var(--mm-r-full) 50% 50% / var(--mm-r-full) var(--mm-r-full) 60% 60%;
  background: linear-gradient(180deg,
    rgba(255, 240, 200, 0.50),
    rgba(255, 240, 200, 0.00));
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--mm-t-fast) var(--mm-ease);
}
.btn-primary > * { position: relative; z-index: 2; }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover {
  background:
    linear-gradient(180deg,
      rgba(var(--mm-spark-rgb), 1) 0%,
      rgba(var(--mm-orange-bright-rgb), 1) 50%,
      rgba(var(--mm-orange-rgb), 1) 100%);
  border-color: rgba(var(--mm-spark-rgb), 1);
  color: #1a0a00;
  box-shadow:
    0 20px 50px rgba(var(--mm-orange-rgb), 0.55),
    0 0 50px rgba(var(--mm-amber-rgb), 0.35),
    0 2px 0 rgba(var(--mm-ember-deep-rgb), 0.85),
    inset 0 1px 0 rgba(255, 245, 215, 0.75),
    inset 0 -10px 18px rgba(var(--mm-ember-deep-rgb), 0.30);
}
.btn-primary:hover::before { opacity: 0.85; }

/* Outline primary — solid dark with crisp orange edge.
   No more glass blur — reads cleaner on top of the logo background. */
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled) {
  background: rgba(var(--mm-coal-rgb), 0.85);
  border-color: rgba(var(--mm-orange-rgb), 0.65);
  color: rgba(var(--mm-amber-rgb), 0.98);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):hover {
  background: rgba(var(--mm-orange-rgb), 0.18);
  border-color: rgba(var(--mm-orange-bright-rgb), 1);
  color: rgba(var(--mm-spark-rgb), 1);
  box-shadow:
    0 16px 40px rgba(var(--mm-orange-rgb), 0.35),
    0 0 26px rgba(var(--mm-orange-rgb), 0.25);
}

/* Secondary — solid black with subtle border */
.btn-secondary {
  background: rgba(var(--mm-coal-rgb), 0.85);
  border-color: var(--mm-border-strong);
  color: var(--mm-text);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--mm-text);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}

/* Danger — same glossy treatment, red palette */
.btn-danger {
  background: linear-gradient(180deg, #ff4444, #b3041f);
  border-color: rgba(255, 80, 80, 0.75);
  color: #fff;
  text-shadow: 0 1px 0 rgba(120, 0, 10, 0.55);
  box-shadow:
    0 10px 28px rgba(220, 30, 50, 0.40),
    0 2px 0 rgba(120, 0, 10, 0.7),
    inset 0 1px 0 rgba(255, 200, 200, 0.45);
}
.btn-danger:hover {
  box-shadow:
    0 22px 55px rgba(230, 30, 60, 0.55),
    0 2px 0 rgba(120, 0, 10, 0.85),
    inset 0 1px 0 rgba(255, 210, 210, 0.65);
}

.btn-outline-danger {
  background: rgba(var(--mm-coal-rgb), 0.85);
  border-color: rgba(230, 60, 60, 0.55);
  color: rgba(255, 130, 130, 0.95);
}
.btn-outline-danger:hover {
  background: rgba(230, 30, 30, 0.18);
  border-color: rgba(255, 60, 60, 0.95);
  color: rgba(255, 175, 175, 1);
  box-shadow: 0 16px 40px rgba(230, 30, 60, 0.30);
}

/* Sizes */
.btn-sm { padding: 6px 14px; font-size: 0.85rem; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }


/* ============================================================
   6. FORMS
   ============================================================ */

.form-control,
.form-select,
input.form-control,
textarea.form-control,
select.form-select {
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--mm-border);
  color: var(--mm-text);
  border-radius: var(--mm-r-md);
  padding: 12px 16px;
  font-weight: 600;
  transition:
    background-color var(--mm-t-fast) var(--mm-ease),
    border-color var(--mm-t-fast) var(--mm-ease),
    box-shadow var(--mm-t-fast) var(--mm-ease),
    color var(--mm-t-fast) var(--mm-ease);
}

.form-control::placeholder { color: rgba(255, 255, 255, 0.40); }

.form-control:hover,
.form-select:hover {
  background: rgba(0, 0, 0, 0.40);
  border-color: rgba(255, 255, 255, 0.18);
}

.form-control:focus,
.form-select:focus {
  background: rgba(0, 0, 0, 0.46);
  border-color: rgba(var(--mm-orange-rgb), 0.78);
  box-shadow: 0 0 0 0.22rem rgba(var(--mm-orange-rgb), 0.18);
  color: var(--mm-text);
}

.form-label {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.90);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.form-check-input {
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--mm-border-strong);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: rgba(var(--mm-orange-rgb), 0.95);
  border-color: rgba(var(--mm-orange-rgb), 1);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.22rem rgba(var(--mm-orange-rgb), 0.22);
  border-color: rgba(var(--mm-orange-rgb), 0.78);
}

.form-check-label {
  color: var(--mm-text);
  font-weight: 600;
}

.input-group-text {
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid var(--mm-border);
  color: var(--mm-text-muted);
}


/* ============================================================
   7. CARDS (Bootstrap base)
   ------------------------------------------------------------
   Solid black surfaces, no backdrop blur. Cleaner against the
   logo background. Crisp orange edge on hover for the
   "premium gaming card" feel.
   ============================================================ */

.card {
  background: rgba(var(--mm-coal-rgb), 0.92);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  color: var(--mm-text);
  box-shadow: var(--mm-shadow);
  transition:
    transform var(--mm-t-med) var(--mm-ease),
    border-color var(--mm-t-med) var(--mm-ease),
    box-shadow var(--mm-t-med) var(--mm-ease);
}

.card:hover {
  border-color: var(--mm-border-orange);
  box-shadow: var(--mm-shadow-lg), var(--mm-glow-soft);
}

.card-body { padding: 18px; color: var(--mm-text); }
.card-header,
.card-footer {
  background: rgba(0, 0, 0, 0.45);
  border-color: var(--mm-border);
  color: var(--mm-text);
}


/* ============================================================
   8. MODALS
   ============================================================ */

.modal-content {
  background:
    /* subtle orange warmth from top corners */
    radial-gradient(900px 280px at 12% 0%, rgba(var(--mm-orange-rgb), 0.14), transparent 60%),
    radial-gradient(800px 240px at 90% 0%, rgba(var(--mm-ember-rgb), 0.10), transparent 65%),
    /* solid pitch-black base */
    linear-gradient(180deg, rgba(var(--mm-surface-rgb), 0.98), rgba(var(--mm-coal-rgb), 1));
  border: 1px solid rgba(var(--mm-orange-rgb), 0.28);
  border-radius: var(--mm-r-xl);
  color: var(--mm-text);
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.85),
    0 0 60px rgba(var(--mm-orange-rgb), 0.18);
}

.modal-header {
  border-bottom: 1px solid var(--mm-border);
  padding: 18px 22px;
}

.modal-header .modal-title {
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
}

.modal-body { padding: 22px; color: var(--mm-text); }
.modal-footer {
  border-top: 1px solid var(--mm-border);
  padding: 16px 22px;
}

.btn-close {
  filter: invert(1) brightness(1.1);
  opacity: 0.7;
  transition: opacity var(--mm-t-fast) var(--mm-ease), transform var(--mm-t-fast) var(--mm-ease);
}
.btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.modal-backdrop.show {
  opacity: 0.78;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ============================================================
   9. ACCORDIONS (FAQ)
   ============================================================ */

.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion-item {
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-md) !important;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--mm-t-fast) var(--mm-ease), box-shadow var(--mm-t-fast) var(--mm-ease);
}

.accordion-item:hover {
  border-color: rgba(var(--mm-orange-rgb), 0.28);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36);
}

.accordion-button {
  background: transparent;
  color: var(--mm-text);
  font-weight: 850;
  letter-spacing: -0.01em;
  padding: 18px 22px;
  font-size: 1.02rem;
  transition: background-color var(--mm-t-fast) var(--mm-ease), color var(--mm-t-fast) var(--mm-ease);
}

.accordion-button:not(.collapsed) {
  background: rgba(var(--mm-orange-rgb), 0.10);
  color: rgba(var(--mm-amber-rgb), 0.98);
  box-shadow: inset 0 -1px 0 rgba(var(--mm-orange-rgb), 0.24);
}

.accordion-button:focus {
  border-color: rgba(var(--mm-orange-rgb), 0.55);
  box-shadow: 0 0 0 0.22rem rgba(var(--mm-orange-rgb), 0.18);
}

.accordion-button::after {
  filter: brightness(0) invert(1) opacity(0.7);
}

.accordion-body {
  padding: 4px 22px 22px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}


/* ============================================================
   10. ALERTS, BADGES, TOOLTIPS
   ============================================================ */

.alert {
  border-radius: var(--mm-r-md);
  border: 1px solid var(--mm-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 600;
}

.alert-info {
  background: rgba(var(--mm-orange-rgb), 0.10);
  border-color: rgba(var(--mm-orange-rgb), 0.28);
  color: rgba(var(--mm-amber-rgb), 0.95);
}

.alert-success {
  background: rgba(76, 175, 80, 0.14);
  border-color: rgba(76, 175, 80, 0.32);
  color: rgba(167, 240, 168, 0.95);
}

.alert-warning {
  background: rgba(var(--mm-orange-rgb), 0.14);
  border-color: rgba(var(--mm-orange-rgb), 0.32);
  color: rgba(255, 215, 130, 0.95);
}

.alert-danger {
  background: rgba(230, 30, 30, 0.14);
  border-color: rgba(230, 60, 60, 0.32);
  color: rgba(255, 160, 160, 0.95);
}

.badge {
  font-weight: 800;
  border-radius: var(--mm-r-full);
  padding: 6px 11px;
  letter-spacing: -0.01em;
}

.tooltip-inner {
  background: rgba(10, 8, 5, 0.96);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-sm);
  color: var(--mm-text);
  font-weight: 600;
  padding: 8px 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}


/* ============================================================
   11. TABLES
   ============================================================ */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mm-text);
  --bs-table-border-color: var(--mm-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(var(--mm-orange-rgb), 0.08);
  color: var(--mm-text);
}

.table thead th {
  background: rgba(var(--mm-orange-rgb), 0.10);
  color: rgba(var(--mm-amber-rgb), 0.96);
  font-weight: 850;
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(var(--mm-orange-rgb), 0.24);
  padding: 14px 16px;
}

.table tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-color: var(--mm-border);
}

.table tbody tr {
  transition: background-color var(--mm-t-fast) var(--mm-ease);
}


/* ============================================================
   12. DROPDOWNS (incl. Choices.js)
   ============================================================ */

.dropdown-menu {
  background: rgba(15, 12, 8, 0.97);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.60);
  padding: 8px;
  margin-top: 6px;
}

.dropdown-item {
  color: var(--mm-text);
  border-radius: var(--mm-r-sm);
  padding: 9px 12px;
  font-weight: 700;
  transition: background var(--mm-t-fast) var(--mm-ease), color var(--mm-t-fast) var(--mm-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(var(--mm-orange-rgb), 0.14);
  color: rgba(var(--mm-amber-rgb), 1);
}

.dropdown-item.active,
.dropdown-item:active {
  background: rgba(var(--mm-orange-rgb), 0.22);
  color: rgba(var(--mm-amber-rgb), 1);
}

.dropdown-divider {
  border-color: var(--mm-border);
  opacity: 0.6;
}

/* Choices.js (currency selector) */
.choices__inner {
  background: rgba(0, 0, 0, 0.34) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 999px !important;
  color: var(--mm-text) !important;
  min-height: 44px !important;
  padding: 6px 14px !important;
}

.choices[data-type*="select-one"]::after {
  border-color: rgba(var(--mm-amber-rgb), 0.85) transparent transparent !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: rgba(15, 12, 8, 0.98) !important;
  border: 1px solid var(--mm-border-strong) !important;
  border-radius: var(--mm-r-md) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.60) !important;
  margin-top: 6px !important;
  color: var(--mm-text) !important;
  overflow: hidden;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: var(--mm-text) !important;
  font-weight: 700;
  padding: 10px 14px !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: rgba(var(--mm-orange-rgb), 0.18) !important;
  color: rgba(var(--mm-amber-rgb), 1) !important;
}


/* ============================================================
   13. SECTION TITLES & SUBTITLES
   ============================================================ */

.section-title h2 {
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  margin: 0 0 6px;
}

.section-subtitle p {
  color: var(--mm-text-muted);
  font-weight: 600;
  max-width: 68ch;
  margin: 0 0 24px;
}


/* ============================================================
   14. FEATURES SECTION
   ============================================================ */

.features { position: relative; }

.features .feature {
  position: relative;
  padding: 28px 22px 24px;
  border-radius: var(--mm-r-xl);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--mm-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--mm-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--mm-t-med) var(--mm-ease),
    border-color var(--mm-t-med) var(--mm-ease),
    box-shadow var(--mm-t-med) var(--mm-ease);
}

.features .feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    480px 240px at 30% 0%,
    rgba(var(--mm-orange-rgb), 0.16),
    transparent 60%
  );
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.features .feature > * {
  position: relative;
  z-index: 1;
}

.features .feature i {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mm-r-md);
  background: rgba(var(--mm-orange-rgb), 0.16);
  border: 1px solid rgba(var(--mm-orange-rgb), 0.36);
  color: rgba(var(--mm-amber-rgb), 1);
  font-size: 1.55rem;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.30),
    inset 0 0 18px rgba(var(--mm-orange-rgb), 0.18);
  transition:
    transform var(--mm-t-med) var(--mm-ease),
    box-shadow var(--mm-t-med) var(--mm-ease);
}

.features .feature .title {
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.18rem;
  color: rgba(255, 255, 255, 0.96);
  margin: 0;
}

.features .feature .description {
  color: var(--mm-text-muted);
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .features .feature:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--mm-orange-rgb), 0.45);
    box-shadow: var(--mm-shadow-lg), var(--mm-glow);
  }
  .features .feature:hover i {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.42),
      inset 0 0 26px rgba(var(--mm-orange-rgb), 0.32),
      0 0 24px rgba(var(--mm-orange-rgb), 0.30);
  }
}


/* ============================================================
   15. ANIMATION UTILITY KEYFRAMES
   ============================================================ */

@keyframes mmFadeUp {
  /* Opacity-only entrance. We deliberately do NOT animate `transform`
     here, because any transform value other than `none` — even
     `translateY(0)` — creates a stacking context. With
     animation-fill-mode: both on the `.component` class, that
     stacking context would stick permanently after the animation
     finished, trapping any Bootstrap modal/offcanvas rendered
     inside the component beneath the body-attached .modal-backdrop.
     The slide-up was barely visible; the fade alone reads well
     and keeps modals clickable. */
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mmGlowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--mm-orange-rgb), 0.20); }
  50%      { box-shadow: 0 0 36px rgba(var(--mm-orange-rgb), 0.45); }
}

/* Soft entrance — applied to section components */
.component {
  animation: mmFadeUp 0.55s var(--mm-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .component {
    animation: none !important;
  }
}


/* ============================================================
   16. HELPER UTILITY CLASSES
   ============================================================ */

.mm-glow-on-hover {
  transition: box-shadow var(--mm-t-med) var(--mm-ease), transform var(--mm-t-med) var(--mm-ease);
}
.mm-glow-on-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--mm-glow-strong);
}

.mm-glass {
  background: var(--mm-glass);
  border: 1px solid var(--mm-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--mm-r-lg);
}


/* ============================================================
   17. ANNOUNCEMENT BAR  (preserved + slightly refined)
   ============================================================ */

.announcement-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;

  background: linear-gradient(
    90deg,
    rgba(var(--mm-orange-rgb), 0.94),
    rgba(28, 18, 8, 0.92),
    rgba(var(--mm-orange-rgb), 0.94)
  );
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30), 0 0 30px rgba(var(--mm-orange-rgb), 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: announcement-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.announcement-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.announcement-bar__content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.announcement-bar__badge {
  flex: 0 0 auto;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.announcement-bar__text {
  font-size: 0.95rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.announcement-bar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.announcement-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.875rem;
  transition: transform 0.15s ease, background 0.15s ease;
}

.announcement-bar__cta:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
  color: #fff;
}

.announcement-bar__cta-icon { width: 18px; height: 18px; }

.announcement-bar__close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.announcement-bar__close:hover {
  background: rgba(255, 255, 255, 0.20);
}

.announcement-bar__close-icon { width: 18px; height: 18px; }

.announcement-bar__cta:focus-visible,
.announcement-bar__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

@keyframes announcement-slide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.announcement-bar.is-closing {
  animation: announcement-hide 0.25s ease both;
}

@keyframes announcement-hide {
  to { transform: translateY(-110%); opacity: 0; }
}

@media (max-width: 640px) {
  .announcement-bar__inner { align-items: flex-start; }
  .announcement-bar__text {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar,
  .announcement-bar.is-closing,
  .announcement-bar__cta { animation: none; transition: none; }
}


/* ============================================================
   18. CART v2  (preserved + re-skinned to orange)
   ============================================================ */

.cart--v2 .cart__title { letter-spacing: -0.02em; }

@media (min-width: 992px) {
  .cart--v2 .cart-summary { position: sticky; top: 90px; }
}

.cart--v2 .cart-summary {
  background:
    radial-gradient(900px 160px at 20% 0%, rgba(var(--mm-orange-rgb), 0.12), transparent 55%),
    linear-gradient(180deg, rgba(20, 16, 11, 0.90), rgba(10, 8, 5, 0.94));
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  padding: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--mm-shadow);
}

.cart--v2 .cart-summary .text-muted { color: rgba(255, 255, 255, 0.70) !important; }

.cart--v2 .cart-summary__line {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--mm-border);
}

.cart--v2 .cart-summary__hint { opacity: 0.9; }

.cart--v2 .cart-summary__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--mm-orange-rgb), 0.85);
  display: inline-block;
  box-shadow: 0 0 12px rgba(var(--mm-orange-rgb), 0.55);
}

.cart--v2 .cart-item {
  background:
    radial-gradient(800px 140px at 10% 0%, rgba(var(--mm-orange-rgb), 0.10), transparent 55%),
    linear-gradient(180deg, rgba(20, 16, 11, 0.84), rgba(10, 8, 5, 0.94));
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 200ms var(--mm-ease), border-color 200ms var(--mm-ease), box-shadow 200ms var(--mm-ease);
}

.cart--v2 .cart-item:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--mm-orange-rgb), 0.32);
  box-shadow: var(--mm-shadow), 0 0 24px rgba(var(--mm-orange-rgb), 0.14);
}

.cart--v2 .cart-item__inner {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 14px;
  padding: 14px;
}

@media (max-width: 575px) {
  .cart--v2 .cart-item__inner {
    grid-template-columns: 96px 1fr;
    grid-template-areas: "media details" "controls controls";
  }
  .cart--v2 .cart-item__media { grid-area: media; }
  .cart--v2 .cart-item__details { grid-area: details; min-width: 0; }
  .cart--v2 .cart-item__controls { grid-area: controls; }
}

.cart--v2 .cart-item__media {
  width: 112px;
  height: 112px;
  border-radius: var(--mm-r-md);
  overflow: hidden;
  border: 1px solid var(--mm-border);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 575px) {
  .cart--v2 .cart-item__media { width: 96px; height: 96px; }
}

.cart--v2 .cart-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart--v2 .cart-item__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
}
.cart--v2 .cart-item__placeholder svg { width: 44px; height: 44px; }

.cart--v2 .cart-item__title {
  color: rgba(255, 255, 255, 0.95);
  display: inline-block;
  max-width: 100%;
  font-weight: 800;
}
.cart--v2 .cart-item__title:hover {
  color: rgba(var(--mm-amber-rgb), 1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart--v2 .cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--mm-border);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
}

.cart--v2 .cart-discount { margin-top: 6px; }

.cart--v2 .cart-discount__bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--mm-border);
  overflow: hidden;
}

.cart--v2 .cart-discount__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--mm-orange-rgb), 0.95), rgba(var(--mm-amber-rgb), 0.85));
  box-shadow: 0 0 12px rgba(var(--mm-orange-rgb), 0.45);
}

.cart--v2 .cart-discount__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--mm-orange-rgb), 0.85);
  border: 1px solid rgba(var(--mm-amber-rgb), 0.45);
  color: #0a0805;
  font-size: 12px;
  font-weight: 800;
}

.cart--v2 .cart-item__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 575px) {
  .cart--v2 .cart-item__controls {
    justify-content: space-between;
    padding-top: 6px;
  }
}

.cart--v2 .cart-qty {
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--mm-border-strong);
  background: rgba(255, 255, 255, 0.04);
}

.cart--v2 .cart-qty__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  transition: background 150ms ease, color 150ms ease;
}

.cart--v2 .cart-qty__btn:hover {
  background: rgba(var(--mm-orange-rgb), 0.16);
  color: rgba(var(--mm-amber-rgb), 1);
}

.cart--v2 .cart-qty__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.cart--v2 .cart-qty__input {
  width: 56px;
  height: 38px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  outline: none;
  font-weight: 800;
}

.cart--v2 .cart-item__remove {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mm-border);
  transition: transform 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease;
  text-decoration: none;
}

.cart--v2 .cart-item__remove:hover {
  transform: translateY(-1px);
  background: rgba(230, 30, 30, 0.16);
  border-color: rgba(255, 80, 80, 0.55);
  color: rgba(255, 160, 160, 1);
}

.cart--v2 .cart-item__remove svg { width: 18px; height: 18px; }

.cart--v2 .cart-empty {
  background: rgba(0, 0, 0, 0.20);
  border-radius: var(--mm-r-lg);
  border: 1px dashed rgba(255, 255, 255, 0.10);
}

.cart--v2 .cart-empty__icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(var(--mm-orange-rgb), 0.10);
  border: 1px solid rgba(var(--mm-orange-rgb), 0.22);
}
.cart--v2 .cart-empty__icon svg { width: 28px; height: 28px; color: rgba(var(--mm-amber-rgb), 0.95); }

.cart--v2 .cart-skeleton__item {
  height: 140px;
  border-radius: 18px;
  border: 1px solid var(--mm-border);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  background-size: 200% 100%;
  animation: cartSkeleton 1.2s ease-in-out infinite;
  margin-bottom: 12px;
}

@keyframes cartSkeleton {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.cart--v2 .cart__alertIcon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(var(--mm-orange-rgb), 0.12);
  border: 1px solid rgba(var(--mm-orange-rgb), 0.22);
}
.cart--v2 .cart__alertIcon svg { width: 20px; height: 20px; color: rgba(var(--mm-amber-rgb), 0.95); }


/* ============================================================
   19. REVIEWS HERO + FEEDBACK CARD OVERRIDES
   ============================================================ */

.reviews-hero--v2 {
  position: relative;
  overflow: hidden;
  border-radius: var(--mm-r-xl);
  padding: 24px 22px;
  color: var(--mm-text);
  border: 1px solid var(--mm-border-strong);
  box-shadow: var(--mm-shadow-lg);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(var(--mm-amber-rgb), 0.22), transparent 60%),
    radial-gradient(900px 260px at 85% 10%, rgba(var(--mm-orange-rgb), 0.20), transparent 55%),
    linear-gradient(90deg, rgba(60, 32, 12, 0.92), rgba(178, 95, 6, 0.45), rgba(220, 130, 10, 0.55), rgba(var(--mm-orange-rgb), 0.85));
}

.reviews-hero--v2::before {
  content: "";
  position: absolute;
  inset: -60px;
  pointer-events: none;
  opacity: 0.32;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 30%, rgba(255, 255, 255, 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 0.55) 0 2px, transparent 3px);
  filter: blur(0.2px);
}

.reviews-hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.reviews-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  font-weight: 800;
}

.reviews-hero__title {
  margin: 6px 0 4px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.reviews-hero__subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  max-width: 56ch;
}

.reviews-hero__right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.reviews-hero__stat {
  min-width: 120px;
  padding: 10px 12px;
  border-radius: var(--mm-r-md);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.reviews-hero__statNum {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.reviews-hero__statLabel {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 768px) {
  .reviews-hero__inner { align-items: flex-start; flex-direction: column; }
  .reviews-hero__right { justify-content: flex-start; }
}


/* ============================================================
   20. AUTH MODAL (Customer login)
   ============================================================ */

#customer-login-modal .mm-auth {
  border-radius: var(--mm-r-xl);
  overflow: hidden;
  color: var(--mm-text);
  border: 1px solid rgba(var(--mm-orange-rgb), 0.20);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(var(--mm-orange-rgb), 0.12);
  background:
    radial-gradient(900px 280px at 12% 0%, rgba(var(--mm-orange-rgb), 0.18), transparent 60%),
    radial-gradient(900px 260px at 88% 10%, rgba(var(--mm-ember-rgb), 0.14), transparent 55%),
    linear-gradient(180deg, rgba(28, 20, 10, 0.94), rgba(12, 9, 5, 0.96));
}

#customer-login-modal .mm-auth__header {
  border-bottom: 1px solid var(--mm-border);
  background:
    linear-gradient(90deg,
      rgba(60, 32, 14, 0.78),
      rgba(178, 90, 8, 0.42),
      rgba(220, 130, 10, 0.32),
      rgba(var(--mm-orange-rgb), 0.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 16px;
}

#customer-login-modal .mm-auth__titleWrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#customer-login-modal .mm-auth__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--mm-r-md);
  display: grid;
  place-items: center;
  background: rgba(var(--mm-orange-rgb), 0.16);
  border: 1px solid rgba(var(--mm-orange-rgb), 0.32);
  color: rgba(var(--mm-amber-rgb), 1);
}
#customer-login-modal .mm-auth__icon svg { width: 20px; height: 20px; }

#customer-login-modal .mm-auth__title {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#customer-login-modal .mm-auth__subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  margin-top: 2px;
}

#customer-login-modal .mm-auth__email {
  color: rgba(var(--mm-amber-rgb), 0.95);
  font-weight: 800;
}

#customer-login-modal .mm-auth__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#customer-login-modal .mm-auth__stepPill {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.90);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--mm-border-strong);
  background: rgba(0, 0, 0, 0.22);
}

#customer-login-modal .mm-auth__close {
  filter: invert(1);
  opacity: 0.85;
}

#customer-login-modal .mm-auth__body { padding: 16px; }

#customer-login-modal .mm-auth__label {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
}

#customer-login-modal .mm-auth__help {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.70) !important;
}

#customer-login-modal .mm-auth__fineprint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

#customer-login-modal .mm-field { position: relative; }

#customer-login-modal .mm-field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.70);
}

#customer-login-modal .mm-field__input {
  padding-left: 40px;
  border-radius: 14px;
  border: 1px solid var(--mm-border);
  background: rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.92);
}

#customer-login-modal .mm-field__input::placeholder { color: rgba(255, 255, 255, 0.45); }

#customer-login-modal .mm-field__input:focus {
  border-color: rgba(var(--mm-orange-rgb), 0.75);
  box-shadow: 0 0 0 0.22rem rgba(var(--mm-orange-rgb), 0.20);
  background: rgba(0, 0, 0, 0.40);
}

#customer-login-modal .mm-auth__captcha {
  padding: 10px;
  border-radius: var(--mm-r-md);
  border: 1px solid var(--mm-border);
  background: rgba(0, 0, 0, 0.20);
}

#customer-login-modal .mm-btn--primary {
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0a0805;
  background: linear-gradient(135deg, rgba(var(--mm-orange-rgb), 1), rgba(var(--mm-ember-rgb), 1));
  box-shadow:
    0 16px 40px rgba(var(--mm-orange-rgb), 0.35),
    inset 0 0 0 1px rgba(var(--mm-amber-rgb), 0.30);
  transition: transform var(--mm-t-fast) var(--mm-ease), filter var(--mm-t-fast) var(--mm-ease), box-shadow var(--mm-t-fast) var(--mm-ease);
}

#customer-login-modal .mm-btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 22px 56px rgba(var(--mm-orange-rgb), 0.50),
    inset 0 0 0 1px rgba(var(--mm-amber-rgb), 0.50);
}

#customer-login-modal .mm-btn--primary:disabled { opacity: 0.65; }

#customer-login-modal .mm-auth__link {
  color: rgba(var(--mm-amber-rgb), 0.95);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#customer-login-modal .mm-auth__hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

#customer-login-modal .mm-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

#customer-login-modal .mm-otp__input {
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--mm-border-strong);
  background: rgba(0, 0, 0, 0.36);
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

#customer-login-modal .mm-otp__input:focus {
  border-color: rgba(var(--mm-orange-rgb), 0.75);
  box-shadow: 0 0 0 0.22rem rgba(var(--mm-orange-rgb), 0.20);
  background: rgba(0, 0, 0, 0.42);
}

@media (max-width: 420px) {
  #customer-login-modal .mm-otp { gap: 8px; }
  #customer-login-modal .mm-otp__input { height: 50px; font-size: 18px; }
}


/* ============================================================
   21. CUSTOMER SIDEBAR (orange re-skin)
   ============================================================ */

.mm-sidebar {
  color: var(--mm-text);
  border-radius: var(--mm-r-xl);
  border: 1px solid rgba(var(--mm-orange-rgb), 0.18);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.50),
    0 0 30px rgba(var(--mm-orange-rgb), 0.10);
  background:
    radial-gradient(900px 180px at 15% 0%, rgba(var(--mm-orange-rgb), 0.18), transparent 60%),
    radial-gradient(900px 200px at 85% 10%, rgba(var(--mm-ember-rgb), 0.14), transparent 55%),
    linear-gradient(180deg, rgba(28, 20, 10, 0.92), rgba(10, 8, 5, 0.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mm-sidebar__titleRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-sidebar__badge {
  width: 40px;
  height: 40px;
  border-radius: var(--mm-r-md);
  display: grid;
  place-items: center;
  background: rgba(var(--mm-orange-rgb), 0.14);
  border: 1px solid rgba(var(--mm-orange-rgb), 0.32);
  color: rgba(var(--mm-amber-rgb), 1);
}
.mm-sidebar__badge svg { width: 20px; height: 20px; }

.mm-sidebar__title {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.mm-sidebar__sub { color: rgba(255, 255, 255, 0.72) !important; }

.mm-sidebar__email {
  font-weight: 800;
  color: rgba(var(--mm-amber-rgb), 0.95);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.mm-sidebar__divider {
  border-color: var(--mm-border);
  margin: 14px 0 8px;
}

.mm-sidebar .mm-navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--mm-r-md);
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--mm-border);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 150ms var(--mm-ease), background 150ms var(--mm-ease), border-color 150ms var(--mm-ease), color 150ms var(--mm-ease);
}

.mm-sidebar .mm-navlink__icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid var(--mm-border);
  color: rgba(255, 255, 255, 0.86);
}
.mm-sidebar .mm-navlink__icon svg { width: 18px; height: 18px; }

.mm-sidebar .mm-navlink__text {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mm-sidebar .mm-navlink:hover {
  transform: translateY(-1px);
  background: rgba(var(--mm-orange-rgb), 0.08);
  border-color: rgba(var(--mm-orange-rgb), 0.28);
  color: rgba(var(--mm-amber-rgb), 1);
}

.mm-sidebar .mm-navlink:focus-visible {
  outline: 2px solid rgba(var(--mm-amber-rgb), 0.75);
  outline-offset: 2px;
}

.mm-sidebar .mm-navlink.active {
  color: rgba(255, 255, 255, 0.96);
  border-color: rgba(var(--mm-orange-rgb), 0.32);
  background:
    linear-gradient(90deg, rgba(var(--mm-orange-rgb), 0.30), rgba(var(--mm-ember-rgb), 0.20), rgba(var(--mm-orange-deep-rgb), 0.18)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.40), 0 0 24px rgba(var(--mm-orange-rgb), 0.18);
  position: relative;
}

.mm-sidebar .mm-navlink.active::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--mm-amber-rgb), 1), rgba(var(--mm-orange-rgb), 1), rgba(var(--mm-ember-rgb), 1));
  opacity: 0.95;
  box-shadow: 0 0 12px rgba(var(--mm-orange-rgb), 0.65);
}

.mm-sidebar .mm-navlink--logout { width: 100%; text-align: left; }

.mm-sidebar .mm-navlink--logout:hover {
  border-color: rgba(236, 15, 33, 0.32);
  background: rgba(236, 15, 33, 0.12);
  color: rgba(255, 160, 160, 1);
}


/* ============================================================
   22. PAGINATION
   ============================================================ */

.mm-pagination__mobileMeta {
  font-size: 12px;
  color: var(--mm-text-muted);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--mm-border);
  background: rgba(0, 0, 0, 0.20);
}

.mm-pagination__btn {
  border-radius: 14px;
  font-weight: 800;
}

.mm-pagination__list .mm-page {
  border-radius: 14px !important;
  border: 1px solid var(--mm-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.02));
  color: var(--mm-text);
  transition: transform 140ms var(--mm-ease), border-color 140ms var(--mm-ease), background 140ms var(--mm-ease);
}

.mm-pagination__list .page-item:not(.disabled):not(.active) .mm-page:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--mm-orange-rgb), 0.32);
  background: rgba(var(--mm-orange-rgb), 0.08);
  color: rgba(var(--mm-amber-rgb), 1);
}

.mm-pagination__list .page-item.active .mm-page {
  color: rgba(255, 255, 255, 0.98);
  border-color: rgba(var(--mm-orange-rgb), 0.45);
  background: linear-gradient(90deg, rgba(var(--mm-orange-rgb), 0.55), rgba(var(--mm-ember-rgb), 0.40), rgba(var(--mm-orange-deep-rgb), 0.32));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32), 0 0 18px rgba(var(--mm-orange-rgb), 0.32);
}

.mm-pagination__list .page-item.disabled .mm-page { opacity: 0.55; }

.mm-pagination__list .mm-page:focus-visible {
  outline: 2px solid rgba(var(--mm-orange-rgb), 0.65);
  outline-offset: 2px;
}

.mm-pagination__list .mm-page--dots {
  border-style: dashed;
  opacity: 0.7;
}


/* ============================================================
   23. HERO STAT-CHIP HARD FIXES (legacy)
   ============================================================ */

.hero-v2 .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-v2 .stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.30) !important;
  border: 1px solid rgba(var(--cl-border-rgb), 0.55) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(8px);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease,
    color 220ms ease;
}

.hero-v2 .stat-chip .value {
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.90) !important;
}

.hero-v2 .stat-chip .label {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.92rem;
  white-space: nowrap;
}

.hero-v2 .stat-chip svg {
  width: 18px;
  height: 18px;
  stroke: rgba(255, 255, 255, 0.75);
}

.hero-v2 .stat-chip:hover {
  background: rgba(0, 0, 0, 0.30) !important;
  border-color: rgba(var(--cl-border-rgb), 0.55) !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-v2 .fake-searchbar,
.hero-v2 .btn-primary.hero-cta {
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease,
    background-color 220ms ease;
}
.hero-v2 .fake-searchbar:hover,
.hero-v2 .btn-primary.hero-cta:hover {
  transform: translateY(-0.5px);
}


/* ============================================================
   24. CURRENCY SELECTOR HARDENING
   ============================================================ */

nav.mangomods-navbar .currency-selector {
  display: inline-flex;
  align-items: center;
}

nav.mangomods-navbar .currency-selector select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: auto !important;
  padding-right: 3.5rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid var(--mm-border);
  color: rgba(255, 255, 255, 0.88);
  min-width: 92px;
}


/* ============================================================
   25. LEGAL PAGES (Terms, Privacy, Refund)
   ============================================================ */

.mango-legal-wrap {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.mango-legal-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.mango-legal-title h1 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.mango-legal-card {
  border-radius: var(--mm-r-lg);
  padding: 22px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--mm-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--mm-shadow-lg);
}

.mango-terms .mango-legal-card {
  box-shadow:
    var(--mm-shadow-lg),
    0 0 0 1px rgba(var(--mm-orange-rgb), 0.12),
    0 -10px 60px rgba(var(--mm-orange-rgb), 0.20),
    40px 30px 90px rgba(var(--mm-ember-rgb), 0.10);
}

.mango-legal-card.editor {
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.7;
  font-size: 1rem;
}

.mango-legal-card.editor h1,
.mango-legal-card.editor h2,
.mango-legal-card.editor h3,
.mango-legal-card.editor h4 {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
}

.mango-legal-card.editor p { margin-bottom: 0.9rem; }

.mango-legal-card.editor a {
  color: rgba(var(--mm-amber-rgb), 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--mm-orange-rgb), 0.45);
  transition: border-color 160ms ease, opacity 160ms ease;
}

.mango-legal-card.editor a:hover {
  opacity: 0.95;
  border-color: rgba(var(--mm-orange-rgb), 0.85);
}

.mango-legal-card.editor hr {
  border: none;
  height: 1px;
  background: rgba(var(--mm-orange-rgb), 0.25);
  margin: 1.2rem 0;
}

.mango-legal-card.editor blockquote {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid rgba(var(--mm-orange-rgb), 0.75);
  background: rgba(var(--mm-orange-rgb), 0.06);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 992px) {
  .mango-legal-card { padding: 26px; }
  .mango-legal-card.editor { font-size: 1.02rem; }
}


/* ============================================================
   26. STATUS PAGE WIDTH FIX
   ============================================================ */

.mangomods-status-page .status-cards > * { min-width: 0; }

.mangomods-status-page .status-card-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.mangomods-status-page .status-card-header .title {
  min-width: 0;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mangomods-status-page .status-card-header .status-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* ============================================================
   27. STATIC MODE — Quiet the theme
   ------------------------------------------------------------
   The site originally had pulsing rings, halos and sweeping
   lights on most components. This block disables all of those
   looping animations site-wide so the theme reads as a static
   "cool glow" instead of a busy, breathing one.

   What this KEEPS:
     - Hover transitions (those use `transition:`, not @keyframes)
     - Entrance animations (mmFadeUp etc — they run once and stop)
     - Loading skeletons / spinners (functional progress UI)
     - Static glows: the box-shadow, gradients, and borders that
       gave the orange-glow look remain untouched — only the
       *motion* is removed.

   How it works:
     Almost every pulse in the theme lives on a ::before or
     ::after pseudo-element. Killing animations on ALL pseudos
     in one rule covers ~95% of the pulses without having to
     edit every component file. The two real-element pulses
     (the product card's inner neon glow line and the
     maintenance gear's spin) are killed explicitly below.

   To re-enable a specific animation later, you can override
   `animation` on that selector with higher specificity, e.g.
   `a.mangomods-product-card::before { animation: mmNeonBorderPulse 3.6s ease-in-out infinite !important; }`
   ============================================================ */

*::before,
*::after {
  animation: none !important;
}

/* Real-element pulses that aren't on pseudos */
a.mangomods-product-card .mm-inner-neon,
.mangomods-maintenance .maintenance-icon-wrapper svg {
  animation: none !important;
}

/* Dial back the inner neon line on product cards — without its pulse
   the default opacity (0.8) is too punchy. A softer constant value
   reads as a cool static glow rather than a hot tube. */
a.mangomods-product-card .mm-inner-neon {
  opacity: 0.45;
}


/* ============================================================
   28. STACKING CONTEXT GUARD — Don't trap Bootstrap modals
   ------------------------------------------------------------
   Many redesigned components use `isolation: isolate` to keep their
   decorative pseudo-elements (orange glow rings, halos) safely
   confined to the component. The side effect: `isolation: isolate`
   creates a NEW stacking context, and any Bootstrap modal rendered
   INSIDE that component gets trapped beneath the .modal-backdrop
   (which is appended to <body>, outside the component's context).

   Symptom: clicking a button that opens a modal — like the
   filter modal on the products page, the ticket-create modal,
   the affiliate code edit modal, etc — darkens the screen but
   leaves the modal unclickable, exactly like the maintenance
   admin modal did.

   Fix: strip isolation from every theme component. The decorative
   pseudos still render correctly because they're `position: absolute`
   inside `position: relative` parents (already clipped to bounds),
   use `pointer-events: none` (no click blocking), and sit at
   `z-index: 0` behind content at `z-index: 1`. None of that
   actually needed isolation — it was a defensive habit that
   created the bug.

   To re-enable on a specific component (e.g. if you ever use
   `mix-blend-mode` and need the blending sandboxed), override:
   `.your-component { isolation: isolate !important; }` with
   higher specificity than this rule.
   ============================================================ */

[class*="mangomods-"] {
  isolation: auto !important;
}


/* ============================================================
   29. MODAL POSITION DEFENSE — don't let scoped styles trap modals
   ------------------------------------------------------------
   Some component styles use a broad `wrapper > * { position: relative;
   z-index: 1 }` rule to keep content above decorative pseudo-element
   glows. The side effect: Bootstrap modals are rendered as direct
   children of those wrappers, so they pick up `position: relative`
   AND `z-index: 1` — overriding their needed `position: fixed;
   z-index: 1055`. Result: the modal drops below the modal-backdrop
   (z-index 1050) and clicks die, even though the modal looks visible.

   This rule globally restores Bootstrap modals to their correct
   positioning, no matter what scoped rules try to do.
   ============================================================ */

.modal {
  position: fixed !important;
  z-index: 1055 !important;
}

.modal-backdrop {
  position: fixed !important;
  z-index: 1050 !important;
}

/* Offcanvas (mobile filter / cart panels) uses the same pattern */
.offcanvas {
  position: fixed !important;
  z-index: 1045 !important;
}

.offcanvas-backdrop {
  position: fixed !important;
  z-index: 1040 !important;
}