*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Poppins',sans-serif;background:#f7f3f2;color:#3b241d;}a{text-decoration:none;color:inherit;}
.page{min-height:100vh;padding:30px 20px;}.layout{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start;}
.box-panel{position:sticky;top:24px;background:#e8afbf;border-radius:30px;padding:28px;min-height:780px;box-shadow:0 18px 40px rgba(0,0,0,.10);display:flex;flex-direction:column;}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:18px;color:#5b3a32;}.box-top{background:#efc7d3;border-radius:24px;padding:20px;margin-bottom:18px;}
.box-title{font-size:40px;font-weight:800;line-height:1;margin-bottom:12px;color:#2f1d18;}.box-subtitle{font-size:16px;color:#5e433b;line-height:1.6;margin-bottom:14px;}
.status{display:flex;flex-wrap:wrap;gap:10px;}.pill{background:#f8dfe6;color:#5a3b33;padding:10px 14px;border-radius:999px;font-size:14px;font-weight:600;}
.visual-box-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0 0;}.visual-box{width:100%;background:#efb2c2;border-radius:30px;padding:34px;display:flex;align-items:center;justify-content:center;transition:.3s ease;}
.visual-box.pack-3{max-width:640px;min-height:430px;margin:0 auto;}.visual-box.pack-6{max-width:760px;min-height:520px;margin:0 auto;}.visual-box.pack-12{max-width:900px;min-height:620px;margin:0 auto;}
.box-inner{width:100%;background:#fff;border-radius:22px;position:relative;box-shadow:0 14px 20px rgba(0,0,0,.10),inset 0 0 0 2px rgba(234,213,220,.65);overflow:visible;transition:.3s ease;}
.box-inner.pack-3{aspect-ratio:1/.9;max-width:500px;}.box-inner.pack-6{aspect-ratio:1.18/1;max-width:650px;}.box-inner.pack-12{aspect-ratio:1.4/1;max-width:820px;}
.box-lid{position:absolute;top:-38px;left:0;width:100%;height:120px;background:#efc1ce;border-radius:26px 26px 120px 120px;box-shadow:10px 10px 0 rgba(111,59,77,.18);z-index:3;}
.slots{position:absolute;left:24px;right:24px;top:90px;bottom:24px;display:grid;gap:14px;align-content:start;justify-content:center;z-index:2;}
.slots.cols-3{grid-template-columns:repeat(3,1fr);}.slots.cols-4{grid-template-columns:repeat(4,1fr);} .slot{width:120px;height:120px;border-radius:50%;background:rgba(236,200,211,.18);border:2px dashed rgba(127,79,95,.10);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:.25s ease;} .slot img{width:100%;height:100%;object-fit:contain;transform:scale(1.08);filter:drop-shadow(0 8px 10px rgba(0,0,0,.12));} .slot.filled{background:transparent;border:none;}
.picker-panel{background:#fff;border-radius:30px;box-shadow:0 18px 40px rgba(0,0,0,.08);padding:28px;min-height:780px;display:flex;flex-direction:column;}
.picker-title{font-size:44px;font-weight:800;line-height:1;margin-bottom:14px;color:#2f1d18;}.picker-desc{font-size:16px;color:#65463d;line-height:1.6;margin-bottom:20px;}
.flavors{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.flavor{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid #f0e5e8;border-radius:22px;background:linear-gradient(180deg,#fffafb 0%,#fff 100%);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden;}
.flavor::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background .2s ease;}
.flavor:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(57,30,25,.08);border-color:#e5ced5;}
.flavor.is-selected{border-color:#d69aaa;box-shadow:0 8px 18px rgba(119,66,84,.14);background:linear-gradient(180deg,#fff7fa 0%,#fff 100%);}
.flavor.is-selected::after{background:#c97890;}
.flavor-img{width:54px;height:54px;border-radius:50%;object-fit:contain;background:#f8f2f4;box-shadow:inset 0 0 0 1px rgba(201,120,144,.14);} .flavor-name{font-size:20px;font-weight:700;color:#2f1d18;line-height:1.2;margin-bottom:4px;} .flavor-meta{font-size:20px;color:#376120;}
.flavor-chip{display:inline-flex;align-items:center;margin-top:8px;padding:4px 10px;border-radius:999px;background:#f7e0e7;color:#7a3f52;font-size:12px;font-weight:700;letter-spacing:.02em;}
.qty{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eadadd;border-radius:999px;padding:8px 10px;min-width:128px;justify-content:space-between;}
.qty button{border:none;background:#fff7fa;font-size:24px;line-height:1;width:34px;height:34px;border-radius:50%;cursor:pointer;color:#3b241d;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,transform .15s ease;}
.qty button:hover{background:#f2dce3;transform:scale(1.05);} .qty button:active{transform:scale(.95);} .qty-value{min-width:18px;text-align:center;font-weight:700;font-size:20px;color:#2f1d18;}
.bottom-bar{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;border-top:1px solid #f0e5e8;} .bottom-message{font-size:15px;color:#6d4d44;line-height:1.5;max-width:58%;}
.continue-btn{border:none;background:#111;color:#fff;border-radius:999px;min-height:58px;padding:0 28px;font-size:16px;font-weight:700;cursor:pointer;transition:.22s ease;white-space:nowrap;} .continue-btn:hover{transform:translateY(-2px);background:#222;} .continue-btn:disabled{background:#c8c0c3;cursor:not-allowed;transform:none;}
@media (max-width:1180px){.layout{grid-template-columns:1fr;}.box-panel,.picker-panel{min-height:auto;margin-top:16px;}.box-panel{position:relative;top:0;}.visual-box.pack-3,.visual-box.pack-6,.visual-box.pack-12{max-width:100%;min-height:420px;}}
@media (max-width:680px){.page{padding:18px 12px;}.box-panel,.picker-panel{padding:18px;border-radius:22px;}.box-title,.picker-title{font-size:32px;}.visual-box{padding:16px;}.slot{width:82px;height:82px;}.slots{gap:10px;left:12px;right:12px;top:76px;}.flavor{grid-template-columns:54px 1fr auto;}.qty{/*grid-column:1/-1*/;justify-self:end;}.picker-panel{padding-bottom:140px;}.bottom-bar{position:fixed;bottom:0;left:0;right:0;flex-direction:column;align-items:stretch;gap:14px;padding:16px 12px 20px;background:#fff;border-top:1px solid #f0e5e8;box-shadow:0 -8px 24px rgba(0,0,0,.08);z-index:100;}.bottom-message{max-width:100%;margin:0;}.continue-btn{width:100%;}}




@media (max-width: 768px){

  /* 🔥 CLAVE: cortar cualquier desborde */
  .layout{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 🔥 esto evita que algo se vaya a la derecha */
  .visual-box,
  .box-inner{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 🔥 ACA estaba el bug fuerte */
  .slots{
    left: 10px !important;
    right: 10px !important;
    justify-content: center !important;
  }

  /* 🔥 achicamos para que NO rompa */
  .slot{
    width: 70px !important;
    height: 70px !important;
  }

}


@media (max-width: 768px){

  /* 🔥 evitar overflow del listado */
  .flavors{
    width: 100%;
    max-width: 100%;
  }

  .flavor{
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 50px 1fr 90px !important;
  }

  /* 🔥 esto es CLAVE */
  .qty{
    min-width: unset !important;
    width: 90px !important;
  }

  /* 🔥 evita que el texto empuje */
  .flavor-name,
  .flavor-meta{
    font-size: 16px !important;
    word-break: break-word;
  }

}


@media (max-width: 768px){

  /* 🔥 evitar overflow del listado */
  .flavors{
    width: 100%;
    max-width: 100%;
  }

  .flavor{
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 50px 1fr 90px !important;
  }

  /* 🔥 esto es CLAVE */
  .qty{
    min-width: unset !important;
    width: 90px !important;
  }

  /* 🔥 evita que el texto empuje */
  .flavor-name,
  .flavor-meta{
    font-size: 16px !important;
    word-break: break-word;
  }

}

/* =========================================
   FIX DEFINITIVO BOTONES + y -
   ========================================= */

.qty{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:6px 8px !important;
}

.qty button{
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:18px !important;
  line-height:1 !important; /* 👈 CLAVE */

  padding:0 !important;
  margin:0 !important;

  overflow:hidden !important; /* 👈 evita que se salga */
}

.qty button span,
.qty button::before{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}