/* Sachin Bundle Builder - front office */
.sb-builder,
.sb-review,
.sb-history,
.sb-order-boxes {
  --sb-btn-bg: #f26522;
  --sb-btn-color: #ffffff;
  --sb-ink: #2b2b2b;
  --sb-muted: #6b6b6b;
  --sb-line: #e6e6e6;
  --sb-soft: #f2f2f3;
  --sb-dark: #000000;
  --sb-grey: #a9a9a9;
  --sb-danger: #d23b3b;
  --sb-radius: 10px;
  color: var(--sb-ink);
}

/* ---------- headings ---------- */
.sb-head { text-align: center; margin: 1.5rem 0 1.25rem; }
.sb-head__title { font-size: 1.75rem; font-weight: 500; margin: 0 0 .35rem; color: var(--sb-ink); }
.sb-head__subtitle { color: var(--sb-muted); margin: 0; }

/* ---------- buttons ---------- */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 46px; padding: .55rem 1.25rem; border: 0; border-radius: 8px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.sb-btn:hover { filter: brightness(.94); text-decoration: none; }
.sb-btn:focus-visible, .sb-stepper__btn:focus-visible, .sb-link:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.sb-btn[disabled], .sb-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.sb-btn--add { width: 100%; background: var(--sb-btn-bg); color: var(--sb-btn-color); }
.sb-btn--back { background: var(--sb-grey); color: #fff; border: 2px solid #8b8b8b; }
.sb-btn--next, .sb-btn--checkout { background: var(--sb-dark); color: #fff; }
.sb-btn--secondary { background: #6c6f75; color: #fff; }
.sb-btn--sm { min-height: 38px; padding: .4rem 1rem; font-size: .9rem; }
.sb-btn--back:hover, .sb-btn--next:hover, .sb-btn--checkout:hover, .sb-btn--secondary:hover { color: #fff; }

.sb-link { background: none; border: 0; padding: 0; font-weight: 600; color: var(--sb-ink); cursor: pointer; text-decoration: none; }
.sb-link:hover { text-decoration: underline; color: var(--sb-ink); }
.sb-link--danger, .sb-link--danger:hover { color: var(--sb-danger); }

/* ---------- toolbar / search ---------- */
.sb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sb-toolbar__box { font-size: .9rem; color: var(--sb-muted); background: var(--sb-soft); border-radius: 999px; padding: .3rem .8rem; }
.sb-search { margin-left: auto; display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--sb-ink); padding: .35rem .25rem; width: min(260px, 100%); color: var(--sb-ink); }
.sb-search__input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 1rem; }

/* ---------- product grid ---------- */
.sb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding-bottom: 2rem; }
.sb-card {
  display: flex; flex-direction: column; background: var(--sb-soft); border: 1px solid var(--sb-line);
  border-radius: 14px; padding: .65rem; min-width: 0;
}
.sb-card[hidden] { display: none; }
.sb-card__media { aspect-ratio: 1 / 1.15; border-radius: var(--sb-radius); overflow: hidden; background: #fff; }
.sb-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-card__body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem .25rem .5rem; gap: .6rem; }
.sb-card__name { font-size: 1.05rem; font-weight: 400; margin: 0; line-height: 1.35; min-height: 2.7em; color: var(--sb-ink); }
.sb-card__price { margin-top: auto; font-weight: 700; font-size: 1.05rem; }
.sb-card__regular { color: var(--sb-muted); font-weight: 400; margin-right: .5rem; }
.sb-card__action { min-height: 52px; display: flex; align-items: stretch; }
.sb-card__soldout { width: 100%; display: flex; align-items: center; justify-content: center; color: var(--sb-muted); font-weight: 600; background: #e4e4e4; border-radius: 8px; }
.sb-card.is-out .sb-card__img { opacity: .55; }
.sb-card.is-busy { opacity: .7; pointer-events: none; }

.sb-card__options { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; }
.sb-option { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; flex: 1 1 110px; min-width: 0; margin: 0; }
.sb-option__label { font-size: .75rem; color: var(--sb-muted); text-transform: uppercase; letter-spacing: .03em; }
.sb-option__select { width: 100%; border: 1px solid #cfcfcf; border-radius: 6px; padding: .35rem .5rem; background: #fff; font-size: .9rem; }

/* ---------- quantity stepper ---------- */
.sb-stepper { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: #e9e9ea; border-radius: 8px; padding: 4px; }
.sb-stepper[hidden] { display: none; }
.sb-stepper__btn {
  flex: 0 0 auto; width: 34%; min-height: 44px; border: 0; border-radius: 6px;
  background: var(--sb-btn-bg); color: var(--sb-btn-color); font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.sb-stepper__btn[disabled] { opacity: .4; cursor: not-allowed; }
.sb-stepper__qty { flex: 1; text-align: center; font-size: 1.1rem; font-weight: 500; }
.sb-stepper--sm, .sb-stepper--xs { width: auto; display: inline-flex; background: transparent; padding: 0; gap: .65rem; }
.sb-stepper--sm .sb-stepper__btn { width: 32px; min-height: 32px; font-size: 1.1rem; border-radius: 5px; }
.sb-stepper--xs .sb-stepper__btn { width: 28px; min-height: 28px; font-size: 1rem; border-radius: 5px; }
.sb-stepper--sm .sb-stepper__qty, .sb-stepper--xs .sb-stepper__qty { min-width: 1.5rem; font-size: 1rem; }

/* ---------- bottom tray ---------- */
.sb-builder { padding-bottom: 210px; }
.sb-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; pointer-events: none; }
.sb-tray__inner {
  pointer-events: auto; max-width: 1500px; margin: 0 auto; background: #fff;
  border-top: 1px solid var(--sb-line); box-shadow: 0 -6px 24px rgba(0, 0, 0, .08); padding: .75rem 1rem 1rem;
}
.sb-tray__items { position: relative; max-width: 1180px; margin: 0 auto; }
.sb-tray__count {
  position: absolute; top: -2.15rem; left: 50%; transform: translateX(-50%);
  background: #000; color: #fff; border-radius: 10px; padding: .2rem .75rem; font-weight: 700; font-size: .95rem;
}
.sb-tray__list { list-style: none; margin: 0; padding: .35rem .25rem .5rem; display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: thin; }
.sb-tray__item { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; min-width: 220px; max-width: 280px; }
.sb-tray__img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--sb-line); }
.sb-tray__meta { display: flex; flex-direction: column; min-width: 0; font-size: .9rem; }
.sb-tray__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tray__combo { color: var(--sb-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tray__remove {
  position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #fff; background: #000; color: #fff; font-size: 13px; line-height: 1; padding: 0; cursor: pointer;
}
.sb-tray__empty, .sb-tray__hint { margin: .25rem 0 .5rem; text-align: center; color: var(--sb-muted); font-size: .9rem; }
.sb-tray__hint { color: #b45309; }
.sb-tray__bar {
  max-width: 1180px; margin: .5rem auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  background: var(--sb-soft); border-radius: 10px; padding: .5rem;
}
.sb-tray__bar .sb-btn { width: min(280px, 100%); }
.sb-tray__bar .sb-btn--next { justify-self: end; }
.sb-tray__total { font-size: 1.2rem; text-align: center; white-space: nowrap; }
.sb-tray__total span { font-weight: 700; margin-right: .4rem; }
.sb-tray__total strong { font-weight: 600; }

.sb-toast {
  position: fixed; left: 50%; bottom: 200px; transform: translateX(-50%); z-index: 1040;
  max-width: min(92vw, 520px); background: #222; color: #fff; padding: .75rem 1.1rem; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); white-space: pre-line;
}
.sb-empty { text-align: center; color: var(--sb-muted); padding: 2rem 0; }

/* ---------- review ---------- */
.sb-review__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; margin-bottom: 3rem; }
.sb-rbox { display: flex; gap: 1.25rem; border: 2px solid var(--sb-line); padding: 1.25rem; margin-bottom: 1rem; background: #fff; }
.sb-rbox.is-busy { opacity: .6; pointer-events: none; }
.sb-rbox__icon { flex: 0 0 72px; color: #2b2b2b; padding-top: 1.5rem; }
.sb-gift { width: 72px; height: 72px; }
.sb-rbox__main { flex: 1; min-width: 0; }
.sb-rbox__head { display: flex; justify-content: space-between; gap: 1rem; }
.sb-rbox__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .2rem; color: #6b4b16; }
.sb-rbox__count { font-weight: 400; color: var(--sb-muted); font-size: .95rem; margin-left: .35rem; }
.sb-rbox__meta { font-size: .8rem; color: var(--sb-muted); margin-bottom: .45rem; display: flex; gap: .5rem; align-items: center; }
.sb-rbox__side { text-align: right; flex: 0 0 auto; }
.sb-rbox__price { font-size: 1rem; }
.sb-rbox__subtotal { color: var(--sb-muted); font-size: .85rem; }
.sb-rbox__links { margin-top: .5rem; display: flex; gap: .9rem; justify-content: flex-end; }
.sb-rbox__items { list-style: none; margin: 1rem 0 0; padding: 0; }
.sb-ritem { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: .45rem 0; color: #6b6b6b; font-weight: 600; }
.sb-ritem + .sb-ritem { border-top: 1px dashed var(--sb-line); }
.sb-ritem__img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.sb-ritem__name small { display: block; font-weight: 400; font-size: .8rem; }
.sb-ritem__price { color: var(--sb-ink); min-width: 80px; text-align: right; }
.sb-alert { background: #fff7e6; color: #8a5300; border-radius: 6px; padding: .5rem .75rem; margin: .75rem 0 0; font-size: .9rem; }
.sb-pill { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .5rem; border-radius: 999px; background: #e8f3ea; color: #1f7a35; }
.sb-pill--building { background: #eef1f6; color: #3d4b63; }
.sb-pill--ordered { background: #fff1e6; color: #9a4a00; }

.sb-summary { background: var(--sb-soft); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; position: sticky; top: 1rem; }
.sb-summary__title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: #6b4b16; }
.sb-summary__row { display: flex; justify-content: space-between; font-size: .95rem; color: #6b4b16; margin-bottom: .5rem; }
.sb-summary__error { margin: 0; color: var(--sb-danger); font-size: .9rem; white-space: pre-line; }
.sb-summary .sb-btn { width: 100%; }
.sb-review-empty { text-align: center; padding: 3rem 1rem; color: var(--sb-muted); border: 2px dashed var(--sb-line); }
.sb-review-empty .sb-gift { opacity: .4; margin-bottom: 1rem; }

/* ---------- history / order detail ---------- */
.sb-history__intro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; color: var(--sb-muted); }
.sb-hbox { border: 1px solid var(--sb-line); border-radius: var(--sb-radius); padding: 1rem; margin-bottom: 1rem; background: #fff; }
.sb-hbox__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sb-hbox__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .25rem; }
.sb-hbox__meta { font-size: .85rem; color: var(--sb-muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sb-hbox__total { text-align: right; display: flex; flex-direction: column; }
.sb-hbox__total span { font-size: .8rem; color: var(--sb-muted); }
.sb-hbox__items { list-style: none; padding: 0; margin: .75rem 0 0; }
.sb-hbox__items li { display: flex; align-items: center; gap: .75rem; padding: .3rem 0; font-size: .9rem; }
.sb-hbox__items img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.sb-hbox__qty { margin-left: auto; white-space: nowrap; }
.sb-hbox__actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .75rem; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .sb-review__layout { grid-template-columns: 1fr; }
  .sb-summary { position: static; }
}
@media (max-width: 767.98px) {
  .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .sb-card { padding: .45rem; }
  .sb-card__name { font-size: .92rem; }
  .sb-card__price { font-size: .95rem; }
  .sb-btn { min-height: 42px; font-size: .92rem; padding: .5rem .75rem; }
  .sb-stepper__btn { min-height: 38px; }
  .sb-toolbar { flex-wrap: wrap; }
  .sb-search { width: 100%; }
  .sb-tray__inner { padding: .5rem .5rem .6rem; }
  .sb-tray__item { min-width: 170px; }
  .sb-tray__img { width: 46px; height: 46px; }
  .sb-tray__bar { grid-template-columns: auto 1fr auto; gap: .5rem; }
  .sb-tray__bar .sb-btn { width: auto; min-width: 84px; }
  .sb-tray__total { font-size: 1rem; }
  .sb-builder { padding-bottom: 190px; }
  .sb-rbox { padding: .85rem; gap: .75rem; }
  .sb-rbox__icon { flex-basis: 40px; padding-top: .25rem; }
  .sb-gift { width: 40px; height: 40px; }
  .sb-rbox__head { flex-direction: column; }
  .sb-rbox__side { text-align: left; }
  .sb-rbox__links { justify-content: flex-start; }
  .sb-ritem { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .sb-ritem__price { grid-column: 2; text-align: left; min-width: 0; }
  .sb-ritem .sb-stepper { grid-column: 3; grid-row: 1 / span 2; }
}