.card-img-top {
  width: 100% !important;
  height: 170px !important;
  overflow: hidden !important;
  position: relative !important;
}

.card-img-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ==========================================================================
   MS SKIN — refonte style "AstraShop" pour Glow
   Couleurs 100% pilotées par les réglages du thème (accent, highlight, textes).
   ========================================================================== */

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
.text-display, .sa-section-title, .ms-ba-title, h1, h2 { letter-spacing: -0.035em; }
.mk { color: rgb(var(--cl-accent)); }

/* ---------- Boutons : pilules pleines, plus gros ---------- */
.sa-btn { font-weight: 700; }
.sa-hero .sa-btn, .ms-before-after .sa-btn { padding: .95rem 2rem; font-size: 1.05rem; }
.sa-btn-primary {
  background-image: none;
  background-color: rgb(var(--cl-accent));
  border-color: rgb(var(--cl-accent));
  box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--cl-ac-c) 70%, transparent);
}
.sa-btn-primary:hover:not(:disabled) {
  background-image: none;
  background-color: color-mix(in oklab, var(--cl-ac-c) 88%, white);
  border-color: color-mix(in oklab, var(--cl-ac-c) 88%, white);
  box-shadow: 0 14px 38px -8px color-mix(in oklab, var(--cl-ac-c) 85%, transparent);
}
.sa-btn-secondary-outline, .sa-btn-primary-outline {
  background-image: none;
  background-color: color-mix(in oklab, var(--cl-ac-c) 10%, transparent);
  border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
  color: rgb(var(--cl-t-primary));
}
.sa-btn-secondary-outline:hover:not(:disabled), .sa-btn-primary-outline:hover:not(:disabled) {
  background-color: color-mix(in oklab, var(--cl-ac-c) 20%, transparent);
  border-color: rgb(var(--cl-accent));
}

/* ---------- Navbar : pilule flottante (desktop) ---------- */
@media (min-width: 1024px) {
  .sa-navbar .glass-nav {
    max-width: 1180px;
    margin: 14px auto 0;
    border-radius: 9999px;
    border: var(--border-w) solid var(--cl-border);
    background: color-mix(in oklab, var(--cl-bg-c) 78%, transparent);
  }
  .sa-navbar .glass-nav::after, .sa-navbar .glass-nav::before { display: none; }
  .sa-navbar .glass-nav > div { padding-inline: 1.25rem; }
  .sa-navbar-link {
    text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: .85rem;
  }
}
.sa-navbar-logo span { font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Titres de section : alignés à gauche, grand format, trait accent ---------- */
.sa-section-heading {
  align-self: stretch !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important; text-align: left !important;
  gap: .75rem;
}
.sa-section-title { font-size: clamp(2.2rem, 5vw, 4.4rem) !important; line-height: 1.04; }
.sa-section-subtitle { font-weight: 500; font-size: 1.05rem; }
.sa-section-eyebrow, .ms-kicker {
  display: inline-flex; align-items: center; gap: 1.25rem;
  padding: 0 !important; background: none !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--cl-t-primary));
}
.sa-section-eyebrow::before, .ms-kicker::before {
  content: ""; width: 56px; height: 3px; border-radius: 2px; background: rgb(var(--cl-accent)); flex-shrink: 0;
}
.sa-products > .container, .sa-categories > .container { align-items: stretch; text-align: left; }

/* ---------- Hero ---------- */
.ms-hero { position: relative; overflow: hidden; }
.ms-hero .text-display { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.02; font-weight: 800; }
.ms-hero .sa-eyebrow {
  background: color-mix(in oklab, var(--cl-fg-c) 4%, transparent);
  border-color: var(--cl-border); color: rgb(var(--cl-t-muted));
  font-size: .8rem; letter-spacing: .12em; padding: .6rem 1.4rem; box-shadow: none;
}
.ms-hero .sa-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--cl-success)); box-shadow: 0 0 10px rgb(var(--cl-success));
}
.ms-hero .text-t-muted { font-size: clamp(1rem, 1.5vw, 1.25rem); }
.ms-hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(color-mix(in oklab, var(--cl-fg-c) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cl-fg-c) 7%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}
.ms-hero-char {
  position: absolute; bottom: 0; height: 92%; width: auto; max-width: 32vw;
  object-fit: contain; pointer-events: none; opacity: .75;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 28%);
          mask-image: linear-gradient(to top, transparent 0, #000 28%);
}
.ms-hero-char-l { left: 0; }
.ms-hero-char-r { right: 0; }
.ms-hero .sa-searchbar { max-width: 46rem; }
.ms-hero .sa-searchbar-trigger { height: 3.75rem; background: color-mix(in oklab, var(--cl-bg-c) 80%, var(--cl-fg-c) 3%); }
.ms-trust { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin-top: 2.5rem; }
.ms-trust-item { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; font-size: 1.05rem; color: rgb(var(--cl-t-muted)); }
.ms-trust-item i { color: rgb(var(--cl-accent)); }
.ms-trust-star i { color: rgb(var(--cl-highlight)); }
@media (max-width: 1023px) { .ms-hero-char { opacity: .22; max-width: 55vw; } }

/* ---------- Cartes (produits, groupes, catégories) ---------- */
.ms-card, .ms-cat-card {
  display: block; height: 100%; overflow: hidden; border-radius: 1.25rem;
  border: var(--border-w) solid var(--cl-border); background: var(--cl-surface-1);
  color: rgb(var(--cl-t-primary));
}
.ms-card:hover, .ms-cat-card:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 60%, transparent); }
.ms-card-media, .ms-cat-media {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--cl-ac-c) 55%, black), color-mix(in oklab, var(--cl-ac-c) 8%, black) 72%);
}
.ms-card-media::after, .ms-cat-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ms-card-media img, .ms-cat-media img { display: block; transition: transform .5s ease; }
.ms-card:hover .ms-card-media img, .ms-cat-card:hover .ms-cat-media img { transform: scale(1.04); }
.ms-stock {
  flex-shrink: 0; white-space: nowrap; text-transform: uppercase;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .4rem .8rem; border-radius: 9999px;
  color: var(--cl-accent-text); background: var(--cl-accent-soft);
}
.ms-stock-out { color: rgb(var(--cl-error)); background: color-mix(in oklab, rgb(var(--cl-error)) 12%, transparent); }
.ms-cat-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sa-products .flex.flex-wrap.gap-4 { gap: 1.75rem; }

/* ---------- Avant / Après ---------- */
.ms-ba-grid { display: grid; gap: 3.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ms-ba-grid { grid-template-columns: 1fr 1.6fr; } }
.ms-ba-copy { display: flex; flex-direction: column; gap: 1.1rem; }
.ms-ba-copy .ms-kicker { color: rgb(var(--cl-accent)); }
.ms-ba-title { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; }
.ms-ba-box {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 1.25rem;
  border: var(--border-w) solid var(--cl-border); background: var(--cl-surface-1);
}
.ms-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-ba-after { opacity: 0; transition: opacity .35s ease; }
.ms-ba-box.is-after .ms-ba-after { opacity: 1; }
.ms-ba-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: .7rem; padding: 1rem 1.8rem; border-radius: 9999px;
  font-weight: 700; font-size: 1.05rem; color: #fff;
  background: rgb(0 0 0 / .55); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 60%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s;
}
.ms-ba-btn:hover { background: color-mix(in oklab, var(--cl-ac-c) 35%, rgb(0 0 0 / .6)); }
.ms-ba-btn svg { width: 1.4rem; height: 1.4rem; }
.ms-ba-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .35rem .9rem; border-radius: 9999px;
  font-size: .85rem; font-weight: 600; color: #fff; background: rgb(0 0 0 / .6);
}
.ms-ba-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; color: rgb(var(--cl-t-muted)); }

/* ---------- Démos vidéo ---------- */
.sa-video-gallery lite-youtube { border: var(--border-w) solid var(--cl-border); border-radius: 1.25rem; overflow: hidden; }

/* ---------- Page Shop (/products) : sidebar comme le modèle ---------- */
.sa-products-page .sa-section-title { font-size: clamp(2.6rem, 6vw, 4.8rem) !important; }
.sa-products-page form { padding: .5rem; }
.sa-products-page-link { border-radius: 9999px !important; padding: .75rem 1.1rem !important; font-weight: 600 !important; }
.sa-products-page-link[aria-current="page"] {
  background: rgb(var(--cl-accent)) !important; color: rgb(var(--cl-t-accent)) !important;
}
.sa-products-page input[type="text"], .sa-products-page input[type="number"] {
  border-radius: .9rem !important; padding-top: .8rem !important; padding-bottom: .8rem !important;
}
.sa-products-page form .sa-btn { padding-top: .8rem !important; padding-bottom: .8rem !important; font-size: 1rem !important; }

/* ---------- Page produit & panier ---------- */
.sa-product-page h1 { font-weight: 800; }
[class*="sa-product-page"] .rounded-xl, .sa-cart-panel .rounded-xl { border-radius: 1.25rem; }

/* ---------- Footer ---------- */
.sa-footer .text-xl { font-weight: 800; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  .ms-card-media img, .ms-cat-media img, .ms-ba-after { transition: none; }
}

/* ---------- Before / After — exact modèle ---------- */
.ms-kicker-top { flex-direction: column; align-items: flex-start; gap: 1.6rem; color: rgb(var(--cl-accent)) !important; font-size: .95rem; letter-spacing: .14em; font-weight: 800; }
.ms-kicker-top::before { width: 64px; height: 3px; }
.ms-ba-copy .ms-ba-title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight: 800; }
.ms-ba-copy p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55; max-width: 34rem; }
.ms-ba-frame {
  padding: .9rem; border-radius: 2rem;
  background: color-mix(in oklab, var(--cl-fg-c) 3%, transparent);
  border: var(--border-w) solid var(--cl-border);
  box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--cl-ac-c) 35%, transparent);
}
.ms-ba-frame .ms-ba-box { border-radius: 1.4rem; border: 0; }
.ms-ba-btn {
  font-size: clamp(1rem, 2.2vw, 1.6rem); padding: 1.1rem 2.4rem;
  background: color-mix(in oklab, var(--cl-ac-c) 18%, rgb(20 40 55 / .55));
  border-color: color-mix(in oklab, var(--cl-ac-c) 45%, rgb(255 255 255 / .2));
}
.ms-ba-btn svg { width: 1.8rem; height: 1.8rem; }

/* ---------- Finitions premium ---------- */
.ms-hero .text-display {
  background: linear-gradient(180deg, rgb(var(--cl-t-primary)) 55%, color-mix(in oklab, rgb(var(--cl-t-primary)) 65%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-hero .text-display .mk { -webkit-text-fill-color: rgb(var(--cl-accent)); color: rgb(var(--cl-accent)); }
.ms-card, .ms-cat-card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ms-card:hover, .ms-cat-card:hover {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cl-ac-c) 40%, transparent), 0 20px 50px -20px color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
}
.ms-hero .sa-searchbar-trigger { transition: border-color .25s, box-shadow .25s; }
.ms-hero .sa-searchbar-trigger:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent); box-shadow: 0 0 0 4px var(--cl-accent-soft); }

