@charset "UTF-8";
/*
 * ═══════════════════════════════════════════════════════════════════════════
 *   THE MINER ISLAND — Custom OpenCart 3.x Catalog Theme
 *   Stylesheet v1.0 · Phase 1 — Global Foundation
 *   Built for: theminerisland.com · OpenCart 3.0.3.7 · PHP 7.4
 *   Mobile-first · White-dominant · Ultramarine + Bitcoin orange
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *   Loaded by:  catalog/view/theme/minerisland/template/common/header.twig
 *   Path:       catalog/view/theme/minerisland/stylesheet/stylesheet.css
 *
 *   Section index
 *   01  Font imports                  17  Pagination
 *   02  CSS reset                     18  Tabs / accordions
 *   03  Design tokens                 19  Modals / dropdowns
 *   04  Base typography               20  Footer (base)
 *   05  Layout primitives             21  WhatsApp floating button
 *   06  OpenCart Bootstrap 3 grid     22  Cookie consent bar
 *   07  Promo bar                     23  Sticky mobile add-to-cart
 *   08  Top utility bar               24  Hero / video hero
 *   09  Header (base)                 25  Sections & bands
 *   10  Main navigation               26  Crypto ticker
 *   11  Buttons                       27  USP bar
 *   12  Forms                         28  Stats / counters
 *   13  Cards (generic)               29  Testimonials
 *   14  Product cards                 30  Trust badges
 *   15  Price, sale tags & badges     31  Category / filter / sort
 *   16  Alerts                        32  Animations
 *                                     33  Utility classes
 *                                     34  Responsive breakpoints
 *                                     35  Print styles
 *
 * ─────────────────────────────────────────────────────────────────────────── */


/* ═══ 01 · FONT IMPORTS ═══════════════════════════════════════════════════ */

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


/* ═══ 02 · CSS RESET (modern, minimal) ════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; min-height: 100vh; line-height: 1.6; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
::-moz-focus-inner { border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--mi-color-primary); outline-offset: 2px; }
[hidden] { display: none !important; }


/* ═══ 03 · DESIGN TOKENS (CSS custom properties) ══════════════════════════ */

:root {
  /* ── Brand & accent colors ────────────────────────────────────── */
  --mi-color-primary:           #0437F2;
  --mi-color-primary-hover:     #0024B8;
  --mi-color-primary-soft:      #EEF1FE;
  --mi-color-primary-50:        #F4F6FF;
  --mi-color-primary-100:       #E0E6FF;

  --mi-color-orange:            #F7931A;
  --mi-color-orange-hover:      #D97706;
  --mi-color-orange-soft:       #FEF6EA;
  --mi-color-orange-50:         #FFF8EC;

  --mi-color-whatsapp:          #25D366;
  --mi-color-whatsapp-hover:    #1DA851;

  /* ── Backgrounds ──────────────────────────────────────────────── */
  --mi-bg-page:                 #FFFFFF;
  --mi-bg-soft:                 #F8FAFC;
  --mi-bg-muted:                #F1F5F9;
  --mi-bg-card:                 #FFFFFF;
  --mi-bg-overlay:              rgba(15, 23, 42, 0.55);

  /* ── Text ─────────────────────────────────────────────────────── */
  --mi-text-headline:           #0F172A;
  --mi-text-body:               #334155;
  --mi-text-secondary:          #64748B;
  --mi-text-muted:              #94A3B8;
  --mi-text-on-primary:         #FFFFFF;
  --mi-text-on-orange:          #FFFFFF;
  --mi-text-link:               #0437F2;
  --mi-text-link-hover:         #0024B8;

  /* ── Borders ──────────────────────────────────────────────────── */
  --mi-border-subtle:           #E2E8F0;
  --mi-border-defined:          #CBD5E1;
  --mi-border-strong:           #94A3B8;

  /* ── Aliases (Phase 4+ shorthand — map to canonical tokens) ──── */
  --mi-text-primary:            #0F172A;
  --mi-text-tertiary:           #94A3B8;
  --mi-border:                  #CBD5E1;
  --mi-border-light:            #E2E8F0;
  --mi-letter-widest:           0.12em;

  /* ── States ───────────────────────────────────────────────────── */
  --mi-color-success:           #10B981;
  --mi-color-success-soft:      #ECFDF5;
  --mi-color-error:             #EF4444;
  --mi-color-error-soft:        #FEF2F2;
  --mi-color-warning:           #F59E0B;
  --mi-color-warning-soft:      #FFFBEB;
  --mi-color-info:              #0EA5E9;
  --mi-color-info-soft:         #F0F9FF;

  /* ── Typography scale (mobile-first base) ─────────────────────── */
  --mi-font-display:            'Manrope', system-ui, -apple-system, sans-serif;
  --mi-font-body:               'Manrope', system-ui, -apple-system, sans-serif;
  --mi-font-mono:               'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --mi-fs-xs:                   0.75rem;        /* 12 */
  --mi-fs-sm:                   0.875rem;       /* 14 */
  --mi-fs-base:                 1rem;           /* 16 — mobile body, prevents iOS zoom */
  --mi-fs-md:                   1.0625rem;      /* 17 */
  --mi-fs-lg:                   1.125rem;       /* 18 */
  --mi-fs-xl:                   1.25rem;        /* 20 */
  --mi-fs-2xl:                  1.5rem;         /* 24 */
  --mi-fs-3xl:                  1.875rem;       /* 30 */
  --mi-fs-4xl:                  2.25rem;        /* 36 */
  --mi-fs-5xl:                  2.75rem;        /* 44 */
  --mi-fs-6xl:                  3.5rem;         /* 56 */

  --mi-fw-light:                300;
  --mi-fw-regular:              400;
  --mi-fw-medium:               500;
  --mi-fw-semibold:             600;
  --mi-fw-bold:                 700;
  --mi-fw-extra:                800;

  --mi-lh-tight:                1.15;
  --mi-lh-snug:                 1.3;
  --mi-lh-normal:               1.55;
  --mi-lh-relaxed:              1.7;

  --mi-letter-tight:            -0.025em;
  --mi-letter-snug:             -0.012em;
  --mi-letter-normal:           0;
  --mi-letter-wide:             0.04em;
  --mi-letter-wider:            0.08em;

  /* ── Spacing scale (4px base) ─────────────────────────────────── */
  --mi-sp-1:                    0.25rem;        /* 4 */
  --mi-sp-2:                    0.5rem;         /* 8 */
  --mi-sp-3:                    0.75rem;        /* 12 */
  --mi-sp-4:                    1rem;           /* 16 */
  --mi-sp-5:                    1.25rem;        /* 20 */
  --mi-sp-6:                    1.5rem;         /* 24 */
  --mi-sp-7:                    1.75rem;        /* 28 */
  --mi-sp-8:                    2rem;           /* 32 */
  --mi-sp-10:                   2.5rem;         /* 40 */
  --mi-sp-12:                   3rem;           /* 48 */
  --mi-sp-14:                   3.5rem;         /* 56 */
  --mi-sp-16:                   4rem;           /* 64 */
  --mi-sp-20:                   5rem;           /* 80 */
  --mi-sp-24:                   6rem;           /* 96 */

  /* ── Radius ───────────────────────────────────────────────────── */
  --mi-radius-xs:               4px;
  --mi-radius-sm:               6px;
  --mi-radius-md:               8px;
  --mi-radius-lg:               12px;
  --mi-radius-xl:               16px;
  --mi-radius-2xl:              22px;
  --mi-radius-full:             9999px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --mi-shadow-xs:               0 1px 2px rgba(15, 23, 42, 0.05);
  --mi-shadow-sm:               0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --mi-shadow-md:               0 6px 16px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --mi-shadow-lg:               0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --mi-shadow-xl:               0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
  --mi-shadow-primary:          0 4px 12px rgba(4, 55, 242, 0.25);
  --mi-shadow-primary-lg:       0 8px 24px rgba(4, 55, 242, 0.32);
  --mi-shadow-orange:           0 4px 12px rgba(247, 147, 26, 0.30);
  --mi-shadow-orange-lg:        0 8px 24px rgba(247, 147, 26, 0.38);
  --mi-shadow-focus-ring:       0 0 0 3px rgba(4, 55, 242, 0.22);

  /* ── Layout ───────────────────────────────────────────────────── */
  --mi-container-max:           1280px;
  --mi-container-narrow:        960px;
  --mi-container-wide:          1440px;
  --mi-container-pad:           1rem;
  --mi-header-h:                64px;
  --mi-header-h-desktop:        88px;
  --mi-promo-h:                 36px;
  --mi-utility-h:               36px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --mi-ease-out:                cubic-bezier(0.22, 1, 0.36, 1);
  --mi-ease-in-out:             cubic-bezier(0.65, 0, 0.35, 1);
  --mi-ease-spring:             cubic-bezier(0.34, 1.56, 0.64, 1);
  --mi-dur-fast:                120ms;
  --mi-dur-base:                180ms;
  --mi-dur-slow:                280ms;
  --mi-dur-slower:              420ms;

  /* ── Z-index scale ────────────────────────────────────────────── */
  --mi-z-base:                  1;
  --mi-z-sticky:                100;
  --mi-z-header:                200;
  --mi-z-dropdown:              300;
  --mi-z-overlay:               800;
  --mi-z-modal:                 900;
  --mi-z-toast:                 950;
  --mi-z-floating:              1000;
}

/* Tablet upscale */
@media (min-width: 768px) {
  :root {
    --mi-fs-base:               1rem;
    --mi-fs-3xl:                2.25rem;     /* 36 */
    --mi-fs-4xl:                2.75rem;     /* 44 */
    --mi-fs-5xl:                3.5rem;      /* 56 */
    --mi-fs-6xl:                4.5rem;      /* 72 */
    --mi-container-pad:         1.5rem;
  }
}

/* Desktop upscale */
@media (min-width: 1024px) {
  :root {
    --mi-container-pad:         2rem;
  }
}


/* ═══ 04 · BASE TYPOGRAPHY ════════════════════════════════════════════════ */

html, body {
  font-family: var(--mi-font-body);
  font-size: var(--mi-fs-base);
  line-height: var(--mi-lh-normal);
  font-weight: var(--mi-fw-regular);
  color: var(--mi-text-body);
  background: var(--mi-bg-page);
  letter-spacing: var(--mi-letter-normal);
}

h1, h2, h3, h4, h5, h6,
.mi-h1, .mi-h2, .mi-h3, .mi-h4, .mi-h5, .mi-h6 {
  font-family: var(--mi-font-display);
  color: var(--mi-text-headline);
  font-weight: var(--mi-fw-bold);
  line-height: var(--mi-lh-tight);
  letter-spacing: var(--mi-letter-snug);
}

h1, .mi-h1 { font-size: var(--mi-fs-4xl); font-weight: var(--mi-fw-extra); letter-spacing: var(--mi-letter-tight); }
h2, .mi-h2 { font-size: var(--mi-fs-3xl); font-weight: var(--mi-fw-bold); }
h3, .mi-h3 { font-size: var(--mi-fs-2xl); font-weight: var(--mi-fw-bold); }
h4, .mi-h4 { font-size: var(--mi-fs-xl);  font-weight: var(--mi-fw-semibold); }
h5, .mi-h5 { font-size: var(--mi-fs-lg);  font-weight: var(--mi-fw-semibold); }
h6, .mi-h6 { font-size: var(--mi-fs-md);  font-weight: var(--mi-fw-semibold); letter-spacing: var(--mi-letter-wide); text-transform: uppercase; }

@media (min-width: 768px) {
  h1, .mi-h1 { font-size: var(--mi-fs-5xl); }
  h2, .mi-h2 { font-size: var(--mi-fs-4xl); }
  h3, .mi-h3 { font-size: var(--mi-fs-3xl); }
}

p { margin-bottom: var(--mi-sp-4); color: var(--mi-text-body); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--mi-fw-semibold); color: var(--mi-text-headline); }
em, i { font-style: italic; }
small { font-size: var(--mi-fs-sm); color: var(--mi-text-secondary); }

.mi-eyebrow,
.mi-overline {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-color-primary);
}

.mi-mono,
code, pre, kbd, samp {
  font-family: var(--mi-font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

a {
  color: var(--mi-text-link);
  transition: color var(--mi-dur-fast) var(--mi-ease-out);
}
a:hover { color: var(--mi-text-link-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--mi-color-primary); outline-offset: 3px; border-radius: 2px; }

.mi-text-muted     { color: var(--mi-text-muted) !important; }
.mi-text-secondary { color: var(--mi-text-secondary) !important; }
.mi-text-headline  { color: var(--mi-text-headline) !important; }
.mi-text-primary   { color: var(--mi-color-primary) !important; }
.mi-text-orange    { color: var(--mi-color-orange) !important; }
.mi-text-success   { color: var(--mi-color-success) !important; }
.mi-text-error     { color: var(--mi-color-error) !important; }


/* ═══ 05 · LAYOUT PRIMITIVES ══════════════════════════════════════════════ */

.mi-container {
  width: 100%;
  max-width: var(--mi-container-max);
  margin-inline: auto;
  padding-inline: var(--mi-container-pad);
}
.mi-container--narrow { max-width: var(--mi-container-narrow); }
.mi-container--wide   { max-width: var(--mi-container-wide); }
.mi-container--fluid  { max-width: 100%; }

.mi-section {
  padding-block: var(--mi-sp-12);
}
.mi-section--sm { padding-block: var(--mi-sp-8); }
.mi-section--lg { padding-block: var(--mi-sp-16); }
.mi-section--xl { padding-block: var(--mi-sp-20); }
.mi-section--soft   { background: var(--mi-bg-soft); }
.mi-section--muted  { background: var(--mi-bg-muted); }

@media (min-width: 768px) {
  .mi-section    { padding-block: var(--mi-sp-16); }
  .mi-section--sm{ padding-block: var(--mi-sp-10); }
  .mi-section--lg{ padding-block: var(--mi-sp-20); }
  .mi-section--xl{ padding-block: var(--mi-sp-24); }
}

.mi-stack > * + * { margin-top: var(--mi-stack-gap, var(--mi-sp-4)); }
.mi-stack-2  > * + * { margin-top: var(--mi-sp-2); }
.mi-stack-3  > * + * { margin-top: var(--mi-sp-3); }
.mi-stack-4  > * + * { margin-top: var(--mi-sp-4); }
.mi-stack-6  > * + * { margin-top: var(--mi-sp-6); }
.mi-stack-8  > * + * { margin-top: var(--mi-sp-8); }
.mi-stack-12 > * + * { margin-top: var(--mi-sp-12); }

.mi-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-cluster-gap, var(--mi-sp-3));
  align-items: center;
}

.mi-grid {
  display: grid;
  gap: var(--mi-grid-gap, var(--mi-sp-6));
}
.mi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .mi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mi-divider {
  border: 0;
  border-top: 1px solid var(--mi-border-subtle);
  margin-block: var(--mi-sp-8);
}


/* ═══ 06 · OPENCART BOOTSTRAP 3 GRID OVERRIDES ════════════════════════════ */
/* OpenCart 3.x ships Bootstrap 3. We keep its grid working but tighten gutters. */

.container, .container-fluid {
  padding-left: var(--mi-container-pad);
  padding-right: var(--mi-container-pad);
}
.container { max-width: var(--mi-container-max); margin-inline: auto; }

.row {
  margin-left: calc(var(--mi-sp-3) * -1);
  margin-right: calc(var(--mi-sp-3) * -1);
}

[class^="col-"], [class*=" col-"] {
  padding-left: var(--mi-sp-3);
  padding-right: var(--mi-sp-3);
}


/* ═══ 07 · PROMO BAR ══════════════════════════════════════════════════════ */

.mi-promo {
  background: linear-gradient(95deg, var(--mi-color-primary) 0%, #2455F8 50%, var(--mi-color-primary) 100%);
  color: var(--mi-text-on-primary);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-medium);
  letter-spacing: var(--mi-letter-snug);
  position: relative;
  overflow: hidden;
}
.mi-promo__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-sp-2);
  min-height: var(--mi-promo-h);
  padding-block: var(--mi-sp-2);
  text-align: center;
}
.mi-promo__diamond {
  display: inline-block;
  font-size: 0.9em;
}
.mi-promo__sep {
  opacity: 0.55;
  margin-inline: var(--mi-sp-2);
}
.mi-promo__cta {
  color: var(--mi-color-orange);
  font-weight: var(--mi-fw-semibold);
  margin-left: var(--mi-sp-2);
}
.mi-promo__cta:hover {
  color: #FFD485;
  text-decoration: none;
}


/* ═══ 08 · TOP UTILITY BAR ════════════════════════════════════════════════ */

.mi-utility {
  background: var(--mi-bg-soft);
  border-bottom: 1px solid var(--mi-border-subtle);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  display: none;     /* mobile: hide */
}
@media (min-width: 768px) {
  .mi-utility { display: block; }
}
.mi-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--mi-utility-h);
  gap: var(--mi-sp-4);
}
.mi-utility__left,
.mi-utility__right {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-5);
}
.mi-utility__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  color: var(--mi-text-secondary);
  transition: color var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-utility__item:hover {
  color: var(--mi-color-primary);
  text-decoration: none;
}
.mi-utility__item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mi-utility__item--whatsapp { color: var(--mi-color-whatsapp); font-weight: var(--mi-fw-medium); }
.mi-utility__item--whatsapp:hover { color: var(--mi-color-whatsapp-hover); }


/* ═══ 09 · HEADER (BASE) ══════════════════════════════════════════════════ */

.mi-header {
  background: var(--mi-bg-page);
  border-bottom: 1px solid var(--mi-border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--mi-z-header);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.mi-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--mi-sp-4);
  min-height: var(--mi-header-h);
}
@media (min-width: 1024px) {
  .mi-header__inner { min-height: var(--mi-header-h-desktop); }
}

.mi-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  flex-shrink: 0;
}
.mi-logo img {
  max-height: 44px;
  width: auto;
}
@media (min-width: 1024px) {
  .mi-logo img { max-height: 56px; }
}

.mi-search {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  display: none;          /* mobile: hide, surface as icon trigger */
}
@media (min-width: 768px) { .mi-search { display: block; } }

.mi-search__input {
  width: 100%;
  height: 44px;
  padding: 0 48px 0 var(--mi-sp-4);
  border: 1.5px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-full);
  background: var(--mi-bg-soft);
  font-size: var(--mi-fs-sm);
  transition: all var(--mi-dur-base) var(--mi-ease-out);
}
.mi-search__input:hover { border-color: var(--mi-border-defined); }
.mi-search__input:focus {
  outline: 0;
  background: var(--mi-bg-page);
  border-color: var(--mi-color-primary);
  box-shadow: var(--mi-shadow-focus-ring);
}
.mi-search__btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-color-primary);
  color: var(--mi-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-search__btn:hover { background: var(--mi-color-primary-hover); }
.mi-search__btn svg { width: 16px; height: 16px; }

.mi-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-1);
}
.mi-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--mi-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mi-text-headline);
  position: relative;
  transition: background var(--mi-dur-fast) var(--mi-ease-out), color var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-icon-btn:hover { background: var(--mi-bg-muted); color: var(--mi-color-primary); }
.mi-icon-btn svg { width: 22px; height: 22px; }
.mi-icon-btn__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-color-orange);
  color: var(--mi-text-on-orange);
  font-size: 11px;
  font-weight: var(--mi-fw-bold);
  font-family: var(--mi-font-mono);
  line-height: 18px;
  text-align: center;
}


/* ═══ 10 · MAIN NAVIGATION (base styles, mega menu enhanced in Phase 2) ═══ */

.mi-nav {
  background: var(--mi-bg-page);
  border-bottom: 1px solid var(--mi-border-subtle);
}
.mi-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-1);
  min-height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mi-nav__inner::-webkit-scrollbar { display: none; }

.mi-nav__item {
  position: relative;
  flex-shrink: 0;
}
.mi-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-1);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
  letter-spacing: var(--mi-letter-snug);
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
  transition: color var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-nav__link::after {
  content: "";
  position: absolute;
  left: var(--mi-sp-4);
  right: var(--mi-sp-4);
  bottom: 6px;
  height: 2px;
  background: var(--mi-color-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mi-dur-base) var(--mi-ease-out);
}
.mi-nav__link:hover,
.mi-nav__link.is-active,
.mi-nav__item:hover > .mi-nav__link {
  color: var(--mi-color-primary);
  text-decoration: none;
}
.mi-nav__link:hover::after,
.mi-nav__link.is-active::after,
.mi-nav__item:hover > .mi-nav__link::after { transform: scaleX(1); }

.mi-nav__link--hot::before {
  content: "HOT";
  display: inline-block;
  background: var(--mi-color-orange);
  color: var(--mi-text-on-orange);
  font-size: 9px;
  font-weight: var(--mi-fw-bold);
  letter-spacing: var(--mi-letter-wider);
  padding: 2px 5px;
  border-radius: var(--mi-radius-xs);
  margin-right: var(--mi-sp-2);
}


/* ═══ 11 · BUTTONS ════════════════════════════════════════════════════════ */

.mi-btn,
.btn {
  --_mi-btn-bg:        var(--mi-color-primary);
  --_mi-btn-bg-hover:  var(--mi-color-primary-hover);
  --_mi-btn-fg:        var(--mi-text-on-primary);
  --_mi-btn-border:    transparent;
  --_mi-btn-shadow:    var(--mi-shadow-primary);
  --_mi-btn-shadow-h:  var(--mi-shadow-primary-lg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-sp-2);
  height: 44px;
  padding: 0 var(--mi-sp-5);
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  letter-spacing: var(--mi-letter-snug);
  background: var(--_mi-btn-bg);
  color: var(--_mi-btn-fg);
  border: 1.5px solid var(--_mi-btn-border);
  border-radius: var(--mi-radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--_mi-btn-shadow);
  transition: transform var(--mi-dur-fast) var(--mi-ease-out),
              background var(--mi-dur-fast) var(--mi-ease-out),
              box-shadow var(--mi-dur-base) var(--mi-ease-out),
              border-color var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-btn:hover,
.btn:hover {
  background: var(--_mi-btn-bg-hover);
  color: var(--_mi-btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--_mi-btn-shadow-h);
  text-decoration: none;
}
.mi-btn:active,
.btn:active { transform: translateY(0); box-shadow: var(--_mi-btn-shadow); }
.mi-btn:focus-visible,
.btn:focus-visible { outline: 0; box-shadow: var(--_mi-btn-shadow), var(--mi-shadow-focus-ring); }
.mi-btn:disabled,
.btn:disabled,
.mi-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* — Variants ───────────────────────────────────────────── */
.mi-btn--orange,
.mi-btn--cart,
.btn-warning {
  --_mi-btn-bg:        var(--mi-color-orange);
  --_mi-btn-bg-hover:  var(--mi-color-orange-hover);
  --_mi-btn-fg:        var(--mi-text-on-orange);
  --_mi-btn-shadow:    var(--mi-shadow-orange);
  --_mi-btn-shadow-h:  var(--mi-shadow-orange-lg);
  background: linear-gradient(180deg, #F7931A 0%, #E07F00 100%);
}
.mi-btn--orange:hover,
.mi-btn--cart:hover { background: linear-gradient(180deg, #FFA63B 0%, #D97706 100%); }

.mi-btn--secondary,
.btn-default {
  --_mi-btn-bg:        var(--mi-bg-page);
  --_mi-btn-bg-hover:  var(--mi-color-primary);
  --_mi-btn-fg:        var(--mi-color-primary);
  --_mi-btn-border:    var(--mi-color-primary);
  --_mi-btn-shadow:    none;
  --_mi-btn-shadow-h:  var(--mi-shadow-sm);
}
.mi-btn--secondary:hover,
.btn-default:hover {
  --_mi-btn-fg: var(--mi-text-on-primary);
}

.mi-btn--ghost {
  --_mi-btn-bg:        transparent;
  --_mi-btn-bg-hover:  var(--mi-bg-muted);
  --_mi-btn-fg:        var(--mi-text-headline);
  --_mi-btn-shadow:    none;
  --_mi-btn-shadow-h:  none;
}
.mi-btn--ghost:hover { color: var(--mi-color-primary); }

.mi-btn--whatsapp,
.btn-success {
  --_mi-btn-bg:        var(--mi-color-whatsapp);
  --_mi-btn-bg-hover:  var(--mi-color-whatsapp-hover);
  --_mi-btn-fg:        #FFFFFF;
  --_mi-btn-shadow:    0 4px 12px rgba(37, 211, 102, 0.30);
  --_mi-btn-shadow-h:  0 8px 24px rgba(37, 211, 102, 0.38);
}

.mi-btn--danger,
.btn-danger {
  --_mi-btn-bg:        var(--mi-color-error);
  --_mi-btn-bg-hover:  #DC2626;
  --_mi-btn-fg:        #FFFFFF;
  --_mi-btn-shadow:    0 4px 12px rgba(239, 68, 68, 0.25);
  --_mi-btn-shadow-h:  0 8px 24px rgba(239, 68, 68, 0.32);
}

/* — Sizes ──────────────────────────────────────────────── */
.mi-btn--xs, .btn-xs { height: 32px; padding: 0 var(--mi-sp-3); font-size: var(--mi-fs-xs); }
.mi-btn--sm, .btn-sm { height: 38px; padding: 0 var(--mi-sp-4); font-size: var(--mi-fs-sm); }
.mi-btn--lg, .btn-lg { height: 52px; padding: 0 var(--mi-sp-7); font-size: var(--mi-fs-md); border-radius: var(--mi-radius-lg); }
.mi-btn--xl          { height: 60px; padding: 0 var(--mi-sp-8); font-size: var(--mi-fs-lg); border-radius: var(--mi-radius-lg); }
.mi-btn--block, .btn-block { width: 100%; }

.mi-btn--icon-only {
  width: 44px; padding: 0;
}
.mi-btn--icon-only.mi-btn--sm { width: 38px; }
.mi-btn--icon-only.mi-btn--lg { width: 52px; }


/* ═══ 12 · FORMS ══════════════════════════════════════════════════════════ */

.mi-label,
.form-group label,
label {
  display: inline-block;
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
  margin-bottom: var(--mi-sp-2);
  letter-spacing: var(--mi-letter-snug);
}

.mi-input,
.mi-textarea,
.mi-select,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
  width: 100%;
  height: 44px;
  padding: 0 var(--mi-sp-4);
  font-family: var(--mi-font-body);
  font-size: var(--mi-fs-base);    /* 16px — prevents iOS zoom */
  color: var(--mi-text-headline);
  background: var(--mi-bg-page);
  border: 1.5px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-sm);
  transition: border-color var(--mi-dur-fast) var(--mi-ease-out),
              box-shadow var(--mi-dur-base) var(--mi-ease-out),
              background var(--mi-dur-fast) var(--mi-ease-out);
  appearance: none;
  -webkit-appearance: none;
}
textarea,
.mi-textarea { height: auto; min-height: 120px; padding-block: var(--mi-sp-3); resize: vertical; line-height: var(--mi-lh-normal); }

.mi-input:hover,
.form-control:hover { border-color: var(--mi-border-defined); }

.mi-input:focus,
.mi-textarea:focus,
.mi-select:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--mi-color-primary);
  box-shadow: var(--mi-shadow-focus-ring);
}
.mi-input::placeholder,
.form-control::placeholder { color: var(--mi-text-muted); }

.mi-input:disabled,
.form-control:disabled,
.mi-input.is-readonly {
  background: var(--mi-bg-soft);
  color: var(--mi-text-secondary);
  cursor: not-allowed;
}

.mi-input.is-invalid,
.form-control.is-invalid,
.has-error .form-control { border-color: var(--mi-color-error); }
.mi-input.is-invalid:focus,
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20); }
.mi-input.is-valid,
.form-control.is-valid { border-color: var(--mi-color-success); }
.mi-input.is-valid:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20); }

.mi-help,
.help-block {
  display: block;
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  margin-top: var(--mi-sp-2);
}
.text-danger,
.has-error .help-block { color: var(--mi-color-error); }

select,
.mi-select,
select.form-control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748B' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Checkbox / radio (custom) */
.mi-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--mi-sp-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--mi-fs-sm);
}
.mi-check input[type="checkbox"],
.mi-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--mi-border-defined);
  border-radius: var(--mi-radius-xs);
  background: var(--mi-bg-page);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  transition: all var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-check input[type="radio"] { border-radius: var(--mi-radius-full); }
.mi-check input:hover { border-color: var(--mi-color-primary); }
.mi-check input:checked {
  background: var(--mi-color-primary);
  border-color: var(--mi-color-primary);
}
.mi-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.5l3 3 6-6'/></svg>") no-repeat center / 14px;
}
.mi-check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.mi-check input:focus-visible { box-shadow: var(--mi-shadow-focus-ring); }


/* ═══ 13 · CARDS (generic) ════════════════════════════════════════════════ */

.mi-card {
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  padding: var(--mi-sp-6);
  transition: border-color var(--mi-dur-base) var(--mi-ease-out),
              box-shadow var(--mi-dur-base) var(--mi-ease-out),
              transform var(--mi-dur-base) var(--mi-ease-out);
}
.mi-card--hover:hover {
  border-color: var(--mi-border-defined);
  box-shadow: var(--mi-shadow-md);
  transform: translateY(-2px);
}
.mi-card--flat   { box-shadow: none; }
.mi-card--soft   { background: var(--mi-bg-soft); border-color: transparent; }
.mi-card--accent { border-color: var(--mi-color-primary); border-width: 1.5px; }
.mi-card__header { margin-bottom: var(--mi-sp-4); padding-bottom: var(--mi-sp-4); border-bottom: 1px solid var(--mi-border-subtle); }
.mi-card__footer { margin-top: var(--mi-sp-4); padding-top: var(--mi-sp-4); border-top: 1px solid var(--mi-border-subtle); }


/* ═══ 14 · PRODUCT CARDS (target both .mi-pc and OpenCart .product-thumb) ═ */

.mi-pc,
.product-thumb,
.product-layout > div {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  overflow: hidden;
  transition: border-color var(--mi-dur-base) var(--mi-ease-out),
              box-shadow var(--mi-dur-base) var(--mi-ease-out),
              transform var(--mi-dur-base) var(--mi-ease-out);
  height: 100%;
}
.mi-pc:hover,
.product-thumb:hover {
  border-color: var(--mi-border-defined);
  box-shadow: var(--mi-shadow-lg);
  transform: translateY(-3px);
}

