.mx-product{font-family:Inter,Arial;background:#f5f6f8;padding:50px 20px;}
.mx-wrap{max-width:1200px;margin:auto;display:flex;gap:50px;flex-wrap:wrap;background:#fff;padding:40px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.mx-gallery{display:flex;gap:16px;align-items:flex-start;flex:0 0 520px;position:relative;}
.mx-thumbs{width:70px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:520px;}
.mx-thumbs img{width:70px;height:70px;object-fit:cover;border-radius:10px;cursor:pointer;transition:.2s;border:2px solid transparent;}
.mx-thumbs img.active-thumb{border-color:#ff6a00;transform:scale(1.08);}
.mx-main{width:430px;height:auto;object-fit:contain;border-radius:12px;cursor:zoom-in;transition:transform .25s ease,width .25s ease,opacity .25s ease;}
.mx-main:hover{transform:scale(1.03);}
.mx-info{flex:1;min-width:320px;}
.mx-title{font-size:28px;font-weight:700;}

.mx-badges{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0;align-items:center;}
.mx-badge{font-size:14px;padding:8px 12px;border-radius:20px;background:#fff3e9;color:#ff6a00;font-weight:600;transition:transform .2s, box-shadow .2s;cursor:default;display:flex;align-items:center;}
.mx-badge.promo{background:#ff6a00;color:white;font-weight:700;}
.mx-badge:hover{transform:scale(1.1);box-shadow:0 4px 15px rgba(0,0,0,.15);}

.stock-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;animation:pulse 1.2s infinite;}
.stock-dot.green{background:#19c15f}
.stock-dot.red{background:#ff3b30}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

.mx-short-toggle{margin-top:10px;background:#1b2430;color:#fff;border:none;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;}
.mx-short-toggle:active{transform:scale(.98);}
.mx-shortdesc{margin:10px 0;color:#555;background:#f5f6f8;padding:12px;border-radius:12px;overflow:hidden;word-break:break-word;}
.mx-price{font-size:32px;font-weight:800;color:#ff6a00;margin:15px 0;}
.mx-old{text-decoration:line-through;color:#aaa;margin-right:10px;}

.mx-qty{display:inline-flex;align-items:center;gap:6px;background:#1b2430;padding:6px 10px;border-radius:10px;width:auto;}
.mx-qty button{width:26px;height:26px;font-size:14px;border:none;border-radius:6px;background:#2b8cff;color:white;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.mx-qty button:hover{transform:scale(1.08);}
.mx-qty input{width:56px;height:28px;background:#fff;color:#111;border:none;border-radius:6px;font-weight:600;font-size:14px;text-align:center;appearance:textfield;}
.mx-qty input::-webkit-inner-spin-button,.mx-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

.mx-cart{background:#ff6a00;color:#fff;padding:14px;border:none;border-radius:10px;width:100%;font-weight:600;cursor:pointer;transition:all .3s ease;}
.mx-cart.added{background:#28a745;}
.mx-cart.disabled{background:#aaa;cursor:not-allowed;}

.mx-accordion{max-width:1200px;margin:40px auto 0;}
.mx-acc-item{background:#fff;border-radius:10px;margin-bottom:10px;overflow:hidden;}
.mx-acc-head{padding:16px;cursor:pointer;font-weight:600;background:#fafafa;}
.mx-acc-body{display:none;padding:16px;}
.mx-acc-item.active .mx-acc-body{display:block;}

.mx-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:.25s;z-index:9999;}
.mx-lightbox.show{opacity:1;pointer-events:auto;}
.mx-lightbox img{max-width:90%;max-height:90%;}
.mx-close{position:absolute;top:25px;right:40px;font-size:40px;color:#fff;cursor:pointer;}
.mx-badge.promo.new{background:#2b8cff;color:#fff;font-weight:700;}
.mx-badge.soldout{background:#ffe9e9;color:#ff3b30;font-weight:800;}
.mx-badge.new{background:#2b8cff;color:#fff;font-size:14px;padding:8px 12px;}

.mx-related{max-width:1200px;margin:26px auto 0;padding:18px;border-radius:14px;background:white;}
/* mobile related cards swipeable container */
@media (max-width: 900px) {
  .mx-related-grid {display: flex !important;overflow-x: auto;scroll-snap-type: x mandatory;gap: 12px;padding: 8px;}
  .mx-related-card {flex: 0 0 260px; /* fixe la largeur des cards */scroll-snap-align: start;}}
.mx-related-card{ position:relative; border:2px solid rgba(255,106,0,.25);box-shadow:0 10px 24px rgba(0,0,0,.10);min-width: 0; max-width: 100%;box-sizing: border-box;overflow: hidden;}
.mx-related-card:hover{transform:translateY(-3px);border-color:rgba(255,106,0,.9);box-shadow:0 0 0 1px rgba(255,106,0,.35),0 0 22px rgba(255,106,0,.35),0 18px 38px rgba(0,0,0,.22);}
.mx-related-badges .mx-badge{font-size:12px;padding:6px 10px;border-radius:999px;}
.mx-related-badges{position:absolute;top:10px;left:10px;display:flex;gap:8px;flex-wrap:wrap;z-index:2;}
.mx-related-specs{max-width: 100%; overflow: hidden;}
.mx-related-specs * {max-width: 100% !important;box-sizing: border-box;}
/* Cas typiques : tables, pre/code */
.mx-related-specs table {width: 100% !important;table-layout: fixed;}
.mx-related-specs td,
.mx-related-specs th {word-break: break-word;overflow-wrap: anywhere;}
.mx-related-specs pre,
.mx-related-specs code {white-space: pre-wrap;word-break: break-word;overflow-wrap: anywhere;}

.mx-admin-badge-preview{display:flex;align-items:center;gap:10px;}
#mxBadgeLivePreview{all: unset;display:inline-flex;align-items:center;justify-content:center;}
#mxBadgeLivePreview.mx-badge{all: unset;display:inline-flex;align-items:center;padding:8px 12px;border-radius:20px;font-size:14px;font-weight:600;}
/* ===========================
   STICKY PC (price visible fix)
=========================== */
.mx-sticky{position:fixed;top:100px;right:40px;width:280px;background:#fff;padding:18px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);opacity:0;transform:translateY(-50px);transition:opacity .45s ease, transform .45s ease;z-index:1000;display:flex;flex-direction:column;gap:8px;}
.mx-sticky.show{opacity:1;transform:translateY(0);}
.mx-sticky .mx-badge{font-size:12px;padding:5px 9px;}
/* ✅ PATCH: force le prix sticky à s’afficher correctement */
#stickyPrice,
.mx-sticky .mx-price{
  display:block;
  font-size:24px;
  margin:6px 0;
  font-weight:800;
  color:#ff6a00;
  line-height:1.15;
}
.mx-qty.disabled{opacity:.45;filter:grayscale(100%);pointer-events:none;}
.mx-sticky .stock-dot{width:8px;height:8px;min-width:8px;min-height:8px;border-radius:50%;display:inline-block;}

@media(max-width:900px){
  .mx-sticky{display:none !important;}
}

/* ===========================
   EDIT POPUP (REAL MODAL)
=========================== */
#editPopup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999999;align-items:center;justify-content:center;padding:20px;}
#editPopup .mx-edit-modal{width:90%;max-width:900px;height:80vh;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:18px;display:flex;flex-direction:column;overflow:hidden;}
#editPopup .mx-edit-title{margin:0 0 10px 0;font-size:20px;font-weight:700;}
#editPopup textarea#editTextarea{width:100%;height:100%;min-height:300px;}
#editPopup .tox-tinymce{flex:1;min-height:0;}
#editPopup .mx-edit-actions{margin-top:12px;display:flex;gap:10px;justify-content:flex-end;}
.tox-tinymce-aux,.tox-dialog-wrap,.tox-dialog{z-index:10000000 !important;}

/* ===========================
   Counter + fade
=========================== */
.mx-counter{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;padding:6px 10px;border-radius:999px;pointer-events:none;display:none;}
.mx-imgfade{opacity:.2;transition:opacity .18s ease;}
.mx-imgfade.mx-imgfade-on{opacity:1;}

/* ================= STICKY PC ================= */

/* la sticky reste au-dessus */
.mx-sticky{
  overflow: visible;
}

.mx-sticky-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background:#f5f6f8;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px 12px;

  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}

/* ✅ IMPORTANT : comportement NORMAL des badges dans sticky */
#stickyBadges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

#stickyBadges .mx-badge{
  margin:0;
  order:0;
  position:static;
}

/* prix bien visible */
#stickyPrice{
  font-size:24px;
  font-weight:800;
  color:#ff6a00;
}
.mx-sticky-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.mx-sticky-toggle-icon{
  display:inline-block;
  transition:transform .2s ease;
}

/* ✅ IMPORTANT : le wrapper repliable doit exister et être animé */
.mx-sticky-content{
  overflow:hidden;
  max-height:1000px;           /* assez grand pour contenir */
  opacity:1;
  transition:max-height .25s ease, opacity .25s ease;
  will-change:max-height, opacity;
}

/* état réduit */
.mx-sticky.mx-collapsed .mx-sticky-content{
  max-height:0;
  opacity:0;
  pointer-events:none;
}

/* flèche qui tourne */
.mx-sticky.mx-collapsed .mx-sticky-toggle-icon{
  transform:rotate(-180deg);
}

/* ✅ supprime l'ancien "content:" qui ne fonctionne pas */
.mx-sticky-toggle-text::before{
  content:none !important;
}
/* ===========================
   MOBILE BAR (smooth)
=========================== */
.mx-mobilebar{display:none;}
@media(max-width:900px){
  .mx-mobilebar{
    display:flex;
    position:fixed;
    left:0; right:0;
    top:95px;
    z-index:10;

    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);

    padding:10px 12px;
    gap:10px;
    align-items:center;
    justify-content:space-between;

    opacity:0;
    transform:translateY(-14px);
    pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
  }

  .mx-mobilebar.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  /* ✅ PATCH: promo au-dessus du prix, jamais collé */
  .mx-mobilebar-pricewrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    line-height:1.1;
  }

  /* promo */
  #mxMobilePromo{
    display:block;
    width:100%;
  }
  #mxMobilePromo .mx-badge{
    display:inline-flex;
    margin:0;
    position:static;
    transform:none;
  }
  #mxMobilePromo .mx-badge.promo{
    font-size:12px;
    padding:6px 10px;
    line-height:1;
  }

  /* prix: sur sa propre ligne */
  #mxMobilePrice{
    display:block;
    width:100%;
    font-weight:900;
    color:#ff6a00;
    font-size:18px;
    line-height:1.1;
    white-space:nowrap;
  }

  /* ✅ PATCH: éviter que le badge “se colle” au prix via flex */
  #mxMobilePromo, #mxMobilePrice{
    flex:0 0 auto;
  }

  .mx-mobilebar-right{
    display:flex;
    gap:10px;
    align-items:center;
  }

  .mx-mobilebar-btn{
    width:auto;
    padding:12px 14px;
    border-radius:12px;
    white-space:nowrap;
  }

  .mx-buy-now{background:#1b2430;}

  body{padding-bottom:76px;}
}

/* ===========================
   Related / upsell
=========================== */
.mx-related{max-width:1200px;margin:28px auto 0;}
.mx-related-title{margin:0 0 12px 0;font-size:20px;font-weight:800;}
.mx-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:900px){.mx-related-grid{grid-template-columns:repeat(2,1fr);}}
.mx-related-card{background:#fff;border-radius:14px;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.06);cursor:pointer;transition:transform .18s ease, box-shadow .18s ease;}
.mx-related-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.10);}
.mx-related-card img{width:100%;height:150px;object-fit:contain;border-radius:12px;background:#f5f6f8;}
.mx-related-name{margin:10px 0 6px;font-weight:800;font-size:14px;}
.mx-related-price{color:#ff6a00;font-weight:900;}

/* ===========================
   Micro animations
=========================== */
.mx-cart:active{transform:scale(.98);}
.mx-tap{transform:scale(.98);}
.mx-badge.promo{animation:mxPulsePromo 1.4s infinite;}
@keyframes mxPulsePromo{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}

/* ===========================
   MOBILE gallery thumbs scroll safe
=========================== */
@media(max-width:900px){
  html, body{overflow-x:hidden;}
  .mx-product{padding:18px 12px;}
  .mx-wrap{max-width:100%;padding:16px;gap:16px;flex-direction:column;flex-wrap:nowrap;}
  .mx-gallery{width:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;gap:12px;}
  .mx-main{width:100%;max-width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:12px;touch-action:pan-y;}
  .mx-thumbs{
    width:100%;
    max-width:100%;
    max-height:none !important;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:10px;
    padding:0 0 6px 0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    white-space:nowrap;
    min-width:0;
    scroll-snap-type:x mandatory;
  }
  .mx-thumbs img{width:64px;height:64px;flex:0 0 auto;scroll-snap-align:start;}
  .mx-thumbs::-webkit-scrollbar{display:none;}
  .mx-thumbs{scrollbar-width:none;}
  .mx-info{width:100%;min-width:0;}
  .mx-shortdesc img{max-width:100%;height:auto;}
  .mx-shortdesc *{max-width:100%;}
  .mx-qty{width:100%;justify-content:space-between;}
  .mx-cart{width:100%;}
}

/* ===========================
   TABS (Description / Specs / Performance)
=========================== */
.mx-tabs{max-width:1200px;margin:40px auto 0;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.06);overflow:hidden;}
.mx-tab-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid rgba(0,0,0,.06);background:#fafafa;flex-wrap:wrap;}
.mx-tab-btn{border:none;background:transparent;padding:10px 12px;border-radius:12px;font-weight:800;cursor:pointer;}
.mx-tab-btn.active{background:#1b2430;color:#fff;}
.mx-tab-panels{padding:16px;}
.mx-tab-panel{display:none;}
.mx-tab-panel.active{display:block;}
.mx-tab-content{color:#333;line-height:1.7;}
.mx-tab-content img{max-width:100%;height:auto;border-radius:10px;}

/* ===========================
   Performance (FPS chart)
=========================== */
.mx-perf-title{margin:0 0 6px;font-size:20px;font-weight:900;}
.mx-perf-sub{margin:0 0 14px;color:#666;}
.mx-fps-summary{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 16px;}
.mx-fps-kpi{background:#f5f6f8;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:12px 14px;min-width:180px;}
.mx-fps-kpi-label{font-size:12px;color:#666;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.mx-fps-kpi-value{font-size:26px;font-weight:900;color:#ff6a00;margin-top:4px;}
.mx-fps-chart{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.mx-fps-row{display:grid;grid-template-columns:160px 1fr 70px;gap:10px;align-items:center;}
@media(max-width:700px){.mx-fps-row{grid-template-columns:120px 1fr 60px;}}
.mx-fps-game{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mx-fps-barwrap{background:#f5f6f8;border-radius:999px;overflow:hidden;border:1px solid rgba(0,0,0,.06);height:14px;}
.mx-fps-bar{height:100%;width:0%;background:#ff6a00;border-radius:999px;transition:width .35s ease;}
.mx-fps-val{font-weight:900;color:#1b2430;text-align:right;}
.mx-perf-note{margin-top:14px;color:#777;font-size:13px;}

/* ===========================
   Admin tools (front)
=========================== */
.mx-admin-tools{margin-top:16px;}
.mx-admin-tools-btn{width:100%;border:none;border-radius:12px;padding:12px 14px;background:#1b2430;color:#fff;font-weight:900;cursor:pointer;}
.mx-admin-tools-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.12);}

/* Modal */
.mx-admin-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999999;align-items:center;justify-content:center;padding:20px;}
.mx-admin-modal.show{display:flex;}
.mx-admin-modal-inner{width:90%;max-width:980px;height:82vh;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;}
.mx-admin-modal-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);background:#fafafa;}
.mx-admin-modal-title{font-weight:900;}
.mx-admin-close{border:none;background:transparent;font-size:28px;cursor:pointer;line-height:1;}

.mx-admin-tab-head{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06);flex-wrap:wrap;}
.mx-admin-tab-btn{border:none;background:#f5f6f8;padding:10px 12px;border-radius:12px;font-weight:900;cursor:pointer;}
.mx-admin-tab-btn.active{background:#ff6a00;color:#fff;}
.mx-admin-panels{flex:1;min-height:0;overflow:auto;padding:12px;}
.mx-admin-panel{display:none;}
.mx-admin-panel.active{display:block;}
.mx-admin-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap;}
.mx-admin-link{font-weight:800;color:#ff6a00;text-decoration:none;}
.mx-admin-link:hover{text-decoration:underline;}
.mx-admin-divider{height:1px;background:rgba(0,0,0,.08);margin:16px 0;}
.mx-admin-subtitle{margin:0 0 10px;font-weight:900;}
.mx-admin-fps-list{display:flex;flex-direction:column;gap:10px;}
.mx-admin-fps-row{display:grid;grid-template-columns:1fr 140px;gap:10px;align-items:center;padding:10px;border:1px solid rgba(0,0,0,.06);border-radius:12px;background:#fff;}
.mx-admin-fps-row label{font-weight:900;}
.mx-admin-fps-row input{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,.12);font-weight:800;}
.mx-admin-badges-list{display:flex;flex-direction:column;gap:10px;}
.mx-admin-badge-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid rgba(0,0,0,.06);border-radius:12px;}
.mx-admin-badge-left{display:flex;align-items:center;gap:10px;min-width:0;}
.mx-admin-badge-left label{display:flex;align-items:center;gap:10px;font-weight:900;min-width:0;}
.mx-admin-badge-left .mx-admin-badge-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mx-admin-badge-right{display:flex;gap:10px;align-items:center;flex:0 0 auto;}
.mx-admin-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media(max-width:700px){.mx-admin-create-grid{grid-template-columns:1fr;}}
.mx-admin-create-grid input,.mx-admin-create-grid select{padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,.12);font-weight:700;}
.mx-admin-check{display:flex;align-items:center;gap:8px;font-weight:800;}
/* TinyMCE inside modal should flex */
#mxAdminDescTextarea{flex:1;min-height:0;height:100% !important;}
#mxAdmin-desc{height:100%;min-height:0;}
.mx-admin-modal .tox-tinymce{min-height:420px;}
.tox-tinymce-aux,.tox-dialog-wrap,.tox-dialog{z-index:10000000 !important;}
.mx-admin-fps-actions{margin-top:10px;display:flex;gap:10px;align-items:center;}
.mx-admin-mini-btn{
  border:none;
  border-radius:10px;
  padding:10px 12px;
  background:#1b2430;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.mx-admin-mini-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.12);}

.mx-admin-fps-row{
  position:relative;
  grid-template-columns: 1fr 140px 44px; /* + bouton delete */
}
.mx-admin-fps-row .mx-admin-del{
  width:44px;
  height:44px;
  border:none;
  border-radius:10px;
  background:#ffe9e9;
  color:#ff3b30;
  font-weight:900;
  cursor:pointer;
}
.mx-admin-fps-row .mx-admin-del:hover{filter:brightness(0.98);}

/* ===========================
   Toast (top notification)
=========================== */
.mx-toast-wrap{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  width: min(720px, calc(100vw - 24px));
  pointer-events: none;
}

.mx-toast{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(20, 24, 34, .92);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
}

.mx-toast.mx-show{ opacity: 1; transform: translateY(0); }

.mx-toast .mx-toast-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2b8cff;
  flex: 0 0 auto;
}

.mx-toast.mx-success .mx-toast-dot{ background: #19c15f; }
.mx-toast.mx-error   .mx-toast-dot{ background: #ff3b30; }
.mx-toast.mx-warn    .mx-toast-dot{ background: #ff6a00; }

.mx-toast .mx-toast-msg{ line-height: 1.25; }

.mx-toast .mx-toast-close{
  margin-left: auto;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 10px;
}

.mx-toast .mx-toast-close:hover{
  background: rgba(255,255,255,.08);
}

/* ===========================
   Micro interactions
=========================== */
/* buttons */
.mx-btn, .mx-buy, .mx-cart, .mx-sticky-cart, .mx-mobile-cart, .mx-mobile-buy{
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change: transform;
}
.mx-btn:hover, .mx-buy:hover, .mx-cart:hover, .mx-sticky-cart:hover, .mx-mobile-cart:hover, .mx-mobile-buy:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.mx-btn:active, .mx-buy:active, .mx-cart:active, .mx-sticky-cart:active, .mx-mobile-cart:active, .mx-mobile-buy:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* cards */
.mx-related-card, .mx-card, .mx-related-item{
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.mx-related-card:hover, .mx-card:hover, .mx-related-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* badges */
.mx-badge{
  transition: transform .14s ease, filter .14s ease;
}
.mx-badge:hover{ transform: translateY(-1px); filter: brightness(1.02); }

/* ===========================
   FPS Grow Animation
=========================== */
.mx-fps-bar{
  width: 0;
  transition: width .65s cubic-bezier(.2,.9,.2,1);
}

/* ===========================
   FPS resolution switch + indicators
=========================== */

.mx-fps-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
  align-items:center;
}
.mx-fps-res{
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.mx-fps-res:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.10); }
.mx-fps-res.is-active{
  border-color: rgba(255,106,0,.35);
  box-shadow: 0 10px 24px rgba(255,106,0,.12);
  filter: brightness(1.02);
}
.mx-fps-meta{ font-weight: 700; opacity: .85; }

/* color indicator */
.mx-fps-bar{width: 0; /* important pour l’animation */transition: width .65s cubic-bezier(.2,.9,.2,1);}
.mx-fps-row.mx-fps-good .mx-fps-val{ font-weight: 900; }
.mx-fps-row.mx-fps-mid  .mx-fps-val{ font-weight: 900; }
.mx-fps-row.mx-fps-low  .mx-fps-val{ font-weight: 900; }
.mx-fps-row.mx-fps-hard-low .mx-fps-val{ font-weight: 900; }

.mx-fps-row.mx-fps-good .mx-fps-bar{ background: linear-gradient(90deg, #1ed760, #0ea94b); }
.mx-fps-row.mx-fps-mid  .mx-fps-bar{ background: linear-gradient(90deg, #3aa0ff, #1f6fff); }
.mx-fps-row.mx-fps-low  .mx-fps-bar{ background: linear-gradient(90deg, #ff9a2f, #ff6a00); }
.mx-fps-row.mx-fps-hard-low .mx-fps-bar{ background: linear-gradient(90deg, #ff3b3b, #b80000); }

/* ===========================
   FPS Premium Animation
=========================== */

.mx-fps-bar{
  width: 0;
  transition: width .75s cubic-bezier(.2,.9,.2,1);
  position: relative;
  overflow: hidden;
}

/* subtle shimmer */
.mx-fps-bar::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-20deg);
  animation:mxFpsShimmer 5s ease-in-out infinite;
  opacity:.5;
}

@keyframes mxFpsShimmer{
  0%{left:-40%;}
  50%{left:120%;}
  100%{left:120%;}
}
/* ===========================
   Best FPS bar (special)
=========================== */
.mx-fps-row.mx-fps-best .mx-fps-game{
  font-weight: 900;
}

.mx-fps-row.mx-fps-best .mx-fps-bar{
  animation: mxBestPulse 1.35s ease-in-out infinite;
  filter: brightness(1.05) saturate(1.15);
  box-shadow: 0 0 0 rgba(0,0,0,0); /* base */
}

@keyframes mxBestPulse{
  0%   { transform: scaleY(1);   box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { transform: scaleY(1.08); box-shadow: 0 0 18px rgba(255,255,255,.18); }
  100% { transform: scaleY(1);   box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* petit badge "TOP" optionnel visuel */
.mx-fps-row.mx-fps-best .mx-fps-game::after{
  content: " TOP";
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,.06);
}

/* ===========================
   GPU Glow Dynamic (chart aura)
=========================== */
#mxFpsChart{
  position: relative;
}

/* aura */
#mxFpsChart::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius: 18px;
  pointer-events:none;
  opacity:.0;
  filter: blur(18px);
  transition: opacity .25s ease;
  animation: mxGpuGlow 2.8s ease-in-out infinite;
}

/* activate when dataset is present */
#mxFpsChart[data-glow]::before{ opacity:.55; }

/* tier colors */
#mxFpsChart[data-glow="good"]::before{
  background: radial-gradient(circle at 30% 20%, rgba(30,215,96,.55), rgba(30,215,96,0) 60%);
}
#mxFpsChart[data-glow="mid"]::before{
  background: radial-gradient(circle at 30% 20%, rgba(58,160,255,.55), rgba(58,160,255,0) 60%);
}
#mxFpsChart[data-glow="low"]::before{
  background: radial-gradient(circle at 30% 20%, rgba(255,154,47,.55), rgba(255,154,47,0) 60%);
}
#mxFpsChart[data-glow="hardlow"]::before{
  background: radial-gradient(circle at 30% 20%, rgba(255,59,59,.55), rgba(255,59,59,0) 60%);
}

@keyframes mxGpuGlow{
  0%   { transform: translateY(0) scale(1);   opacity:.35; }
  50%  { transform: translateY(-2px) scale(1.02); opacity:.6; }
  100% { transform: translateY(0) scale(1);   opacity:.35; }
}