/* ---------- FIX cartes : 3 par ligne, grandes, centrées ---------- */
.sa-products .flex.flex-wrap { justify-content: center !important; gap: 2rem !important; }
.sa-products .flex.flex-wrap > div { width: 100% !important; max-width: 460px; }
@media (min-width: 640px)  { .sa-products .flex.flex-wrap > div { width: calc((100% - 2rem) / 2) !important; } }
@media (min-width: 1024px) { .sa-products .flex.flex-wrap > div { width: calc((100% - 4rem) / 3) !important; } }
.ms-cat-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 1280px) { .ms-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-card-media, .ms-cat-media { display: flex; align-items: center; justify-content: center; }
.ms-card-media img, .ms-cat-media img { width: 100%; object-position: center center; margin: 0 auto; }
.ms-card .px-5, .ms-cat-card .px-5 { padding: .9rem 1.1rem 1.1rem; }
.ms-card .ms-card-price { font-size: 1rem; }
.ms-card h3, .ms-cat-card h3 { font-size: 1.05rem; }

/* ---------- Before / After : scan automatique ---------- */
.ms-ba-after {
  opacity: 1 !important;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(.65,0,.35,1);
}
.ms-ba-box.is-after .ms-ba-after { clip-path: inset(0 0 0 0); }
.ms-ba-scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: left 1.8s cubic-bezier(.65,0,.35,1), opacity .25s;
}
.ms-ba-box.is-after .ms-ba-scan { left: 100%; }
.ms-ba-box.is-scanning .ms-ba-scan { opacity: 1; }
.ms-ba-scan-line {
  position: absolute; top: 0; bottom: 0; left: -2px; width: 4px;
  background: #fff;
  box-shadow: 0 0 12px 3px rgb(var(--cl-accent)), 0 0 40px 10px color-mix(in oklab, var(--cl-ac-c) 70%, transparent);
}
.ms-ba-scan-line::before { content: ""; position: absolute; top: 0; bottom: 0; width: 140px; }
.ms-ba-box:not(.is-after) .ms-ba-scan-line::before { right: auto; left: 4px; background: linear-gradient(90deg, color-mix(in oklab, var(--cl-ac-c) 30%, transparent), transparent); }
.ms-ba-box.is-after .ms-ba-scan-line::before { right: 4px; left: auto; transform: none; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--cl-ac-c) 30%, transparent)); }
.ms-ba-scanfx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background-image:
    linear-gradient(color-mix(in oklab, var(--cl-ac-c) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cl-ac-c) 18%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ms-ba-box.is-scanning .ms-ba-scanfx { opacity: .6; }
.ms-ba-status {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 4;
  padding: .55rem 1.2rem; border-radius: 9999px; font-weight: 700; font-size: .9rem; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: rgb(0 0 0 / .65);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .ms-ba-after, .ms-ba-scan { transition: none; }
}

/* ---------- Feedbacks : 2 bandes défilantes ---------- */
@keyframes ms-scroll-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ms-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.ms-feedbacks .ms-kicker { color: rgb(var(--cl-accent)); }
.ms-scroll {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.ms-scroll-content { display: flex; gap: 1rem; width: max-content; }
.ms-scroll-left  .ms-scroll-content { animation: ms-scroll-left 40s linear infinite; }
.ms-scroll-right .ms-scroll-content { animation: ms-scroll-right 40s linear infinite; }
.ms-scroll-content:hover { animation-play-state: paused; }
.ms-review-card { flex-shrink: 0; width: min(400px, 82vw); }
.ms-review-card > div, .ms-review-card .rounded-xl { height: 100%; }
.ms-review-card .rounded-xl { border-radius: 1.25rem; transition: border-color .25s; }
.ms-review-card:hover .rounded-xl { border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .ms-scroll { overflow-x: auto; }
  .ms-scroll-left .ms-scroll-content, .ms-scroll-right .ms-scroll-content { animation: none; }
}

/* ---------- Persos hero : jamais agrandis au-delà de leur taille réelle (pas de flou) ---------- */
.ms-hero-char { height: auto; max-height: 92%; width: auto; max-width: 34vw; }

/* ---------- Groupes : cartes plus généreuses ---------- */
.ms-card { border-radius: 1.5rem; }
.ms-card .px-5 { padding: 1.25rem 1.5rem 1.5rem !important; }
.ms-card .ms-card-price { font-size: 1.2rem !important; }
.ms-card h3 { font-size: 1.3rem !important; margin-top: .25rem; }
.ms-card .ms-stock { font-size: .78rem; padding: .45rem .95rem; }

/* ---------- Navbar : texte des boutons sur une ligne ---------- */
.sa-navbar a, .sa-navbar button { white-space: nowrap; }

/* ---------- Badges produits (NEW, POPULAR, Save 10€...) ---------- */
.ms-badges {
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important;
  gap: .4rem; width: auto !important; max-width: 100%;
}
.ms-badges-overlay { position: absolute !important; top: .85rem !important; right: .85rem !important; left: auto !important; bottom: auto !important; z-index: 5 !important; justify-content: flex-end !important; max-width: 70%; }
.ms-badges-inline { margin: .1rem 0 .5rem !important; }
.ms-badge {
  display: inline-flex !important; align-items: center; gap: .35rem;
  width: auto !important; min-width: 0 !important; height: auto !important; max-width: max-content !important;
  margin: 0 !important; padding: .32rem .7rem !important; border-radius: 9999px !important;
  font-size: .72rem !important; font-weight: 700 !important; line-height: 1.1 !important;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: #fff !important;
  background: var(--ms-badge-bg, rgb(var(--cl-accent))) !important;
  box-shadow: 0 6px 18px -6px var(--ms-badge-bg, rgb(var(--cl-accent)));
  border: 1px solid rgb(255 255 255 / .18);
}
.ms-badge::before, .ms-badge::after { content: none !important; display: none !important; }
.ms-badge i { font-size: .8em; }
.ms-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; }
.ms-badges-overlay .ms-badge { max-width: 100% !important; }

/* ==========================================================================
   MODALES (bienvenue + upsell)
   ========================================================================== */
.ms-modal-backdrop {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto;
  background: rgb(0 0 0 / .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ms-pop-enter { transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.2); }
.ms-pop-from { opacity: 0; transform: translateY(14px) scale(.96); }
.ms-pop-to { opacity: 1; transform: none; }
.ms-modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border-radius: .9rem; color: rgb(var(--cl-t-primary));
  background: rgb(255 255 255 / .05); border: 1px solid var(--cl-border); transition: background .2s;
}
.ms-modal-close:hover { background: rgb(255 255 255 / .12); }
.ms-modal-close svg { width: 1.25rem; height: 1.25rem; }
.ms-pill-soft {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / .04);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 40%, transparent);
}
.ms-pill-soft i { color: rgb(var(--cl-accent)); }

/* ---- Bienvenue ---- */
.ms-welcome {
  position: relative; overflow: hidden; width: 100%; max-width: 30rem; text-align: center;
  padding: 2.75rem 2rem 2rem; border-radius: 2rem;
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 16%, #0c0a12), #07060a 65%);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent);
  box-shadow: 0 40px 100px -30px color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
}
.ms-welcome-glow {
  position: absolute; top: -40%; left: 50%; width: 120%; height: 80%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 35%, transparent), transparent);
}
.ms-welcome > *:not(.ms-welcome-glow):not(.ms-modal-close) { position: relative; }
.ms-welcome-big {
  margin-top: 1.25rem; font-size: clamp(4.5rem, 16vw, 6.5rem); font-weight: 800; line-height: .9; letter-spacing: -0.05em;
  color: rgb(var(--cl-accent)); text-shadow: 0 0 40px color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
}
.ms-welcome-big span { font-size: .55em; margin-left: .05em; }
.ms-welcome-title { margin-top: .5rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-welcome-title em { font-style: normal; color: rgb(var(--cl-accent)); }
.ms-welcome-text { margin-top: .6rem; color: rgb(var(--cl-t-muted)); }
.ms-code {
  margin: 1.5rem auto 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .55rem .55rem 1.25rem; border-radius: 1rem; cursor: pointer;
  border: 2px dashed color-mix(in oklab, var(--cl-ac-c) 60%, transparent); background: rgb(0 0 0 / .35);
  transition: border-color .2s, background .2s;
}
.ms-code:hover { border-color: rgb(var(--cl-accent)); background: color-mix(in oklab, var(--cl-ac-c) 8%, rgb(0 0 0 / .35)); }
.ms-code-value { font-size: 1.35rem; font-weight: 800; letter-spacing: .12em; color: rgb(var(--cl-t-primary)); font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.ms-code-action { padding: .55rem 1rem; border-radius: .7rem; font-weight: 700; font-size: .85rem; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); min-width: 5.5rem; }
.ms-welcome-cta { margin-top: 1rem; width: 100%; padding: .95rem 1.5rem !important; border-radius: 9999px; font-size: 1.05rem; display: inline-flex; justify-content: center; gap: .6rem; }
.ms-welcome-fine { margin-top: 1rem; font-size: .78rem; color: rgb(var(--cl-t-muted)); }

/* ---- Upsell ---- */
.ms-upsell {
  position: relative; width: 100%; max-width: 62rem; display: grid; grid-template-columns: 1fr; overflow: hidden;
  border-radius: 2rem; border: 1px solid color-mix(in oklab, var(--cl-fg-c) 14%, transparent);
  background: linear-gradient(135deg, #0d0b14, #07060b 60%, color-mix(in oklab, var(--cl-ac-c) 10%, #07060b));
  box-shadow: 0 40px 120px -30px color-mix(in oklab, var(--cl-ac-c) 45%, transparent);
}
@media (min-width: 900px) { .ms-upsell { grid-template-columns: .9fr 1.4fr; } }
.ms-upsell-media {
  position: relative; min-height: 14rem; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 45%, #120318), #08060c);
  border-bottom: 1px solid var(--cl-border);
}
@media (min-width: 900px) { .ms-upsell-media { border-bottom: 0; border-right: 1px solid var(--cl-border); } }
.ms-upsell-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.ms-upsell-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #07060b 5%, transparent 65%); }
.ms-upsell-media-info { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.5rem; z-index: 2; display: flex; flex-direction: column; gap: .25rem; }
.ms-upsell-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .06em; color: rgb(var(--cl-accent)); }
.ms-upsell-name { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.05; }
.ms-upsell-price { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: rgb(var(--cl-accent)); line-height: 1.1; }
.ms-upsell-price s { font-size: .45em; color: rgb(var(--cl-t-muted)); font-weight: 600; margin-left: .35rem; }
.ms-upsell-body { padding: 2rem 1.5rem 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
@media (min-width: 900px) { .ms-upsell-body { padding: 2.5rem 2.5rem 2.25rem; } }
.ms-upsell-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: rgb(var(--cl-t-primary)); padding-right: 2.5rem; }
.ms-upsell-text { font-size: 1.02rem; line-height: 1.6; color: rgb(var(--cl-t-muted)); }
.ms-upsell-features { width: 100%; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-upsell-features { grid-template-columns: repeat(3, 1fr); } }
.ms-upsell-feature {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border-radius: 1.1rem;
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border);
}
.ms-upsell-feature i { color: rgb(var(--cl-accent)); font-size: 1.15rem; margin-bottom: .2rem; }
.ms-upsell-feature strong { font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-upsell-feature span { font-size: .9rem; color: rgb(var(--cl-t-muted)); line-height: 1.4; }
.ms-upsell-actions { width: 100%; display: flex; flex-direction: column; gap: .75rem; margin-top: .25rem; }
@media (min-width: 640px) { .ms-upsell-actions { flex-direction: row; } }
.ms-upsell-add {
  flex: 1.4; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.5rem !important; border-radius: 1.1rem !important; font-size: 1.05rem;
  background-image: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #8b5cf6), rgb(var(--cl-accent))) !important;
}
.ms-upsell-skip {
  flex: 1; padding: 1rem 1.5rem; border-radius: 1.1rem; font-weight: 700; color: rgb(var(--cl-t-muted));
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: color .2s, border-color .2s;
}
.ms-upsell-skip:hover { color: rgb(var(--cl-t-primary)); border-color: color-mix(in oklab, var(--cl-fg-c) 25%, transparent); }

/* ==========================================================================
   CHECKOUT (/cart)
   ========================================================================== */
.ms-checkout .ms-pill-secure { color: rgb(var(--cl-accent)); }
.ms-checkout-title { margin-top: 1.1rem; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: rgb(var(--cl-t-primary)); }
.ms-checkout-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ms-checkout-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 2rem; } }
.ms-step, .ms-summary {
  border-radius: 1.75rem; padding: 1.5rem; border: 1px solid var(--cl-border);
  background: linear-gradient(160deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
}
@media (min-width: 768px) { .ms-step, .ms-summary { padding: 1.9rem 2rem; } }
.ms-step-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.ms-step-head h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-step-num {
  width: 2.2rem; height: 2.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .7rem;
  font-weight: 800; color: rgb(var(--cl-t-accent));
  background: linear-gradient(135deg, color-mix(in oklab, var(--cl-ac-c) 70%, #8b5cf6), rgb(var(--cl-accent)));
  box-shadow: 0 8px 20px -8px rgb(var(--cl-accent));
}
.ms-step-meta { margin-left: auto; font-size: .85rem; color: rgb(var(--cl-t-muted)); font-weight: 600; }
.ms-checkout .sa-cart-page-item { border-radius: 1.1rem; background: rgb(0 0 0 / .25); }
.ms-label { display: block; margin-bottom: .55rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-input {
  width: 100%; padding: 1rem 1.15rem; border-radius: 1rem; font-size: 1rem; color: rgb(var(--cl-t-primary));
  background: rgb(0 0 0 / .45); border: 1px solid var(--cl-border); outline: none; transition: border-color .2s, box-shadow .2s;
}
.ms-input:focus { border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 4px var(--cl-accent-soft); }
.ms-input.is-error { border-color: rgb(var(--cl-error)); }
.ms-hint { margin-top: .55rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-login-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: rgb(var(--cl-accent)); }
.ms-login-link:hover { text-decoration: underline; }
.ms-signed { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(0 0 0 / .3); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-muted)); }
.ms-signed i { color: rgb(var(--cl-success)); margin-top: .2rem; }
.ms-signed strong { color: rgb(var(--cl-t-primary)); }
.ms-pay-info { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: rgb(0 0 0 / .3); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); }
.ms-pay-icon { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .9rem; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); font-size: 1.2rem; }
.ms-pay-info strong { display: block; color: rgb(var(--cl-t-primary)); font-weight: 800; margin-bottom: .25rem; }
.ms-pay-info p { font-size: .9rem; color: rgb(var(--cl-t-muted)); line-height: 1.5; }