/* Image area — square ratio, white background, padding around image */
.mi-pc__image,
.product-thumb .image,
.product-thumb > .image {
  position: relative;
  background: var(--mi-bg-page);
  padding: var(--mi-sp-5);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--mi-border-subtle);
  overflow: hidden;
}
.mi-pc__image img,
.product-thumb .image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--mi-dur-slower) var(--mi-ease-out);
}
.mi-pc:hover .mi-pc__image img,
.product-thumb:hover .image img { transform: scale(1.04); }

/* Sale tag — top-left badge */
.mi-pc__tag,
.product-thumb .image::before {
  position: absolute;
  top: var(--mi-sp-3);
  left: var(--mi-sp-3);
  z-index: 2;
  padding: 4px var(--mi-sp-2);
  background: var(--mi-color-orange);
  color: var(--mi-text-on-orange);
  font-size: 11px;
  font-weight: var(--mi-fw-bold);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  border-radius: var(--mi-radius-xs);
  font-family: var(--mi-font-display);
}
.mi-pc__tag--new { background: var(--mi-color-success); }
.mi-pc__tag--hot { background: var(--mi-color-error); }

/* Wishlist / quick-action button — top-right corner */
.mi-pc__action {
  position: absolute;
  top: var(--mi-sp-3);
  right: var(--mi-sp-3);
  width: 36px;
  height: 36px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-bg-page);
  border: 1px solid var(--mi-border-subtle);
  color: var(--mi-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  transition: all var(--mi-dur-base) var(--mi-ease-out);
}
.mi-pc:hover .mi-pc__action {
  opacity: 1;
  transform: translateY(0);
}
.mi-pc__action:hover { color: var(--mi-color-primary); border-color: var(--mi-color-primary); }
.mi-pc__action svg { width: 16px; height: 16px; }

/* Body */
.mi-pc__body,
.product-thumb .caption {
  padding: var(--mi-sp-4) var(--mi-sp-5) var(--mi-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  flex: 1;
}
.mi-pc__brand {
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-color-primary);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
}
.mi-pc__title,
.product-thumb h4 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
  line-height: var(--mi-lh-snug);
  letter-spacing: var(--mi-letter-snug);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.mi-pc__title a,
.product-thumb h4 a {
  color: inherit;
  text-decoration: none;
}
.mi-pc__title a:hover,
.product-thumb h4 a:hover { color: var(--mi-color-primary); }

/* Spec strip — small mono row showing hashrate/power/efficiency */
.mi-pc__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mi-sp-2);
  padding: var(--mi-sp-3);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-sm);
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-xs);
}
.mi-pc__spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.mi-pc__spec-label {
  color: var(--mi-text-muted);
  font-size: 10px;
  font-weight: var(--mi-fw-medium);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  font-family: var(--mi-font-display);
}
.mi-pc__spec-value {
  color: var(--mi-text-headline);
  font-weight: var(--mi-fw-semibold);
}

/* ROI chip — eye-catching badge showing payback or daily profit */
.mi-pc__roi {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--mi-color-success-soft);
  color: var(--mi-color-success);
  border-radius: var(--mi-radius-full);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  font-family: var(--mi-font-mono);
}
.mi-pc__roi::before {
  content: "↗";
  font-weight: var(--mi-fw-bold);
}

/* Price row */
.mi-pc__price-row,
.product-thumb .price {
  display: flex;
  align-items: baseline;
  gap: var(--mi-sp-2);
  flex-wrap: wrap;
  font-family: var(--mi-font-mono);
}
.mi-pc__price,
.product-thumb .price-new,
.product-thumb .price > span:first-child {
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-orange);
  letter-spacing: var(--mi-letter-tight);
}
.mi-pc__price-old,
.product-thumb .price-old {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-muted);
  text-decoration: line-through;
  font-weight: var(--mi-fw-medium);
}
.mi-pc__price-tax,
.product-thumb .price-tax { display: none; }   /* tax exclusive: hide noise */

/* Add to cart button placement */
.mi-pc__cta,
.product-thumb .button-group {
  display: flex;
  gap: var(--mi-sp-2);
  margin-top: auto;
  padding-top: var(--mi-sp-2);
}
.mi-pc__cta .mi-btn,
.product-thumb .button-group button { width: 100%; }


/* ═══ 15 · PRICE, SALE TAGS & BADGES ══════════════════════════════════════ */

.mi-price {
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-orange);
  letter-spacing: var(--mi-letter-tight);
}
.mi-price--lg { font-size: var(--mi-fs-3xl); }
.mi-price--xl { font-size: var(--mi-fs-4xl); }
.mi-price__old {
  font-size: 0.65em;
  color: var(--mi-text-muted);
  text-decoration: line-through;
  margin-left: var(--mi-sp-2);
  font-weight: var(--mi-fw-medium);
}
.mi-price__save {
  display: inline-block;
  font-size: var(--mi-fs-xs);
  background: var(--mi-color-success-soft);
  color: var(--mi-color-success);
  font-weight: var(--mi-fw-semibold);
  padding: 2px 8px;
  border-radius: var(--mi-radius-xs);
  margin-left: var(--mi-sp-2);
  font-family: var(--mi-font-display);
}

.mi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-1);
  padding: 3px 10px;
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  letter-spacing: var(--mi-letter-wide);
  border-radius: var(--mi-radius-full);
  background: var(--mi-bg-muted);
  color: var(--mi-text-secondary);
  font-family: var(--mi-font-display);
  line-height: 1.4;
}
.mi-badge--primary { background: var(--mi-color-primary-soft); color: var(--mi-color-primary); }
.mi-badge--orange  { background: var(--mi-color-orange-soft); color: var(--mi-color-orange-hover); }
.mi-badge--success { background: var(--mi-color-success-soft); color: var(--mi-color-success); }
.mi-badge--warning { background: var(--mi-color-warning-soft); color: var(--mi-color-warning); }
.mi-badge--error   { background: var(--mi-color-error-soft); color: var(--mi-color-error); }
.mi-badge--solid   { background: var(--mi-color-primary); color: var(--mi-text-on-primary); }


/* ═══ 16 · ALERTS ═════════════════════════════════════════════════════════ */

.mi-alert,
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-4) var(--mi-sp-5);
  border-radius: var(--mi-radius-md);
  border: 1px solid transparent;
  font-size: var(--mi-fs-sm);
  line-height: var(--mi-lh-snug);
  margin-bottom: var(--mi-sp-4);
}
.mi-alert__icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.mi-alert--info,    .alert-info    { background: var(--mi-color-info-soft);    border-color: rgba(14, 165, 233, 0.25); color: #075985; }
.mi-alert--success, .alert-success { background: var(--mi-color-success-soft); border-color: rgba(16, 185, 129, 0.25); color: #065F46; }
.mi-alert--warning, .alert-warning { background: var(--mi-color-warning-soft); border-color: rgba(245, 158, 11, 0.25); color: #92400E; }
.mi-alert--error,   .alert-danger  { background: var(--mi-color-error-soft);   border-color: rgba(239, 68, 68, 0.25); color: #991B1B; }


/* ═══ 17 · TABLES ═════════════════════════════════════════════════════════ */

.mi-table,
.table {
  width: 100%;
  font-size: var(--mi-fs-sm);
  border-collapse: collapse;
  background: var(--mi-bg-card);
  border-radius: var(--mi-radius-md);
  overflow: hidden;
}
.mi-table th,
.table > thead > tr > th {
  background: var(--mi-bg-soft);
  color: var(--mi-text-headline);
  font-weight: var(--mi-fw-semibold);
  font-size: var(--mi-fs-xs);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  padding: var(--mi-sp-3) var(--mi-sp-4);
  text-align: left;
  border-bottom: 1px solid var(--mi-border-subtle);
}
.mi-table td,
.table > tbody > tr > td {
  padding: var(--mi-sp-3) var(--mi-sp-4);
  border-bottom: 1px solid var(--mi-border-subtle);
  vertical-align: middle;
}
.mi-table tr:last-child td,
.table > tbody > tr:last-child > td { border-bottom: 0; }
.mi-table--striped tbody tr:nth-child(even),
.table-striped > tbody > tr:nth-child(even) { background: var(--mi-bg-soft); }
.mi-table--hover tbody tr:hover,
.table-hover > tbody > tr:hover { background: var(--mi-color-primary-50); }
.mi-table-wrap,
.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-md);
}


/* ═══ 18 · BREADCRUMBS ════════════════════════════════════════════════════ */

.mi-crumbs,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mi-sp-2);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  padding: var(--mi-sp-3) 0;
  margin: 0;
  background: transparent;
  list-style: none;
}
.mi-crumbs li,
.breadcrumb > li {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
}
.mi-crumbs li + li::before,
.breadcrumb > li + li::before {
  content: "›";
  color: var(--mi-text-muted);
  font-size: var(--mi-fs-base);
  margin-right: var(--mi-sp-1);
}
.mi-crumbs a,
.breadcrumb a {
  color: var(--mi-text-secondary);
  text-decoration: none;
}
.mi-crumbs a:hover,
.breadcrumb a:hover { color: var(--mi-color-primary); }
.mi-crumbs li:last-child,
.breadcrumb > .active { color: var(--mi-text-headline); font-weight: var(--mi-fw-semibold); }


/* ═══ 19 · TABS / ACCORDIONS ══════════════════════════════════════════════
   NOTE: This legacy block is for Bootstrap .nav-tabs fallback ONLY.
   Do NOT add .mi-tabs to the selectors — the product page tabs use a
   completely different layout (flex nav above stacked panels) defined
   further down in this file around line 4244. Keeping these scoped to
   .nav-tabs prevents the product-page tabs from accidentally inheriting
   `display: flex` on their root container, which would line the nav and
   panels side-by-side instead of stacking them.
   ──────────────────────────────────────────────────────────────────── */

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1.5px solid var(--mi-border-subtle);
  margin-bottom: var(--mi-sp-6);
  padding: 0;
  list-style: none;
}
.nav-tabs > li > a {
  padding: var(--mi-sp-3) var(--mi-sp-5);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color var(--mi-dur-fast) var(--mi-ease-out),
              border-color var(--mi-dur-fast) var(--mi-ease-out);
  letter-spacing: var(--mi-letter-snug);
  margin-bottom: -1.5px;
}
.nav-tabs > li > a:hover { color: var(--mi-text-headline); border-bottom-color: var(--mi-border-defined); }
.nav-tabs > li.active > a {
  color: var(--mi-color-primary);
  border-bottom-color: var(--mi-color-primary);
  background: transparent;
}


/* ═══ 20 · FOOTER (base) ══════════════════════════════════════════════════ */

.mi-footer {
  background: #0F172A;
  color: #CBD5E1;
  padding-block: var(--mi-sp-12) var(--mi-sp-6);
  margin-top: var(--mi-sp-16);
}
.mi-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-8);
  margin-bottom: var(--mi-sp-10);
}
@media (min-width: 640px)  { .mi-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mi-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; } }

.mi-footer__heading {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-bold);
  color: #FFFFFF;
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  margin-bottom: var(--mi-sp-4);
}
.mi-footer ul { list-style: none; padding: 0; margin: 0; }
.mi-footer__link {
  display: block;
  padding: var(--mi-sp-1) 0;
  color: #94A3B8;
  font-size: var(--mi-fs-sm);
  transition: color var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-footer__link:hover { color: #FFFFFF; text-decoration: none; }
.mi-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-2) 0;
  font-size: var(--mi-fs-sm);
  color: #CBD5E1;
}
.mi-footer__contact svg {
  width: 16px; height: 16px;
  margin-top: 4px;
  color: var(--mi-color-orange);
  flex-shrink: 0;
}
.mi-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--mi-sp-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--mi-sp-4);
  font-size: var(--mi-fs-xs);
  color: #64748B;
}
.mi-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sp-2);
  align-items: center;
}
.mi-footer__pay img {
  height: 22px;
  opacity: 0.75;
  filter: brightness(0) invert(1);
  transition: opacity var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-footer__pay img:hover { opacity: 1; }


/* ═══ 21 · WHATSAPP FLOATING BUTTON (cascades on every page) ══════════════ */

.mi-wa {
  position: fixed;
  bottom: var(--mi-sp-5);
  right: var(--mi-sp-5);
  z-index: var(--mi-z-floating);
  width: 56px;
  height: 56px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-color-whatsapp);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42);
  transition: transform var(--mi-dur-base) var(--mi-ease-out),
              box-shadow var(--mi-dur-base) var(--mi-ease-out);
  text-decoration: none;
}
.mi-wa::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-color-whatsapp);
  opacity: 0.35;
  z-index: -1;
  animation: mi-wa-pulse 2.4s var(--mi-ease-out) infinite;
}
.mi-wa:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55);
  text-decoration: none;
  color: #FFFFFF;
}
.mi-wa svg { width: 28px; height: 28px; }
.mi-wa__label {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: #0F172A;
  color: #FFFFFF;
  padding: var(--mi-sp-2) var(--mi-sp-3);
  border-radius: var(--mi-radius-md);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mi-dur-base) var(--mi-ease-out);
}
.mi-wa:hover .mi-wa__label { opacity: 1; }
@media (min-width: 1024px) {
  .mi-wa { bottom: var(--mi-sp-8); right: var(--mi-sp-8); width: 64px; height: 64px; }
  .mi-wa svg { width: 32px; height: 32px; }
}
@keyframes mi-wa-pulse {
  0%   { transform: scale(1);   opacity: 0.40; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}


/* ═══ 22 · COOKIE CONSENT BAR ═════════════════════════════════════════════ */

.mi-cookie {
  position: fixed;
  left: var(--mi-sp-4);
  right: var(--mi-sp-4);
  bottom: var(--mi-sp-4);
  z-index: var(--mi-z-overlay);
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-xl);
  padding: var(--mi-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-4);
  font-size: var(--mi-fs-sm);
  max-width: 720px;
  margin-inline: auto;
  transform: translateY(110%);
  transition: transform var(--mi-dur-slower) var(--mi-ease-spring);
}
.mi-cookie.is-visible { transform: translateY(0); }
.mi-cookie__actions {
  display: flex;
  gap: var(--mi-sp-2);
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .mi-cookie { flex-direction: row; align-items: center; gap: var(--mi-sp-6); }
  .mi-cookie__actions { flex-shrink: 0; }
}


/* ═══ 23 · STICKY MOBILE ADD-TO-CART (product page) ═══════════════════════ */

.mi-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--mi-z-sticky);
  background: var(--mi-bg-card);
  border-top: 1px solid var(--mi-border-subtle);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  padding-bottom: calc(var(--mi-sp-3) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(110%);
  transition: transform var(--mi-dur-slow) var(--mi-ease-out);
}
.mi-mobile-bar.is-visible { transform: translateY(0); }
.mi-mobile-bar__price {
  flex: 1;
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-orange);
}
.mi-mobile-bar__price small {
  display: block;
  font-family: var(--mi-font-display);
  font-size: 11px;
  color: var(--mi-text-muted);
  font-weight: var(--mi-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
}
@media (min-width: 1024px) {
  .mi-mobile-bar { display: none; }
}


/* ═══ 24 · HERO / VIDEO HERO (homepage) ═══════════════════════════════════ */

.mi-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF1FE 100%);
  isolation: isolate;
}
.mi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(4, 55, 242, 0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(247, 147, 26, 0.10), transparent 45%);
  z-index: -1;
}
.mi-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-10);
  align-items: center;
  padding-block: var(--mi-sp-12);
}
@media (min-width: 1024px) {
  .mi-hero__inner { grid-template-columns: 1fr 1fr; padding-block: var(--mi-sp-20); gap: var(--mi-sp-12); }
}
.mi-hero__eyebrow {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-primary);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  margin-bottom: var(--mi-sp-4);
}
.mi-hero__title {
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-extra);
  letter-spacing: var(--mi-letter-tight);
  line-height: var(--mi-lh-tight);
  color: var(--mi-text-headline);
  margin-bottom: var(--mi-sp-5);
}
.mi-hero__title em {
  color: var(--mi-color-primary);
  font-style: normal;
}
@media (min-width: 768px) { .mi-hero__title { font-size: var(--mi-fs-5xl); } }
@media (min-width: 1024px){ .mi-hero__title { font-size: var(--mi-fs-6xl); } }
.mi-hero__lead {
  font-size: var(--mi-fs-lg);
  color: var(--mi-text-body);
  margin-bottom: var(--mi-sp-7);
  line-height: var(--mi-lh-normal);
  max-width: 56ch;
}
.mi-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--mi-sp-3); }

.mi-hero__video {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--mi-radius-2xl);
  overflow: hidden;
  background: #0F172A;
  box-shadow: var(--mi-shadow-xl);
}
.mi-hero__video video,
.mi-hero__video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}


/* ═══ 25 · SECTIONS & BANDS ═══════════════════════════════════════════════ */

.mi-section-head {
  text-align: center;
  margin-bottom: var(--mi-sp-10);
}
.mi-section-head__eyebrow {
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-primary);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  margin-bottom: var(--mi-sp-2);
}
.mi-section-head__title {
  font-size: var(--mi-fs-3xl);
  font-weight: var(--mi-fw-extra);
  color: var(--mi-text-headline);
  letter-spacing: var(--mi-letter-tight);
  margin-bottom: var(--mi-sp-3);
}
.mi-section-head__lead {
  font-size: var(--mi-fs-md);
  color: var(--mi-text-secondary);
  max-width: 60ch;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .mi-section-head__title { font-size: var(--mi-fs-4xl); }
}


/* ═══ 26 · CRYPTO TICKER (live price strip) ══════════════════════════════ */

.mi-ticker {
  background: #0F172A;
  color: #E2E8F0;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-xs);
  overflow: hidden;
  position: relative;
}
.mi-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-8);
  padding: var(--mi-sp-3) 0;
  white-space: nowrap;
  animation: mi-ticker-scroll 60s linear infinite;
  will-change: transform;
}
.mi-ticker:hover .mi-ticker__track { animation-play-state: paused; }
.mi-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
}
.mi-ticker__sym {
  color: var(--mi-color-orange);
  font-weight: var(--mi-fw-bold);
}
.mi-ticker__price { color: #FFFFFF; font-weight: var(--mi-fw-semibold); }
.mi-ticker__delta--up   { color: var(--mi-color-success); }
.mi-ticker__delta--down { color: var(--mi-color-error); }
@keyframes mi-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ═══ 27 · USP BAR ════════════════════════════════════════════════════════ */

.mi-usp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--mi-border-subtle);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) { .mi-usp { grid-template-columns: repeat(4, 1fr); } }
.mi-usp__cell {
  background: var(--mi-bg-card);
  padding: var(--mi-sp-5) var(--mi-sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mi-sp-2);
}
.mi-usp__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mi-usp__icon svg { width: 20px; height: 20px; }
.mi-usp__title {
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
  letter-spacing: var(--mi-letter-snug);
}
.mi-usp__desc {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
}


/* ═══ 28 · STATS / COUNTERS ═══════════════════════════════════════════════ */

.mi-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mi-sp-6);
}
@media (min-width: 768px) { .mi-stats { grid-template-columns: repeat(4, 1fr); } }
.mi-stat { text-align: center; }
.mi-stat__num {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-primary);
  letter-spacing: var(--mi-letter-tight);
  line-height: 1;
  margin-bottom: var(--mi-sp-2);
}
.mi-stat__label {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
  font-weight: var(--mi-fw-medium);
}


/* ═══ 29 · TESTIMONIALS ═══════════════════════════════════════════════════ */

.mi-testimonial {
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  padding: var(--mi-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-4);
  height: 100%;
}
.mi-testimonial__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--mi-color-orange);
}
.mi-testimonial__stars svg { width: 16px; height: 16px; fill: currentColor; }
.mi-testimonial__quote {
  font-size: var(--mi-fs-md);
  color: var(--mi-text-body);
  line-height: var(--mi-lh-normal);
  font-style: italic;
}
.mi-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  margin-top: auto;
  padding-top: var(--mi-sp-4);
  border-top: 1px solid var(--mi-border-subtle);
}
.mi-testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-bg-muted);
  color: var(--mi-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--mi-fw-bold);
  flex-shrink: 0;
}
.mi-testimonial__name {
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
  font-size: var(--mi-fs-sm);
}
.mi-testimonial__meta {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
}


/* ═══ 30 · TRUST BADGES ═══════════════════════════════════════════════════ */

.mi-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--mi-sp-6) var(--mi-sp-10);
  padding: var(--mi-sp-6) 0;
}
.mi-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  letter-spacing: var(--mi-letter-wide);
  text-transform: uppercase;
}
.mi-trust__item svg {
  width: 18px; height: 18px;
  color: var(--mi-color-success);
}


/* ═══ 31 · CATEGORY / FILTER / SORT ═══════════════════════════════════════ */

.mi-cat-head {
  background: linear-gradient(135deg, var(--mi-bg-soft), var(--mi-color-primary-50));
  border-radius: var(--mi-radius-lg);
  padding: var(--mi-sp-8) var(--mi-sp-6);
  margin-bottom: var(--mi-sp-8);
  text-align: center;
}
.mi-cat-head__title {
  font-size: var(--mi-fs-3xl);
  font-weight: var(--mi-fw-extra);
  color: var(--mi-text-headline);
  margin-bottom: var(--mi-sp-3);
}
.mi-cat-head__lead {
  font-size: var(--mi-fs-md);
  color: var(--mi-text-secondary);
  max-width: 60ch;
  margin-inline: auto;
}

.mi-filter {
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  padding: var(--mi-sp-5);
}
.mi-filter__group + .mi-filter__group { margin-top: var(--mi-sp-6); padding-top: var(--mi-sp-6); border-top: 1px solid var(--mi-border-subtle); }
.mi-filter__heading {
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  margin-bottom: var(--mi-sp-3);
}

.mi-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mi-sp-3);
  flex-wrap: wrap;
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-md);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  margin-bottom: var(--mi-sp-6);
}
.mi-sort__count { font-size: var(--mi-fs-sm); color: var(--mi-text-secondary); }
.mi-sort__controls {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  flex-wrap: wrap;
}
.mi-view-toggle {
  display: inline-flex;
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-sm);
  overflow: hidden;
}
.mi-view-toggle__btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mi-text-secondary);
  background: var(--mi-bg-page);
  transition: all var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-view-toggle__btn + .mi-view-toggle__btn { border-left: 1px solid var(--mi-border-subtle); }
.mi-view-toggle__btn:hover { color: var(--mi-text-headline); }
.mi-view-toggle__btn.is-active {
  background: var(--mi-color-primary);
  color: var(--mi-text-on-primary);
}


/* ═══ Pagination ══════════════════════════════════════════════════════════ */

.pagination,
.mi-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-1);
  list-style: none;
  padding: 0;
  margin: var(--mi-sp-8) 0;
  border-radius: 0;
  flex-wrap: wrap;
}
.pagination > li > a,
.pagination > li > span,
.mi-pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--mi-sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
  background: var(--mi-bg-page);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-sm) !important;
  transition: all var(--mi-dur-fast) var(--mi-ease-out);
}
.pagination > li > a:hover,
.mi-pagination__btn:hover {
  border-color: var(--mi-color-primary);
  color: var(--mi-color-primary);
  text-decoration: none;
}
.pagination > .active > a,
.pagination > .active > span,
.mi-pagination__btn.is-active {
  background: var(--mi-color-primary);
  color: var(--mi-text-on-primary);
  border-color: var(--mi-color-primary);
}


/* ═══ 32 · ANIMATIONS / KEYFRAMES ═════════════════════════════════════════ */

@keyframes mi-fade-in   { from { opacity: 0; }                 to { opacity: 1; } }
@keyframes mi-fade-up   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mi-fade-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mi-pop       { from { opacity: 0; transform: scale(0.96); }      to { opacity: 1; transform: scale(1); } }
@keyframes mi-spin      { to { transform: rotate(360deg); } }
@keyframes mi-pulse     { 50% { opacity: 0.6; } }
@keyframes mi-shimmer   { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.mi-fade-in   { animation: mi-fade-in   var(--mi-dur-slow) var(--mi-ease-out) both; }
.mi-fade-up   { animation: mi-fade-up   var(--mi-dur-slower) var(--mi-ease-out) both; }
.mi-fade-down { animation: mi-fade-down var(--mi-dur-slower) var(--mi-ease-out) both; }
.mi-pop       { animation: mi-pop       var(--mi-dur-slow) var(--mi-ease-spring) both; }
.mi-spin      { animation: mi-spin 1s linear infinite; }

.mi-skeleton {
  background: linear-gradient(90deg, var(--mi-bg-muted) 0%, var(--mi-bg-soft) 50%, var(--mi-bg-muted) 100%);
  background-size: 200% 100%;
  animation: mi-shimmer 1.4s linear infinite;
  border-radius: var(--mi-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══ 33 · UTILITY CLASSES ════════════════════════════════════════════════ */

/* Display */
.mi-block         { display: block; }
.mi-inline        { display: inline; }
.mi-inline-block  { display: inline-block; }
.mi-flex          { display: flex; }
.mi-inline-flex   { display: inline-flex; }
.mi-grid-d        { display: grid; }
.mi-hidden        { display: none !important; }

/* Flex helpers */
.mi-items-center  { align-items: center; }
.mi-items-start   { align-items: flex-start; }
.mi-items-end     { align-items: flex-end; }
.mi-justify-center { justify-content: center; }
.mi-justify-between { justify-content: space-between; }
.mi-justify-end   { justify-content: flex-end; }
.mi-flex-col      { flex-direction: column; }
.mi-flex-wrap     { flex-wrap: wrap; }
.mi-gap-1 { gap: var(--mi-sp-1); }
.mi-gap-2 { gap: var(--mi-sp-2); }
.mi-gap-3 { gap: var(--mi-sp-3); }
.mi-gap-4 { gap: var(--mi-sp-4); }
.mi-gap-6 { gap: var(--mi-sp-6); }
.mi-gap-8 { gap: var(--mi-sp-8); }

/* Text alignment */
.mi-text-left    { text-align: left; }
.mi-text-center  { text-align: center; }
.mi-text-right   { text-align: right; }
.mi-text-balance { text-wrap: balance; }
.mi-text-pretty  { text-wrap: pretty; }
.mi-uppercase    { text-transform: uppercase; letter-spacing: var(--mi-letter-wider); }
.mi-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Margins */
.mi-mt-0 { margin-top: 0 !important; }
.mi-mt-2 { margin-top: var(--mi-sp-2); }
.mi-mt-4 { margin-top: var(--mi-sp-4); }
.mi-mt-6 { margin-top: var(--mi-sp-6); }
.mi-mt-8 { margin-top: var(--mi-sp-8); }
.mi-mb-0 { margin-bottom: 0 !important; }
.mi-mb-2 { margin-bottom: var(--mi-sp-2); }
.mi-mb-4 { margin-bottom: var(--mi-sp-4); }
.mi-mb-6 { margin-bottom: var(--mi-sp-6); }
.mi-mb-8 { margin-bottom: var(--mi-sp-8); }

/* Backgrounds */
.mi-bg-page  { background: var(--mi-bg-page) !important; }
.mi-bg-soft  { background: var(--mi-bg-soft) !important; }
.mi-bg-muted { background: var(--mi-bg-muted) !important; }

/* Visually hidden (screen-reader only) */
.mi-sr-only,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Scroll-shadow helper */
.mi-scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Aspect ratio helpers */
.mi-ratio-1 { aspect-ratio: 1 / 1; }
.mi-ratio-4-3 { aspect-ratio: 4 / 3; }
.mi-ratio-16-9 { aspect-ratio: 16 / 9; }
.mi-ratio-21-9 { aspect-ratio: 21 / 9; }


/* ═══ 34 · RESPONSIVE BREAKPOINT ADJUSTMENTS ══════════════════════════════ */

/* Hide on mobile */
.mi-hide-mobile { display: none !important; }
@media (min-width: 768px)  { .mi-hide-mobile { display: initial !important; } }

/* Hide on tablet+ */
.mi-show-mobile { display: initial; }
@media (min-width: 768px)  { .mi-show-mobile { display: none !important; } }

/* Mobile-only blocks */
@media (max-width: 767px) {
  .mi-hero__title { font-size: var(--mi-fs-3xl); }
  .mi-section-head__title { font-size: var(--mi-fs-2xl); }
  body { padding-bottom: 0; }
  /* Touch-friendly tap target enforcement */
  .mi-btn, .btn, .mi-icon-btn, .mi-utility__item,
  .mi-nav__link, .pagination > li > a {
    min-height: 44px;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .mi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Large screens */
@media (min-width: 1280px) {
  .mi-container { padding-inline: 0; }
}


/* ═══ 35 · PRINT STYLES ═══════════════════════════════════════════════════ */

@media print {
  .mi-promo,
  .mi-utility,
  .mi-nav,
  .mi-wa,
  .mi-cookie,
  .mi-mobile-bar,
  .mi-footer,
  .mi-search,
  .mi-pc__action,
  .mi-pc__cta,
  .button-group {
    display: none !important;
  }
  body { background: #FFFFFF; color: #000000; }
  a { color: #000000; text-decoration: underline; }
  .mi-card, .mi-pc, .product-thumb { box-shadow: none !important; border: 1px solid #CCCCCC; }
  .mi-section { padding-block: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 *   END OF stylesheet.css — Phase 1 foundation complete.
 *   Phase 2 next: header.twig, footer.twig, menu.twig with mega-menu hover.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 2 SUPPLEMENT — Header / Footer / Menu / Cart / Drawer ═══════ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Added during Phase 2 build. Goes after the original Phase 1 closer.     */
/* All new classes also use the .mi-* prefix to stay isolated.             */


/* ═══ 34 · RESPONSIVE DISPLAY UTILITIES ══════════════════════════════════ */
/* Bootstrap-style names so markup reads predictably.                      */
/* Breakpoints align with the rest of the stylesheet: 768 (md), 1024 (lg) */

.mi-d-inline-flex { display: inline-flex !important; }
.mi-d-flex        { display: flex !important; }
.mi-d-block       { display: block !important; }
.mi-d-none        { display: none !important; }

/* Hide below 768px, show at >=768px */
@media (min-width: 768px) {
  .mi-d-md-none         { display: none !important; }
  .mi-d-md-inline-flex  { display: inline-flex !important; }
  .mi-d-md-flex         { display: flex !important; }
  .mi-d-md-block        { display: block !important; }
}

/* Hide below 1024px, show at >=1024px */
@media (min-width: 1024px) {
  .mi-d-lg-none         { display: none !important; }
  .mi-d-lg-inline-flex  { display: inline-flex !important; }
  .mi-d-lg-flex         { display: flex !important; }
  .mi-d-lg-block        { display: block !important; }
}


/* ═══ 35 · MOBILE DRAWER ═════════════════════════════════════════════════ */

.mi-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--mi-z-overlay);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--mi-dur-slow);
}
.mi-mobile-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
.mi-mobile-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity var(--mi-dur-slow) var(--mi-ease-out);
}
.mi-mobile-drawer.is-open .mi-mobile-drawer__overlay { opacity: 1; }

.mi-mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(85vw, 360px);
  background: var(--mi-bg-page);
  box-shadow: var(--mi-shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--mi-dur-slow) var(--mi-ease-spring);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mi-mobile-drawer.is-open .mi-mobile-drawer__panel { transform: translateX(0); }

.mi-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mi-sp-4) var(--mi-sp-5);
  border-bottom: 1px solid var(--mi-border-subtle);
  flex-shrink: 0;
}
.mi-mobile-drawer__head .mi-logo img { max-height: 36px; }

.mi-mobile-drawer__nav { padding: var(--mi-sp-4) 0; flex: 1; }

.mi-mobile-drawer__list { list-style: none; padding: 0; margin: 0; }
.mi-mobile-drawer__list > li > a {
  display: block;
  padding: var(--mi-sp-3) var(--mi-sp-5);
  color: var(--mi-text-headline);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  border-bottom: 1px solid var(--mi-border-subtle);
}
.mi-mobile-drawer__list > li > a:hover { background: var(--mi-bg-soft); text-decoration: none; }

.mi-mobile-drawer__sublist { list-style: none; padding: 0; margin: 0; background: var(--mi-bg-soft); }
.mi-mobile-drawer__sublist li a {
  display: block;
  padding: var(--mi-sp-2) var(--mi-sp-5) var(--mi-sp-2) var(--mi-sp-8);
  color: var(--mi-text-secondary);
  font-size: var(--mi-fs-sm);
  border-bottom: 1px solid var(--mi-border-subtle);
}
.mi-mobile-drawer__sublist li a:hover { color: var(--mi-color-primary); background: var(--mi-bg-muted); text-decoration: none; }

.mi-mobile-drawer__list--secondary { margin-top: var(--mi-sp-4); border-top: 1px solid var(--mi-border-subtle); }
.mi-mobile-drawer__list--secondary > li > a { font-weight: var(--mi-fw-medium); font-size: var(--mi-fs-sm); color: var(--mi-text-secondary); }

.mi-mobile-drawer__contact {
  padding: var(--mi-sp-5);
  border-top: 1px solid var(--mi-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
}


/* ═══ 36 · CART DROPDOWN PANEL ═══════════════════════════════════════════ */

.mi-cart { position: relative; }
.mi-cart__trigger { position: relative; }
.mi-cart__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-xl);
  padding: var(--mi-sp-4);
  display: none;
  z-index: var(--mi-z-dropdown);
}
.mi-cart.open > .mi-cart__panel { display: block; }
.mi-cart__panel.dropdown-menu { /* override bootstrap defaults if class lingers */
  margin: 0;
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-xl);
  padding: var(--mi-sp-4);
}

.mi-cart__items {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  max-height: 360px;
  overflow-y: auto;
}
.mi-cart__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--mi-sp-3);
  align-items: flex-start;
  padding: var(--mi-sp-2) 0;
  border-bottom: 1px solid var(--mi-border-subtle);
}
.mi-cart__item:last-child { border-bottom: 0; }

