﻿/* ===============================
   追従カートバー レスポンシブ完全版
   ※ 枠線・背景削除済み
=============================== */

/* ===== 追従フォームの枠線・背景を完全削除 ===== */

#floating-cart-bar .cart-clone-inner{
  background: transparent !important;
}

#floating-cart-bar .cart-clone-inner > div:first-child{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ===============================
   レイアウト本体
=============================== */

#floating-cart-bar .cart-clone-inner{
 max-width:1200px;
  margin:0 auto;
 /* width:100%; ← これ削除 */
justify-content:center; 
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

#floating-cart-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#fff;
  box-shadow:0 -2px 10px rgba(0,0,0,0.15);
  padding:15px;
  display:none;
  z-index:9999;
}

/* ===============================
   価格
=============================== */

#floating-cart-bar .price--box{
  margin:0 !important;
  flex:0 0 auto;
  min-width:150px;
  white-space:nowrap;
}

/* ===============================
   サイズ
=============================== */

#floating-cart-bar select{
  flex:1 1 220px;
  min-width:160px;
  height:38px;
}

/* ===============================
   数量（横並び）
=============================== */

#floating-cart-bar .__body{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

#floating-cart-bar .__input{
  display:flex !important;
  align-items:center;
  gap:6px;
}

#floating-cart-bar #qty-input{
  width:65px !important;
  height:36px;
  text-align:center;
}

#floating-cart-bar .__spin{
  display:flex !important;
  flex-direction:row !important;
  gap:4px;
}

#floating-cart-bar .__minus,
#floating-cart-bar .__plus{
  width:30px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ccc;
  cursor:pointer;
}

/* ===============================
   カートボタン
=============================== */

#floating-cart-bar .__add-cart{
  margin:0 !important;
  flex:0 0 auto;
}

#floating-cart-bar #addcart-btn{
  height:40px;
  padding:0 28px;
  white-space:nowrap;
}

/* ===============================
   お問い合わせ非表示
=============================== */

#floating-cart-bar .__contact-link{
  display:none !important;
}

/* ===============================
   768px以下
=============================== */

@media (max-width:768px){

  #floating-cart-bar .cart-clone-inner{
    gap:12px;
  }

  #floating-cart-bar select{
    flex:1 1 100%;
  }

  #floating-cart-bar #addcart-btn{
    flex:1 1 100%;
  }

}
/* ===============================
   追従バー：数量ラベルの余白削除
=============================== */

#floating-cart-bar label{
  width:auto !important;
  margin:0 6px 0 0 !important;
}

#floating-cart-bar .__body{
  margin:0 !important;
}

/* ===============================
   追従バー：数量ラベル縦中央揃え
=============================== */

#floating-cart-bar div[style*="align-items:flex-start"]{
  align-items:center !important;
}

#floating-cart-bar label{
  display:flex;
  align-items:center;
  margin-top:0 !important;
}

/* ===============================
   追従バー：サイズと数量の縦位置揃え
=============================== */

/* 数量行を中央揃え */
#floating-cart-bar div[style*="margin-bottom:15px"]{
  align-items:center !important;
}

/* 数量ラベルの余計な上マージン削除 */
#floating-cart-bar label{
  margin-top:0 !important;
  line-height:1 !important;
}

/* select と input の高さを統一 */
#floating-cart-bar select,
#floating-cart-bar #qty-input{
  height:38px;
  box-sizing:border-box;
}

/* ===============================
   追従バー：仕様・数量の下マージン削除
=============================== */

#floating-cart-bar div[style*="margin-bottom:15px"],
#floating-cart-bar div[style*="margin-bottom:10px"]{
  margin-bottom:0 !important;
}

/* ===============================
   スマホでは追従カート非表示
=============================== */

@media (max-width:768px){
  #floating-cart-bar{
    display:none !important;
  }
}
