/* ============================================================
   Base
============================================================ */
.mvq-wrap{ margin-top: 12px; }
.mvq-title{ margin: 0 0 10px 0; font-size: 18px; line-height: 1.2; }

/* Swatch */
.mvq-swatch{ display:flex; align-items:center; min-width:140px; }
.mvq-swatch-btn{
  display:flex; align-items:center; gap:10px; width:100%;
  border:1px solid #ddd; border-radius:10px; padding:8px;
  background:#fff; cursor:pointer; text-align:left;
}
.mvq-swatch-img{ width:38px; height:38px; object-fit:cover; border-radius:8px; display:block; }
.mvq-swatch-ph{ width:38px; height:38px; background:#eee; border-radius:8px; }
.mvq-color-label{ line-height:1.1; font-size:14px; font-weight:600; }

/* ============================================================
   SIMPLE TABLE (1 attributo) - 2 colonne
============================================================ */
.mvq-table-simple{
  width:100%;
  border:1px solid #e6e6e6;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.mvq-simple-head{
  display:grid;
  grid-template-columns:220px 1fr;
  background:#fafafa;
  border-bottom:1px solid #e6e6e6;
}
.mvq-simple-th{ padding:10px 12px; font-size:13px; font-weight:700; text-transform:lowercase; }
.mvq-simple-body .mvq-row-simple{
  display:grid;
  grid-template-columns:220px 1fr;
  border-bottom:1px solid #e6e6e6;
}
.mvq-simple-body .mvq-row-simple:last-child{ border-bottom:none; }
.mvq-row-simple .mvq-cell{ padding:10px 12px; display:flex; align-items:center; }
.mvq-row-simple .mvq-qty{ justify-content:flex-start; }
.mvq-row-simple input.mvq-q{ width:100%; max-width:180px; }
.mvq-price-hidden{ display:none !important; }

/* ============================================================
   MATRIX (colore x taglia)
============================================================ */

/* viewport verticale interno + niente scroll pagina in X */
.mvq-matrix-wrapper{
  width:100%;
  border:3px solid #aaa;
  border-radius:10px;
  background:#f4f4f4;

  max-height:65vh;           /* scroll verticale interno */
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  position:relative;
}

/* HEAD sticky dentro wrapper */
.mvq-matrix-head{
  position: sticky;
  top: 0;
  z-index: 50;
  background:#fff;
  border-bottom:1px solid #e6e6e6;

  /* affiancati: colore a sinistra + taglie a destra */
  display:flex;
  align-items:stretch;
}

/* celle head base */
.mvq-matrix-th{
  padding:10px 12px;
  font-size:13px;
  font-weight:700;
  text-transform:lowercase;
  white-space:nowrap;
}

/* HEAD colonna colore sticky a sinistra */
.mvq-matrix-th-color{
  width:220px;               /* coerente con righe */
  flex:0 0 220px;
  border-right:1px solid #e6e6e6;

  position: sticky;
  left: 0;
  z-index: 60;
  background:#fff;
  background-clip: padding-box;
}

/* wrapper taglie a destra (contiene frecce + scroller head) */
.mvq-matrix-th-sizes-wrap{
  position: relative;
  flex:1 1 auto;
  min-width:0;               /* fondamentale per non andare a capo */
  display:flex;
  align-items:stretch;
}

/* ============================
   Frecce SEMPRE visibili e “fisse” ai lati del wrap
============================ */
.mvq-matrix-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index: 80;

  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid #ddd;
  background:rgba(255,255,255,.96);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.mvq-matrix-arrow:disabled{ opacity:.35; cursor:default; }
.mvq-matrix-arrow-left{ left:6px; }
.mvq-matrix-arrow-right{ right:6px; }

/* fade indicator (opzionale, usi già JS per is-hidden) */
.mvq-matrix-fade{
  position:absolute;
  top:0; bottom:0;
  width:22px;
  pointer-events:none;
  z-index: 70;
}
.mvq-matrix-fade-left{
  left:40px; /* lascia spazio alla freccia */
  background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.mvq-matrix-fade-right{
  right:40px;
  background:linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}
.mvq-matrix-fade.is-hidden{ display:none; }

/* ============================
   HEAD sizes scroller (UNICO scroll X reale)
============================ */
.mvq-matrix-sizes-head{
  flex:1 1 auto;
  min-width:0;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  /* impedisce che lo swipe “trascini” la pagina */
  overscroll-behavior-x:contain;
  touch-action: pan-x;

  /* spazio per frecce */
  padding:0 40px;

  /* evita selezione testo durante drag */
  user-select:none;

  position:relative;
}

/* inner flex orizzontale (taglie in riga) */
.mvq-matrix-sizes-head-inner{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:2px;
  width:max-content;         /* fondamentale */
}

/* celle taglia head */
.mvq-matrix-th-size{
  width:75px;
  min-width:75px;
  padding:10px 6px;
  text-align:center;
  border-left:1px solid #eaeaea;
  box-sizing:border-box;
}

/* ============================
   BODY (nessuno scroll X qui)
============================ */
.mvq-matrix-body{
  width:100%;
  overflow:hidden;          /* il body NON scrolla in X */
  position:relative;
}

.mvq-matrix-body-inner{
  width:100%;
}

/* Righe matrix: flex (NON grid) */
.mvq-row.mvq-row-matrix.mvq-matrix-row{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid #e6e6e6;
}
.mvq-row.mvq-row-matrix.mvq-matrix-row:last-child{ border-bottom:none; }

/* Celle base righe */
.mvq-row.mvq-row-matrix .mvq-cell{
  box-sizing:border-box;
}

/* Colonna colori sticky a sinistra (celle) */
.mvq-cell.mvq-color.mvq-matrix-color{
  width:220px;
  flex:0 0 220px;
  padding:6px;
  border-right:1px solid #e6e6e6;

  position: sticky;
  left: 0;
  z-index: 40;
  background:#fff;
  background-clip: padding-box;

  display:flex;
  align-items:center;
}

/* ombra di separazione */
.mvq-matrix-th-color,
.mvq-cell.mvq-color.mvq-matrix-color{
  box-shadow: 8px 0 12px rgba(0,0,0,.04);
}

/* Area taglie riga: NON scrolla, contiene track che si muove via transform */
.mvq-matrix-row-sizes{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  padding:0 40px;          /* stesso padding della head per allineare con frecce */
}

/* Track delle taglie (spostato via JS con translateX) */
.mvq-matrix-sizes-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:2px;
  width:max-content;
  transform:translateX(0);
  will-change: transform;
}

/* Celle taglia riga */
.mvq-matrix-size-cell{
  width:75px;
  min-width:75px;
  padding:8px 6px;
  border-left:1px solid #ccc;

  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

/* Stati stock -> bordo cella */
.mvq-matrix-size-cell.in-stock{
  outline:2px solid rgba(46, 204, 113, .55);
  outline-offset:-2px;
}
.mvq-matrix-size-cell.out-of-stock{
  outline:2px solid rgba(231, 76, 60, .55);
  outline-offset:-2px;
  opacity:.55;
}
.mvq-size-empty{ opacity:.25; }

/* Input (75px) */
.mvq-matrix-size-cell input.mvq-q{
  width:75px;
  max-width:75px;
  text-align:center;
  background:#f4f4f4;
  border:none;
  box-shadow:none;
}

/* fade orizzontale body */
.mvq-matrix-body::before,
.mvq-matrix-body::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:40px;
  pointer-events:none;
  z-index:45; /* sotto head, sopra righe */
}

.mvq-matrix-body::before{
  left:220px; /* larghezza colonna colori */
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.mvq-matrix-body::after{
  right:0;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}

/* quando non serve fade */
.mvq-matrix-body.no-fade-x::before,
.mvq-matrix-body.no-fade-x::after{
  display:none;
}

/* ============================================================
   Vertical scroll hint (no fade)
============================================================ */
.mvq-matrix-wrapper{ position:relative; }

.mvq-matrix-scrollhint{
  position: sticky;
  bottom: 0;
  z-index: 70;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top: -1px; /* evita “stacco” col bordo */
  padding:10px 12px;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);

  border-top: 1px solid #e9e9e9;
  font-size: 13px;
  font-weight: 600;
}

.mvq-matrix-scrollhint .mvq-matrix-scrollhint-icon{
  font-size: 16px;
  line-height: 1;
  animation: mvqHintBounce 1.2s infinite ease-in-out;
}

@keyframes mvqHintBounce{
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* Nascondi quando non serve o quando l'utente ha già scrollato */
.mvq-matrix-wrapper.no-scrollhint .mvq-matrix-scrollhint{ display:none; }


/* ============================================================
   Summary
============================================================ */
.mvq-summary-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px dashed #e8e8e8;
}
.mvq-summary-row:last-child{ border-bottom:none; }
.mvq-attr-chip{
  display:inline-block;
  background:#f6f6f6;
  border:1px solid #ececec;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 768px){
  .mvq-simple-head,
  .mvq-simple-body .mvq-row-simple{
    grid-template-columns:150px 1fr;
  }

  .mvq-matrix-th-color,
  .mvq-cell.mvq-color.mvq-matrix-color{
    width:150px;
    flex:0 0 150px;
  }

  .mvq-swatch{ min-width:120px; }
  .mvq-color-label{ font-size:11px; }
	
  .mvq-matrix-body::before {
	  left: 150px;
  }
}