.mi-cart__thumb {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-md);
  overflow: hidden;
  flex-shrink: 0;
}
.mi-cart__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.mi-cart__body { min-width: 0; }
.mi-cart__name {
  display: block;
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
  line-height: var(--mi-lh-snug);
  margin-bottom: 4px;
}
.mi-cart__name:hover { color: var(--mi-color-primary); text-decoration: none; }
.mi-cart__options { font-size: var(--mi-fs-xs); color: var(--mi-text-secondary); margin-bottom: 4px; }
.mi-cart__options small { display: block; }
.mi-cart__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  font-family: var(--mi-font-mono);
}
.mi-cart__price { color: var(--mi-text-headline); font-weight: var(--mi-fw-semibold); }

.mi-cart__remove {
  width: 28px; height: 28px;
  border: 0; background: transparent;
  border-radius: var(--mi-radius-full);
  color: var(--mi-text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-cart__remove:hover { background: var(--mi-color-error-soft); color: var(--mi-color-error); }
.mi-cart__remove svg { width: 14px; height: 14px; }

.mi-cart__totals {
  margin-top: var(--mi-sp-3);
  padding-top: var(--mi-sp-3);
  border-top: 1px solid var(--mi-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-1);
}
.mi-cart__total-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--mi-fs-sm);
}
.mi-cart__total-row:last-child {
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-md);
  color: var(--mi-text-headline);
  margin-top: var(--mi-sp-1);
  padding-top: var(--mi-sp-2);
  border-top: 1px dashed var(--mi-border-subtle);
}
.mi-cart__total-value { font-family: var(--mi-font-mono); }

.mi-cart__actions {
  margin-top: var(--mi-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-2);
}

.mi-cart__empty {
  text-align: center;
  padding: var(--mi-sp-6) var(--mi-sp-4);
  color: var(--mi-text-secondary);
}
.mi-cart__empty svg {
  width: 48px; height: 48px;
  color: var(--mi-text-tertiary);
  margin-bottom: var(--mi-sp-3);
}
.mi-cart__empty p { margin: 0; font-size: var(--mi-fs-sm); }


/* ═══ 37 · CATEGORY NAV DROPDOWN PANELS ══════════════════════════════════ */

.mi-nav__item--has-children { /* anchored containers for dropdowns */ }
.mi-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--mi-bg-page);
  border: 1px solid var(--mi-border-subtle);
  border-top: 2px solid var(--mi-color-primary);
  border-radius: 0 0 var(--mi-radius-lg) var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-xl);
  padding: var(--mi-sp-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mi-dur-base) var(--mi-ease-out),
              transform var(--mi-dur-base) var(--mi-ease-out),
              visibility 0s linear var(--mi-dur-base);
  z-index: var(--mi-z-dropdown);
}
.mi-nav__item--has-children:hover > .mi-nav__dropdown,
.mi-nav__item--has-children:focus-within > .mi-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--mi-dur-base) var(--mi-ease-out),
              transform var(--mi-dur-base) var(--mi-ease-out),
              visibility 0s linear 0s;
}

.mi-nav__dropdown-inner {
  display: grid;
  gap: var(--mi-sp-4);
}
/* When multiple columns, lay them out horizontally */
.mi-nav__dropdown-inner:has(.mi-nav__dropdown-col:nth-child(2)) {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.mi-nav__dropdown-col {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mi-nav__dropdown-col li a {
  display: block;
  padding: var(--mi-sp-2) var(--mi-sp-3);
  color: var(--mi-text-headline);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-medium);
  border-radius: var(--mi-radius-md);
  transition: all var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-nav__dropdown-col li a:hover {
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  text-decoration: none;
}

.mi-nav__see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-1);
  margin-top: var(--mi-sp-3);
  padding-top: var(--mi-sp-3);
  border-top: 1px solid var(--mi-border-subtle);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-primary);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  width: 100%;
}
.mi-nav__see-all:hover { text-decoration: none; color: var(--mi-color-primary-hover); }


/* ═══ 38 · SUPPLEMENT TWEAKS ═════════════════════════════════════════════ */

/* Make sure OpenCart's default Bootstrap dropdown toggle on .mi-cart trigger
   still gets opened by Bootstrap JS — we keep the .dropdown-toggle class
   and add a parent .open state for compat. */
.mi-cart.btn-group.open > .mi-cart__panel,
.mi-cart .dropdown-menu { display: block; }
.mi-cart.btn-group:not(.open) > .mi-cart__panel.dropdown-menu { display: none; }

/* Header grid gets a 4-column layout once we add mobile menu trigger
   (toggle | logo | search | actions). The original grid uses 3 cols on
   mobile but we have an extra hamburger button — adjust. */
@media (max-width: 1023.98px) {
  .mi-header__inner {
    grid-template-columns: auto auto 1fr auto;
  }
}

/* The default OpenCart breadcrumb / page wrappers sometimes use container.
   Make sure the .container Bootstrap class gets our padding so it nests
   inside .mi-promo's full-bleed container correctly. */


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 2.1 FIX PATCH — bullets, dropdown content, search wire-up ═══ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Fixes after first deploy:                                                */
/*   • Removes default <ul> bullets from nav, dropdown, drawer, cart, footer */
/*   • Makes dropdown menu items actually visible (proper layout & sizing)  */
/*   • Hides the white footer-logo placeholder until a real white variant   */
/*     is uploaded                                                          */
/*   • Reset list-style globally so future <ul>s don't show bullets         */

/* Global ul/ol reset (broad — only affects unstyled lists). Phase 1 only
   stripped bullets from ul[role='list'], which most of our markup lacks. */
ul, ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
/* Keep bullets where they make semantic sense (inside content prose) */
.mi-prose ul, .mi-prose ol,
#content .product-description ul,
#content .product-description ol,
#content .information-information ul,
#content .information-information ol {
  list-style: revert;
  padding-left: 1.5em;
  margin-block: var(--mi-sp-3);
}

/* Make sure the desktop nav list itself has no bullets/padding */
.mi-nav__inner {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Dropdown column lists — bullets off, proper width inside the panel */
.mi-nav__dropdown-col {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 220px;
}
/* Dropdown content rule: make sure the inner grid has at least one column visible */
.mi-nav__dropdown-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--mi-sp-5);
  align-items: start;
}
/* On hover, force the panel to appear even on browsers without :has() */
.mi-nav__item--has-children:hover > .mi-nav__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Drawer lists */
.mi-mobile-drawer__list,
.mi-mobile-drawer__sublist {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Cart panel inner ul (the <li> children OpenCart's .load() targets) */
.mi-cart__panel,
.mi-cart__panel > li {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.mi-cart__panel > li {
  padding: var(--mi-sp-3) var(--mi-sp-4);
}

/* Footer lists */
.mi-footer ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Footer logo treatment: the source PNG is non-transparent (white background
   baked in), so showing it raw on the dark footer would look like a floating
   white square. We give the logo a white "card" wrapper that hugs it,
   making the white background look intentional. Once a transparent or
   inverted-color logo variant is uploaded, this rule can be removed. */
.mi-footer .mi-logo {
  display: inline-block;
  background: #FFFFFF;
  padding: 6px 10px;
  border-radius: var(--mi-radius-md);
  line-height: 0;
  max-width: 200px;
}
.mi-footer .mi-logo img {
  filter: none !important;
  max-height: 48px;
  width: auto;
  display: block;
}

/* Polish: utility bar spacing on narrow desktop (768–1023px) — wrap nicely */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .mi-utility__inner {
    flex-wrap: wrap;
    row-gap: var(--mi-sp-1);
  }
  .mi-utility__left, .mi-utility__right {
    gap: var(--mi-sp-3);
  }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 2.2 — WIDTH EXPANSION (1280 → 1440 with smarter padding) ═══ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Goal: less wasted whitespace on desktop without compromising legibility */
/* or mobile/laptop behavior. The strategy:                                */
/*                                                                         */
/*   • Bump the content-rail max-width from 1280 → 1440px                  */
/*   • Scale container padding more aggressively at large breakpoints      */
/*   • Keep decorative bands (promo bar BG, footer BG) full-bleed          */
/*   • Mobile/tablet behavior is unchanged — those don't hit the max       */

:root {
  --mi-container-max:   1440px;
}

/* On very large screens give the content slightly more breathing room    */
/* from the viewport edges (so it doesn't look glued to the browser frame */
/* on ultrawide monitors but doesn't shrink content unnecessarily).       */
@media (min-width: 1600px) {
  :root {
    --mi-container-pad: 2.5rem;     /* was 2rem at >=1280 */
  }
}

/* Re-affirm the rule so it overrides Phase 1 inline rules that hard-coded */
/* the older max-width. Both .mi-container and Bootstrap .container apply. */
.mi-container,
.container {
  max-width: var(--mi-container-max) !important;
}

/* Bootstrap 3 .container ships with internal media queries that pin it to */
/* 1170px at >=1200px. Override those.                                     */
@media (min-width: 1200px) {
  .container { max-width: var(--mi-container-max) !important; width: auto !important; }
}

/* On laptops (1024–1439), tighten side padding to give content more room  */
/* — these are users on 13–15" laptops where every pixel matters.          */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  :root {
    --mi-container-pad: 1.25rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 2.3 — MENU DROPDOWN VISIBILITY + DEFAULT-PAGE TYPOGRAPHY ═══ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Two fixes:                                                              */
/*   • Mega menu: overflow-x: auto on .mi-nav__inner was clipping the      */
/*     absolute-positioned dropdown panel vertically. On desktop (where    */
/*     the nav is the only visible variant), we don't need horizontal      */
/*     scroll — categories fit at 1440px wide.                             */
/*   • Default OpenCart pages (product/category/info — Phases 4–6 not      */
/*     built yet) use h1 that's too big for the column width, plus the     */
/*     default 3-column product layout cramps the right-side metadata.    */
/*     Cap typography and tweak proportions until we ship the real pages. */


/* ── Menu dropdown fix ──────────────────────────────────────────────── */
/* Allow absolutely-positioned dropdowns to escape the nav container.     */
.mi-nav__inner {
  overflow: visible !important;
}
/* Just in case the nav container itself is clipping */
.mi-nav {
  overflow: visible;
}
/* And in case .container wraps clip them (Bootstrap default doesn't, but
   make sure no parent clips the dropdown). */
.mi-nav .mi-container,
.mi-nav .container { overflow: visible; }

/* Ensure dropdown stacks above subsequent content (sticky elements, etc) */
.mi-nav__dropdown {
  z-index: 1050; /* above Bootstrap's default dropdown z-index */
}

/* Small additional polish: when the cursor moves between the trigger and
   the dropdown panel, the gap between them used to fail :hover. Add a
   transparent bridge by extending the hover area upward into the trigger. */
.mi-nav__dropdown {
  margin-top: -1px;  /* close the 1px gap from translateY anim */
}


/* ── Default-theme product page (until Phase 4) ──────────────────────── */
/* OpenCart's default product page is `product/product.twig`. We haven't
   rebuilt it yet. These rules make it tolerable in the meantime. */

/* The H1 title — way too big at default sizes with our font tokens.
   Cap it to a sane size and let it wrap normally. */
#product-product h1,
#product-product .product-h1,
.product-product h1,
#content h1 {
  font-size: clamp(1.5rem, 2.4vw + 1rem, 2.25rem) !important;
  font-weight: var(--mi-fw-bold);
  line-height: 1.2;
  letter-spacing: var(--mi-letter-tight);
  text-wrap: balance;
  margin-bottom: var(--mi-sp-4);
}

/* Rebalance the OpenCart default 8/4 product split. Default product.twig
   uses col-sm-8 (description+tabs) and col-sm-4 (image+price+addtocart).
   We make the image+price side WIDER and the description narrower so
   long titles like "Bitmain Antminer S21 XP 270Th/s..." don't wrap 4×. */
@media (min-width: 992px) {
  #product-product .col-sm-8 { width: 56% !important; }
  #product-product .col-sm-4 { width: 44% !important; }
}

/* Price display — the default OpenCart .price/.price-new is plain text.
   Apply our price treatment via attribute matching. */
#product-product .price,
.product-product .price {
  font-size: var(--mi-fs-3xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-orange);
  font-family: var(--mi-font-mono);
  line-height: 1.1;
  margin-block: var(--mi-sp-3);
  display: block;
}
#product-product .price-old,
.product-product .price-old {
  color: var(--mi-text-tertiary);
  text-decoration: line-through;
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-medium);
  margin-right: var(--mi-sp-3);
}
#product-product .price-new,
.product-product .price-new {
  color: var(--mi-color-orange);
}

/* Default product image area background */
#product-product .thumbnails,
.product-product .thumbnails {
  margin-top: var(--mi-sp-4);
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--mi-sp-2);
  flex-wrap: wrap;
}
#product-product .thumbnails li {
  list-style: none;
}
#product-product .thumbnails a img {
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-md);
  padding: 4px;
  background: #FFFFFF;
}

/* The "Add to Cart" button — give it our primary button styling */
#button-cart {
  background: var(--mi-color-primary) !important;
  border-color: var(--mi-color-primary) !important;
  color: var(--mi-text-on-primary) !important;
  font-weight: var(--mi-fw-bold);
  height: 52px;
  padding-inline: var(--mi-sp-6);
  border-radius: var(--mi-radius-lg);
  text-transform: none;
  letter-spacing: var(--mi-letter-snug);
  font-size: var(--mi-fs-md);
  transition: background var(--mi-dur-fast) var(--mi-ease-out);
}
#button-cart:hover {
  background: var(--mi-color-primary-hover) !important;
  border-color: var(--mi-color-primary-hover) !important;
}

/* Make the product page "Brand: …" / "Product Code: …" / "Availability"
   meta rows tidier */
#product-product ul.list-unstyled li,
.product-product ul.list-unstyled li {
  padding: 4px 0;
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
}
#product-product ul.list-unstyled li:first-child,
.product-product ul.list-unstyled li:first-child {
  padding-top: 0;
}

/* Quantity field — make it a normal-sized input */
#product-product #input-quantity,
.product-product #input-quantity {
  max-width: 100px;
  height: 44px;
  font-family: var(--mi-font-mono);
  text-align: center;
}

/* Tabs (Description / Specification / Reviews) — better contrast */
#product-product .nav-tabs > li > a,
.product-product .nav-tabs > li > a {
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  font-size: var(--mi-fs-md);
  padding: var(--mi-sp-3) var(--mi-sp-5);
}
#product-product .nav-tabs > li.active > a,
.product-product .nav-tabs > li.active > a {
  color: var(--mi-color-primary);
  border-bottom-color: var(--mi-color-primary);
  border-bottom-width: 2px;
}

/* Description prose inside the tab — bring back the bullets we globally
   reset, and add proper spacing for headings/paragraphs */
.tab-content h2 { font-size: var(--mi-fs-xl); margin-block: var(--mi-sp-6) var(--mi-sp-3); }
.tab-content h3 { font-size: var(--mi-fs-lg); margin-block: var(--mi-sp-5) var(--mi-sp-2); }
.tab-content p  { margin-bottom: var(--mi-sp-3); line-height: var(--mi-lh-relaxed); }
.tab-content ul { list-style: disc; padding-left: 1.5em; margin-block: var(--mi-sp-3); }
.tab-content ol { list-style: decimal; padding-left: 1.5em; margin-block: var(--mi-sp-3); }
.tab-content li { margin-bottom: 4px; }

/* Default OpenCart breadcrumb prettier */
.breadcrumb {
  background: transparent !important;
  padding: var(--mi-sp-3) 0 !important;
  margin-bottom: var(--mi-sp-4);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-tertiary);
}
.breadcrumb > li + li::before {
  content: "›" !important;
  color: var(--mi-text-tertiary);
  padding: 0 var(--mi-sp-2);
}
.breadcrumb a { color: var(--mi-text-secondary); }
.breadcrumb a:hover { color: var(--mi-color-primary); text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 2.4 — INFORMATION-PAGE PROSE TYPOGRAPHY + CTA BLOCK ════════ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* All info pages (About Us, Warranty, Shipping, Returns, etc.) now wrap   */
/* their description in <article class="mi-prose">. The rules below define */
/* prose typography that's legible, scannable, and matches the brand.     */
/* Also covers the soft CTA block at the bottom of every info page.       */

/* ── Info-page container tweaks ──────────────────────────────────────── */
/* Push the content down a bit from the nav and give it breathing room. */
#information-information {
  padding-top: var(--mi-sp-6);
  padding-bottom: var(--mi-sp-10);
}
#information-information .breadcrumb {
  padding: 0 0 var(--mi-sp-4) 0 !important;
  margin: 0 0 var(--mi-sp-4) 0;
  border-bottom: 1px solid var(--mi-border-subtle);
}

/* ── .mi-prose: a generic readable-text wrapper for written content ──── */
.mi-prose {
  /* Cap line length for readability — roughly 70 characters at body font */
  max-width: 70ch;
  margin-inline: 0;          /* left-aligned, NOT centered, on info pages */
  color: var(--mi-text-body);
  font-size: var(--mi-fs-md);
  line-height: var(--mi-lh-relaxed);
}

/* Headings inside prose — clear hierarchy, generous top space */
.mi-prose h1 {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  font-weight: var(--mi-fw-bold);
  line-height: 1.15;
  letter-spacing: var(--mi-letter-tight);
  color: var(--mi-text-headline);
  margin-bottom: var(--mi-sp-5);
  text-wrap: balance;
}
.mi-prose h2 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  font-weight: var(--mi-fw-bold);
  line-height: 1.2;
  letter-spacing: var(--mi-letter-tight);
  color: var(--mi-text-headline);
  margin-top: var(--mi-sp-10);
  margin-bottom: var(--mi-sp-4);
  padding-top: var(--mi-sp-4);
  border-top: 1px solid var(--mi-border-subtle);
  text-wrap: balance;
}
/* The first h2 in the prose article shouldn't have the border-top — it's
   the de facto page title since we suppressed the controller's <h1>. */
.mi-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  margin-bottom: var(--mi-sp-6);
}
.mi-prose h3 {
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  line-height: 1.25;
  color: var(--mi-text-headline);
  margin-top: var(--mi-sp-7);
  margin-bottom: var(--mi-sp-3);
}
.mi-prose h4 {
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
  margin-top: var(--mi-sp-5);
  margin-bottom: var(--mi-sp-2);
}

/* Paragraphs */
.mi-prose p {
  margin-block: 0 var(--mi-sp-4);
  color: var(--mi-text-body);
}
.mi-prose p:last-child { margin-bottom: 0; }

/* Strong, links */
.mi-prose strong, .mi-prose b {
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
}
.mi-prose a {
  color: var(--mi-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-prose a:hover {
  color: var(--mi-color-primary-hover);
  text-decoration-thickness: 2px;
}

/* Lists — RESTORE bullets (Phase 2.1 stripped them globally; in prose
   we want them back, with proper spacing) */
.mi-prose ul {
  list-style: disc;
  padding-left: 1.6em;
  margin-block: var(--mi-sp-4);
}
.mi-prose ol {
  list-style: decimal;
  padding-left: 1.6em;
  margin-block: var(--mi-sp-4);
}
.mi-prose li {
  margin-bottom: var(--mi-sp-2);
  padding-left: 0.3em;
  line-height: var(--mi-lh-relaxed);
}
.mi-prose li::marker {
  color: var(--mi-color-primary);
  font-weight: var(--mi-fw-bold);
}
/* Nested lists */
.mi-prose li > ul,
.mi-prose li > ol {
  margin-block: var(--mi-sp-2);
}

/* Blockquotes — for call-outs like "We honor it directly." */
.mi-prose blockquote {
  margin: var(--mi-sp-6) 0;
  padding: var(--mi-sp-4) var(--mi-sp-5);
  border-left: 4px solid var(--mi-color-primary);
  background: var(--mi-color-primary-soft);
  border-radius: 0 var(--mi-radius-md) var(--mi-radius-md) 0;
  font-style: italic;
  color: var(--mi-text-headline);
}
.mi-prose blockquote p:last-child { margin-bottom: 0; }

/* Horizontal rules */
.mi-prose hr {
  border: 0;
  border-top: 1px solid var(--mi-border-subtle);
  margin: var(--mi-sp-8) 0;
}

/* Inline code & small */
.mi-prose code,
.mi-prose kbd,
.mi-prose samp {
  font-family: var(--mi-font-mono);
  font-size: 0.92em;
  background: var(--mi-bg-soft);
  padding: 2px 6px;
  border-radius: var(--mi-radius-sm);
  border: 1px solid var(--mi-border-subtle);
}
.mi-prose pre {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-sm);
  background: var(--mi-bg-soft);
  padding: var(--mi-sp-4);
  border-radius: var(--mi-radius-md);
  border: 1px solid var(--mi-border-subtle);
  overflow-x: auto;
  margin-block: var(--mi-sp-4);
}
.mi-prose pre code { background: transparent; padding: 0; border: 0; }

/* Tables (sometimes used in policy pages for spec grids) */
.mi-prose table {
  width: 100%;
  margin-block: var(--mi-sp-5);
  border-collapse: collapse;
  font-size: var(--mi-fs-sm);
}
.mi-prose th,
.mi-prose td {
  padding: var(--mi-sp-3);
  text-align: left;
  border: 1px solid var(--mi-border-subtle);
}
.mi-prose th {
  background: var(--mi-bg-soft);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
}
.mi-prose tr:nth-child(even) td { background: var(--mi-bg-soft); }

/* Images inside prose */
.mi-prose img {
  border-radius: var(--mi-radius-md);
  margin-block: var(--mi-sp-4);
  max-width: 100%;
  height: auto;
}

/* ── Bottom CTA block ────────────────────────────────────────────────── */
.mi-info-cta {
  margin-top: var(--mi-sp-12);
  padding: var(--mi-sp-6) var(--mi-sp-6);
  background: linear-gradient(135deg, var(--mi-color-primary-soft) 0%, var(--mi-bg-soft) 100%);
  border: 1px solid rgba(4, 55, 242, 0.12);
  border-radius: var(--mi-radius-lg);
  display: grid;
  gap: var(--mi-sp-5);
  align-items: center;
  max-width: 70ch;
}
@media (min-width: 768px) {
  .mi-info-cta {
    grid-template-columns: 1fr auto;
    padding: var(--mi-sp-7) var(--mi-sp-8);
  }
}
.mi-info-cta__text h3 {
  margin: 0 0 var(--mi-sp-2) 0;
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
  line-height: 1.2;
}
.mi-info-cta__text p {
  margin: 0;
  color: var(--mi-text-body);
  font-size: var(--mi-fs-sm);
  line-height: var(--mi-lh-relaxed);
}
.mi-info-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-2);
}
@media (min-width: 480px) {
  .mi-info-cta__actions { flex-direction: row; flex-wrap: wrap; }
}

/* Tighten the breadcrumb appearance on info pages, override Bootstrap's */
/* default list-style and inline display.                                 */
#information-information .breadcrumb,
#information-information .breadcrumb li {
  list-style: none;
}
#information-information .breadcrumb li {
  display: inline-block;
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-tertiary);
}
#information-information .breadcrumb li + li::before {
  content: "›";
  margin: 0 var(--mi-sp-2);
  color: var(--mi-text-tertiary);
}
#information-information .breadcrumb a {
  color: var(--mi-text-secondary);
  text-decoration: none;
}
#information-information .breadcrumb a:hover { color: var(--mi-color-primary); }


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 3 — HOMEPAGE + LIVE CRYPTO TICKER ══════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Crypto ticker (sitewide, between promo bar and utility bar) ────────  */
.mi-ticker {
  background: #0F172A;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-xs);
  letter-spacing: var(--mi-letter-snug);
}
/* Subtle gradient fade at edges so items don't pop in/out abruptly */
.mi-ticker::before,
.mi-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.mi-ticker::before { left: 0;  background: linear-gradient(90deg, #0F172A, transparent); }
.mi-ticker::after  { right: 0; background: linear-gradient(-90deg, #0F172A, transparent); }

.mi-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-6);
  white-space: nowrap;
  animation: mi-ticker-scroll 60s linear infinite;
  padding-left: 100%;  /* start fully off-screen-right */
}
@keyframes mi-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* track contains 2 copies; scrolling -50% gives a seamless loop */
}
.mi-ticker:hover .mi-ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mi-ticker__track { animation: none; padding-left: var(--mi-sp-4); }
}
.mi-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  color: #FFFFFF;
}
.mi-ticker__symbol {
  font-weight: var(--mi-fw-bold);
  color: #FFFFFF;
}
.mi-ticker__price {
  color: #CBD5E1;
}
.mi-ticker__change {
  font-size: 11px;
  font-weight: var(--mi-fw-semibold);
  padding: 2px 6px;
  border-radius: var(--mi-radius-sm);
}
.mi-ticker__change--up   { color: #10B981; background: rgba(16, 185, 129, 0.10); }
.mi-ticker__change--down { color: #EF4444; background: rgba(239, 68, 68, 0.10); }
.mi-ticker__skeleton {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}


/* ── Homepage hero ──────────────────────────────────────────────────────  */
.mi-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(4, 55, 242, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(247, 147, 26, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--mi-bg-page) 0%, var(--mi-bg-soft) 100%);
  padding-block: var(--mi-sp-10) var(--mi-sp-12);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .mi-hero { padding-block: var(--mi-sp-14) var(--mi-sp-16); }
}
.mi-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .mi-hero__inner { grid-template-columns: 1.3fr 1fr; gap: var(--mi-sp-12); }
}

.mi-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  padding: var(--mi-sp-2) var(--mi-sp-4);
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  border-radius: var(--mi-radius-full);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-bold);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  margin-bottom: var(--mi-sp-5);
}
.mi-hero__pulse {
  width: 8px; height: 8px;
  border-radius: var(--mi-radius-full);
  background: var(--mi-color-success);
  position: relative;
}
.mi-hero__pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--mi-radius-full);
  background: var(--mi-color-success);
  animation: mi-hero-pulse 2s ease-out infinite;
}
@keyframes mi-hero-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(3);   opacity: 0;   }
}

.mi-hero__title {
  font-size: clamp(2rem, 4vw + 1rem, 4.5rem);
  font-weight: var(--mi-fw-bold);
  line-height: 1.05;
  letter-spacing: var(--mi-letter-tight);
  color: var(--mi-text-headline);
  margin-bottom: var(--mi-sp-5);
  text-wrap: balance;
}
.mi-hero__title-accent {
  background: linear-gradient(95deg, var(--mi-color-primary) 0%, #5B7CF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mi-hero__sub {
  font-size: var(--mi-fs-lg);
  line-height: var(--mi-lh-relaxed);
  color: var(--mi-text-body);
  margin-bottom: var(--mi-sp-7);
  max-width: 60ch;
}
.mi-hero__sub strong { color: var(--mi-color-orange); font-weight: var(--mi-fw-bold); }

.mi-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sp-3);
  margin-bottom: var(--mi-sp-7);
}

