@charset "UTF-8";
/* ==========================================================================
   cart.css — ショッピングカートページ
   読み込み順：normalize.css → bootstrap.min.css → common.css → cart.css
   ・common.css の共通コンポーネント（.crumbs / .btn / .qty / .toast など）は
     再定義しない。ここはこのページ固有のパーツのみ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ページ見出し（タイトル＋件数）
   -------------------------------------------------------------------------- */
.cart{padding-block:14px 32px}
.cart__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px 16px;
  margin-bottom:16px;
}
.cart__title{font-size:22px;font-weight:700;line-height:1.35;letter-spacing:.01em;color:var(--navy)}
.cart__count{font-size:14px;font-weight:600;color:var(--muted)}
.cart__count b{font-size:17px;color:var(--cta)}
.cart__lead{margin-top:5px;font-size:11.5px;color:var(--muted)}
.cart__back{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:600;
  color:var(--cta);
  transition:color .16s var(--ease);
}
.cart__back::before{content:"‹";font-size:15px;line-height:1}
.cart__back:hover{color:var(--cta-dark)}

/* --------------------------------------------------------------------------
   2. レイアウト（左：商品リスト／右：ご注文内容）
   -------------------------------------------------------------------------- */
.cart__grid{--bs-gutter-x:var(--gap);--bs-gutter-y:18px}

/* --------------------------------------------------------------------------
   3. 在庫切れの注意喚起（Bootstrap の .alert を土台にする）
   -------------------------------------------------------------------------- */
.cart-alert{
  --bs-alert-padding-y:12px;
  --bs-alert-padding-x:14px;
  --bs-alert-margin-bottom:12px;
  --bs-alert-bg:rgba(224,93,87,.07);
  --bs-alert-border-color:rgba(224,93,87,.35);
  --bs-alert-color:var(--ink);
  --bs-alert-border-radius:var(--radius-sm);
  gap:8px 12px;
  border-left:4px solid var(--red);
}
.cart-alert > .bi{flex:0 0 auto;font-size:19px;color:var(--red)}
.cart-alert__text{flex:1 1 220px;margin-bottom:0;font-size:12px;line-height:1.6;color:var(--ink)}
.cart-alert__text b{color:var(--red)}
.cart-alert__btn{
  --bs-btn-color:var(--red);
  --bs-btn-bg:var(--white);
  --bs-btn-border-color:var(--red);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--red);
  --bs-btn-hover-border-color:var(--red);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--red);
  --bs-btn-active-border-color:var(--red);
  --bs-btn-padding-y:7px;
  --bs-btn-padding-x:14px;
  --bs-btn-font-size:11.5px;
}

/* --------------------------------------------------------------------------
   4. 商品リスト
   -------------------------------------------------------------------------- */
/* 購入する商品を選ぶバー（一覧の上） */
.cart-pick{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 14px;
  margin-bottom:10px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--blue);
}
.cart-pick__all{display:flex;align-items:center;gap:9px;margin:0;cursor:pointer}
.cart-pick__all .form-check-input{width:18px;height:18px;margin:0;cursor:pointer}
.cart-pick__all .form-check-input:checked{background-color:var(--cta);border-color:var(--cta)}
.cart-pick__all .form-check-input:focus{border-color:var(--cta);box-shadow:0 0 0 3px rgba(30,123,239,.18)}
.cart-pick__label{font-size:12.5px;font-weight:700;color:var(--navy)}
.cart-pick__count{margin:0;font-size:11.5px;color:var(--muted)}
.cart-pick__count b{font-size:13px;color:var(--navy)}

.cart-list{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden}
.cart-item{display:grid;grid-template-columns:auto 104px minmax(0,1fr);gap:12px 16px;padding:16px}
.cart-item + .cart-item{border-top:1px solid var(--line)}
/* 購入対象のチェック（在庫切れは選択不可） */
.cart-item__pick{display:flex;align-items:flex-start;padding-top:5px;cursor:pointer}
.cart-item__pick .form-check-input{width:18px;height:18px;margin:0;cursor:pointer}
.cart-item__pick .form-check-input:checked{background-color:var(--cta);border-color:var(--cta)}
.cart-item__pick .form-check-input:focus{border-color:var(--cta);box-shadow:0 0 0 3px rgba(30,123,239,.18)}
.cart-item__pick .form-check-input:disabled{cursor:not-allowed;background-color:var(--bg);border-color:var(--line-strong)}
.cart-item__thumb{
  display:block;
  align-self:start;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--bg);
}
.cart-item__thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.cart-item__body{display:flex;flex-direction:column;gap:11px;min-width:0}

/* 在庫切れの行は控えめに見せ、操作は削除のみ可能にする */
.cart-item.is-out .cart-item__thumb img{opacity:.5;filter:grayscale(.65)}
.cart-item.is-out .cart-item__title a{color:var(--muted)}
.cart-item.is-out .cart-item__now{color:var(--muted)}
.cart-item.is-out .cart-item__off{background:var(--line);color:var(--muted)}
.cart-item.is-out .qty{border-color:var(--line);background:var(--bg)}
.cart-item.is-out .cart-item__del{color:var(--red)}

