/* =====================================================================
   Selected Items Bar — 選択商品バー（PC/タブレット=固定バー / スマホ=ボトムシート）
   ===================================================================== */
.sel-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  transform: translateY(120%);
  transition: transform .5s cubic-bezier(.7, 0, .2, 1);
  pointer-events: none;
}
.sel-bar.show { transform: translateY(0); pointer-events: auto; }

.sel-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 15px 24px;
  background: rgba(247, 243, 236, .82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 44px rgba(43, 39, 35, .13);
}

.sel-track {
  flex: 1; min-width: 0;
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px;
  scroll-behavior: smooth;
}
.sel-track::-webkit-scrollbar { height: 6px; }
.sel-track::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }

.sel-card {
  position: relative; flex: 0 0 auto; width: 118px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; text-align: center;
  animation: selIn .35s cubic-bezier(.7, 0, .2, 1);
}
@keyframes selIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.sel-thumb {
  aspect-ratio: 3/4; background: var(--ivory-deep); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; letter-spacing: .2em; color: rgba(43, 39, 35, .3);
  text-transform: uppercase; margin-bottom: 7px;
}
.sel-name {
  font-family: var(--mincho); font-size: 11px; color: var(--ink); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sel-price { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink); margin-top: 2px; }
.sel-remove {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--ivory); border: none; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.sel-remove:hover { background: var(--rust); transform: scale(1.12); }

.sel-summary { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.sel-totals { font-family: var(--mincho); font-size: 13px; color: var(--ink); white-space: nowrap; }
.sel-totals .sel-total { font-family: var(--serif); font-style: italic; font-size: 21px; }
.sel-addall {
  background: var(--ink); color: var(--ivory); border: none; cursor: pointer;
  padding: 15px 30px; border-radius: 12px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  transition: background .35s, transform .2s;
}
.sel-addall:hover { background: var(--gold); }
.sel-addall:active { transform: scale(.97); }

.sel-handle { display: none; }

/* --- スマホ: コンパクトなボトムシート（既定は畳んでハンドルのみ） --- */
@media (max-width: 760px) {
  .sel-inner {
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 12px 16px 16px; max-height: 72vh;
  }
  .sel-handle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 13px; letter-spacing: .06em; color: var(--ink); padding: 4px 0;
  }
  .sel-handle-count {
    background: var(--gold); color: var(--ivory); border-radius: 50%;
    min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
  }
  .sel-handle-caret { transition: transform .3s; color: var(--ink-soft); }
  .sel-bar.expanded .sel-handle-caret { transform: rotate(180deg); }

  .sel-track, .sel-summary { display: none; }
  .sel-bar.expanded .sel-track { display: flex; }
  .sel-bar.expanded .sel-summary { display: flex; justify-content: space-between; width: 100%; }
  .sel-addall { flex: 1; }
}