.mi-hero__trust {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  padding-top: var(--mi-sp-5);
  border-top: 1px solid var(--mi-border-subtle);
}
@media (min-width: 768px) {
  .mi-hero__trust { flex-direction: row; flex-wrap: wrap; gap: var(--mi-sp-5); }
}
.mi-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-body);
}
.mi-hero__trust-item svg {
  width: 18px; height: 18px;
  color: var(--mi-color-success);
  flex-shrink: 0;
}
.mi-hero__trust-item strong { color: var(--mi-text-headline); font-weight: var(--mi-fw-bold); }

/* Hero visual card (right side, desktop only) */
.mi-hero__visual {
  display: none;
}
@media (min-width: 1024px) {
  .mi-hero__visual { display: block; }
}
.mi-hero__visual-card {
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-xl);
  padding: var(--mi-sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mi-sp-6);
  box-shadow: var(--mi-shadow-xl);
  position: relative;
}
.mi-hero__visual-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--mi-radius-xl);
  background: linear-gradient(135deg, rgba(4,55,242,0.20), rgba(247,147,26,0.15));
  z-index: -1;
  filter: blur(20px);
  opacity: 0.6;
}
.mi-hero__stat { text-align: left; }
.mi-hero__stat-num {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-primary);
  line-height: 1;
  letter-spacing: var(--mi-letter-tight);
  margin-bottom: var(--mi-sp-1);
}
.mi-hero__stat-lbl {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  font-weight: var(--mi-fw-medium);
  letter-spacing: var(--mi-letter-snug);
}


/* ── Homepage section heads ──────────────────────────────────────────────  */
.mi-section-head {
  text-align: center;
  margin-bottom: var(--mi-sp-8);
  max-width: 60ch;
  margin-inline: auto;
}
.mi-section-head__title {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  font-weight: var(--mi-fw-bold);
  line-height: 1.15;
  letter-spacing: var(--mi-letter-tight);
  color: var(--mi-text-headline);
  margin: 0 0 var(--mi-sp-3) 0;
  text-wrap: balance;
}
.mi-section-head__sub {
  font-size: var(--mi-fs-md);
  color: var(--mi-text-secondary);
  line-height: var(--mi-lh-relaxed);
  margin: 0;
  text-wrap: pretty;
}


/* ── Featured products grid (homepage) ──────────────────────────────────  */
.mi-grid--featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-5);
}
@media (min-width: 640px)  { .mi-grid--featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mi-grid--featured { grid-template-columns: repeat(4, 1fr); } }

/* OpenCart's Featured module renders product cards via .product-thumb.
   We force them into our 4-column layout AND apply our card styling
   (which Phase 1 already covers via the .product-thumb selectors). */
#mi-home-featured .row { display: contents !important; }  /* skip Bootstrap row wrapper */
#mi-home-featured .product-layout {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mi-home-featured .product-thumb {
  height: 100%;
}


/* ── Category tiles ─────────────────────────────────────────────────────  */
.mi-cat-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-4);
}
@media (min-width: 640px)  { .mi-cat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mi-cat-tiles { grid-template-columns: repeat(4, 1fr); } }

.mi-cat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-4);
  padding: var(--mi-sp-6);
  background: var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  color: var(--mi-text-headline);
  transition: all var(--mi-dur-base) var(--mi-ease-out);
  position: relative;
  overflow: hidden;
}
.mi-cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mi-radius-lg);
  pointer-events: none;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--mi-dur-base) var(--mi-ease-out);
}
.mi-cat-tile:hover {
  transform: translateY(-4px);
  border-color: var(--mi-color-primary);
  text-decoration: none;
}
.mi-cat-tile:hover::after { box-shadow: 0 12px 28px rgba(4, 55, 242, 0.15); }
.mi-cat-tile__icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mi-radius-lg);
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  flex-shrink: 0;
}
.mi-cat-tile__icon svg { width: 28px; height: 28px; }
.mi-cat-tile--bitcoin  .mi-cat-tile__icon { background: rgba(247, 147, 26, 0.10); color: #F7931A; }
.mi-cat-tile--altcoin  .mi-cat-tile__icon { background: var(--mi-color-primary-soft); color: var(--mi-color-primary); }
.mi-cat-tile--refurb   .mi-cat-tile__icon { background: var(--mi-color-success-soft); color: var(--mi-color-success); }
.mi-cat-tile--preorder .mi-cat-tile__icon { background: rgba(99, 102, 241, 0.10); color: #6366F1; }
.mi-cat-tile__body h3 {
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
  margin: 0 0 var(--mi-sp-2) 0;
  letter-spacing: var(--mi-letter-tight);
  line-height: 1.2;
}
.mi-cat-tile__body p {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
  margin: 0 0 var(--mi-sp-4) 0;
  line-height: var(--mi-lh-relaxed);
}
.mi-cat-tile__cta {
  display: inline-block;
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-primary);
  letter-spacing: var(--mi-letter-snug);
}


/* ── Trust band (Maine LLC verification) ────────────────────────────────  */
.mi-trust-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-8);
  align-items: center;
  padding: var(--mi-sp-8);
  background:
    linear-gradient(135deg, rgba(4, 55, 242, 0.03) 0%, rgba(247, 147, 26, 0.03) 100%),
    var(--mi-bg-card);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-xl);
}
@media (min-width: 1024px) {
  .mi-trust-band { grid-template-columns: 1.5fr 1fr; padding: var(--mi-sp-10); }
}
.mi-trust-band__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mi-sp-5);
  padding: var(--mi-sp-5) var(--mi-sp-6);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-lg);
  border: 1px solid var(--mi-border-subtle);
}
@media (min-width: 480px) and (max-width: 1023.98px) {
  .mi-trust-band__facts { grid-template-columns: repeat(4, 1fr); }
}
.mi-trust-band__fact-label {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  font-weight: var(--mi-fw-semibold);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.mi-trust-band__fact-value {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-headline);
  font-weight: var(--mi-fw-bold);
}
.mi-trust-band__badge {
  display: flex;
  justify-content: center;
}
.mi-trust-band__seal {
  width: 220px; height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mi-color-primary);
}
.mi-trust-band__seal svg { width: 100%; height: 100%; }
.mi-trust-band__seal-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 32px;
  font-family: var(--mi-font-display);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-xs);
  color: var(--mi-color-primary);
  letter-spacing: var(--mi-letter-wider);
}
.mi-trust-band__seal-text > div:first-child { font-size: var(--mi-fs-lg); margin-bottom: 2px; }


/* ── Pre-footer CTA band ────────────────────────────────────────────────  */
.mi-cta-band {
  background:
    radial-gradient(circle at 20% 50%, rgba(247, 147, 26, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  padding-block: var(--mi-sp-10);
  margin-top: var(--mi-sp-12);
}
.mi-cta-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-6);
  align-items: center;
}
@media (min-width: 1024px) {
  .mi-cta-band__inner { grid-template-columns: 1.5fr auto; gap: var(--mi-sp-10); }
}
.mi-cta-band__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: var(--mi-fw-bold);
  color: #FFFFFF;
  margin: 0 0 var(--mi-sp-2) 0;
  line-height: 1.15;
  letter-spacing: var(--mi-letter-tight);
  text-wrap: balance;
}
.mi-cta-band__sub {
  font-size: var(--mi-fs-md);
  color: #CBD5E1;
  margin: 0;
  line-height: var(--mi-lh-relaxed);
  max-width: 55ch;
}
.mi-cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-2);
}
@media (min-width: 640px) {
  .mi-cta-band__actions { flex-direction: row; flex-wrap: wrap; }
}


/* ── Make sure the footer doesn't get an extra top margin after the CTA band ── */
.mi-cta-band + .mi-footer { margin-top: 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 3.1 — VISUAL FIXES ═════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Fixes after first Phase 3 deploy:                                       */
/*   • Ticker: white background, dark text                                 */
/*   • Featured products grid: replace broken display:contents with proper  */
/*     CSS Grid that targets OpenCart's actual .product-layout markup      */
/*   • Header logo bigger (52px), footer logo (no white card)              */
/*   • Cart badge as a small dot (top-right corner of icon, just the count)*/
/*   • Hero visual restructured: video on top, stat card below             */
/*   • Verified seal redrawn with separate shield + check + label below   */


/* ── Ticker: white background, dark text ─────────────────────────────── */
.mi-ticker {
  background: #FFFFFF;
  color: var(--mi-text-headline);
  border-top: 1px solid var(--mi-border-subtle);
  border-bottom: 1px solid var(--mi-border-subtle);
}
.mi-ticker::before { background: linear-gradient(90deg,  #FFFFFF, transparent); }
.mi-ticker::after  { background: linear-gradient(-90deg, #FFFFFF, transparent); }
.mi-ticker__item   { color: var(--mi-text-headline); }
.mi-ticker__symbol { color: var(--mi-text-headline); font-weight: var(--mi-fw-bold); }
.mi-ticker__price  { color: var(--mi-text-secondary); }
.mi-ticker__change--up   { color: #059669; background: rgba(16, 185, 129, 0.12); }
.mi-ticker__change--down { color: #DC2626; background: rgba(239,  68,  68, 0.12); }
.mi-ticker__skeleton     { color: var(--mi-text-tertiary); }


/* ── Featured products grid: properly target the OpenCart row/column ── */
/* OpenCart's featured module renders:                                     */
/*   <div class="row">                                                     */
/*     <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6">*/
/*       <div class="product-thumb">…</div>                                */
/*     </div>                                                              */
/*     …                                                                   */
/*   </div>                                                                */
/* Force the row into our 4-col grid + neutralize the Bootstrap col widths */
#mi-home-featured > .row,
#mi-home-featured .row {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-5);
  margin: 0 !important;
}
@media (min-width: 640px)  { #mi-home-featured > .row, #mi-home-featured .row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #mi-home-featured > .row, #mi-home-featured .row { grid-template-columns: repeat(4, 1fr); } }

#mi-home-featured .product-layout {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
#mi-home-featured .product-thumb {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Card body fills available space so 4 cards align bottoms */
#mi-home-featured .product-thumb .caption {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#mi-home-featured .product-thumb .button-group {
  margin-top: auto;
}


/* ── Logo sizing: bigger header (52px), uncapped footer ───────────────── */
.mi-logo img { max-height: 52px !important; }
@media (max-width: 767.98px) {
  .mi-logo img { max-height: 40px !important; }
}
/* Drop the white-card treatment in footer — transparent logo will look right */
.mi-footer .mi-logo {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}
.mi-footer .mi-logo img {
  filter: none !important;
  max-height: 56px !important;
}


/* ── Cart badge: small dot in corner, count only ──────────────────────── */
.mi-icon-btn { position: relative; }
.mi-icon-btn__badge,
#cart-total {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--mi-color-orange);
  color: #FFFFFF;
  border-radius: var(--mi-radius-full);
  border: 2px solid #FFFFFF;
  font-size: 10px;
  font-weight: var(--mi-fw-bold);
  font-family: var(--mi-font-display);
  line-height: 14px;
  text-align: center;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* Hide the "item(s)" text OpenCart's common.js injects — keep only digits */
  max-width: 32px;
  overflow: hidden;
}
/* When badge is empty/0 hide it entirely */
.mi-icon-btn__badge:empty,
#cart-total:empty {
  display: none;
}
/* Use JS-side cleanup is hard — instead, we trim the "item(s)" via CSS by
   making the badge narrow + clipping. But to make "0 item(s)" render as
   just "0", we use a CSS trick: scale the badge text down + clip. */
#cart-total { font-size: 9px; }


/* ── Hero visual restructured: video → stat card stacked ──────────────── */
.mi-hero__visual {
  display: none;
  flex-direction: column;
  gap: var(--mi-sp-5);
}
@media (min-width: 1024px) {
  .mi-hero__visual { display: flex; }
}

.mi-hero__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-xl);
  overflow: hidden;
  box-shadow: var(--mi-shadow-lg);
}
.mi-hero__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* If the video src 404s, the <video> element shows its poster (or background).
   The overlay gives a subtle vignette so any video reads cleanly under text. */
.mi-hero__video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 50%, rgba(15,23,42,0.18) 100%);
  pointer-events: none;
}

/* Smaller stat card so video gets visual prominence */
.mi-hero__visual-card {
  padding: var(--mi-sp-6) var(--mi-sp-7);
  grid-template-columns: 1fr 1fr;
  gap: var(--mi-sp-5);
}
.mi-hero__stat-num { font-size: var(--mi-fs-3xl); }


/* ── Redrawn Verified seal ────────────────────────────────────────────── */
.mi-trust-band__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mi-sp-3);
}
/* Hide the old .mi-trust-band__seal (which had overlapping text inside) — */
/* we now use .mi-trust-seal (shield) + .mi-trust-seal__label (text below) */
.mi-trust-band__seal { display: none; }

.mi-trust-seal {
  position: relative;
  width: 140px;
  height: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mi-trust-seal__shield {
  width: 100%;
  height: 100%;
}
.mi-trust-seal__check {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.3));
}
.mi-trust-seal__label {
  text-align: center;
  font-family: var(--mi-font-display);
  font-weight: var(--mi-fw-bold);
  letter-spacing: var(--mi-letter-wider);
  text-transform: uppercase;
  color: var(--mi-color-primary);
}
.mi-trust-seal__label-top {
  font-size: var(--mi-fs-md);
  line-height: 1;
}
.mi-trust-seal__label-bot {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  letter-spacing: var(--mi-letter-widest);
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 4 — PRODUCT PAGE ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── Product page wrapper ───────────────────────────────────────────── */
.mi-product-page {
  background: var(--mi-bg-page);
  padding: var(--mi-sp-6) 0 var(--mi-sp-12);
}

/* ── Breadcrumb (shared with category page) ─────────────────────────── */
.mi-breadcrumb {
  padding: var(--mi-sp-3) 0 var(--mi-sp-5);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-tertiary);
}
.mi-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sp-1);
  align-items: center;
}
.mi-breadcrumb li { display: flex; align-items: center; gap: var(--mi-sp-1); }
.mi-breadcrumb a {
  color: var(--mi-text-tertiary);
  transition: color .15s;
}
.mi-breadcrumb a:hover { color: var(--mi-color-primary); }
.mi-breadcrumb li:last-child a {
  color: var(--mi-text-primary);
  font-weight: var(--mi-fw-medium);
  pointer-events: none;
}
.mi-breadcrumb span { color: var(--mi-text-tertiary); opacity: .5; }

/* ── Top: 2-column gallery + buybox ────────────────────────────────── */
.mi-product-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-8);
  margin-bottom: var(--mi-sp-10);
}
@media (min-width: 900px) {
  .mi-product-top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--mi-sp-10);
  }
}

/* ── Gallery ────────────────────────────────────────────────────────── */
.mi-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  position: sticky;
  top: var(--mi-sp-4);
  align-self: flex-start;
}
.mi-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-xl);
  overflow: hidden;
}
.mi-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--mi-sp-6);
  cursor: zoom-in;
  transition: transform .25s ease;
}
.mi-gallery__img:hover { transform: scale(1.03); }
.mi-gallery__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--mi-sp-3);
  color: var(--mi-text-tertiary);
}
.mi-gallery__empty span { font-size: 80px; opacity: .25; }
.mi-gallery__empty p { font-size: var(--mi-fs-sm); }
.mi-gallery__zoom {
  position: absolute;
  top: var(--mi-sp-3);
  right: var(--mi-sp-3);
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mi-text-primary);
  backdrop-filter: blur(8px);
  transition: all .15s;
}
.mi-gallery__zoom:hover {
  background: var(--mi-color-primary);
  color: white;
  border-color: var(--mi-color-primary);
}
.mi-gallery__thumbs {
  display: flex;
  gap: var(--mi-sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--mi-sp-1);
}
.mi-gallery__thumb {
  flex: 0 0 72px;
  height: 72px;
  border: 2px solid var(--mi-border-light);
  border-radius: var(--mi-radius-md);
  background: var(--mi-bg-soft);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s, transform .15s;
}
.mi-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.mi-gallery__thumb:hover { border-color: var(--mi-color-primary-100); }
.mi-gallery__thumb--active {
  border-color: var(--mi-color-primary);
  transform: scale(1.02);
}

/* ── Buybox ─────────────────────────────────────────────────────────── */
.mi-buybox {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-4);
}
.mi-buybox__brand {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-color-primary);
  align-self: flex-start;
}
.mi-buybox__brand:hover { text-decoration: underline; }

.mi-buybox__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-3xl);
  font-weight: var(--mi-fw-bold);
  line-height: 1.15;
  color: var(--mi-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .mi-buybox__title { font-size: var(--mi-fs-4xl); }
}

/* ── Tier badge ────────────────────────────────────────────────────── */
.mi-buybox__tier {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  padding: var(--mi-sp-2) var(--mi-sp-3);
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  border-radius: var(--mi-radius-full);
  align-self: flex-start;
}
.mi-buybox__tier::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.mi-buybox__tier--enterprise {
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
}
.mi-buybox__tier--standard {
  background: var(--mi-color-orange-soft);
  color: var(--mi-color-orange-hover);
}
.mi-buybox__tier--entry {
  background: var(--mi-bg-muted);
  color: var(--mi-text-secondary);
}

/* ── Spec strip ────────────────────────────────────────────────────── */
.mi-spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--mi-sp-4);
  padding: var(--mi-sp-4);
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  margin: 0;
}
.mi-spec-strip:empty { display: none; }
.mi-spec-strip dt {
  font-family: var(--mi-font-display);
  font-size: 10px;
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-widest);
  margin-bottom: 4px;
  align-self: end;
}
.mi-spec-strip dd {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-primary);
  margin: 0;
  align-self: start;
}

/* ── Price block ───────────────────────────────────────────────────── */
.mi-buybox__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--mi-sp-3);
}
.mi-buybox__price-new {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
@media (min-width: 768px) {
  .mi-buybox__price-new { font-size: var(--mi-fs-5xl); }
}
.mi-buybox__price-old {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-lg);
  color: var(--mi-text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.mi-buybox__savings {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--mi-sp-2);
  background: #DCFCE7;
  color: #166534;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-bold);
  border-radius: var(--mi-radius-full);
  letter-spacing: 0.02em;
}

.mi-buybox__btc {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  background: var(--mi-color-orange-soft);
  border: 1px solid color-mix(in srgb, var(--mi-color-orange) 30%, transparent);
  border-radius: var(--mi-radius-lg);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-primary);
  line-height: 1.4;
}
.mi-buybox__btc-icon {
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-xl);
  color: var(--mi-color-orange);
  line-height: 1;
  flex-shrink: 0;
}

/* ── Stock ─────────────────────────────────────────────────────────── */
.mi-buybox__stock {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-2);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-medium);
  color: var(--mi-text-secondary);
}
.mi-buybox__stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

/* ── Qty + Add to cart row ─────────────────────────────────────────── */
.mi-buybox__cart-row {
  display: flex;
  gap: var(--mi-sp-3);
  align-items: stretch;
}
.mi-qty {
  display: inline-flex;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-md);
  background: white;
  overflow: hidden;
  flex-shrink: 0;
}
.mi-qty__btn {
  width: 44px;
  height: 52px;
  background: var(--mi-bg-soft);
  color: var(--mi-text-primary);
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  transition: background .15s;
  user-select: none;
}
.mi-qty__btn:hover { background: var(--mi-bg-muted); }
.mi-qty__btn:active { background: var(--mi-color-primary-soft); }
.mi-qty__input {
  width: 56px;
  height: 52px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--mi-border-light);
  border-right: 1px solid var(--mi-border-light);
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-semibold);
  font-size: var(--mi-fs-md);
  background: white;
}
.mi-qty__input:focus { outline: 2px solid var(--mi-color-primary); outline-offset: -2px; }

.mi-buybox__add {
  flex: 1;
  gap: var(--mi-sp-2);
}
.mi-buybox__whatsapp {
  width: 100%;
  gap: var(--mi-sp-2);
}

/* ── Trust strip ───────────────────────────────────────────────────── */
.mi-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mi-sp-3);
  list-style: none;
  margin: var(--mi-sp-2) 0 0;
  padding: var(--mi-sp-4);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-lg);
}
@media (min-width: 480px) {
  .mi-trust-strip { grid-template-columns: repeat(4, 1fr); }
}
.mi-trust-strip li {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-2);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  line-height: 1.3;
}
.mi-trust-strip svg { color: var(--mi-color-primary); flex-shrink: 0; }
.mi-trust-strip strong { color: var(--mi-text-primary); font-weight: var(--mi-fw-semibold); }

/* ── Tabs ──────────────────────────────────────────────────────────── */
.mi-tabs {
  margin: var(--mi-sp-10) 0;
  /* Explicit: container is a block, not a flex parent. Defensive against
     any older .mi-tabs rule that may try to make it a flex container. */
  display: block;
  border: 0;
  padding: 0;
}
.mi-tabs__nav {
  display: flex;
  gap: var(--mi-sp-1);
  border-bottom: 1px solid var(--mi-border-light);
  margin-bottom: var(--mi-sp-6);
  overflow-x: auto;
  scrollbar-width: none;
  /* Tabs nav scrolls horizontally on mobile if content overflows */
  -webkit-overflow-scrolling: touch;
}
.mi-tabs__nav::-webkit-scrollbar { display: none; }
.mi-tabs__tab {
  padding: var(--mi-sp-3) var(--mi-sp-4);
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-tertiary);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  cursor: pointer;
}
.mi-tabs__tab:hover { color: var(--mi-text-primary); }
.mi-tabs__tab--active {
  color: var(--mi-color-primary);
  border-bottom-color: var(--mi-color-primary);
}
.mi-tabs__count {
  margin-left: 4px;
  font-weight: var(--mi-fw-regular);
  color: var(--mi-text-tertiary);
}
.mi-tabs__panels {
  display: block;
  /* Reasonable line-length for readable prose inside tab content. The
     description, shipping copy, and review form all flow as a single column. */
  max-width: 76ch;
}
.mi-tabs__panel { display: none; }
.mi-tabs__panel--active { display: block; animation: miFadeIn .2s ease; }

/* Specs table doesn't need a max-width constraint — let it use full width */
.mi-tabs__panel[data-panel="specs"] {
  max-width: none;
}

@keyframes miFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Specs table ───────────────────────────────────────────────────── */
.mi-specs__group-title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  margin: var(--mi-sp-5) 0 var(--mi-sp-3);
}
.mi-specs__table {
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-md);
  overflow: hidden;
  margin-bottom: var(--mi-sp-5);
}
.mi-specs__table th,
.mi-specs__table td {
  padding: var(--mi-sp-3) var(--mi-sp-4);
  text-align: left;
  font-size: var(--mi-fs-sm);
  border-bottom: 1px solid var(--mi-border-light);
}
.mi-specs__table tr:last-child th,
.mi-specs__table tr:last-child td { border-bottom: 0; }
.mi-specs__table th {
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  background: var(--mi-bg-soft);
  width: 35%;
}
.mi-specs__table td {
  font-family: var(--mi-font-mono);
  color: var(--mi-text-primary);
}

/* ── ROI calculator ────────────────────────────────────────────────── */
.mi-roi {
  margin: var(--mi-sp-10) 0;
  padding: var(--mi-sp-7);
  background: linear-gradient(135deg, var(--mi-color-primary-50) 0%, white 100%);
  border: 1px solid var(--mi-color-primary-100);
  border-radius: var(--mi-radius-xl);
}
.mi-roi__header h2 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-2xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  margin-bottom: var(--mi-sp-2);
}
.mi-roi__header p {
  color: var(--mi-text-secondary);
  font-size: var(--mi-fs-sm);
  margin-bottom: var(--mi-sp-6);
}
.mi-roi__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-6);
}
@media (min-width: 768px) {
  .mi-roi__grid { grid-template-columns: 1fr 1fr; }
}
.mi-roi__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mi-sp-4);
}
.mi-roi__field label {
  display: block;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-secondary);
  margin-bottom: var(--mi-sp-2);
}
.mi-roi__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-md);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.mi-roi__input-wrap:focus-within {
  border-color: var(--mi-color-primary);
  box-shadow: 0 0 0 3px var(--mi-color-primary-soft);
}
.mi-roi__prefix, .mi-roi__suffix {
  padding: 0 var(--mi-sp-3);
  color: var(--mi-text-tertiary);
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-medium);
}
.mi-roi__input-wrap .mi-input {
  flex: 1;
  width: 100%;
  border: 0;
  background: transparent;
  padding: var(--mi-sp-3) 0;
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-primary);
  font-size: var(--mi-fs-md);
}
.mi-roi__input-wrap .mi-input:focus { outline: 0; }
.mi-roi__field small {
  display: block;
  margin-top: var(--mi-sp-1);
  font-size: 11px;
  color: var(--mi-text-tertiary);
  line-height: 1.4;
}
.mi-roi__outputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-3);
}
@media (min-width: 540px) {
  .mi-roi__outputs { grid-template-columns: 1fr 1fr; }
}
.mi-roi__out {
  padding: var(--mi-sp-4);
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* The "Daily profit" cell is the headline number — bump its visual weight */
.mi-roi__out--accent {
  background: var(--mi-color-primary-50);
  border-color: var(--mi-color-primary-200, var(--mi-color-primary-100));
  grid-column: 1 / -1; /* full width on the 2-up grid */
}
.mi-roi__out--accent .mi-roi__out-value {
  font-size: clamp(var(--mi-fs-2xl), 4vw, var(--mi-fs-4xl));
}
.mi-roi__out-label {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-tertiary);
}
.mi-roi__out-value {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-2xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  letter-spacing: -0.01em;
}
.mi-roi__out-value--pos { color: #047857; }
.mi-roi__out-value--neg { color: #DC2626; }
.mi-roi__out-meta {
  font-size: 11px;
  color: var(--mi-text-tertiary);
}
.mi-roi__network-note {
  display: block;
  margin-top: var(--mi-sp-2);
  padding: var(--mi-sp-2) var(--mi-sp-3);
  background: var(--mi-color-warning-soft, #FFF6E6);
  border-left: 3px solid var(--mi-color-warning, #F59E0B);
  border-radius: var(--mi-radius-sm);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-medium);
  color: var(--mi-text-secondary);
}
.mi-roi__network-note:empty { display: none; }
.mi-roi__disclaimer {
  margin-top: var(--mi-sp-5);
  padding-top: var(--mi-sp-4);
  border-top: 1px solid var(--mi-color-primary-100);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  line-height: 1.5;
}

/* ── Related products ──────────────────────────────────────────────── */
.mi-related {
  margin: var(--mi-sp-12) 0 var(--mi-sp-6);
}
.mi-related__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-2xl);
  font-weight: var(--mi-fw-bold);
  margin-bottom: var(--mi-sp-5);
}
.mi-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--mi-sp-5);
}

/* ── Tags ──────────────────────────────────────────────────────────── */
.mi-tags {
  margin-top: var(--mi-sp-6);
  padding-top: var(--mi-sp-4);
  border-top: 1px solid var(--mi-border-light);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
}
.mi-tags a {
  color: var(--mi-color-primary);
  padding: 2px 4px;
}
.mi-tags a:hover { text-decoration: underline; }

/* ── Sticky mobile bottom bar ──────────────────────────────────────── */
.mi-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  background: white;
  border-top: 1px solid var(--mi-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  z-index: 80;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.mi-sticky-bar--show { transform: translateY(0); }
.mi-sticky-bar__price { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mi-sticky-bar__new {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  line-height: 1;
}
.mi-sticky-bar__old {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  text-decoration: line-through;
  line-height: 1;
}
.mi-sticky-bar__add { min-width: 140px; }
@media (max-width: 767px) {
  .mi-sticky-bar { display: flex; }
  body:has(.mi-sticky-bar--show) { padding-bottom: 80px; }
}

/* ── Image lightbox ────────────────────────────────────────────────── */
.mi-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mi-sp-6);
  cursor: zoom-out;
  animation: miFadeIn .2s ease;
}
.mi-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--mi-radius-md);
}
.mi-lightbox__close {
  position: absolute;
  top: var(--mi-sp-4);
  right: var(--mi-sp-4);
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.1);
  color: white;
  font-size: 28px;
  border-radius: var(--mi-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  cursor: pointer;
}
.mi-lightbox__close:hover { background: rgba(255,255,255,.2); }

/* ── Review form ──────────────────────────────────────────────────── */
.mi-review-form {
  max-width: 640px;
  padding: var(--mi-sp-5);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-lg);
}
.mi-review-form h3 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  margin-bottom: var(--mi-sp-4);
}
.mi-form-group {
  margin-bottom: var(--mi-sp-4);
}
.mi-form-group label {
  display: block;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  margin-bottom: var(--mi-sp-2);
}
.mi-form-group--required label::after { content: ' *'; color: #DC2626; }
.mi-form-group small {
  display: block;
  margin-top: 4px;
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
}
.mi-input {
  width: 100%;
  min-height: 44px;
  padding: var(--mi-sp-2) var(--mi-sp-3);
  background: white;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-md);
  font-size: 16px;
  color: var(--mi-text-primary);
  transition: border-color .15s, box-shadow .15s;
}
.mi-input:focus {
  outline: 0;
  border-color: var(--mi-color-primary);
  box-shadow: 0 0 0 3px var(--mi-color-primary-soft);
}
.mi-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--mi-sp-3); cursor: pointer; }
.mi-rating-input { display: flex; align-items: center; gap: var(--mi-sp-2); flex-wrap: wrap; }
.mi-rating-input label { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--mi-fw-medium); cursor: pointer; }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.mi-alert {
  position: relative;
  padding: var(--mi-sp-3) var(--mi-sp-12) var(--mi-sp-3) var(--mi-sp-4);
  border-radius: var(--mi-radius-md);
  font-size: var(--mi-fs-sm);
  margin: var(--mi-sp-4) 0;
}
.mi-alert--success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}
.mi-alert--error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.mi-alert__close {
  position: absolute;
  right: var(--mi-sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: .6;
}
.mi-alert__close:hover { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 5 — CATEGORY PAGE ══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */

.mi-category-page {
  background: var(--mi-bg-page);
  padding: var(--mi-sp-6) 0 var(--mi-sp-12);
}

.mi-category-hero {
  margin: var(--mi-sp-4) 0 var(--mi-sp-8);
}
.mi-category-hero__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--mi-sp-4);
}
@media (min-width: 768px) {
  .mi-category-hero__title { font-size: var(--mi-fs-5xl); }
}
.mi-category-hero__intro {
  max-width: 78ch;
  color: var(--mi-text-secondary);
}