.ms-summary-wrap { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .ms-summary-wrap { position: sticky; top: 7rem; } }
.ms-summary-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); margin-bottom: 1.25rem; }
.ms-summary-items { display: flex; flex-direction: column; gap: .9rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cl-border); }
.ms-summary-item { display: flex; align-items: center; gap: .9rem; }
.ms-summary-item img, .ms-summary-noimg { width: 3.75rem; height: 3.75rem; flex-shrink: 0; border-radius: .85rem; object-fit: cover; border: 1px solid var(--cl-border); }
.ms-summary-noimg { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-summary-name { font-weight: 800; color: rgb(var(--cl-t-primary)); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ms-summary-variant { font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-summary-price { font-weight: 800; color: rgb(var(--cl-t-primary)); white-space: nowrap; }
.ms-summary-promo { display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0; padding: .85rem 1rem; border-radius: .9rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); background: rgb(0 0 0 / .3); border: 1px dashed color-mix(in oklab, var(--cl-ac-c) 40%, transparent); }
.ms-summary-promo i { color: rgb(var(--cl-accent)); margin-top: .15rem; }
.ms-summary-totals .ms-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; color: rgb(var(--cl-t-muted)); }
.ms-row-total { margin-top: .6rem; padding-top: 1rem !important; border-top: 1px solid var(--cl-border); align-items: baseline; }
.ms-row-total span:first-child { font-size: 1.25rem; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-row-total span:last-child { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-accent)); }
.ms-checkout-btn {
  margin-top: 1.25rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.5rem !important; border-radius: 1.1rem !important; font-size: 1.05rem; font-weight: 800;
  background-image: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #8b5cf6), rgb(var(--cl-accent))) !important;
}
.ms-summary-note { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.25rem; font-size: .9rem; line-height: 1.5; color: rgb(var(--cl-t-muted)); }
.ms-summary-note i { color: rgb(var(--cl-accent)); margin-top: .2rem; }
.ms-summary-pay { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--cl-border); }
.ms-summary-pay-label { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: rgb(var(--cl-t-muted)); }
.ms-summary-pay-label i { color: rgb(var(--cl-accent)); }

@media (prefers-reduced-motion: reduce) {
  .ms-pop-enter { transition: opacity .2s; }
  .ms-pop-from { transform: none; }
}

/* ---------- Stats : panneau fondu dans le thème ---------- */
.ms-stats-panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 2rem;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--cl-ac-c) 7%, transparent), transparent 70%),
    rgb(255 255 255 / .015);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 80px -40px color-mix(in oklab, var(--cl-ac-c) 45%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* contour dégradé : rose en haut, disparaît vers le bas */
.ms-stats-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, color-mix(in oklab, var(--cl-ac-c) 55%, transparent), rgb(255 255 255 / .06) 45%, rgb(255 255 255 / .02));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ms-stats-glow {
  position: absolute; z-index: -1; top: -60%; left: 50%; width: 70%; height: 120%; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 22%, transparent), transparent);
  pointer-events: none;
}
.ms-stats-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ms-stats-grid { grid-template-columns: repeat(4, 1fr); } }

.ms-stat {
  --c: var(--cl-accent);
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  padding: 1.9rem 1.75rem; transition: background .3s ease;
}
.ms-stat-highlight { --c: var(--cl-highlight); }
.ms-stat-blue   { --c: 59, 130, 246; }
.ms-stat-purple { --c: 139, 92, 246; }
.ms-stat-green  { --c: 34, 197, 94; }
.ms-stat-gold   { --c: 234, 179, 8; }
.ms-stat-pink   { --c: 255, 0, 243; }
.ms-stat-accent { --c: var(--cl-accent); }
/* séparateurs fins qui s'estompent */
.ms-stat + .ms-stat::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / .1), transparent);
}
@media (max-width: 1023px) and (min-width: 640px) {
  .ms-stat:nth-child(3)::before { display: none; }
  .ms-stat:nth-child(n+3)::after {
    content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .1), transparent);
  }
}
@media (max-width: 639px) {
  .ms-stat + .ms-stat::before { left: 15%; right: 15%; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .1), transparent); }
}
.ms-stat:hover { background: radial-gradient(60% 90% at 50% 50%, color-mix(in oklab, rgb(var(--c)) 9%, transparent), transparent 75%); }

.ms-stat-icon {
  position: relative; width: 3.25rem; height: 3.25rem; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 1rem; font-size: 1.2rem; color: rgb(var(--c));
  background: linear-gradient(145deg, color-mix(in oklab, rgb(var(--c)) 20%, transparent), color-mix(in oklab, rgb(var(--c)) 5%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, rgb(var(--c)) 30%, transparent), 0 10px 30px -12px rgb(var(--c));
}
.ms-stat-icon i { filter: drop-shadow(0 0 8px color-mix(in oklab, rgb(var(--c)) 60%, transparent)); }
.ms-stat-value {
  font-size: clamp(1.9rem, 2.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; white-space: nowrap;
  color: rgb(var(--cl-t-primary));
}
.ms-stat-suffix { margin-left: .04em; color: rgb(var(--c)); }
.ms-stat-label { margin-top: .5rem; font-size: .92rem; font-weight: 600; color: rgb(var(--cl-t-muted)); }

/* ==========================================================================
   DOCS (/faq)
   ========================================================================== */
.ms-docs-hero { position: relative; padding: 4.5rem 0 4rem; border-bottom: 1px solid var(--cl-border); overflow: hidden; }
.ms-docs-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 15% 0%, color-mix(in oklab, var(--cl-ac-c) 18%, transparent), transparent 70%),
              radial-gradient(40% 60% at 85% 10%, rgb(139 92 246 / .12), transparent 70%);
}
.ms-docs-hero-grid { position: relative; display: grid; gap: 2.5rem; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ms-docs-hero-grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.ms-docs-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem; border-radius: 9999px; font-weight: 700; font-size: .9rem; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); }
.ms-docs-title { margin-top: 1.5rem; font-size: clamp(2.6rem, 6.5vw, 5.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: rgb(var(--cl-t-primary)); }
.ms-docs-lead { margin-top: 1.4rem; max-width: 40rem; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.75; color: rgb(var(--cl-t-muted)); }
.ms-docs-counters { margin-top: 2rem; display: grid; gap: .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 36rem; }
.ms-docs-counter { padding: 1.1rem 1.2rem; border-radius: 1.25rem; border: 1px solid var(--cl-border); background: rgb(255 255 255 / .02); }
.ms-docs-counter strong { display: block; font-size: 1.9rem; font-weight: 800; color: rgb(var(--cl-t-primary)); line-height: 1; }
.ms-docs-counter span { display: block; margin-top: .45rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-docs-searchcard { padding: 1rem; border-radius: 2rem; border: 1px solid var(--cl-border); background: rgb(255 255 255 / .02); display: flex; flex-direction: column; gap: .9rem; }
.ms-docs-searchinfo { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 1.4rem; border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); background: color-mix(in oklab, var(--cl-ac-c) 8%, transparent); }
.ms-docs-searchicon { width: 3.2rem; height: 3.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: rgb(0 0 0 / .45); color: rgb(var(--cl-accent)); font-size: 1.15rem; }
.ms-docs-searchinfo strong { display: block; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-docs-searchinfo p { font-size: .9rem; color: rgb(var(--cl-t-muted)); }
.ms-docs-search { display: flex; align-items: center; gap: .8rem; padding: 0 1.25rem; border-radius: 1.4rem; border: 1px solid var(--cl-border); background: rgb(0 0 0 / .4); transition: border-color .2s, box-shadow .2s; }
.ms-docs-search:focus-within { border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 4px var(--cl-accent-soft); }
.ms-docs-search > i { color: rgb(var(--cl-accent)); }
.ms-docs-search input { flex: 1; min-width: 0; padding: 1.1rem 0; background: none; border: 0; outline: none; font-size: 1.05rem; font-weight: 600; color: rgb(var(--cl-t-primary)); }
.ms-docs-search input::placeholder { color: rgb(var(--cl-t-muted)); }
.ms-docs-search button { color: rgb(var(--cl-t-muted)); padding: .35rem; }

.ms-docs-grid { display: grid; gap: 2rem; padding-top: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ms-docs-grid { grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; } }
.ms-docs-side { padding: 1rem; border-radius: 2rem; border: 1px solid var(--cl-border); background: rgb(255 255 255 / .015); }
@media (min-width: 1024px) { .ms-docs-side { position: sticky; top: 7rem; max-height: calc(100vh - 8rem); overflow-y: auto; } }
.ms-docs-sidecard { padding: 1.25rem; border-radius: 1.4rem; border: 1px solid var(--cl-border); background: rgb(0 0 0 / .3); margin-bottom: 1rem; }
.ms-docs-sidecard i { color: rgb(var(--cl-accent)); font-size: 1.3rem; }
.ms-docs-sidecard strong { display: block; margin-top: .9rem; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-docs-sidecard p { margin-top: .35rem; font-size: .85rem; line-height: 1.55; color: rgb(var(--cl-t-muted)); }
.ms-docs-sidelabel { margin: 1.1rem .6rem .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: rgb(var(--cl-t-muted)); }
.ms-docs-sidelink { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .75rem; border-radius: .9rem; font-weight: 700; color: rgb(var(--cl-t-muted)); transition: background .2s, color .2s; }
.ms-docs-sidelink i { font-size: .75rem; opacity: .6; }
.ms-docs-sidelink:hover { background: rgb(255 255 255 / .04); color: rgb(var(--cl-t-primary)); }

.ms-docs-section { scroll-margin-top: 7rem; margin-bottom: 3.5rem; }
.ms-docs-sechead { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.ms-docs-secicon { width: 3.2rem; height: 3.2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; border: 1px solid var(--cl-border); background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); color: rgb(var(--cl-accent)); font-size: 1.1rem; }
.ms-docs-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--cl-accent)); }
.ms-docs-h2 { margin-top: .2rem; font-size: clamp(1.9rem, 3.5vw, 2.7rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: rgb(var(--cl-t-primary)); }
.ms-docs-sectext { margin-top: .6rem; color: rgb(var(--cl-t-muted)); }
.ms-docs-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .ms-docs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-docs-card {
  display: flex; align-items: flex-start; gap: 1.1rem; width: 100%; text-align: left;
  padding: 1.4rem 1.4rem; border-radius: 1.6rem; border: 1px solid var(--cl-border);
  background: linear-gradient(160deg, rgb(255 255 255 / .03), rgb(255 255 255 / .01));
  transition: border-color .25s, transform .25s, background .25s;
}
.ms-docs-card:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent); transform: translateY(-2px); background: color-mix(in oklab, var(--cl-ac-c) 5%, transparent); }
.ms-docs-cardicon { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); color: rgb(var(--cl-accent)); font-size: 1.05rem; }
.ms-docs-cardbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.ms-docs-cardbody strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--cl-t-primary)); }
.ms-docs-cardbody span { font-size: .95rem; line-height: 1.55; color: rgb(var(--cl-t-muted)); }
.ms-docs-cardarrow { margin-top: .3rem; color: rgb(var(--cl-t-muted)); transition: transform .2s, color .2s; }
.ms-docs-card:hover .ms-docs-cardarrow { transform: translateX(3px); color: rgb(var(--cl-accent)); }
.ms-docs-prod { align-items: center; padding: .9rem 1.2rem .9rem .9rem; }
.ms-docs-prod img { width: 5.5rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .8rem; border: 1px solid var(--cl-border); }
.ms-docs-groupname { scroll-margin-top: 7rem; margin: 1.75rem 0 .9rem; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-docs-empty { margin-bottom: 2rem; padding: 1.25rem 1.4rem; border-radius: 1.2rem; border: 1px dashed var(--cl-border); color: rgb(var(--cl-t-muted)); }
.ms-docs-empty a { color: rgb(var(--cl-accent)); font-weight: 700; }

.ms-doc-article {
  position: relative; width: 100%; max-width: 44rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 2.25rem 1.75rem 1.75rem; border-radius: 2rem; border: 1px solid var(--cl-border);
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 8%, #0c0b11), #08070b 60%);
  box-shadow: 0 40px 100px -30px color-mix(in oklab, var(--cl-ac-c) 40%, transparent);
}
@media (min-width: 768px) { .ms-doc-article { padding: 2.75rem 2.75rem 2.25rem; } }
.ms-doc-title { margin-top: .5rem; padding-right: 3rem; display: flex; align-items: center; gap: .75rem; font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: rgb(var(--cl-t-primary)); }
.ms-doc-title i { color: rgb(var(--cl-accent)); font-size: .8em; }
.ms-doc-summary { margin-top: .75rem; font-size: 1.05rem; color: rgb(var(--cl-t-muted)); }
.ms-doc-body { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cl-border); white-space: pre-line; line-height: 1.8; font-size: 1rem; color: color-mix(in oklab, rgb(var(--cl-t-primary)) 88%, transparent); }
.ms-doc-help { margin-top: 1.75rem; padding: 1.1rem 1.25rem; border-radius: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; background: rgb(0 0 0 / .35); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-muted)); font-weight: 600; }
.ms-doc-help .sa-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 9999px; }

