:root{
  --grid-bd:#ccc;
  --grid-bg:#fff;
  --head-bg:#e5e5e5;/*f6f7f9*/
  --muted:#6b7280;
  --code-bg:#ececec;
  --btn-pick-bg:#43960b;
  --qty-border:#999;
  --qty-border-h:#222;
  --disp-bg:#f7f7f7;
}

/* ============================
   TABELLA PRINCIPALE
============================ */
/* Contenitore esterno della matrice + bottone */
.pim-mod-wrapper{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  background:#fff;
  border:1px solid #ddd;
  margin-top:20px;

  width:100%;
  max-width:100%; 
  box-sizing:border-box;
  min-width:0;         /* <-- IMPORTANTISSIMO (flex) */
  overflow:hidden;     /* <-- impedisce che allarghi il body */
}
/* Assicura che la tabella non prenda tutto lo spazio */
.pim-mod-wrapper .sku-matrix {
    width: auto;
}

/* Allinea a destra anche il pulsante */
.pim-mod-wrapper .pim-mod-scroll {
    position:relative;width:100%;
}
.pim-mod-wrapper .pim-addcart-wrap {
    width:100%;
    text-align: right;
    background:#ddd;
    padding:10px;
}

.sku-matrix{
  border-collapse:collapse;
  table-layout:fixed;
  margin:10px;
}

.sku-matrix th,
.sku-matrix td{
  border:1px solid var(--grid-bd);
  background:var(--grid-bg);
  vertical-align:middle;
  padding:0;
}

.sku-matrix thead th{
  background:var(--head-bg);
  font-weight:600;
  text-align: center;
}

/* sticky colonna taglie */
.sku-matrix .sticky-left{
  position:sticky;
  left:-10px;
  background:var(--head-bg);
  z-index:2;
  text-align:center;
}

/* colonna taglie: larghezza auto + padding */
.sku-matrix .size-col{
  width:auto;
  padding:10px 12px;
  box-sizing:border-box;
}
.sku-matrix .size-col,.sku-matrix th{
  font-size:14px;
}

/* Angolo in alto sinistra: nessun bordo/sfondo */
/*.sku-matrix thead tr:first-child th.sticky-left.size-col{*/
.sku-matrix .th-e{
  background:transparent !important;
  border:0 !important;
}

.sku-matrix .pim-img-t {
width:110px;
background:#fff;
box-sizing:border-box;
}


/* Contenuto cella tabella */
.cell-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0px;
  width:100%;
  height:100%;
  box-sizing:border-box;
  
  box-shadow:none;  /* nessuna shadow di default */
  border:1px solid var(--grid-bd);

  transition:
    box-shadow .18s ease-out,
    border-color .18s ease-out;
}

/* Cella corrente (selezionata da OBID) → unica con shadow */
.sku-matrix td.current-cell .cell-wrap{
  /*border:1px solid #000;
  box-shadow:0 0 4px rgba(0,0,0,.4);*/
}

/* Codice articolo della cella corrente, SOLO se disponibile
   (non stock-0, non stock-0-current) → sfondo nero */
.sku-matrix td.current-cell .sku-badge:not(.stock-0):not(.stock-0-current){
  background:#000;
  color:#fff;
  /*border-color:#000;*/
}

/* Hover cella tabella → NO shadow, solo bordo */
.sku-matrix td:hover .cell-wrap{
  border:1px solid #000;
  transform:none;
}

/* SKU badge (codice articolo) */
.sku-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background:var(--code-bg);
  border:1px solid #ccc;
    border-top:0;
    border-left:0;
    border-right:0;
  padding:4px 0;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.85rem;
  color:#222;
  border-radius:0;
  margin-bottom:0;
  box-sizing:border-box;

  transition:
    background-color .18s ease-out,
    color .18s ease-out,
    border-color .18s ease-out;
}

/* Non disponibile (tutte le celle non disponibili) → rosso vivo */
.sku-badge.stock-0{
  background:#cc0000;
  color:#fff;
  border-color:#cc0000;
}

/* Non disponibile + cella corrente → rosso scurissimo quasi nero */
.sku-badge.stock-0-current{
  background:#550000;
  color:#fff;
  border-color:#550000;
}

/* Hover badge nella tabella */
.sku-matrix td:hover .sku-badge{
  background:#555;
  color:#fff;
  border-color:#000;
}

/* Link sul codice SKU dentro la cella */
.cell-sku-link{
  display:block;
  width:100%;
  text-decoration:none;
  color:inherit;
}
.cell-sku-link:hover{text-decoration: none;}
/* Controlli quantità */
.qty-control{
  display:flex;
  align-items:stretch;
  gap:0;
  justify-content:center;
}

.qty-control .v-buttons{
  display:flex;
  flex-direction:column;
  gap:0;
}

.qty-control .btn{
  width:22px;
  height:22px;
  border:1px solid var(--qty-border);
  border-left:0;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  line-height:1;
  border-radius:0;
}
.qty-control .btn:first-child {
border-top:0;
border-bottom:0;
}
.qty-control .btn:hover{
  border:1px solid var(--qty-border-h);
  background:var(--btn-pick-bg) !important;
  color:#fff;
}

.qty-control .btn i{
  font-size:14px;
}

