.mb-album-shell{
  width:100%;
  max-width:1100px;
  margin:20px auto 50px;
  font-family:Arial,sans-serif;
}
.mb-sheet{
  width:100%;
  aspect-ratio:2/3;
  position:relative;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center top;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.mb-hit{
  position:absolute;
  cursor:pointer;
  display:block;
  z-index:5;
}
.mb-hit input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mb-dot{
  position:absolute;
  width:18%;
  aspect-ratio:1;
  min-width:12px;
  min-height:12px;
  max-width:22px;
  max-height:22px;
  left:3%;
  top:3%;
  border:1.5px solid #6f685f;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.mb-hit input:checked + .mb-dot:after{
  content:"";
  position:absolute;
  inset:23%;
  background:#292622;
  border-radius:50%;
}
.mb-hit:focus-within .mb-dot{
  outline:2px solid #b89568;
  outline-offset:2px;
}

/* sezione 1 */
.mb-riv-tortora{left:3.4%;top:41.9%;width:13.7%;height:7.8%}
.mb-riv-miele{left:20.5%;top:41.9%;width:13.7%;height:7.8%}
.mb-riv-carbone{left:37.1%;top:41.9%;width:13.7%;height:7.8%}

/* sezione 2 */
.mb-base-nera{left:55.4%;top:37.4%;width:20.0%;height:9.4%}
.mb-base-bianca{left:77.0%;top:37.4%;width:19.5%;height:9.4%}

/* sezione 3 */
.mb-design-1{left:3.3%;top:55.2%;width:12.9%;height:6.1%}
.mb-design-2{left:17.2%;top:55.2%;width:12.9%;height:6.1%}
.mb-design-3{left:31.1%;top:55.2%;width:12.9%;height:6.1%}
.mb-design-4{left:44.9%;top:55.2%;width:12.9%;height:6.1%}
.mb-design-5{left:3.3%;top:63.0%;width:12.9%;height:6.1%}
.mb-design-6{left:17.2%;top:63.0%;width:12.9%;height:6.1%}
.mb-design-7{left:31.1%;top:63.0%;width:12.9%;height:6.1%}
.mb-design-8{left:44.9%;top:63.0%;width:12.9%;height:6.1%}
.mb-design-9{left:3.3%;top:71.1%;width:12.9%;height:6.1%}
.mb-design-10{left:17.2%;top:71.1%;width:12.9%;height:6.1%}
.mb-design-11{left:31.1%;top:71.1%;width:12.9%;height:6.1%}
.mb-design-12{left:44.9%;top:71.1%;width:12.9%;height:6.1%}

/* sezione 4 */
/* Veri <button>: più affidabili dei radio trasparenti su WordPress/browser mobili. */
.mb-fin-btn{
  position:absolute;
  z-index:20;
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  padding:0 !important;
  margin:0 !important;
  border:1.7px solid #5f574f !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
  cursor:not-allowed;
  opacity:.30;
  pointer-events:none;
  appearance:none;
  -webkit-appearance:none;
}
.mb-fin-btn.enabled{
  opacity:1;
  cursor:pointer;
  pointer-events:auto;
}
.mb-fin-btn.enabled:hover{
  transform:scale(1.08);
}
.mb-fin-btn.selected::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:#292622;
}
.mb-fin-btn:focus-visible{
  outline:2px solid #b89568 !important;
  outline-offset:2px;
}

/* Riga Tortora: sotto i tre cerchi */
.mb-fin-tortora-1{left:71.05%;top:63.55%}
.mb-fin-tortora-2{left:81.55%;top:63.55%}
.mb-fin-tortora-3{left:91.95%;top:63.55%}

/* Riga Miele */
.mb-fin-miele-1{left:71.05%;top:71.85%}
.mb-fin-miele-2{left:81.55%;top:71.85%}
.mb-fin-miele-3{left:91.95%;top:71.85%}

/* Riga Carbone */
.mb-fin-carbone-1{left:71.05%;top:80.15%}
.mb-fin-carbone-2{left:81.55%;top:80.15%}
.mb-fin-carbone-3{left:91.95%;top:80.15%}

/* campi testo */
.mb-text{
  position:absolute;
  z-index:6;
  border:0 !important;
  outline:none;
  background:rgba(255,255,255,.82) !important;
  box-shadow:none !important;
  color:#242424 !important;
  padding:0 .8%;
  font-family:Arial,sans-serif;
  font-size:clamp(10px,1.25vw,16px);
  border-radius:4px;
}
.mb-text:focus{
  outline:1.5px solid #b89568 !important;
}
.mb-nomi{left:3.5%;top:86.92%;width:59.4%;height:2.75%}
.mb-data{left:65.1%;top:86.92%;width:31.5%;height:2.75%}