/* ==========================================================================
   STATUS (/status)
   ========================================================================== */
.ms-status { position: relative; }
.ms-st-hero { padding: 4.5rem 0 2.25rem; text-align: center; max-width: 46rem; margin: 0 auto; }
.ms-st-live {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: rgb(var(--cl-t-primary));
  background: rgb(255 255 255 / .03); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 40%, transparent);
}
.ms-st-live-dot { position: relative; width: .55rem; height: .55rem; border-radius: 9999px; background: rgb(var(--cl-success)); }
.ms-st-live-dot .pulsating { background: rgb(var(--cl-success)); }
.ms-st-title { margin-top: 1.25rem; font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: rgb(var(--cl-t-primary)); }
.ms-st-sub { margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; color: rgb(var(--cl-t-muted)); }

.ms-st-overview {
  --sc: rgb(var(--cl-success));
  position: relative; max-width: 58rem; margin: 0 auto 1.5rem; padding: 1.6rem 1.75rem; border-radius: 1.75rem; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--sc) 10%, transparent), rgb(255 255 255 / .015) 55%);
  border: 1px solid color-mix(in oklab, var(--sc) 28%, transparent);
  box-shadow: 0 30px 80px -45px var(--sc);
}
.ms-st-ov-main { display: flex; align-items: center; gap: 1.1rem; }
.ms-st-ov-icon { width: 3.4rem; height: 3.4rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 1rem; font-size: 1.4rem; color: var(--sc); background: color-mix(in oklab, var(--sc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc) 35%, transparent); }
.ms-st-ov-title { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-st-ov-meta { margin-top: .25rem; font-size: .9rem; color: rgb(var(--cl-t-muted)); }
.ms-st-ov-bar, .ms-st-bar { display: flex; gap: 3px; height: .5rem; margin-top: 1.25rem; border-radius: 9999px; overflow: hidden; background: rgb(255 255 255 / .05); }
.ms-st-ov-bar span, .ms-st-bar span { display: block; height: 100%; border-radius: 9999px; box-shadow: 0 0 12px currentColor; }
.ms-st-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .9rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-st-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.ms-st-legend i { width: .55rem; height: .55rem; border-radius: 9999px; background: var(--sc); }
.ms-st-legend b { color: rgb(var(--cl-t-primary)); }

.ms-st-toolbar { max-width: 58rem; margin: 0 auto 2.5rem; display: flex; flex-direction: column; gap: .9rem; }
@media (min-width: 900px) { .ms-st-toolbar { flex-direction: row; align-items: center; } }
.ms-st-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-st-chip {
  --sc: rgb(var(--cl-accent));
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 9999px;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--cl-t-muted));
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: all .2s;
}
.ms-st-chip i { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--sc); box-shadow: 0 0 8px var(--sc); }
.ms-st-chip b { font-variant-numeric: tabular-nums; opacity: .7; }
.ms-st-chip:hover { color: rgb(var(--cl-t-primary)); }
.ms-st-chip.is-on { color: rgb(var(--cl-t-primary)); background: color-mix(in oklab, var(--sc) 14%, transparent); border-color: color-mix(in oklab, var(--sc) 55%, transparent); }
.ms-st-search { flex: 1; display: flex; align-items: center; gap: .75rem; padding: 0 1.1rem; border-radius: 9999px; border: 1px solid var(--cl-border); background: rgb(0 0 0 / .35); transition: border-color .2s, box-shadow .2s; }
.ms-st-search:focus-within { border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 4px var(--cl-accent-soft); }
.ms-st-search i { color: rgb(var(--cl-t-muted)); }
.ms-st-search input { flex: 1; min-width: 0; padding: .85rem 0; background: none; border: 0; outline: none; color: rgb(var(--cl-t-primary)); font-weight: 500; }
.ms-st-search input::placeholder { color: rgb(var(--cl-t-muted)); }

.ms-st-groups { max-width: 72rem; margin: 0 auto; columns: 1; column-gap: 1.25rem; }
@media (min-width: 1024px) { .ms-st-groups { columns: 2; } }
.ms-st-group {
  break-inside: avoid; margin-bottom: 1.25rem; padding: 1.4rem; border-radius: 1.75rem;
  background: linear-gradient(170deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
  border: 1px solid var(--cl-border);
}
.ms-st-ghead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ms-st-ghead h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-st-gcount { flex-shrink: 0; padding: .3rem .75rem; border-radius: 9999px; font-size: .78rem; font-weight: 800; color: var(--sc); background: color-mix(in oklab, var(--sc) 12%, transparent); font-variant-numeric: tabular-nums; }
.ms-st-group .ms-st-bar { height: .3rem; margin: .9rem 0 1.1rem; }
.ms-st-rows { display: flex; flex-direction: column; gap: .5rem; }

.ms-st-row {
  --sc: rgb(var(--cl-success));
  position: relative; display: flex; align-items: center; gap: .9rem; padding: .65rem .9rem .65rem .65rem; border-radius: 1.1rem;
  background: rgb(0 0 0 / .28); border: 1px solid transparent; transition: border-color .2s, background .2s, transform .2s;
}
.ms-st-row::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 0 3px 3px 0; background: var(--sc); box-shadow: 0 0 10px var(--sc); }
.ms-st-row:hover { border-color: color-mix(in oklab, var(--sc) 40%, transparent); background: color-mix(in oklab, var(--sc) 5%, rgb(0 0 0 / .28)); transform: translateX(2px); }
.ms-st-thumb { width: 3.6rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .6rem; border: 1px solid var(--cl-border); }
.ms-st-thumb-empty { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-st-name { flex: 1; min-width: 0; font-weight: 700; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-st-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 9999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sc); background: color-mix(in oklab, var(--sc) 12%, transparent); border: 1px solid color-mix(in oklab, var(--sc) 30%, transparent); }
.ms-st-dot { position: relative; width: .45rem; height: .45rem; border-radius: 9999px; background: var(--sc); }
.ms-st-dot .pulsating { background: var(--sc); }
.ms-st-arrow { font-size: .7rem; color: rgb(var(--cl-t-muted)); opacity: 0; transition: opacity .2s; }
.ms-st-row:hover .ms-st-arrow { opacity: 1; }
.ms-st-empty { text-align: center; padding: 2.5rem 0; color: rgb(var(--cl-t-muted)); }
@media (max-width: 480px) { .ms-st-thumb { display: none; } }

/* ---------- STATUS : couleurs du thème (seules les boules gardent la couleur du statut) ---------- */
.ms-status { --ac: rgb(var(--cl-accent)); }
.ms-st-overview {
  background: linear-gradient(135deg, color-mix(in oklab, var(--ac) 10%, transparent), rgb(255 255 255 / .015) 55%);
  border-color: color-mix(in oklab, var(--ac) 28%, transparent);
  box-shadow: 0 30px 80px -45px var(--ac);
}
.ms-st-ov-icon { color: var(--ac); background: color-mix(in oklab, var(--ac) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ac) 35%, transparent); }
.ms-st-ov-bar span, .ms-st-bar span { background: var(--ac) !important; box-shadow: 0 0 12px color-mix(in oklab, var(--ac) 60%, transparent); }
.ms-st-ov-bar span:nth-child(2), .ms-st-bar span:nth-child(2) { opacity: .55; }
.ms-st-ov-bar span:nth-child(n+3), .ms-st-bar span:nth-child(n+3) { opacity: .3; }
.ms-st-chip.is-on { background: color-mix(in oklab, var(--ac) 14%, transparent); border-color: color-mix(in oklab, var(--ac) 55%, transparent); }
.ms-st-gcount { color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, transparent); }
.ms-st-row::before { background: var(--ac); box-shadow: 0 0 10px color-mix(in oklab, var(--ac) 70%, transparent); }
.ms-st-row:hover { border-color: color-mix(in oklab, var(--ac) 40%, transparent); background: color-mix(in oklab, var(--ac) 5%, rgb(0 0 0 / .28)); }
.ms-st-pill { color: rgb(var(--cl-t-primary)); background: color-mix(in oklab, var(--ac) 12%, transparent); border-color: color-mix(in oklab, var(--ac) 35%, transparent); }
/* boules = couleur du statut (vert) */
.ms-st-dot, .ms-st-dot .pulsating, .ms-st-chip i, .ms-st-legend i { background: var(--sc); }
.ms-st-chip i { box-shadow: 0 0 8px var(--sc); }

/* ==========================================================================
   FEEDBACK (/feedback) — avis par produit
   ========================================================================== */
.ms-fb-hero { padding: 4.5rem 0 2rem; text-align: center; max-width: 46rem; margin: 0 auto; }
.ms-fb-score { margin: 2rem auto 0; display: inline-flex; align-items: center; gap: 1.1rem; padding: 1rem 1.5rem; border-radius: 1.5rem; background: rgb(255 255 255 / .02); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); box-shadow: 0 25px 70px -40px rgb(var(--cl-accent)); }
.ms-fb-score-num { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: rgb(var(--cl-t-primary)); }
.ms-fb-score-meta { margin-top: .3rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); text-align: left; }
.ms-fb-stars { display: flex; gap: .1rem; }
.ms-fb-stars span { width: 1.05rem; height: 1.05rem; color: rgb(255 255 255 / .15); }
.ms-fb-stars span.on { color: rgb(var(--cl-highlight)); }
.ms-fb-stars svg { width: 100%; height: 100%; }
.ms-fb-stars-lg span { width: 1.35rem; height: 1.35rem; }

