:root{ --brand:#0d6efd; }

/* Generic layout */
.wizard-step{ display:none; }
.wizard-step.active{ display:block; }

.price-badge{ font-weight:600; }
.accordion-button:not(.collapsed){ background:#f8f9fa; }
.form-help{ font-size:.875rem; color:#6c757d; }

/* Sandwich picker */
.sp-btn{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.sp-head{ display:flex; align-items:center; min-width:0; gap:.5rem; }
.sp-meta{ min-width:0; }
.sp-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 350px; }

/* Make the dropdown menu stretch to full button width */
.dropdown .dropdown-menu.sp-menu{
  width:100%;
  min-width:100%;
  left:0;              /* ensure aligns to left of button */
  right:0;             /* allow full width alignment under button */
  padding:0;
  max-height:320px;
  overflow:auto;
}

/* Thumbnail sizes (smaller by default, scale a bit on larger screens) */
.sp-thumb{
  width:36px;
  height:36px;
  border-radius:.5rem;
  object-fit:cover;
  background:#f1f3f5;
  flex:0 0 36px;
}

@media (min-width: 992px){
  .sp-thumb{ width:44px; height:44px; flex-basis:44px; }
}

/* Tighter name width on small screens so it doesn’t overflow */
@media (max-width: 576px){
  .sp-name{ max-width: 180px; }
}

/* Hover state for items */
.sp-item{ cursor:pointer; }
.sp-item:hover{ background:#f8f9fa; }


/* Make it nicely responsive without phone mockup */
@media (max-width: 576px){
  .sp-name{ max-width: 200px; }
}