/* ── Subcategory tiles ─────────────────────────────────────────────── */
.mi-subcat {
  margin: var(--mi-sp-8) 0;
  padding: var(--mi-sp-6);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-xl);
}
.mi-subcat__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-tertiary);
  margin-bottom: var(--mi-sp-4);
}
.mi-subcat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--mi-sp-3);
}
.mi-subcat__tile {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-4);
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  transition: all .15s;
}
.mi-subcat__tile:hover {
  border-color: var(--mi-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 55, 242, 0.08);
}
.mi-subcat__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  border-radius: var(--mi-radius-md);
  flex-shrink: 0;
  font-size: 18px;
}
.mi-subcat__icon img { width: 28px; height: 28px; object-fit: contain; }
.mi-subcat__name {
  font-family: var(--mi-font-display);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-primary);
  font-size: var(--mi-fs-sm);
}

/* ── Toolbar (sort + limit) ────────────────────────────────────────── */
.mi-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  align-items: flex-start;
  margin: var(--mi-sp-6) 0;
  padding: var(--mi-sp-4) 0;
  border-bottom: 1px solid var(--mi-border-light);
}
@media (min-width: 768px) {
  .mi-toolbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.mi-toolbar__results {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-tertiary);
}
.mi-toolbar__controls {
  display: flex;
  gap: var(--mi-sp-3);
  flex-wrap: wrap;
}
.mi-toolbar__field {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-2);
}
.mi-toolbar__field label {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-tertiary);
  white-space: nowrap;
}
.mi-select {
  min-height: 38px;
  padding: 0 var(--mi-sp-3);
  padding-right: var(--mi-sp-8);
  background: white;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-md);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-medium);
  color: var(--mi-text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mi-sp-3) center;
  cursor: pointer;
  transition: border-color .15s;
}
.mi-select:hover { border-color: var(--mi-color-primary-100); }
.mi-select:focus { outline: 0; border-color: var(--mi-color-primary); box-shadow: 0 0 0 3px var(--mi-color-primary-soft); }

/* ── Product grid ─────────────────────────────────────────────────── */
.mi-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--mi-sp-5);
  margin: var(--mi-sp-6) 0;
}
@media (min-width: 600px) {
  .mi-product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── Product card (shared partial) ─────────────────────────────────── */
.mi-product-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  overflow: hidden;
  transition: all .2s ease;
  text-decoration: none;
}
.mi-product-card:hover {
  border-color: var(--mi-color-primary-100);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}
.mi-product-card__image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--mi-bg-soft);
  overflow: hidden;
}
.mi-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--mi-sp-4);
  transition: transform .3s ease;
}
.mi-product-card:hover .mi-product-card__image img { transform: scale(1.04); }
.mi-product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 60px;
  color: var(--mi-text-tertiary);
  opacity: .3;
}
.mi-product-card__badge {
  position: absolute;
  top: var(--mi-sp-2);
  left: var(--mi-sp-2);
  padding: 4px var(--mi-sp-2);
  background: var(--mi-color-orange);
  color: white;
  font-family: var(--mi-font-display);
  font-size: 10px;
  font-weight: var(--mi-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  border-radius: var(--mi-radius-sm);
}
.mi-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--mi-sp-2);
  padding: var(--mi-sp-4);
}
.mi-product-card__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  line-height: 1.3;
  color: var(--mi-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.mi-product-card__title a { color: inherit; }
.mi-product-card__title a:hover { color: var(--mi-color-primary); }
.mi-product-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--mi-sp-2);
  flex-wrap: wrap;
}
.mi-product-card__price-new {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
}
.mi-product-card__price-old {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-tertiary);
  text-decoration: line-through;
}
.mi-product-card__btc {
  font-size: var(--mi-fs-xs);
  color: var(--mi-color-orange);
  font-weight: var(--mi-fw-medium);
  margin: 0;
}
.mi-product-card__actions {
  display: flex;
  gap: var(--mi-sp-2);
  margin-top: auto;
  padding-top: var(--mi-sp-2);
}
.mi-product-card__cart { flex: 1; }

/* ── Pagination ───────────────────────────────────────────────────── */
.mi-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mi-sp-3);
  margin: var(--mi-sp-8) 0 var(--mi-sp-4);
}
@media (min-width: 600px) {
  .mi-pagination {
    flex-direction: row;
    justify-content: space-between;
  }
}
.mi-pagination__results {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-tertiary);
}
/* OpenCart renders pagination as <ul class="pagination">. We restyle it: */
.mi-pagination .pagination {
  display: flex;
  gap: var(--mi-sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.mi-pagination .pagination li a,
.mi-pagination .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--mi-sp-2);
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-md);
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  transition: all .15s;
}
.mi-pagination .pagination li a:hover {
  border-color: var(--mi-color-primary);
  color: var(--mi-color-primary);
}
.mi-pagination .pagination li.active span {
  background: var(--mi-color-primary);
  border-color: var(--mi-color-primary);
  color: white;
}
.mi-pagination .pagination li.disabled span {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Empty state ──────────────────────────────────────────────────── */
.mi-empty {
  text-align: center;
  padding: var(--mi-sp-12) var(--mi-sp-4);
  color: var(--mi-text-secondary);
}
.mi-empty p {
  font-size: var(--mi-fs-md);
  margin-bottom: var(--mi-sp-4);
}

/* ── End of Phase 4 + 5 ─────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 6 — CART · CHECKOUT · 404 ══════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 6.1 — 404 NOT FOUND PAGE ═══════════════════════════════════════ */

.mi-404-page {
  background: var(--mi-bg-page);
  padding: var(--mi-sp-6) 0 var(--mi-sp-12);
}
.mi-404 {
  max-width: 720px;
  margin: var(--mi-sp-8) auto;
  text-align: center;
}
.mi-404__art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-sp-3);
  margin-bottom: var(--mi-sp-6);
  line-height: 1;
}
.mi-404__digit {
  font-family: var(--mi-font-display);
  font-size: 120px;
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-primary);
  letter-spacing: -0.05em;
}
.mi-404__icon {
  font-size: 80px;
  filter: grayscale(.2);
  animation: mi404Spin 3s ease-in-out infinite;
}
@keyframes mi404Spin {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.mi-404__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-3xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  margin-bottom: var(--mi-sp-3);
  letter-spacing: -0.02em;
}
.mi-404__text {
  font-size: var(--mi-fs-md);
  color: var(--mi-text-secondary);
  margin-bottom: var(--mi-sp-6);
  line-height: 1.5;
}
.mi-404__sub {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-tertiary);
  margin: var(--mi-sp-4) 0 var(--mi-sp-3);
}
.mi-404__links {
  margin-bottom: var(--mi-sp-6);
}
.mi-404__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-3);
  margin-top: var(--mi-sp-4);
}
@media (min-width: 600px) {
  .mi-404__grid { grid-template-columns: repeat(2, 1fr); }
}
.mi-404__tile {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-4);
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  text-align: left;
  transition: all .15s;
}
.mi-404__tile:hover {
  border-color: var(--mi-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 55, 242, 0.08);
}
.mi-404__tile-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  border-radius: var(--mi-radius-md);
  flex-shrink: 0;
  font-size: 22px;
  font-weight: var(--mi-fw-bold);
}
.mi-404__tile--whatsapp .mi-404__tile-icon {
  background: rgba(37, 211, 102, 0.12);
  color: var(--mi-color-whatsapp);
}
.mi-404__tile-label { display: flex; flex-direction: column; gap: 2px; }
.mi-404__tile-label strong {
  font-family: var(--mi-font-display);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-primary);
  font-size: var(--mi-fs-sm);
}
.mi-404__tile-label small {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
}

@media (max-width: 600px) {
  .mi-404__digit { font-size: 80px; }
  .mi-404__icon { font-size: 56px; }
}


/* ═══ 6.2 — CART PAGE ═════════════════════════════════════════════════ */

.mi-cart-page {
  background: var(--mi-bg-page);
  padding: var(--mi-sp-6) 0 var(--mi-sp-12);
}

.mi-cart-header { margin: var(--mi-sp-4) 0 var(--mi-sp-6); }
.mi-cart-header h1 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--mi-sp-2);
}
.mi-cart-header__weight {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-regular);
  color: var(--mi-text-tertiary);
  margin-left: var(--mi-sp-2);
}
.mi-cart-header__sub {
  color: var(--mi-text-secondary);
  max-width: 70ch;
}

.mi-cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-6);
  margin-top: var(--mi-sp-6);
}
@media (min-width: 900px) {
  .mi-cart-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--mi-sp-8);
    align-items: flex-start;
  }
}

/* ── Cart items ──────────────────────────────────────────────────── */
.mi-cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
}
.mi-cart-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-areas:
    "image body"
    "image price"
    "qty   qty";
  gap: var(--mi-sp-3) var(--mi-sp-4);
  padding: var(--mi-sp-4);
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  align-items: start;
}
@media (min-width: 720px) {
  .mi-cart-item {
    grid-template-columns: 100px minmax(0, 1fr) auto auto;
    grid-template-areas: "image body qty price";
    align-items: center;
  }
}
.mi-cart-item__image {
  grid-area: image;
  width: 100px;
  height: 100px;
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mi-cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.mi-cart-item__placeholder { font-size: 40px; color: var(--mi-text-tertiary); opacity: .35; }

.mi-cart-item__body { grid-area: body; min-width: 0; }
.mi-cart-item__name {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-primary);
  line-height: 1.3;
  margin: 0 0 var(--mi-sp-2);
}
.mi-cart-item__name a { color: inherit; }
.mi-cart-item__name a:hover { color: var(--mi-color-primary); }
.mi-cart-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sp-1) var(--mi-sp-3);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  margin: 0;
}
.mi-cart-item__meta dt {
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
}
.mi-cart-item__meta dt::after { content: ':'; margin-right: 4px; }
.mi-cart-item__meta dd { margin: 0; color: var(--mi-text-secondary); }
.mi-cart-item__meta dd::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--mi-border-light);
  margin: 0 var(--mi-sp-2) -1px;
}
.mi-cart-item__meta dd:last-of-type::after { display: none; }
.mi-cart-item__stock-warning {
  margin-top: var(--mi-sp-2);
  padding: 6px 10px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--mi-radius-sm);
  font-size: var(--mi-fs-xs);
  color: #991B1B;
}

.mi-cart-item__qty { grid-area: qty; display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 720px) { .mi-cart-item__qty { align-items: center; } }
.mi-cart-item__qty-label {
  font-family: var(--mi-font-display);
  font-size: 10px;
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-tertiary);
}
.mi-cart-item__qty-actions {
  display: flex;
  gap: var(--mi-sp-3);
  font-size: var(--mi-fs-xs);
}
.mi-cart-item__update,
.mi-cart-item__remove {
  background: transparent;
  border: 0;
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-medium);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mi-cart-item__update { color: var(--mi-color-primary); }
.mi-cart-item__update:hover { color: var(--mi-color-primary-hover); }
.mi-cart-item__remove { color: var(--mi-text-tertiary); }
.mi-cart-item__remove:hover { color: #DC2626; }

.mi-cart-item__price {
  grid-area: price;
  text-align: right;
}
@media (max-width: 719px) { .mi-cart-item__price { text-align: left; } }
.mi-cart-item__total {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
}
.mi-cart-item__unit {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  margin-top: 2px;
}

/* ── Cart summary ──────────────────────────────────────────────────── */
.mi-cart-summary {
  position: sticky;
  top: var(--mi-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-4);
}
.mi-cart-summary__totals {
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  padding: var(--mi-sp-5);
}
.mi-cart-summary__totals h3 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  margin: 0 0 var(--mi-sp-4);
  letter-spacing: -0.01em;
}
.mi-cart-summary__totals dl { margin: 0 0 var(--mi-sp-4); }
.mi-cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--mi-sp-2) 0;
  border-bottom: 1px solid var(--mi-border-light);
}
.mi-cart-summary__row:last-of-type { border-bottom: 0; }
.mi-cart-summary__row dt {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
}
.mi-cart-summary__row dd {
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-semibold);
  margin: 0;
  color: var(--mi-text-primary);
}
.mi-cart-summary__row--grand {
  margin-top: var(--mi-sp-2);
  padding-top: var(--mi-sp-3);
  border-top: 2px solid var(--mi-text-primary);
  border-bottom: 0 !important;
}
.mi-cart-summary__row--grand dt {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
}
.mi-cart-summary__row--grand dd {
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
}

.mi-cart-summary__btc {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-sp-2);
  padding: var(--mi-sp-3);
  margin-bottom: var(--mi-sp-4);
  background: var(--mi-color-orange-soft);
  border: 1px solid color-mix(in srgb, var(--mi-color-orange) 30%, transparent);
  border-radius: var(--mi-radius-md);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-primary);
  line-height: 1.45;
}
.mi-cart-summary__btc-icon {
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-orange);
  font-size: var(--mi-fs-md);
  line-height: 1;
  flex-shrink: 0;
}

.mi-cart-summary__checkout {
  width: 100%;
  margin-bottom: var(--mi-sp-2);
}
.mi-cart-summary__continue {
  width: 100%;
  margin-bottom: var(--mi-sp-3);
}
.mi-cart-summary__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--mi-fs-sm);
  color: var(--mi-color-whatsapp);
  font-weight: var(--mi-fw-medium);
  text-align: center;
}
.mi-cart-summary__whatsapp:hover { text-decoration: underline; }

.mi-cart-summary__modules {
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  padding: var(--mi-sp-4);
}
.mi-cart-summary__modules h3 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
  margin: 0 0 var(--mi-sp-1);
}
.mi-cart-summary__modules p {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  margin: 0 0 var(--mi-sp-3);
}
.mi-cart-summary__modules .panel-group { margin: 0; }
.mi-cart-summary__modules .panel { background: transparent; border: 0; box-shadow: none; margin: 0; }
.mi-cart-summary__modules .panel-heading {
  background: transparent;
  border: 0;
  padding: var(--mi-sp-2) 0;
}
.mi-cart-summary__modules .panel-title a {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-color-primary);
  text-decoration: none;
}
.mi-cart-summary__modules .panel-title a:hover { text-decoration: underline; }
.mi-cart-summary__modules .panel-body {
  padding: var(--mi-sp-3) 0 0;
  border-top: 1px solid var(--mi-border-light);
}

.mi-cart-summary__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-2);
}
.mi-cart-summary__trust li {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  padding-left: var(--mi-sp-4);
  position: relative;
  line-height: 1.45;
}
.mi-cart-summary__trust li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--mi-color-primary);
  font-weight: var(--mi-fw-bold);
}
.mi-cart-summary__trust strong { color: var(--mi-text-primary); font-weight: var(--mi-fw-semibold); }

/* ── Empty cart state ─────────────────────────────────────────────── */
.mi-cart-empty {
  text-align: center;
  padding: var(--mi-sp-12) var(--mi-sp-4);
  max-width: 540px;
  margin: 0 auto;
}
.mi-cart-empty__icon {
  font-size: 72px;
  margin-bottom: var(--mi-sp-4);
  opacity: .4;
}
.mi-cart-empty h2 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-2xl);
  font-weight: var(--mi-fw-bold);
  margin-bottom: var(--mi-sp-3);
}
.mi-cart-empty p {
  color: var(--mi-text-secondary);
  margin-bottom: var(--mi-sp-6);
}
.mi-cart-empty__actions {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  max-width: 320px;
  margin: 0 auto;
}
@media (min-width: 480px) {
  .mi-cart-empty__actions { flex-direction: row; justify-content: center; max-width: none; }
}


/* ═══ 6.3 — CHECKOUT PAGE (style over OpenCart's existing markup) ═══ */

#checkout-checkout {
  max-width: var(--mi-container-max);
  margin: 0 auto;
  padding: var(--mi-sp-6) var(--mi-sp-4) var(--mi-sp-12);
}
#checkout-checkout > h1 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: var(--mi-sp-4) 0 var(--mi-sp-6);
}

/* OpenCart wraps its breadcrumb in <ul class="breadcrumb"> — style it like Phase 4's */
#checkout-checkout > .breadcrumb,
#checkout-cart > .breadcrumb,
#error-not-found > .breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sp-1);
  padding: var(--mi-sp-3) 0;
  margin: 0;
  font-size: var(--mi-fs-sm);
  background: transparent;
  border-radius: 0;
}
#checkout-checkout > .breadcrumb > li,
#checkout-cart > .breadcrumb > li,
#error-not-found > .breadcrumb > li {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-1);
}
#checkout-checkout > .breadcrumb > li::after,
#checkout-cart > .breadcrumb > li::after,
#error-not-found > .breadcrumb > li::after {
  content: '›';
  color: var(--mi-text-tertiary);
  opacity: .5;
  margin-left: var(--mi-sp-1);
}
#checkout-checkout > .breadcrumb > li:last-child::after,
#checkout-cart > .breadcrumb > li:last-child::after,
#error-not-found > .breadcrumb > li:last-child::after { display: none; }
#checkout-checkout > .breadcrumb a,
#checkout-cart > .breadcrumb a,
#error-not-found > .breadcrumb a {
  color: var(--mi-text-tertiary);
}
#checkout-checkout > .breadcrumb a:hover,
#checkout-cart > .breadcrumb a:hover,
#error-not-found > .breadcrumb a:hover { color: var(--mi-color-primary); }
#checkout-checkout > .breadcrumb > li:last-child a,
#checkout-cart > .breadcrumb > li:last-child a,
#error-not-found > .breadcrumb > li:last-child a {
  color: var(--mi-text-primary);
  font-weight: var(--mi-fw-medium);
  pointer-events: none;
}

/* ── Accordion panels ─────────────────────────────────────────────── */
#checkout-checkout #accordion {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  margin-bottom: 0;
}
#checkout-checkout #accordion .panel {
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  box-shadow: none;
  margin: 0;
  overflow: hidden;
}
#checkout-checkout #accordion .panel-heading {
  background: var(--mi-bg-soft);
  border: 0;
  border-bottom: 1px solid var(--mi-border-light);
  padding: var(--mi-sp-4) var(--mi-sp-5);
  border-radius: 0;
}
#checkout-checkout #accordion .panel-heading:only-child,
#checkout-checkout #accordion .panel-collapse.in ~ .panel-heading,
#checkout-checkout #accordion .panel:has(.panel-collapse:not(.in)) .panel-heading {
  border-bottom: 0;
}
#checkout-checkout #accordion .panel-title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
#checkout-checkout #accordion .panel-title a,
#checkout-checkout #accordion .panel-title a:focus,
#checkout-checkout #accordion .panel-title a:hover {
  color: var(--mi-color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#checkout-checkout #accordion .panel-title a .fa-caret-down {
  color: var(--mi-text-tertiary);
  font-size: var(--mi-fs-sm);
  transition: transform .2s;
}
#checkout-checkout #accordion .panel-collapse.in + .panel-title .fa-caret-down,
#checkout-checkout #accordion .panel-collapse[aria-expanded="true"] .fa-caret-down {
  transform: rotate(180deg);
}
#checkout-checkout #accordion .panel-body {
  padding: var(--mi-sp-5);
  background: white;
}

/* ── Form fields inside checkout panels (catches the unrewritten sub-templates) ── */
#checkout-checkout .panel-body .form-group,
#checkout-cart .panel-body .form-group {
  margin-bottom: var(--mi-sp-4);
}
#checkout-checkout .panel-body .form-group label.control-label,
#checkout-cart .panel-body .form-group label.control-label,
#checkout-checkout .panel-body legend {
  display: block;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  margin-bottom: var(--mi-sp-2);
  padding: 0;
  border: 0;
}
#checkout-checkout .panel-body legend {
  font-size: var(--mi-fs-lg);
  color: var(--mi-text-primary);
  font-weight: var(--mi-fw-bold);
  margin: var(--mi-sp-2) 0 var(--mi-sp-4);
}
#checkout-checkout .panel-body .form-group.required label.control-label::after,
#checkout-cart .panel-body .form-group.required label.control-label::after {
  content: ' *';
  color: #DC2626;
}
#checkout-checkout .panel-body .form-control,
#checkout-cart .panel-body .form-control {
  width: 100%;
  min-height: 44px;
  padding: var(--mi-sp-2) var(--mi-sp-3);
  background: white;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-md);
  font-size: 16px;
  font-family: var(--mi-font-display);
  color: var(--mi-text-primary);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
#checkout-checkout .panel-body .form-control:focus,
#checkout-cart .panel-body .form-control:focus {
  outline: 0;
  border-color: var(--mi-color-primary);
  box-shadow: 0 0 0 3px var(--mi-color-primary-soft);
}
#checkout-checkout .panel-body select.form-control,
#checkout-cart .panel-body select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mi-sp-3) center;
  padding-right: var(--mi-sp-8);
}
#checkout-checkout .panel-body textarea.form-control,
#checkout-cart .panel-body textarea.form-control {
  min-height: 100px;
  resize: vertical;
}
#checkout-checkout .panel-body .has-error .form-control {
  border-color: #DC2626;
}
#checkout-checkout .panel-body .text-danger {
  font-size: var(--mi-fs-xs);
  color: #DC2626;
  margin-top: 4px;
}
#checkout-checkout .panel-body .radio,
#checkout-checkout .panel-body .checkbox {
  padding-left: 0;
  margin: var(--mi-sp-2) 0;
}
#checkout-checkout .panel-body .radio label,
#checkout-checkout .panel-body .checkbox label {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-2);
  padding-left: 0;
  font-weight: var(--mi-fw-regular);
  color: var(--mi-text-primary);
  cursor: pointer;
}
#checkout-checkout .panel-body .radio input,
#checkout-checkout .panel-body .checkbox input {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--mi-color-primary);
  flex-shrink: 0;
}
#checkout-checkout .panel-body .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-4);
  margin: 0;
}
@media (min-width: 720px) {
  #checkout-checkout .panel-body .row { grid-template-columns: 1fr 1fr; }
}
#checkout-checkout .panel-body .row .col-sm-6 {
  width: auto;
  padding: 0;
  float: none;
}

#checkout-checkout .panel-body .btn,
#checkout-checkout .panel-body input[type="button"].btn,
#checkout-checkout .panel-body .buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--mi-sp-7);
  background: var(--mi-color-primary);
  border: 0;
  border-radius: var(--mi-radius-lg);
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  color: white;
  cursor: pointer;
  transition: background .15s;
  box-shadow: none;
}
#checkout-checkout .panel-body .btn:hover,
#checkout-checkout .panel-body input[type="button"].btn:hover {
  background: var(--mi-color-primary-hover);
}
#checkout-checkout .panel-body .btn.btn-default {
  background: white;
  color: var(--mi-text-primary);
  border: 1px solid var(--mi-border);
}
#checkout-checkout .panel-body .btn.btn-default:hover {
  background: var(--mi-bg-soft);
  border-color: var(--mi-color-primary);
  color: var(--mi-color-primary);
}
#checkout-checkout .panel-body .buttons {
  margin-top: var(--mi-sp-5);
  padding-top: var(--mi-sp-4);
  border-top: 1px solid var(--mi-border-light);
  display: flex;
  justify-content: flex-end;
  gap: var(--mi-sp-3);
}
#checkout-checkout .panel-body .buttons .pull-right { float: none; }
#checkout-checkout .panel-body .buttons .pull-left { float: none; margin-right: auto; }

/* Alerts inside checkout panels */
#checkout-checkout .alert,
#checkout-cart .alert {
  padding: var(--mi-sp-3) var(--mi-sp-4);
  border-radius: var(--mi-radius-md);
  font-size: var(--mi-fs-sm);
  margin-bottom: var(--mi-sp-4);
  border: 1px solid;
}
#checkout-checkout .alert.alert-danger,
#checkout-checkout .alert.alert-warning,
#checkout-cart .alert.alert-danger {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FECACA;
}
#checkout-checkout .alert.alert-info,
#checkout-cart .alert.alert-info {
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  border-color: var(--mi-color-primary-100);
}
#checkout-checkout .alert.alert-success,
#checkout-cart .alert.alert-success {
  background: #DCFCE7;
  color: #166534;
  border-color: #BBF7D0;
}
#checkout-checkout .alert .close,
#checkout-cart .alert .close {
  float: right;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: .6;
  font-size: var(--mi-fs-md);
  line-height: 1;
}
#checkout-checkout .alert .close:hover,
#checkout-cart .alert .close:hover { opacity: 1; }


/* ═══ 6.4 — PAYMENT/SHIPPING METHOD RADIOS (branded) ═══════════════ */

.mi-pay-methods,
.mi-ship-methods {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  margin: var(--mi-sp-4) 0;
}
.mi-ship-method-group { margin-bottom: var(--mi-sp-4); }
.mi-ship-method-group:last-child { margin-bottom: 0; }
.mi-ship-method-group__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-tertiary);
  margin: var(--mi-sp-3) 0 var(--mi-sp-2);
}

.mi-pay-method {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-4);
  background: white;
  border: 1.5px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  cursor: pointer;
  transition: all .15s;
}
.mi-pay-method:hover { border-color: var(--mi-color-primary-100); background: var(--mi-color-primary-50); }
.mi-pay-method__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mi-pay-method__indicator {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--mi-border);
  border-radius: 50%;
  position: relative;
  transition: border-color .15s, background .15s;
}
.mi-pay-method__indicator::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--mi-color-primary);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s, transform .15s;
}
.mi-pay-method__radio:checked ~ .mi-pay-method__indicator {
  border-color: var(--mi-color-primary);
}
.mi-pay-method__radio:checked ~ .mi-pay-method__indicator::after {
  opacity: 1;
  transform: scale(1);
}
.mi-pay-method:has(.mi-pay-method__radio:checked),
.mi-pay-method.mi-pay-method--selected {
  border-color: var(--mi-color-primary);
  background: var(--mi-color-primary-50);
  box-shadow: 0 0 0 3px var(--mi-color-primary-soft);
}
.mi-pay-method--crypto:has(.mi-pay-method__radio:checked),
.mi-pay-method--crypto.mi-pay-method--selected {
  border-color: var(--mi-color-orange);
  background: var(--mi-color-orange-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mi-color-orange) 20%, transparent);
}
.mi-pay-method--crypto:has(.mi-pay-method__radio:checked) .mi-pay-method__indicator,
.mi-pay-method--crypto.mi-pay-method--selected .mi-pay-method__indicator {
  border-color: var(--mi-color-orange);
}
.mi-pay-method--crypto:has(.mi-pay-method__radio:checked) .mi-pay-method__indicator::after,
.mi-pay-method--crypto.mi-pay-method--selected .mi-pay-method__indicator::after {
  background: var(--mi-color-orange);
}

.mi-pay-method__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mi-pay-method__title {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-2);
  flex-wrap: wrap;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-primary);
  line-height: 1.3;
}
.mi-pay-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--mi-color-orange);
  color: white;
  border-radius: 50%;
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-md);
  flex-shrink: 0;
}
.mi-pay-method__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--mi-sp-2);
  font-family: var(--mi-font-display);
  font-size: 10px;
  font-weight: var(--mi-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  background: var(--mi-color-orange);
  color: white;
  border-radius: var(--mi-radius-full);
  line-height: 1;
}
.mi-pay-method__badge--ddp {
  background: var(--mi-color-primary);
}
.mi-pay-method__terms {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
}
.mi-pay-method__crypto-note {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  line-height: 1.45;
  margin-top: 2px;
}

.mi-pay-agree {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-sp-2);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-md);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
  cursor: pointer;
  margin-bottom: var(--mi-sp-4);
  line-height: 1.5;
}
.mi-pay-agree input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--mi-color-primary);
  flex-shrink: 0;
}

/* Checkout step lead text + footer */
.mi-checkout-step__lead {
  font-size: var(--mi-fs-md);
  color: var(--mi-text-secondary);
  margin: 0 0 var(--mi-sp-3);
}
.mi-checkout-step__field { margin: var(--mi-sp-4) 0; }
.mi-checkout-step__label {
  display: block;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-secondary);
  margin-bottom: var(--mi-sp-2);
}
.mi-checkout-step__footer {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
  margin-top: var(--mi-sp-5);
  padding-top: var(--mi-sp-4);
  border-top: 1px solid var(--mi-border-light);
}
.mi-checkout-step__footer .mi-btn--lg {
  align-self: stretch;
}
@media (min-width: 600px) {
  .mi-checkout-step__footer .mi-btn--lg {
    align-self: flex-end;
    min-width: 200px;
  }
}


/* ═══ 6.5 — CONFIRM STEP (style over default confirm.twig) ═══════ */

#collapse-checkout-confirm .panel-body .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
#collapse-checkout-confirm .panel-body .table thead td {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-text-tertiary);
  padding: var(--mi-sp-2) var(--mi-sp-3);
  background: var(--mi-bg-soft);
  border-top: 1px solid var(--mi-border-light);
  border-bottom: 1px solid var(--mi-border-light);
}
#collapse-checkout-confirm .panel-body .table tbody td {
  padding: var(--mi-sp-3);
  border-bottom: 1px solid var(--mi-border-light);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-primary);
}
#collapse-checkout-confirm .panel-body .table tbody td a {
  color: var(--mi-color-primary);
  font-weight: var(--mi-fw-medium);
}
#collapse-checkout-confirm .panel-body .table tfoot td {
  padding: var(--mi-sp-2) var(--mi-sp-3);
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-primary);
  border: 0;
}
#collapse-checkout-confirm .panel-body .table tfoot tr:last-child td {
  border-top: 2px solid var(--mi-text-primary);
  padding-top: var(--mi-sp-3);
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
}
#collapse-checkout-confirm .panel-body .table tfoot td:last-child {
  font-family: var(--mi-font-mono);
}
#collapse-checkout-confirm .panel-body .buttons {
  margin-top: var(--mi-sp-5);
  padding-top: var(--mi-sp-4);
  border-top: 1px solid var(--mi-border-light);
  display: flex;
  justify-content: flex-end;
}


/* ═══ 6.6 — LIGHTBOX FIX (Bootstrap collapse animation polish) ══════ */

#checkout-checkout #accordion .panel-collapse {
  transition: max-height .25s ease, opacity .2s ease;
}

/* ── End of Phase 6 ─────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 6.1 — PLISIO WHITE-LABEL INVOICE PAGE ═════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */

.mi-invoice-page {
  background: var(--mi-bg-page);
  padding: var(--mi-sp-6) 0 var(--mi-sp-12);
}