.ms-fb-toolbar { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 900px) { .ms-fb-toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
.ms-fb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ms-fb-chips .ms-st-chip { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.ms-fb-chips .ms-st-chip b { color: rgb(var(--cl-accent)); opacity: 1; }
.ms-fb-sort { flex-shrink: 0; }
.ms-fb-loading { margin-bottom: 1.5rem; text-align: center; color: rgb(var(--cl-t-muted)); }
.ms-fb-pool { display: none; }

.ms-fb-groups { display: flex; flex-direction: column; gap: 1.75rem; }
.ms-fb-group {
  scroll-margin-top: 7rem; padding: 1.5rem; border-radius: 2rem;
  background: linear-gradient(170deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
  border: 1px solid var(--cl-border);
}
@media (min-width: 768px) { .ms-fb-group { padding: 1.9rem; } }
.ms-fb-ghead { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--cl-border); }
.ms-fb-gimg { width: 4.75rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .8rem; border: 1px solid var(--cl-border); }
.ms-fb-gimg-empty { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-fb-gname { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.025em; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fb-gstats { flex-shrink: 0; display: flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 9999px; background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); }
.ms-fb-gavg { font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-fb-gstar { width: 1rem; height: 1rem; color: rgb(var(--cl-highlight)); }
.ms-fb-gstar svg { width: 100%; height: 100%; }
.ms-fb-gcount { margin-left: .3rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
@media (max-width: 560px) { .ms-fb-gimg { display: none; } .ms-fb-gcount { display: none; } }

.ms-fb-grid { columns: 1; column-gap: 1rem; }
@media (min-width: 700px) { .ms-fb-grid { columns: 2; } }
@media (min-width: 1100px) { .ms-fb-grid { columns: 3; } }
@media (min-width: 1400px) { .ms-fb-grid { columns: 4; } }
.ms-fb-item.is-hidden { display: none; }
.ms-fb-item {
  break-inside: avoid; margin-bottom: 1rem; padding: 1.1rem 1.15rem; border-radius: 1.25rem;
  background: rgb(0 0 0 / .3); border: 1px solid var(--cl-border); transition: border-color .2s;
}
.ms-fb-item:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 40%, transparent); }
.ms-fb-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ms-fb-top time { font-size: .75rem; color: rgb(var(--cl-t-muted)); }
.ms-fb-msg { margin-top: .75rem; font-size: .95rem; line-height: 1.6; color: color-mix(in oklab, rgb(var(--cl-t-primary)) 85%, transparent); white-space: pre-line; overflow-wrap: anywhere; }
.ms-fb-img { margin-top: .75rem; width: 100%; max-height: 14rem; object-fit: cover; border-radius: .9rem; }
.ms-fb-reply { margin-top: .85rem; padding: .7rem .85rem; border-radius: .9rem; background: color-mix(in oklab, var(--cl-ac-c) 7%, transparent); border-left: 2px solid rgb(var(--cl-accent)); }
.ms-fb-reply p { font-size: .88rem; color: rgb(var(--cl-t-muted)); white-space: pre-line; }
.ms-fb-reply span { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; color: rgb(var(--cl-accent)); }
.ms-fb-foot { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--cl-border); display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: rgb(var(--cl-t-muted)); }
.ms-fb-foot i { color: rgb(var(--cl-success)); }
.ms-fb-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fb-more {
  margin: .5rem auto 0; display: flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: 9999px;
  font-weight: 700; font-size: .9rem; color: rgb(var(--cl-t-primary));
  background: rgb(255 255 255 / .03); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 40%, transparent); transition: background .2s;
}
.ms-fb-more:hover { background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); }
.ms-fb-more[hidden] { display: none; }
.ms-fb-pager { margin-top: 2rem; }

.ms-fb-more span { font-weight: 500; color: rgb(var(--cl-t-muted)); }

/* ---------- Upsell : choix de la variante ---------- */
.ms-upsell-plans { width: 100%; }
.ms-upsell-plans-label { margin-bottom: .6rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-upsell-plans-list { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.ms-upsell-plan {
  display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-radius: 1rem; text-align: left;
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: border-color .2s, background .2s;
}
.ms-upsell-plan:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 40%, transparent); }
.ms-upsell-plan.is-on { background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 3px var(--cl-accent-soft); }
.ms-upsell-plan-radio { width: 1.05rem; height: 1.05rem; flex-shrink: 0; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .25); transition: all .2s; }
.ms-upsell-plan.is-on .ms-upsell-plan-radio { border-color: rgb(var(--cl-accent)); box-shadow: inset 0 0 0 3px #0d0b14; background: rgb(var(--cl-accent)); }
.ms-upsell-plan-name { flex: 1; min-width: 0; font-weight: 700; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-upsell-plan-price { flex-shrink: 0; font-weight: 800; color: rgb(var(--cl-accent)); }
.ms-upsell { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* ==========================================================================
   SHOP (/products)
   ========================================================================== */
.ms-shop-hero { position: relative; padding: 4rem 0 2.75rem; margin-bottom: 1rem; }
.ms-shop-hero-grid {
  position: absolute; inset: -2rem -50vw 0; pointer-events: none; z-index: -1;
  background-image:
    linear-gradient(color-mix(in oklab, var(--cl-fg-c) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--cl-fg-c) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 25% 30%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 90% at 25% 30%, #000, transparent 75%);
}
.ms-shop-hero::after {
  content: ""; position: absolute; z-index: -1; top: -30%; left: -10%; width: 60%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 16%, transparent), transparent);
}
.ms-shop-crumbs { display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600; color: rgb(var(--cl-t-muted)); }
.ms-shop-crumbs a:hover { color: rgb(var(--cl-t-primary)); }
.ms-shop-crumbs i { font-size: .6rem; opacity: .6; }
.ms-shop-crumbs span { padding: .25rem .75rem; border-radius: 9999px; color: rgb(var(--cl-accent)); background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); }
.ms-shop-title { margin-top: 1.25rem; font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; letter-spacing: -0.05em; line-height: .95; color: rgb(var(--cl-t-primary)); }
.ms-shop-sub { margin-top: 1rem; max-width: 38rem; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; color: rgb(var(--cl-t-muted)); }
.ms-shop-meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; font-size: .9rem; font-weight: 600; color: rgb(var(--cl-t-muted)); }
.ms-shop-meta i { color: rgb(var(--cl-accent)); margin-right: .35rem; }
.ms-shop-count { padding: .45rem 1rem; border-radius: 9999px; color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / .04); border: 1px solid var(--cl-border); }
.ms-shop-count b { color: rgb(var(--cl-accent)); }

/* sidebar */
@media (min-width: 1024px) {
  .ms-shop .grid.gap-8.items-start { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.25rem; }
}
.ms-shop-side {
  position: relative; padding: 1.25rem; border-radius: 1.75rem;
  background: linear-gradient(170deg, color-mix(in oklab, var(--cl-ac-c) 6%, transparent), rgb(255 255 255 / .015) 45%);
  border: 1px solid var(--cl-border);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 70px -45px color-mix(in oklab, var(--cl-ac-c) 50%, transparent);
}
.ms-shop-side form > div > button, .ms-shop-side label.block {
  font-size: .75rem !important; font-weight: 800 !important; letter-spacing: .12em !important; color: rgb(var(--cl-t-muted)) !important;
}
.ms-shop-side .sa-products-page-link {
  border-radius: 9999px !important; padding-top: .7rem !important; padding-bottom: .7rem !important;
  font-weight: 700 !important; color: rgb(var(--cl-t-muted)) !important; transition: background .2s, color .2s;
}
.ms-shop-side .sa-products-page-link:hover { background: rgb(255 255 255 / .04) !important; color: rgb(var(--cl-t-primary)) !important; }
.ms-shop-side .sa-products-page-link[aria-current="page"] {
  background: rgb(var(--cl-accent)) !important; color: rgb(var(--cl-t-accent)) !important;
  box-shadow: 0 10px 28px -10px rgb(var(--cl-accent));
}
.ms-shop-side input[type="text"], .ms-shop-side input[type="number"] {
  border-radius: 1rem !important; padding-top: .8rem !important; padding-bottom: .8rem !important;
  background: rgb(0 0 0 / .35) !important; box-shadow: none !important;
}
.ms-shop-side input[type="text"]:focus, .ms-shop-side input[type="number"]:focus { border-color: rgb(var(--cl-accent)) !important; box-shadow: 0 0 0 4px var(--cl-accent-soft) !important; }
.ms-shop-side .border-t.border-theme { opacity: .6; }
.ms-shop-side .sa-btn { padding-top: .85rem !important; padding-bottom: .85rem !important; font-size: .95rem !important; font-weight: 800 !important; }

/* grille */
.ms-shop-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ms-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-shop-grid .sa-products-page-item { height: 100%; }

/* ==========================================================================
   MODALE GROUPE + cartes horizontales
   ========================================================================== */
.ms-gm {
  position: relative; overflow: hidden; padding: 1.5rem; border-radius: 2rem;
  background: linear-gradient(160deg, color-mix(in oklab, var(--cl-ac-c) 10%, #0d0b13), #08070b 55%);
  border: 1px solid color-mix(in oklab, var(--cl-fg-c) 12%, transparent);
  box-shadow: 0 40px 120px -30px color-mix(in oklab, var(--cl-ac-c) 45%, transparent);
}
@media (min-width: 640px) { .ms-gm { padding: 2rem; } }
.ms-gm-glow { position: absolute; top: -45%; left: 50%; width: 90%; height: 70%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--cl-ac-c) 22%, transparent), transparent); }
.ms-gm-head { position: relative; display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--cl-border); }
.ms-gm-thumb { width: 6rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .9rem; border: 1px solid var(--cl-border); box-shadow: 0 12px 30px -12px rgb(var(--cl-accent)); }
.ms-gm-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--cl-accent)); }
.ms-gm-title { margin-top: .15rem; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-gm-meta { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-gm-meta b { color: rgb(var(--cl-t-primary)); }
.ms-gm-meta i { color: rgb(var(--cl-accent)); margin-right: .25rem; }
.ms-gm-close { position: static; flex-shrink: 0; align-self: flex-start; }
@media (max-width: 560px) { .ms-gm-thumb { display: none; } }
.ms-gm-list { position: relative; display: flex; flex-direction: column; gap: .75rem; }

.ms-hcard {
  position: relative; display: flex; align-items: center; gap: 1.1rem; padding: .75rem; padding-right: 1.1rem; border-radius: 1.4rem;
  background: rgb(0 0 0 / .32); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-primary));
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.ms-hcard:hover {
  border-color: color-mix(in oklab, var(--cl-ac-c) 55%, transparent);
  background: color-mix(in oklab, var(--cl-ac-c) 6%, rgb(0 0 0 / .32));
  transform: translateY(-2px);
  box-shadow: 0 18px 45px -25px rgb(var(--cl-accent));
}
.ms-hcard-media { width: 38%; max-width: 13rem; flex-shrink: 0; border-radius: 1rem; overflow: hidden; border: 1px solid var(--cl-border); }
.ms-hcard-media img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .5s ease; }
.ms-hcard:hover .ms-hcard-media img { transform: scale(1.05); }
.ms-hcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.ms-hcard-name { font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 800; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-hcard .ms-badges-inline { margin: 0 !important; }
.ms-hcard-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ms-hcard-price { display: flex; align-items: baseline; gap: .45rem; }
.ms-hcard-from { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-hcard-price strong { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; color: rgb(var(--cl-accent)); letter-spacing: -0.02em; }
.ms-hcard-price s { font-size: .85rem; color: rgb(var(--cl-t-muted)); }
.ms-hcard-stock { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; color: rgb(var(--cl-t-muted)); background: rgb(255 255 255 / .04); border: 1px solid var(--cl-border); }
.ms-hcard-stock i { width: .45rem; height: .45rem; border-radius: 9999px; background: rgb(var(--cl-success)); box-shadow: 0 0 8px rgb(var(--cl-success)); }
.ms-hcard-stock.is-out i { background: rgb(var(--cl-error)); box-shadow: 0 0 8px rgb(var(--cl-error)); }
.ms-hcard-go {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px;
  color: rgb(var(--cl-accent)); background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent);
  transition: background .25s, color .25s, transform .25s;
}
.ms-hcard:hover .ms-hcard-go { background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent)); transform: translateX(3px); }
@media (max-width: 480px) { .ms-hcard-go { display: none; } .ms-hcard-media { width: 34%; } }

/* ==========================================================================
   PAGE PRODUIT — conversion
   ========================================================================== */
