/* ── MARY AND THE CAPTAIN : CONFIGURATEUR (cas client) ──
   Esprit fiche produit e-commerce : grand viewer à gauche, panneau d'options
   à droite (nom + groupes de pastilles repliables, valeur sélectionnée visible).
   Mobile (<900px) : empilé en colonne, panneau d'options sous le viewer. */

#mary-cfg {
  display: flex;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(20,10,40,0.04), 0 20px 48px rgba(20,10,40,0.08);
}

.mcfg-main { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: row; }
.mcfg-side { flex: 1 1 40%; min-width: 0; max-width: 380px; background: #fbfaf8; display: flex; flex-direction: column; }

/* ── VIEWER ── */
#mary-cfg .mcfg-viewer-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 504px;
  background: radial-gradient(ellipse at 50% 38%, #fdfcfa 0%, #f3efe8 100%);
}
#mary-cfg viewer-3dvue {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── COLONNE VIGNETTES MODÈLES (à gauche du viewer) ── */
#mary-cfg .mcfg-thumbs-wrap {
  position: relative;
  background: white;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 4px;
}
#mary-cfg .mcfg-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 6px 8px;
  flex: 1;
  min-width: 0;
  align-items: stretch;
}
#mary-cfg .mcfg-thumbs-inner { display:flex; flex-direction: column; gap:8px; transition:transform .3s ease; flex-shrink:0; }
#mary-cfg .mcfg-thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px;
  border-radius: 12px;
  border: 2px solid #ededed;
  cursor: pointer;
  background: #f6f3ee;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#mary-cfg .mcfg-thumb:hover { transform: translateX(2px); border-color: #ccc; }
#mary-cfg .mcfg-thumb.active { border-color: var(--dv-violet, #7C3AED); box-shadow: 0 4px 14px rgba(124,58,237,0.22); }
#mary-cfg .mcfg-thumb-pic {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#mary-cfg .mcfg-thumb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mary-cfg .mcfg-thumb-dot { width: 22px; height: 22px; border-radius: 50%; }
#mary-cfg .mcfg-thumb-label {
  font-size: 12px;
  font-weight: 600;
  color: #4a4453;
  line-height: 1.25;
  white-space: nowrap;
}
#mary-cfg .mcfg-thumb.active .mcfg-thumb-label { color: var(--dv-violet, #7C3AED); }
/* ── EN-TÊTE PANNEAU (nom du modèle) ── */
.mcfg-side-head { padding: 24px 20px 4px; }
.mcfg-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dv-violet, #7C3AED); margin-bottom: 6px;
}
.mcfg-title { font-size: 21px; font-weight: 800; color: #17151c; margin: 0 0 4px; letter-spacing: -0.01em; }

/* ── RANGÉES REPLIABLES : fermoir / chaque corde / chaque surliure ── */
.mcfg-bottom {
  background: transparent;
  padding: 10px 0 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}
.mcfg-row { border-bottom: 1px solid #ece9e3; margin: 0 20px; }
.mcfg-row:last-child { border-bottom: none; }

.mcfg-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 2px;
  text-align: left;
  font-family: inherit;
}
.mcfg-row-header:hover .mcfg-opt-label { color: var(--dv-violet, #7C3AED); }

.mcfg-row-preview {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.mcfg-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcfg-opt-label {
  font-size: 11px; color: #17151c;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color .15s ease;
}
.mcfg-row-value { font-size: 13px; color: #8a8578; }

.mcfg-row-chevron {
  font-size: 15px; color: #bbb;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.mcfg-row.is-open .mcfg-row-chevron { transform: rotate(90deg); color: var(--dv-violet, #7C3AED); }

.mcfg-swatches {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 2px 18px;
}
.mcfg-row.is-open .mcfg-swatches { display: flex; animation: mcfgFadeIn .2s ease; }
@keyframes mcfgFadeIn { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }

.mcfg-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  flex-shrink: 0;
  position: relative;
}
.mcfg-swatch:hover { transform: scale(1.12); }
.mcfg-swatch.active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--dv-violet, #7C3AED);
  transform: scale(1.08);
}

/* ── TOOLTIP ── */
#mary-cfg .mcfg-tip,
.mcfg-tip {
  position: fixed; z-index: 10000;
  background: rgba(15,15,15,0.92);
  border: 1px solid #333;
  color: #eee; font-size: 10px;
  padding: 4px 9px; border-radius: 5px;
  pointer-events: none; display: none;
  transform: translate(-50%, -130%);
  white-space: nowrap;
}

/* ── RESPONSIVE : empilé, vignettes sous le viewer, panneau d'options en dessous ── */
@media (max-width: 900px) {
  #mary-cfg { flex-direction: column; border-radius: 16px; }
  .mcfg-main { flex-direction: column; }
  .mcfg-side { max-width: none; }
  #mary-cfg .mcfg-viewer-wrap { min-height: 384px; order: 1; }
  #mary-cfg .mcfg-thumbs-wrap {
    order: 2;
    border-right: none;
    border-top: 1px solid #eee;
    width: 100%;
    padding: 4px 0;
  }
  #mary-cfg .mcfg-thumbs { flex-direction: row; padding: 10px 6px; align-items: center; }
  #mary-cfg .mcfg-thumbs-inner { flex-direction: row; }
  #mary-cfg .mcfg-thumb { flex-direction: column; padding: 4px; gap: 2px; }
  #mary-cfg .mcfg-thumb-label { white-space: normal; text-align: center; font-size: 10px; max-width: 64px; }
}

@media (max-width: 600px) {
  #mary-cfg .mcfg-thumb-pic { width: 50px; height: 50px; }
  .mcfg-swatch { width: 28px; height: 28px; }
  .mcfg-side-head { padding: 20px 16px 2px; }
  .mcfg-row { margin: 0 16px; }
}