/* ── Header ──────────────────────────────────────────────────────── */
.mi-invoice-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-5);
  margin: var(--mi-sp-4) 0 var(--mi-sp-6);
  padding: var(--mi-sp-6);
  background: linear-gradient(135deg, var(--mi-color-orange-soft) 0%, var(--mi-color-primary-50) 100%);
  border-radius: var(--mi-radius-xl);
  border: 1px solid color-mix(in srgb, var(--mi-color-orange) 25%, transparent);
}
@media (min-width: 720px) {
  .mi-invoice-header {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--mi-sp-6);
  }
}
.mi-invoice-header__title {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-3xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 var(--mi-sp-2);
  line-height: 1.1;
}
@media (min-width: 768px) {
  .mi-invoice-header__title { font-size: var(--mi-fs-4xl); }
}
.mi-invoice-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--mi-color-orange);
  color: white;
  border-radius: 50%;
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-xl);
  line-height: 1;
}
.mi-invoice-header__sub {
  color: var(--mi-text-secondary);
  font-size: var(--mi-fs-md);
  max-width: 60ch;
  line-height: 1.5;
  margin: 0;
}
.mi-invoice-header__savings {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  padding: var(--mi-sp-4) var(--mi-sp-5);
  background: white;
  border-radius: var(--mi-radius-lg);
  border: 2px solid var(--mi-color-orange);
}
.mi-invoice-header__savings-pct {
  font-family: var(--mi-font-mono);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-orange);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mi-invoice-header__savings-text { display: flex; flex-direction: column; gap: 2px; }
.mi-invoice-header__savings-text strong {
  font-family: var(--mi-font-display);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  font-size: var(--mi-fs-sm);
}
.mi-invoice-header__savings-text small {
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
}

/* ── Trust strip ─────────────────────────────────────────────────── */
.mi-invoice-trust {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-2);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  margin: 0 0 var(--mi-sp-5);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-md);
}
@media (min-width: 600px) {
  .mi-invoice-trust { grid-template-columns: repeat(3, 1fr); }
}
.mi-invoice-trust li {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-2);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-medium);
  color: var(--mi-text-secondary);
}
.mi-invoice-trust svg { color: var(--mi-color-primary); flex-shrink: 0; }

/* ── Iframe wrapper ─────────────────────────────────────────────── */
.mi-invoice-frame {
  position: relative;
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-xl);
  overflow: hidden;
  min-height: 720px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
.mi-invoice-frame__iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: white;
}
.mi-invoice-frame__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mi-sp-4);
  background: white;
  z-index: 2;
  transition: opacity .3s ease;
}
.mi-invoice-frame__loader p {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-tertiary);
  margin: 0;
}
.mi-invoice-frame__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--mi-bg-soft);
  border-top-color: var(--mi-color-orange);
  border-radius: 50%;
  animation: miInvoiceSpin 0.8s linear infinite;
}
@keyframes miInvoiceSpin {
  to { transform: rotate(360deg); }
}

/* ── Help footer ─────────────────────────────────────────────────── */
.mi-invoice-help {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-6);
  margin-top: var(--mi-sp-6);
  padding: var(--mi-sp-6);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-xl);
}
@media (min-width: 720px) {
  .mi-invoice-help {
    grid-template-columns: 1fr 1fr;
    gap: var(--mi-sp-8);
  }
}
.mi-invoice-help h3 {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  margin: 0 0 var(--mi-sp-2);
}
.mi-invoice-help p {
  color: var(--mi-text-secondary);
  font-size: var(--mi-fs-sm);
  line-height: 1.55;
  margin: 0 0 var(--mi-sp-3);
}
.mi-invoice-help__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: invoice-step;
}
.mi-invoice-help__steps li {
  position: relative;
  padding: var(--mi-sp-2) 0 var(--mi-sp-2) var(--mi-sp-10);
  counter-increment: invoice-step;
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
  line-height: 1.5;
}
.mi-invoice-help__steps li::before {
  content: counter(invoice-step);
  position: absolute;
  left: 0;
  top: var(--mi-sp-2);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-color-primary);
  color: white;
  border-radius: 50%;
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-sm);
}
.mi-invoice-help__steps strong {
  display: block;
  color: var(--mi-text-primary);
  margin-bottom: 2px;
  font-weight: var(--mi-fw-semibold);
}


/* ═══ 6.2 — Plisio CONFIRM step button (inside #collapse-checkout-confirm) ═══ */

.mi-plisio-confirm {
  margin-top: var(--mi-sp-4);
}
.mi-plisio-confirm__row {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-4);
  padding: var(--mi-sp-5);
  background: var(--mi-color-orange-soft);
  border: 1px solid color-mix(in srgb, var(--mi-color-orange) 30%, transparent);
  border-radius: var(--mi-radius-lg);
}
@media (min-width: 600px) {
  .mi-plisio-confirm__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.mi-plisio-confirm__pitch {
  display: flex;
  align-items: flex-start;
  gap: var(--mi-sp-3);
  flex: 1;
}
.mi-plisio-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--mi-color-orange);
  color: white;
  border-radius: 50%;
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-md);
  flex-shrink: 0;
}
.mi-plisio-confirm__pitch strong {
  display: block;
  font-family: var(--mi-font-display);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  font-size: var(--mi-fs-md);
  margin-bottom: 2px;
}
.mi-plisio-confirm__pitch small {
  display: block;
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  line-height: 1.45;
}
.mi-plisio-confirm__btn {
  flex-shrink: 0;
}
@media (max-width: 599px) {
  .mi-plisio-confirm__btn { width: 100%; }
}

/* ── End of Phase 6.1 ───────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══ PHASE 6.1 — PLISIO WHITE-LABEL INVOICE PAGE ═════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */

.mi-plisio-page {
  background: var(--mi-bg-page);
  padding: var(--mi-sp-6) 0 var(--mi-sp-10);
}

/* Header ─────────────────────────────────────────────────────────────── */
.mi-plisio-header {
  text-align: center;
  max-width: 720px;
  margin: var(--mi-sp-4) auto var(--mi-sp-6);
}
.mi-plisio-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-sp-2);
  padding: 6px var(--mi-sp-3);
  background: var(--mi-color-orange-soft);
  border: 1px solid color-mix(in srgb, var(--mi-color-orange) 30%, transparent);
  border-radius: var(--mi-radius-full);
  margin-bottom: var(--mi-sp-4);
}
.mi-plisio-header__badge-icon {
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-color-orange);
  font-size: var(--mi-fs-md);
  line-height: 1;
}
.mi-plisio-header__badge-label {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  color: var(--mi-color-orange);
}
.mi-plisio-header__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--mi-sp-3);
}
@media (min-width: 768px) {
  .mi-plisio-header__title { font-size: var(--mi-fs-5xl); }
}
.mi-plisio-header__sub {
  font-size: var(--mi-fs-md);
  color: var(--mi-text-secondary);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 auto;
}

/* Status steps ────────────────────────────────────────────────────────── */
.mi-plisio-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-sp-2);
  list-style: none;
  margin: 0 auto var(--mi-sp-8);
  padding: var(--mi-sp-4);
  max-width: 900px;
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-xl);
  flex-wrap: wrap;
}
.mi-plisio-steps__step {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-2);
  flex: 1;
  min-width: 0;
}
.mi-plisio-steps__step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--mi-border-light);
  margin: 0 var(--mi-sp-2);
}
.mi-plisio-steps__step--done:not(:last-child)::after,
.mi-plisio-steps__step--active:not(:last-child)::after {
  background: linear-gradient(to right, var(--mi-color-primary) 0%, var(--mi-color-primary) 100%);
}
.mi-plisio-steps__step--done + .mi-plisio-steps__step:not(.mi-plisio-steps__step--active):not(.mi-plisio-steps__step--done)::after,
.mi-plisio-steps__step--active:not(:last-child)::after {
  background: linear-gradient(to right, var(--mi-color-primary) 0%, var(--mi-color-primary) 50%, var(--mi-border-light) 50%, var(--mi-border-light) 100%);
}
.mi-plisio-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mi-bg-soft);
  border: 2px solid var(--mi-border-light);
  color: var(--mi-text-tertiary);
  font-family: var(--mi-font-display);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-sm);
  flex-shrink: 0;
  transition: all .2s;
}
.mi-plisio-steps__step--done .mi-plisio-steps__num {
  background: var(--mi-color-primary);
  border-color: var(--mi-color-primary);
  color: white;
}
.mi-plisio-steps__step--active .mi-plisio-steps__num {
  background: white;
  border-color: var(--mi-color-primary);
  color: var(--mi-color-primary);
  box-shadow: 0 0 0 4px var(--mi-color-primary-soft);
}
.mi-plisio-steps__label {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mi-plisio-steps__step--done .mi-plisio-steps__label,
.mi-plisio-steps__step--active .mi-plisio-steps__label {
  color: var(--mi-text-primary);
}
@media (max-width: 720px) {
  .mi-plisio-steps { gap: var(--mi-sp-1); padding: var(--mi-sp-3); }
  .mi-plisio-steps__step:not(:last-child)::after { display: none; }
  .mi-plisio-steps__label { display: none; }
  .mi-plisio-steps__step--active .mi-plisio-steps__label {
    display: inline;
    color: var(--mi-color-primary);
  }
}

/* Two-column layout: iframe + sidebar ─────────────────────────────────── */
.mi-plisio-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-5);
  align-items: flex-start;
}
@media (min-width: 1000px) {
  .mi-plisio-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--mi-sp-6);
  }
}

/* Invoice frame card ──────────────────────────────────────────────────── */
.mi-plisio-invoice {
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
.mi-plisio-invoice__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--mi-sp-4);
  background: var(--mi-bg-soft);
  border-bottom: 1px solid var(--mi-border-light);
}
.mi-plisio-invoice__chrome-dots { display: flex; gap: 6px; }
.mi-plisio-invoice__chrome-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mi-border-defined);
}
.mi-plisio-invoice__chrome-dots span:first-child { background: #F87171; }
.mi-plisio-invoice__chrome-dots span:nth-child(2) { background: #FCD34D; }
.mi-plisio-invoice__chrome-dots span:nth-child(3) { background: #4ADE80; }
.mi-plisio-invoice__chrome-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-medium);
  color: var(--mi-text-tertiary);
}
.mi-plisio-invoice__chrome-label svg { color: var(--mi-color-primary); }

.mi-plisio-invoice__frame {
  position: relative;
  min-height: 720px;
  background: white;
}
.mi-plisio-invoice__iframe {
  display: block;
  width: 100%;
  min-height: 720px;
}
.mi-plisio-invoice__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mi-sp-4);
  background: white;
  color: var(--mi-text-tertiary);
  font-size: var(--mi-fs-sm);
  z-index: 2;
}
.mi-plisio-invoice__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--mi-border-light);
  border-top-color: var(--mi-color-primary);
  border-radius: 50%;
  animation: miPlisioSpin .8s linear infinite;
}
@keyframes miPlisioSpin {
  to { transform: rotate(360deg); }
}

/* Sidebar ─────────────────────────────────────────────────────────────── */
.mi-plisio-side {
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
}
@media (min-width: 1000px) {
  .mi-plisio-side {
    position: sticky;
    top: var(--mi-sp-4);
  }
}
.mi-plisio-card {
  background: white;
  border: 1px solid var(--mi-border-light);
  border-radius: var(--mi-radius-lg);
  padding: var(--mi-sp-5);
}
.mi-plisio-card__title {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-primary);
  margin: 0 0 var(--mi-sp-3);
  letter-spacing: -0.01em;
}
.mi-plisio-card p {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--mi-sp-3);
}

.mi-plisio-card--whatsapp {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), rgba(37, 211, 102, 0.02));
  border-color: rgba(37, 211, 102, 0.3);
}
.mi-plisio-card--whatsapp .mi-plisio-card__title { color: var(--mi-color-whatsapp-hover, #1da851); }
.mi-plisio-card__btn { width: 100%; gap: var(--mi-sp-2); }

.mi-plisio-card--trust {
  background: var(--mi-bg-soft);
  border: 0;
  padding: var(--mi-sp-4);
}

/* How-to list ─────────────────────────────────────────────────────────── */
.mi-plisio-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
}
.mi-plisio-howto li {
  display: flex;
  gap: var(--mi-sp-3);
  align-items: flex-start;
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-secondary);
  line-height: 1.45;
}
.mi-plisio-howto strong { color: var(--mi-text-primary); }
.mi-plisio-howto__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
  font-family: var(--mi-font-mono);
  font-weight: var(--mi-fw-bold);
  font-size: var(--mi-fs-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Trust list ──────────────────────────────────────────────────────────── */
.mi-plisio-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mi-sp-3);
}
.mi-plisio-trust li {
  display: flex;
  gap: var(--mi-sp-2);
  align-items: flex-start;
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-secondary);
  line-height: 1.45;
}
.mi-plisio-trust strong { color: var(--mi-text-primary); }
.mi-plisio-trust svg { color: var(--mi-color-primary); flex-shrink: 0; margin-top: 2px; }

/* Footnote ────────────────────────────────────────────────────────────── */
.mi-plisio-footnote {
  text-align: center;
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
  margin: var(--mi-sp-6) auto 0;
  max-width: 600px;
  line-height: 1.5;
}

/* "Already paid?" fallback ────────────────────────────────────────────── */
.mi-plisio-fallback {
  margin: var(--mi-sp-4) 0;
  padding: var(--mi-sp-3) var(--mi-sp-4);
  background: var(--mi-color-primary-soft);
  border: 1px solid var(--mi-color-primary-100);
  border-radius: var(--mi-radius-md);
  text-align: center;
  font-size: var(--mi-fs-sm);
  color: var(--mi-color-primary);
  animation: miPlisioFadeIn .3s ease;
}
.mi-plisio-fallback p { margin: 0; color: inherit; }
.mi-plisio-fallback a { font-weight: var(--mi-fw-semibold); color: var(--mi-color-primary); }
.mi-plisio-fallback a:hover { text-decoration: underline; }
@keyframes miPlisioFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── End of Phase 6.1 ───────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════
   The Miner Island — Phase 6.2 CSS additions
   APPEND THIS BLOCK to the END of:
     catalog/view/theme/minerisland/stylesheet/stylesheet.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Product-card cart-button count badge ───────────────────────────────
   A small round counter overlaid on the top-right of the orange Add-to-cart
   button. Hidden until the user clicks. Lives inside the button so it
   inherits hover/focus states.
   ────────────────────────────────────────────────────────────────────── */
.mi-product-card__cart {
  position: relative;
  overflow: visible; /* let the badge poke out */
}

.mi-product-card__cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: white;
  color: var(--mi-color-primary);
  border: 2px solid var(--mi-color-primary);
  font-family: var(--mi-font-mono);
  font-size: 11px;
  font-weight: var(--mi-fw-bold);
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  pointer-events: none; /* clicks pass through to the button */
  transition: transform .15s ease;
}

.mi-product-card__cart-count[hidden] {
  display: none;
}

@keyframes mi-card-count-pop {
  0%   { transform: scale(0.6); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.mi-product-card__cart-count--pop {
  animation: mi-card-count-pop .35s ease;
}

/* ── Featured grid override ─────────────────────────────────────────────
   The featured module on the homepage needs the same grid as the category
   page (4 columns desktop, auto-fill collapse on smaller screens). The
   default-theme markup is replaced by our override at
   catalog/view/theme/minerisland/template/extension/module/featured.twig.
   This rule just gives that wrapper a sensible max-width inside the section.
   ────────────────────────────────────────────────────────────────────── */
.mi-product-grid--featured {
  /* Inherits all .mi-product-grid base rules; no override needed unless we
     want a different breakpoint. Listed here for documentation + future
     tweaks. */
}

/* Belt-and-braces: if anything inside #mi-home-featured still emits the
   old default-theme markup (.product-thumb, .product-layout), hide it so
   buyers never see the broken Bootstrap card. We render via our override
   so this should never fire — but it's a cheap safety net. */
#mi-home-featured .product-layout > .product-thumb,
#mi-home-featured > h3 {
  display: none;
}

/* ── Cart-page: auto-update qty input pending state ────────────────────
   When the user clicks +/− or types into the qty input, we briefly mark
   it as "pending" while the debounce timer counts down. Subtle visual cue
   that something is about to happen — full page reload follows the AJAX.
   ────────────────────────────────────────────────────────────────────── */
.mi-qty__input--pending {
  background: var(--mi-color-primary-soft, #EEF2FF) !important;
  transition: background .2s ease;
}

/* Remove button — slightly more visible icon-text style now that it stands
   alone (was paired with Update before). */
.mi-cart-item__remove {
  display: inline-flex;
  align-items: center;
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 7 — Trust pages (Our Team, Factory Updates blog) + homepage trust pair
   ════════════════════════════════════════════════════════════════════════════

   Lifted from inline <style> blocks in:
     - information_description (Our Team page body)        → .mi-team-*
     - factory_updates_list.twig                            → .mi-blog-list, .mi-blog-grid, .mi-blog-card, .mi-blog-pagination, .mi-blog-empty
     - factory_updates_post.twig                            → .mi-blog-post, .mi-blog-post__*
     - home.twig (NEW Phase 7 section)                      → .mi-trustpair, .mi-trustpair__*

   The inline <style> blocks in the listing/post Twig templates stay in place
   as a redundancy net (so the pages remain styled even if the user uses
   "Refresh SASS Cache" and the global stylesheet is briefly stale). The
   styles here take precedence due to source order (this file loads before
   the inline blocks render). If any rule differs between the two, the
   inline block wins because it comes later in the cascade — that's
   intentional and gives us a "patch in template" override path for one-off
   fixes without bumping the global stylesheet version.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Our Team grid (lives inside info-page mi-prose wrapper) ──────── */
.mi-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mi-sp-6);
  margin: var(--mi-sp-8) 0;
}
@media (max-width: 960px) { .mi-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mi-sp-5); } }
@media (max-width: 560px) { .mi-team-grid { grid-template-columns: 1fr; gap: var(--mi-sp-5); } }

.mi-team-card {
  background: #FFFFFF;
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mi-team-card:hover {
  transform: translateY(-2px);
  border-color: var(--mi-border-defined);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

.mi-team-card__photo {
  aspect-ratio: 1 / 1;
  background: #F1F5F9;
  overflow: hidden;
  position: relative;
}
.mi-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle placeholder treatment when image fails to load */
.mi-team-card__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
  opacity: 0.4;
  z-index: 0;
}
.mi-team-card__photo img { position: relative; z-index: 1; }

.mi-team-card__body { padding: var(--mi-sp-5); }

.mi-team-card__name {
  font-size: var(--mi-fs-lg) !important;
  font-weight: var(--mi-fw-bold);
  margin: 0 0 var(--mi-sp-1) !important;
  color: var(--mi-text-headline);
  line-height: 1.3;
}

.mi-team-card__role {
  color: var(--mi-color-primary);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  margin-bottom: var(--mi-sp-3);
}

.mi-team-card__bio {
  font-size: var(--mi-fs-sm);
  line-height: var(--mi-lh-relaxed);
  color: var(--mi-text-body);
  margin: 0 0 var(--mi-sp-4) !important;
}

.mi-team-card__links {
  display: flex;
  gap: var(--mi-sp-2);
  align-items: center;
  padding-top: var(--mi-sp-3);
  border-top: 1px solid var(--mi-border-subtle);
}
.mi-team-card__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mi-bg-soft);
  color: var(--mi-text-muted);
  transition: all .15s ease;
  text-decoration: none !important;
}
.mi-team-card__links a:hover {
  background: var(--mi-color-primary);
  color: #FFFFFF;
}
.mi-team-card__links a svg { width: 15px; height: 15px; }

/* ─── 2. Homepage trust pair (Phase 7 Step 5.2 — full-width team + strip) ─
   Restructured from 2-column grid to:
     • Full-width team card with content/visual flex split
     • Compact horizontal "latest post" strip below
   This eliminates the uneven-height problem the 2-col grid had (factory
   card looked thin when team card had a lot of vertical content).
   Padding handled by parent .mi-section class. */

/* Vertical rhythm between team card and the factory strip below it */
.mi-trustpair > .mi-container > .mi-trustpair__card,
.mi-trustpair > .mi-container > .mi-trustpair__strip {
  margin-top: var(--mi-sp-6);
}
.mi-trustpair > .mi-container > .mi-section-head + .mi-trustpair__card {
  margin-top: 0;
}

/* ── 2a. Full-width team card ─────────────────────────────────────── */
.mi-trustpair__card {
  display: flex;
  padding: var(--mi-sp-8);
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  text-decoration: none !important;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mi-trustpair__card:hover {
  transform: translateY(-3px);
  border-color: var(--mi-color-primary);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

/* Wide layout: text on the left, faces on the right */
.mi-trustpair__card--wide {
  flex-direction: row;
  align-items: center;
  gap: var(--mi-sp-10);
}
@media (max-width: 768px) {
  .mi-trustpair__card--wide { flex-direction: column; align-items: flex-start; gap: var(--mi-sp-5); padding: var(--mi-sp-6); }
}

.mi-trustpair__card-content {
  flex: 1 1 auto;
  min-width: 0;
}
.mi-trustpair__card-visual {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .mi-trustpair__card-visual { justify-content: flex-start; }
}

.mi-trustpair__eyebrow {
  color: var(--mi-color-primary);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  margin-bottom: var(--mi-sp-3);
}

.mi-trustpair__title {
  font-size: var(--mi-fs-2xl);
  font-weight: var(--mi-fw-bold);
  line-height: 1.2;
  margin: 0 0 var(--mi-sp-3);
  color: var(--mi-text-headline);
}

.mi-trustpair__text {
  font-size: var(--mi-fs-md);
  line-height: var(--mi-lh-relaxed);
  color: var(--mi-text-body);
  margin: 0 0 var(--mi-sp-5);
  max-width: 60ch;
}

.mi-trustpair__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mi-color-primary);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
}
.mi-trustpair__card:hover .mi-trustpair__cta {
  color: var(--mi-color-primary-dark);
  gap: 10px;
  transition: gap .15s ease;
}

/* Overlapping faces row */
.mi-trustpair__faces {
  display: flex;
  align-items: center;
}
.mi-trustpair__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #E2E8F0;
  background-size: cover;
  background-position: center;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  margin-left: -14px;
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-muted);
}
.mi-trustpair__face:first-child { margin-left: 0; }
.mi-trustpair__face--more {
  background: var(--mi-color-primary);
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .mi-trustpair__face { width: 48px; height: 48px; margin-left: -12px; }
}

/* ── 2b. Compact "latest post" strip ───────────────────────────────── */
.mi-trustpair__strip {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-5);
  padding: var(--mi-sp-5) var(--mi-sp-6);
  background: #FFFFFF;
  border: 1px solid var(--mi-border-subtle);
  border-left: 4px solid var(--mi-color-primary);
  border-radius: var(--mi-radius-md);
  text-decoration: none !important;
  color: inherit;
  transition: all .15s ease;
}
.mi-trustpair__strip:hover {
  border-left-color: var(--mi-color-primary-dark);
  background: var(--mi-bg-soft);
  transform: translateX(2px);
}

.mi-trustpair__strip-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mi-color-primary-soft);
  color: var(--mi-color-primary);
}
.mi-trustpair__strip-icon svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .mi-trustpair__strip-icon { display: none; } }

.mi-trustpair__strip-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mi-text-muted);
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  white-space: nowrap;
}
.mi-trustpair__strip-label { color: var(--mi-color-primary); }
.mi-trustpair__strip-sep { color: var(--mi-border-defined); }
.mi-trustpair__strip-date { color: var(--mi-text-muted); }

.mi-trustpair__strip-title {
  flex: 1 1 auto;
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .mi-trustpair__strip { flex-wrap: wrap; padding: var(--mi-sp-4) var(--mi-sp-5); gap: var(--mi-sp-3); }
  .mi-trustpair__strip-title { flex-basis: 100%; white-space: normal; }
}

.mi-trustpair__strip-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mi-color-primary);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  white-space: nowrap;
}
.mi-trustpair__strip:hover .mi-trustpair__strip-cta {
  color: var(--mi-color-primary-dark);
  gap: 10px;
  transition: gap .15s ease;
}

/* ─── 3. Factory Updates blog — listing page ──────────────────────────── */
.mi-blog-list { padding: var(--mi-sp-10) 0 var(--mi-sp-16); }
.mi-blog-list__intro { max-width: 64ch; margin-bottom: var(--mi-sp-10); }
.mi-blog-list__intro h1 { font-size: var(--mi-fs-4xl); margin: 0 0 var(--mi-sp-3); line-height: 1.1; }
.mi-blog-list__intro p { color: var(--mi-text-body); font-size: var(--mi-fs-md); line-height: var(--mi-lh-relaxed); margin: 0; }
.mi-blog-list__meta { color: var(--mi-text-muted); font-size: var(--mi-fs-sm); margin-top: var(--mi-sp-4); }

.mi-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mi-sp-8);
}
@media (max-width: 960px) { .mi-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mi-sp-6); } }
@media (max-width: 640px) { .mi-blog-grid { grid-template-columns: 1fr; gap: var(--mi-sp-6); } }

.mi-blog-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-lg);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration: none !important;
  color: inherit;
}
.mi-blog-card:hover {
  transform: translateY(-2px);
  border-color: var(--mi-border-defined);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
.mi-blog-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #F1F5F9;
}
.mi-blog-card__body {
  padding: var(--mi-sp-5) var(--mi-sp-5) var(--mi-sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mi-blog-card__date {
  color: var(--mi-text-muted);
  font-size: var(--mi-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  font-weight: var(--mi-fw-semibold);
  margin-bottom: var(--mi-sp-2);
}
.mi-blog-card__title {
  font-size: var(--mi-fs-lg);
  font-weight: var(--mi-fw-bold);
  line-height: 1.3;
  margin: 0 0 var(--mi-sp-3);
  color: var(--mi-text-headline);
}
.mi-blog-card__excerpt {
  font-size: var(--mi-fs-sm);
  line-height: var(--mi-lh-relaxed);
  color: var(--mi-text-body);
  margin: 0 0 var(--mi-sp-4);
  flex: 1;
}
.mi-blog-card__cta {
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mi-blog-card:hover .mi-blog-card__cta { color: var(--mi-color-primary-dark); }

.mi-blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--mi-sp-3);
  margin-top: var(--mi-sp-12);
  padding-top: var(--mi-sp-6);
  border-top: 1px solid var(--mi-border-subtle);
}
.mi-blog-pagination__info { color: var(--mi-text-muted); font-size: var(--mi-fs-sm); }
.mi-blog-pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--mi-radius-md);
  border: 1px solid var(--mi-border-defined);
  background: #FFFFFF;
  color: var(--mi-text-headline);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  text-decoration: none !important;
}
.mi-blog-pagination__link:hover {
  border-color: var(--mi-color-primary);
  color: var(--mi-color-primary);
}
.mi-blog-pagination__link[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.mi-blog-empty {
  padding: var(--mi-sp-12) var(--mi-sp-6);
  text-align: center;
  background: var(--mi-bg-soft);
  border: 1px dashed var(--mi-border-defined);
  border-radius: var(--mi-radius-lg);
  color: var(--mi-text-muted);
}

/* ─── 4. Factory Updates blog — single post page ─────────────────────── */
.mi-blog-post { padding: var(--mi-sp-8) 0 var(--mi-sp-16); }

.mi-blog-post__hero {
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: var(--mi-radius-lg);
  background: #F1F5F9;
  object-fit: cover;
  display: block;
  margin: var(--mi-sp-6) 0 var(--mi-sp-8);
}
@media (max-width: 640px) {
  .mi-blog-post__hero { aspect-ratio: 16/9; margin: var(--mi-sp-4) 0 var(--mi-sp-6); }
}

.mi-blog-post__article { max-width: 760px; margin: 0 auto; }

.mi-blog-post__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mi-color-primary);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  margin-bottom: var(--mi-sp-3);
  text-decoration: none !important;
}
.mi-blog-post__eyebrow:hover { color: var(--mi-color-primary-dark); }

.mi-blog-post__title {
  font-size: var(--mi-fs-4xl);
  font-weight: var(--mi-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--mi-sp-5);
  color: var(--mi-text-headline);
}
@media (max-width: 640px) { .mi-blog-post__title { font-size: var(--mi-fs-2xl); } }

.mi-blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sp-3);
  align-items: center;
  padding-bottom: var(--mi-sp-6);
  border-bottom: 1px solid var(--mi-border-subtle);
  margin-bottom: var(--mi-sp-8);
  color: var(--mi-text-muted);
  font-size: var(--mi-fs-sm);
}
.mi-blog-post__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.mi-blog-post__meta-item svg { width: 14px; height: 14px; opacity: 0.7; }
.mi-blog-post__meta-sep { color: var(--mi-border-defined); }