/* barre promo */
.ms-promo { 
  position: relative; 
  z-index: 45; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: linear-gradient(90deg, #031b4e 0%, #0070f3 50%, #031b4e 100%) !important; 
  border-bottom: 1px solid rgba(0, 112, 243, 0.4);
  box-shadow: 0 4px 20px rgba(0, 112, 243, 0.25);
}
.ms-promo-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .9rem; padding: .55rem 3rem; font-size: .85rem; font-weight: 600; color: #fff; }
.ms-promo-label { padding: .18rem .7rem; border-radius: 9999px; background: #0070f3 !important; color: #ffffff !important; font-size: .7rem; font-weight: 800; letter-spacing: .08em; box-shadow: 0 0 10px rgba(0, 112, 243, 0.6); }
.ms-promo-text b { letter-spacing: .08em; color: #38bdf8; font-weight: 800; }
.ms-promo-ends { opacity: .85; font-weight: 700; color: #bae6fd; }
.ms-promo-timer { display: flex; gap: .3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-promo-timer span { padding: .15rem .5rem; border-radius: .4rem; background: rgba(3, 7, 18, 0.6); border: 1px solid rgba(0, 112, 243, 0.4); color: #38bdf8; }
.ms-promo-close { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 9999px; color: #fff; opacity: .7; }
.ms-promo-close:hover { opacity: 1; background: rgba(0, 112, 243, 0.3); }
@media (max-width: 640px) { .ms-promo-ends, .ms-promo-sec { display: none; } .ms-promo-in { font-size: .78rem; padding: .5rem 2.5rem .5rem 1rem; } }

/* pill Discord navbar */
.ms-discord-pill { display: none; align-items: center; gap: .45rem; height: 2.25rem; padding: 0 .9rem; border-radius: 9999px; font-size: .8rem; font-weight: 700; color: rgb(var(--cl-t-primary)); background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); white-space: nowrap; }
.ms-discord-pill i { color: #8b9cff; }
.ms-discord-dot { display: none; width: .45rem; height: .45rem; border-radius: 9999px; background: rgb(var(--cl-success)); box-shadow: 0 0 8px rgb(var(--cl-success)); }
.ms-discord-pill.has-count .ms-discord-dot { display: inline-block; }
@media (min-width: 1280px) { .ms-discord-pill { display: inline-flex; } }

/* en-tête produit */
.ms-pp-title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; color: rgb(var(--cl-t-primary)); }
.ms-pp-rating { margin-top: .7rem; display: inline-flex; align-items: center; gap: .55rem; font-size: .95rem; color: rgb(var(--cl-t-muted)); }
.ms-pp-rating b { color: rgb(var(--cl-t-primary)); }
.ms-pp-rating span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.ms-pp-stars { display: inline-flex; gap: .12rem; color: rgb(var(--cl-highlight)); font-size: .9rem; }
.ms-pp-stars .is-off { color: rgb(255 255 255 / .18); }
.ms-pp-head .status { padding: .45rem .95rem; border-radius: 9999px; background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); gap: .6rem !important; }
.ms-pp-head .status > div { width: .6rem !important; height: .6rem !important; }
.ms-pp-head .status span { font-size: .8rem !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 800 !important; }

/* bloc achat */
.ms-pp-buy > .p-6.rounded-xl, .ms-pp-buy form > .p-6.rounded-xl {
  border-radius: 1.6rem !important;
  background: linear-gradient(170deg, color-mix(in oklab, var(--cl-ac-c) 6%, transparent), rgb(255 255 255 / .015) 45%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 70px -45px color-mix(in oklab, var(--cl-ac-c) 55%, transparent) !important;
}
.ms-pp-buy .text-h2 { font-weight: 800; color: rgb(var(--cl-accent)); letter-spacing: -0.03em; }

/* variantes en cartes */
.ms-vgrid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: .5rem; }
.ms-vcard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1rem; border-radius: 1.1rem; text-align: left;
  background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); color: rgb(var(--cl-t-primary));
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ms-vcard:hover:not(:disabled) { border-color: color-mix(in oklab, var(--cl-ac-c) 45%, transparent); }
.ms-vcard.is-on { background: color-mix(in oklab, var(--cl-ac-c) 10%, transparent); border-color: rgb(var(--cl-accent)); box-shadow: 0 0 0 3px var(--cl-accent-soft); }
.ms-vcard:disabled { opacity: .45; cursor: not-allowed; }
.ms-vtag { position: absolute; top: -.6rem; right: .75rem; padding: .15rem .6rem; border-radius: 9999px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); box-shadow: 0 6px 16px -6px rgb(var(--cl-accent)); }
.ms-vtag.is-gold { background: rgb(var(--cl-highlight)); color: #1a1400; box-shadow: 0 6px 16px -6px rgb(var(--cl-highlight)); }
.ms-vhead { display: flex; align-items: center; gap: .55rem; min-width: 0; width: 100%; }
.ms-vradio { width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 9999px; border: 2px solid rgb(255 255 255 / .28); transition: all .2s; }
.ms-vcard.is-on .ms-vradio { border-color: rgb(var(--cl-accent)); background: rgb(var(--cl-accent)); box-shadow: inset 0 0 0 3px #0d0b14; }
.ms-vimg { width: 2rem; height: 2rem; border-radius: .5rem; object-fit: cover; }
.ms-vname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-vprice { display: flex; align-items: baseline; gap: .45rem; }
.ms-vprice b { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--cl-accent)); }
.ms-vprice s { font-size: .8rem; color: rgb(var(--cl-t-muted)); }
.ms-vsub { font-size: .75rem; color: rgb(var(--cl-t-muted)); }
.ms-vsave { padding: .1rem .5rem; border-radius: 9999px; font-size: .7rem; font-weight: 800; color: rgb(var(--cl-success)); background: color-mix(in oklab, rgb(var(--cl-success)) 12%, transparent); }
.ms-vdesc { font-size: .75rem; color: rgb(var(--cl-t-muted)); white-space: pre-line; }
.ms-vstock { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: rgb(var(--cl-t-muted)); }
.ms-vstock i { width: .4rem; height: .4rem; border-radius: 9999px; background: rgb(var(--cl-success)); }
.ms-vstock.is-out i { background: rgb(var(--cl-error)); }
@media (max-width: 380px) { .ms-vgrid { grid-template-columns: 1fr; } }

/* boutons d'achat plus gros */
.ms-pp-buy form .sa-btn-primary, .ms-pp-buy form button[type="submit"] { min-height: 3.4rem; border-radius: 1.1rem !important; font-size: 1.02rem; font-weight: 800 !important; }
.ms-pp-buy form button[type="submit"] { background-image: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #8b5cf6), rgb(var(--cl-accent))) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 14px 36px -14px rgb(var(--cl-accent)); }

/* garanties + paiement */
.ms-buy-extras { display: flex; flex-direction: column; gap: .75rem; margin: -1rem 0 2rem; }
.ms-trustrow { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-trustrow span { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem .5rem; border-radius: .9rem; font-size: .78rem; font-weight: 700; text-align: center; background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); }
.ms-trustrow i { color: rgb(var(--cl-accent)); }
.ms-paybox { padding: .9rem 1rem; border-radius: 1rem; background: rgb(255 255 255 / .02); border: 1px solid var(--cl-border); }
.ms-paychips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ms-paychips span { padding: .3rem .7rem; border-radius: .6rem; font-size: .75rem; font-weight: 700; background: rgb(255 255 255 / .06); }
.ms-paybox p { margin-top: .6rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); }

/* démo + FAQ */
.ms-pp-block { margin-top: 3rem; }
.ms-pp-h2 { margin: .3rem 0 1.25rem; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; color: rgb(var(--cl-t-primary)); }
.ms-pp-video { border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--cl-border); box-shadow: 0 30px 70px -40px rgb(var(--cl-accent)); }
.ms-pp-video lite-youtube { aspect-ratio: 16/9; }
.ms-faq { display: flex; flex-direction: column; gap: .6rem; }
.ms-faq-item { border-radius: 1.1rem; background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); overflow: hidden; transition: border-color .2s; }
.ms-faq-item.is-open { border-color: color-mix(in oklab, var(--cl-ac-c) 45%, transparent); }
.ms-faq-q { width: 100%; min-height: 3.5rem; padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; font-weight: 700; color: rgb(var(--cl-t-primary)); }
.ms-faq-q i { color: rgb(var(--cl-accent)); transition: transform .25s; }
.ms-faq-item.is-open .ms-faq-q i { transform: rotate(45deg); }
.ms-faq-a { padding: 0 1.25rem 1.1rem; font-size: .95rem; line-height: 1.7; color: rgb(var(--cl-t-muted)); white-space: pre-line; }

/* barre d'achat fixe mobile */
.ms-stickybuy { display: none; }
@media (max-width: 1023px) {
  .ms-stickybuy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: rgb(8 7 11 / .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent);
    box-shadow: 0 -20px 40px -20px color-mix(in oklab, var(--cl-ac-c) 50%, transparent);
  }
  .ms-stickybuy[style*="display: none"] { display: none !important; }
  .ms-stickybuy-info { display: flex; flex-direction: column; min-width: 0; }
  .ms-stickybuy-info span { font-size: .72rem; color: rgb(var(--cl-t-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; }
  .ms-stickybuy-info b { font-size: 1.25rem; font-weight: 800; color: rgb(var(--cl-accent)); }
  .ms-stickybuy-btn { flex: 1; height: 3.2rem; border-radius: 1rem; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(120deg, color-mix(in oklab, var(--cl-ac-c) 70%, #8b5cf6), rgb(var(--cl-accent))); }
  .ms-stickybuy-btn:disabled { opacity: .5; }
  body.sa-tpl-product { padding-bottom: 5.5rem; }
}

/* promo dans le header collant : elle se replie quand on défile */
.sa-header .ms-promo { transition: margin-top .3s ease; }

/* ---------- Checkout : frequently bought together ---------- */
.ms-fbt { margin-top: 1.5rem; }
.ms-fbt-label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: rgb(var(--cl-t-muted)); margin-bottom: .75rem; }
.ms-fbt-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-fbt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-fbt-card { display: flex; align-items: center; gap: .8rem; padding: .7rem; border-radius: 1.1rem; background: rgb(255 255 255 / .03); border: 1px solid var(--cl-border); transition: border-color .2s; }
.ms-fbt-card:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 45%, transparent); }
.ms-fbt-card img, .ms-fbt-noimg { width: 5rem; aspect-ratio: 16/9; flex-shrink: 0; object-fit: cover; border-radius: .6rem; border: 1px solid var(--cl-border); }
.ms-fbt-noimg { display: grid; place-items: center; background: var(--cl-accent-soft); color: rgb(var(--cl-accent)); }
.ms-fbt-name { font-weight: 700; font-size: .9rem; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fbt-price { font-size: .8rem; color: rgb(var(--cl-t-muted)); }
.ms-fbt-price b { color: rgb(var(--cl-accent)); }
.ms-fbt-add { flex-shrink: 0; min-width: 4.75rem; height: 2.75rem; padding: 0 .9rem; border-radius: .8rem; font-size: .85rem; font-weight: 800; color: rgb(var(--cl-t-accent)); background: rgb(var(--cl-accent)); box-shadow: 0 8px 22px -10px rgb(var(--cl-accent)); transition: filter .2s; }
.ms-fbt-add:hover { filter: brightness(1.1); }
.ms-fbt-add:disabled { opacity: .6; }

/* ---------- Checkout : paiement sans frais ---------- */
.ms-nofee { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 1.1rem; background: color-mix(in oklab, rgb(var(--cl-success)) 8%, transparent); border: 1px solid color-mix(in oklab, rgb(var(--cl-success)) 35%, transparent); }
.ms-nofee-icon { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .9rem; font-size: 1.15rem; color: rgb(var(--cl-success)); background: color-mix(in oklab, rgb(var(--cl-success)) 15%, transparent); }
.ms-nofee strong { display: block; font-weight: 800; color: rgb(var(--cl-t-primary)); margin-bottom: .25rem; }
.ms-nofee p { font-size: .9rem; line-height: 1.5; color: rgb(var(--cl-t-muted)); }
.mt-3 { margin-top: .75rem; }

/* ---------- Checkout : réassurance ---------- */
.ms-trustbox { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: rgb(0 0 0 / .35); border: 1px solid var(--cl-border); }
.ms-trustbox-top { display: flex; align-items: center; gap: .6rem; }
.ms-trustbox-top b { font-size: 1.5rem; font-weight: 800; color: rgb(var(--cl-t-primary)); }
.ms-trustbox-top a { margin-left: auto; font-size: .8rem; font-weight: 700; color: rgb(var(--cl-accent)); }
.ms-trustbox-quote { margin-top: .7rem; font-size: .9rem; line-height: 1.55; color: rgb(var(--cl-t-primary)); }
.ms-trustbox-meta { margin-top: .4rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); }
.ms-trustbox-meta i { color: rgb(var(--cl-success)); }
.ms-helpbox { margin-top: .9rem; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 1rem; color: rgb(var(--cl-t-primary)); background: rgb(88 101 242 / .1); border: 1px solid rgb(88 101 242 / .45); transition: background .2s; }
.ms-helpbox:hover { background: rgb(88 101 242 / .18); }
.ms-helpbox > i:first-child { font-size: 1.4rem; color: #8b9cff; }
.ms-helpbox span { flex: 1; font-size: .9rem; line-height: 1.35; }
.ms-helpbox small { color: rgb(var(--cl-t-muted)); font-size: .8rem; }
.ms-helpbox > i:last-child { color: rgb(var(--cl-t-muted)); font-size: .8rem; }

/* ---------- Solde : badge bonus sur les recharges ---------- */
.ms-bonus-tag { display: block; margin: .35rem auto 0; width: max-content; padding: .1rem .5rem; border-radius: 9999px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: rgb(var(--cl-success)); background: color-mix(in oklab, rgb(var(--cl-success)) 14%, transparent); }

/* Titre section avis (accueil) */
.ms-feedbacks .ms-fb-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; color: rgb(var(--cl-t-primary)); }
.ms-feedbacks .ms-fb-sub { font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgb(var(--cl-t-muted)); }

/* Cartes produit : "From €X" au lieu d'une fourchette coupée */
.ms-card-from { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--cl-t-muted)); }
.ms-card-pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.ms-card-pricerow .ms-card-price { white-space: nowrap; }
.ms-hcard-price strong { white-space: nowrap; }
.ms-hcard-row { flex-wrap: wrap; row-gap: .4rem; }

