/* Bottom-to-top slide modal */
    .modal.fade .modal-dialog {
      transform: translateY(100%);
      transition: transform .38s cubic-bezier(0.32, 0.72, 0, 1);
      margin: 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      max-width: 430px;
      left: 50%;
      transform: translate(-50%, 100%);
    }
    .modal.show .modal-dialog {
      transform: translate(-50%, 0);
    }

    /* Item details/add-ons sheet: sit 5px above the fixed bottom action bar */
    .modal.fade.item-modal .modal-dialog {
      bottom: 70px;
    }

    /* Rounded top for the sheet */
    .modal-content {
      border-top-left-radius: 1.4rem;
      border-top-right-radius: 1.4rem;
      border: 1px solid #e3ddd0;
      box-shadow: 0 -8px 30px rgba(0,0,0,.14);
      background: #ffffff;
    }

    /* Handle */
    .sheet-handle {
      width: 44px; height: 4px; border-radius: 99px;
      background: #e2ded3; margin: .85rem auto 0.4rem auto;
    }

    /* Row cards like your image */
    .option-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      background: #ffffff;
      border: 1px solid #e8e8e8;
      border-radius: 14px;
      padding: .85rem .75rem;
      box-shadow: none;
    }
    .opt-left{
      display:flex; align-items:center; gap:.6rem;
      color:#1f2430;
    }
    .size-chip {
      height: 18px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 600; font-size: 0.7rem; color: #333333;
      background: #f5f5f5; border: 1px solid #e0e0e0; padding: 0px 6px;
    }
    .price {
      font-weight: 600;
      color: #111111;
      font-size:10pt;
    }

    /* Quantity control (pill) */
    .qty-wrap {
      display: inline-flex; align-items: center; gap:.4rem;
    }
    .qty-wrap .btn, .qty-wrap .form-control {
      border-radius: 10px;
      height: 36px;
    }
    .qty-wrap .btn {
      padding: 0 .9rem;
      line-height: 36px;
    }
    .qty-wrap .form-control {
      width: 76px; text-align: center; font-weight: 600;
      padding: 0;
    }

    /* Update Basket button (full-width, like screenshot) */
    .btn-basket {
      width: 100%;
      border-radius: 14px;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.01em;
      padding: 10px 0;
      border: 1px solid #111111;
      background: #111111;
      color: #ffffff;
      box-shadow: 0 8px 20px rgba(18, 24, 38, 0.18);
      transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-basket:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(18, 24, 38, 0.34);
      filter: brightness(1.04);
    }
    .btn-basket:active:not(:disabled) {
      transform: translateY(0);
    }
    .btn-basket:disabled {
      opacity: 1;
      cursor: default;
    }

    @media (min-width: 768px){
      .modal-dialog { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
      .modal-body { padding: 1rem 1.25rem 0 1.25rem; }

        /* ── Responsive: wider modals on tablets / desktops ── */
        @media (min-width: 768px) {
          .modal.fade .modal-dialog {
            max-width: 580px;
          }
        }
        @media (min-width: 1200px) {
          .modal.fade .modal-dialog {
            max-width: 680px;
          }
        }
    }

    .btn-step{border: 1px solid #d9d4c8; border-radius: 12px; background: #fff; padding:10px 20px;}
    .btn-step:hover{background: #f7f5f0;}

/* ── Item details / add-ons sheet (view-only, content-sized up to 80% of viewport) ── */
.addon-modal-content {
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top-left-radius: 1.6rem;
  border-top-right-radius: 1.6rem;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.18);
}
.addon-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 1.1rem 1.1rem;
}
.addon-modal-img-wrap {
  width: 100%;
  background: #f4f2ec;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -1.1rem 0.85rem;
  width: calc(100% + 2.2rem);
}
.addon-modal-img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  display: block;
}
.addon-modal-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
  color: #1f2430;
}
.addon-modal-desc {
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 0.85rem;
}
.addon-modal-prices {
  margin-bottom: 1rem;
}
.addon-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8478;
  font-weight: 700;
  margin-bottom: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eee9de;
}
.addon-group-compact {
  margin-bottom: 0.85rem;
}
.addon-group-compact + .addon-group-compact {
  padding-top: 0.85rem;
  border-top: 1px solid #ececec;
}
.addon-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.addon-group-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: #1f2430;
}
.addon-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.addon-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1f2430;
}
.addon-chip-price {
  color: #6b7280;
  font-weight: 600;
}