.mi-blog-post__body {
  font-size: var(--mi-fs-md);
  line-height: var(--mi-lh-relaxed);
  color: var(--mi-text-body);
}
.mi-blog-post__body h2 { font-size: var(--mi-fs-2xl); margin: var(--mi-sp-10) 0 var(--mi-sp-4); color: var(--mi-text-headline); }
.mi-blog-post__body h3 { font-size: var(--mi-fs-xl);  margin: var(--mi-sp-8) 0 var(--mi-sp-3); color: var(--mi-text-headline); font-weight: var(--mi-fw-bold); }
.mi-blog-post__body h4 { font-size: var(--mi-fs-lg);  margin: var(--mi-sp-6) 0 var(--mi-sp-2); color: var(--mi-text-headline); font-weight: var(--mi-fw-semibold); }
.mi-blog-post__body p  { margin: 0 0 var(--mi-sp-5); }
.mi-blog-post__body ul, .mi-blog-post__body ol {
  margin: 0 0 var(--mi-sp-5);
  padding-left: 1.5em;
  list-style: revert;
}
.mi-blog-post__body li { margin-bottom: var(--mi-sp-2); }
.mi-blog-post__body strong { color: var(--mi-text-headline); font-weight: var(--mi-fw-semibold); }
.mi-blog-post__body a {
  color: var(--mi-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mi-blog-post__body a:hover { color: var(--mi-color-primary-dark); }
.mi-blog-post__body code {
  font-family: var(--mi-font-mono);
  background: var(--mi-bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.mi-blog-post__body em { font-style: italic; }
.mi-blog-post__body blockquote {
  border-left: 3px solid var(--mi-color-primary);
  padding: var(--mi-sp-2) 0 var(--mi-sp-2) var(--mi-sp-5);
  margin: var(--mi-sp-6) 0;
  color: var(--mi-text-headline);
  font-style: italic;
}

.mi-blog-post__video {
  margin: var(--mi-sp-8) 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--mi-radius-lg);
  overflow: hidden;
  background: #000;
}
.mi-blog-post__video iframe,
.mi-blog-post__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mi-blog-post__share {
  display: flex;
  align-items: center;
  gap: var(--mi-sp-3);
  flex-wrap: wrap;
  padding: var(--mi-sp-6) 0;
  border-top: 1px solid var(--mi-border-subtle);
  border-bottom: 1px solid var(--mi-border-subtle);
  margin: var(--mi-sp-10) 0 var(--mi-sp-8);
}
.mi-blog-post__share-label {
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
}
.mi-blog-post__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-subtle);
  color: var(--mi-text-headline);
  cursor: pointer;
  text-decoration: none !important;
  transition: all .15s ease;
}
.mi-blog-post__share-btn:hover {
  background: var(--mi-color-primary);
  color: #FFFFFF;
  border-color: var(--mi-color-primary);
}
.mi-blog-post__share-btn svg { width: 16px; height: 16px; }

.mi-blog-post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mi-sp-4);
  margin-top: var(--mi-sp-6);
}
@media (max-width: 640px) { .mi-blog-post__nav { grid-template-columns: 1fr; } }
.mi-blog-post__nav-card {
  display: block;
  padding: var(--mi-sp-5);
  border: 1px solid var(--mi-border-subtle);
  border-radius: var(--mi-radius-md);
  text-decoration: none !important;
  color: inherit;
  transition: all .15s ease;
}
.mi-blog-post__nav-card:hover {
  border-color: var(--mi-color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.mi-blog-post__nav-card--next { text-align: right; }
.mi-blog-post__nav-direction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mi-fs-xs);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-color-primary);
  text-transform: uppercase;
  letter-spacing: var(--mi-letter-wider);
  margin-bottom: var(--mi-sp-2);
}
.mi-blog-post__nav-title {
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-text-headline);
  line-height: 1.4;
}