/* ---------- Docs : guides d'installation par produit ---------- */
.ms-guide { padding: 0 !important; overflow: hidden auto; max-width: 46rem; }
.ms-guide-banner { position: relative; height: 11rem; overflow: hidden; background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--cl-ac-c) 40%, #1a0018), #0b0710 75%); }
.ms-guide-banner img { width: 100%; height: 100%; object-fit: cover; }
.ms-guide-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, #0b0a10 100%); }
.ms-guide-inner { padding: 1.5rem 1.75rem 2rem; }
.ms-guide .ms-doc-title { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.ms-guide-steps { margin: 1.25rem 0 .5rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; padding: .6rem; border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--cl-ac-c) 35%, transparent); background: rgb(255 255 255 / .02); }
.ms-guide-steps button { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: .7rem; font-size: .8rem; font-weight: 700; text-align: left; color: rgb(var(--cl-t-primary)); transition: background .2s; }
.ms-guide-steps button:hover { background: color-mix(in oklab, var(--cl-ac-c) 12%, transparent); }
.ms-guide-steps b { width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9999px; font-size: .75rem; color: #fff; background: linear-gradient(135deg, #a855f7, rgb(var(--cl-accent))); }
.ms-guide-h3 { margin: 1.6rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--cl-border); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--cl-t-primary)); scroll-margin-top: 1rem; }
.ms-guide-steps + .ms-guide-h3 { border-top: 0; }
.ms-guide-list, .ms-guide-ol { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.2rem; font-size: .95rem; line-height: 1.6; color: rgb(var(--cl-t-muted)); }
.ms-guide-list { list-style: disc; }
.ms-guide-ol { list-style: decimal; }
.ms-guide-list li::marker, .ms-guide-ol li::marker { color: rgb(var(--cl-accent)); font-weight: 800; }
.ms-guide-p { font-size: .95rem; line-height: 1.65; color: rgb(var(--cl-t-muted)); margin-bottom: .5rem; }
.ms-guide a:not(.sa-btn):not(.ms-guide-ghost) { color: rgb(var(--cl-accent)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ms-guide-note { margin-top: 1rem; display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: 1rem; background: color-mix(in oklab, var(--cl-ac-c) 8%, transparent); border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); font-size: .9rem; line-height: 1.6; color: rgb(var(--cl-t-primary)); white-space: pre-line; }
.ms-guide-note i { color: rgb(var(--cl-accent)); margin-top: .2rem; }
.ms-guide-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.ms-guide-actions .sa-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: 0 1.25rem; border-radius: .9rem; font-weight: 800; }
.ms-guide-ghost { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 700; color: rgb(var(--cl-t-muted)); }
.ms-guide-ghost:hover { color: rgb(var(--cl-t-primary)); }
@media (max-width: 560px) { .ms-guide-steps { grid-template-columns: 1fr; } .ms-guide-inner { padding: 1.25rem 1.1rem 1.5rem; } .ms-guide-banner { height: 8rem; } }
.ms-guide .ms-modal-close { z-index: 3; background: rgb(0 0 0 / .45); backdrop-filter: blur(6px); }
.ms-guide-h2 { margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--cl-border); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--cl-t-primary)); }
.ms-guide-h2 + .ms-guide-h3 { border-top: 0; padding-top: 0; }
.ms-guide-ol b { color: rgb(var(--cl-t-primary)); }

/* ==========================================================================
   NOTIFICATIONS (social proof) — bas à gauche
   ========================================================================== */
.ms-proof {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 45;
  width: min(21.5rem, calc(100vw - 2rem));
  padding: .85rem 2.4rem .85rem .85rem;
  border-radius: 1.15rem;
  background: linear-gradient(140deg, color-mix(in oklab, var(--cl-ac-c) 14%, #0c0910) 0%, #0a0810 60%);
  border: 1px solid color-mix(in oklab, var(--cl-ac-c) 38%, transparent);
  box-shadow: 0 24px 55px -25px rgb(0 0 0 / .9), 0 0 32px -14px color-mix(in oklab, var(--cl-ac-c) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  overflow: hidden;
}
.ms-proof.is-right { left: auto; right: 1rem; }
.ms-proof::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--cl-ac-c) 18%, transparent), transparent 62%);
}

.ms-proof-in { animation: ms-proof-in .4s cubic-bezier(.2,.9,.25,1) both; }
.ms-proof-out { animation: ms-proof-out .3s ease-in both; }
@keyframes ms-proof-in { from { opacity: 0; transform: translateX(-14px) translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ms-proof-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
.ms-proof.is-right.ms-proof-in { animation-name: ms-proof-in-r; }
@keyframes ms-proof-in-r { from { opacity: 0; transform: translateX(14px) translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }

.ms-proof-row { position: relative; display: flex; align-items: center; gap: .8rem; }

.ms-proof-media {
  position: relative; width: 3.4rem; height: 3.4rem; flex-shrink: 0;
  display: grid; place-items: center; overflow: visible;
  border-radius: .85rem;
  background: color-mix(in oklab, var(--cl-ac-c) 14%, transparent);
  color: rgb(var(--cl-accent));
}
.ms-proof-media img { width: 100%; height: 100%; object-fit: cover; border-radius: .85rem; border: 1px solid color-mix(in oklab, var(--cl-ac-c) 30%, transparent); }
.ms-proof-dot {
  position: absolute; right: -.2rem; bottom: -.2rem; width: .72rem; height: .72rem; border-radius: 9999px;
  background: rgb(var(--cl-success)); border: 2px solid #0a0810;
  box-shadow: 0 0 0 0 color-mix(in oklab, rgb(var(--cl-success)) 70%, transparent);
  animation: ms-proof-pulse 2.2s ease-out infinite;
}
@keyframes ms-proof-pulse { 70% { box-shadow: 0 0 0 .4rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.ms-proof-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ms-proof-kicker {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--cl-accent));
}
.ms-proof-kicker .fa-star { color: rgb(var(--cl-highlight)); }
.ms-proof-name { font-size: .95rem; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--cl-t-primary)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-proof-meta { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); overflow: hidden; white-space: nowrap; }
.ms-proof-sep { opacity: .5; }
.ms-proof-stars { display: inline-flex; gap: .06rem; font-size: .66rem; color: rgb(var(--cl-highlight)); }
.ms-proof-stars .is-off { color: rgb(255 255 255 / .18); }

.ms-proof-x {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 9999px; color: rgb(var(--cl-t-muted)); transition: color .2s, background .2s;
}
.ms-proof-x svg { width: .75rem; height: .75rem; }
.ms-proof-x:hover { color: rgb(var(--cl-t-primary)); background: rgb(255 255 255 / .08); }

.ms-proof-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .06); }
.ms-proof-bar i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, color-mix(in oklab, var(--cl-ac-c) 60%, #a855f7), rgb(var(--cl-accent))); animation: ms-proof-run linear forwards; }
.ms-proof-bar i.is-paused { animation-play-state: paused; }
@keyframes ms-proof-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 640px) {
  .ms-proof { bottom: .75rem; left: .75rem; right: .75rem; width: auto; padding: .7rem 2.2rem .7rem .7rem; }
  .ms-proof.is-right { right: .75rem; left: .75rem; }
  .ms-proof-media { width: 2.9rem; height: 2.9rem; }
  .ms-proof-name { font-size: .88rem; }
}
body.sa-tpl-product .ms-proof { bottom: 5.75rem; }
@media (min-width: 1024px) { body.sa-tpl-product .ms-proof { bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ms-proof-in, .ms-proof-out, .ms-proof-dot, .ms-proof-bar i { animation: none !important; } }
.ms-proof-row { text-decoration: none; cursor: pointer; }
.ms-proof:hover { border-color: color-mix(in oklab, var(--cl-ac-c) 70%, transparent); box-shadow: 0 26px 60px -22px rgb(0 0 0 / .9), 0 0 42px -12px color-mix(in oklab, var(--cl-ac-c) 95%, transparent), inset 0 1px 0 rgb(255 255 255 / .08); }
.ms-proof:hover .ms-proof-media img { filter: brightness(1.06); }
.ms-proof-go { flex-shrink: 0; margin-right: .1rem; font-size: .75rem; color: rgb(var(--cl-t-muted)); transition: transform .2s, color .2s; }
.ms-proof:hover .ms-proof-go { transform: translateX(3px); color: rgb(var(--cl-accent)); }
@media (max-width: 640px) { .ms-proof-go { display: none; } }

/* October Sale campaign */
.ms-sale-countdown { margin: 1rem auto 0; display: flex; align-items: center; justify-content: center; gap: .65rem; padding: .65rem .9rem; border: 1px solid rgb(var(--cl-accent) / .22); border-radius: .75rem; background: rgb(var(--cl-accent) / .07); font-size: .72rem; letter-spacing: .08em; }
.ms-sale-countdown span { opacity: .65; font-weight: 700; }
.ms-sale-countdown strong { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.ms-sale-countdown b { color: rgb(var(--cl-accent)); }
@media (max-width: 640px) { .ms-sale-countdown { gap: .4rem; font-size: .65rem; } }


.ms-gp { padding-top: 1rem; }
.ms-gp-back { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--cl-border); font-size: .875rem; font-weight: 600; transition: background .3s; }
.ms-gp-back:hover { background: rgb(255 255 255 / .06); }
.ms-gp-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ms-gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ms-gp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ms-gp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-gp-item { height: 100%; }


/* ===== Nom du produit entièrement visible (le badge stock passe dessous) ===== */
.ms-card-namerow { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.ms-card-name { min-width: 0; max-width: 100%; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }

/* ===== Modern Solid Responsive Cart Drawer ===== */
.ms-cart-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99998;
  cursor: pointer;
}

.ms-cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  background-color: #0c101b;
  background: #0c101b;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 112, 243, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  user-select: none;
}

.ms-cart-backdrop[style*="display: none"],
.ms-cart-panel[style*="display: none"] {
  display: none !important;
}

.translate-x-full {
  transform: translateX(100%) !important;
}

.translate-x-0 {
  transform: translateX(0) !important;
}

@media (max-width: 480px) {
  .ms-cart-panel {
    width: 100vw !important;
    border-left: none !important;
  }
}

.ms-cart-panel * {
  box-sizing: border-box;
}


/* ===== Shop Page Sidebar & Grid Layout (Matching Screenshot) ===== */
.ms-shop-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem 5rem 1.5rem !important;
  width: 100% !important;
}

.ms-shop-header {
  margin-bottom: 2.5rem !important;
}

.ms-shop-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  margin-bottom: 1rem !important;
}