.qty-control input[type="number"]{
  width:84px;
  text-align:center;
  border:1px solid var(--qty-border);
  border-top:0;
  border-left:0;
  border-right:0;
  font-size:18px;
  height:44px;
  padding:0;
  margin:0;
  line-height:44px; /*66*/
  -moz-appearance:textfield;
  border-radius:0;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Focus dentro alla cella: SOLO input e bottoni verdini, codice invariato */
.cell-wrap:focus-within .btn,
.cell-wrap:focus-within input[type="number"]{
  background:#e8ffe8;
  border-color:#8bc34a;
}

.sku-matrix td {
    position: relative;
}

.sku-matrix td:has(.empty) {
    height: 60px;           /* imposta l’altezza minima della cella */
    min-height: 60px;       /* fallback */
}
/* Cella vuota */
.sku-matrix .empty{
  position:absolute;
  inset:0;
  background:#f0f0f0;
  color:#999;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
}

.sku-matrix .empty::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    43deg,
    transparent 0,
    transparent 49%,
    #ccc 50%,
    transparent 51%,
    transparent 100%
  );
  opacity:.8;
}

.qty-disp {
width:100%;
text-align: center;
padding:3px 0;
background:var(--disp-bg);
}
/* ============================
   STATO QTY-FILLED (quantità > 0)
============================ */

/* Disponibili: input + btn verdini, codice invariato */
.cell-wrap.qty-filled .btn,
.cell-wrap.qty-filled input[type="number"]{
  background:#e8ffe8 !important;
  border-color:#8bc34a !important;
  color:#222 !important;
}

/* Non disponibili: input + btn giallini, codice invariato */
.cell-wrap.qty-filled.stock-0-filled .btn,
.cell-wrap.qty-filled.stock-0-filled input[type="number"]{
  background:#fff7cc !important;  /* giallino */
  border-color:#e6c200 !important;
  color:#332b00 !important;
}

/* ============================
   VISTA COLORI (SPEC)
============================ */
.pim-specs-list{
  display:flex;
  gap:0;
  margin:10px 0 15px 0;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.pim-spec-link{
  text-decoration:none !important;
  color:inherit;
}

.pim-spec{
  width:70px;
  margin-right:10px;
  text-align:center;
  font-size:14px;
}

.pim-spec-img{
  width:70px;
  height:70px;
  border:1px solid #bbb;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  margin:0 auto 4px auto;

  transition:
    box-shadow .18s ease-out,
    transform .18s ease-out,
    border-color .18s ease-out;
}

.pim-spec-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* SPEC selezionata */
.pim-spec.current-spec .pim-spec-img{
  border-color:#000;
  box-shadow:0 0 4px rgba(0,0,0,.4);
}

/* SPEC non disponibile */
.pim-spec.not-avail .pim-spec-img{
  border-color:#cc0000;
}

/* Hover SPEC */
.pim-spec-link:hover .pim-spec-img{
  border-color:#000;
  transform:translateY(-3px);
}

/* label colore */
.pim-spec-label{
  word-break:break-word;
  margin-top:2px;
}


.addcart_pick {
background-color:var(--btn-pick-bg);
}

/* ============================
   VISTA TAGLIE
============================ */
.pim-sizes-list{
  display:flex;
  flex-direction:row;
  gap:6px;
  margin:0 0 20px 0;
  justify-content:flex-start;
}

.pim-size-link{
  text-decoration:none !important;
  color:inherit;
}

.pim-size-box{
  width:50px;
  height:50px;
  border:1px solid #999;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-sizing:border-box;

  transition:
    box-shadow .18s ease-out,
    transform .18s ease-out,
    border-color .18s ease-out;
}

/* TAGLIA selezionata */
.pim-size-box.current-size{
  border-color:#000;
  box-shadow:0 0 4px rgba(0,0,0,.4);
}

/* TAGLIA non disponibile */
.pim-size-box.not-avail{
  border-color:#cc0000;
}

/* Hover TAGLIE */
.pim-size-link:hover .pim-size-box{
  border-color:#000;
  transform:translateY(-3px);
}

/* ============================
   COMBINAZIONE NON ESISTENTE
   (taglia/colore non presente in matrice)
============================ */

/* BOX COLORI */
.pim-spec.combo-missing{
  opacity:.7;
}
.pim-spec.combo-missing .pim-spec-img{
  position:relative;
  overflow:hidden;
}
.pim-spec.combo-missing .pim-spec-img::before{
  content:"";
  position:absolute;
  inset:0;
  /*background:linear-gradient(
    43deg,
    transparent 0,
    transparent 48%,
    #999 50%,
    transparent 52%,
    transparent 100%
  );*/
  opacity:.8;
}

/* BOX TAGLIE */
.pim-size-box.combo-missing{
  position:relative;
  opacity:.2;
  overflow:hidden;
}
.pim-size-box.combo-missing::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    43deg,
    transparent 0,
    transparent 48%,
    #999 50%,
    transparent 52%,
    transparent 100%
  );
  opacity:.8;
}



@media (max-width:480px) {    
    .pim-mod-wrapper{
    box-sizing:border-box;
    width:100%;
    max-width:100%;     /* <-- CORRETTO (no widtgh) */
    overflow:hidden;    /* <-- evita allargamento pagina */
    }
    .pim-mod-wrapper{ display:block; }

    .pim-mod-wrapper .pim-mod-scroll{
    display:block;
    width:100%;
    max-width:100vw;       /* <-- importantissimo: blocca a viewport */
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
    padding:10px;          /* <-- sposta qui lo “spazio” */
    }

    /* IMPORTANTISSIMO: la tabella NON deve avere margin, altrimenti può sbordare il body */
    .pim-mod-wrapper .pim-mod-scroll .sku-matrix{
    margin:0;              /* <-- era 10px (spesso è il colpevole!) */
    width:max-content;
    min-width:100%;
    }
    .pim-addcart-wrap {
    width:100%;
    position:sticky;
    left:-10px;
    }
}