.cart-item__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px}
.cart-item__info{flex:1 1 220px;min-width:0}
.cart-item__title{font-size:14px;font-weight:700;line-height:1.6}
.cart-item__title a{color:var(--navy);transition:color .16s var(--ease)}
.cart-item__title a:hover{color:var(--cta)}
/* 在庫状態バッジ（在庫切れ／残りわずか） */
.cart-item__badge{
  display:inline-block;
  margin:0 6px 2px 0;
  padding:1px 6px;
  border-radius:3px;
  background:rgba(238,178,92,.18);
  color:#a9762a;
  font-size:10.5px;
  font-weight:700;
  line-height:1.7;
  vertical-align:2px;
}
.cart-item__badge--out{background:rgba(224,93,87,.14);color:var(--red)}
.cart-item__opts{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.cart-item__opts b{font-weight:600;color:var(--ink)}

/* 価格・原価・割引率 */
.cart-item__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;white-space:nowrap}
.cart-item__now{font-size:16px;font-weight:700;color:var(--navy)}
.cart-item__was{font-size:12px;color:var(--muted);text-decoration:line-through}
.cart-item__off{padding:1px 5px;border-radius:3px;background:rgba(224,93,87,.12);color:var(--red);font-size:10.5px;font-weight:700;line-height:1.6}

/* 数量・小計・削除 */
.cart-item__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.cart-item__actions{display:flex;align-items:center;gap:16px;margin-left:auto}
.cart-item__sum{font-size:11.5px;color:var(--muted)}
.cart-item__sum b{margin-left:6px;font-size:15px;font-weight:700;color:var(--navy)}
.cart-item__del{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 2px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:11.5px;
  cursor:pointer;
  transition:color .16s var(--ease);
}
.cart-item__del .bi{font-size:14px}
.cart-item__del:hover{color:var(--red)}

/* --------------------------------------------------------------------------
   5. カートが空のとき
   -------------------------------------------------------------------------- */
.cart-empty{padding:38px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);text-align:center}
.cart-empty__title{font-size:15px;font-weight:700;color:var(--navy)}
.cart-empty__text{margin-top:6px;font-size:12px;color:var(--muted)}
.cart-empty .btn{margin-top:14px;padding-inline:20px}

/* --------------------------------------------------------------------------
   6. 安心表示（商品リスト下）
   -------------------------------------------------------------------------- */
.cart-assure{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 2px 0;padding:0;list-style:none;font-size:11.5px;color:var(--muted)}
.cart-assure li{display:inline-flex;align-items:center;gap:6px}
.cart-assure li::before{content:"✓";font-size:11px;font-weight:700;color:var(--cta)}

/* --------------------------------------------------------------------------
   7. ご注文内容（右カラム）
   -------------------------------------------------------------------------- */
.cart-summary{
  position:sticky;
  top:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  overflow:hidden;
}
.cart-summary__head{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg);font-size:13.5px;font-weight:700;color:var(--navy)}

/* 金額明細 */
.cart-summary__rows{display:grid;gap:9px;margin:0;padding:14px 16px}
.cart-summary__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px}
.cart-summary__row dt{color:var(--muted)}
.cart-summary__row dd{margin:0;font-size:13px;font-weight:700;color:var(--navy)}
.cart-summary__row--total{margin-top:3px;padding-top:12px;border-top:1px solid var(--line-strong)}
.cart-summary__row--total dt{font-size:14px;font-weight:700;color:var(--navy)}
.cart-summary__row--total dd{font-size:23px;line-height:1.2}

/* 在庫切れの商品は合計に含まれない旨 */
.cart-summary__stock{margin:0 16px;padding:9px 11px;border-radius:var(--radius-sm);background:rgba(224,93,87,.07);font-size:11px;line-height:1.6;color:var(--ink)}
.cart-summary__stock b{color:var(--red)}

/* 送料無料までの進捗 */
.cart-ship{padding:0 16px 14px}
.cart-ship__bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.cart-ship__fill{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--cta));transition:width .3s var(--ease)}
.cart-ship__text{margin-top:7px;font-size:11px;color:var(--muted)}
.cart-ship.is-free .cart-ship__fill{width:100%}
.cart-ship.is-free .cart-ship__text{color:var(--cta);font-weight:600}

/* レジへ進む */
.cart-summary__cta{padding:14px 16px 16px;border-top:1px solid var(--line)}
.cart-summary__checkout{width:100%;padding:12px;font-size:13.5px}
/* 購入できる商品がないときはレジへ進めない（<a> なので disabled 属性でなく class で制御） */
.cart-summary__checkout.is-disabled{opacity:.5;pointer-events:none}
.cart-summary__continue{display:block;margin-top:9px;text-align:center;font-size:12px;font-weight:600;color:var(--cta);transition:color .16s var(--ease)}
.cart-summary__continue:hover{color:var(--cta-dark)}
.cart-summary__note{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.7;color:var(--muted)}

/* --------------------------------------------------------------------------
   8. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width:991px){
  /* 1カラムになるため追従を解除 */
  .cart-summary{position:static}
}

@media (max-width:767px){
  .cart-item{grid-template-columns:auto 84px minmax(0,1fr);gap:10px 12px;padding:13px}
  .cart-item__price{width:100%}
}

@media (max-width:575px){
  .cart__title{font-size:19px}
  .cart__count b{font-size:16px}
  .cart-item{grid-template-columns:auto 72px minmax(0,1fr);padding:12px}
  .cart-item__pick{padding-top:3px}
  .cart-item__pick .form-check-input{width:16px;height:16px}
  .cart-item__title{font-size:13.5px}
  .cart-item__actions{width:100%;justify-content:space-between;margin-left:0}
  .cart-summary__row--total dd{font-size:21px}
}