/* riepilogo */
.mb-summary-field{
  position:absolute;
  z-index:6;
  top:93.73%;
  height:2.85%;
  display:flex;
  align-items:center;
  padding:0 .7%;
  background:rgba(255,255,255,.88);
  font-size:clamp(8px,1.02vw,13px);
  line-height:1.1;
  overflow:hidden;
}
.mb-s-riv{left:39.45%;width:13.1%}
.mb-s-base{left:54.2%;width:13.0%}
.mb-s-design{left:69.0%;width:13.0%}
.mb-s-fin{left:83.55%;width:13.0%}

.mb-submit-card{
  background:#fff;
  padding:28px 10px 10px;
  text-align:right;
}
.mb-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  text-align:left;
  color:#555;
  font-size:14px;
  line-height:1.45;
  margin:0 0 20px auto;
  max-width:760px;
}
.mb-consent input{margin-top:3px}
.mb-submit{
  appearance:none;
  border:0;
  background:#252525;
  color:#fff;
  padding:15px 28px;
  font-size:15px;
  cursor:pointer;
}
.mb-submit:hover{opacity:.9}
.mb-submit:disabled{opacity:.55;cursor:wait}
#mbAlbumStatus{
  margin-top:16px;
  font-weight:600;
  font-size:14px;
}
.mb-success{color:#2f6b3b}
.mb-error{color:#9b2c2c}

@media(max-width:650px){
  .mb-album-shell{margin-top:5px}
  .mb-sheet{box-shadow:none}
  .mb-dot{min-width:9px;min-height:9px;border-width:1px}
  .mb-text{font-size:8px;padding:0 2px}
  .mb-summary-field{font-size:6.7px;padding:0 2px}
  .mb-submit-card{padding:20px 4px 0}
  .mb-submit{width:100%}
  .mb-consent{font-size:13px}
}

@media(max-width:650px){
  .mb-fin-btn{
    width:14px;
    height:14px;
    min-width:14px;
    min-height:14px;
  }
  .mb-fin-btn.selected::after{inset:3px}
}



/* ==========================================================
   MOBILE 3.0
   Adattamento diretto della grafica desktop approvata.
   Nessun testo è incorporato nelle immagini.
   ========================================================== */

.mb-mobile{display:none}

@media (max-width:720px){
  .mb-album-shell,
  .mb-album-shell *{box-sizing:border-box}

  .mb-sheet{display:none !important}

  .mb-mobile{
    display:block;
    width:100%;
    max-width:540px;
    margin:0 auto;
    background:#fff;
    color:#222;
    overflow:hidden;
  }

  .mbm-hero{
    padding:0 18px 26px;
    background:#fff;
  }
  .mbm-hero img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .mbm-section{
    position:static !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:0 18px !important;
    padding:26px 0 30px !important;
    border-top:1px solid #ddd9d3;
    overflow:visible !important;
  }

  .mbm-title-row{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:0 0 7px;
  }
  .mbm-number,
  .mbm-section h2,
  .mbm-summary h2{
    font-family:Georgia,"Times New Roman",serif !important;
    font-weight:400 !important;
    color:#1d1d1d !important;
  }
  .mbm-number{
    flex:0 0 auto;
    font-size:29px;
    line-height:1;
  }
  .mbm-section h2{
    margin:0 !important;
    padding:0 !important;
    font-size:27px !important;
    line-height:1.08 !important;
  }
  .mbm-section > p{
    margin:0 0 19px !important;
    padding:0 !important;
    color:#686868 !important;
    font-size:14.5px !important;
    line-height:1.5 !important;
  }

  /* SEZIONE 1 */
  .mbm-riv-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
  }
  .mbm-riv-choice{
    display:block !important;
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer;
    text-align:center;
  }
  .mbm-riv-choice input,
  .mbm-base-choice input,
  .mbm-design-choice input{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .mbm-riv-choice img{
    display:block;
    width:100%;
    height:auto;
    border-radius:50%;
  }

  /* SEZIONE 2 */
  .mbm-base-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .mbm-base-choice{
    display:block !important;
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer;
  }
  .mbm-base-choice img{
    display:block;
    width:100%;
    height:auto;
  }

  /* Radio HTML disegnato come nella versione desktop */
  .mbm-radio-line{
    display:flex !important;
    position:static !important;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:39px;
    margin-top:7px;
    color:#292929;
    font-family:Arial,sans-serif;
    font-size:14px;
    line-height:1.15;
  }
  .mbm-radio-line i{
    display:block;
    flex:0 0 17px;
    width:17px;
    height:17px;
    border:1.6px solid #5f5a55;
    border-radius:50%;
    background:#fff;
    position:relative;
  }
  .mbm-riv-choice input:checked ~ .mbm-radio-line i::after,
  .mbm-base-choice input:checked ~ .mbm-radio-line i::after,
  .mbm-design-choice input:checked ~ .mbm-radio-line i::after,
  .mbm-finish-choice.selected .mbm-radio-line i::after{
    content:"";
    position:absolute;
    inset:4px;
    background:#292622;
    border-radius:50%;
  }

  /* SEZIONE 3 */
  .mbm-design-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 14px;
    width:100%;
  }
  .mbm-design-choice{
    position:relative !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer;
  }
  .mbm-design-choice img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid #d9d9d9;
    background:#fff;
  }
  .mbm-design-choice input:checked ~ img{
    outline:2px solid #8b7a68;
    outline-offset:2px;
  }

  /* SEZIONE 4 */
  .mbm-finish-row{
    margin:0 0 26px;
    padding:0;
    opacity:.42;
    transition:opacity .15s ease;
  }
  .mbm-finish-row:last-child{margin-bottom:0}
  .mbm-finish-row.active{opacity:1}
  .mbm-finish-row h3{
    margin:0 0 10px !important;
    padding:0 !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:23px !important;
    font-weight:400 !important;
    color:#252525 !important;
  }
  .mbm-finish-options{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .mbm-finish-choice{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#292929 !important;
    box-shadow:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    opacity:1 !important;
    transform:none !important;
    cursor:not-allowed !important;
    pointer-events:none !important;
  }
  .mbm-finish-row.active .mbm-finish-choice{
    cursor:pointer !important;
    pointer-events:auto !important;
  }
  .mbm-finish-choice img{
    display:block;
    width:100%;
    height:auto;
    border-radius:50%;
  }
  .mbm-finish-choice.selected img{
    outline:2px solid #8b7a68;
    outline-offset:2px;
  }
  .mbm-finish-choice .mbm-radio-line{
    font-size:12px;
    gap:5px;
  }

  /* SEZIONE 5 */
  .mbm-field{
    display:block !important;
    position:static !important;
    margin:0 0 17px !important;
    padding:0 !important;
    color:#333;
    font-family:Arial,sans-serif;
    font-size:13px;
  }
  .mbm-field span{
    display:block !important;
    position:static !important;
    margin:0 0 7px !important;
    padding:0 !important;
  }
  .mbm-field input{
    display:block !important;
    position:static !important;
    width:100% !important;
    height:49px !important;
    margin:0 !important;
    padding:0 12px !important;
    border:1px solid #cfdae6 !important;
    border-radius:5px !important;
    outline:none !important;
    background:#fbfcfd !important;
    color:#222 !important;
    font-size:16px !important;
    box-shadow:none !important;
    opacity:1 !important;
    appearance:auto !important;
    -webkit-appearance:auto !important;
  }
  .mbm-field input:focus{
    border-color:#9c856e !important;
  }

  /* RIEPILOGO */
  .mbm-summary{
    margin:0 18px 22px;
    padding:22px 20px 20px;
    background:#f1eeea;
    border-radius:9px;
  }
  .mbm-summary h2{
    margin:0 0 7px !important;
    font-size:27px !important;
    line-height:1.1 !important;
  }
  .mbm-summary > p{
    margin:0 0 17px !important;
    color:#666 !important;
    font-size:13px !important;
    line-height:1.4 !important;
  }
  .mbm-summary-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .mbm-summary-grid > div{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:10px;
    align-items:center;
  }
  .mbm-summary-grid span{
    font-size:12px;
    color:#555;
  }
  .mbm-summary-grid strong{
    display:flex;
    align-items:center;
    min-height:42px;
    padding:6px 9px;
    background:#fff;
    border:1px solid #d4deea;
    font-size:13px;
    font-weight:400;
    overflow-wrap:anywhere;
  }

  /* INVIO */
  .mb-submit-card{
    margin:0 18px 26px !important;
    padding:0 !important;
    background:#fff;
  }
  .mb-consent{
    width:100%;
    margin:0 0 18px !important;
    font-size:13px;
    line-height:1.45;
  }
  .mb-submit{
    width:100%;
    min-height:52px;
    padding:14px 18px !important;
    font-size:15px !important;
  }

  #mbAlbumStatus{
    text-align:left;
    line-height:1.4;
  }
}

@media (max-width:390px){
  .mbm-section h2{font-size:24px !important}
  .mbm-number{font-size:26px}
  .mbm-section > p{font-size:14px !important}
  .mbm-radio-line{font-size:12.5px}
  .mbm-finish-choice .mbm-radio-line{
    font-size:11px;
    gap:4px;
  }
  .mbm-radio-line i{
    flex-basis:15px;
    width:15px;
    height:15px;
  }
}