/* L'artisan — Cutia ta de praline */

.lab-builder{
  --lab-cream:#F6F0E7;
  --lab-brown:#2B1712;
  --lab-ink:#241E1A;
  --lab-gold:#C9A227;
  --lab-line:#E2D8C8;
  --lab-muted:#7A6A5C;

  margin:0 0 28px;
  width:100%;
}

.lab-step{margin:0 0 30px}

.lab-step-title{
  display:flex;align-items:center;gap:10px;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 14px;color:var(--lab-ink);
}
.lab-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--lab-brown);color:var(--lab-cream);
  font-size:12px;font-weight:700;letter-spacing:0;flex:none;
}

/* ---------- Step 1: box size ---------- */

.lab-sizes{display:flex;gap:12px;flex-wrap:wrap}

.lab-size{cursor:pointer;flex:1 1 140px;min-width:130px;margin:0}
.lab-size input{position:absolute;opacity:0;width:0;height:0}

.lab-size-inner{
  display:flex;flex-direction:column;gap:4px;align-items:center;
  padding:16px 12px;
  border:1.5px solid var(--lab-line);border-radius:10px;
  background:#fff;transition:border-color .15s,background .15s,transform .1s;
  min-height:44px;
}
.lab-size:hover .lab-size-inner{border-color:var(--lab-brown)}
.lab-size input:checked + .lab-size-inner{
  border-color:var(--lab-brown);background:var(--lab-cream);
  box-shadow:inset 0 0 0 1px var(--lab-brown);
}
.lab-size input:focus-visible + .lab-size-inner{
  outline:3px solid var(--lab-gold);outline-offset:2px;
}
.lab-size-qty{font-weight:700;font-size:17px;color:var(--lab-ink)}
.lab-size-price{font-size:14px;color:var(--lab-muted)}
.lab-size input:checked + .lab-size-inner .lab-size-price{color:var(--lab-brown)}

/* ---------- Counter ---------- */

.lab-counter{margin:0 0 18px}
.lab-counter-text{font-size:15px;color:var(--lab-ink)}
.lab-counter-text strong{color:var(--lab-brown)}
.lab-counter.is-full .lab-counter-text{color:#2E7D5B}
.lab-counter.is-over .lab-counter-text{color:#B3261E}

.lab-progress{
  display:block;height:5px;margin-top:8px;
  background:var(--lab-line);border-radius:99px;overflow:hidden;
}
.lab-progress-bar{
  display:block;height:100%;width:0;
  background:var(--lab-brown);border-radius:99px;
  transition:width .18s ease;
}
.lab-counter.is-full .lab-progress-bar{background:#2E7D5B}
.lab-counter.is-over .lab-progress-bar{background:#B3261E}

/* ---------- Step 2: praline grid ---------- */

.lab-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}

.lab-item{
  border:1px solid var(--lab-line);border-radius:10px;
  padding:12px;text-align:center;background:#fff;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s;
}
.lab-item.is-picked{border-color:var(--lab-brown);background:var(--lab-cream)}

.lab-item-img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:6px;display:block;
}
.lab-item-name{
  font-size:13.5px;line-height:1.35;color:var(--lab-ink);
  flex:1;display:flex;align-items:center;justify-content:center;
}

.lab-stepper{
  display:flex;align-items:center;justify-content:center;gap:0;
  border:1px solid var(--lab-line);border-radius:8px;overflow:hidden;
}
.lab-stepper button{
  width:44px;height:44px;flex:none;
  border:0;background:#fff;cursor:pointer;
  font-size:20px;line-height:1;color:var(--lab-brown);
  transition:background .12s;
}
.lab-stepper button:hover:not(:disabled){background:var(--lab-cream)}
.lab-stepper button:disabled{opacity:.3;cursor:not-allowed}
.lab-stepper button:focus-visible{outline:3px solid var(--lab-gold);outline-offset:-3px}

.lab-qty{
  width:100%;min-width:44px;height:44px;
  border:0;border-left:1px solid var(--lab-line);border-right:1px solid var(--lab-line);
  text-align:center;font-size:16px;font-weight:600;color:var(--lab-ink);
  background:#fff;-moz-appearance:textfield;appearance:textfield;
  border-radius:0;padding:0;
}
.lab-qty::-webkit-outer-spin-button,
.lab-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lab-qty:focus-visible{outline:3px solid var(--lab-gold);outline-offset:-3px}

.lab-hint{margin:14px 0 0;font-size:13px;color:var(--lab-muted)}
.lab-warning{padding:14px 16px;background:var(--lab-cream);border-radius:8px;color:var(--lab-brown)}

.lab-price-from{color:var(--lab-brown)}

/* Add-to-cart button while the box is incomplete */
.lab-locked{opacity:.45;cursor:not-allowed !important;pointer-events:none}

@media (max-width:520px){
  .lab-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .lab-sizes{gap:8px}
  .lab-size{flex:1 1 100px;min-width:100px}
}