.mi-blog-post__cta {
  margin-top: var(--mi-sp-12);
  padding: var(--mi-sp-8) var(--mi-sp-6);
  background: var(--mi-bg-soft);
  border-radius: var(--mi-radius-lg);
  text-align: center;
}
.mi-blog-post__cta-title {
  font-size: var(--mi-fs-xl);
  font-weight: var(--mi-fw-bold);
  margin: 0 0 var(--mi-sp-2);
  color: var(--mi-text-headline);
}
.mi-blog-post__cta-text {
  margin: 0 0 var(--mi-sp-5);
  color: var(--mi-text-body);
  font-size: var(--mi-fs-md);
}
.mi-blog-post__cta-actions {
  display: inline-flex;
  gap: var(--mi-sp-3);
  flex-wrap: wrap;
  justify-content: center;
}
.mi-blog-post__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--mi-radius-md);
  font-weight: var(--mi-fw-semibold);
  font-size: var(--mi-fs-sm);
  text-decoration: none !important;
  transition: all .15s ease;
}
.mi-blog-post__cta-btn--primary {
  background: var(--mi-color-primary);
  color: #FFFFFF;
}
.mi-blog-post__cta-btn--primary:hover { background: var(--mi-color-primary-dark); color: #FFFFFF; }
.mi-blog-post__cta-btn--wa {
  background: #25D366;
  color: #FFFFFF;
}
.mi-blog-post__cta-btn--wa:hover { background: #1FB855; color: #FFFFFF; }
.mi-blog-post__cta-btn svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════════════════
   END PHASE 7 SECTION
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 7.3 STEP 2 — Social link icons + WeChat QR lightbox (May 23, 2026)
   ────────────────────────────────────────────────────────────────────────────
   Strategy: 24x24 monoline SVG per platform, embedded as a data-URI on a
   CSS mask-image. The element's background-color provides the icon color,
   so we can theme via CSS (default ultramarine, hover orange) — and SVG
   never has to know about brand colors.
   
   Class structure:
     <a class="mi-social mi-social--telegram" href="…">
       <span class="mi-social-ico" aria-hidden="true"></span>
       <span class="mi-social-label">Telegram</span>   (sr-only by default)
     </a>
   
   Container variants:
     .mi-socials                 default container (footer column, body content)
     .mi-socials--compact        smaller icons (top utility bar, mobile drawer)
     .mi-socials--inline         flows inline with text (e.g. checkout footer)
   ════════════════════════════════════════════════════════════════════════════ */

/* Container ------------------------------------------------------------ */
.mi-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mi-socials--centered { justify-content: center; }
.mi-socials--end { justify-content: flex-end; }

/* Individual icon link ------------------------------------------------- */
.mi-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid var(--mi-border-defined, #E2E8F0);
  color: var(--mi-text-headline, #0F172A);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  cursor: pointer;
  position: relative;
}
.mi-social:hover,
.mi-social:focus-visible {
  background-color: var(--mi-brand-blue, #0437F2);
  border-color: var(--mi-brand-blue, #0437F2);
  color: #FFFFFF;
  transform: translateY(-1px);
  text-decoration: none;
}
.mi-social:focus-visible {
  outline: 2px solid var(--mi-brand-orange, #F7931A);
  outline-offset: 2px;
}

/* The icon itself (color is inherited from the .mi-social color via background-color) */
.mi-social-ico {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

/* Visually-hidden label for a11y ------------------------------------- */
.mi-social-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Compact variant — top utility bar, mobile drawer ------------------- */
.mi-socials--compact { gap: 6px; }
.mi-socials--compact .mi-social {
  width: 32px; height: 32px; border-radius: 6px;
}
.mi-socials--compact .mi-social-ico {
  width: 16px; height: 16px;
}

/* Larger variant — product page / order success / contact ------------ */
.mi-socials--large .mi-social {
  width: 44px; height: 44px;
}
.mi-socials--large .mi-social-ico {
  width: 20px; height: 20px;
}

/* On dark backgrounds (e.g. dark header utility bar) ----------------- */
.mi-socials--on-dark .mi-social {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.18);
}
.mi-socials--on-dark .mi-social:hover {
  background-color: #FFFFFF;
  color: var(--mi-brand-blue, #0437F2);
  border-color: #FFFFFF;
}

/* Section heading next to a socials group — small, muted, uppercase */
.mi-socials-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mi-text-muted, #64748B);
  margin: 0 0 10px;
}

/* Section wrappers per location ------------------------------------- */
.mi-social-section { margin: 20px 0; }
.mi-social-section--product { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--mi-border-light, #F1F5F9); }
.mi-social-section--success { margin: 24px auto; text-align: center; max-width: 540px; }
.mi-social-section--cart    { margin: 20px 0; padding: 16px; background: var(--mi-bg-subtle, #F8FAFC); border-radius: 12px; }
.mi-social-section--checkout { margin: 24px 0; padding: 16px 0; border-top: 1px solid var(--mi-border-light, #F1F5F9); border-bottom: 1px solid var(--mi-border-light, #F1F5F9); text-align: center; }

/* ─── WeChat QR Lightbox ──────────────────────────────────────────── */
.mi-qr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.mi-qr-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mi-qr-modal {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative;
}
.mi-qr-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--mi-text-muted, #64748B);
  border-radius: 8px;
}
.mi-qr-modal__close:hover {
  background: var(--mi-bg-subtle, #F8FAFC);
  color: var(--mi-text-headline, #0F172A);
}
.mi-qr-modal__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--mi-text-headline);
}
.mi-qr-modal__sub {
  font-size: 13px;
  color: var(--mi-text-muted);
  margin: 0 0 18px;
}
.mi-qr-modal__img {
  display: block;
  width: 240px;
  height: 240px;
  margin: 0 auto 16px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--mi-bg-subtle);
}
.mi-qr-modal__id {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-family: var(--mi-font-mono, monospace);
  font-size: 14px;
  padding: 10px 14px;
  background: var(--mi-bg-subtle);
  border-radius: 8px;
  margin: 12px 0 4px;
}
.mi-qr-modal__id-value { font-weight: 600; color: var(--mi-text-headline); }
.mi-qr-modal__copy {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--mi-brand-blue, #0437F2);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
}
.mi-qr-modal__copy:hover { opacity: 0.9; }
.mi-qr-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--mi-text-headline, #0F172A);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 10001;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.mi-qr-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── 15 platform mask-image rules ────────────────────────────────── */
.mi-social--telegram .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.97 3.66a1.5 1.5 0 0 0-2.13-1.4L2.41 9.7c-1.45.61-1.4 2.7.07 3.24l4.3 1.58 1.66 5.4c.31 1 1.55 1.32 2.32.59l2.43-2.31 4.45 3.34c.99.74 2.43.2 2.68-1.02l3.65-16.86Zm-3.96 2.96L9.7 14.13l-.42 4.27-1.49-4.84 10.22-6.94Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.97 3.66a1.5 1.5 0 0 0-2.13-1.4L2.41 9.7c-1.45.61-1.4 2.7.07 3.24l4.3 1.58 1.66 5.4c.31 1 1.55 1.32 2.32.59l2.43-2.31 4.45 3.34c.99.74 2.43.2 2.68-1.02l3.65-16.86Zm-3.96 2.96L9.7 14.13l-.42 4.27-1.49-4.84 10.22-6.94Z'/%3E%3C/svg%3E"); }
.mi-social--wechat .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.69 3C4.9 3 1.83 5.59 1.83 8.78c0 1.78.97 3.36 2.5 4.43l-.72 2.2 2.66-1.34c.83.23 1.7.36 2.42.36.24 0 .47 0 .7-.03a5.42 5.42 0 0 1-.2-1.45c0-3.06 2.9-5.55 6.46-5.55.15 0 .29 0 .43.02C15.4 4.65 12.32 3 8.69 3Zm-2.3 3.05c.6 0 1.07.45 1.07 1s-.47 1-1.06 1c-.6 0-1.07-.45-1.07-1s.48-1 1.06-1Zm4.62 0c.59 0 1.06.45 1.06 1s-.47 1-1.06 1c-.59 0-1.07-.45-1.07-1s.48-1 1.07-1Zm4.66 3.07c-3.05 0-5.53 2.07-5.53 4.62 0 2.55 2.48 4.61 5.53 4.61.6 0 1.18-.1 1.74-.27l2.07 1.13-.57-1.86c1.25-.94 2.01-2.18 2.01-3.61 0-2.55-2.47-4.62-5.25-4.62Zm-1.74 2.42c.4 0 .72.3.72.67 0 .37-.32.67-.72.67-.4 0-.72-.3-.72-.67 0-.37.33-.67.72-.67Zm3.86 0c.4 0 .72.3.72.67 0 .37-.32.67-.72.67-.4 0-.72-.3-.72-.67 0-.37.32-.67.72-.67Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.69 3C4.9 3 1.83 5.59 1.83 8.78c0 1.78.97 3.36 2.5 4.43l-.72 2.2 2.66-1.34c.83.23 1.7.36 2.42.36.24 0 .47 0 .7-.03a5.42 5.42 0 0 1-.2-1.45c0-3.06 2.9-5.55 6.46-5.55.15 0 .29 0 .43.02C15.4 4.65 12.32 3 8.69 3Zm-2.3 3.05c.6 0 1.07.45 1.07 1s-.47 1-1.06 1c-.6 0-1.07-.45-1.07-1s.48-1 1.06-1Zm4.62 0c.59 0 1.06.45 1.06 1s-.47 1-1.06 1c-.59 0-1.07-.45-1.07-1s.48-1 1.07-1Zm4.66 3.07c-3.05 0-5.53 2.07-5.53 4.62 0 2.55 2.48 4.61 5.53 4.61.6 0 1.18-.1 1.74-.27l2.07 1.13-.57-1.86c1.25-.94 2.01-2.18 2.01-3.61 0-2.55-2.47-4.62-5.25-4.62Zm-1.74 2.42c.4 0 .72.3.72.67 0 .37-.32.67-.72.67-.4 0-.72-.3-.72-.67 0-.37.33-.67.72-.67Zm3.86 0c.4 0 .72.3.72.67 0 .37-.32.67-.72.67-.4 0-.72-.3-.72-.67 0-.37.32-.67.72-.67Z'/%3E%3C/svg%3E"); }
.mi-social--whatsapp .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2.16c-5.46 0-9.9 4.43-9.9 9.88a9.86 9.86 0 0 0 1.32 4.94l-1.4 5.13 5.26-1.38a9.88 9.88 0 0 0 4.72 1.2h.01c5.46 0 9.9-4.43 9.9-9.88s-4.45-9.89-9.91-9.89Zm0 18.04a8.16 8.16 0 0 1-4.17-1.14l-.3-.18-3.1.81.83-3.04-.2-.31a8.13 8.13 0 0 1-1.26-4.34c0-4.51 3.69-8.18 8.21-8.18 2.19 0 4.25.85 5.81 2.4a8.13 8.13 0 0 1 2.4 5.79c0 4.51-3.7 8.19-8.22 8.19Zm4.51-6.13c-.25-.12-1.46-.72-1.68-.8-.23-.08-.39-.13-.55.13s-.63.8-.78.96c-.14.17-.29.18-.54.06-.25-.12-1.04-.38-1.98-1.22a7.45 7.45 0 0 1-1.37-1.7c-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.42-.55-.42l-.47-.01c-.16 0-.43.06-.65.3-.22.25-.85.83-.85 2.03 0 1.2.87 2.35.99 2.51.12.17 1.72 2.63 4.18 3.69.58.25 1.04.4 1.4.51.59.18 1.12.16 1.55.1.47-.07 1.46-.6 1.67-1.18.2-.58.2-1.07.14-1.18-.06-.1-.22-.16-.47-.28Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2.16c-5.46 0-9.9 4.43-9.9 9.88a9.86 9.86 0 0 0 1.32 4.94l-1.4 5.13 5.26-1.38a9.88 9.88 0 0 0 4.72 1.2h.01c5.46 0 9.9-4.43 9.9-9.88s-4.45-9.89-9.91-9.89Zm0 18.04a8.16 8.16 0 0 1-4.17-1.14l-.3-.18-3.1.81.83-3.04-.2-.31a8.13 8.13 0 0 1-1.26-4.34c0-4.51 3.69-8.18 8.21-8.18 2.19 0 4.25.85 5.81 2.4a8.13 8.13 0 0 1 2.4 5.79c0 4.51-3.7 8.19-8.22 8.19Zm4.51-6.13c-.25-.12-1.46-.72-1.68-.8-.23-.08-.39-.13-.55.13s-.63.8-.78.96c-.14.17-.29.18-.54.06-.25-.12-1.04-.38-1.98-1.22a7.45 7.45 0 0 1-1.37-1.7c-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.42-.55-.42l-.47-.01c-.16 0-.43.06-.65.3-.22.25-.85.83-.85 2.03 0 1.2.87 2.35.99 2.51.12.17 1.72 2.63 4.18 3.69.58.25 1.04.4 1.4.51.59.18 1.12.16 1.55.1.47-.07 1.46-.6 1.67-1.18.2-.58.2-1.07.14-1.18-.06-.1-.22-.16-.47-.28Z'/%3E%3C/svg%3E"); }
.mi-social--twitter .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
.mi-social--reddit .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.07a2.13 2.13 0 0 0-2.14-2.12c-.58 0-1.1.23-1.5.6a10.4 10.4 0 0 0-5.62-1.78l.96-4.5 3.13.66a1.52 1.52 0 1 0 .15-.92l-3.5-.74a.46.46 0 0 0-.55.36L11.86 8.7a10.42 10.42 0 0 0-5.7 1.78c-.39-.37-.91-.6-1.49-.6A2.13 2.13 0 0 0 2.53 12.07c0 .79.43 1.47 1.07 1.83a3.85 3.85 0 0 0-.05.62c0 3.16 3.7 5.72 8.27 5.72s8.26-2.56 8.26-5.72c0-.21-.02-.42-.04-.62.6-.36 1.03-1.04 1.03-1.83Zm-14.27.97a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm8.34 4a4.94 4.94 0 0 1-3.21.92h-.07c-1.27 0-2.41-.34-3.21-.92a.4.4 0 0 1 .47-.65 4.5 4.5 0 0 0 2.74.77h.07a4.5 4.5 0 0 0 2.74-.77.4.4 0 0 1 .47.65Zm-.31-2.5a1.5 1.5 0 1 1 0-3.01 1.5 1.5 0 0 1 0 3.01Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.07a2.13 2.13 0 0 0-2.14-2.12c-.58 0-1.1.23-1.5.6a10.4 10.4 0 0 0-5.62-1.78l.96-4.5 3.13.66a1.52 1.52 0 1 0 .15-.92l-3.5-.74a.46.46 0 0 0-.55.36L11.86 8.7a10.42 10.42 0 0 0-5.7 1.78c-.39-.37-.91-.6-1.49-.6A2.13 2.13 0 0 0 2.53 12.07c0 .79.43 1.47 1.07 1.83a3.85 3.85 0 0 0-.05.62c0 3.16 3.7 5.72 8.27 5.72s8.26-2.56 8.26-5.72c0-.21-.02-.42-.04-.62.6-.36 1.03-1.04 1.03-1.83Zm-14.27.97a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm8.34 4a4.94 4.94 0 0 1-3.21.92h-.07c-1.27 0-2.41-.34-3.21-.92a.4.4 0 0 1 .47-.65 4.5 4.5 0 0 0 2.74.77h.07a4.5 4.5 0 0 0 2.74-.77.4.4 0 0 1 .47.65Zm-.31-2.5a1.5 1.5 0 1 1 0-3.01 1.5 1.5 0 0 1 0 3.01Z'/%3E%3C/svg%3E"); }
.mi-social--discord .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.32 4.94A19.79 19.79 0 0 0 15.43 3.4a.07.07 0 0 0-.08.04c-.21.38-.45.87-.61 1.26a18.27 18.27 0 0 0-5.49 0 12.6 12.6 0 0 0-.62-1.26.07.07 0 0 0-.08-.04 19.74 19.74 0 0 0-4.88 1.55.07.07 0 0 0-.03.03A20.12 20.12 0 0 0 .55 18.55c0 .02.01.04.03.06a19.9 19.9 0 0 0 5.99 3.03c.03 0 .06-.01.08-.03.46-.63.87-1.3 1.23-2 .02-.04 0-.09-.04-.1a13.1 13.1 0 0 1-1.87-.9c-.04-.02-.04-.08 0-.1.13-.1.25-.2.37-.3a.07.07 0 0 1 .07 0 14.18 14.18 0 0 0 12.05 0 .07.07 0 0 1 .07 0c.12.1.24.2.36.3.04.03.04.09 0 .1a12.27 12.27 0 0 1-1.87.9.07.07 0 0 0-.04.1c.36.7.78 1.37 1.23 2 .02.02.05.03.08.03a19.86 19.86 0 0 0 6-3.03.07.07 0 0 0 .03-.06 19.99 19.99 0 0 0-3.16-13.58.05.05 0 0 0-.03-.03ZM8.02 16.49c-1.18 0-2.16-1.08-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.22 0 2.18 1.1 2.16 2.42 0 1.34-.95 2.42-2.16 2.42Zm7.97 0c-1.18 0-2.16-1.08-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.22 0 2.18 1.1 2.16 2.42 0 1.34-.94 2.42-2.16 2.42Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.32 4.94A19.79 19.79 0 0 0 15.43 3.4a.07.07 0 0 0-.08.04c-.21.38-.45.87-.61 1.26a18.27 18.27 0 0 0-5.49 0 12.6 12.6 0 0 0-.62-1.26.07.07 0 0 0-.08-.04 19.74 19.74 0 0 0-4.88 1.55.07.07 0 0 0-.03.03A20.12 20.12 0 0 0 .55 18.55c0 .02.01.04.03.06a19.9 19.9 0 0 0 5.99 3.03c.03 0 .06-.01.08-.03.46-.63.87-1.3 1.23-2 .02-.04 0-.09-.04-.1a13.1 13.1 0 0 1-1.87-.9c-.04-.02-.04-.08 0-.1.13-.1.25-.2.37-.3a.07.07 0 0 1 .07 0 14.18 14.18 0 0 0 12.05 0 .07.07 0 0 1 .07 0c.12.1.24.2.36.3.04.03.04.09 0 .1a12.27 12.27 0 0 1-1.87.9.07.07 0 0 0-.04.1c.36.7.78 1.37 1.23 2 .02.02.05.03.08.03a19.86 19.86 0 0 0 6-3.03.07.07 0 0 0 .03-.06 19.99 19.99 0 0 0-3.16-13.58.05.05 0 0 0-.03-.03ZM8.02 16.49c-1.18 0-2.16-1.08-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.22 0 2.18 1.1 2.16 2.42 0 1.34-.95 2.42-2.16 2.42Zm7.97 0c-1.18 0-2.16-1.08-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.22 0 2.18 1.1 2.16 2.42 0 1.34-.94 2.42-2.16 2.42Z'/%3E%3C/svg%3E"); }
.mi-social--youtube .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.12-2.12C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.53A3 3 0 0 0 .5 6.2 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.8 3 3 0 0 0 2.12 2.12c1.88.53 9.38.53 9.38.53s7.5 0 9.38-.53a3 3 0 0 0 2.12-2.12c.33-1.9.5-3.83.5-5.8a31.3 31.3 0 0 0-.5-5.8ZM9.6 15.6V8.4l6.24 3.6L9.6 15.6Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.12-2.12C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.53A3 3 0 0 0 .5 6.2 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.8 3 3 0 0 0 2.12 2.12c1.88.53 9.38.53 9.38.53s7.5 0 9.38-.53a3 3 0 0 0 2.12-2.12c.33-1.9.5-3.83.5-5.8a31.3 31.3 0 0 0-.5-5.8ZM9.6 15.6V8.4l6.24 3.6L9.6 15.6Z'/%3E%3C/svg%3E"); }
.mi-social--linkedin .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05a3.73 3.73 0 0 1 3.36-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.55V9h3.57v11.45ZM22.22 0H1.77C.79 0 0 .78 0 1.74v20.52C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.74V1.74C24 .78 23.2 0 22.22 0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05a3.73 3.73 0 0 1 3.36-1.85c3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.55V9h3.57v11.45ZM22.22 0H1.77C.79 0 0 .78 0 1.74v20.52C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.74V1.74C24 .78 23.2 0 22.22 0Z'/%3E%3C/svg%3E"); }
.mi-social--facebook .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07A12 12 0 1 0 10.13 24v-8.43H7.08v-3.5h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.94-1.96 1.9v2.27h3.32l-.53 3.5h-2.79V24A12 12 0 0 0 24 12.07Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07A12 12 0 1 0 10.13 24v-8.43H7.08v-3.5h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.94-1.96 1.9v2.27h3.32l-.53 3.5h-2.79V24A12 12 0 0 0 24 12.07Z'/%3E%3C/svg%3E"); }
.mi-social--instagram .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58 0 4.85.07 1.17.05 1.8.25 2.23.42a3.72 3.72 0 0 1 1.38.9c.42.42.68.81.9 1.38.16.42.36 1.05.42 2.23.06 1.27.07 1.65.07 4.85 0 3.2 0 3.58-.07 4.85a6.55 6.55 0 0 1-.42 2.23 3.72 3.72 0 0 1-.9 1.38c-.42.42-.81.68-1.38.9-.43.16-1.06.36-2.23.42-1.27.06-1.65.07-4.85.07-3.2 0-3.58 0-4.85-.07a6.55 6.55 0 0 1-2.23-.42 3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38 6.55 6.55 0 0 1-.42-2.23C2.17 15.58 2.16 15.2 2.16 12c0-3.2 0-3.58.07-4.85.05-1.17.25-1.8.42-2.23.21-.57.47-.96.9-1.38.41-.42.81-.68 1.38-.9.42-.16 1.05-.36 2.23-.42C8.42 2.17 8.8 2.16 12 2.16ZM12 0C8.74 0 8.33 0 7.05.07c-1.28.05-2.15.25-2.91.55a5.88 5.88 0 0 0-2.13 1.39A5.88 5.88 0 0 0 .62 4.14C.33 4.9.12 5.77.07 7.05.01 8.33 0 8.74 0 12c0 3.26 0 3.67.07 4.95.05 1.28.25 2.15.55 2.91.31.8.74 1.48 1.39 2.13a5.88 5.88 0 0 0 2.13 1.39c.76.3 1.63.5 2.91.55 1.28.06 1.69.07 4.95.07 3.26 0 3.67 0 4.95-.07 1.28-.05 2.15-.25 2.91-.55.8-.31 1.48-.74 2.13-1.39a5.88 5.88 0 0 0 1.39-2.13c.3-.76.5-1.63.55-2.91.06-1.28.07-1.69.07-4.95 0-3.26 0-3.67-.07-4.95-.05-1.28-.25-2.15-.55-2.91a5.88 5.88 0 0 0-1.39-2.13A5.88 5.88 0 0 0 19.86.62C19.1.33 18.23.12 16.95.07 15.67.01 15.26 0 12 0Zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58 0 4.85.07 1.17.05 1.8.25 2.23.42a3.72 3.72 0 0 1 1.38.9c.42.42.68.81.9 1.38.16.42.36 1.05.42 2.23.06 1.27.07 1.65.07 4.85 0 3.2 0 3.58-.07 4.85a6.55 6.55 0 0 1-.42 2.23 3.72 3.72 0 0 1-.9 1.38c-.42.42-.81.68-1.38.9-.43.16-1.06.36-2.23.42-1.27.06-1.65.07-4.85.07-3.2 0-3.58 0-4.85-.07a6.55 6.55 0 0 1-2.23-.42 3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38 6.55 6.55 0 0 1-.42-2.23C2.17 15.58 2.16 15.2 2.16 12c0-3.2 0-3.58.07-4.85.05-1.17.25-1.8.42-2.23.21-.57.47-.96.9-1.38.41-.42.81-.68 1.38-.9.42-.16 1.05-.36 2.23-.42C8.42 2.17 8.8 2.16 12 2.16ZM12 0C8.74 0 8.33 0 7.05.07c-1.28.05-2.15.25-2.91.55a5.88 5.88 0 0 0-2.13 1.39A5.88 5.88 0 0 0 .62 4.14C.33 4.9.12 5.77.07 7.05.01 8.33 0 8.74 0 12c0 3.26 0 3.67.07 4.95.05 1.28.25 2.15.55 2.91.31.8.74 1.48 1.39 2.13a5.88 5.88 0 0 0 2.13 1.39c.76.3 1.63.5 2.91.55 1.28.06 1.69.07 4.95.07 3.26 0 3.67 0 4.95-.07 1.28-.05 2.15-.25 2.91-.55.8-.31 1.48-.74 2.13-1.39a5.88 5.88 0 0 0 1.39-2.13c.3-.76.5-1.63.55-2.91.06-1.28.07-1.69.07-4.95 0-3.26 0-3.67-.07-4.95-.05-1.28-.25-2.15-.55-2.91a5.88 5.88 0 0 0-1.39-2.13A5.88 5.88 0 0 0 19.86.62C19.1.33 18.23.12 16.95.07 15.67.01 15.26 0 12 0Zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88Z'/%3E%3C/svg%3E"); }
.mi-social--tiktok .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64c.3 0 .57.05.84.13V9.4a6.33 6.33 0 0 0-1-.05A6.34 6.34 0 0 0 5.1 20.74a6.34 6.34 0 0 0 10.86-4.43V9.3a8.18 8.18 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.14-.73Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64c.3 0 .57.05.84.13V9.4a6.33 6.33 0 0 0-1-.05A6.34 6.34 0 0 0 5.1 20.74a6.34 6.34 0 0 0 10.86-4.43V9.3a8.18 8.18 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.14-.73Z'/%3E%3C/svg%3E"); }
.mi-social--vk .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.79 17.66h1.34s.41-.05.62-.27c.19-.21.18-.6.18-.6s-.03-1.85.83-2.12c.84-.27 1.93 1.78 3.08 2.57.87.59 1.53.46 1.53.46l3.07-.04s1.6-.1.84-1.37c-.06-.1-.45-.93-2.3-2.66-1.93-1.8-1.68-1.5.65-4.61 1.42-1.9 1.99-3.04 1.81-3.55-.17-.48-1.24-.36-1.24-.36l-3.55.02s-.27-.04-.46.08c-.2.12-.32.4-.32.4s-.55 1.46-1.27 2.7c-1.53 2.61-2.14 2.75-2.39 2.59-.58-.37-.43-1.5-.43-2.31 0-2.54.39-3.6-.75-3.87-.38-.1-.66-.16-1.62-.17-1.24-.01-2.29.01-2.88.3-.4.2-.7.62-.52.65.23.03.74.14 1.01.5.35.48.34 1.55.34 1.55s.2 2.91-.46 3.27c-.46.25-1.08-.26-2.44-2.64-.7-1.21-1.22-2.55-1.22-2.55s-.1-.25-.3-.39c-.23-.16-.55-.21-.55-.21l-3.37.02s-.5.02-.7.24c-.16.2-.01.6-.01.6s2.64 6.18 5.63 9.3c2.75 2.85 5.86 2.67 5.86 2.67Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.79 17.66h1.34s.41-.05.62-.27c.19-.21.18-.6.18-.6s-.03-1.85.83-2.12c.84-.27 1.93 1.78 3.08 2.57.87.59 1.53.46 1.53.46l3.07-.04s1.6-.1.84-1.37c-.06-.1-.45-.93-2.3-2.66-1.93-1.8-1.68-1.5.65-4.61 1.42-1.9 1.99-3.04 1.81-3.55-.17-.48-1.24-.36-1.24-.36l-3.55.02s-.27-.04-.46.08c-.2.12-.32.4-.32.4s-.55 1.46-1.27 2.7c-1.53 2.61-2.14 2.75-2.39 2.59-.58-.37-.43-1.5-.43-2.31 0-2.54.39-3.6-.75-3.87-.38-.1-.66-.16-1.62-.17-1.24-.01-2.29.01-2.88.3-.4.2-.7.62-.52.65.23.03.74.14 1.01.5.35.48.34 1.55.34 1.55s.2 2.91-.46 3.27c-.46.25-1.08-.26-2.44-2.64-.7-1.21-1.22-2.55-1.22-2.55s-.1-.25-.3-.39c-.23-.16-.55-.21-.55-.21l-3.37.02s-.5.02-.7.24c-.16.2-.01.6-.01.6s2.64 6.18 5.63 9.3c2.75 2.85 5.86 2.67 5.86 2.67Z'/%3E%3C/svg%3E"); }
.mi-social--odnoklassniki .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0Zm0 4.96a3.5 3.5 0 0 1 3.5 3.5A3.5 3.5 0 0 1 12 11.96a3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5Zm0 2.05a1.45 1.45 0 0 0 0 2.9 1.45 1.45 0 0 0 0-2.9Zm-5.36 6.86c-.36.61-.16 1.46.44 1.83 1.06.65 2.39 1.1 3.83 1.27l-3.6 3.61a1.34 1.34 0 0 0 0 1.9 1.34 1.34 0 0 0 1.9 0L12 18.85l2.8 2.8a1.34 1.34 0 0 0 1.9 0c.53-.53.53-1.37 0-1.9l-3.6-3.61c1.44-.17 2.78-.62 3.83-1.27.6-.37.8-1.22.44-1.83-.43-.71-1.32-.84-2-.4a6.83 6.83 0 0 1-7.36 0c-.67-.44-1.56-.31-2-.4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0Zm0 4.96a3.5 3.5 0 0 1 3.5 3.5A3.5 3.5 0 0 1 12 11.96a3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5Zm0 2.05a1.45 1.45 0 0 0 0 2.9 1.45 1.45 0 0 0 0-2.9Zm-5.36 6.86c-.36.61-.16 1.46.44 1.83 1.06.65 2.39 1.1 3.83 1.27l-3.6 3.61a1.34 1.34 0 0 0 0 1.9 1.34 1.34 0 0 0 1.9 0L12 18.85l2.8 2.8a1.34 1.34 0 0 0 1.9 0c.53-.53.53-1.37 0-1.9l-3.6-3.61c1.44-.17 2.78-.62 3.83-1.27.6-.37.8-1.22.44-1.83-.43-.71-1.32-.84-2-.4a6.83 6.83 0 0 1-7.36 0c-.67-.44-1.56-.31-2-.4Z'/%3E%3C/svg%3E"); }
.mi-social--viber .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 0C9.5 0 5.7 0 3.3 2.2 1.4 4 .8 6.7.7 10c0 3.3 0 7-.1 10.7-.1 1.5 1.7 2.4 3 1.4l3.3-2.8c2.6-.2 5.8-.3 8.8-.5 1.7-.1 3.3-.7 4.4-1.8 1.8-1.8 2.6-4.4 2.6-7.4 0-3-.6-5.6-2.4-7.4C18.4.1 14.7 0 12.8 0h-1.4Zm.6 4.8c2.7 0 4.5.2 5.6 1.4 1 1.1 1.4 2.8 1.4 5.1 0 2.3-.4 4-1.4 5.1-1 1-2.5 1.4-5.1 1.5l-3.6.3-2.2 1.8.1-1.3-.3-.4c-.6-.4-1.5-1-1.5-3 0-3.4.3-5.4 1.3-6.5 1.1-1.2 2.9-1.4 5.7-1.4l.1-2.6Zm.5 1.4v.9c1.3 0 2.4.5 3.3 1.3.8.9 1.3 2 1.3 3.3h.9c0-1.5-.5-3-1.6-4-1-1-2.5-1.5-3.9-1.5Zm-3.2 1.3c-.1 0-.5.1-.7.3-.3.3-.5.6-.6.8-.4.8 0 1.8.1 2C8.5 11 9.4 12.5 11 14c1.6 1.5 3 2.5 4.4 2.9.7.2 1.5 0 2-.6.4-.5.7-1.1.7-1.5 0-.3-.2-.5-.6-.6l-1.4-.7c-.4-.2-.7-.1-1 .3l-.6.7-.1.1c-.6-.3-1.2-.6-1.7-1.1-.5-.5-.9-1.1-1.1-1.7l.1-.1.7-.6c.3-.2.4-.6.3-1l-.7-1.4c-.1-.4-.4-.6-.6-.6-.3 0-.6-.1-.7-.2v.1Zm3.5.5v.9c1.4 0 2.5 1 2.5 2.5h.9c0-2-1.5-3.4-3.4-3.4Zm.4 1.8v.9c.6 0 1 .4 1 1.1h.9c0-1.1-.9-2-2-2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.4 0C9.5 0 5.7 0 3.3 2.2 1.4 4 .8 6.7.7 10c0 3.3 0 7-.1 10.7-.1 1.5 1.7 2.4 3 1.4l3.3-2.8c2.6-.2 5.8-.3 8.8-.5 1.7-.1 3.3-.7 4.4-1.8 1.8-1.8 2.6-4.4 2.6-7.4 0-3-.6-5.6-2.4-7.4C18.4.1 14.7 0 12.8 0h-1.4Zm.6 4.8c2.7 0 4.5.2 5.6 1.4 1 1.1 1.4 2.8 1.4 5.1 0 2.3-.4 4-1.4 5.1-1 1-2.5 1.4-5.1 1.5l-3.6.3-2.2 1.8.1-1.3-.3-.4c-.6-.4-1.5-1-1.5-3 0-3.4.3-5.4 1.3-6.5 1.1-1.2 2.9-1.4 5.7-1.4l.1-2.6Zm.5 1.4v.9c1.3 0 2.4.5 3.3 1.3.8.9 1.3 2 1.3 3.3h.9c0-1.5-.5-3-1.6-4-1-1-2.5-1.5-3.9-1.5Zm-3.2 1.3c-.1 0-.5.1-.7.3-.3.3-.5.6-.6.8-.4.8 0 1.8.1 2C8.5 11 9.4 12.5 11 14c1.6 1.5 3 2.5 4.4 2.9.7.2 1.5 0 2-.6.4-.5.7-1.1.7-1.5 0-.3-.2-.5-.6-.6l-1.4-.7c-.4-.2-.7-.1-1 .3l-.6.7-.1.1c-.6-.3-1.2-.6-1.7-1.1-.5-.5-.9-1.1-1.1-1.7l.1-.1.7-.6c.3-.2.4-.6.3-1l-.7-1.4c-.1-.4-.4-.6-.6-.6-.3 0-.6-.1-.7-.2v.1Zm3.5.5v.9c1.4 0 2.5 1 2.5 2.5h.9c0-2-1.5-3.4-3.4-3.4Zm.4 1.8v.9c.6 0 1 .4 1 1.1h.9c0-1.1-.9-2-2-2Z'/%3E%3C/svg%3E"); }
.mi-social--line .mi-social-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.37 9.32c0 4.05-4.45 7.34-9.92 7.34-.69 0-1.37-.05-2.03-.16-.18-.03-.36-.05-.54-.04-.18 0-.34.04-.48.1-1.04.43-2.55.83-3.04.95-.51.12-.69.04-.55-.4.07-.21.7-1.97.83-2.55.04-.18.03-.34-.04-.46a6.94 6.94 0 0 1-3.13-5.78c0-4.05 4.45-7.34 9.92-7.34s9.92 3.3 9.92 7.34Zm-12.39-2c-.21 0-.39.17-.39.39v4.34c0 .21.17.39.39.39h2.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-1.7v-3.33a.39.39 0 0 0-.39-.39h-.6Zm4.18 0a.39.39 0 0 0-.39.39v4.34c0 .21.17.39.39.39h.6c.21 0 .39-.17.39-.39V7.71a.39.39 0 0 0-.39-.39h-.6Zm2.6 0a.39.39 0 0 0-.39.39v4.34c0 .21.17.39.39.39h.6c.21 0 .39-.17.39-.39V9.4l2.05 2.91c.07.1.18.15.31.15h.6c.21 0 .39-.17.39-.39V7.71a.39.39 0 0 0-.39-.39h-.6a.39.39 0 0 0-.39.39v2.66l-2.04-2.91a.39.39 0 0 0-.32-.15h-.6Zm4.69 0a.39.39 0 0 0-.39.39v4.34c0 .21.17.39.39.39h2.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-1.7v-.68h1.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-1.7v-.67h1.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-2.7Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.37 9.32c0 4.05-4.45 7.34-9.92 7.34-.69 0-1.37-.05-2.03-.16-.18-.03-.36-.05-.54-.04-.18 0-.34.04-.48.1-1.04.43-2.55.83-3.04.95-.51.12-.69.04-.55-.4.07-.21.7-1.97.83-2.55.04-.18.03-.34-.04-.46a6.94 6.94 0 0 1-3.13-5.78c0-4.05 4.45-7.34 9.92-7.34s9.92 3.3 9.92 7.34Zm-12.39-2c-.21 0-.39.17-.39.39v4.34c0 .21.17.39.39.39h2.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-1.7v-3.33a.39.39 0 0 0-.39-.39h-.6Zm4.18 0a.39.39 0 0 0-.39.39v4.34c0 .21.17.39.39.39h.6c.21 0 .39-.17.39-.39V7.71a.39.39 0 0 0-.39-.39h-.6Zm2.6 0a.39.39 0 0 0-.39.39v4.34c0 .21.17.39.39.39h.6c.21 0 .39-.17.39-.39V9.4l2.05 2.91c.07.1.18.15.31.15h.6c.21 0 .39-.17.39-.39V7.71a.39.39 0 0 0-.39-.39h-.6a.39.39 0 0 0-.39.39v2.66l-2.04-2.91a.39.39 0 0 0-.32-.15h-.6Zm4.69 0a.39.39 0 0 0-.39.39v4.34c0 .21.17.39.39.39h2.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-1.7v-.68h1.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-1.7v-.67h1.7c.21 0 .39-.17.39-.39v-.62a.39.39 0 0 0-.39-.39h-2.7Z'/%3E%3C/svg%3E"); }

/* ════════════════════════════════════════════════════════════════════════════
   END PHASE 7.3 STEP 2 SECTION
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 7.2 — Logo bump + sticky megamenu + bigger header (rev 3, May 23 2026)
   ────────────────────────────────────────────────────────────────────────────
   ※ Restored after Phase 7.3 Step 2 inadvertently overwrote this block.
   Re-declares :root header-height tokens via cascade override (last value wins).
   Original tokens at top of file (64px / 88px) remain in place; this block
   supersedes them. Sticky nav reads var(--mi-header-h-desktop) so the
   pin point automatically follows the new header height.
   ════════════════════════════════════════════════════════════════════════════ */

/* Bump header height tokens via :root re-declaration (cascade override) */
:root {
  --mi-header-h:         72px;   /* mobile (was 64px) */
  --mi-header-h-desktop: 104px;  /* desktop (was 88px) */
}

/* Logo display height */
.mi-logo img { max-height: 96px !important; }
@media (max-width: 767.98px) {
  .mi-logo img { max-height: 64px !important; }
}

/* Sticky megamenu — pinned directly under the sticky header on desktop */
@media (min-width: 1024px) {
  .mi-nav {
    position: sticky;
    top: var(--mi-header-h-desktop);   /* 104px */
    z-index: calc(var(--mi-z-header) - 1);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   END PHASE 7.2 SECTION
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 8b — Product page trust section
   (Verified business + Authorized reseller + Compatible pools + Payments)
   Added May 29, 2026
   ════════════════════════════════════════════════════════════════════════════ */

.mi-trust-section {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1rem 0.75rem;
  background: #FAFAFB;
  border: 1px solid #ECECEF;
  border-radius: 12px;
}

.mi-trust-block {
  margin-bottom: 1.25rem;
}
.mi-trust-block:last-child {
  margin-bottom: 0;
}

.mi-trust-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1F;
  letter-spacing: 0.1px;
}
.mi-trust-heading__ico {
  color: #0437F2;
  flex-shrink: 0;
}

.mi-trust-grid {
  display: grid;
  gap: 8px;
}
.mi-trust-grid--verify  { grid-template-columns: repeat(3, 1fr); }
.mi-trust-grid--brands  { grid-template-columns: repeat(6, 1fr); }
.mi-trust-grid--pools   { grid-template-columns: repeat(8, 1fr); }

/* When Trustpilot slot is enabled, verify grid becomes 4 columns. */
.mi-trust-grid--verify:has(> .mi-trust-card:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}

/* --- Verification cards (DUNS, BBB, Cryptwerk, [Trustpilot]) --- */
.mi-trust-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: #FFFFFF;
  border: 1px solid #ECECEF;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  min-height: 96px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mi-trust-card:hover {
  border-color: #0437F2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(4, 55, 242, 0.08);
}
.mi-trust-card img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mi-trust-card__meta {
  font-size: 10px;
  font-weight: 500;
  color: #5F5F66;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

/* --- Manufacturer tiles --- */
.mi-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  background: #FFFFFF;
  border: 1px solid #ECECEF;
  border-radius: 8px;
  min-height: 56px;
  transition: border-color .15s ease, transform .15s ease;
}
.mi-brand-tile:hover {
  border-color: #D9D9DD;
  transform: translateY(-1px);
}
.mi-brand-tile img {
  max-height: 32px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Pool tiles --- */
.mi-pool-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  background: #FFFFFF;
  border: 1px solid #ECECEF;
  border-radius: 6px;
  min-height: 44px;
  transition: border-color .15s ease, transform .15s ease;
}
.mi-pool-tile:hover {
  border-color: #D9D9DD;
  transform: translateY(-1px);
}
.mi-pool-tile img {
  max-height: 24px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Payment pills --- */
.mi-pay-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mi-pay-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  line-height: 1.2;
  background: #FFFFFF;
  color: #1A1A1F;
  border: 1px solid #ECECEF;
}
.mi-pay-pill--btc   { background: #FEF1DC; color: #854F0B; border-color: transparent; }
.mi-pay-pill--usdt  { background: #E1F5EE; color: #0F6E56; border-color: transparent; }
.mi-pay-pill--usdc  { background: #E6F1FB; color: #0C447C; border-color: transparent; }
.mi-pay-pill--eth   { background: #EEEDFE; color: #3C3489; border-color: transparent; }
.mi-pay-pill--ltc   { background: #E6F1FB; color: #0C447C; border-color: transparent; }
.mi-pay-pill--doge  { background: #FAEEDA; color: #854F0B; border-color: transparent; }
.mi-pay-pill--kas   { background: #E1F5EE; color: #0F6E56; border-color: transparent; }
.mi-pay-pill--bank  { background: #F4F4F5; color: #4A4A52; border-color: transparent; }

.mi-pay-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mi-pay-bank-ico {
  flex-shrink: 0;
  margin-right: -1px;
}
.mi-pay-pill__discount {
  margin-left: 4px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  background: rgba(247, 147, 26, 0.18);
  color: #854F0B;
}

/* --- Tablet (≤ 1024px) — keep verify at 3 / brands at 6 / pools wrap to 4 --- */
@media (max-width: 1024px) {
  .mi-trust-grid--pools  { grid-template-columns: repeat(4, 1fr); }
}

/* --- Mobile (≤ 640px) — collapse everything to fit narrow viewport --- */
@media (max-width: 640px) {
  .mi-trust-section {
    padding: 1rem 0.85rem 0.65rem;
  }
  .mi-trust-block {
    margin-bottom: 1rem;
  }
  .mi-trust-heading {
    font-size: 12px;
  }
  .mi-trust-grid--verify { grid-template-columns: repeat(3, 1fr); }
  .mi-trust-grid--verify:has(> .mi-trust-card:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
  .mi-trust-grid--brands { grid-template-columns: repeat(3, 1fr); }
  .mi-trust-grid--pools  { grid-template-columns: repeat(4, 1fr); }
  .mi-trust-card {
    min-height: 84px;
    padding: 10px 6px 8px;
  }
  .mi-trust-card img       { max-height: 44px; }
  .mi-trust-card__meta     { font-size: 9px; }
  .mi-brand-tile           { min-height: 48px; padding: 6px 4px; }
  .mi-brand-tile img       { max-height: 26px; }
  .mi-pool-tile            { min-height: 38px; padding: 5px 3px; }
  .mi-pool-tile img        { max-height: 20px; }
  .mi-pay-pill             { font-size: 10px; padding: 4px 9px; }
  .mi-pay-pill__discount   { font-size: 9px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   END PHASE 8b SECTION
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   SESSION 11: About Us page (info_id=4) custom blocks
   Adds: .mi-about-stats / .mi-about-stat   (trust stats 4-up grid)
         .mi-about-warning                  (scam-warning callout box)
         .mi-about-facts / .mi-about-fact   (registered office facts grid)
   All classes mi-* prefixed per project convention.
   Built: May 30, 2026
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Trust stats grid (4 numbers under intro paragraph) ───────────────────── */
.mi-about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mi-sp-4);
  margin: var(--mi-sp-7) 0 var(--mi-sp-8);
  padding: var(--mi-sp-5);
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-subtle);
  border-radius: 12px;
}
.mi-about-stat {
  text-align: center;
  padding: var(--mi-sp-2);
}
.mi-about-stat__num {
  font-family: var(--mi-font-mono);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--mi-fw-bold);
  line-height: 1.1;
  color: var(--mi-color-primary);
  letter-spacing: var(--mi-letter-tight);
  margin-bottom: 6px;
}
.mi-about-stat__label {
  font-size: var(--mi-fs-sm);
  color: var(--mi-text-body);
  line-height: 1.4;
}

/* ── Scam warning callout (high-contrast advisory box) ────────────────────── */
.mi-about-warning {
  margin: var(--mi-sp-5) 0;
  padding: var(--mi-sp-5) var(--mi-sp-6);
  background: #FFF7ED;                /* warm soft orange wash */
  border-left: 4px solid #F7931A;     /* BTC orange accent bar */
  border-radius: 8px;
}
.mi-about-warning p {
  margin: 0 0 var(--mi-sp-3) 0;
  color: #7C2D12;                     /* darkened amber for high contrast */
}
.mi-about-warning p:last-child { margin-bottom: 0; }
.mi-about-warning ul {
  margin: var(--mi-sp-3) 0;
  padding-left: var(--mi-sp-5);
}
.mi-about-warning li {
  color: #7C2D12;
  margin-bottom: 6px;
}
.mi-about-warning a {
  color: #9A3412;
  text-decoration: underline;
  font-weight: var(--mi-fw-semibold);
}

/* ── Registered office facts grid (corporate verification block) ─────────── */
.mi-about-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mi-sp-2) var(--mi-sp-5);
  margin: var(--mi-sp-5) 0;
  padding: var(--mi-sp-5);
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-subtle);
  border-radius: 10px;
}
.mi-about-fact {
  padding: 6px 0;
  border-bottom: 1px solid var(--mi-border-subtle);
  font-size: var(--mi-fs-sm);
}
.mi-about-fact:nth-last-child(-n+2) { border-bottom: 0; }
.mi-about-fact__label {
  display: inline-block;
  min-width: 140px;
  color: var(--mi-text-muted);
  font-weight: var(--mi-fw-medium);
}

/* ── Mobile: collapse stats to 2x2 and facts to single column ────────────── */
@media (max-width: 640px) {
  .mi-about-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--mi-sp-4);
    gap: var(--mi-sp-3);
  }
  .mi-about-stat__num { font-size: 1.5rem; }
  .mi-about-stat__label { font-size: var(--mi-fs-xs); }
  .mi-about-facts {
    grid-template-columns: 1fr;
    padding: var(--mi-sp-4);
  }
  .mi-about-fact:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--mi-border-subtle);
  }
  .mi-about-fact:last-child { border-bottom: 0; }
  .mi-about-fact__label { min-width: 110px; }
  .mi-about-warning {
    padding: var(--mi-sp-4);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   END SESSION 11 ABOUT US SECTION
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   SESSION 11 HOTFIX v5: button visibility + generic info-page wide layout
   Built: May 30, 2026 (replaces v1, v2, v3, v4)
   
   CHANGES IN v5 vs v4:
     - Generalized the v4 layout rule. Instead of detecting .mi-about-stats
       only (which only existed on About Us page), the rule now also detects
       a generic .mi-prose-wide marker div. Any info page can opt into
       full-width layout by including <div class="mi-prose-wide" hidden></div>
       as a child of its description body.
     - Removes the per-element child enumeration. Just sets max-width: none
       on the article and every direct child, full stop.
     - Adds .mi-prose-wide { display: none } so the marker itself doesn't
       render even if the `hidden` attribute is stripped.
     - Button fix from v3/v4 retained unchanged.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Button text visibility (GLOBAL, not scoped to .mi-prose) ──── */

/* a.mi-btn must show the right text color. The button variants are still
   responsible for setting --_mi-btn-fg correctly via cascading vars.
   We just need to ensure no later `a { color: ... }` rule wins.

   Reading the resolved color from the cascading var --_mi-btn-fg means
   each variant (primary, secondary, whatsapp, orange, ghost) keeps its
   own fg value without us hardcoding each one.

   !important is used here because the resolved --_mi-btn-fg variable
   is already correct in the cascade; we just need to win the `color`
   property tie-break against a:hover and other global anchor rules. */
a.mi-btn,
a.mi-btn:visited,
a.mi-btn:link,
a.mi-btn:hover,
a.mi-btn:focus,
a.mi-btn:active {
  color: var(--_mi-btn-fg) !important;
  text-decoration: none !important;
}

/* Hover variants: each button variant's hover :hover state should still
   work normally. The base .mi-btn:hover rule re-applies color: var(--_mi-btn-fg)
   and the variant's :hover overrides --_mi-btn-fg for secondary
   (blue text -> white text on solid blue hover). */

/* Block the global a:hover underline from leaking through. */
a.mi-btn:hover {
  text-decoration: none !important;
}

/* ── FIX 2: Info-page full-width layout opt-in ──────────────────────────── */

/* The .mi-prose article wrapper caps text at 70ch for readability on long
   blog-post-style content. On info pages with mixed prose + custom blocks
   (stats grids, callouts, facts tables), the 70ch cap creates an awkward
   left-leaning column. This rule opts a page out of that cap.
   
   Two ways to trigger full-width on an info page:
     (a) Page contains a .mi-about-stats block (the About Us page, kept
         for backwards compatibility)
     (b) Page includes a <div class="mi-prose-wide" hidden></div> marker
         as a child of the description body (the generic way, used by
         Privacy Policy and all future info pages)
   
   When either marker is present, drop max-width on the article AND on
   every direct child element. Custom blocks and prose all use the full
   content column. OpenCart container caps at 1440px so readability is
   preserved on large screens. */
.mi-prose:has(.mi-about-stats),
.mi-prose:has(.mi-prose-wide),
.mi-prose:has(.mi-about-stats) > *,
.mi-prose:has(.mi-prose-wide) > * {
  max-width: none;
}

/* The marker itself must be visually hidden but kept in the DOM so :has()
   detects it. Use the HTML `hidden` attribute (already non-rendering) plus
   defensive CSS in case the attribute is stripped by a sanitiser. */
.mi-prose-wide {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   END SESSION 11 HOTFIX v5
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   SESSION 11: Policy/legal page styles (Privacy, Terms, Returns, Warranty)
   Adds:
     .mi-policy-dates       (date banner under H1: Last Updated / Effective)
     .mi-policy-toc         (table-of-contents jump-link block)
     .mi-policy-toc__title
     .mi-policy-toc__list
     .mi-policy-contact     (final contact-method block at end of policy)
     .mi-policy-contact__row
     .mi-policy-contact__label
   All classes mi-* prefixed. Built May 30, 2026.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Last-updated / effective-date banner ──────────────────────────────── */
.mi-policy-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sp-3) var(--mi-sp-6);
  margin: var(--mi-sp-4) 0 var(--mi-sp-6);
  padding: var(--mi-sp-3) var(--mi-sp-4);
  background: var(--mi-bg-soft);
  border-left: 3px solid var(--mi-color-primary);
  border-radius: 6px;
  font-size: var(--mi-fs-sm);
}
.mi-policy-dates__label {
  color: var(--mi-text-muted);
  font-weight: var(--mi-fw-medium);
  margin-right: 6px;
}
.mi-policy-dates__value {
  color: var(--mi-text-headline);
  font-weight: var(--mi-fw-semibold);
}

/* ── Table-of-contents jump-link block ─────────────────────────────────── */
.mi-policy-toc {
  margin: var(--mi-sp-6) 0;
  padding: var(--mi-sp-5);
  background: var(--mi-bg-soft);
  border: 1px solid var(--mi-border-subtle);
  border-radius: 10px;
}
.mi-policy-toc__title {
  margin: 0 0 var(--mi-sp-3);
  font-size: var(--mi-fs-md);
  font-weight: var(--mi-fw-bold);
  color: var(--mi-text-headline);
  letter-spacing: var(--mi-letter-snug);
}
.mi-policy-toc__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px var(--mi-sp-5);
}
.mi-policy-toc__list li {
  font-size: var(--mi-fs-sm);
  padding: 0 !important;
}
.mi-policy-toc__list li::marker {
  content: "" !important;
}
.mi-policy-toc__list a {
  color: var(--mi-color-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--mi-color-primary);
  padding-bottom: 1px;
  transition: color var(--mi-dur-fast) var(--mi-ease-out),
              border-color var(--mi-dur-fast) var(--mi-ease-out);
}
.mi-policy-toc__list a:hover {
  color: var(--mi-color-primary-hover);
  border-color: var(--mi-color-primary-hover);
}

/* ── Anchor target offset (for jump links, accounts for sticky header) ── */
.mi-prose [id] {
  scroll-margin-top: var(--mi-sp-7);
}

/* ── Final contact block in policy pages ───────────────────────────────── */
.mi-policy-contact {
  margin: var(--mi-sp-5) 0;
  padding: var(--mi-sp-5);
  background: var(--mi-color-primary-soft);
  border-radius: 10px;
}
.mi-policy-contact__row {
  display: flex;
  align-items: baseline;
  gap: var(--mi-sp-3);
  margin: 6px 0;
  font-size: var(--mi-fs-md);
}
.mi-policy-contact__label {
  min-width: 90px;
  color: var(--mi-text-muted);
  font-weight: var(--mi-fw-medium);
  font-size: var(--mi-fs-sm);
}
.mi-policy-contact__row a {
  color: var(--mi-color-primary);
  font-weight: var(--mi-fw-semibold);
}

/* ── Mobile: collapse TOC to single column, tighter contact rows ──────── */
@media (max-width: 640px) {
  .mi-policy-toc {
    padding: var(--mi-sp-4);
  }
  .mi-policy-toc__list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mi-policy-dates {
    flex-direction: column;
    gap: 4px;
  }
  .mi-policy-contact__row {
    flex-direction: column;
    gap: 2px;
  }
  .mi-policy-contact__label {
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   END SESSION 11 POLICY PAGE STYLES
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   SESSION 13: Full-width text for product description + category intro
   ─────────────────────────────────────────────────────────────────────────
   PROBLEM: .mi-prose caps text at 70ch (line ~2922) and
   .mi-category-hero__intro caps at 78ch (line ~4708). On the product
   Description tab and the category intro, that 70/78ch cap leaves the
   copy in a narrow left-aligned column with lots of empty space to the right.

   FIX: drop the width cap ONLY on these two contexts (and their direct
   children) so the text fills the content column. The parent .mi-container
   already caps at 1280-1440px, so line length stays reasonable on large
   screens. The 70ch readability cap is intentionally LEFT INTACT for info
   pages, the shipping tab, and every other .mi-prose use.

   Scoped by ID / specific class, so no marker div needs to be injected
   into the product or category description data. CSS-only, no data change.
   MARKER: FULLWIDTH-PROSE-v3
   ════════════════════════════════════════════════════════════════════════════ */

/* FULLWIDTH-PROSE-v3 */
/* The product tabs had THREE separate caps, not one:
     1. .mi-tabs__panels        max-width:76ch  (~line 4291) - the wrapper
     2. .mi-prose               max-width:70ch  (~line 2922) - each panel's
        prose div. The description div has id #mi-product-description so a v1
        ID rule caught it, but the SHIPPING panel uses a plain .mi-prose with
        no id, so it stayed narrow. We now release EVERY .mi-prose inside the
        tab panels, not just the description.
     3. .mi-review-form         max-width:640px (~line 4601) - intentionally
        LEFT INTACT. Form input fields should not stretch to full container
        width (poor usability), so the Reviews form keeps its readable width.
   Category intro is released the same way as before. */
.mi-tabs__panels,
.mi-tabs__panels .mi-prose,
.mi-tabs__panels .mi-prose > *,
.mi-category-hero__intro,
.mi-category-hero__intro > * {
  max-width: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   END SESSION 13 FULL-WIDTH FIX
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   SESSION 17 CHECKOUT FIXES (additive, appended; original rules untouched)
   1. Two-column checkout panels (login, register, guest billing): force a clean
      top-aligned flex layout with border-box columns so the two .col-sm-6
      columns stop overflowing and staggering inside the accordion panels.
   2. Plisio invoice: styling for the "Choose a different coin" action bar.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. Checkout two-column alignment (v3): CSS grid, not flex. Flex items default
      to min-width:auto, so the wide form inputs forced the second column to wrap
      underneath. Grid with minmax(0,1fr) keeps two even columns side by side. ── */
#checkout-checkout #collapse-checkout-option .panel-body .row,
#checkout-checkout #collapse-payment-address .panel-body .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mi-sp-5);
  margin: 0;
}
@media (min-width: 720px) {
  #checkout-checkout #collapse-checkout-option .panel-body .row,
  #checkout-checkout #collapse-payment-address .panel-body .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
#checkout-checkout #collapse-checkout-option .panel-body .row .col-sm-6,
#checkout-checkout #collapse-payment-address .panel-body .row .col-sm-6 {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  float: none;
}

/* 2. Plisio "choose a different coin" action bar ───────────────────────────── */
.mi-plisio-invoice__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mi-sp-3);
  padding: 12px var(--mi-sp-4);
  border-top: 1px solid var(--mi-border-light);
  background: var(--mi-bg-soft);
}
.mi-plisio-invoice__actions-hint {
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-xs);
  color: var(--mi-text-tertiary);
}
.mi-plisio-invoice__change {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-family: var(--mi-font-display);
  font-size: var(--mi-fs-sm);
  font-weight: var(--mi-fw-semibold);
  color: var(--mi-color-primary);
  background: white;
  border: 1px solid var(--mi-color-primary);
  border-radius: var(--mi-radius-md);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.mi-plisio-invoice__change:hover {
  background: var(--mi-color-primary);
  color: white;
  box-shadow: 0 2px 10px var(--mi-color-primary-soft);
}
.mi-plisio-invoice__change svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   END SESSION 17 CHECKOUT FIXES
   ════════════════════════════════════════════════════════════════════════════ */