.ms-shop-breadcrumb a {
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.ms-shop-breadcrumb a:hover {
  color: #ffffff !important;
}

.ms-shop-breadcrumb-active {
  background: rgba(0, 112, 243, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(0, 112, 243, 0.4) !important;
  padding: 0.15rem 0.65rem !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}

.ms-shop-main-title {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 0 0 0.75rem 0 !important;
}

.ms-shop-subtitle {
  font-size: 1.05rem !important;
  color: #94a3b8 !important;
  max-width: 680px !important;
  line-height: 1.5 !important;
  margin: 0 0 1.5rem 0 !important;
}

.ms-shop-badges-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1.25rem !important;
  font-size: 0.85rem !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

.ms-shop-pill-count {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
}

.ms-shop-badge-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.ms-shop-layout {
  display: flex !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.ms-shop-sidebar {
  width: 300px !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 90px !important;
  background: #0e1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.ms-shop-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ms-shop-content-top {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-bottom: 1.25rem !important;
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.ms-shop-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.ms-shop-input-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ms-shop-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.ms-shop-input-wrapper i {
  position: absolute !important;
  left: 1rem !important;
  color: #64748b !important;
  font-size: 0.85rem !important;
  pointer-events: none !important;
}

.ms-shop-input {
  width: 100% !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  background: #080c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.85rem !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.ms-shop-input:focus {
  border-color: #0070f3 !important;
  box-shadow: 0 0 15px rgba(0, 112, 243, 0.25) !important;
}

.ms-shop-price-inputs {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.ms-shop-price-box {
  position: relative !important;
  flex: 1 1 0 !important;
}

.ms-shop-price-box input {
  width: 100% !important;
  padding: 0.7rem 1.75rem 0.7rem 0.85rem !important;
  background: #080c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.85rem !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  outline: none !important;
}

.ms-shop-price-box span {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

.ms-shop-checkbox-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  font-size: 0.82rem !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.ms-shop-checkbox-row input {
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  accent-color: #0070f3 !important;
  cursor: pointer !important;
}

.ms-shop-apply-btn {
  width: 100% !important;
  padding: 0.85rem !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0070f3 0%, #0052cc 100%) !important;
  box-shadow: 0 8px 25px rgba(0, 112, 243, 0.4) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s !important;
}

.ms-shop-apply-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 112, 243, 0.6) !important;
}

.ms-shop-clear-btn {
  width: 100% !important;
  padding: 0.75rem !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.ms-shop-clear-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.ms-shop-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

@media (max-width: 1200px) {
  .ms-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 960px) {
  .ms-shop-layout {
    flex-direction: column !important;
  }
  .ms-shop-sidebar {
    width: 100% !important;
    position: static !important;
  }
  .ms-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .ms-shop-grid {
    grid-template-columns: 1fr !important;
  }
}

.ms-shop-card {
  background: #0e1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
}

.ms-shop-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0, 112, 243, 0.5) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 112, 243, 0.25) !important;
}

.ms-shop-card-media {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #050811 !important;
}

.ms-shop-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ms-shop-card:hover .ms-shop-card-media img {
  transform: scale(1.06) !important;
}

.ms-shop-card-tag {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  background: rgba(0, 112, 243, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

.ms-shop-card-body {
  padding: 1.25rem 1.4rem 1.4rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  flex: 1 1 auto !important;
}

.ms-shop-card-price {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.ms-shop-card-name {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin: 0.2rem 0 0.6rem 0 !important;
}

.ms-shop-card-badge,
.ms-stock {
  align-self: flex-start !important;
  background: rgba(0, 112, 243, 0.15) !important;
  border: 1px solid rgba(0, 112, 243, 0.5) !important;
  color: #38bdf8 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 14px rgba(0, 112, 243, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.ms-shop-card:hover .ms-shop-card-badge,
.ms-card:hover .ms-stock {
  background: rgba(0, 112, 243, 0.3) !important;
  border-color: #0070f3 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(0, 112, 243, 0.5) !important;
}

.ms-cart-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

.ms-cart-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 112, 243, 0.15) !important;
  border: 1px solid rgba(0, 112, 243, 0.4) !important;
  color: #38bdf8 !important;
  font-size: 1.1rem !important;
}

.ms-cart-title-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.ms-cart-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}

.ms-cart-count-badge {
  background: #0070f3 !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  padding: 0.15rem 0.55rem !important;
  border-radius: 9999px !important;
}

.ms-cart-subtitle {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  margin: 0.15rem 0 0 0 !important;
  font-weight: 500 !important;
}

.ms-cart-close-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ms-cart-close-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

.ms-cart-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 1.25rem 1.5rem !important;
  background: #0c101b !important;
}

.ms-cart-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 4rem 1rem !important;
}

.ms-cart-empty-icon {
  width: 76px !important;
  height: 76px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #141b2a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 35px rgba(0, 112, 243, 0.15) !important;
  margin-bottom: 1.25rem !important;
  font-size: 2rem !important;
  color: #38bdf8 !important;
}

.ms-cart-empty-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.ms-cart-empty-desc {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin: 0.5rem 0 1.5rem 0 !important;
  max-width: 260px !important;
  line-height: 1.5 !important;
}

.ms-cart-browse-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.8rem 1.75rem !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0070f3 0%, #0051b3 100%) !important;
  box-shadow: 0 8px 25px rgba(0, 112, 243, 0.4) !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ms-cart-browse-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 12px 30px rgba(0, 112, 243, 0.6) !important;
}

.ms-cart-items-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

.ms-cart-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.95rem 1rem !important;
  border-radius: 16px !important;
  background: #121827 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 0.85rem !important;
  transition: border-color 0.2s ease !important;
}

.ms-cart-item:hover {
  border-color: rgba(0, 112, 243, 0.4) !important;
}

.ms-cart-item-details {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.ms-cart-item-thumb {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #000 !important;
  flex-shrink: 0 !important;
}

.ms-cart-item-info {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.ms-cart-item-name {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ms-cart-item-price {
  font-size: 0.82rem !important;
  font-family: monospace, monospace !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  margin: 0.2rem 0 0 0 !important;
}

.ms-cart-item-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

.ms-cart-qty-wrap {
  display: flex !important;
  align-items: center !important;
  background: #080c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 0.15rem !important;
}

.ms-cart-qty-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.ms-cart-qty-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.ms-cart-qty-num {
  padding: 0 0.5rem !important;
  font-size: 0.8rem !important;
  font-family: monospace, monospace !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.ms-cart-remove-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ms-cart-remove-btn:hover {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.ms-cart-footer {
  padding: 1.25rem 1.5rem !important;
  background: #101524 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.ms-cart-totals-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.ms-cart-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
}

.ms-cart-row-strong {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ms-cart-total-val {
  font-size: 1.25rem !important;
  color: #38bdf8 !important;
  font-family: monospace, monospace !important;
  font-weight: 800 !important;
}

.ms-cart-checkout-btn {
  width: 100% !important;
  padding: 0.95rem 1rem !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0070f3 0%, #0052cc 100%) !important;
  box-shadow: 0 10px 25px rgba(0, 112, 243, 0.4) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ms-cart-checkout-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(0, 112, 243, 0.6) !important;
}

.ms-cart-checkout-btn:active {
  transform: translateY(0) !important;
}

.ms-cart-body::-webkit-scrollbar {
  width: 6px;
}
.ms-cart-body::-webkit-scrollbar-track {
  background: #0c101b;
}
.ms-cart-body::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
.ms-cart-body::-webkit-scrollbar-thumb:hover {
  background: #0070f3;
}

/* ===== Single Product Detail Page (Matching Screenshots 1 to 5) ===== */
.ms-pdp-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem 5rem 1.5rem !important;
  width: 100% !important;
}

.ms-pdp-header {
  margin-bottom: 2rem !important;
}

.ms-pdp-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
  margin-top: 0.75rem !important;
}

.ms-pdp-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.ms-pdp-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 9999px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ms-pdp-reviews-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 0.6rem !important;
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
}

.ms-pdp-stars {
  color: #fbbf24 !important;
  letter-spacing: 0.1em !important;
}

.ms-pdp-grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  gap: 2.5rem !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  .ms-pdp-grid {
    grid-template-columns: 1fr !important;
  }
}

.ms-pdp-media-box {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 1.5rem !important;
  overflow: hidden !important;
  background: #080c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 112, 243, 0.15) !important;
}

.ms-pdp-media-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.ms-pdp-discord-tag {
  position: absolute !important;
  bottom: 1rem !important;
  right: 1.25rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(0, 0, 0, 0.6) !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(6px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.ms-pdp-tabs {
  display: flex !important;
  gap: 0.75rem !important;
  margin: 1.5rem 0 1rem 0 !important;
}

.ms-pdp-tab-btn {
  padding: 0.55rem 1.4rem !important;
  border-radius: 9999px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.ms-pdp-tab-btn.is-active {
  background: rgba(0, 112, 243, 0.2) !important;
  border-color: #0070f3 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(0, 112, 243, 0.3) !important;
}

.ms-pdp-desc-card {
  background: #0e1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.5rem !important;
  padding: 1.75rem !important;
  color: #cbd5e1 !important;
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
}

.ms-pdp-purchase-card {
  background: #0e1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.5rem !important;
  padding: 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.4rem !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.ms-pdp-price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
}

.ms-pdp-price-main {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  letter-spacing: -0.02em !important;
}

.ms-pdp-price-each {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin-left: 0.5rem !important;
  font-weight: 600 !important;
}

.ms-pdp-stock-status {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #e2e8f0 !important;
}

.ms-pdp-tag-popular {
  align-self: flex-start !important;
  background: #0070f3 !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 9999px !important;
}

.ms-pdp-variant-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.85rem !important;
}

.ms-pdp-variant-card {
  position: relative !important;
  background: #080c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1.1rem !important;
  padding: 1rem 1.1rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

.ms-pdp-variant-card.is-active {
  border-color: #0070f3 !important;
  background: rgba(0, 112, 243, 0.08) !important;
  box-shadow: 0 0 20px rgba(0, 112, 243, 0.25) !important;
}

.ms-pdp-best-value-badge {
  position: absolute !important;
  top: -0.55rem !important;
  right: 0.75rem !important;
  background: #f59e0b !important;
  color: #000000 !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.15rem 0.55rem !important;
  border-radius: 9999px !important;
}

.ms-pdp-qty-stepper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #080c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.85rem !important;
  padding: 0.4rem 0.75rem !important;
}

.ms-pdp-qty-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.ms-pdp-qty-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.ms-pdp-actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
}

.ms-pdp-btn-cart {
  padding: 0.95rem !important;
  border-radius: 1rem !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0070f3 0%, #0051b3 100%) !important;
  box-shadow: 0 10px 25px rgba(0, 112, 243, 0.35) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s !important;
}

.ms-pdp-btn-buy {
  padding: 0.95rem !important;
  border-radius: 1rem !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0070f3 0%, #004499 100%) !important;
  box-shadow: 0 10px 25px rgba(0, 112, 243, 0.45) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s !important;
}

.ms-pdp-btn-cart:hover,
.ms-pdp-btn-buy:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 112, 243, 0.6) !important;
}

.ms-pdp-payment-methods-card {
  background: #0e1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.25rem !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.ms-pdp-pm-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.ms-pdp-pm-pill {
  background: #080c14 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 9999px !important;
}

.ms-pdp-viewers-card {
  background: #0e1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.25rem !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  color: #cbd5e1 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

/* ===== FAQ Accordion Section ===== */
.ms-faq-section {
  margin-top: 4.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 3.5rem !important;
}

.ms-faq-kicker {
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #38bdf8 !important;
  margin-bottom: 0.5rem !important;
}

.ms-faq-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 2rem 0 !important;
}

.ms-faq-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  max-width: 100% !important;
}

.ms-faq-item {
  background: #0e1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease !important;
}

.ms-faq-item.is-open {
  border-color: #0070f3 !important;
  box-shadow: 0 0 25px rgba(0, 112, 243, 0.15) !important;
}

.ms-faq-trigger {
  width: 100% !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-align: left !important;
}

.ms-faq-content {
  padding: 0 1.5rem 1.25rem 1.5rem !important;
  color: #94a3b8 !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

.customer-login-modal-card {
  max-width: 480px !important;
  width: 92% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}